Choose your language:

France
Germany
Hong Kong

India
Ireland
Japan
Malaysia
Netherlands
New Zealand

Singapore

Sweden
United Kingdom
United States
Course Code

IN1238

Duration

4 Days

Required: Previous work with front-end technologies, CSS, HTML, and JavaScript basics

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. 

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.

Primary audience: Front-end developers and developers interested in the latest browser-based, front-end APIs

 

Introducing Layered Architectures
Current State of Modern Browsers
Layered Architectures
Semantic HTML
Progressive Enhancement
Browser Rendering Modes
Doctype Switching
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
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, live(), die()
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
Closures

Object-Oriented JavaScript
Introducing Object-Oriented JavaScript
Object Creation and Default Properties
The Object Prototype
Prototype Chaining
Object Masquerading
Object Literals
Namespaces
Encapsulation
Self-Executing Functions
Private and Privileged Properties
Pseudo-private Properties
JavaScript and Interfaces
The Module Pattern
Creating Mixins
Mixins with JavaScript Libraries
Defining Application Modules

Inheritance
Inheritance Techniques
Prototype Chaining
Object Masquerading
The Hybrid Approach
Inheritance with jQuery
Creating Utility Libraries

Ajax Techniques
Working with the XHR
XHR Limitations
Cross Domain Requests
Dynamic Script Tags
jQuery and JSON-P
Presenting Layered Architectures with CSS
Contextual Selectors
Attribute Selectors
Pseudo-Elements
Pseudo-Classes
Determining Cascade Order
Specificities
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
CSS3 Selectors
New Color Support
Rounded Corners
Drop Shadows (Box and Text)
Borders and Images
No More Sliding Doors?
Transitions
Animations
Transforms
Performance Enhancements

HTML5 APIs
Selecting Nodes
Local Storage
Geolocation
Web Workers
Client-Server Techniques (Long Polling, Event Streaming)
Web Sockets
Server-Sent Events
Cross-Origin Resource Sharing (CORS)

Appendix A - Testing with QUnit
What is QUnit?
Creating Test Cases
Viewing Results
Assertions
Modules
Asynchronous Tests

Appendix B - JavaScript & MVC
MVC or MVP?
JavaScript MVC Frameworks
MVP Architecture
Using Backbone & jQuery
Models & Collections
Event Handling and DOM Manipulation in MVP

Appendic C – Additional HTML5 Elements
Additional Markup Elements
Placeholders, Required, New Input Elements
Multiple Background Images
Border Images
Indexed DB
File API
Drag & Drop
Touch Events
History API

Appendix D – Web Accessibility
Rules for Web Accessibility
WAI & WCAG
ARIA
Understanding ARIA Roles
Landmark Roles
jQuery and Role Setting
Ajax & ARIA

Appendix E - ECMAScript 5
ECMAScript 5 Cross-Browser Support
Strict Mode
New Object Methods
New Array, Date, String, Function Methods

Appendix F – Responsive Design & Localization
Responsive Design Considerations
Examples
Responsive Design Challenges
Creating Responsive Solutions
Media Queries
Internationalization Support

Send Us a Message
First Name
*
Last Name
*
Company
*
Email
*
Address Line 1
*
Address Line 2
City
*
*
Zip Code
Telephone
*
*
Choose one
*
Comments