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 parts 1 and 3 below, but for part 2 (and possibly part 3) you might need a script in the head. 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 IE 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:

  1. Write a JavaScript program which will prompt the user (using window.prompt) 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. 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. You may find this slide helpful.
  2. 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(x, y), which returns the larger of 2 values, is called. This function should be defined in the head of your HTML page. You may find this slide and the one which follows it helpful.
  3. First save a copy of the file pods98.xml in the same directory (folder) in your web space where you are creating your HTML files. Now write a JavaScript program which will read the file and write each author name as a separate paragraph in the HTML document being displayed. You may find this slide and this one helpful.