I hear the song of the nightingale. The sun is warm, the wind is mild, willows are green along the shore, Here no bull can hide! What artist can draw that massive head, those majestic horns?

While nowhere near the majesty of the oxherder's bull, the date and time display above reveal the presence of JavaScript. This page is definitely 'alive'. Before we look at the code that makes it work, let's visit the world of Objects, Statements, and Operators - the ones we'll need for a date and time display. [Remember that the key below shows you the code for this page].

OOPs: Object Oriented Programming

The monk asked Joshu, 'Is there Buddah-Nature in a dog?' Joshu replied, 'Mu!'

JavaScript is an excellent platform for learning OOPs. It's easy to understand the objects, since most of them are either visual or conceptual 'entities'. In OOPs parlance, objects are functional entities that have properties ['qualities'], methods ['actions'], and events ['triggers']. The 'How' or 'Why' of an object is immaterial. All that matters is the 'What'. The objects are encapsulated, meaning their 'inner workings' are invisible. We see a bit of Zen here too! In this Zen koan, 'Mu!' [literally 'Not'] doesn't mean 'no'. Its meaning is more like 'Bad question!' It's like asking 'What's in an object?'

The Date Object:

Method	Returns	format (numbers)
getMonth ( )	month	jan=0 thru dec=11
getDate( )	day	day of month
getYear ( )	year	year - 1900
getHours ( )	hours	0 to 23
getMinutes ( )	minutes	0 to 59
getSeconds ( )	seconds	0 to 59

The Date Object is a good one to start with. It holds a date/time of some instant. In order to use the Date Object, you must create a new Date Object for a particular moment in time.

To create one holding the time of its creation, use:

now = new Date()

To create one holding some other moment, use:

newDate = new Date(year,month,day,hour,minute,second) This is called instantiation - 'creating an instance of ...'. There's a quality of objects - polymorphism. This means, in part, that objects can take many forms. In this case, now and newDate hold different instants. We can use the methods of the Date Object to extract information [see the table for the methods needed for this project]:
thisHour = now.getHours()

The Window Object:

The Window Object refers to the window itself. Two of its methods are necessary for this project. They have to do with a timer that's part of the Window Object:

1. setTimeout(commandString, delay)
2. clearTimeout(timerHandle)

The Timer waits for a set number of milliseconds [delay], then executes a JavaScript command [commandString]. Multiple named Timers are allowed. clearTimeout(timerHandle) turns off an existing Timer. So:
Timer1 = setTimeout('alert("Time is up!")',3*60*1000)
is a three minute timer.

The Conditional Statement: if...else

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

Statements are the traditional programming commands in JavaScript. if...else follows the standard format. The condition goes in the parentheses after the word if. You must use one of the relational operators shown below in the condition expression. In JavaScript, the 'curly braces' { } demarcate a 'block' of code. So the expression:
if (age == 16){driveAge = true; liquorAge = false}sets both of the variables if the condition is met.

The optional else clause is followed by a block to be executed. You may string together if ... else if ... else if ... expressions to emulate the 'Case' statements in other languages. There is a 'shortcut' for simple conditional statements:

(age >= 16) ? driverAge = true : driverAge = false;

Operators:

We will use three types of operators in this project. The Relational Operators are used in true/false expressions [Boolean] like the conditional statement just discussed. Then there are the Math Operators used in arithmetic and algebraic calculations. Finally, there are the Assignment Operators - 'shortcuts' for certain mathemetical operations. [They are shown with their equivalent 'long' form]. The equal sign [not shown] can be either an assignment or a mathematical operator.

Math Operators		Assignment Operators		Relational Operators
+	addition	x+=y	x=x+y	==	equal
-	subtraction	x-=y	x=x-y	>	greater than
*	multiplication	x*=y	x=x*y	>=	greater than or equal to
/	division	x/=y	x=x/y	<	less than
%	remainder	x%=y	x=x%y	<=	less than or equal to
++	increment	.	.	<>	not equal
--	decrement	.	.	!	not
.	.	.	.	&&	and
.	.	.	.	||	or

The Date/Time Display:

Isn't this a lot for so simple a project? Actually, no. There are no more concepts. In the practice of Zen, the student is give a single koan for meditation - something like 'What is the sound of one hand clapping?' All of Zen is to be learned from this one exercise, though it may take years. Likewise, almost everything else about JavaScript will be a refinement or elaboration on something already covered. [The only other essentials are the syntax of the code [covered in the next paragraph] and built-in methods [covered in the next tutorial page]. So study the code in the Update() function and the body tag. Master every line in this date/time koan and you'll be well on your way to becoming a 'Master'.

Commentary: The code will now be quite 'readable'. The onLoad event in the body tag calls Update(). The Update() function initializes the Date Object to this instant. Using the Date Object's methods, we extract the necessary information; format it; print it to the page; and then set a timer to repeat the process in one second.

Notice the placement of the curly braces for clarity. [You don't have to use this much space]. The semicolons are optional if each command is on a separate line.

The only piece that need explanation is the addressing:

document.timeForm.dateBox.value = DateString which says, 'Go to the document [page] for this window. Find the object named timeForm. Now, find the object named dateBox in timeForm, and assign the DateString to its value' [More about addressing in the next tutorial].