Metropolitan State University

ICS 225 Web Design and Implementation

 

Lab 3:  Introduction to JavaScript

 

Create a subdirectory of public_html called Lab3 and place all the parts of this lab in the subdirectory.  Remember –

 

·       Directory and filenames on the server are CaSe SensiTive

·       Only files placed in public_html or one of its subdirectories are visible from the web

 

Part I.  Debugging

 

Script debugging:  Turn on debugging in Internet Explorer by selecting Tools, then Internet Options.  Click on the Advanced tab.  Be sure the box “Display a notification with every script error” is checked and the box “Disable Script Debugging” is not checked.

 

Editors:  Some students like using TextPad as their text editor rather than WordPad or NotePad.  TextPad uses different colors and indenting to show the structure of your programs.  However, you are welcome to use any editor you like.

 

Testing:  You do not need to upload your web page to the server in order to test it out.  You can save your files on the H: drive while you are working on them tonight.   To debug, simply display the directory that contains your files and double click on the file name.  Your web page will be displayed using Internet Explorer (or whatever the default browser is on your computer).  When you are completely finished, upload your files (including pictures) to the server and retest them to be sure nothing broke.  Remember – filenames are case sensitive!

 

View Source:  From the browser you can click on View | Source to display the HTML tags and JavaScript for any web page.  Try this on your web page to see how it works.

 

Examples:  Code examples from the textbook are posted at:  http://www.oreilly.com/catalog/designjs2/   You are welcome to download and play with the examples.

 

Part II.  Introducing JavaScript

 

  1. Create an HTML document with a picture and two paragraphs.

 

  1. Add the onmouseover event handler to one of the paragraph tags.  The mouse over event should cause the cursor to change to the shape of a hand with a pointing finger (pointer).  Here is an example of a mouse over event which causes the cursor to change to the shape of crosshairs.

 

<p onmouseover="style.cursor='crosshair' ">This is a test</p>

 

  1. Change the shape of the cursor as the mouse moves over the image.

 

  1. For one link, change the fontweight style property from normal to bold as the mouse moves over the link and back to normal as the mouse moves off the link.

 

  1. Using the Date object, display today's date in the form:  Monday, September 19, 2005. 

 

  1. Display the current time on the west coast (two hours earlier than here).

 

Part III.  To Finish

 

Once you are done testing, use the Secure Shell File Transfer program to copy your web pages to the server.  Put your files in a separate subdirectory called Lab3.  Retest to make sure nothing broke.