JavaScript Essential Training

Course details

JavaScript is a scripting language of the web. As the web evolves from a static to a dynamic environment, technology focus is shifting from static markup and styling—frequently handled by content management systems or automated scripts—to dynamic interfaces and advanced interaction. Once seen as optional, JavaScript is now becoming an integral part of the web, infusing every layer with its script.

Through practical examples and mini-projects, this course helps you build your understanding of JavaScript piece by piece, from core principles like variables, data types, conditionals, and functions through advanced topics including loops, and DOM scripting. Along the way, instructor Morten Rand-Hendriksen provides challenges that allow you to put your new skills to the test.

Concepts

0. Introduction

01 - JavaScript - The soil from which the modern web grows
02 - How to use the exercise files
03 - Exploring the lab environment

1. JavaScript - A Brief Introduction

04 - JavaScript - First contact
05 - Navigating the JS landscape
06 - Tools for working with JavaScript
07 - Linting and formatting
08 - Get to know the browser console
09 - JavaScript language basics
10 - Learning JavaScript backward

2. Up and Running with JS

11 - JavaScript in an HTML document
12 - JavaScript as an external file
13 - Modern JavaScript loading
14 - JavaScript modules

3. Objects

15 - Objects - A practical introduction
16 - JavaScript objects - The code version
17 - Object containers
18 - Object properties
19 - Accessing objects
20 - Accessing object properties
21 - Practice - Build a new object
22 - Object methods
23 - Practice - Build a new method
24 - Classes - Object blueprints
25 - Object constructors
26 - Practice - Build a new object with a constructor
27 - Global objects
28 - Challenge intro - Create a new object type
29 - Solution - Create a new object type

4. Sidebar - String Output

30 - Mix text and variables with template literals
31 - Traditional string output
32 - Challenge intro - Create a template literal
33 - Solution - Create a template literal

5. DOM

34 - DOM - The Document Object Model
35 - Access elements with querySelector methods
36 - Access elements using older methods
37 - Practice - Find an element
38 - Modifying element classes
39 - Attributes
40 - Inline style
41 - Practice - Modify classes and attributes, and styles
42 - Add DOM elements
43 - Challenge intro - Create elements
44 - Solution - Create elements

6. Sidebar - Variables and Data Types

45 - Variables - Containers for everything
46 - Var
47 - Scope
48 - Let
49 - Const
50 - Data types
51 - Assignment vs. comparison
52 - Math operators
53 - Challenge intro - Calculate sales tax
54 - Solution - Calculate sales tax

7. Arrays

55 - Arrays explained
56 - Arrays in code
57 - Array methods
58 - Challenge intro - Array manipulation
59 - Solution - Array manipulation

8. Functions and Methods

60 - The real-world function
61 - Functions and methods
62 - A standard function
63 - The arrow function
64 - Arrow functions and this
65 - Practice - Build a function
66 - Pass data to a function with parameters
67 - Return values from a function
68 - Practice - Pass values between functions
69 - Callbacks
70 - Conditional ifelse statement
71 - Logical operators
72 - Conditional switch statement
73 - Looping through content
74 - Using the map() array method
75 - Challenge intro - Create a content factory
76 - Solution - Create a content factory

9. Events

77 - DOM events explained
78 - Typical DOM events
79 - Event listeners
80 - Practice - Experiment with event listeners
81 - Advanced event listeners and this
82 - Pass arguments through event listeners
83 - Challenge intro - Create an event listener
84 - Solution - Create an event listener

10. Troubleshooting and Validating JS

85 - Troubleshooting JavaScript in the browser
86 - Making sense of a React component

Conclusion

87 - Next steps on your learning journey