Introduction

Introduction
What is JavaScript?
JavaScript in Action!
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
Using Course Resources
JavaScript vs Java
A Brief History Of JavaScript
Setting Up a Development Environment
Course FAQs

Basics: Variables, Data Types, Operators & Functions

Module Introduction
Setting Up the Project
More on Version Control & Git
Adding JavaScript to the Website
Introducing Variables & Constants
Declaring & Defining Variables
Working with Variables & Operators
Variables & Operators
Understanding the Starting Code
Data Types: Numbers & Strings (Text)
Using Constants
More on Strings
Data Types & Constants
Time to Practice: Variables, Constants, Operators & Core Data Types
Introducing Functions
Adding A Custom Function
Code Styles, Conventions & Syntax
Returning Values
The (Un)Importance of Code Order
An Introduction to Global & Local Scope
"Shadowed Variables"
More about the "return" Statement
Executing Functions "Indirectly"
"Indirect" vs "Direct" Function Execution - Summary
Functions & Scope
Time to Practice: Functions
Converting Data Types
Mixing Numbers & Strings
Splitting Code into Functions
Connecting all Buttons to Functions
Working with Code Comments
More Operators!
More Core Data Types!
Using Arrays
Creating Objects
Objects - Common Syntax Gotchas
Accessing Object Data
Arrays & Objects
Adding a Re-Usable Function That Uses Objects
undefined, null & NaN
The "typeof" Operator
"undefined", "null" & "NaN"
Importing Scripts Correctly with "defer" & "async"
Importing JavaScript - Summary
Wrap Up
Useful Resources & Links

Efficient Development & Debugging

Module Introduction
Efficient Development & Debugging - An Overview
Configuring the IDE Look & Feel
Using Shortcuts
Working with Auto-Completion & IDE Hints
Installing IDE Extensions
Tweaking Editor Settings
Utilizing Different IDE Views
Finding Help & Working with MDN
The ECMAScript Standard
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
Wrap Up
Useful Resources & Links

Working with Control Structures (if Statements, Loops, Error Handling)

Module Introduction
Introducing "if" Statements & Boolean (Comparison) Operators
Using Booleans in Conditions & More on Text Comparisons
Using "if" Statements
Working with "if", "else" and "else-if"
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
Coercion vs Conversion
Falsy and Truthy 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
Validating User Input
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
Introducing Loops
The "for" Loop
The "for-of" Loop
The "for-in" Loop
The "while" & "do-while" Loops
Loops - Basics
Time to Practice: Control Structures
Controlling Loops with "break"
Controlling Iterations with "continue"
More Control with Labeled Statements
break & continue
Error Handling with "try-catch" - An Introduction
Throwing Custom Errors
Working with "try-catch" to Catch & Handle Errors
Error Handling
Wrap Up
Useful Resources & Links

Behind the Scenes & The (Weird) Past (ES3, ES5) & Present (ES6+) of JavaScript

Module Introduction
ES5 vs ES6+ ("Next Gen JS") - Evolution of JavaScript
var vs let & const - Introducing "Block Scope"
Understanding "Hoisting"
Strict Mode & Writing Good Code
"JavaScript Specialties"
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
Wrap Up
Useful Resources & Links

More on Functions

Module Introduction
Recapping Functions Knowledge - What We Know Thus Far
Parameters vs Arguments
Functions vs Methods
Functions are Objects!
Function Expressions: Storing Functions in Variables
Function Expressions vs Function Declarations
Anonymous Functions
Working on the Project: Adding User Choices to the Game
Implementing the Core Game Logic
Introducing Arrow Functions
Different Arrow Function Syntaxes
Creating Functions
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
Working with "bind()"
Functions - Advanced
Adding bind() to the Calculator Project
call() and apply()
Wrap Up
Useful Resources & Links

Working with the DOM (Browser HTML Code) in JavaScript

Module Introduction
What's the "DOM"?
Document and Window Object
Understanding the DOM and how it's created
Nodes & Elements - Querying the DOM Overview
Selecting Elements in the DOM
Summary: Node Query Methods
Exploring and Changing DOM Properties
Attributes vs Properties
Selecting Multiple Elements & Summary
DOM Basics
Time to Practice: DOM Querying
Traversing the DOM - Overview
Traversing Child Nodes
Using parentNode & parentElement
Selecting Sibling Elements
DOM Traversal vs Query Methods
Styling DOM Elements
Creating Elements with JS - Overview
Adding Elements via HTML in Code
Adding Elements via createElement()
Inserting DOM Elements
Cloning DOM Nodes
Live Node Lists vs Static Node Lists
Removing Elements
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
Controlling the Backdrop
Fetching and Validating User Input
Creating a Movie in JavaScript & Clearing the Input
Rendering Movie Items on the Screen
Deleting Movie Elements
Showing & Hiding the "Are you sure?" Dialog
Starting with the Confirmation Logic
Finishing the App
Wrap Up
Useful Resources & Links

