Mastering JavaScript and jQuery

Course Code: 1319

Overview
Schedule classes
What you'll learn
Outline
Prerequisites
Who should attend

Overview

This five day course is designed as a combination of hands-on lab and engaging lectures. The course trains participants in the practical use of the technologies used for web development. This course helps participants enhance their skills in JavaScript and jQuery in a stimulating learning environment, with the help of group activities, discussions and machine-based practical programming participant labs and project work.

Schedule Classes

Looking for more sessions of this class?

Course Delivery

This course is available in the following formats:

Live Classroom
Duration: 5 days

Live Virtual Classroom
Duration: 5 days

What You'll learn

Familiarize with JavaScript
Learn about the DOM API
Make communication between the browser and your server possible
Understand and effectively leverage closures
Understand how JavaScript’s object model differs from the model of classical object-oriented programming languages
Learn about jQuery and how to add it to your applications
Use jQuery to select complex sets of elements from the DOM
Develop rich web pages that respond to user interaction
Interact with your server-side code using Ajax
Explore a wide variety of plugins and learn how to write your own
Test your applications to make sure your JavaScript is as solid as the rest of your code

Outline

Module 1: Core JavaScript

JavaScript basics
- JavaScript defined
- Variables and operators
- Flow control and conditionals
- Exercise: JavaScript basics
Debugging tools
- Using the strict mode and setting breakpoints
- Browser debugging tools
- Monitoring resource usage and performance
- Emulating devices Exceptions in JavaScript
- Exercise: JavaScript Debugging
JavaScript functions
- Functions in JavaScript
- Invoking functions
- Function constructor
- Function scope and closures
JavaScript arrays, math and date
- JavaScript literals
- JavaScript arrays
- Working with numbers and dates
- Exercise: JavaScript built-in objects
JavaScript event handling and the DOM
- Events and event handling
- HTML document object model
- Accessing the DOM
- Dynamically working with the DOM
- DOM challenges
- Exercise: Using events and the DOM
Object-oriented JavaScript
- JavaScript objects and classes
- Constructors and prototypes
- Prototypes
- Extending classes with a prototype
- Reusable flexible classes
- Exercise: Working with classes

Module 2: jQuery

Why jQuery?
- JavaScript evolution
- Why jQuery?
- jQuery usage
- Downloading jQuery
Basic jQuery
- jQuery: Operational overview
- jQuery capability overview
- Basic selectors
- Multiple selectors
- Selecting by order
- Exercise: Installing and testing jQuery
Manipulating the DOM
- Attributes vs. properties
- CSS box model properties
- Element content
- Manipulating children
- Wrapping and unwrapping
- Effects (basic animation)
- Effects queues
- Exercise: CSS selection
More On element selection
- Hierarchical selectors (combinators)
- Attribute selectors
- Basic vs. child filters
- Filtering methods
- Traversing methods
- Exercise: Delving into jQuery

Module 3: Working with jQuery

Attributes, forms, and DOM
- Selecting from forms
- Selecting parent and children
- Automatic DOM traversal
- Manipulating DOM elements
- Getting and setting attribute values
- Removing attributes
- Exercise: Dynamic DOM
More jQuery!
- The jQuery function
- The jQuery object
- Some jQuery “static” methods
- Utility methods
- Exercise: jQuery practice
Event handling
- Binding multiple events to the same handler
- Multiple events to different handlers
- Event targets
- Triggering events
- Custom events
- Live events
- Exercise: jQuery events
More on elements!
- Changing HTML content
- Changing Text content
- Managing elements
- Introduction to animations
Ajax
- Posting data
- Global Ajax handlers
- JSONP
- Serialization
- Deferred objects
- Promises and piping
- Chaining tasks
- Exercise: jQuery selectors and content manipulation

Module 4: jQuery plugins and enhancements

jQuery plugins
- jQuery validation plugin
- jQuery form plugin
- jQuery BBQ (Back button &
- query) plugin
- jQuery hotkeys plugin
- jQuery color plugin
- Exercise: jQuery plugins
jQuery UI
- jQuery UI effects
- Advanced easing
- Interactions
- Position utility
- Widgets
- Icons
- Exercise: jQuery UI
Templates
- Micro templates
- jQuery template plugin
- Compiling template items

Module 5: JavaScript object notation (JSON)

JSON objects
- Understand JavaScript’s literal syntax for creating arrays and objects
- Understand object literals
- Understand arrays
- Understand arrays in objects
- Understand objects in arrays
JSON Syntax and processing
- Understand JSON Syntax
- Understand JSON Parsers
- Read and write object and array literals in JavaScript
- How to use JSON in an Ajax application
- Understand the advantages of using JSON
- Understand the disadvantages of using JSON
- How to use JSON in an Ajax application
- How to transfer data to and from the server
jQuery, JSON, and AJAX
- jQuery AJAX utility method
- jQuery and JSON
- jQuery and other data types
- Serialization
- Deferred objects
- Promises and piping
- Chaining tasks
- Exercise: Implementing JSON

Module 6: Advanced JavaScript Topics

ES6: The next step
- ES6 defined
- ES6 default and rest parameters
- IIFE and closures
- ES6 importing/exporting modules
- Arrays, ES6 maps, and ES6 sets
- Working arrays with ES6
- Working strings with ES6 strings
- ES6 constructs and inheritance
- ES6: Getters and setters
- Exercise: Working with ES6
HTML5 JavaScript API
- Cross-domain messaging
- Working with web storage
- Offline with an application cache
- Geolocation: What, why, and how
- Exercise: Using the web storage API
- Exercise: Using the application cache API
TypeScript
- Strong data typing
- Compiling typeScript to JavaScript
- TypeScript datatypes
- TypeScript classes and interfaces
JavaScript best practices
- Code Conventions for the lifecycle
- Resolving shared resources
- Constructs to use
- Constructs to avoid
- Memory considerations
JavaScript scheduling, execution, and security
- Timers and scheduling
- Execution Contexts
- Same origin policy and JavaScript
- Security considerations
Performance and optimization
- Code optimization
- JavaScript verbosity tradeoffs
- Memory considerations
- Cyclic references
Download options
- Explain the basic principles underlying web application performance optimization
- Understand the role of downloading options in smoothing bandwidth usage
- Understand how caching can reduce bandwidth usage
Security
- Security: The complete picture
- Unvalidated input
- Injection Flaws
- XSS
- Spoofing
- How attackers see JavaScript applications
- OWASP top ten for 2017

Module 7: Web Design

Responsive web design
- Adapting to varying screen sizes
- Scaling page and text content
- Scaling and adapting for media
- Options for adjusting media
- Exercise: Make a responsive page
User interface principles
- Design principles
- Improving interactions with users
- Matching web flow to user expectations
Layout techniques
- Page layout consideration
- Stacking content
- Handling excessive content
- Providing consistency across web presence
- Exercise: Design: Using responsive web design patterns
Navigation techniques
- Handling excessive content
- Providing context and state feedback
- Navigation placement and techniques
- Exercise: Design: jQuery events project
Selection techniques

Improving text input
Improving enumerated input
Accessibility considerations

Prerequisites

There are no mandatory prerequisites for this course, however, completing the Foundations of Agile course prior to taking up this course would be beneficial.