Next page | Contents page |

Keeping time

The preceding exercise caused the current date and time to appear when a page was displayed. There are at least two things about it which could be improved.

  1. The whole content is replaced by the document.write() so the other content, the paragraph of text, disappears.
  2. It would be better if the time could be updated regularly, like a clock.

We will see how to make both improvements.

Writing to part of the page

This introduces a general technique that we will make much use of throughout the course. The idea is to give an element on the page an identifier so that our JavaScript can find it in the DOM and modify its contents there. You will see that such modifications do immediately appear on the displayed page.

id attributes

It is really important that the values of id attributes are unique on any page. The code described here should enable you to see why.

Naming elements is done by giving them id attributes. For example:


  <p id="clock"></p>

There was no need to put any content in that paragraph because we will write it from JavaScript. We do that by first calling another of the many functions available in the DOM object called document, to get a reference to the paragraph element called clock:


  var clockElement = document.getElementById ("clock");

(Remember document.getElementById (idString); because we will be using it a lot.)

Then use one of the variables (not function this time) available for such an object, to set the HTML content:


  clockElement.innerHTML = "It is now " + new Date ();

Making the clock tick

Comments

There are 2 ways of writing comments alongside JavaScript code:

// the rest of this line is comment

/* starts a comment that may go over several lines until it ends with */

DO NOT use comments merely to repeat what the code is obviously doing.

DO use them to explain why you have done something the way you have, if it is at all unusual.

There is a function available for the purpose:


  setInterval ("showDateTime()", 500);

where the first parameter is some code to be run repeatedly and the second parameter is the number of milliseconds to wait between each run. This function, setInterval(), really belongs to an object called window, representing the browser window. It is a convention that if you do not prefix the function name by "window." then that object is implied. If you want to be pedantic though you could equally well write


  window.setInterval ("showDateTime()", 500);

JavaScript reference manual

So how do we know what objects, functions and variables are available for us to use? The language standards already referenced are mostly very formal and hard to read, so we need something else. On the internet a useful site is w3schools. It has useful reference pages about HTML elements and their attributes too. However the site does not seem to be kept up to date.

Update, 2017: The Mozilla organisation now has a useful Javascript reference site.

Next page | Contents page |