JavaScript Mastery Online Course
JavaScript Mastery Online Course
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
- Outro
No reviews yet. Be the first to review!