JavaScript - The Complete Guide (Beginner + Advanced)
- Offered byUDEMY
JavaScript - The Complete Guide (Beginner + Advanced) at UDEMY Overview
Duration | 53 hours |
Total fee | ₹699 |
Mode of learning | Online |
Difficulty level | Intermediate |
Official Website | Go to Website |
Credential | Certificate |
JavaScript - The Complete Guide (Beginner + Advanced) at UDEMY Highlights
- Compatible on Mobile and TV
- Earn a Cerificate on successful completion
- Get Full Lifetime Access
- Learn from Academind by Maximilian Schwarzmüller
JavaScript - The Complete Guide (Beginner + Advanced) at UDEMY Course details
- Beginner web development students who have no or only little JavaScript experience
- Also developers who know the basics about JavaScript and want to deepen their knowledge
- Advanced JavaScript developers who want to learn more about the nitty-gritty details and dive into advanced concepts
- Everyone interested in learning JavaScript and all about how it works
- JavaScript from scratch - 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!
- JavaScript is THE most important programming language you need to learn as a web developer - and with this course, you make sure that you will not miss a single thing you have to know as a JavaScript developer! This is the most comprehensive and modern course you can find on JavaScript - it's based on all my JavaScript knowledge AND teaching experience . It's both a complete guide , starting with the core basics of the language, as well as an extensive reference of the JavaScript language and environment, ensuring that both newcomers as well as experienced JavaScript developers get a lot out of this course! It's a huge course because it's packed with important knowledge and helpful content. From the core basics, over advanced concepts and JavaScript specialties, all the way up to expert topics like performance optimization and testing - this course has it all. My goal was to create your go-to resource for the JavaScript language, which you can not just use for learning it but also as a resource you can come back to and look up important topics. The course is based on my experience as a long-term JavaScript developer as well as a teacher with more than 1,000,000 students on Udemy as well as on my YouTube channel Academind. It's packed with examples, demos, projects, assignments, quizzes and of course videos - all with the goal of giving you the best possible way of learning JavaScript. What's in the course? This course is obviously packed with content - I therefore strongly recommend that you check out the full course curriculum to get a clear idea of all the topics covered in the course. In general, here's what you'll find in the course: Modern JavaScript from the start: The JavaScript syntax changed over time - in this course, you'll learn the latest syntax from the start (you'll also learn about the old one though, so that you can work in ANY JS project) ALL the Basics: Variables, constants, functions, how scripts are loaded etc Arrays & Objects: We'll explore these very important data structures in great detail Control Structures: Understand how to run code conditionally and in loops A look behind the Scenes: How JavaScript engines work behind the scenes and what that means for us Deep dives into Core Concepts : ALL the special things about JavaScript function, different syntaxes Working with the DOM: How to manipulate web pages dynamically via JavaScript (including deep dives and different use-cases) Events in JavaScript: Learn how to listen to a broad variety of events (e. G. drag & drop) and execute appropriate code Classes & Object-oriented Programming : Learn how to work with classes, prototypes, the " this " keyword, constructor functions and much more Asynchronous and Synchronous Programming: We'll explore callbacks, promises, async/ await and other important tools and language features to execute code correctly Http Requests: Learn how to send Http requests via JavaScript Tooling, Optimizations & Browser Support: Code splitting, producing small code and ensuring that scripts work in all browsers - this matters and hence is covered in great detail Libraries & Frameworks: Learn about libraries like Axios or frameworks like React. Js - why they matter and how to use them Node. Js : Whilst focusing on the browser-side for the majority of the course (because the syntax is the same), we'll also have a dedicated section on Node. Js to learn all about that JS host environment Security & Performance Optimizations: Of course security matters, so does performance - no surprise that both is covered in the course! Automated Testing : Testing manually is hard work and can be unreliable - in this course you'll also get an introduction into automated testing What are the course prerequisites? NO JavaScript knowledge is required - you'll learn it from scratch! You also need NO programming experience other than basic web development knowledge (e. G. how the web works) Basic HTML and CSS knowledge is recommended but not a must-have
JavaScript - The Complete Guide (Beginner + Advanced) at UDEMY Curriculum
Introduction
Introduction
What is JavaScript?
JavaScript in Action!
Join our Online Learning Community
How JavaScript Is Executed
Dynamic vs Weakly Typed Languages
JavaScript Runs In A Host Environment
Course Outline - What Is In The 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
Understanding the Starting Code
Data Types: Numbers & Strings (Text)
Using Constants
More on Strings
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
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
Adding a Re-Usable Function That Uses Objects
undefined, null & NaN
The "typeof" Operator
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
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
Beyond true/ false: "Truthy" and "Falsy" Values
Coercion vs Conversion
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
Working with the "switch-case" Statement
Introducing Loops
The "for" Loop
The "for-of" Loop
The "for-in" Loop
The "while" & "do-while" Loops
Controlling Loops with "break"
Controlling Iterations with "continue"
More Control with Labeled Statements
Error Handling with "try-catch" - An Introduction
Throwing Custom Errors
Working with "try-catch" to Catch & Handle Errors
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
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
Outputting Messages to the User
Default Arguments in Functions
Introducing Rest Parameters ("Rest Operator")
Creating Functions Inside of Functions
Understanding Callback Functions
Working with "bind()"
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
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
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
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
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
The "instanceof" Operator
Built-in Classes
Understanding Object Descriptors
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"
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 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"
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
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)
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.
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
Wrap Up
Useful Resources & Links
JavaScript Tooling & Workflows
Module Introduction
Project Limitations & Why We Need Tools
Workflow Overview
Setting Up a npm Project
Working with npm Packages
Linting with ESLint
Configuring ESLint
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
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
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)