Choose your language:

Hong Kong
New Zealand
United Kingdom
United States

Advanced JavaScript & HTML5 using JavaScriptMVC

Course Code



4 Days

Previous work with front-end technologies, CSS, HTML, and JavaScript basics is required.
This course provides exposure to front-end architectures, advanced CSS, advanced JavaScript language features, and a survey of HTML5 / CSS3. It provides exposure to techniques used in modern JavaScript application development. This course focuses extensively on object-oriented JavaScript, patterns-based development, use of the jQuery JavaScript library and MVC architectures.

The JavaScript discussions include coverage of the use of prototypes, object creation, object literals, inheritance, techniques for creating namespaces, libraries, closures, best practices, cross-browser design, and application-level design considerations.

The HTML5 content provides a concise overview of the new capabilities of HTML markup, CSS3, and JavaScript features (to include ECMAScript 5 features). Important in the discussions of each of these technologies are the recommended best practices for handling them within practical applications and in cross-browser, cross-platform environments.
This course is designed for front-end developers and developers interested in the latest browser-based, front-end APIs.
Enterprise JavaScript Introduction
Layered Architectures
Enterprise JavaScript Architectures
MV* Frameworks
Developing in Team Environments
Incorporating Build Systems
Semantic HTML
Progressive Enhancement
Browser Rendering Modes
Cross-Browser Development
Firebug Overview
Chrome Developer Tools
IE Developer Tools

Unobtrusive JavaScript & jQuery
DOM Scripting
Rules for Writing Unobtrusive Code
Events and Cross-Browser Issues
Handling Events and the Event Object
Event Bubbling and Capturing
Stopping Event Propagation
Event Delegation
Preventing the Default Action
Introducing JavaScript Libraries
The jQuery Object
Using jQuery and Selectors
DOM Manipulation with jQuery
Event Bubbling/Delegation
jQuery Proxy
jQuery Timer Plugin
Animation Effects
Ajax and jQuery
jQuery Best Practices

JavaScript Advanced Function Techniques
The ECMAScript Standard
Declaring Functions
Function Literal Notation
The Function Object
Variadic Functions
Advanced Argument Passing
Variables and Scope
Overloading Issues
The Global Namespace

Object-Oriented JavaScript
Introducing Object-Oriented JavaScript
Object Creation and Default Properties
Understanding Object Prototypes
Object Literals
Self-Executing Functions
Private and Privileged Properties
Pseudo-private Properties
JavaScript and Interfaces
The Module Pattern
Defining Application Modules

Introducing StealJS
Loading Modules Using Steal
Creating Modules
Dynamically Loading Modules
What is jQueryMX?
Instantiating Classes
Working with Models
Binding Attribute Changes
Creating RESTful Services
Working with Views
Understanding Templating Systems
Creating Controllers
Binding Events
What is Concatenation?
Controlling Quality with steal.clean
Working with FuncUnit
Automating FuncUnit Tests

Ajax Techniques
Working with the XHR
XHR Limitations
Cross Domain Requests
Dynamic Script Tags
jQuery and JSON-P
Using HTML5 CORS for Cross-Domain

Presenting Layered Architectures with CSS
Contextual Selectors
Attribute Selectors
Determining Cascade Order
CSS Inheritance
Using Chrome for CSS Design
Text Properties
Background Properties
Creating and Styling Lists
CSS Box Model, Positioning, Visual Formatting

The CSS Box Model
Setting Borders and Margins
Special Styles and Colors
Shorthand Notations
Collapsing Margins
Box Paddings
IE vs. W3C Box Model Differences
Block vs. Inline Styles
Absolute Positioning
Relative Positioning
Floating Elements
Laying out Pages
Clearing Elements
Improving Design

HTML5 Markup
The HTML Root Element and Changes within the <head>
The New Semantic Structural Elements
What is the HTML5 Shim?
Policies and Practices regarding an IE Shim
New Markup Elements
The New Form Controls
Video and Audio
Canvas and SVG

CSS3 Selectors
New Color Support
Rounded Corners
Drop Shadows (Box and Text)
Borders and Images
Performance Enhancements

Local Storage (saving custom view settings)
Using CSS Media Queries (customizing views)
Using Drag and Drop APIs (drag-drop email and images)
Send Us a Message
Choose one