This course builds a strong foundation in JavaScript, the leading scripting language of the web, by teaching not just how it works but why. You’ll explore variables, functions, objects, data types, and DOM manipulation, while also creating custom dialog methods and using modern features like arrow syntax, loops, Math.random(), and date handling. The course also covers prototypes, JS engines, and the execution stack, helping you debug effectively and write more advanced code. By the end, you’ll confidently “speak” JavaScript and be ready to build dynamic, modern websites.
Who should take this course?
This course is designed for web developers, software engineers, and learners who want to master JavaScript for building dynamic, interactive, and modern web applications. It’s also perfect for those preparing for advanced frameworks like React, Angular, or Vue.
What you will learn
Learn how HTML, CSS, and JavaScript interact with one another
Understand dialog boxes in JavaScript
Get an introduction to machine language, JavaScript engines, and IDEs
Learn how to use a completely free text editor (both online and offline)
Discover a depth of knowledge to boost your ability and confidence
Learn all the programming techniques used by professionals
Course Outline
Programming, Machine Code, and Interpreters
Welcome to the Course
Introduction
Programming - What Is It?
English Analogy
Order Matters
GIGO
Quick Recap
Hundreds of Languages
Machine Code - Introduction
Machine Code - A Little Deeper
Processors
Low-Level Languages
High-Level Languages
Step Back - A Comparison Between Low Level and High-Level Languages
Writing JavaScript - How
Compiling
Interpreters
Compiling Versus Interpreting
Intermediate
Recap: Compiling, Interpreting, and JavaScript
Outro
HTML, CSS, and JavaScript (and Bonus ECMAScript)
Section Introduction
Relationship between HTML, CSS, and JavaScript
Practical Example: Browser's Default CSS Styles
Practical Example: Changing Button Text
Scripting Language
Is JavaScript a 'Safe' Language?
Java Versus JavaScript
Part 1 - ECMAScript and ES6
Part 2 - ECMAScript and ES6
JavaScript Engines
Section Introduction
Engines - Introduction
Why Are There Different JS Engines?
V8 Engine
JavaScript Lives in Different Environments
Outro
Writing JavaScript in the Console
Section Introduction
Console - Introduction
Alert Function - Introduction
Console Log
Browser Object Model (BOM)
Window Object - Playaround
Deprecated Window Properties
Console - Log, Info, Warn, and Error
Console - Assert
Console - Count, Dir, Group, Time, Table
Substitutions
IDE (Integrated Development Environment) and Text Editors - Introduction
IDEs (Integrated Development Environments) - Introduction
Local Server
How to Include JavaScript in Your HTML
<Script> Tag - Example of Inline and External
Inline JavaScript Example within the <head> Tag and <body> Tag
Order Matters
Trick Question - What Do You Expect to Happen?
Order Matters - The Problem
Order Matters - Why Did the Element Not Load?
Order Matters - Fixing the Problem
External JavaScript and the Async Attribute
Syntax
Syntax - Introduction
Syntax - What Is It?
Syntax Parser
White Space
Semicolons and the 'return' Statement
Comments
Data Types and the typeof() Method
Primitive Data Types - An Example
String Data Type = "Click Me" Button Example
Properties
Number Date Type - Floating Points
Number Data Type: 0.1 + 0.2
Number Data Type - Base 10 Versus Base 2
Number Data Type - Number (), Infinity, and More
Null and Undefined Data Types
Escaping
Operators - Introduction
Operators - Binary Versus Unary
Coercion - Introduction
Coercion - String, Number, and Boolean
Variables
Variables - Section Introduction
Variables - What Are They?
Variable Creation: Declare, Initialize, and Assign
Identifiers
VAR - the Old Way to Declare a Variable
LET - the New Way to Declare a Variable
CONST - the New Way to Declare a Constant Variable
CONST - Try and Catch
Variables - Quick Recap
Scope - What Is It?
Local Versus Global Scope, and Function Versus Block Scope
Scope - VAR Versus LET and a NESTED Block
Using DevTools to Determine Scope
Dialog Boxes in JavaScript
Alert - Creating an Onclick Event for a Button
Alert - Writing Text to a Screen after the Alert Has Been Acknowledged
Confirm - Conditional If Statement
Prompt
Alert - Custom Design with Pure HTML, CSS, and JS
JavaScript Dates
Date Object
Why is the New Keyword Important when Instantiating the Date Object?
Four Ways to Create a Date Object in JavaScript
Get Methods on the Date Object
Set Methods on the Date Object
3 Practical Examples: Birthday, UTC, and Reformatting
Objects
Section Introduction
Objects - Introduction
name:value Pairs
Objects and Data - How They Relate to Each Other
Objects Versus Variables
Properties and Methods
Accessing Properties
Creating Objects - Four Ways
Creating Objects - 1. Object Literal
Creating Objects - 2. Constructor Function Introduction
Creating Objects - 2. Constructor Function Example
Pause Quickly
Construction Function Versus Object Literal - Part 1
Construction Function Versus Object Literal - Instantiation Versus Singleton Approach
Construction Function Versus Object Literal - init Function and Which to Choose
Creating Objects - 3. Object.create()
Examples of Object.create()
Another Example of Object.create()
Creating Objects - 4. Classes
Understanding Classes Starts with the Constructor Function
Class Example
Objects Recap and an Example of How Objects can Be Passed into Other Functions
JavaScript Object Model
Advanced Section - Building a Custom Polyfill
Introduction
What Is a Browser?
Do Browsers Follow a Set of Common Rules?
What Is a Polyfill?
Testing Whether the forEach() Method Exists in Our Browser
What Is forEach()
Practical Example of forEach()
Custom forEach() Polyfill - First Step
Custom forEach() Polyfill - Introduction
Custom forEach() Polyfill - Callback Function
What Is THIS?
Custom forEach() Polyfill - Final
Outro
Arrays and Loops
Arrays Introduction
Creating Arrays
Push and Pop
Three Types of Array Methods
Mutator, Accessor, and Iterator
Why Is Being Able to Loop Through Data Important
Looping Through Arrays
Looping Through Objects
Object Shapes (Advanced)
Prototypes
Section Introduction
Prototype Example and isPrototypeOf() Method
What Is a Prototype?
Prototype Versus —proto—
Prototype Versus —proto— Part 2
Prototype Tree and Null
Let us Prove the Prototype Tree
Functions
Section Introduction
What is a Function?
Invoking a Function Versus Returning a Function
Cool Example: Click on a Paragraph and Make Text Change
Cool Example (Advanced): Click Button and Display Random Quotes
Explanation of Math.Random()
Return Keyword
There Are Two Types of Functions
Function Expressions Versus Declarations - Examples
Function Declaration Versus Function Expression
New Arrow Syntax
What Does "No Binding of This" Mean?
Recap - Variables, Objects, and Functions
Introduction to the toLowerCase() Function
Introduction to the Array.from() Method
How Does the Array.from() Method Work?
Introduction to the indexOf() Method
Using indexOf() with Arrays
Using indexOf() with Strings
JavaScript - THIS, Execution Context and Lexical Environments
Section Introduction
What is 'This' Reference Variable?
Global Execution Context
Global Versus Functional Execution Context
Execution Stack
Execution Stack - Example
What Is a Lexical Environment?
Lexical Environment - Advanced Example
Six Rules for Determining What This Refers To
Call (), Apply () and Bind () Methods
Teaser - How Does JavaScript Affect the Critical Rendering Path
Introduction
What Is the CRP?
How Browsers Used to Work
How Browsers Work Today
Render Blocking Resources - Introduction
JavaScript and the DOM
JavaScript Is Render Blocking
Placing JavaScript at the Bottom of Your File
Using the Async Attribute
Summary of Where We Can Place Our JS to Improve the CRP
