JavaScript Essentials
Class Duration
35 hours of live training delivered over 5 days
Student Prerequisites
- Basic understanding of programming concepts
Target Audience
Designed for software engineers, front-end and full-stack developers, and technical leads who build or maintain browser-based applications in enterprise environments. It also benefits QA and automation engineers expanding into web scripting, and architects standardizing on modern ECMAScript. Attendees are comfortable with general programming concepts and want production-grade practices for DOM work, form handling, modular design, and asynchronous data flows that improve delivery velocity, quality, and business impact.
Description
This live, hands-on course equips professional developers to build dependable, maintainable web applications using modern JavaScript. Starting from language foundations and control flow, you’ll master core objects and collections, then move into the browser with the BOM and DOM to create interactive interfaces. You will implement reliable form handling and validation, design reusable components with object-oriented techniques, and write clean, modular code using closures and ES modules. Finally, you’ll integrate external data using JSON and build responsive, asynchronous features with AJAX, the Fetch API, Promises, and async/await—directly tied to real-world engineering and business outcomes.
Learning Outcomes
- Set up a professional JavaScript environment, understand the ECMAScript standard, and add scripts to web pages with confidence.
- Use core language features—types, variables, arrays, objects, functions—and debug effectively with the console and tooling.
- Control program flow with scopes, conditionals, loops, and structured error handling.
- Leverage built-in objects and collections (String, Number, Math, Date, Map, Set) to process and transform data reliably.
- Work with the Browser Object Model and DOM: handle events, manipulate nodes, and style elements dynamically.
- Build robust, user-friendly forms: read inputs, prevent unsafe submission, validate fields, and provide real-time feedback.
- Apply object-oriented JavaScript patterns—object creation, constructor functions, this binding, and prototype inheritance—to design reusable components.
- Organize code with callbacks, arrow functions, and closures; structure applications with static and dynamic ES modules; exchange data via JSON; and implement AJAX/Fetch with Promises and async/await.
Training Materials
All students receive comprehensive courseware covering all topics in the course. Courseware is distributed via GitHub in the form of documentation and extensive code samples. Students practice the topics covered through challenging hands-on lab exercises.
Software Requirements
Students will need a free, personal GitHub account to access the courseware. No local student setup is required, this course is delivered with GitHub Codespaces. The free allotment of Codespaces hours from GitHub is sufficient to complete the course.
Training Topics
Getting Started
- What is JavaScript?
- The ECMAScript Standard
- JavaScript Development Tools
- Adding JavaScript to web pages
JavaScript Types, Variables & Objects
- Statements, Variables and Types
- Displaying JavaScript data and debugging
- Operating on Primitives
- Creating and Accessing Arrays
- Creating Objects and Properties
- Basic Functions & Methods
Code Blocks
- Blocks and Scope
- Using Conditional Logic
- Looping
- Error Handling
Working with Built-In Objects and Arrays
- Built-In Objects
- Using String Properties and Methods
- Using Number Properties and Methods
- The JavaScript Math object and Random
- Creating and displaying JavaScript Dates
- Maps and Sets
Browser Object Model
- Using the window Object
- Using Timers
- Using the location Object
Document Object Model (DOM)
- Registering and Reacting to Events
- Adding and Removing DOM Nodes
- Changing the style of HTML elements
Using JavaScript with Forms
- Work with data from form inputs
- Stopping Form Submission
- Validating Form Fields
- Provide feedback to users
Object Oriented JavaScript
- Ways to create Objects
- Constructor functions
- Value of "this"
- Prototype Inheritance
Code Organization
- Using callbacks and anonymous functions
- Arrow functions
- Closures explained
- Modular JavaScript
- Static Modules
- Dynamic Modules
JSON
- What is JSON Syntax?
- JSON vs XML
- JSON Processing & Parsers
Asynchronous Programming with JavaScript
- Overview of AJAX
- Fetch API
- Promises
- Async/Await