IIRF Online > Development > Web Development > JavaScript > JavaScript - The Complete Guide 2024 (Beginner + Advanced)
JavaScript - The Complete Guide 2024 (Beginner + Advanced) by Udemy
Modern JavaScript from the beginning - all the way up to JS expert level! THE must-have JavaScript resource in 2024.
Course Highlights
- Learn JavaScript from scratch and in great detail - from beginner to advanced
- All core features and concepts you need to know in modern JavaScript development
- Everything you need to become a JavaScript expert and apply for JavaScript jobs
- Project-driven learning with plenty of examples
- All about variables, functions, objects and arrays
- Object-oriented programming
- Deep dives into prototypes, JavaScript engines & how it works behind the scenes
- Manipulating web pages (= the DOM) with JavaScript
- Event handling, asynchronous coding and Http requests
- Meta-programming, performance optimization, memory leak busting
- Testing, security and deployment
- And so much more!
Skills you will learn!
Overview
Prior requirements for this course:
- There is no prior JavaScript expertise necessary.
- It is recommended that you have a basic understanding of web programming.
- A basic familiarity of HTML and CSS is a plus in learning javascript.
Behind the scenes of javascript course:
- JavaScript Evolution(ES5 Versus ES6)
- Introducing "Block Scope" Understanding "Hoisting"
- Strict Mode and Good Code
- How Code is Parsed and Compiled Within the JavaScript Engine
- Code execution of JavaScript Programming Language vs. Browser APIs
- Values of Primitive vs. Reference
- Garbage Collection and Memory Administration
- Compile Useful Resources and Links
Curriculum
15 Topics
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
Course Setup
53 Topics
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
Exercise: 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
Exercise: Functions
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
Exercise: Executing Functions Directly & Indirectly
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
Exercise: Arrays
Creating Objects
Exercise: 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
19 Topics
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
50 Topics
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"
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
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
Exercise: for Loops
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
Exercise: Throwing & Handling Errors
Error Handling
Wrap Up
Useful Resources & Links
14 Topics
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
25 Topics
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
42 Topics
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
Exercise: 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()
Exercise: Adding Elements
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
31 Topics
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()
Exercise: 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
29 Topics
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
28 Topics
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
14 Topics
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
10 Topics
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
16 Topics
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
21 Topics
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
13 Topics
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
12 Topics
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
18 Topics
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
22 Topics
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
9 Topics
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
14 Topics
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
18 Topics
Module Introduction
Project Limitations & Why We Need Tools
Workflow Overview
Setting Up a npm Project
Working with npm Packages
Linting with ESLint
Configuring ESLint
Important: Webpack Version & Configuring npm Scripts
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
9 Topics
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
12 Topics
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
15 Topics
Module Introduction
Note: Use the LTS Version of NodeJS
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
6 Topics
Module Introduction
What and Why?
The Idea Behind React.js
Analysing a React Project
Wrap Up
Useful Resources & Links
14 Topics
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
20 Topics
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
9 Topics
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
7 Topics
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
16 Topics
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
9 Topics
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
7 Topics
Module Introduction
What are Programming Paradigms?
Procedural Programming in Practice
Object Oriented Programming in Practice
Functional Programming in Practice
Wrap Up
Useful Resources & Links
11 Topics
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
10 Topics
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
49 Topics
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
2 Topics
Course Roundup
Bonus! (Next Steps Overview / Other Topics)
JavaScript - The Complete Guide 2024 (Beginner + Advanced)
Related JavaScript Courses
Frequently Asked Questions
There is no shortcut way to learn JavaScript, you must start with understanding the basics and practice as much as you can. Focus on hands-on coding and work on real-time projects for better exposure.
There are plenty of courses available online, hence you must make sure that the course covers all comprehensive core concepts of javascript. It should have coding exercises and real-world projects for hands-on experience. The most important thing is to provide the certification with a name and signature.
Online javascript courses can be taken from anywhere with the help of an internet connection. It is a reliable and flexible option as it helps in productive learning. You can access expert instructors anytime when you are learning.
You can use javascript in Chrome using the following steps:
Launch Chrome and then launch the JavaScript Console by pressing Ctrl+Shift+j.
Use a text editor to test a code and run your JS in Chrome.
JavaScript is superior to Python for website development. JavaScript runs in the browser. Python, on the other hand, is a server-side backend language. You cannot use Python to build a website; however, it can be used in a particular part.
Thank You!
Your review has been submitted successfully.