Table of Contents

Week 1

Week 1 Introduction
What is JavaScript
What can you do with JavaScript?
What can't you do with JavaScript?
Java -vs- JavaScript (Object-Oriented -vs- Object-Based)
- Object-Orient Programming with JavaScript -- Part I & Part II (NOTE: Not required)
How do you use JavaScript?
Working with the JavaScript Object hierarchy
The organizational structure of the Objects on a Web page.
- Referring to JavaScript Objects (DOM - Document Object Model)
- window Object
- document Object (look at it quickly, don't spend too much time)
- history & location Objects (look at it quickly, don't spend too much time)
  - history & location Examples
- navigator Object Properties
JavaScript Elements
Summary of JavaScript Objects
A few things you should know
Week 1 Zipped (index.htm is the "Home" Page)

Week 2

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 2002 Calendar how can you make it a 2003 Calendar?
  - 2000 Calendar (source)
  - 2001 Calendar (source)
  - 2002 Calendar - for a self exercise convert 2002 to 2003
  - 2003 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 3

Quiz 1 (Due before next Wed)
Week 3 Introduction
Review
- Objects & an example that ties everything together
Status Bar
- Hyperlinks
- Image - onMouseOver/onMouseOut
- Status Line setTimeOut()
- defaultStatus & onFocus Status Line Message
- Image Maps & Status Line Messages
  - Version that works with IE 5.x
- 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
  - 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
- Other Examples
  - Blink Eye (onMouseOver with setTimeout()) (Annotated Version)
  - Digital Clock Revisited (Annotated Version)
  - Another Image Map Example (Annotated Version)
    - Version that works with IE 5.x (Annotated Versison)
  - 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
- Random Rotating Banner with Synchronized Status Bar Messages
- 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
Browser & Operating System Check
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 4

Quiz 2 (Due before next Wed)
Check on Homework Grades
Review of Homework Assignment Set 1
Potpourri
- Review - Manipulating text
  - Ways to work with small amounts of text
  - Ways to work with large amounts of text
- Message SlideShow (Annotated Version) - a variation of the Ad Banner
- Demo of document.write & "how" it works
  - "Does" what it is suppose to
  - "Does not" do what it is suppose to
FORM Object Summary
FORMS - A Quick Introduction
FORMS <HTML>
HTML Form Fields Summary
FORMS <JavaScript>
- Button
- Radio Buttons
  - light on/off
  - Radio Button Test
  - Which browser is your favorite?
    - Version 1
    - Version 2
  - Temperature Conversion (Annotated Version)
  - Double or Square?
- Check Box
- Text Fields
- TextArea Detecting Events
- Select - a "thorough" study
  - Which browser is your favorite?
  - Select
  - Multiple Selects
Week 4 Zipped (index.htm is the "Home" Page)

Week 5

Netscape's JavaScript Online Manual - just a reminder of the files you should have already downloaded
Review of Homework Assignment Set 2
Continuation of Previous Materials
- How onChange works with a Select
- MultiDimensional Arrays
  - 2D Array Example (Version 2)
Form Object - same as Week 4's
Form Handlers
Form Validation
- Form Validation Overview
- Quiz
- JavaScript Regular Expressions (RegExp)
  - Introduction
  - Regular Expression Methods
  - Examples in Action
  - Summary Table
  - Netscape's RegExp Page - just take a look at it, this page comes from one of the required downloads from Netscape
- "Practical" Examples using RegExps
- Using "type"
- isNaN(x)
- Simple Form "Validation" (Form)
  - Source Code (Annotated Version)
- A more "thorough" Form Validation
  - Car Picker Validation (Annotated Version)
  - Car Picker Form Source Code
Week 5 Zipped (index.htm is the "Home" Page)

Week 6

Midterm (due before next Wed)
Review of Homework Assignment Set 3
Order Forms (Naming Convention)
- Another demo of eval()
  Doing calculations (Annotated Version)
- "Interactive Dollarizer"
Credit Card Information
- Credit Card "Validation" (Annotated Version)
CGI Introduction
GET & POST Methods
Environmental Variables
URL Encoding (URL "Encoding/Decoding" in Action)
CGI Forms & detailed explanations with the source code (practical hands-on)
ASP Forms with the source code
Form Using Get & Form Using Post -
Form.asp - v1 (Annotated Version) & Form.asp - v2
"Not Required Information" -- for those who want additional Information
- HTTP Basics
- Server Response Codes (Status Codes)
- What are Headers
- Extra Path Information
Discussion of mailto -vs- CGI
- mailto: Creator
One File with "Multi-URL's" (Annotated Version)
Calendar Project - this example demonstrates how we can build on the simple examples we have learned so far. This example continues from Week 3 and incorporates: passing data through the URL search string.
Calendar - (Code)
Calendar in a new Window
The Example below is just for demonstration purpose - "Not Required"
- Passing Data from one Form to another Form
  - Input Form
  - Output Form
JMail Examples & Implementations
- JMail Information
JMail in "Action" - put your Email Address in the Email Field and Submit the Form and then check your Email to see the results.
Week 6 Zipped (index.htm is the "Home" Page)

Week 7

Quiz 3 (Due before next Wed)
Review of the GET & POST Methods
& some concepts that will also be useful for Cookies. (Not Required)
Creating 'Encoded' Name & Value Pairs
Quiz Examples (Concepts)
- Quiz (Quiz Source Code & Annotated Version)
- Quiz with 2-dimensional Array
  Quiz Source Code & Annotated Version
Server Side Includes (SSI)
Web-embedded Programming
Cookies
- Hidden Fields - how to pass information from one page to another by using CGIs and not using cookies
  - hidden1.pl & hidden2.pl
- Using Cookies instead of CGIs
- Cookies & Scripting
- Annotated Cookie Functions (just the functions)
- Another Cookie Demo
  - Demo 1 (Annotated Version)
  - Demo 2
- Welcome Back (Time Stamp)
- Cookie Path Examples - study these examples carefully in order to understand how Cookies interprets Paths
- Cookie NotePad (not required, just for demo purpose)
- Cookie Demo Using Perl
- Creating & Retrieving Cookies in different "languages"
- Additional Information (Not Required)
- Links
  - Cookie Central
  - The Unofficial Cookie FAQ (Cookie Creation & Retrieval using ASP, JavaScript, Perl, VBscript)
  - JavaScript Cookies: Explanations & Demos
  - A walk through on how to use Cookies
  - IE hole exposes Web surfers' private data
Week 7 Zipped (index.htm is the "Home" Page)

Week 8

Week 9

Quiz 4 (Due before next Wed)
Review of Homework Assignment Set 6
CSS Tutorial
DHTML Tutorial
DHTML - HTML Document Object Model (DOM)

Next Week: Server Side Scripting - Active Server Pages using JavaScript

Week 10

Active Server Pages JavaScript
- Mailing List
- Forum
- Microsoft NewsGroups => microsoft.public.scripting.jscript
Review of Assignment Set 5
ActiveX
Quick Introduction to Active Server Pages
ASP Basics - A Recap
Microsoft's ASP Tutorial Site
ASP Code Examples
- Hello World - HTML style
- Hello World - ASP style
- Hello Word - where a function written in VBScript is called from the default page scripting language JavaScript
- HTMLEncoding
- Creating an Object in ASP - JavaScript Mailing List sign-up
  - How to work the File System Object using JavaScript
- Reading a Text File (code & annotated code)
- Random Quotes (code & Quotes.txt)
- Form Using Get & Form Using Post - Form.asp - v1 & Form.asp - v2
- Sample Form
- Enumerator - How do I enumerate Members of a Collection in JavaScript?
- Display the Server Environment Variables (annotated code)
- Creating Cookies with ASP
- Cookie "Enumeration"
- Configuring a Website using a Cookies (code)
- Cookie "Enumeration" one step further
- Cookie Example
- JMail
- Use Images as Histograms (Code)
- Input Form with output (Code & Annotated Version)
ODBC - Open Database Connectivity
- Quick Introduction
- More Detailed Overview (Not Required)
Database Examples:
Calendar - the examples work only in the IE 4.x or greater. With some minor modification the code can be made to work in Netscape 4.x or greater. The intend is to illustrate some basic ideas that are easier and cleaner to demonstrate with the IE.
NOTE: To get the Add an Event/Edit an Event page:
Name: student
Password: student
I turned off the Add and Edit part.
- Version 0
  - Calendar HTML version (Code)
  - Calendar ASP version (Code) - this version uses almost 100% of the client-side JavaScript code from the example above
- Version 1 - calendar with database capability
- Version 2 - extending Version 1 to include "built-in security"
- Version 3 - extending Version 2 to also use Cookies
ASP, JavaScript, and VBScript
ASP Quick Reference
Adventure Works
PerlScript Examples