CSci 1001 Lab 3

Due Tuesday Oct. 8 at 11:59pm.

Introduction to JavaScript

Background

Carefully study the examples on the resources page: Javascript events (helpful for task 1) and Javascript directly in the page (helpful for tasks 2,3):

Save the source (and all needed images) onto the desktop, open the source of these examples in jEdit and the pages themselves in a browser.
Try them in a browser (click on images, move the mouse over, enter data in a prompt window), while looking at the source.
Change at least one thing in each file: perhaps make a click affect another image, or print a different variable. You don't need to submit this part, but it gives you a better feel for working with Javascript.
If there's a mistake in Javascript, no action may be happening. Recall that you can see Javascript error messages in Javascript console.

Task 1: Javascript events (15 points)

Open a new file events.html and copy the following starting code into it:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Changing the dimensions of an image</title>
</head>
<body  style="text-align:center">

<h1>Changing the dimensions of an image</h1>
<!-- this is an image that will be changing. Note the id -->
<img id="apple" src="apple.jpg" alt="A picture that changes" />

<h3>Changing an element in a page from another element</h3>
<p>
Add javascript code to the wizard image to change the height and
width of the apple image above, as specified in comments.
</p>
<p>
<img src="wizard.jpg" alt="A picture of a wizard" height="200" 

/> 

<h3>Changing color and background of elements</h3>
<p>
Add the code to change the color of the text to red when the 
 wizard image is clicked.
</p>
<p>
<img src="wizard.jpg" alt="A picture of a wizard" height="200"
     onmouseover =
     "document.getElementById('colorchange').style.backgroundColor = 'yellow';"
/>
</p>

<div id="colorchange">
This text will change its color and background.
</div>


</body>
</html>

Also save the images of an apple and a wizard from the examples if you haven't done so already. You need to write the code for, and test, the following:

Add the code to change the height of the apple picture to a small number and its width to a very large number when the wizard picture is clicked and back to 200 by 200 when the mouse moves out of the wizard picture
Add the code to change the color of the text to red when the image is clicked. Note that, just like in the background color, you need to use write style.color (not just color to change text properties.
Add one more event (a click, a mouse over, etc) to change the text written in the div (recall the innerHTML setting that we used in the examples in class).

Task 2: Javascript story (10 points)

Start jEdit or Notepad, 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 browser 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, use the Javascript console to check for mistakes. They often are: non-closing strings 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 3: Javascript story with a prompt (5 points)

Change your solution to the previous task by letting the user enter the person's name as a prompt, then print a story with that name. You may take more inputs via a prompt, but that's not required. You may submit separate solutions for tasks 2 and 3 or just one for both.

At the end of the lab

Send your files by e-mail to me elenam at morris.umn.edu and to your partner if you worked with another person. Please use the subject "CSci 1001 Lab 3". If your lab is not finished, the subject should be "CSci 1001 Lab 3 (Unfinished)".
If you are not finished with all tasks, you may continue working on the lab. In this case please submit it together with the problem set.

This page is a part of CSci 1001 course web site.