reptile7's JavaScript blog: The Hyperlink Shuffle, Part 3

Monday, August 25, 2014

The Hyperlink Shuffle, Part 3
Blog Entry #332

Today's post will conclude our discussion of the New Array Text Pages RandomLinks.html script.

New digs

The JavaScript we've been discussing in the last two entries composes a script element that is the last child of an h3 element:

<h3>Links Are Displayed in Random Order Every Time Page Is Displayed<br><br>

Click "Refresh" to see it work.<br>

<hr align="center" width="100%"><br>

The links can be displayed as a list:<br>

<script type="text/javascript"> ... </script>

</h3>

The h3 text content is horizontally centered by a <center> ancestor that is improperly closed before the end of the h3 element. On my computer, Firefox, Opera, and Safari place the </h3> tag just before the </center> tag upon rendering the RandomLinks.html page.

The h3 element serves a presentational purpose, specifically, it bolds and enlarges its text: the script display does not constitute a 'heading' semantically. Moreover, the h3 element contains an <hr> rule in violation of its (%inline;)* content model. Clearly, a div element would be a more appropriate display container:

#displayDiv { font-size: larger; font-weight: bold; text-align: center; }

...

<div id="displayDiv"> ... </div>

• The div element has a (%flow;)* content model and can thus validly hold an <hr>.
• <hr align="center" width="100%"> can be shrunk to <hr>: the hr element's default width is 100%, and if an <hr>'s width is 100% then there's no point in giving it an align setting.

Separating structure and behavior

If you prefer to move the aforementioned script element to the document head and load the URLlist links into a separate, empty div element, then that's pretty easy to do: just replace the

for (i = 0; i < URLlist.length; i++) document.write(URLlist[RandomValue[i]] + " ");

loop with the following code:

window.onload = function ( ) {
	var linkDiv = document.getElementById("linkDiv");
	for (i = 0; i < URLlist.length; i++)
		linkDiv.innerHTML += URLlist[RandomValue[i]] + "<br>"; }

...

<div id="linkDiv"></div>

Starting from scratch

For that matter, if we pre-array the link data

var textArray = ["JavaScripts.com", "Disney", "The Dilbert Zone", "This is True", "Centre for the Easily Amused"];
var hrefArray = ["http://www.javascripts.com",
	"http://www.disney.com",
	"http://www.unitedmedia.com/comics/dilbert/",
	"http://www.thisistrue.com/",
	"http://www.amused.com/"];

then we can iteratively construct and deploy the links

for (i = 0; i < textArray.length; i++) {
	var randomLink = document.createElement("a");
	randomLink.textContent = textArray[RandomValue[i]];
	randomLink.setAttribute("href", hrefArray[RandomValue[i]]);
	var newLine = document.createElement("br");
	linkDiv.appendChild(randomLink);
	linkDiv.appendChild(newLine); }

and thereby throw out the script's link( ), linkToString( ), and linkArray( ) functions. The createElement( ) method, the textContent attribute, the setAttribute( ) method, and the appendChild( ) method are formally defined/standardized in the DOM Level 3 Core Specification.

Alternatively, we could create the br elements and load the link + newline lines into the linkDiv div via a

linkDiv.innerHTML += randomLink.outerHTML + " ";

statement, but if we're going to DOM-ize the code, why not go all the way?

Embed it

The centering <center> element is followed by a block of code that shows how to plant the URLlist links in a normal run of text:

... </center><br>

Or imbed the links (<script type="text/javascript">document.write(URLlist[randomIndex( )]);</script>) in various places in your page.

Here's another link: <script type="text/javascript">document.write(URLlist[randomIndex( )]);</script>.

Another link is: <script type="text/javascript">document.write(URLlist[randomIndex( )]);</script>.

The number of links (<script type="text/javascript">document.write(URLlist[randomIndex( )]);</script>) does not have to be the same as the number of references.

Sample output:

Or imbed the links (Disney) in various places in your page. Here's another link: This is True. Another link is: The Dilbert Zone. The number of links (Javascripts.com) does not have to be the same as the number of references.

We don't need to use the randomIndex( ) function here either if we
(a) print out URLlist[RandomValue[RandomIdx]] and
(b) increment RandomIdx
in each microscript:

/* Recall that RandomIdx is initialized to 0 in the buildArrayofRandomValues( ) function. */

</script>

...

Or imbed the links (<script type="text/javascript">document.write(URLlist[RandomValue[RandomIdx]]); RandomIdx++;</script>) in various places in your page.

<!-- Etc. -->

Can we separate structure and behavior in this case? Yes we can!
(A) Replace each microscript with an empty  element.
(B) Scoop up the spans with a document.getElementsByClassName( ) command.
(C) Load the URLlist links (or links created from scratch) into the spans.

var linkSpans = document.getElementsByClassName("linkSpan");
for (i = 0; i < linkSpans.length; i++)
	linkSpans[i].innerHTML = URLlist[RandomValue[i]];

There's just one little problem with this approach: the getElementsByClassName( ) method is not supported by pre-9 versions of IE and there are still quite a few IE 8 users out there. Here's a fallback for accommodating IE 6-8 users:
(A2) Wrap the text in an id="linkDiv2" div and replace each microscript with an empty ; if there are any other spans in the linkDiv2 div, recode them in some way or get rid of them altogether.
(B2) Scoop up the spans with a document.getElementById("linkDiv2").getElementsByTagName("span") command.
(C2) Load the links into the spans per the preceding loop.

Now, about those links...

(0) http://www.javascripts.com currently redirects to http://www.javascriptsource.com/, the home page of The JavaScript Source.

(1) http://www.disney.com leads to Disney.com, the official home for all things Disney (the actual URL is http://disney.com/).

(2) http://www.unitedmedia.com/comics/dilbert/ currently redirects to http://www.universaluclick.com/comics/dilbert/, Universal Uclick's Dilbert page.

(3) http://www.thisistrue.com/ is fully live: Randy Cassingham's This is True is still going strong.

(4) http://www.amused.com/ is fully dead: Cathie Walker's Centre for the Easily Amused is long gone and its 'past life' is not available via the Internet Archive. However, you can still check in with Cathie at her Facebook page.

In the following entry we'll check over RandomQuotes.html, the fourth New Array Text Pages script, and then start work on TODGreeting.html, the final New Array Text Pages script.
- posted by A. Peak @ 4:04 PM

Comments: Post a Comment

<< Home

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)

About Me