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.
We will see how to make both improvements.
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.
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 ();
There are 2 ways of writing comments alongside JavaScript code:
// rest of 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. They could become really confusing if the code is changed.
DO use them to explain why you have done something the way you have, if it is at all unusual. You may need such comments if you need to modify the code a long time later.
There is a function available for the purpose:
setInterval (showDateTime, 500);
where the first parameter is the name of a function to be called repeatedly and the second parameter is the number of milliseconds to wait between each call. 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);
In either case the system will invoke showDateTime() every half second (500ms).
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 particularly useful site is the Mozilla organisation's Javascript reference site. Search online for "javascript ... (whatever you need)" and you will find relevant pages.