How to Sort Links Alphabetically in JavaScript
JavaScript is a client-side scripting language that contains many of the features that are typically available in full-featured programming languages, including logic structures, variables and arrays. JavaScript code executes when a Web browser with JavaScript enabled opens a Web page that contains JavaScript code. Because the code execution takes place in the Web browser, JavaScript is widely used for modifying user interfaces and for manipulating HTML elements such as when altering images, creating lists and sorting links.
Other People Are Reading
Instructions
-
-
1
Open a text editor and create a new file named "sortList.html." Add some HTML tags to the file that comprise a basic HTML page. This page will contain the sorted list.
<html>
<head></head>
<body></body>
</html>
-
2
Add an HTML script -- "<script>" -- tag to the file between the "<head>" and "</head>" tags. Assign the "<script>" tag the type "script/javascript," then close the HTML script -- "</script>" -- tag.
<html>
<head>
<script type="text/javascript">
</script>
</head>
<body></body>
</html>
-
-
3
Create a JavaScript array named "linkName" by assigning four values to a variable named "linkName" -- "cnn," "google," "cbs" and "apple." The square brackets following the "linkName" variable declaration create the array using literal notation.
<html>
<head>
<script type="text/javascript">
var linkName = ["cnn", "google", "cbs", "apple"];
</script>
</head>
<body></body>
</html>
-
4
Sort the "linkName" array using the JavaScript "sort()" method. This method sorts the array's values lexicographically -- alphabetically, or dictionary order.
<html>
<head>
<script type="text/javascript">
var linkName = ["cnn", "google", "cbs", "apple"];
linkName.sort();
</script>
</head>
<body></body>
</html>
-
5
Use a loop to iterate through the items in the array using the "array.length" property as a control. Use an open curly brace "{" and a close curly brace "}" to hold the place for the loop's code.
<html>
<head>
<script type="text/javascript">
var linkName = ["cnn", "google", "cbs", "apple"];
linkName.sort();
for (i=0;i<linkName.length;i++)
{
}
</script>
</head>
<body></body>
</html>
-
6
Use a JavaScript "document.write" command to output each hyperlink value (sorted) to "sortList.html". Use the JavaScript concatenation operator ("+") to output the "linkName" variable's value with the hyperlink's HTML code.
<html>
<head>
<script type="text/javascript">
var linkName = ["cnn", "google", "cbs", "apple"];
linkName.sort();
for (i=0;i<linkName.length;i++)
{
document.write("<a href=http://www." + linkName[i] + ".com>");
}
</script>
</head>
<body></body>
</html>
-
7
Use a second "document.write" command to output the sorted link name. This value is the hyperlink's text on the Web page, and is visible to the end user.
<html>
<head>
<script type="text/javascript">
var linkName = ["cnn", "google", "cbs", "apple"];
linkName.sort();
for (i=0;i<linkName.length;i++)
{
document.write("<a href=http://www." + linkName[i] + ".com>");
document.write(linkName[i]);
}
</script>
</head>
<body></body>
</html>
-
8
Use a third "document.write" method to output a close hyperlink tag -- "</a>" -- for each link written to the page.
<html>
<head>
<script type="text/javascript">
var linkName = ["cnn", "google", "cbs", "apple"];
linkName.sort();
for (i=0;i<linkName.length;i++)
{
document.write("<a href=http://www." + linkName[i] + ".com>");
document.write(linkName[i]);
document.write("</a>");
}
</script>
</head>
<body></body>
</html>
-
9
Use a fourth "document.write" command to output a return tag -- "" -- following each hyperlink. This tag separates each item in the list. Save and close "sortLink.html."
<html>
<head>
<script type="text/javascript">
var linkName = ["cnn", "google", "cbs", "apple"];
linkName.sort();
for (i=0;i<linkName.length;i++)
{
document.write("<a href=http://www." + linkName[i] + ".com>");
document.write(linkName[i]);
document.write("</a>");
document.write("");
}
</script>
</head>
<body></body>
</html>
-
10
Open "sortLink.html" in a Web browser and verify that the list prints and is sorted lexicographically.
-
1
Tips & Warnings
The "sort()" function can take an argument, an optional function that defines the sort order. This is useful when sorting numeric data.
The "sort()" method converts all elements to strings. Keep this in mind when creating and implementing arrays that take advantage of the "sort()" method.
JavaScript arrays can be sorted, spliced, joined, concatenated and converted (see Resources).
To sort a link list that already exists, consider using string functions and search functions to identify the text that is the sort's target. You can also use these functions to alter the final hyperlink text appearance.
JavaScript objects can be used to associate various link components.
The JavaScript "sort()" method sorts numeric data alphabetically, which typically is not the desired result. Use a "compare" function to correctly sort numeric data.
References
Resources
- Photo Credit Digital Vision./Digital Vision/Getty Images
