Download Course Outline

JavaScript & JQuery Essentials

JumpStart Responsive Web Design with JavaScript and JQuery | Explore Design, Tooling, Security, Frameworks and More

TT4115 / TT4675

Introductory

5 Days

Course Overview

JavaScript and JQuery Essentials is a comprehensive, hands-on course geared for web developers who need to learn basic JavaScript and JQuery to use with today's systems and architectures to build sophisticated web interfaces.  JavaScript is simple and elegant but is often difficult to work with because it's so different from the programming languages most developers are used to utilizing. The training will guide students through a balanced mixture of theory and practical labs to gain core JavaScript development skills and have them explore its related technologies through to the use of tools and libraries to ease the development of advanced web applications.  

This course also covers jQuery and provides practical and hands-on experience with the preferred JavaScript library for building rich web applications. If you are building for the web, learning jQuery will change the way you write JavaScript, working across multiple browsers and platforms.  Course attendees will be able to hit the ground running right after class, applying essential JavaScript to projects at both an architectural as well as a line by line coding level. 

What You'll Learn

Throughout the course, students will explore practical use of the umbrella of technologies that work in conjunction with JavaScript as well as some of the tools, toolkits, and frameworks that can be used in conjunction with web development and deployment. The course begins with an initial look at JavaScript and how it is used within the context of web applications, walking students through the different technologies that are used with JavaScript and exploring core aspects of JavaScript and JQuery in terms of web applications, security, tools and frameworks. 

Working within in a dynamic, hands-on learning environment, guided by our expert team, attendees will:

  • Become both familiar with the language and confident enough to work with it in any context
  • Learn enough of the DOM API to bend it to your will
  • Make communication between the browser and your server possible
  • Understand and effectively leverage closures
  • Understand how JavaScript's object model differs from the model classical object-oriented programming languages
  • Learn what jQuery is 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

Students will understand:

  • What is JavaScript, how does it relate to other programming languages, and how do you script your web pages with it?
  • How do you traverse and manipulate the DOM and how do you handle events in ways that work in all browsers?
  • What is Ajax and how does JavaScript make it possible?
  • What are closures and prototypes and other exotic features of JavaScript?
  • What is jQuery and why should you use it?
  • How does jQuery reduce the amount of code that you have to write to add rich functionality to both existing and new web pages?
  • How does jQuery make Ajax programming easier?
  • What best practices are there for using jQuery so that it works unobtrusively and performs well?
  • What plugins and extensions are available to enhance your applications even more than the core jQuery library can provide?

Need different skills or topics?  If your team requires different topics or tools, additional skills or custom approach, this course may be easily adjusted to accommodate.  We offer additional JavaScript, JQuery, web development and responsive design courses which may be blended with this course for a track that best suits your development objectives.

Course Objectives

Throughout the course, students will explore practical use of the umbrella of technologies that work in conjunction with JavaScript as well as some of the tools, toolkits, and frameworks that can be used in conjunction with web development and deployment. The course begins with an initial look at JavaScript and how it is used within the context of web applications, walking students through the different technologies that are used with JavaScript and exploring core aspects of JavaScript and JQuery in terms of web applications, security, tools and frameworks. 

Working within in a dynamic, hands-on learning environment, guided by our expert team, attendees will:

  • Become both familiar with the language and confident enough to work with it in any context
  • Learn enough of the DOM API to bend it to your will
  • Make communication between the browser and your server possible
  • Understand and effectively leverage closures
  • Understand how JavaScript's object model differs from the model classical object-oriented programming languages
  • Learn what jQuery is 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

Students will understand:

  • What is JavaScript, how does it relate to other programming languages, and how do you script your web pages with it?
  • How do you traverse and manipulate the DOM and how do you handle events in ways that work in all browsers?
  • What is Ajax and how does JavaScript make it possible?
  • What are closures and prototypes and other exotic features of JavaScript?
  • What is jQuery and why should you use it?
  • How does jQuery reduce the amount of code that you have to write to add rich functionality to both existing and new web pages?
  • How does jQuery make Ajax programming easier?
  • What best practices are there for using jQuery so that it works unobtrusively and performs well?
  • What plugins and extensions are available to enhance your applications even more than the core jQuery library can provide?

