Web Development Private On-Demand

Introduction to JavaScript Training (JSC101)

4 days

Introduction to JavaScript Training provides a practical foundation in JavaScript for learners who want to add interactivity and dynamic behavior to web pages.

Talk to a Learning Consultant Request a Private Class

Register or Request Training

Course Overview

Introduction to JavaScript Training provides a practical foundation in JavaScript for learners who want to add interactivity and dynamic behavior to web pages. The course begins with JavaScript syntax, variables, arrays, operators, functions, and built-in objects before progressing to conditionals, loops, event handling, and browser-based debugging with Google Chrome DevTools. Hands-on exercises reinforce each major concept and give learners experience writing and testing JavaScript code.

As the course progresses, learners work directly with the HTML Document Object Model (DOM) and CSS Object Model to access and modify elements, attributes, styles, and page content. Practical exercises include responding to user events, creating and removing DOM nodes, manipulating tables, showing and hiding elements, and developing an interactive shopping list application. The course also introduces runtime errors, structured exception handling, and try/catch techniques so learners can create more reliable JavaScript-driven web experiences.

Course Benefits

Understand core JavaScript syntax, objects, methods, properties, variables, constants, arrays, and operators.
Use Google Chrome DevTools to test JavaScript, inspect behavior, and support debugging.
Create reusable functions, work with global and built-in functions, and return values from custom functions.
Apply conditionals, switch statements, ternary expressions, truthy and falsy values, and loops to control program flow.
Configure event handlers and event listeners to respond to clicks, keyboard input, timers, and other user interactions.
Access and manipulate HTML elements, attributes, nodes, NodeLists, and HTMLCollections through the DOM.
Build dynamic page functionality by creating, updating, and removing elements in response to user actions.
Use JavaScript to modify CSS properties, classes, measurements, custom data attributes, and element visibility.
Practice combining JavaScript and DOM techniques by developing interactive features for a shopping list application.
Troubleshoot runtime problems using global error handling, structured exception handling, and try/catch statements.

Delivery Methods

Private Class
Delivered for your team at your site or online.

On-Demand
Learn at your own pace with 24/7 access.

Course Outline

JavaScript Basics
1. JavaScript vs. EcmaScript
2. The HTML DOM
3. JavaScript Syntax
4. Accessing Elements
5. Where Is JavaScript Code Written?
6. JavaScript Objects, Methods, and Properties
7. Alerts, Writing, and Changing Background Color (Exercise)
Variables, Arrays, and Operators
1. JavaScript Variables
2. A Loosely Typed Language
3. Google Chrome DevTools
4. Storing User-Entered Data
5. Using Variables (Exercise)
6. Constants
7. Arrays
8. Working with Arrays (Exercise)
9. Associative Arrays
10. Playing with Array Methods
11. JavaScript Operators
12. The Modulus Operator
13. Playing with Operators
14. The Default Operator
15. Working with Operators (Exercise)
JavaScript Functions
1. Global Objects and Functions
2. Working with Global Functions (Exercise)
3. User-defined Functions
4. Writing a JavaScript Function (Exercise)
5. Returning Values from Functions
Built-In JavaScript Objects
1. Strings
2. Math
3. Date
4. Helper Functions
5. Returning the Day of the Week as a String (Exercise)
Conditionals and Loops
1. Conditionals
2. Short-circuiting
3. Switch / Case
4. Ternary Operator
5. Truthy and Falsy
6. Conditional Processing (Exercise)
7. Loops
8. while and do…while Loops
9. for Loops
10. break and continue
11. Working with Loops (Exercise)
12. Array: forEach()
Event Handlers and Listeners
1. On-event Handlers
2. Using On-event Handlers (Exercise)
3. The addEventListener() Method
4. Anonymous Functions
5. Capturing Key Events
6. Adding Event Listeners (Exercise)
7. Benefits of Event Listeners
8. Timers
9. Typing Test (Exercise)
The HTML Document Object Model
1. CSS Selectors
2. The innerHTML Property
3. Nodes, NodeLists, and HTMLCollections
4. Accessing Element Nodes
5. Accessing Elements (Exercise)
6. Dot Notation and Square Bracket Notation
7. Accessing Elements Hierarchically
8. Working with Hierarchical Elements (Exercise)
9. Accessing Attributes
10. Creating New Nodes
11. Focusing on a Field
12. Shopping List Application
13. Logging (Exercise)
14. Adding EventListeners (Exercise)
15. Adding Items to the List (Exercise)
16. Dynamically Adding Remove Buttons to the List Items (Exercise)
17. Removing List Items (Exercise)
18. Preventing Duplicates and Zero-length Product Names (Exercise)
19. Manipulating Tables
CSS Object Model
1. Changing CSS with JavaScript
2. Hiding and Showing Elements
3. Checking and Changing Other Style Properties
4. Increasing and Decreasing Measurements
5. Custom data Attributes
6. Gotcha with fontWeight
7. Font Awesome
8. classList Property
9. Showing and Hiding Elements (Exercise)
Errors and Exceptions
1. Runtime Errors
2. Globally Handled Errors
3. Structured Error Handling
4. Try/Catch (Exercise)