CSci 1001 Lab 2

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

Start jEdit, open a new file

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>

Open the file in a new Firefox tab, check that the program works.
Continue the story using the variables person and place. Feel free to change the beginning. Check your program after every change.
Write short strings, make sure that line breaks don't happen in the middle of a string.
Add at least two more variables and use them in your story.
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.
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

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>

Open it in a browser and make sure it works.
Add another prompt to ask for temperature in Fahrenheit, store it in a variable fahr
Convert the temperature to Celsius using the formula in comments and display it on the page using document.write
If the page does not work, check the JavaScript Console

At the end of the lab

Send your html files by e-mail to me elenam at morris.umn.edu and to yourself.
If you are not finished with all tasks, you may continue working on the lab at home. In this case please submit it by Friday, Feb. 20 11:59pm.

CSci 1001 course web site.