Need different skills or topics?  If your team requires different topics or tools, additional skills or custom approach, this course may be easily adjusted to accommodate.  We offer additional JavaScript, JQuery, web development and responsive design courses which may be blended with this course for a track that best suits your development objectives.

Course Prerequisites

This is an introductory level course for experienced software developers seeking to enhance and extend their core web development skillset leveraging JavaScript and JQuery. Attendees should have practical experience developing basic software applications. This course provides an excellent foundation for continued learning to gain in-demand skills in in-demand skills and technologies such as NodeJS, Angular, React, Redux and more.  This course can also be tailored for less experienced or non-developers as needed. Please inquire for details.

Please see the Related Courses tab for specific Pre-Requisite courses, Related Courses that offer similar skills or topics, and next-step Follow-On Courses and Learning Path recommendations.

Course Agenda

Please note that this list of topics is based on our standard course offering, evolved from typical industry uses and trends. We’ll work with you to tune this course and level of coverage to target the skills you need most.

Session: Core JavaScript Essentials

Lesson: JavaScript Basics

  • JavaScript Defined
  • Variables and Operators
  • Flow Control and Conditionals

Lesson: Debugging Tools

  • Using the strict mode and setting breakpoints
  • Browser debugging tools
  • Monitoring resource usage and performance
  • Emulating devices Exceptions in JavaScript

Lesson: JavaScript Functions

  • Functions in JavaScript
  • Invoking Functions
  • Function Constructor
  • Function Scope and Closures

Lesson: JavaScript Arrays, Math and Date

  • JavaScript Literals
  • JavaScript Arrays
  • Working with Numbers and Dates

Lesson: JavaScript Event Handling and the DOM

  • Events and Event Handling
  • HTML Document Object Model
  • Accessing the DOM
  • Dynamically Working with the DOM
  • DOM Challenges

Lesson: Object-Oriented JavaScript

  • JavaScript “Objects” and “Classes”
  • Constructors and Prototypes
  • Prototypes
  • Extending Classes with Prototype
  • Reusable, Flexible Classes

Session: jQuery

Lesson: Why jQuery?

  • JavaScript Evolution
  • Why jQuery?
  • jQuery Usage
  • Downloading jQuery

Lesson: Basic jQuery

  • jQuery: Operational Overview
  • jQuery Capability Overview
  • Basic Selectors
  • Multiple Selector
  • Selecting by Order

Lesson: Manipulating the DOM

  • Attributes vs. Properties
  • CSS Box Model Properties
  • Element Content
  • Manipulating Children
  • Wrapping and Unwrapping
  • Effects (Basic Animation)
  • Effects Queues

Lesson: More on Element Selection

  • Hierarchical Selectors (Combinators)
  • Attribute Selectors
  • Basic vs. Child Filters
  • Filtering Methods
  • Traversing Methods

Session: Working with jQuery

Lesson: Attributes, Forms, and DOM

  • Selecting from Forms
  • Selecting Parent and Children
  • Automatic DOM Traversal
  • Manipulating DOM Elements
  • Getting and Setting Attribute Values
  • Removing Attributes

Lesson: More jQuery!

  • The jQuery Function
  • The jQuery Object
  • Some jQuery “Static” Methods
  • Utility Methods

Lesson: Event Handling

  • Binding Multiple Events to Same Handler
  • Multiple Events to Different Handlers
  • Event Targets
  • Triggering Events
  • Custom Events
  • Live Events

Lesson: More On Elements!

  • Changing HTML Content
  • Changing Text Content
  • Managing Elements
  • Introduction to Animations

Lesson: Ajax

  • Posting Data
  • Global Ajax Handlers
  • JSONP
  • Serialization
  • Deferred Objects
  • Promises and Piping
  • Chaining Tasks

Session: jQuery Plugins and Enhancements

Lesson: jQuery Plugins

  • jQuery Validation Plugin
  • jQuery Form plugin
  • jQuery BBQ (Back Button &
  • Query) Plugin
  • jQuery Hotkeys Plugin
  • jQuery Color Plugin

Lesson: jQuery UI

  • jQuery UI Effects
  • Advanced Easing
  • Interactions
  • Position Utility
  • Widgets
  • Icons

Lesson: Templates

  • Micro Templates
  • jQuery Template Plugin
  • Compiling Templates Template Items

Session: JavaScript Object Notation (JSON)

