Wednesday, September 05, 2007
A Headline Loop
Blog Entry #87
HTML Goodies' JavaScript Script Tips #69, #70, #71, and #72 address a script that is somewhat of a cross between the slide show scripts of Primer #27 (both the go-forward main script and the go-backward assignment script) and the URL menu scripts of Script Tips #38-41. The Script Tips #69-72 Script stocks a series of "headlines" through which the user can run forwards or backwards; clicking each headline hyperlinks the user to a related resource. The Script Tips #69-72 Script can be accessed via the "Here's the Code" links in all four script tips and appears in the div below:
<head>
<style type="text/css">
</style>
<script language="javascript">
<!--
// by Leif King e-mail:leif.d.king@vanderbilt.edu
// Feel free to use this or modify it, such as making the text scroll!
// Next, Previous, Click Through Functions below
var number = 0;
function chngNext( )
{
document.headline.shownext.value = "Y";
headMach( );
}
function chngPrev( )
{
document.headline.showprev.value = "Y";
headMach( );
}
function goTo(newURL)
{
self.location.href = newURL;
}
// Function To Change Headline Below
function headMach( )
{
var totalHeads = 4; //total number of headlines you want
if ((document.headline.shownext.value == "Y") && (document.headline.showprev.value == "N"))
{
var headShow = (parseInt(document.headline.nowShowing.value) + 1);
if (headShow > totalHeads)
{
var headShow = 1;}
}
if ((document.headline.showprev.value == "Y") && (document.headline.shownext.value == "N"))
{
var headShow = (parseInt(document.headline.nowShowing.value) - 1);
if (headShow < 1)
{
var headShow = totalHeads;}
}
// Links Represented by Headlines Below
if (headShow == 1)
{
var _head = "first headline";
var inlocat = "firstlocation.html";
}
if (headShow == 2)
{
var _head = "second";
var inlocat = "secondlocation.html";
}
if (headShow == 3)
{
var _head = "third";
var inlocat = "thirdlocation.html";
}
if (headShow == 4)
{
var _head = "and so 4orth";
var inlocat = "fourthlocation.html";
}
document.headline.headHere.value = _head;
document.headline.nowShowing.value = headShow;
document.headline.shownext.value = "N";
document.headline.showprev.value = "N";
document.headline.inlocation = inlocat;
}
//-->
</script>
<!-- Visible HTML Below -->
</head>
<body onload="chngNext( );">
<center>
<h2><i>Headline Linker</i></h2>
<form name="headline" method="post">
<input type="hidden" name="nowShowing" value="0">
<input type="text" name="headHere" value="Choose and Click" size="50" onclick="goTo(inlocation);"><br>
<input type="button" value="NEXT" onclick="chngNext( );">
<input type="button" value="PREV" onclick="chngPrev( );"><br>
<input type="hidden" name="shownext" value="N">
<input type="hidden" name="showprev" value="N">
</form>
</center>
</body>
</html>Joe provides an "MSIE" script demo page here and a "Netscape" script demo page here - we'll flesh out the script's browser compatibility issues at a later point.
The headline form
At the heart of the Script Tips #69-72 Script is a form element, named headline and having an unnecessary method="post" attribute, that comprises six controls:
elements[1]: A visible text box named headHere will hold the script headlines. The headHere control is equipped with a value="Choose and Click" attribute (specified as value="**** First Choose A Headline Then Click Here ****" in the sources of the demo pages), but the user will not see the Choose and Click string, which will be overwritten by the script's headMach( ) function, as we'll see below.
elements[0]: Although the script headlines are not arrayed (they could have been), each headline has an associated 'index number' that is held by the first-in-source-order headline control, a hidden field named nowShowing and with a value attribute value initially set to 0. The script headlines are also indexed by the headMach( ) function's headShow variable; the nowShowing control is thus redundant and we'll get rid of it when we revamp the script in the next post.
elements[2], elements[3]: A NEXT push button (labeled Next Headline on the demo pages) allows the user to move forwards through the headline index; a PREV push button (labeled Previous Headline on the demo pages) allows the user to move backwards through the headline index.
elements[4], elements[5]: The headline form concludes with two hidden fields that are named shownext and showprev and are designed to act as 'on/off switches' for the NEXT/Next Headline and PREV/Previous Headline buttons, respectively; the shownext and showprev value attribute/property values accordingly toggle between N ('off') and Y ('on').
A pre-user-input deconstruction
Here's what initially happens when the user follows the "Here's the Effect" link to the "MSIE" script demo page:
<body onload="chngNext( );">
When the page has loaded, the chngNext( ) function is triggered.
var number = 0; /* This statement can be removed; the number variable does not appear subsequently in the script. */
function chngNext( ) {
document.headline.shownext.value = "Y";
headMach( ); }
The value value of the shownext field, originally set to N in the script's HTML, toggles to Y. On the following line, the headMach( ) function is triggered.
function headMach( ) {
var totalHeads = 4; // total number of headlines you want
The number of headlines stocked by the script is represented by the variable totalHeads, which is declared here. We noted in Blog Entry #44 that a slide show is a loop-like process, and you can think of totalHeads as the 'upper boundary' of the script's 'loop'.
The shownext value value was set to Y by the chngNext( ) function - check; the showprev value value was originally set to N in the script's HTML, and is still N - check; the if condition thus returns true.
The parentheses surrounding the (document.headline.shownext.value == "Y") and (document.headline.showprev.value == "N") comparisons are unnecessary, because comparison operators have a higher precedence than do logical operators.
At no point during the script's execution do the shownext and showprev controls both read Y; consequently, the second comparison is unnecessary, and the if declaration can be shortened to:
if (document.headline.shownext.value == "Y")
var headShow = (parseInt(document.headline.nowShowing.value) + 1);
/* The outer parentheses surrounding the right side of the statement are unnecessary. */
Data-type-wise, form control values are strings. This line uses the top-level parseInt( ) function to convert the nowShowing field's value value, 0, from a string to a number (the top-level eval( ) and Number( ) functions could also have been used here); the parseInt( ) output is incremented to 1, which is assigned to the variable headShow.
(If it isn't converted to a number, the nowShowing value value will be concatenated to 1 and not added to 1, and the resulting 01 string will be assigned to headShow, which is not a problem for this run of the script but will prevent us from moving beyond the First Headline headline.)
if (headShow > totalHeads) { var headShow = 1; } }
// There is of course no need to use the var keyword for headShow a second time.
Clicking the Next Headline button four times will increment headShow to 5, at which point this conditional comes into play; until then, the headShow > totalHeads condition returns false, so the browser moves on to...
/* The if declaration can be shortened to:
if (document.headline.showprev.value == "Y") */
{ ... }
This if block will come into play when we go through the script headlines backwards. For now, both && operands return false and thus the if condition as a whole returns false, so the browser moves on to...
if (headShow == 1) {
var _head = "First Headline";
var inlocat = "firstlocation.html"; }
if (headShow == 2) { var _head = "Second Headline"; var inlocat = "secondlocation.html"; }
if (headShow == 3) { var _head = "Third Headline"; var inlocat = "thirdlocation.html"; }
if (headShow == 4) { var _head = "Fourth Headline"; var inlocat = "fourthlocation.html"; }
As noted earlier, headShow serves as an index number for the script's headlines. The Script Tips #69-72 Script contains four generic headlines: First Headline, Second Headline, Third Headline, and Fourth Headline; these headlines have associated headShow values of 1, 2, 3, and 4, respectively. Also associated with these headlines are resources located at firstlocation.html, secondlocation.html, thirdlocation.html, and fourthlocation.html, respectively.
Regarding the preceding if statements, the first if condition is true (headShow is equal to 1) and the other if conditions are false; consequently, First Headline is assigned to the variable _head and firstlocation.html is assigned to the variable inlocat. The browser moves to...
document.headline.headHere.value = _head;
This statement assigns the _head value, First Headline, to the value value of the headHere field, i.e., First Headline overwrites the headHere value="**** First Choose A Headline Then Click Here ****" attribute and loads into the headHere field.
document.headline.nowShowing.value = headShow;
The headShow value, 1, is assigned to the value value of the nowShowing field.
document.headline.shownext.value = "N";
The shownext field's value value, Y, toggles back to N.
document.headline.showprev.value = "N";
This statement will switch the showprev field's value value from Y to N when we go through the script headlines backwards.
document.headline.inlocation = inlocat; }
This weird statement relates to the headline-to-resource linking process, which we'll discuss when we're through with the loop part of the deconstruction.
Forward deconstruction
We are ready to move forwards through the script headlines. Clicking the Next Headline button
<input type="button" value=" Next Headline " onclick="chngNext( );">
<!-- The spaces in the value attribute value don't add any padding to the button label (at least on my computer). -->
re-calls the chngNext( ) function and the commands above are re-executed:
(1) The shownext value value switches to Y.
(2) The headMach( ) function is called.
(3) 4 is assigned to totalHeads.
(4) The nowShowing value value is numberified and incremented to give headShow = 2.
(5) Second Headline is loaded into the headHere text box.
(6) 2 is assigned to the nowShowing value value.
(7) The shownext and showprev value values are both set to N.
Clicking again the Next Headline button loads Third Headline into the headHere field (headShow == 3); clicking again the Next Headline button loads Fourth Headline into the headHere field (headShow == 4); clicking again the Next Headline button loads First Headline into the headHere field (headShow reaches its peak value of 5 and is then reset to 1).
Backward deconstruction
Clicking the Previous Headline button
<input type="button" value="Previous Headline" onclick="chngPrev( );">
calls the script's chngPrev( ) function and a parallel set of commands is executed:
function chngPrev( ) { document.headline.showprev.value = "Y"; headMach( ); }
(1-2) The showprev value value switches to Y, and then headMach( ) is called.
(3) 4 is assigned to totalHeads.
var headShow = (parseInt(document.headline.nowShowing.value) - 1);
(4) The nowShowing value value is numberified and decremented to give headShow = 0. Use of the parseInt( ) function here is unnecessary, because for a subtraction operation, JavaScript will automatically convert the nowShowing value value to a number: see the "Data Type Conversion" section of the JavaScript 1.5 Core Guide.
if (headShow < 1) { var headShow = totalHeads; }
(5) headShow (0) is at this point less than 1, and is thus set to 4.
(6) Fourth Headline is loaded into the headHere text box.
(7) 4 is assigned to the nowShowing value value.
(8) The shownext and showprev value values are both set to N.
Clicking again the Previous Headline button loads Third Headline into the headHere field (headShow == 3); clicking again the Previous Headline button loads Second Headline into the headHere field (headShow == 2); clicking again the Previous Headline button loads First Headline into the headHere field (headShow == 1).
In the following entry, we'll hyperlink the headlines to their associated resources and also retool the script a bit.
reptile7
- posted by A. Peak @ 2:57 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)