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):

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:

  1. 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
  2. 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.
  3. 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)

  1. Start jEdit or Notepad, 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 browser 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.
    Write short strings, make sure that line breaks don't happen in the middle of a string.
  5. Add at least two more variables and use them in your story.
  6. 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.
  7. 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


This page is a part of 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.