Lesson: 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

Lesson: 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

Lesson: jQuery, JSON, and AJAX

  • jQuery AJAX Utility Method
  • jQuery and JSON
  • jQuery and Other Data Types
  • Serialization
  • Deferred Objects
  • Promises and Piping
  • Chaining Tasks

Session: Advanced JavaScript Topics

Lesson: 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

Lesson: HTML5 JavaScript API

  • Cross-Domain Messaging
  • Working with Web Storage
  • Offline with Application Cache
  • Geolocation: What, Why, and How

Lesson: TypeScript

  • Strong Data Typing
  • Compiling TypeScript to JavaScript
  • TypeScript Datatypes
  • TypeScript Classes and Interfaces

Lesson: JavaScript Best Practices

  • Code Conventions for the Lifecycle
  • Resolving Shared Resources
  • Constructs to Use
  • Constructs to Avoid
  • Memory Considerations

Lesson: JavaScript Scheduling, Execution, and Security

  • Timers and Scheduling
  • Execution Contexts
  • Same Origin Policy and JavaScript
  • Security Considerations

Lesson: Performance and Optimization

  • Code Optimization
  • JavaScript Verbosity Tradeoffs
  • Memory Considerations
  • Cyclic References

Lesson: 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

Lesson: Security

  • Security: The Complete Picture
  • Unvalidated Input
  • Injection Flaws
  • XSS
  • Spoofing
  • How Attackers See JavaScript Applications
  • OWASP Top Ten for 2017

Session: Web Design

Lesson: Responsive Web Design

  • Adapting to Varying Screen Sizes
  • Scaling Page and Text Content
  • Scaling and Adapting for Media
  • Options for Adjusting Media

Lesson: User Interface Principles

  • Design Principles
  • Improving Interactions with Users
  • Matching Web Flow to User Expectations

Lesson: Layout Techniques

  • Page Layout Consideration
  • Stacking Content
  • Handling Excessive Content
  • Providing Consistency Across Web Presence

Lesson: Navigation Techniques

  • Handling Excessive Content
  • Providing Context and State Feedback
  • Navigation Placement and Techniques

Lesson: Selection Techniques

  • Improving Text Input
  • Improving Enumerated Input
  • Accessibility Considerations

Course Materials

Student Materials: Each participant will receive a digital Student Guide and/or Course Notes, code samples, software tutorials, step-by-step written lab instructions (as applicable), diagrams and related reference materials and resource links. Students will also receive the project files (or code, if applicable) and solutions required for the hands-on work.

Hands-On Setup Made Simple! Our dedicated tech team will work with you to ensure our ‘easy-access’ cloud-based course environment, or local installation, is accessible, fully-tested and verified as ready to go well in advance of the course start date, ensuring a smooth start to class and effective learning experience for all participants. In some cases we can also help you install this course locally if preferred. Please inquire for details and options.

Every-Course Extras = High-Value & Long-Term Learning Support! All Public Schedule courses include our unique EveryCourse Extras package (Course Recordings, Live Instructor Follow-on Support, Free *Live* Course Refresh Re-Takes, early access to Special Offers, Free Courses & more). Please inquire for details.

Raise the bar for advancing technology skills

Attend a Class!

Live scheduled classes are listed below or browse our full course catalog anytime

Special Offers

We regulary offer discounts for individuals, groups and corporate teams. Contact us

Custom Team Training

Check out custom training solutions planned around your unique needs and skills.

EveryCourse Extras

Exclusive materials, ongoing support and a free live course refresh with every class.

Mix, Match & Master!
2FOR1: Two Courses, One Price!
Enroll in *any* two public courses (for 2023 *OR* 2024 dates!) by December 31, for one price!  Learn something new, or share the promo!

Click for Details & Additional Offers

Learn. Explore. Advance!

Extend your training investment! Recorded sessions, free re-sits and after course support included with Every Course
Trivera MiniCamps
Gain the skills you need with less time in the classroom with our short course, live-online hands-on events
Trivera QuickSkills: Free Courses and Webinars
Training on us! Keep your skills current with free live events, courses & webinars
Trivera AfterCourse: Coaching and Support
Expert level after-training support to help organizations put new training skills into practice on the job

The voices of our customers speak volumes

Special Offers
Limited Offer for most courses.

SAVE 50%

Learn More