I seize him with a terrific struggle.
His great will and power are inexhaustible.
He charges to the high plateau far above the cloud-mists,
Or in an impenetrable ravine he stands.
Calculator
The JavaScript date and time display was a small thing, but it introduced the central concepts of the language. Like our oxherder, we're in the thick of the battle - perhaps a bit worried about the outcome. What if this bull's too big? Maybe that last page was too obscure - all that object talk too 'impenetrable'. Let's look at another simple example to consolidate some of the ideas. Play with the calculator on the right. It's obvious that it has a 'program' behind it. You'll be pleased to see that the function that runs it is only one line long. Like Zen, much of JavaScript is 'elegantly simple'.

We'll use this example to introduce a ubiquitous JavaScript method, eval(),and clarify the business of addressing that we visited at the end of the last tutorial page. [The HTML code is capitalized to make it easy to distinguish from the lower-case JavaScript].

eval() has many meanings. In this case, it resolves a mathematical string, returning the answer. Just the thing for a calculator! So eval("6*3/2") returns 9.

When you use the calculator, it builds a string of mathematical symbols - numbers and operators. Pressing the equals button turns the mathematical string into a string holding the results of the eval method. Click the key to see the compute(obj) function. [Don't worry about how the string is built or updated. We'll get to that].

Buttons and 'this':
The Calculator is a simple html table containing buttons and a text box inside of a form . JavaScript makes it 'work'. Recall that there are two places where you see JavaScript code - in the heading as variables and functions, and in the body as JavaScript strings in event handlers. Here are a few lines from the Calculator code shown in isolation for clarity - the compute(obj) function, the text box, and the code for the one, minus, clear, and equal buttons:


The text box is named 'expr' and has no value set so it begins with a blank string as its value. In the last tutorial, when we discussed addressing elements, we referred to it like this:
document.formName.formElement.value
and since the form is 'calculator and the text box is 'expr', we'd say:
document.calculator.expr.value

In JavaScript, there's a shortcut - the word this. It means, 'the current object'. this alone refers to the current window object. this.document refers to the document of the current window object. this.form refers to the current form object. Now look at the code for the one and minus buttons. They say, "Go to the object named 'expr' [the text box] in this form, and add '1' [or '-'] to the string you find there". The clear button says, "Replace the string in the object named 'expr' in this form with a blank string".

What about the equals button? What we want to say is, "Using eval, replace the mathematical string in the text box with the answer". Couldn't we have written this?

onClick="this.form.expr.value=eval(this.form.expr.value)"
Yes! And it would've been a good idea. It's written the way it is to make a point - the next point, about passing values to functions.

this.form is passed to compute(obj) - meaning that the parameter obj now holds this.form. What is it that has been passed? Remember back in Tutorial Two that a variable may hold a number, a string, or an object - and that a function's parameter is a local variable. So obj holds a reference to the calculator form object. Now the code in compute(...) should make sense.

In Japan, the development of Zen and the tea ceremony are inseparable. More than a 'coffee break' the ritual of the tea ceremony is a way of life - an experience of the essence of wabi - 'aloneness', 'solitude', 'poverty'. This ordered, regular observance leads from the tangled everyday world to a place of serenity - a place of peace. Not a bad advice when you're in the middle of learning something new.