Week 3

Lecture Notes:

• Quiz 1 (Due 13 Oct)
• Week 3 Introduction
• Review
  • Objects & an example that ties everything together
• Tooltips - pure CSS solution
  • Tooltips
• Status Bar
  • Hyperlinks
  • Image - onMouseOver/onMouseOut
  • Image - onMouseOver/onMouseOut - version 2 using document.getElementById('mo').innerHTML
  • Status Line setTimeOut()
  • defaultStatus & onFocus Status Line Message
  • Image Maps & Status Line Messages
  • Image Maps & Status Line Messages - version 2 using TITLE
  • Image Maps & Status Line Messages - version 3 using document.getElementById('mo').innerHTML
  • Status Bar Examples
    • Digital Clock
    • Scrolling Example
      Step by Step Demo of the code
      Annotated Version
    • Flasher (Annotated Version)
    • A Message that will Automatically Stop (Annotated Version)
    • The following are just demos - not required for this course
      • Kewl Example
      • Formatting of the Hard Drive (using a textbox instead)
• Image Swapping Overview
  • "wrong" way
  • other examples of how NOT to do it: 1, & 2
  • "right" way
    • "right" way using CSS tooltip
  • Other Examples
    • Blink Eye (onMouseOver with setTimeout()) (Annotated Version)
    • Digital Clock Revisited (Annotated Version)
    • Another Image Map Example (Annotated Version)
    • Image Map Example using TITLE (Annotated Version)
    • Changing images using a:
      • Button
      • Hyperlink
    • Changing Multiple Images at Once
• Image Swap Link
  • Tutorials (How to Image Slice, TV Screen, etc...)
• Arrays
  • Sorting Numbers (just for your reference)
  • Bouncing Ball
  • Dynamic Date Display
  • Digital Clock (Annotated Version)
  • Random Quotes (Annotated Version) - the quotes refer to Netscape browsers
  • Rotating Banner (Annotated Version)
  • Rotating Banner with Synchronized Status Bar Messages
  • Rotating Banner with Synchronized Status Bar Messages - version 2 using document.getElementById('bmsg').innerHTML
  • Random Rotating Banner with Synchronized Status Bar Messages
  • Random Rotating Banner with Synchronized Status Bar Messages - version 2 using document.getElementById('bmsg').innerHTML
  • Slide Show (Annotated Version)
  • Slide Show version 2
  • Slide Show version 3
  • Random Color Swaps (Annotated Version)
  • Day of Week (Not Required)
• Jump to List
• Compatibility Checks
  • version 1
  • version 2
  • version 3
• Browser & Operating System Check
• Determing JavaScript version for a browser
• Using typeof
• Calendar Project - this example demonstrates how we can build on the simple examples we have learned so far. This example incorporates: Array(), Date(), write(), if - else, & for loops.
  • Calendar (Annotated Version)
• Week 3 Zipped (index.htm is the "Home" Page)
• Week 3 in Word Document Format Zipped

Next Week: Quiz, Review of Homework Assignment Set 1, Forms & Form Validation

Practice Quizzes:

• Quiz 1
• Quiz 2

Homework:

Reading Assignment

• OnLine Tutorial Parts 5, 6, 8, & preparation for next week 7

Assignment 2: Due 20 Oct
(Note: For this assignment instead of creating a links page that points to the individual exercises, create a page with a drop down box that jumps to each exercise. So 231.htm will be the links page. Template)

1. (231.htm) will include status bar messages that goes from left to right, and looks like a typewriter is typing the message. The main class example above goes from right to left & scrolls. In this exercise have the status bar display several (3 - 4) different messages with a pause (different than the typing speed) between each message.
   NOTE: Don't use a for loop - this can get you into major trouble.
   Hint: A template for possible use

2. (232.htm) Create a page with HTML & JavaScript that includes a form with three input fields. The relationship of the values of the fields are such that the second field is twice the value of the first field, and the third field is the square of the first field. The user can input a number in any field and onChange the appropriate values are outputted to the other fields.
   
   What should happen - if you put :
   4 into the 1st field then 8 shows up in the 2nd field, & 16 in the 3rd field.
   10 into the 2nd field then 5 shows up in the 1st field, & 25 in the 3rd field.
   36 into the 3rd field then 6 shows up in the 1st field, & 12 in the 2nd field.
   
   Hints:
   A template for possible use
   To make this script easier, you will probably want to use some of the Math methods.

3. (233.htm)
   1. Create an image onMouseOver that swaps the image and takes the user back to 231.htm when the user clicks on the image. Use the images on the Images Page.
   2. Include a document.getElementById(...).innerHTML or  TITLE message to go along with the onMouseOver.
   3. Make sure that on a onMouseOut the message disappears when the user leaves the image.
   4. Also make sure that you use "if (document.images)" and pre-load the images.
   5. Include also one "text hyperlink" on the page that "points" to & explains 231.htm by using a onMouseOver Tooltip and onMouseOut the Tooltip disappears.

   Hint: Use this example

4. (234.htm) Create a script that prompts the user for a number x (4 - 6), & then prompts the users x times, each prompt requires the user to input a single word. Once the user has inputted a number x (4 - 6) and x number of words, then print out the words in reverse order. Make sure that each word is on a separate line.
   Hints:
   - prompt("How many Words (4 - 6 is good)?", "4")
   - prompt("What's Word " + x + "?", "") - where x is 1 - 4 or 6 for example.