Choose your language:

Hong Kong
New Zealand
United Kingdom
United States

Advanced JavaScript & HTML5 using OpenUI5

Course Code



3 Days

This course assumes attendees have not had a prior JavaScript/HTML5 course that teaches modules, prototypes, closures, CSS, etc. If a participant has taken a prior Advanced JavaScript class, the 2-day Development Using OpenUI5 course is more appropriate. This course provides approximately 60% of the same OpenUI5 content as the 2-day Development Using OpenUI5 course. Attendance for both courses is not necessary.
This course provides exposure to and hands-on experience using front-end architectures with an emphasis on cross-browser application development techniques. Topics explored include advanced CSS, advanced JavaScript language features, new HTML5 / CSS3. It provides exposure to techniques used in modern front-end application development. This course emphasizes patterns-based development, modularization of code, and the use of JavaScript libraries to promote cross-browser based design principles.

JavaScript discussions include coverage of the use of prototypes, object creation, namespaces, closures, modularization of code and best practices with the jQuery JavaScript library.

HTML5 discussions provide a concise overview of the new capabilities of HTML5 markup, a look at CSS3, and JavaScript API features. In all cases, discussions are provided on how these technologies can be implemented within both modern and legacy browsers using proper fallbacks and/or polyfills. This course emphasizes best responsive design principles including help from additional libraries such as Modernizr.

Topics incorporate the OpenUI5 MVC architecture and include various OpenUI5 controls. An overview is provided of the OpenUI5 core, templating, data binding, and creation of numerous controls as well.
This course is designed for front-end developers and developers interested in the latest browser-based, front-end APIs.
Please refer to course topics.
Enterprise JavaScript Introduction
Layered Architectures
Enterprise JavaScript Architectures
MV* Frameworks
Developing in Team Environments
Incorporating Build Systems
Semantic HTML
Progressive Enhancement

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 Core 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
Using requireJS

Incorporating OpenUI5
OpenUI Overview/History
OpenUI5 and jQuery
OpenUI5 Libraries
The Library Core
OpenUI5 Model Types
Creating Models
Understanding Data Binding
One-way vs Two-way Binding
Templating and HandleBars
Declaring Components
Establishing Events

Working with OpenUI5 Controls
Control Lifecycles
Form Controls
Layouts Controls and Dialogs
Misc Controls
Creating Custom Controls

OpenUI5 and MVC
Types of Views
Defining the Views
Creating Controllers
Binding with Models

Presenting Layered Architectures with CSS
Contextual Selectors
Shorthand Notations
Attribute Selectors
Determining Cascade Order
CSS Inheritance
Text Properties
Background Properties
CSS Box Model, Positioning, Visual Formatting
Setting Borders and Margins
Special Styles and Colors
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
New CSS3 Features
Cross-browser and Legacy Browser Support
CSS3 Selectors
New Color Support
Rounded Corners
Drop Shadows (Box and Text)
CSS3 Rules for Progressive Enhancement
Performance Enhancements

HTML5 Markup
An HTML5.1 Update
HTML5 Markup and Non-conforming Browser
What is the HTML5 Shim?
Policies and Practices regarding an IE Shim
HTML5 Feature Detection
Incorporating Modernizr
Using Polyfills and Fallbacks
The New Semantic Structural Elements
Additional New Markup Elements

CSS and Responsive Web Design
RWD using the Presentation Layer
The Mobile First Philosophy
Understanding CSS Media Queries
How to Design Using Flexible Grids
Grids Made Simple
CSS Grid Systems
What Are Flexible Images?
Browser plugins for Responsive Testing
JavaScript and RWD
Managing Breakpoints
Handling UI Widgets Responsively

Local Storage
Application Cache
Client-Server APIs
Touch API

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

Appendix B – Additional HTML5 Markup
New Forms Controls and Capabilities
Other HTML5 Markup

Appendix C – Web Accessibility
Rules for Web Accessibility
Understanding ARIA Roles
Landmark Roles
Ajax & ARIA
JavaScript UI Libraries and ARIA
LTR vs RTL Design Issues
Send Us a Message
Choose one