zebu
Automated Testing Specialist
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
Introduction:
This tutorial is on how to create a simple array re-orderer in Javascript.
HTML:
We are going to have a few HTML elements, here are the details...
Textarea, named area, to contain the original list.
Button, to reverse the list.
Button, to sort the list a-z.
Button, to sort the list z-a.
Button, to randomise the list.
Reverse:
As you can see from the HTML buttons, the reverseList button runs the javascript function 'reverseList' when it is clicked ('onclicked')...
We simply get all the lines from the textarea 'area' and put them in to a new variable/array 'lines'. We then reverse the array, reset the textareas value to nothing and then add each line in 'lines' to the 'area' textarea.
Sort A-Z:
For sort a-z we do a similar thing to 'reverseList' except instead of using 'reverse', we use 'sort'...
Sort Z-A:
Now we are able to combine the previous two examples, reverse and sort a-z, to perform a z-a sort. First we sort the list of lines named 'lines' to a-z format. Then we reverse it to get a z-a format...
Finished!
Here is the full souce...
This tutorial is on how to create a simple array re-orderer in Javascript.
HTML:
We are going to have a few HTML elements, here are the details...
Textarea, named area, to contain the original list.
Button, to reverse the list.
Button, to sort the list a-z.
Button, to sort the list z-a.
Button, to randomise the list.
- <html
>
- <head
>
- </
head
>
- <body
>
- <textarea
cols
=
'20'
rows
=
'40'
id
=
'area'
></
textarea
>
- <button
onclick
=
'reverseList();'
>
Reverse</
button
>
- <button
onclick
=
'sortList();'
>
Sort A-Z</
button
>
- <button
onclick
=
'sortReverse();'
>
Sort Z-A</
button
>
- <button
onclick
=
'randomise();'
>
Randomise</
button
>
- </
body
>
- </
html
>
Reverse:
As you can see from the HTML buttons, the reverseList button runs the javascript function 'reverseList' when it is clicked ('onclicked')...
- <
script>
- function
reverseList(
)
- {
- var
lines =
document.getElementById
(
"area"
)
.value
.split
(
'\n
'
)
;
//Get all lines from 'area'.
- lines =
lines.reverse
(
)
;
- document.getElementById
(
'area'
)
.value
=
''
;
- for
(
var
i=
0
;
i<
lines.length
;
i++
)
{
- var
line =
lines[
i]
;
- document.getElementById
(
'area'
)
.value
+=
line +
'\n
'
;
- }
- }
- </
script>
We simply get all the lines from the textarea 'area' and put them in to a new variable/array 'lines'. We then reverse the array, reset the textareas value to nothing and then add each line in 'lines' to the 'area' textarea.
Sort A-Z:
For sort a-z we do a similar thing to 'reverseList' except instead of using 'reverse', we use 'sort'...
- function
sortList(
)
- {
- var
lines =
document.getElementById
(
"area"
)
.value
.split
(
'\n
'
)
;
//Get all lines from 'area'.
- lines =
lines.sort
(
)
;
- document.getElementById
(
'area'
)
.value
=
''
;
- for
(
var
i=
0
;
i<
lines.length
;
i++
)
{
- var
line =
lines[
i]
;
- document.getElementById
(
'area'
)
.value
+=
line +
'\n
'
;
- }
- }
Sort Z-A:
Now we are able to combine the previous two examples, reverse and sort a-z, to perform a z-a sort. First we sort the list of lines named 'lines' to a-z format. Then we reverse it to get a z-a format...
- function
sortReverse(
)
{
- var
lines =
document.getElementById
(
"area"
)
.value
.split
(
'\n
'
)
;
//Get all lines from 'area'.
- lines =
lines.sort
(
)
;
- lines =
lines.reverse
(
)
;
- document.getElementById
(
'area'
)
.value
=
''
;
- for
(
var
i=
0
;
i<
lines.length
;
i++
)
{
- var
line =
lines[
i]
;
- document.getElementById
(
'area'
)
.value
+=
line +
'\n
'
;
- }
- }
Finished!
Here is the full souce...
- <
html>
- <
head>
- <
script>
- function
reverseList(
)
- {
- var
lines =
document.getElementById
(
"area"
)
.value
.split
(
'\n
'
)
;
//Get all lines from 'area'.
- lines =
lines.reverse
(
)
;
- document.getElementById
(
'area'
)
.value
=
''
;
- for
(
var
i=
0
;
i<
lines.length
;
i++
)
{
- var
line =
lines[
i]
;
- document.getElementById
(
'area'
)
.value
+=
line +
'\n
'
;
- }
- }
- function
sortList(
)
- {
- var
lines =
document.getElementById
(
"area"
)
.value
.split
(
'\n
'
)
;
//Get all lines from 'area'.
- lines =
lines.sort
(
)
;
- document.getElementById
(
'area'
)
.value
=
''
;
- for
(
var
i=
0
;
i<
lines.length
;
i++
)
{
- var
line =
lines[
i]
;
- document.getElementById
(
'area'
)
.value
+=
line +
'\n
'
;
- }
- }
- function
sortReverse(
)
- {
- var
lines =
document.getElementById
(
"area"
)
.value
.split
(
'\n
'
)
;
//Get all lines from 'area'.
- lines =
lines.sort
(
)
;
- lines =
lines.reverse
(
)
;
- document.getElementById
(
'area'
)
.value
=
''
;
- for
(
var
i=
0
;
i<
lines.length
;
i++
)
{
- var
line =
lines[
i]
;
- document.getElementById
(
'area'
)
.value
+=
line +
'\n
'
;
- }
- }
- </
script>
- </
head>
- <
body>
- <
textarea cols=
'20'
rows=
'40'
id=
'area'
></
textarea>
- <
button onclick=
'reverseList()'
>
Reverse</
button>
- <
button onclick=
'sortList()'
>
Sort A-
Z</
button>
- <
button onclick=
'sortReverse();'
>
Sort Z-
A</
button>
- </
body>
- </
html>