Dynamic page content exercise

Download this page and open with Dreamweaver. Or right click and select "View Source", then cut and paste the code to Dreamweaver.

Task 1

Below this text is a block with an ID of "changeMe", presently it's contents read "This is static HTML text". Use what you have learnt about document.getElementById() and innerHTML to change the text in this block to read "JavaScript inserted text".

There is a <script> block in the code below this text (line 41 - 45) which you should use for your JavaScript.

Preview in a browser to make sure your script works.

This is static HTML text

Task 2

Use the <script> block below (lines 62 - 66) to contain your work for this task.

Use the JavaScript Date object to find the month, day of the month and year. Load each into its own variable, named appropriately (day, month, year).

Concatentate these variables into a string stating today's date in the format "01/03/2011".

Using getElementById() and innerHTML, add this string to the block below with the ID "todayIs".

Today is?

Task 3

Amend your code for task three to add in a new variable into which you should assign the time. You can use the same Date object you used for task 3 for this. Below where you have displayed the date in the page, use the time variable to add another line which displays the time the page was called and which reads: "The page was last called at: (time)".

Refresh your page a few times to check this is working.

Extensions

  1. The <div> tag below has a unique id of "boldBlock". Use innerHTML to retrieve the content of this <div> and load it into a variable.

    Concatenate this variable with strings containing open and close HTML bold tags (<b> ... </b>).

    Use innerHTML to add the newly concatenated string back into the original <div> tag.

    Make me bold
  2. Use setTimeOut() and the JavaScript Date object to create a working clock. Use innerHTML and getElementById() to place this clock in the block below with the ID of "myClock". Use the same technique as above to retrieve the time from your date object. Make your clock update itself every second or less with the correct time.

    Clock