Course Description:

JavaScript, the scripting language developed by Netscape, is the first and foremost scripting language for developing client-side applications for Web pages. Originally known as LiveScript, JavaScript is a semi-object-oriented scripting language used for creating dynamic, interactive content for otherwise static HTML pages. This course explores developing advanced graphical user interfaces and interactive processing in-line on Web pages. JavaScript is an excellent introduction to programming, and this course will be geared to teaching programming fundamentals to students with little experience in coding.

Prerequisite: Students should have taken Web Page Development with HTML (X.52.9740) or HTML Development Workshop (X.52.9741), or have a solid understanding of HTML, including tables, frames and forms.

Course Objectives

Upon completion of this course, the student will:

• Understand JavaScript syntax, as well as the rudiments of programming as they apply to other lanaguages such as C, C++ and PERL
• Be able to create their own basic JavaScripts, to complete such tasks as browser detection, form verification, image swaps (rollovers) and creating HTML pages on the fly
• Have an understanding of the ever-evolving Document Object Model
• Understand the basics of CSS stylesheets and DHTML
• Know the difference between JavaScript and JScript and how to script pages for different browsers

Course Outline

Session 1 : Course Introduction

• Introducing JavaScript
• The Web Application Framework
• Browser Support for the various versions of JavaScript
• Using JavaScript to create HTML code and content
• Download the lesson files for today's class, part 1.

Session 2 : Fundamentals of the JavaScript Language

• Events
• Basic Syntax Issues
• Data Types
• Variables
• Operators
• Download the lesson files for today's class, part 2.

Session 3 : Control Structures and Functions

• Introduction to objects and arrays
• Understanding Functions
• Arguments and Parameters
• Returning a Value
• Conditional Statements
• Loops
• Download the lesson files for today's class, part 3.

Session 4 : Objects and Arrays

• Primitive versus Reference data types
• Object properties
• Methods
• Creating custom objects using constructors
• Arrays
• Array properties and methods
• The Date Object
• Download the lesson files for today's class, js class 4

Session 5 : The Window Object

• The Window as Global Object
• Basic Window Methods and Objects
• Window Control Methods
• In-class assignment
• Download the lesson files for today's class, the Window Object

Session 6 : The Document Object

• Overview of the Document Object
• Color Properties
• Dynamically Generated Documents
• Frames
• The Array Objects
• The Images, Links and Anchors objects
• Creating rollovers, image swaps and slide shows
• Download the lesson files for today's class, part 6, the Document object

Session 7 : Using Forms

• Review of HTML for forms; CGI and mailto
• The Form object
• Form methods and event handlers
• Automating form fields
• Validating form fields
• Download the lesson files for today's class, part 7, forms

Session 8 : More about forms, review and in-class assignment

• An elegant form parsing script
• Using the "this" keyword with forms
• Using checkboxes, radio buttons and selection lists
• Review, question and answers, final project preparation
• Overview of JavaScript related web sites
• Why style sheets are the way of the future for HTML
• The 3 kinds of style sheets
• Style classes
• Dowload the lesson files for today's class, part 8, review and style sheet intro.

Session 9 : Cascading Style Sheets (CSS-1 and CSS-P), DHTML and a real-life example

• More CSS-1: Style sheet classes and properties
• CSS-P, properties and values
• Netscape vs. IE DOMs
• Some simple, cross-platform DHTML
• Download today's files, CSS and DHTML.

Session 10 : Final Projects Review

• The final project is a simple website (as little as one page, or as complex as you like) that incorporates all of the most important aspects of JavaScript that we've learned in class, including Browser "sniffing", image rollovers, window manipulation, form parsing and DHMTL.
• Students will present and explain their final projects in class
• We will cover a final "real life" example of DHTML
• Download today's files, CSSP and DHTML.

Required Reading: