The Art of Scintography: Chapter 7

Chapter 7: Dynamic Pages with JavaScript

The Art of Scintography
Edition 3.0 © 2008 Aurora Isaac
www.scintography.com

7.1 Dynamic HTML Pages

JavaScript is a programming language that can be used to make your pages interactive. When you add scripts to your page, you are combining three features of a page:

html
OBJECTS + viewer
EVENTS + client
SCRIPTS

For example, an HTML page might contain a button. The button is an HTML object. Clicking the button is an event. When the viewer clicks the button, a script is activated. If the script alters the content of the page, the page has become dynamic, responding to the actions of the viewer.

button

In this sample code, a button is created using a DIV. This DIV is an object on the page. It can be identified by its unique name, assigned with the ID parameter. The onClick parameter assigns a script function, called doThis. This function will be activated in the event the viewer clicks the button. In the example button, this function changes the button text.

<DIV ID="myButton" onClick="doThis()">button</DIV>

JavaScript code can also be used to build pages dynamically, according to the client context. This includes the capability of determining features of the software platform or reading cookie parameters saved from a previous visit to tailor page elements to the viewing context.

7.2 Script Context

JavaScript is a client script. The text of the script is associated with an HTML document. When this document is loaded from the server to the client computer, the SCRIPT text is read and interpreted by the browser, along with the HTML text.
Somewhere out in the world, your viewer interacts with the hardware of a client machine, typing on the keyboard, scrolling with the mouse, reading the page on the monitor. Your connection with your viewer is through your source code, HTML markup, CSS stylesheets, and JavaScript scripts.

The Visible Page

Page Source
HTML, STYLE, SCRIPT

JavaScript Programs

Browser Application Program

Operating System

Hardware

The Viewer

