Lesson 3: Building a JavaScript Clock Part 1

Overview

In this assignment, you will add some simple Javascript to one of your existing web pages.

Learner Outcomes

At the completion of this exercise:

Activities

In this lesson, you will add a digital clock to your web page. In doing so, you will learn a variety of new JavaScript techniques. Start by opening javascript.html in both your text editor and a web browser.

First, you need to create a container in the body of your web page that Javascript will write to, like this:

<div id="clock"></div>

This div is empty for now, but with JavaScript, you can get the current time, then write it to this new div. JavaScript will access the div by it's id attribute. In previous lessons you used the id attribute to link to specific targets within a web page and to stylize individual elements differently than other elements of the same type using CSS. In this lesson, the element's id is used to help JavaScript retrieve an element and manipulate it. Clearly the id attribute is very versatile and important!

After, you've created the empty div, you need to create a JavaScript function to get the current time and write it to the empty div. Here's that function (add it to the head section of your web page; it's ok to place it inside the <script> tag that already exists, either before or after your showAlert() function):

  function updateTime() {

  	// get all parts of the current time
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    // splice them together into a character string named "currentTime"
    var currentTime = hours + ':' + minutes + ':' + seconds;

    // get the clock div
    var myClock = document.getElementById('clock');

    // write the currentTime string to the clock div
    myClock.innerHTML = currentTime;
  }

In this function, the first thing you're doing is creating a new variable called now and assigning a new Date object to that variable. JavaScript is an object-oriented programming (OOP) language. In OOP, an object is a data structure that combines properties and methods together. JavaScript include built-in objects, but you can also create your own. The Date object is one of the built-in objects. Its methods include getHours(), getMinutes(), and getSeconds(), among others. So, in the function you're adding to your web page, you can get the current hours, minutes, and seconds from the now variable you've created, since now is a JavaScript Date object.

After your have retrieved all the information you need from the JavaScript Date object, the next thing you're doing is splicing them together into a character string, which you're assigning to a variable named currentTime. In order to splice parts together, you just add them together using the plus sign (+). Some of the parts are variables (hours, minutes, and seconds) and some of the parts are new characters (semicolons that are used to separate the different parts). It's easy to make mistakes when typing a long multi-part string like this, so be careful to include all those plus signs and quotation marks!

The next step is to retrieve the empty clock div from your web page. One of JavaScript's built in objects is the document object. This is very handy way of allowing programming and scripting languages to access and manipulate the content of web pages, and is known to as the Document Object Model (DOM). The document object includes a getElementById() method, which you're using in this case to get the element from your web page that has an id of "clock".

The final step in the updateTime() function is to add the value of your currentTime variable to the clock div that you just retrieved.

Now that you've added this function to your web page, you need to call it. Since you probably want the time to be displayed automatically when the page is loaded, you can call it using an onload event attached to the <body> element, just like you did in Lesson 1:

<body onload="updateTime()">

Comments In JavaScript

In the above JavaScript function, you probably noticed several lines that started with two forward slashes (//). This is one of the ways that comments can be added to JavaScript code. Comments can appear on a line by themselves, as they do in this example, or they can appear on the end of any line of code.

JavaScript also supports comments enclosed within /* and */, like the ones used in CSS.

Here is a summary of all the different methods you've learned for adding comments to your code:

  <!-- This is a comment in HTML. -->

  <!-- HTML comments can be "inline" (added to an existing line of code)
       or they can span multiple lines, like this one (called "block comments") -->

  /* This is an "inline" comment in CSS or JavaScript */

  /* This is a "block" comment in CSS or JavaScript (it spans multiple lines).
     This syntax is the same as in a variety of programming languages, including:
     C, C++, C#, Objective-C
     PHP
     Java
  */

  // This is an in-line comment in JavaScript
  // This too is used in a variety of programming languages, but NOT in CSS

Resources

In this lesson you used the Date object that's built in to JavaScript. You also used the HTML Document Object Model (DOM). If you're wondering what other built-in objects are available, or if you're wondering how you would know what properties are methods are available for a particular object, you can get answers to these questions by consulting a Javascript or DOM reference guide, such as this one from W3Schools:

All done?

Check your web page in your browser. If all went well, you should see the current time after the page loads. If not, you have an opportunity to practice the debugging skills that you learned in the previous lesson. Once your clock is working, you might be thinking of ways it could be improved, both visually and functionally. You'll be doing that in the next lesson.