More on Arrays & Iterables

Module Introduction
What are "Iterables" and "Array-like Objects"?
Creating Arrays
Which Data Can You Store In Arrays?
push(), pop(), unshift(), shift() - Adding & Removing Elements
The splice() Method
Selecting Ranges & Creating Copies with slice()
Adding Arrays to Arrays with concat()
Retrieving Indexes with indexOf() /& lastIndexOf()
Finding Stuff: find() and findIndex()
Is it Included?
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
Maps & Sets - Overview
Working with Sets
Working with Maps
Maps vs Objects
Understanding WeakSet
Understanding WeakMap
Time to Practice: Arrays & Iterables
Wrap Up
Useful Resources & Links

More on Objects

Module Introduction
What's an Object?
Objects & Primitive Values
Objects - Recap
Adding, Modifying & Deleting Properties
Special Key Names & Square Bracket Property Access
Property Types & Property Order
Dynamic Property Access & Setting Properties Dynamically
Object Properties
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()
Object Destructuring
Checking for Property Existance
Introducing "this"
The Method Shorthand Syntax
The "this" Keyword And Its Strange Behavior
call() and apply()
What the Browser (Sometimes) Does to "this"
"this" and Arrow Functions
"this" - Summary
"this"
Getters & Setters
Wrap Up
Useful Resources & Links

Classes & Object-oriented Programming (OOP)

Module Introduction
What is "Object-oriented Programming" (OOP)?
Getting Started with OOP Code
Defining & Using a First Class
Working with Constructor Methods
Fields vs Properties
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
Getters & Setters
Introducing Inheritance
Implementing Inheritance
Using Inheritance Everywhere
Overriding Methods and the super() Constructor
super() Constructor Execution, Order & "this"
Different Ways of Adding Methods
Private Properties
"Pseudo-Private" Properties
Time to Practice: Classes & OOP
The "instanceof" Operator
Built-in Classes
Understanding Object Descriptors
Classes
Wrap Up
Useful Resources & Links

Deep Dive: Constructor Functions & Prototypes

Module Introduction
Introducing Constructor Functions
Constructor Functions vs Classes & Understanding "new"
Introducing Prototypes
Prototypes - Summary
Working with Prototypes
The Prototype Chain and the Global "Object"
Constructor Functions & Prototypes
Classes & Prototypes
Methods in Classes & In Constructors
Built-in Prototypes in JavaScript
Setting & Getting Prototypes
Wrap Up
Useful Resources & Links

Practice: OOP & Classes

Module Introduction
First Project Steps & Planning
Creating Project Lists & Parsing Element Data
Starting with the "Switch Project" Logic
Passing Method References Around
Moving DOM Elements
Adding a Tooltip
Adding Inheritance
Wrap Up
Useful Resources & Links

Back to the DOM & More Browser APIs

Module Introduction
Using "dataset" (data-* Attributes)
Getting Element Box Dimensions
Working with Element Sizes & Positions
The DOM & Prototypes
Positioning the Tooltip
Handling Scrolling
Working with <template> Tags
Loading Scripts Dynamically
Setting Timers & Intervals
The "location" and "history" Objects
The "navigator" Object
Working with Dates
The "Error" Object & Constructor Function
Wrap Up
Useful Resources & Links

Working with Events

Module Introduction
Introduction to Events in JavaScript
Different Ways of Listening to Events
Removing Event Listeners
The "event" Object
Supported Event Types
Example: Basic Infinite Scrolling
Working with "preventDefault()"
Understanding "Capturing" & "Bubbling" Phases
Event Propagation & "stopPropagation()"
Using Event Delegation
Triggering DOM Elements Programmatically
Event Handler Functions & "this"
Events
Drag & Drop - Theory
Configuring Draggable Elements
Marking the "Drop Area"
Dropping & Moving Data + Elements
Firefox Adjustments
Wrap Up
Useful Resources & Links

Advanced Function Concepts

Module Introduction
Pure Functions & Side-Effects
Impure vs Pure Functions
Factory Functions
Closures
Closures in Practice
Closures & Memory Management
Optional: IIFEs
Introducing "Recursion"
Advanced Recursion
Advanced Functions
Wrap Up
Useful Resources & Links

