Week 2

Lecture Notes:

Events & Event Handlers
Event Handlers Examples
Incorporating JavaScript into your HTML pages
JavaScript and the HTML layout
The concept of program control
Introduction to "if - else" branching
- Date Methods & Examples (Review)
- Weekend Checker - if - else
- What time of day is it - if - else if
- Digital Clock using gifs -- Static (Annotated Version)
- Digital Clock using gifs -- Dynamic (Annotated Versions 1 & 2)
- document.bgColor Fade - Annotated Version (just for demo purposes)
switch()
- Weekend Checker - switch()
while loops (while loop example & Step by Step Demo of the code)
for loops (Calculating the sum of digits) &
nested for loops (Step by Step Demo of the code)
Multiplication Table (another example of nested for loops)
Functions
- Clock (Annotated Version)
- The calendar example is to show you how easy it is to "custom" JavaScript if know even just the very basics - so, given the 2009 Calendar how can you make it a 2010 Calendar?
  - 2008 Calendar (source)
  - 2009 Calendar - for an exercise for yourself convert 2009 to 2010
  - 2010 Calendar
There's more than one way to call a Function
Curly Brackets
User Interaction Continued
Putting all together
Week 2 Zipped (index.htm is the "Home" Page)
Week 2 in Word Document Format Zipped

Next Week:

Quiz, Arrays, "Browser Detection", Status Bar Scrolling, Hyperlinks, & Image Swaps

Practice Quizzes:

Quiz 1 - Links 1
Quiz 2 - Links 2

Homework:

Assignment 0: (NOT required -- recommended)
Take a look at the JavaScript Kit site, it offers free scripts. Try to look at a minimum of 5 scripts.

Many of these scripts will be difficult for you to understand, but now that you've looked closely at Events and Functions, you should know enough to start borrowing code -- even if you don't completely understand the code itself. Basically, you can borrow Functions from this site or others like it, place them in the head section of your HTML document and then use your understanding of Events to figure out how to call them.

And then all you have to do is hope that they work properly...

Assignment 1: Due 13 Oct
(Note: Explanation of the exercise numbering is as follows using 123.htm as an example: 1 represents the Assignment Set Number, 2 represents the Week, & 3 represents the Exercise Number. Save each respective exercise as x.htm, where x is the exercise number as listed below, for example, 124.htm.) For submitting your homework create a links page that points to each individual exercise (sample page). This will be the page in the URL box when you submit your homework.

NOTE: For exercises 1 & 2 try to use JavaScript String Methods.
DO NOT use any <BODY onLoad="...">'s, <FORM>'s since we "haven't" covered them yet, and document.write(…)'s within a function.

(121.htm) Create a script where someone can type into the prompt() dialog box either, for example, http://espn.go.com or just espn.go.com. If they do the latter, have JavaScript figure it out and append http:// to the front of what they typed. Display the results (http://espn.go.com) as an active hyperlink on a document page.
Hints: String Content Methods & HTML String Methods - Example

(122.htm) Create a script where you prompt the user for a color (red, blue, or green) and then prompt() for her or him for a sentence. Take the user's input and write out the sentence to the document in the color the user chose. Furthermore, also make the sentence bold.
Hint: String Appearance Methods

How would you customize the output in 123.htm to include the user's name in both the alert box & the document?

Extend 124.htm so that if users answer correctly, they have the choice to answer a second question, but if they get the answer wrong give them a second chance to answer the same question again.