Course Outline
This Hands-On course provides an intensive introduction to the features provided by Javascript and Dynamic HTML. Especially useful for creating advanced, feature-rich web sites within the latest browser environments. Available as a public or closed course at our London training centre, or can be tailored to your team's requirements and delivered onsite as a bespoke, customised training course.
Course Content
This course has been developed for real-world, commercial scenarios by our expert instructors. See below for detailed syllabus. If you have a technical question, please email sales@jbinternational.co.uk
What You Will Learn
1. Understand the Javascript language.
2. Understand the Document Object Model and how it is used in Javascript.
3. How to detect and respond to user actions.
4. Alter, show, hide and move objects on a web page.
5. Check information inputted into a form.
6. How to use CSS (Cascading Stylesheets).
7. How to make Javascript cross-browser compatible.
Hands On Exercises
Delegates will create various Javascript / DHTML scripts. Exercises include:
1. Program flow of control eg if statements.
2. Change attributes of objects on an HTML page.
3. Validation of form input.
4. Use CSS to manipulate layout eg borders, fonts.
5. Pop-up Window handling.
6. Dynamically alter appearance of text
7. Animate content on a web page.
8. Event trapping (eg mouse event).
9. Context-sensitive help exercise.
JavaScript & Dynamic HTML Course Outline
The JavaScript language
Hello World!
Fundamental concepts
Comments
Introducing variables and literals
Numbers and strings
Objects
Operators
Expressions
Syntax
Control Flow
Functions
Arrays
Objects
Intelligent variables
Methods and properties
Objects within objects
Instances and references
Pre-defined objects: string, Date, maths
JavaScript and the web browser
Interacting with the user
Inputs and outputs
Can it be done in JavaScript?
The browser as a set of objects
The window object
- Alerts
- Opening and closing windows
- The status bar
- Timers
Introduction to event handlers
- onLoad and onUnload events
- onError events
The document object
- Title
- Colours
- The history
- Writing documents
Images
- Changing images on the fly
- Pre-loading images
- Animation
- Event handlers
- onLoad event
- Aborts and errors
Links
- JavaScript links
- Responding to rollovers
Forms
- Traditional forms - CGI
- JavaScript vs. CGI
- Form elements
- Accessing the users input
- Modifying form elements
- JavaScript and CGI together
- Validating input
Working with multiple windows and Frames
Providing HTML output
Helper windows
Cascading Style Sheets
Introduction
CSS Defined
CSS Properties
Grouping
Inheritance
More Selectors
- Classes
- ID Selectors
- Contextual Selectors
Pseudo Classes / Elements
The Cascade
Layout
Dynamic Style Sheets
Scripting style rules
Positioning
Absolute Relative
Z-index Visibility
Document Object Model
Elements and Objects
- Attributes and Properties
The €˜all€™ and €˜layers€™ collections
DHTML Object Oriented Code
Dynamic Content
InnerHTML outerHTML innerText
Event Handling
Simple Examples
The Event Object
Attaching Events
- Event Attributes
- Event Properties
- Event Scripts
Event Bubbling
Event Routing
Filters and Transitions
Defining Filters
Scripting Filters
- Alpha Blur Chroma Drop Shadow FlipH FlipV Glow
- Grayscale Invert Light Mask
- Shadow Wave Xray
Transitions
- Blend
- Reveal
- Interpage Transitions
