Crs 316
An Introduction to Programming for Web Designers with JavaScript

The goals of this course are twofold. One goal is to teach sound programming skills using JavaScript as the first programming language.  The other goal is to explore the use of JavaScript (ECMAScript) to develop Dynamic HTML , both from the programming and from the design perspective. 

The emphasis is on "browser independent" JavaScript, and hence, the use of JavaScript in conjunction with ActiveX controls on Internet Explorer, and of Plugins on Netscape Navigator is confined to commonly occurring controls and plug ins. 

 

Course Outline Ctd.

Functions

  • Defining and Invoking Functions
  • Functions as Data
  • Function scope ( Call Object )
  • Function arguments (Argument Object)
  • Function properties and methods

Arrays

  • Array elements
  • Array methods

Objects

  • Basic concepts
  • Constructors and destructors
  • Methods
  • Prototypes and Inheritance
  • Object Oriented JavaScript

Built in Objects

  • String objects and string manipulation
  • Pattern Matching and Regular Expressions
  • Date object
  • Document Object
  • Math Object

Windows

  • Window overview
  • Loading a new page in the current window (changing the window's location)
  • Launching new windows
  • Using a window's history
  • Closing a window
  • Controlling one window from another remote window
  • Remote search windows

Frames

  • Overview of Frames
  • Frames as navigational devices - toolbars, framesets
  • Manipulating Frames from JavaScript
  • Expanding and Collapsing frames
  • Changing multiple frames with one link
  • Rotating pages
  • Auto scrolling frames

Forms

  • Overview of forms and form elements
  • Controlling form behaviour via JavaScript
  • Creating content from input to a form
  • Verifying forms before they are submitted

Applying arrays

  • Using arrays to display random content
  • Using arrays to generate pop up menus

Working with different browsers

  • Using the Navigator object to detect different browsers
  • Tailoring content to a specific browser
  • Checking for Plug-ins

Working with Images

  • JavaScript Image Objects - and their image handling methods
  • Creating and using image rollovers
  • Creating rotating billboards using JavaScript

Cookies and JavaScript

  • Overview of cookies
  • The JavaScript cookie object - and its methods for saving, retrieving and deleting cookies
  • Using cookies and JavaScript to display welcome content for new visitors
  • Creating Forms with memory
  • Creating customised web pages

Dynamic HTML

  • Overview of DHTML - the Document Object Model (DOM) and Cascading Style Sheets (CSS)
  • The core DOM Application Programming Interface (API)
  • Overview of Styles and Style Sheets with CSS
  • DOM APIs for Style Sheets
  • DOM and Event handling
  • Dynamic Toolbar creation
  • Working with Layers
  • Creating Tabbed Folders 
  • Detecting browser versions 

Intended Audience

The course is for anyone who will be involved with the development and maintenance of web sites that use pages containing  JavaScript . A sound knowledge of HTML is a pre-requisite for this course. 

Apart from developers, the course is also suitable for web site designers, web site administrators and project managers - as the ethos of the course both design and programming oriented. 

Key Skills

  • ability to create professional Dynamic HTML web documents using nothing more sophisticated than a text editor
  • writing form validation scripts
  • generating dynamic image based animation effects
  • implementing DHTML that can adapt to different browser types
  • customising use of cookies
  • controlling the appearance and behaviour of multiple frames
  • understanding how to develop modular  scripts that conform to XHTML

Practical Work

The initial exercises involve writing small JavaScript applications to develop programming skills and to master the Java syntax.  Later on more complex, complete applications are developed.  

The final exercises - that involve substantial amounts of JavaScript code make use of partly complete templates - with comments (hints) suggesting what needs to be done to tackle a particular part of the problem. The result is an exposure to substantial pieces of JavaScript code, with the need to concentrate on key aspects relevant to a particular problem, thus experiencing the kinds of skills that will be used in maintaining DHTML pages, and, providing a collection of useful templates and patterns to use after the course

Each workstation will have its own Apache Web Server, and be capable of running Netscape, Mozilla,  Internet Explorer web browsers.Attendees will have access to a number of text editors.

  • Implementing a time of day application
  • Multi-window and remote control - retailing application
  • Using a toolbar to control a multi-frame window
  • User initiated and auto scrolling of images
  • Implementing data validation of a purchase information form
  • Creating a randomised image display
  • Imlementing a multi-media application that checks for plug-ins
  • Working with image rollover effects to implement a billboard
  • Using layers to implement tabbed folders
  • Implementing a shopping cart

Course outline

Overview of JavaScript

  • Why embed a scripting language in a web page?
  • A brief history of JavaScript
  • JavaScript is not Java
  • The ECMAScript - JavaScript standard - and how Microsoft's and Netscape's versions of JavaScript deviate from it
  • Server side JavaScript vs. Client side JavaScript.

Fundamentals of Event Driven Programming and of JavaScript Syntax

  • Graphical User Interface Objects, Events and Event Handlers
  • Common Event Handlers supported by JavaScript - for events associated with links, buttons, menu selections, text input elements, forms, loading and unloading
  • How JavaScript is embedded in HTML
  • Variables
  • Expressions and operators
  • Expression statements and compound statements
  • Decision statements - if, else if, switch
  • Iteration statements - for, for/in, while, do/while