GEHC JavaScript Class - Syllabus

Brookfield Room
May 11-13, 8:30 - 12:00
Steve Mount

Introduction to JavaScript

Text:
JavaScript: The Definitive Guide (4th Edition) by David Flanagan

The Class:
The Class meets each morning from 8:30 until noon, May 11, 12, and 13, 2009. We will meet in the Brookfield Room.

Contacting me:
I can be reached via home email almost anytime: steve@saltyrain.com. Work email is steve.mount@ge.com.

Course Objectives:
The successful student will be able to:

  1. Explain JavaScript concepts
  2. Create JavaScript functions
  3. Validate form input using JavaScript
  4. Manipulate HTML pages with JavaScript

The Classes:
Most of the work we do will be worked out in lecture - the text will support the lecture, but the text is not a substitute for the lectures. The chapters and sections of the text pertaining to each lecture are outlined below. If you find reading before the lecture is helpful, please do so. In any case, reading after the lecture is essential.

In general, there will be time to go over any questions the students have about the assigned reading. At any time during the span between classes, please email me with any questions.


Day 1 1 1 2 2 2 3 3 3
Date 5/11 5/11 5/11 5/12 5/12 5/12 5/13 5/13 5/13
Chapter JS 1-6 JS 7, 14.6, 19 JS 15 JS 18 JS 3.9, 12, 13, Ref JS 20 JS 14, 18
Notes View View View View View View View View

Day 1 Part 1 - JS Chapters 1 through 6

In our first class, we will begin with introductions, and then dive straight in and talk about the basics of writing code in JavaScript.

Example code: JS 1-1, JS 1-2, JS 1-3, JS 1-4, JS 1-5, JS 1-6

Homework: Reread JS Chapters 1 through 6 as needed.

Key points: All of Chapters 1 and 2. In Chapter 3, the following sections: 3.1, 3.1.1, 3.1.2, 3.1.3, 3.1.4, all of 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 3.8, 3.9. We will revisit 3.9 and 3.10 later. In Chapter 4, the following sections: 4.1, all of 4.2, 4.3. In Chapter 5, the following sections: 5.1, all of 5.2, 5.3, 5.4 (especially equality and inequality tests), 5.5, 5.5.1, 5.6, all of 5.7, 5.9. Skim section 5.10. In Chapter 6, all sections except 6.16 and 6.17.

Day 1 Part 2 - JS Chapters 7, 14.6, and 19

One of the fun things you can do with JavaScript, and a nice usability touch if done right, is changing images on the fly, or image roll-over. We'll discuss how to do it this week, at the same time expanding our knowledge of functions, objects, and events.

Example code: JS 2-1, JS 2-2, JS 2-3, JS 2-4, JS 2-5, JS 2-5a, JS 2-6, JS 2-6a, JS 2-6b, Browser Stats, JS 2-7, JS 2-8, JS 2-9 JS 2-10 JS 2-11 JS 2-11a JS 2-11b JS 2-12 JS 2-12a JS 2-13 JS 2-14 JS 2-14a JS 2-15 JS 2-15 (MISE only) JS 2-15 (Fixed for Netscape)

Homework: Read Chapters 7, 14.6, and 19 as needed.

Key points: In Chapter 7, 7.1 and 7.4. In Section 14.6, all subsections. In Chapter 19, sections 19.1 through 19.1.4.

Day 1 Part 3 - JS Chapter 15.

Forms are a crucial way for you to get data from your users to your data bases. Ensuring that data is entered correctly can be taken care of on the front end (as collected) or on the back end (after your point of verification is long gone). Using JS, we can validate user-entered data to make sure our data bases are clean.

Example code: JS 3-1, JS 3-2, JS 3-3, JS 3-4, JS 3-5, JS 3-6, JS 3-7, JS 3-8, JS 3-9, JS 3-10, JS 3-11, JS 3-12, JS 3-13

Homework: Read Chapter 15 as needed.

Key points: All of Chapter 15.

Day 2 Part 1 - JS Chapter 16.

Cookies are a way for your pages to talk to each other, both within a user session and from one visit to another. We'll discuss the kinds of information that one would find in a cookie, how to set a cookie, and most importantly, how to read a cookie. We'll also discuss the unfounded fears about cookies.

Example code: JS 4-1, JS 4-2, JS 4-3, JS 4-4, JS 4-5, JS 4-6, JS 4-7, JS 4-8, JS 4-9

Homework: Read JS Chapter 16 as needed.

Key points: All of Chapter 16.

Day 2 Part 2 - JS Chapters 3.9, 12, 13, Reference.

A dynamic page is an interesting page ... or, rather, a dynamic page can be interesting - so how to add dynamic content to an HTML page? We'll talk about various miscellaneous topics, such as date support, the use of JavaScript files, how to open windows, etc.

Example code: JS 5-1, JS 5-2, JS 5-3, JS 5-4, JS 5-5, JS 5-6, JS 5-6a, JS 5-7, JS 5-8, JS 5-9, JS 5-10, JS 5-11, saltyrain.net Syllabus, JS 5-12, JS 5-13, JS 5-14, JS 5-15, JS 5-16, JS 5-17, JS 5-18, JS 5-99, utils.js

Homework: Read Chapters 3.9, 12, 13, and Client Side JavaScript Reference: Document object as needed.

Key points: In Chapter 3, 3.9. In Chapter 12, 12.2, 12.2.1.1, 12.2.1.2, 12.2.2, 12.2.4, 12.3.4. In Chapter 13, 13.1, 13.2, 13.3, 13.4, 13.8.1, 13.8.2. In Client Side JavaScript Reference: Document, the Properties and Methods sections.

Day 2 Part 3 - JS Chapter 20.

We will look at the challenges of handling multiple browser types and multiple browser versions. Though we have standardized on the Microsoft Internet Exporer browser at GEHC, it is not a bad idea to go over some of the issues.

Example code: JS 6-1, JS 6-2, JS 6-3, JS 6-4, JS 6-5, detect.js, JS 6-6, Image (892x470), JS 6-7, Browser List (9/1/01-10/9/01), Browser List 2 (2/16/02-2/26/02), Browser List 3 (9/28/02-10/8/02), Browser List 4 (10/30/05-11/9/05), Browser List 5 (4/28/09 - 5/7/09), Display tester, Image (675x595), JS 6-8, JS 6-9, JS 6-10, Other references

Homework: Read chapter 20 as needed.

Key points: In Chapter 20, all of 20.1, 20.2, 20.2.1, 20.2.2, and 20.2.3. All of 20.3. See also 1.2 and 1.3 (JS versions). See class notes to see how to build arrays in JS 1.0.

Day 3 Part 1 - JS Chapters 14 and 18.

Next we'll touch on DHTML and the DOM. Using CSS (Cascading Style Sheets) and JavaScript (combining them into DHTML), we can achieve some pretty cool effects on our pages. We'll go over some of these effects in this class.

Example code: JS 7-1, JS 7-2, JS 7-3, JS 7-3a, JS 7-4, JS 7-4a, Burlington Rotary Club, rotascope.css, USConstitution.net, usc.css, JS 7-5, JS 7-5a, JS 7-6, JS 7-7, JS 7-8, JS 7-9, JS 7-10, JS 7-11, JS 7-11a, JS 7-12

Homework: Read Chapters 14 and 18 as needed.

Key points: This section is mostly informational - review all of chapters 14 and 17, with review of the key points in the lecture.

Day 3 Part 2 - The GM Utils Functions.

We will look at the general-purpose functions in the gpms_utils.js file. We've already looked at some of them, but now we will deeper. Since this file is confidential GE property, it is only available from a protected link. The login and password will be given out during class.

Example code: gpms_utils.js, JS 8-1, JS 8-2, JS 8-3, JS 8-4, JS 8-5, JS 8-6, JS 8-7, JS 8-8, JS 8-9, JS 8-10, JS 8-11, JS 8-12, JS 8-13, JS 8-14, JS 8-15

Day 3 Part 3 - Miscellaneous

Example code: JS 9-1, JS 9-5, JS 9-8, JS 9-9,

Revised: 08 May 2009