reptile7's JavaScript blog
Wednesday, July 30, 2014
The Quote Parade, Part 2
Blog Entry #328

Welcome back to our discussion of the New Array Text Pages CookieQuotes.html script. Let's take stock of where we are.

Our first visit

For a first-time visit to the CookieQuotes.html page, the script prints out the quoteList[0] quote

Back Up My Hard Drive? How do I Put it in Reverse?

and adds to the CookieQuotes.html document.cookie string an ETUQuoteCount=1 cookie, meaning that we have seen one quoteList quote, per the values of the j index and the i counter; j and i are respectively set to 0 and 1 via the

i = 0; i = i % quoteList.length; j = i++;

set of operations.

We're back

For a second visit, the script increments j and i - more specifically, it extracts (the value of) i from the document.cookie string via the getCookie( ) function and an i = parseInt(i, 10) operation, and then copies i to j and increments i as for the first visit - and as a result prints out the quoteList[1] quote

What we have here is a failure to assimilate.
[Cool Hand Locutus]

and adds an ETUQuoteCount=2 cookie to the document.cookie string. And so on for subsequent visits; on our sixteenth visit, i = i % quoteList.length; gives 0 (as it did for our first visit) and the quote sequence begins all over again.

Script checkup

Construction shmonstruction

The attentive reader may have noticed that I gave relatively short shrift to the buildArray( ) function in the previous post. Deconstruction-wise I could have said
Instantiating the buildArray object type

The script begins by calling a buildArray( ) constructor function and passing thereto a series of quote string arguments, which are collectively given an a identifier. The a arguments are iteratively assigned to numeric buildArray properties...
but I didn't. In part I didn't because we dealt with a very similar Object object creation not so long ago in the course of discussing the Java Goodies Multi-Colored Text script. But there's actually a more important reason that I glossed over the buildArray( ) function: it's excess baggage. The var quoteList = new buildArray( ...quote strings... ); instantiation is easily converted to a dense array constructor or an array literal that doesn't require any external statements, e.g.:

var quoteList = ["Back Up My Hard Drive? How do I Put it in Reverse?", "What we have here is a failure to assimilate.<br>[Cool Hand Locutus]", /* ...Other quotes... */ "A polar bear is a rectangular bear after a coordinate transform."];

i/j movement

For correlating i (and indirectly j) with the length of the quoteList, the i = i % quoteList.length; statement does the job but is too unintuitive for my taste. I prefer to compare i and quoteList.length via a simple if statement:

if (i == quoteList.length) i = 0;

Incrementing the value of i (but not i itself)* in the setCookie( ) function call

setCookie("ETUQuoteCount", i + 1);

allows us to return quoteList[i] and throw j out.

*setCookie("ETUQuoteCount", ++i); and setCookie("ETUQuoteCount", i++); are both problematic.
(f) The former cuts quoteList[0] out of the string loop; the document.write(quote( )); command outputs undefined when i hits 15.
(l) Even worse, the latter shuts down the quote parade altogether by holding the cookie value at 0 and therefore the display at quoteList[1].

A better cookie recipe

In the original script, the setCookie( ) function does not give the ETUQuoteCount cookie an expires value; as a result, the cookie goes up in smoke as soon as the user's browser session is over. The code below will keep the cookie around until the end of next year - that's a long enough cookie lifetime, wouldn't you say?

var myDate = new Date( );
var currentYear = myDate.getFullYear( );
myDate.setFullYear(currentYear + 1, 11, 31);
document.cookie = name + "=" + value + "; expires=" + myDate.toUTCString( );

The setFullYear( ) method of the Date object is detailed here; the toUTCString( ) method of the Date object is detailed here.

In the original script, the value of the ETUQuoteCount cookie is escape( )d when set by the setCookie( ) function and unescape( )d when extracted/returned by the getCookie( ) function. Given that the value is an integer (it doesn't contain any verboten characters) and that we're the ones setting it, however, the escape( )/unescape( ) operations are unnecessary and can be removed.


The document.write(quote( )); output is marked up with h1 and center elements. Putting my imagination to work, I can see how a set of quotes could serve as a series of headings. However, if the quotes merely serve a decorative purpose, then they should be housed in a div.

#quoteDiv { font-weight: bold; font-size: 32px; text-align: center; }
document.getElementById("quoteDiv").innerHTML = quoteList[i];
window.onload = quote;
<div id="quoteDiv"></div>

(We know from prior work that the h1 element's initial font-size is 32px.)
You are of course free to style the quoteDiv div per your preference.


I've found a couple of CookieQuotes.html demos on the Web.

(1) Demo #1 is provided by The JavaScript Source. This demo exchanges the buildArray( ) functionality for a dense array constructor**

var quoteList = new Array( "Back Up My Hard Drive? How do I Put it in Reverse?", "What we have here is a failure to assimilate.<br>[Cool Hand Locutus]", ... );

and doesn't give the ETUQuoteCount cookie an expires value although you can still see the script's effect by refreshing the page repeatedly.

(**Hmmm, I just noticed that the Source Code at the bottom of the CookieQuotes.html page features a dense array constructor vis-à-vis the buildArray( ) functionality.)

(2) Demo #2 comes to us courtesy of Larry "Have Camera Will Travel" Curtis. Larry holds onto the buildArray( ) functionality and gives the ETUQuoteCount cookie a 365-days lifetime.

function setCookie(name, value, days) { var expires = new Date( ); expires.setTime(expires.getTime( ) + 1000 * 60 * 60 * 24 * days); document.cookie = name + "=" + escape(value) + "; expires=" + expires.toGMTString( ); }
setCookie("ETUQuoteCount", i, 365);

The toGMTString( ) method of the Date object is deprecated, BTW. I don't like millisecond-based Date calculations and would replace the setTime( )/getTime( ) operation(s) with:

expires.setDate(expires.getDate( ) + days); // A lot simpler, huh?

We'll go through the New Array Text Pages QuoteOfTheDay.html script in the following entry.

Comments: Post a Comment

<< Home

Powered by Blogger

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