CSci 1001 Lab 2: Introduction to JavaScript

In this lab you will write two simple JavaScript programs based on examples on this page.

Task 1: A JavaScript story

  1. Start jEdit, open a new file
  2. Copy/paste the program below into the file and save it as story.html on your Desktop.
    
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>
    
    A story program for CSci 1001
    </title>
    </head>
    <body>
    <h1>A story program for CSci 1001</h1>
    <p>
    <script type="text/javascript">
    // variables
    var person = "Mary";
    var place = "Morris";
    // add more variables here:
    
    document.write(person + " lives in " +  place);
    // continue the story here:
    
    </script>
    
    </p>
    </body>
    </html>
    
  3. Open the file in a new Firefox tab, check that the program works.
  4. Continue the story using the variables person and place. Feel free to change the beginning. Check your program after every change.
  5. Write short strings, make sure that line breaks don't happen in the middle of a string.
  6. Add at least two more variables and use them in your story.
  7. If the program does not work, go to Tools and choose JavaScript Console. This is where the error messages are displayed. Press Clear to clear the old messages, then go to the page again, and then bring up the console again, it shoudl show you an error message for your program. Correct the mistake and try it again.
  8. Change the variable values in the beginning of the file. For instance, you may change
    var person = "Mary";
    to
    var person = "Peter";
    Reload your page, and see it change.

Task 2: Celsius-to-fahrenheit conversion

  1. Copy the following program into a new file, save it as temperature.html.
    
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>
    Celsius-to-fahrenheit conversion for CSci 1001
    </title>
    </head>
    <body>
    <h1>Celsius-to-fahrenheit conversion for CSci 1001</h1>
    
    <p>
    <script type="text/javascript">
    var celsius = window.prompt("Please enter temperature in Celsius:", "");
    var fahr = (celsius * 1.8) + 32;
    document.write("The temperature is " + fahr + " Fahrenheit<br />");
    
    // Add another prompt to ask for temperature in Fahrenheit, 
    // convert it to Celsius and print the result
    // The conversion formula is C= (F-32)*0.5555
    </script>
    </p>
    </body>
    </html>
    
  2. Open it in a browser and make sure it works.
  3. Add another prompt to ask for temperature in Fahrenheit, store it in a variable fahr
  4. Convert the temperature to Celsius using the formula in comments and display it on the page using document.write
  5. If the page does not work, check the JavaScript Console

At the end of the lab


CSci 1001 course web site.

The views and opinions expressed in this page are strictly those of the page author. The contents of this page have not been reviewed or approved by the University of Minnesota.