Tuesday, August 12, 2014
The Hyperlink Shuffle, Part 1
Blog Entry #330
In today's post we'll take on the most interesting New Array Text Pages script, RandomLinks.html. The RandomLinks.html script creates five links from scratch and prints them out randomly via a shuffled set of array indexes, which is also created from scratch.
Jenson's javascript/ directory offers source code and a demo for a closely related RandomLinks.html script. However, the javascript/ RandomLinks.html code contains some clutter (superfluous functionality) vis-à-vis the Java Goodies RandomLinks.html code and consequently we will work with the latter in the discussion below.
Link building blocks
The textContent and href values for the five links are stored in a URLlist Object object that is created by the following statement:
var URLlist = new linkArray(
"Javascripts.com", "http://www.javascripts.com",
"Disney", "http://www.disney.com",
"The Dilbert Zone", "http://www.unitedmedia.com/comics/dilbert/",
"This is True", "http://www.thisistrue.com/",
"Centre for The Easily Amused", "http://www.amused.com/");The statement's right-hand side calls a linkArray( ) constructor function and passes thereto the textContent/href values, which are collectively given an a identifier.
function linkArray( ) {
var a = linkArray.arguments; /* The linkArray reference is unnecessary/deprecated. */
... }The linkArray( ) function next tests if a.length is an odd number: if true, then an alert( ) message pops up and the length of the URLlist object is set to 0.
if (a.length % 2 != 0) {
window.alert("Cannot initialize link array: Incorrect number of strings");
this.length = 0; }I've never understood the point of statements like this: my reaction is "It's your responsibility as the Webmaster to ensure that the linkArray( ) call contains the right number of arguments, and to test the code before it goes live." Anyway, let's move on. An accompanying else clause
else {
for (ti = ai = 0; ai < a.length; ti ++, ai += 2) {
this[ti] = new link(a[ai], a[ai + 1]); }
this.length = a.length / 2; }iteratively feeds the ten a arguments to an external link( ) constructor function
function link(description, URL) {
this.description = description;
this.URL = URL; }in order to create a set of five child Object objects. The for loop runs for five iterations (ai = 0, 2, 4, 6, and 8): in each iteration, the link( ) function assigns an a[even] value to a description property and the following a[odd] value to a URL property. When the loop has finished executing, the else clause sets URLlist's length to a.length ÷ 2 (5).
Here's the data structure we've got so far:
URLlist[0] = {description: "Javascripts.com", URL: "http://www.javascripts.com"}
URLlist[1] = {description: "Disney", URL: "http://www.disney.com"}
URLlist[2] = {description: "The Dilbert Zone", URL: "http://www.unitedmedia.com/comics/dilbert/"}
URLlist[3] = {description: "This is True", URL: "http://www.thisistrue.com/"}
URLlist[4] = {description: "Centre for The Easily Amused", URL: "http://www.amused.com/"}
URLlist.length = 5;
We're not done yet. The toString( ) method of each
link object is overridden with a linkToString( ) function that respectively assigns the object's description and URL to the textContent and href of a stringified anchor element.function linkToString( ) {
return "<a href='" + this.URL + "'>" + this.description + "</a>"; }
link.prototype.toString = linkToString;The objectObject.toString( ) page in the Mozilla JavaScript Reference features an Overriding the default toString( ) method subsection that addresses exactly what we're doing here. The prototype feature functions as a property of the
link object type and is what allows us to bind the linkToString( ) function to all five link objects in one go.FYI: We could have used a
buildArray.prototype.toString = quoteOut; statement to override the quote object's toString( ) method in the Quote of the Day (Month) and Quote of the Day (Year) scripts discussed in the previous post. The quote.toString expression did not need a prototype binder; indeed, quote.prototype.toString throws a TypeError.We will later print out the linkToString( ) return with a document.write( ) command. This being the case, we can code linkToString( ) more cleanly via the link( ) method of the String object:
function linkToString( ) {
return this.description.link(this.URL); }Number mix
Before creating the URLlist object, the script creates an empty RandomValue array and declares a RandomIdx variable.
var RandomValue = new Array( );
var RandomIdx;After creating the URLlist object, the script calls a buildArrayofRandomValues( ) function.
buildArrayofRandomValues(URLlist.length);The buildArrayofRandomValues( ) function is the heart of the RandomLinks.html script and deserves its own entry - we'll deal with it next time.
- posted by A. Peak @ 1:02 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)