JavaScript Laboratory Session

The purpose of this laboratory session is to help you learn about JavaScript. You will be asked to write 3 small JavaScript programs which generate HTML. In each case the program should be embedded in an HTML page, so that it can be executed by a web browser.

Your HTML page might initially look like the following (which you can copy and paste into a file):

<html>
<head>
  <title> ... </title>
</head>
<body>
  <script type="text/javascript">
  ...
  </script>
</body>
</html>

Having a script in the body will work for the first part below, but for the others you should move the script element to the head. (Placing a script in the body is not good practice, but it the simplest way to start.) I suggest that you place your files in your personal DCS web space (this will be essential for part 3 below). Instructions on how to do this and what the resulting URLs will look like are given on the student web page wiki entry.

Debugging JavaScript can be a painful process. However, Firefox, Chrome and other browsers now provide debuggers under their "Web developer" or "Tools" menus. For example, with the Firefox debugger you can set breakpoints and then inspect the values of variables at those points.

The three tasks are as follows:

Write a JavaScript program which will prompt the user, using window.prompt (see slide 9), for two integer values and will output the larger of the two values using the following HTML:
```
<p>The larger of ?? and ?? is ??</p>
```
with ?? replaced by the appropriate values. You should just use a simple script with no functions, using document.write (see slide 6) to output the above HTML. The values entered by the user are assumed to be strings, so you will need to use the parseInt function to convert each value into an integer necessary for the comparison to return correct results.
Now modify your program so that the user enters the two values using a form. When the user clicks a button in the form, a function larger(), which outputs the larger of 2 values, is called. This function should be defined in the head of your HTML page (see slide 15 and slide 16). Your first solution might embed the function call in the onclick attribute of the button (see slide 8), while your second might use event handlers (see slide 12 and slide 13).
First save a copy of the file pods98.xml (use right-click and then "save as") in the same directory (folder) in your web space where you are creating your HTML files. Then either download a copy of the jQuery library from the jQuery web site or from this directory (remember to use "save as") or reference the library over the web (see slide 11). If you downloaded the library, you will still need to reference it using a script element (note that an explicit end tag is required for the script element). Now write a JavaScript program which will read the XML file and output each author name as a separate list item in the HTML document being displayed when a button on the page is clicked. You may find slide 27 and slide 28 helpful.