Join our Online Learning Community
How JavaScript Is Executed
Dynamic vs Weakly Typed Languages
JavaScript Executes In A Hosted Environment
Course Outline - What's In This Course?
How To Get The Most Out Of This Course
A Brief History Of JavaScript
Setting Up a Development Environment
More on Version Control & Git
Adding JavaScript to the Website
Introducing Variables & Constants
Declaring & Defining Variables
Working with Variables & Operators
Exercise: Variables & Operators
Understanding the Starting Code
Data Types: Numbers & Strings (Text)
Time to Practice: Variables Constants Operators & Core Data Types
Code Styles Conventions & Syntax
The (Un)Importance of Code Order
An Introduction to Global & Local Scope
More about the "return" Statement
Executing Functions "Indirectly"
"Indirect" vs "Direct" Function Execution - Summary
Exercise: Executing Functions Directly & Indirectly
Time to Practice: Functions
Splitting Code into Functions
Connecting all Buttons to Functions
Working with Code Comments
Objects - Common Syntax Gotchas
Adding a Re-Usable Function That Uses Objects
"undefined" "null" & "NaN"
Importing Scripts Correctly with "defer" & "async"
Importing JavaScript - Summary
Efficient Development & Debugging - An Overview
Configuring the IDE Look & Feel
Working with Auto-Completion & IDE Hints
Installing IDE Extensions
Utilizing Different IDE Views
Finding Help & Working with MDN
How to "google" Correctly
Debugging JavaScript - An Overview
An Error Message! No Reason To Panic!
Using console.log() to look "into the Code"
Next-Level Debugging with the Chrome Devtools & Breakpoints
Testing Code Changes Directly in the Devtools
Debugging Code directly Inside VS Code
Introducing "if" Statements & Boolean (Comparison) Operators
Using Booleans in Conditions & More on Text Comparisons
Working with "if" "else" and "else-if"
Exercise: Getting Started with if Statements
Beware When Comparing Objects & Arrays for Equality!
The Logical AND and OR Operators
Understanding Operator Precedence
if & Boolean Operators - The Basics
Beyond true/ false: "Truthy" and "Falsy" Values
Setting Up a Bigger Example Project (The "Monster Killer")
Adding an "Attack" Function
Using "if" Statements for Checking the Win-Condition
Adding More "if" Statements & A "Strong Attack" Functionality
Time for a "Heal Player" Functionality!
Controlling the Conditional Bonus Life (Without Boolean Operators!)
Adding a "Reset Game" Functionality
Utilizing Global Constants as Identifiers in Conditional Code
Adding a Conditional Battle Log
Introducing the Ternary Operator
A Bit of Theory: Statements vs Expressions
Logical Operator "Tricks" & Shorthands
Logical Operators - A Quick Summary
Logical Operators & How They Work
Working with the "switch-case" Statement
The "while" & "do-while" Loops
Time to Practice: Control Structures
Controlling Loops with "break"
Controlling Iterations with "continue"
More Control with Labeled Statements
Error Handling with "try-catch" - An Introduction
Working with "try-catch" to Catch & Handle Errors
Exercise: Throwing & Handling Errors
ES5) & Present (ES6+) of JavaScript
ES5 vs ES6+ ("Next Gen JS") - Evolution of JavaScript
var vs let & const - Introducing "Block Scope"
Strict Mode & Writing Good Code
How Code is Parsed & Compiled
Inside the JavaScript Engine - How the Code Executes
[DEEP DIVE] JavaScript Language vs Browser APIs
Primitive vs Reference Values
Garbage Collection & Memory Management
Recapping Functions Knowledge - What We Know Thus Far
Function Expressions: Storing Functions in Variables
Function Expressions vs Function Declarations
Working on the Project: Adding User Choices to the Game
Implementing the Core Game Logic
Introducing Arrow Functions
Different Arrow Function Syntaxes
Outputting Messages to the User
Default Arguments in Functions
Introducing Rest Parameters ("Rest Operator")
Creating Functions Inside of Functions
Understanding Callback Functions
Time to Practice: Functions
Adding bind() to the Calculator Project
Document and Window Object
Understanding the DOM and how it's created
Nodes & Elements - Querying the DOM Overview
Selecting Elements in the DOM
Exercise: Selecting Elements in the DOM
Summary: Node Query Methods
Exploring and Changing DOM Properties
Selecting Multiple Elements & Summary
Time to Practice: DOM Querying
Traversing the DOM - Overview
Using parentNode & parentElement
Selecting Sibling Elements
DOM Traversal vs Query Methods
Creating Elements with JS - Overview
Adding Elements via HTML in Code
Adding Elements via createElement()
Exercise: Adding Elements
Live Node Lists vs Static Node Lists
Insertion & Removal Method Summary
Summary: Insert Replace Remove
Setting Up the Practice Project
Selecting the Modal and "Add" Button
Opening a Modal by Changing CSS Classes
Fetching and Validating User Input
Creating a Movie in JavaScript & Clearing the Input
Rendering Movie Items on the Screen
Showing & Hiding the "Are you sure?" Dialog
Starting with the Confirmation Logic
What are "Iterables" and "Array-like Objects"?
Which Data Can You Store In Arrays?
push() pop() unshift() shift() - Adding & Removing Elements
Selecting Ranges & Creating Copies with slice()
Adding Arrays to Arrays with concat()
Retrieving Indexes with indexOf() /& lastIndexOf()
Finding Stuff: find() and findIndex()
Alternative to for Loops: The forEach() Method
Transforming Data with map()
sort()ing and reverse()ing
Filtering Arrays with filter()
Where Arrow Functions Shine!
The Important reduce() Method
Chaining Methods in JavaScript
Arrays & Strings - split() and join()
The Spread Operator (...)
Understanding Array Destructuring
Time to Practice: Arrays & Iterables
Objects & Primitive Values
Adding Modifying & Deleting Properties
Special Key Names & Square Bracket Property Access
Property Types & Property Order
Dynamic Property Access & Setting Properties Dynamically
Demo App & Shorthand Property Syntax
Rendering Elements based on Objects
for-in Loops & Outputting Dynamic Properties
Adding the Filter Functionality
Understanding "Chaining" (Property & Method Chaining)
The Object Spread Operator (...)
Understanding Object.assign()
Checking for Property Existance
The Method Shorthand Syntax
The "this" Keyword And Its Strange Behavior
What the Browser (Sometimes) Does to "this"
"this" and Arrow Functions
What is "Object-oriented Programming" (OOP)?
Getting Started with OOP Code
Defining & Using a First Class
Working with Constructor Methods
Using & "Connecting" Multiple Classes
Binding Class Methods & Working with "this"
Adding a Cart and Shop Class
Communicating Can Be Challenging!
Static Methods & Properties
First Summary & Classes vs Object Literals
Using Inheritance Everywhere
Overriding Methods and the super() Constructor
super() Constructor Execution Order & "this"
Different Ways of Adding Methods
"Pseudo-Private" Properties
Time to Practice: Classes & OOP
The "instanceof" Operator
Understanding Object Descriptors
Introducing Constructor Functions
Constructor Functions vs Classes & Understanding "new"
The Prototype Chain and the Global "Object"
Constructor Functions & Prototypes
Methods in Classes & In Constructors
Built-in Prototypes in JavaScript
Setting & Getting Prototypes
Using "dataset" (data-* Attributes)
Getting Element Box Dimensions
Working with Element Sizes & Positions
Working with <template> Tags
Loading Scripts Dynamically
Setting Timers & Intervals
The "location" and "history" Objects
The "Error" Object & Constructor Function
Introduction to Events in JavaScript
Different Ways of Listening to Events
Example: Basic Infinite Scrolling
Working with "preventDefault()"
Understanding "Capturing" & "Bubbling" Phases
Event Propagation & "stopPropagation()"
Triggering DOM Elements Programmatically
Event Handler Functions & "this"
Configuring Draggable Elements
Dropping & Moving Data + Elements
How Numbers Work & Behave in JavaScript
Floating Point (Im)Precision
The Global "Number" and "Math" Objects
Example: Generate Random Number Between Min/ Max
Introducing Regular Expressions ("RegEx")
More on Regular Expressions
Understanding Synchronous Code Execution ("Sync Code")
Understanding Asynchronous Code Execution ("Async Code")
Blocking Code & The "Event Loop"
Sync + Async Code - The Execution Order
Multiple Callbacks & setTimeout(0)
Getting Started with Promises
Chaining Multiple Promises
Promise States & "finally"
Async/ await & Error Handling
Async/ await vs "Raw Promises"
Promise.all() Promise.race() etc.
More Background about Http
Getting Started with Http
Promisifying Http Requests (with XMLHttpRequest)
Sending Data with a POST Request
Triggering Requests via the UI
The "Fetch" Button Always Appends
POSTing Data with the fetch() API
XMLHttpRequest vs fetch()
Splitting Code in a Sub-optimal Way
A First Step Towards JavaScript Modules
We Need a Development Server!
First import / export Work
Switching All Files To Use Modules
More Named Export Syntax Variations
Working With Default Exports
Dynamic Imports & Code Splitting
When Does Module Code Execute?
Module Scope & globalThis
Project Limitations & Why We Need Tools
Working with npm Packages
Important: Webpack Version & Configuring npm Scripts
Bonus: Multiple Entry Points
Development Mode & Fixing "Lazy Loading"
Using Third Party Packages with npm & Webpack
What Is "Browser Support" About?
Determining Browser Support For A JavaScript Feature
Determining Required Support
Solution: Feature Detection + Fallback Code
Solution: Using Polyfills
Solution: Transpiling Code
Improvement: Automatically Detect + Add Polyfills
What about Support Outside of Browsers?
Browser Support Outside of JavaScript Files
Note: Use the LTS Version of NodeJS
Getting the User Location
Adding Feedback (Showing a Modal)
Rendering a Map with Google Maps
Continuing without a Credit Card
Finding an Address & Getting the Coordinates
Converting User Input to Coordinates
Creating a "Share Place" Link
Copying the Link to the Clipboard
Rendering the "Shared Place" Screen
JavaScript is a Hosted Language
Understanding Modules & File Access
Working with Incoming Http Requests
Sending Responses (HTML Data)
Introducing & Installing Express.js
Rendering Server-side HTML with Templates & EJS
Understanding CORS (Cross Origin Resource Sharing)
Sending the Location ID to the Frontend
Adding the GET Location Route
Introducing MongoDB (Database)
Security Hole Overview & Exposing Data in your Code
Cross-Site Scripting Attacks (XSS)
Third-Party Libraries & XSS
XSS & Exposing Confidential Details
CSRF Attacks (Cross Site Request Forgery)
CORS (Cross Origin Resource Sharing)
What is "Performance Optimization" About?
Diving Into The Browser Devtools (for Performance Measuring)
Preparing The Testing Setup
Optimizing Startup Time & Code Usage / Coverage
Updating The DOM Correctly
Optimizing The Small Things
Micro-Optimizations (Think Twice!)
Finding & Fixing Memory Leaks
Server-side Performance Optimizations
What are "Data Structures" & "Algorithms"?
Solving the Same Problem Differently
Performance & The "Big O" Notation
More Time Complexities & Comparing Algorithms
Diving into Data Structures & Time Complexities
Where to Learn More & Wrap Up
What is TypeScript and Why would you use it?
Core Types & Diving Deeper
Object Types Array Types & Function Types
Advanced Types (Literal Types Union Types Enums)
Configuring the TypeScript Compiler
Web Component Browser Support
Interacting with the Surrounding DOM
Understanding the Custom Element Lifecycle
Using "connectedCallback" for DOM Access
Listening to Events Inside the Component
Using Attributes on Custom Elements
Working with the "Shadow DOM"
Defining the Template in JavaScript
Using Style Tags in the Shadow DOM
Extending Built-in Elements
Time to Practice - The Basics
Understanding Shadow DOM Projection
Styling "slot" Content Outside of the Shadow DOM
Styling "slot" Content Inside of the Shadow DOM
Styling the Host Component
Styling with the Host Content in Mind
Smart Dynamic Styling with CSS Variables
Cleaning Up the Overall Styling
Observing Attribute Changes
Adjusting the Component Behavior Upon Attribute Changes
Using "disconnectedCallback"
Creating the Basic Modal Component
Adding the Modal Container
Styling the Modal Elements
Adding Some General App Logic
Opening the Modal via CSS
Public Methods & Properties
Understanding Named Slots
Listening to Slot Content Changes
Dispatching Custom Events
Configuring Custom Events