Along the riverbank under the trees, I discover footprints!
Even under the fragrant grass I see his prints.
Deep in remote mountains they are found.
These traces no more can be hidden than one's nose, looking heavenward.
sitting quietly
doing nothing
spring comes
and the grass grows by itself
In the last tutorial, we met the three elements of JavaScript: Here we'll look at how they're constructed and what they do. Unlike Java, JavaScript is invisible. There's no lag while classes or controls load. JavaScript enhanced pages load as simple html documents. The JavaScript variables and functions are 'sitting quietly', unobserved until the user does something to call them to action. The call to action is referred to as an 'event'.

JavaScript Variables
variable1 = 32;
var variable2;
var variable3 = new Date ( );

function myFunction (parameter) {
var variable4;
variable5 = "This is a string";
var variable6 = "So is this";
....
}

Variables are 'places' to store information. JavaScript variables may hold numbers, character strings, or objects. JavaScript variables are 'loosely typed', meaning you don't have to declare the variable type in advance. The only issue is the 'scope' of the variable - global or local:
  • Global variables can by accessed from anywhere in the page's code. You may declare variables by assigning a value [variable1], with the var statement [variable2], or both [variable3]. All variables declared outside of a function are global [variable1, variable2, and variable3]. In addition, variables declared inside a function by assigning a value are global [variable5]. Global variables persist until the page is unloaded.
  • Local variables are only visible inside the function that declared them, and disappear when the function terminates. You must use the var statement to declare a local variable [variable4 and variable6]. Values passed to functions [parameter] behave as local variables [see below].

zenMaster = new Array(5);
zenMaster[1] = "Eno";
zenMaster[2] = "Sekito";
zenMaster[3] = "Baso";
zenMaster[4] = "Joshu";
zenMaster[5] = "Bodhidharma";
About Arrays in JavaScript:
An array is a group of indexed variables with the same name. The format is arrayName[index]. The example creates an array of Zen Masters. The line zenMaster = new Array(5) uses the Array Object to create the array. Don't worry how this works. We'll discuss JavaScript Objects later. [Note: JavaScript allows you to add elements to the array without redimensioning it. So zenMaster[6] = "Ummon"; is legit].

JavaScript Functions:
Functions are the essence of JavaScript. They will preoccupy the remaining pages of the tutorial. For the moment, we'll settle for looking at the general format:
function functionName( parameter1,... parametern){functionCode}

Where:
function Circumference(radius){
return 2*Math.pi*radius;
}
functionName is the name of the function.
parameter1-n are the values passed to the function.
functionCode is the JavaScript code that executes when the function is called. In the example on the right, the function receives the radius of a circle and returns the circumference. The value Math.pi is a built in property of the Math Object. The command return sends the calculated value back to the calling entity [more about that below].

JavaScript Event Handlers:
Event Control/Action
onLoad window, frame
onUnload window, frame
onClick button, reset, submit,
radio, checkbox, links
onChange select, text, textarea
onFocus select, text, textarea
onSelect select, text, textarea
onBlur select, text, textarea
onSubmit form
onMouseOver links
onMouseOut links
onAbort Image
onError Image Object, Window Object
onReset form
Our young oxherder has discovered footprints! How does he know a page contains JavaScript? It adds nothing distinctive. Instead, it 'captures' the html controls: links [text or image], image maps, and form controls [buttons, lists, text boxes, radio controls, and check boxes]. The links and image maps allow a 'jump' when selected. The form controls let you submit information to a server. JavaScript adds event handlers to these controls so you can use them for anything you wish. The table summarizes the event handlers and their associated html elements:

The essence of each these event handlers is pretty intuitive [except maybe onBlur. It means 'on losing focus']. We'll define them formally later. For now, let's look at how they work. My earlier claim that JavaScript doesn't add anything isn't completely true. There are three pop-up dialogs, illustrated here with their code below. Try them:


These buttons are the 'footprints' that let the oxherder know there was JavaScript to be found. It's not that buttons aren't a regular feature of web pages. It's what they're used for. In 'straight' html, the form elements can only be used for form submission. With JavaScript, they can be used for anything.

Notice that the code looks a lot like the regular code for an html form. It doesn't have an 'action' in the form tag. There is a new input type called button. The main difference is the addition of the event handler - onClick. It means, "When this button is clicked, execute the JavaScript code in the string provided". In these examples, we don't even have to call a function. The command is short enough to include in the onClick command. Notice that the action taken by an event handler is always a character string. The JavaScript commands are simple calls to the 'methods' of the Window Interface Object of JavaScript.

Little flower - but if I could understand
What you are, root and all, and all in all,
I should know what God and man is.
We're well down the path now. D.T. Suzuki attempts to illustrate the essence of Zen by recalling Alfred Lord Tennyson's poem, "Flower in the Crannied Nook". In the poem, the English poet plucks a small wildflower, and reflects on the meaning of life.

closely seen.
a flower blooms
under the hedge!
Compare the words of the 18th Century Japanese haiku poet, Basho. The Zen Master might ask Lord Tennyson, "Why did you pick the flower? Are you not destroying the very essence you seek to find?"

What does this have to do with JavaScript? What is its Zen? The JavaScript masters have not changed the web page. They've taken the things you're used to seeing in your browser, on its pages - and breathed more life into them. They've given you new brushes for your paintings. The canvas stays the same.

Java, and even ActiveX, are beautiful things. We'll enjoy seeing seeing them grow. We'll learn to use them. But they seem like something new - something else. For some of us, there's a feel to the accessability and simplicity of JavaScript that resonates with html and the origins of the web. The world-wide web is conceived as a seamless world in which ALL information, from any source, can be accessed in a consistent and simple way ... Tim Berners-Lee, creator of the World Wide Web, 1993.