\n"); } else { header("Content-type: text/html; charset=utf-8"); } ?> CS-081 Assignment 4

Introduction

This assignment is an exercise in using Javascript to alter the presentation of a web page interactively. The goal is for you to become familiar with Javascript, the DOM tree, and CSS all at the same time. Consider it an experimental approach!

If you have not done so, read the Javascript Tutorial assigned previously. We still haven’t covered forms yet, so you can skip that part of the tutorial. But you will need to work with events in this assignment, so you will need to understand that part as you go through this assignment.

Procedure

  1. Create a new web page for this assignment and add a link to it from your home page.

    Use your XHTML template to create a new web page and save it as a file named Assignment_04.xhtml. Change the title and h1 element to “Javascript Example,” and change the script in the head of the document from Template.js to Assignment_04.js. Save your new web page in your document root directory. Edit your index.xhtml file to add an unordered list in the header div just under the h1 element. But one item in the list, a link to Assignment_04.xhtml. Use “Javascript Example” as the content of the link. View your web site in the browser, and verify that the link is in place and that clicking on it it takes you to your new web page.

  2. Add Javascript code to display four alert messages.

    Ultimately, all Javascript code will be contained in Assignment_04.js, but for this part of the assignment, add additional script tags, one in the document head, and one in the document body. First add a few Lorem Ipsum paragraphs to the content part of the web page. Put one script tag in the head of the document, and the second one between the first and second paragraphs. Put the message, “Alert 1” in an alert() statement in the first one, and the message “Alert 2” in an alert() statement in the second one.

    Create the Assignment_04.js file and save it inside your scripts directory. Put a third alert statement in the script file, and test that the three alert messages show up in the expected order.

  3. Display the number of paragraphs as the page loads and when loading is complete.

    Modify the three alert messages so they show the number of paragraph elements in the document as they execute. Add a fourth alert() statement that displays the number of paragraphs in the document after the DOM tree has been built.