More on Numbers & Strings

Module Introduction
How Numbers Work & Behave in JavaScript
Floating Point (Im)Precision
The BigInt Type
The Global "Number" and "Math" Objects
Example: Generate Random Number Between Min/ Max
Exploring String Methods
Tagged Templates
Introducing Regular Expressions ("RegEx")
More on Regular Expressions
Wrap Up
Useful Resources & Links

Async JavaScript: Promises & Callbacks

Module Introduction
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)
Asynchronous Code
Getting Started with Promises
Chaining Multiple Promises
Promise Error Handling
Promise States & "finally"
Async/ await
Async/ await & Error Handling
Async/ await vs "Raw Promises"
Promise.all(), Promise.race() etc.
Promises & async/ await
Wrap Up
Useful Resources & Links

Working with Http Requests

Module Introduction
What & Why
How The Web Works
More Background about Http
Getting Started with Http
Sending a GET Request
JSON Data & Parsing Data
JSON Data Deep Dive
Promisifying Http Requests (with XMLHttpRequest)
Sending Data with a POST Request
Triggering Requests via the UI
The "Fetch" Button Always Appends
Sending a DELETE Request
Handling Errors
Using the fetch() API
POSTing Data with the fetch() API
Adding Request Headers
fetch() & Error Handling
XMLHttpRequest vs fetch()
Working with FormData
Wrap Up
Useful Resources & Links

Working with JavaScript Libraries

Module Introduction
What & Why
Adding Libraries (Example: lodash)
Example: jQuery
Discovering Libraries
Axios Library & Http Requests
Third-Party Library Considerations
Wrap Up
Useful Resources & Links

Modular JavaScript (Working with Modules)

Module Introduction
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
Modules
Wrap Up
Useful Resources & Links

JavaScript Tooling & Workflows

Module Introduction
Project Limitations & Why We Need Tools
Workflow Overview
A Note About The NodeJS Version
Setting Up a npm Project
Working with npm Packages
Linting with ESLint
Configuring ESLint
Important: Webpack Version
Bundling with Webpack
Bonus: Multiple Entry Points
Development Mode & Fixing "Lazy Loading"
Using webpack-dev-server
Generating Sourcemaps
Building For Production
Final Optimizations
Using Third Party Packages with npm & Webpack
Wrap Up
Useful Resources & Links

Utilizing Browser Storage

Module Introduction
Browser Storage Options
localStorage & sessionStorage
Getting Started with Cookies
Working with Cookies
Getting Started with IndexedDB
Working with IndexedDB
Wrap Up
Useful Resources & Links

JavaScript & Browser Support

Module Introduction
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
Wrap Up
Useful Resources & Links

Time to Practice: Share My Place App

Module Introduction
Setting Up the Project
Getting DOM Access
Getting the User Location
Adding Feedback (Showing a Modal)
Hiding the 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
Useful Resources & Links

Working with JavaScript Frameworks

Module Introduction
What and Why?
The Idea Behind React.js
Analysing a React Project
Wrap Up
Useful Resources & Links

Meta-Programming: Symbols, Iterators, Generators, Reflect API & Proxy API

Module Introduction
Understanding Symbols
Well-known Symbols
Understanding Iterators
Generators & Iterable Objects
Generators Summary & Built-in Iterables Examples
The Reflect API
The Proxy API and a First "Trap"
Working with Proxy Traps
Wrap Up
Useful Resources & Links

Node.js: An Introduction

Module Introduction
JavaScript is a Hosted Language
Installation & Basics
Understanding Modules & File Access
Working with Incoming Http Requests
Sending Responses (HTML Data)
Parsing Incoming Data
Introducing & Installing Express.js
Express.js: The Basics
Extracting Data
Rendering Server-side HTML with Templates & EJS
Enhancing Our Project
Adding Basic REST Routes
Understanding CORS (Cross Origin Resource Sharing)
Sending the Location ID to the Frontend
Adding the GET Location Route
Introducing MongoDB (Database)
NodeJS Error Handling
Wrap Up
Useful Resources & Links

Security

Module Introduction
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)
Wrap Up
Useful Resources & Links

Deploying JavaScript Code

Module Introduction
Deployment Steps
Different Types of Websites
Example: Static Host Deployment (no Server-side Code)
Injecting Script Imports Into HTML Automatically
Example: Dynamic Page Deployment (with Server-side Code)
Useful Resources & Links

Performance & Optimizations

