Step 2 - The first JavaScript code

JavaScript

Now it's time to add some behavior to the web page. We are going to write a JavaScript that check the actual time, updates the paragraph with the id "clock", then waits 1000 ms, before the JavaScript function calls itself and updates the time again.

First we need to add two scripts in the head element in the HTML file. The first gives the browser access to jQuery and we do that by adding the following line in the head element: <script src="http://ajax.googleapis.com/
ajax/libs/jquery/1.11.1/jquery.min.js"></script>. The second is the link to the JavaScript file that we will write for this web page: <script src="clock.js"></script>. Notice that the path to the JavaScript for the clock is the same as for the HTML file, however this depends on the file name you use as well as where you chose to save the JavaScript.

The last thing we need to do in the HTML file is to call the JavaScript when the web page loads. We do that by using an onload-call in the body tag by changing the body tag to <body onLoad="dotime()">. This will call the JavaScript function dotime().

A JavaScript function is declared by writing function nameOfFunction(){ and is closed by a }. In between the { and the } is where we write the JavaScript code. A variable is a container for storing data values. These values can be numbers or strings of text, or arrays of different kinds of information. A variable is declared as: var variableName = 5;. A line of code in a JavaScript is ended with an ;. Writing comments in the JavaScript are recommended as this will help to understand the code. A comment is written with // at the beginning of the line. Lines with comments that starts with // are ignored by the JavaScript.

The new operator creates an instance of an object type from an constructor, in this case the Date() function. The current date is stored in the variable d. From d we then extract the current hour, minute, and second, and store these values in three different variables. We do this so we later on can easily access these time values independently.

Having the time shown as 3:7:12 is not very nice, why we use an if-statement to check if a 0 should be added first in each time value. The 0 will be added if the time value is less than 10. This will show the time as 03:07:12, which looks nicer. The + sign adds the value in one variable with the value in another value, however in this case the 0 is a text string (since it has "" around it) and not a number why the 0 is put before the value in the variable.

Then we need to show the clock on the web page why we use jQuery to set HTML content of id "clock" to a string containing the value of hours followed by " : ", then the value of minutes followed by " : ", then the seconds.

Finally we use a timing event, setTimeout(), which executes a function once, after waiting a specified number of milliseconds. As we want the clock to be updated every second, we set the time interval to 1000 milliseconds. The function() calls our JavaScript function dotime().

function dotime(){
// Get the current date, extract hour, minute, second
var d = new Date();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();

// Insert a 0 first if the numbers are below 10
if (hours < 10){hours = "0" + hours};
if (minutes < 10){minutes = "0" + minutes};
if (seconds < 10){seconds = "0" + seconds};

// Update the text in id "clock" with the current time
$("#clock").html(hours + " : " + minutes + " : " + seconds);

// Wait 1 second and call this function again
setTimeout(function(){ dotime();}, 1000);
}

From now on, only new parts of the JavaScript will be shown. However, it is easy to get access to the JavaScript on a web page by clicking on the appropriate JavaScript link in the HTML source code.