Between you and your viewer are layers of computer hardware and software. The client operating system interacts with the hardware and the browser. The browser, in turn, interprets your source code and creates executable programs from your JavaScript code. These run in the context of the browser program.
To complicate things further, your viewers are probably using a variety of browser programs. Variations occur, from one implementation to another, in the HTML, STYLE, and SCRIPT interpretations of your page. To envision the challenge of addressing these variations, I bring you the Browser Cube (aka Rubic's Nightmare).

The first axis of the Browser Cube arrays the variety of browser developers. These developers make it possible for us to see what is published on the web. The problem is that they each envision a web page differently. Standards inevitably come into play after browser features are already implemented.
The second axis of the Browser Cube arrays the variety of browser platforms. This includes the hardware and software variations on which each browser is expected to perform. Even with the intent of making a single released version of a browser run identically on all platforms, variations will inevitably occur.
The third axis of the Browser Cube expands constantly as we hurtle into the future. This axis marks the arrival of new release versions, encompasing an ever expanding array of capabilities, some standard, some not.
There is no simple solution to the Browser Cube, no formula for making the perfect page for all your viewers. Each client computer on which your page is viewed may fall into almost any block within the cube. However, JavaScript does give you the tools you will need to meet this challenge. How you handle browser variations depends on your application and the viewing audience you expect to reach. Solutions range from implementing alternate versions of your site for select client environments, to testing for the availability of language features before executing relevant code.

!	Browser Wars Alerts! Alerts will appear in the tutorials where significant variation in browser interpretation of code occurs.

7.3 Script Syntax


Script 1

<SCRIPT>
// comment
/* comment */
statement;
{ statements; }
numbers
reserved words
identifiers

JavaScript text can be placed within an HTML document, enclosed by SCRIPT tags, or in a separate file that is linked to an HTML document. Multiple scripts may be associated with a document.

  <HTML>
     ...

  <SCRIPT TYPE="text/JavaScript" SRC="myFile.js">
  </SCRIPT>
     ...

  <SCRIPT TYPE="text/JavaScript">
  <!-- // hide the script from old browsers

       (text of script) 

  // -->
  </SCRIPT>
     ...

  </HTML>

Scripts are written in statements of code. Simple statements are terminated with semicolons; compound statements are enclosed in {curly braces}. Statements consist of whitespace, punctuation, and words. For the most part, punctuation has specific meaning in the syntax of the language. Whitespace and punctuation also delimit words of code. These words may be reserved words, identifiers, or numbers.

  <SCRIPT TYPE="text/JavaScript">

       var myVariable = 0xff;

       function myFunction(thisVariable)
       {
	   myVariable = thisVariable;
	   return thisVariable;
       }

  </SCRIPT>

As you become familiar with the language, you will easily distinguish components of code statements.

7.4 Variable Declarations


Script 2

var identifier;
true/false
"string"
[array]
{object}
function(){}
.method(){}

Variables are values that can be changed during the execution of a script. As the programmer, you determine variable names. The three phases in the life of a variable are declaration, assignment, and evaluation.
The variable declaration accomplishes two important things. First, a space in memory is reserved for its value. This is where the variable is stored while other code executes. Second, the name, or identifier, is assigned to that reserved memory. This allows you to refer to the variable value by name.
Variable assignment gives a value to a variable and establishes a data type. Data values are stored differently for different types of data. The basic types are boolean, string, and number. More complex data types are composites of these basic types.

  <SCRIPT TYPE="text/JavaScript">

     // declare the variable
       var myVariable;

     // assign a value to the variable
       myVariable = 0;

     // evaluate the variable in an expression
       otherVariable = myVariable + 1;

  </SCRIPT>

Variable evaluation happens first in the evaluation of expressions. When an expression is evaluated, each identifier is replaced with the stored value of its variable.

7.5 Operators and Expressions


Script 3

expression
operator
precedence
associativity
typeof
conversion

Expressions are sequences of code that can be evaluated into a data value. This may be a basic data type (number, string, or boolean) or a complex data type (array, object, or function). Expressions may include operators and parentheses. Parentheses surround (sub-expressions) within a complex expression. Sub-expressions are evaluated first. Operators are applied to operands which may be data values, identifiers, or expressions.

  <SCRIPT TYPE="text/JavaScript">

     // a simple expression
       5 + 2

     // a complex expression
       (myVariable <= i--) && (myVariable > 0)

  </SCRIPT>

Operators expect a particular data type. For example, arithmetic operators ( +, -, *, /, % ) apply to numbers, and logical operators ( !, &&, || ) apply to boolean values. The typeof operator can be used to determine the data type of an expression or variable. Converting a data value from one type to another is often implicit in the evaluation of an expression.
The sequence in which operators are applied depends on the rules of precedence and associativity. Operators with highest precedence are applied first. If an expression contains more than one operator of the same precedence, they are applied in sequence, according to their associativity, either left-to-right or right-to-left. Parentheses override the rules of precedence and associativity.

7.6 Functions and Variables


Script 4

function()
return value
global variables
local variables
arguments

Functions provide a way to bundle statements to perform in isolation from the rest of the script. Function modules take inputs, process them, then return a result. During this process, they may read from, or write to other data variables.

function()
contextual data →
viewer input →
events → function
processing → return result
↑ ↓
variable data

Functions use three classes of variables. These are the global variables, local variables, and arguments. Arguments are input data, and return values are output data. Local variables are used exclusively within the function, while global variables are shared outside the function.

function()
arguments → local
variables → return value
↑ ↓
global variables

To understand the use of variables in functions it is important to differentiate between function declarations and function calls. A function declaration gives a value to a function identifier. This value is a "string of code statements". A function call is the evaluation, or execution, of the code statements. The value of a function call is determined by the return statements within the function.

  <SCRIPT TYPE="text/JavaScript">

       var globalVariable = .01;

     // function declaration
       function myFunction(argument)
       {
             var localVariable;
             localVariable = argument*globalVariable;
             return localVariable;
       }

     // function call
       otherVariable = myFunction(100);

  </SCRIPT>

The global variables are declared in the main flow of the script, outside the function declarations. Values of global variables are known within all functions. Any function can access and change the value of a global variable.
The local variables are declared within a function. These variables are known only within the function in which they are declared. Each time a function is called, a new instance of the local variable is established. When the function is called again, the local variable is reestablished. No values are saved from call to call.
The function arguments are similar to the local variables. Declaration of arguments is implicit in the function declaration. Each time a function is called, the arguments are implicitly declared and given the values passed in the function call. Thus, arguments may be initialized with values relevant to the context of the function evaluation.
The function return values are determined by the return statements. A function may have multiple return statements, usually placed within the logical flow of complex statements.

7.7 Statements


Script 5

if
if else
else
for
for in
while 
do while
switch
case
break
continue

JavaScript statements may include reserved words that rely on boolean expressions to choose alternate paths in your code.
The if construct must include an opening if statement, any number of optional else if statements, and an optional closing else statement. The flow of code execution reads as follows:

     if ( this is true ) { do this }
     else if ( this is true ) { do this }
     else { do this }

The switch statement plays a similar role in choosing alternate paths. One important difference is that the flow of execution can continue from one case into the next. Break statements can be used to break out of the switch construct at any point in the flow of execution.

     switch ( when this value )
     {
          matches this case value: start execution here ...
          matches this case value: start execution here ...
          otherwise default: start execution here ...
     }

The for and while statements are loops. The for loop repeats the compound statement for each instance specified, i.e. for each element in an array. The while loop repeats the compound statement as long as the condition is true, i.e. while more data is available.

     for ( each instance of this ) { do this }

     while ( this is true ) { do this }

One of the dangers of loops is never reaching a condition that terminates the loop. This creates an infinite loop. It can cause the browser to stop responding. An infinite loop should stop executing when the browser window is closed.

7.8 Data Objects


Script 6

Object.property
Object.method()
new Number()
new String()
new Boolean()
new Array()
new Function()
new Object()
new RegExp()
new Date()
Math

Data entities are treated as objects within JavaScript. Each data object has properties and methods() useful for handling its data type.

       object.property
       object.method()

Properties and methods of data objects change dynamically during execution as the data value changes. For example, a string is a data type. Its length is a string property. If the string changes during execution, the length changes accordingly.

       ("A string of text").length
       myString.length

Methods are functions associated with an object. For example, when the toString() method is applied to a number, it returns a string rendition of the number.

       (4.75).toString()
       myNumber.toString()

Some properties and methods are static. These are not attached to a data value, and thus do not need to change during execution. The Math object provides many static properties and methods.

       Math.PI
       Math.cos(theta)

7.9 The Document Object


Script 7

window.navigator
navigator.appName
navigator.platform
navigator.appVersion
window.document
document.location
document.scripts
document.styleSheets
node.id
node.style
node.className
node.parentNode
node.childNodes

Now we come to the part of JavaScript that requires knowledge of the Browser Cube. Every programming language contains core elements and context elements. The core elements of JavaScript are similar to other C languages. These elements are well known, and implemented universally with little or no variation. JavaScript is designed for writing client scripts for web pages. In this context, the language must include elements that connect core functions with web page elements. Because of the variations in browser developers' web page models, these elements are not identical across implemented versions of JavaScript. Some contextual elements are universal to the language, but others are not. The JavaScript representation of an HTML page is an object. The root object is the window. One of the properties of the window is the navigator object. The properties of this object tell you which block of the Browser Cube represents the client environment loading your page.

navigator.appName =

navigator.platform =

navigator.appVersion =

navigator.userAgent =

Another property of the window object is the document object. The entire HTML document, including all the <TAG> elements contained within it, are included in the document object.

document.scripts = array of SCRIPT elements

document.styleSheets = array of STYLE elements

document.body = the BODY element

In HTML, features of an element are defined in its attributes and style rules.

<DIV ID="myButton"
          CLASS="buttonClass"
          STYLE="color: maroon;"
>click me</DIV>

In SCRIPT, features of an element are accessed through its properties and methods. These properties include the id, className, and style.properties.

  myButton.id		= "myButton"
  myButton.tagName	= "DIV"
  myButton.className	= "buttonClass"
  myButton.style.color	= "maroon"

The structure of the document is the basis of the Document Object Model (DOM). In the DOM, HTML elements are arranged in a nested tree.

<HTML>
    ...

	<BODY>
	    ...
		<DIV ID="myButtons">
		    <A ID="b1" >1</A>
		    <A ID="b2" >2</A>
		    <A ID="b3" >3</A>
		</DIV>
	    ...


	</BODY>
</HTML>

The two most widely encountered versions of the DOM currently in use are the MSIE version and the W3C version. The MSIE version was implemented before the W3C standards were established. Although the MSIE DOM is still used, the W3C DOM will probably become the preferred model. Within the tree structure of the W3C DOM, each element becomes a node, with contextual relationships to other nodes.

  myButtons.childNodes[1].id	= "b2"
  b2.parentNode.id		= "myButtons"
  b2.previousSibling.id		= "b1"
  b2.nextSibling.id		= "b3"

Node properties also include the event handlers which connect the HTML element to scripted responses for specified events.

7.10 The Event Object


Script 8

window.event
event.cancelBubble
onMouseover
onMouseout
onMousedown
onMouseup
onClick
onDblClick
onMousemove
onKeydown
onKeyup
onKeypress
onBlur
onFocus
onChange
onReset
onSubmit

Events are things that happen, either instigated by the viewer or by the computer as it handles the page. Clicking the mouse, scrolling the page, or typing into an input field are viewer events. Completion of loading a page element and completing a print request are page events. Responding to an event involves connecting three elements of a page: the event, the element associated with the event, and the response action.
Information about the event itself is contained in an event object. Microsoft and Netscape handle this object differently, but with enough compatibility to overcome the differences.
Events are linked to response actions by defining event handlers as attributes to HTML elements. Event handler values may be inline scripts or function names. Functions activated by event handlers are defined in scripts.

<SCRIPT TYPE="text/JavaScript">
  function doThis(thisEvent,thisElement)
  {
     // use information about 
     // this event

     // do something related 
     // to this element
  }
</SCRIPT>

The reserved word this represents the containing object. If the function will affect the HTML element responding to the event, this identifier, representing the element's JavaScript object, can be passed as an argument. Event actions can often be scripted entirely inline.

<DIV ID="myButton"
  onMouseover="JavaScript: this.style.color='purple';"
  onMouseout="JavaScript: this.style.color='lavender';"
  onClick="doThis(event,this)"
>Do This</DIV>

The reserved word event is the event object. Properties of the event, including what the event was and where it occurred, may be used in responding to the event. Each time an event occurs, the properties of the event object are updated, and the relevant event handlers are activated.

7.11 Building Pages


Script 9

document.open()
document.write()
document.close()
window.open()
window.close()
setTimeout()
clearTimeout()
event.clientX
node.offsetLeft
node.offsetWidth
node.style.left
node.style.width

In addition to responding to viewer events, JavaScript can be used to dynamically build page content. Scripts are useful for building page elements that are repeated, such as buttons or section headings. Scripts are also useful for adding browser dependent page elements, such as alternate stylesheets or nonstandard components.
Placing elements on a page can sometimes be tricky. For complex arrangements, it is often useful to place some elements after the page has loaded, when the basic elements of the page are already placed.
Although it is less of a problem now than in the past, images can take a noticeable time to appear on a page. If altering images is part of the page dynamic, they can be preloaded as JavaScript objects to avoid awkward transitions.

7.12 Debugging Scripts


Script 10

If you are new to programming, you will soon discover that efficient debugging techniques are the key to writing good scripts. Use these tips and techniques as a guide for developing your JavaScript debugging skills.

7.13 References

¹ JavaScript
http://www.mozilla.org/js/

² JavaScript: The Definitive Guide
http://www.oneyed.org/web_developement/jscript/index.html

³ Microsoft Developers Network Library
http://msdn2.microsoft.com/en-us/library/default.aspx

⁴ : HTML and DHTML Overviews and Tutorials
http://msdn2.microsoft.com/en-us/library/ms537623.aspx

⁵ : About the W3C Document Object Model
http://msdn2.microsoft.com/en-us/library/ms533043.aspx

⁶ : HTML and DHTML Reference
http://msdn2.microsoft.com/en-us/library/ms533050.aspx

⁷ Netscape JavaScript Guide
http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/

⁸ One Browser, Many Names
http://evolt.org/article/One_browser_many_names/21/29442/index.html

⁹ WebReference JavaScript Articles
http://www.webreference.com/programming/javascript/index.html

¹⁰ WC3: Document Object Model (DOM) Level 1
http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/