CS 101 - Intro to Computing, Spring 2008

Lab 5

JavaScript

• <script> </script> - attributes: src

  The src attribute allows us to specify a file that will contain the JavaScript code we wish to use on that web page. The primary advantage of this is that we can reuse the same JavaScript code on multiple web pages. The following example shows this done.

  <script src="jsCode.js"> </script>

  The above assume that a file with the name of jsCode.js exists in the same directory and this file contains the only JavaScript code and comments.

  The JavaScript code in the file will be processed just as if that JavaScript code was in the HTML file between the opening and closing <script> tags.

For this lab, we will want to explore a few more parts of the document object in JavaScript. Check out http://www.w3schools.com/htmldom/dom_obj_document.asp for a discussion of more items.

• document.images[]

  The document.images[] returns a reference to all Image objects in the document. By using the length property we can determine the total number of images in a web page as follows:

  imageCount = document.images.length;

  This assumes that imageCount is a variable.

• document.links[]

  The document.links[] returns a reference to all Link objects in the document. By using the length property we can determine the total number of links in a web page as follows:

  imageCount = document.links.length;

  This assumes that imageCount is a variable.

Lab Assignment 5

For this lab assignment, complete the following:

1. Create a JavaScript file that will write the following to an HTML document:
   • The HTML document's URL.
   • The number of images contained in the HTML document.
   • The number of links contained in the HTML document.
   The information must be printed in a some readable/understandable format. Such a format for the number of images contained would be:

   This page contains 3 images.

2. Create an HTML file that lists:
   • your name
   • day and time of your CS 101 lab section (i.e. Wednesday at 9:00)
   • a link to the CS 101 Home Page
   • a link to your own Home Page
   • a link to any other page you wish
   • at least two images that you like
   • the output from the JavaScript file created above.

3. This web page must be placed in your web space (in your WWW directory) on your CS account.

4. You are also required to put a link on your CS Home Page to the page you created for this lab.

   Verify that your link and the file are viewable via a web browser from the URL of:

        http://www.cs.uic.edu/~USERID
   
   where USERID is your CS account login name.
   

   You can check this out via the link to your home page on the CS 101 Student List page. Once you are at your home page, follow the link you added to your home page for this lab assignment.

5. You are also to submit the HTML file and the JavaScript file electronically by using the UNIX turnin command.

   To use the UNIX turnin command to electronically hand-in your html file using the project name of lab5. To submit the file in <filename> for lab5, the turnin command is entered as:

        turnin -c cs101 -p lab5 <filename>
   

   To submit multiple files, list them after the name of the project. Thus if your HTML file has the name of lab5.html and your JavaScript file has the name of lab5.js, the command would be:

        turnin -c cs101 -p lab5 lab5.html lab5.js
   

   To verify what you submitted using the turnin command type:

        turnin -c cs101 -p lab5 -v
   

Grading Criteria

• Identifying Info - 14
• 3 links - 14
• 2 images - 14
• URL from JS - 14
• Correct & pretty number of images from JS - 15
• Correct & pretty number of links from JS - 15
• In web space - 14