www.jbinternational.co.uk sales@jbinternational.co.uk Call Free 0800 028 6400

JB International 1345 High Road London, N20 9HR +44 (0) 20 8446 7555

 

JavaScript & Dynamic HTML Training Course UK

Dates and full course list

JavaScript & Dynamic HTML Training Course Overview

Course Code:	JSC0010
Price:	£1600
Duration:	4 days
Date:
Who should attend:	Web and IT professionals who are completely new to JavaScript and who need to gain hands-on experience of developing commercial JavaScript systems
Prerequisite Skills:	HTML Programming Skills

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

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

• Using ‘this’

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