Exercise 4: Javascript and DOM

This lab continues to build core javascript skills.

You may find it useful to refer to an on-line JavaScript reference and tutorials: such as

• MDN Web Docs on JavaScript
• the W3Schools JavaScript Tutorial.

W3Schools

Continue through the W3Schools Javascript tutorial, completing the Objects, Functions, DOM, and BOM topics.

Generating Pages Dynamically using the DOM

The aim of this exercise is to create the components of the page by directly constructing the DOM tree.

1. Read The DOM and JavaScript.

2. In the lectures a number of properties and methods that are useful for traversing the DOM tree were discussed, such as previousSibling, nextSibling, firstChild, lastChild and parentNode. A number of methods for manipulating the tree were also discussed, such as insertBefore, appendChild, removeChild and replaceChild. Some other useful properties and methods include the body property and the methods createElement and createTextNode.

   An on-line reference for these (and other) properties and methods can be found in the Gecko DOM Reference at the Mozilla Developer Center. Look up each of the above methods in the Gecko DOM Reference. Note that some of the methods belong to document and some belong to element.

3. Create a template page, with all the components that you had previously (a banner, a menu, and a footer), with JavaScript.

4. Assume you are writing a system that allows users to prototype web pages using your template and print them off. Previously you created pages by manually copying the template to a new file and adding the content (and title) with an editor. This of course requires access to the filesystem so is not an option for end users.

   Write methods that pop up dialogue boxes asking the user to enter the page title, the heading (of the content section of the page), a paragraph of text, and the URL of a picture. The page should then be displayed with the correct title, and the heading, paragraph of text, and image in the content section of the page.

Optional for fun!Using the Canvas

There is a good online tutorial for using the canvas from W3Schools. For the second exercise of this lab work through the tutorial, and make sure that you understand all features used.