Module Introduction
What is "Performance Optimization" About?
Optimization Potentials
Measuring Performance
Diving Into The Browser Devtools (for Performance Measuring)
Further Resources
Preparing The Testing Setup
Optimizing Startup Time & Code Usage / Coverage
Updating The DOM Correctly
Updating Lists Correctly
Optimizing The Small Things
Micro-Optimizations (Think Twice!)
Finding & Fixing Memory Leaks
Server-side Performance Optimizations
Wrap Up
Useful Resources & Links

Introduction to Testing

Module Introduction
What Is Testing? Why Does It Matter?
Testing Setup
Writing & Running Unit Tests
Writing & Running Integration Tests
Writing & Running e2e Tests
Dealing with Async Code
Working with Mocks
Useful Resources & Links

Bonus: Programming Paradigms (Procedural vs Object Oriented vs Functional)

Module Introduction
What are Programming Paradigms?
Procedural Programming in Practice
Object Oriented Programming in Practice
Functional Programming in Practice
Wrap Up
Useful Resources & Links

Bonus: Data Structures & Algorithms Introduction

Module Introduction
What are "Data Structures" & "Algorithms"?
A First Example
Solving the Same Problem Differently
Performance & The "Big O" Notation
More Time Complexities & Comparing Algorithms
More on Big O
More Examples
Diving into Data Structures & Time Complexities
Where to Learn More & Wrap Up
Useful Resources & Links

Bonus: TypeScript Introduction

Module Introduction
What is TypeScript and Why would you use it?
Working with Types
Core Types & Diving Deeper
Object Types, Array Types & Function Types
Advanced Types (Literal Types, Union Types, Enums)
Classes & Interfaces
Generic Types
Configuring the TypeScript Compiler
Useful Resources & Links

Bonus: Web Components

Module Introduction
Web Components in Action
What are Web Components?
Why Web Components?
Getting Started!
Web Component Browser Support
Our Development Setup
A First Custom Element
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
Styling our Elements
Working with the "Shadow DOM"
Adding an HTML Template
Using Slots
Defining the Template in JavaScript
Using Style Tags in the Shadow DOM
Extending Built-in Elements
Time to Practice - The Basics
The Next Steps
Understanding Shadow DOM Projection
Styling "slot" Content Outside of the Shadow DOM
Styling "slot" Content Inside of the Shadow DOM
Styling the Host Component
Conditional Host Styling
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"
Adding a render() Method
Final Adjustment
The Next Steps
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
Closing the Modal
Dispatching Custom Events
Configuring Custom Events
Finishing it up!
Useful Resources & Links

Roundup & Next Steps

Congratulations!
Bonus! (Next Steps Overview / Other Topics)

Popular Searches

JavaScript - The Complete Guide 2024 (Beginner + Advanced)

Online

₹ 4999

Quick Facts

Course overview

The highlights

Program offerings

Course and certificate fees

Fees information

certificate availability

certificate providing authority

Who it is for

What you will learn

The syllabus

Introduction

Basics: Variables, Data Types, Operators & Functions

Efficient Development & Debugging

Working with Control Structures (if Statements, Loops, Error Handling)

Behind the Scenes & The (Weird) Past (ES3, ES5) & Present (ES6+) of JavaScript

More on Functions

Working with the DOM (Browser HTML Code) in JavaScript

More on Arrays & Iterables

More on Objects

Classes & Object-oriented Programming (OOP)

Deep Dive: Constructor Functions & Prototypes

Practice: OOP & Classes

Back to the DOM & More Browser APIs

Working with Events

Advanced Function Concepts

More on Numbers & Strings

Async JavaScript: Promises & Callbacks

Working with Http Requests

Working with JavaScript Libraries

Modular JavaScript (Working with Modules)

JavaScript Tooling & Workflows

Utilizing Browser Storage

JavaScript & Browser Support

Time to Practice: Share My Place App

Working with JavaScript Frameworks

Meta-Programming: Symbols, Iterators, Generators, Reflect API & Proxy API

Node.js: An Introduction

Security

Deploying JavaScript Code

Performance & Optimizations

Introduction to Testing

Bonus: Programming Paradigms (Procedural vs Object Oriented vs Functional)

Bonus: Data Structures & Algorithms Introduction

Bonus: TypeScript Introduction

Bonus: Web Components

Roundup & Next Steps

Instructors

Articles

Popular Articles

Latest Articles

Trending Courses

Popular Courses

Popular Platforms

Learn more about the Courses

Thank You!

Download the Careers360 App on your Android phone