2024 年 JavaScript 从零基础到专家：避开 Udemy 付费坑的实操指南

这门课本质上是一套针对初中级开发者的 JavaScript 体系化教程，核心解决的是“零散知识点”与“真实项目实战”脱节的痛点。很多市面上的课要么只讲语法堆砌，要么直接甩出一堆老旧项目，导致学员听懂了却不会写代码。本课程通过拆解变量、数据类型、逻辑判断等基础概念，并配合大量可运行的代码挑战，旨在让你从完全不懂 JS 过渡到能独立编写前端脚本，处理网页交互逻辑。

资料包怎么用：先配置环境，再死磕基础

拿到资料后，切勿直接点开几十节的视频。请务必先观看《Setting Up Our Code Editor》和《Watch Before You Start!》，确保你的本地开发环境（代码编辑器）配置正确，否则后续练习将寸步难行。对于零基础学员，建议严格按顺序学习：前几节先理解 JS 在网页中的引入方式，紧接着死磕变量声明（let/const）和基础运算符。资料包中的 `course-material-v2.2.zip` 包含了核心讲义 PDF，建议在观看对应视频时同步阅读，特别是关于“运算符优先级”的部分，这是初学者最容易混淆的盲区。

学完能做什么与避坑建议

学完这门课，你应当具备独立搭建简单前端页面的能力，例如制作待办事项清单、简单的数据筛选器或交互式表单，不再依赖现成的模板。资料包中多次出现的 `all-coding-challenges.pdf` 及其对应的视频解决方案，是检验学习成果的关键，请不要跳过。务必在不看视频解答的情况下，先尝试自己编写代码解决挑战，卡壳后再对照视频思路。如果你没有前端框架（如 React、Vue）的基础，请直接跳过课程中涉及 DOM 操作的部分，转而寻找专门的框架课程，因为这门课更侧重原生 JS 逻辑，而非现代工程化开发。

课程目录

课程目录336 集
  • 01 - Welcome, Welcome, Welcome!.mp4
  • 001 Course Structure and Projects.mp4 88.90M
  • 002 course-material-v2.2.zip 26.87M
  • 003 Watch Before You Start!.mp4 40.89M
  • 004 Setting Up Our Code Editor.mp4 49.14M
  • 02 - JavaScript Fundamentals – Part 1.mp4
  • 001 Section Intro.mp4 18.80M
  • 002 Hello World!.mp4 9.49M
  • 003 A Brief Introduction to JavaScript.mp4 50.46M
  • 003 theory-lectures-v2.pdf 29.38M
  • 004 Linking a JavaScript File.mp4 81.75M
  • 005 Values and Variables.mp4 79.96M
  • 007 Data Types.mp4 100.54M
  • 008 let, const and var.mp4 48.26M
  • 009 Basic Operators.mp4 112.38M
  • 010 Operator Precedence.mp4 76.09M
  • 011 all-coding-challenges.pdf 1.88M
  • 013 all-coding-challenges.pdf 1.88M
  • 013 CHALLENGE #1 Video Solution.mp4 32.02M
  • 014 Strings and Template Literals.mp4 59.52M
  • 015 Taking Decisions if else Statements.mp4 63.71M
  • 017 CHALLENGE #2 Video Solution.mp4 34.73M
  • 018 Type Conversion and Coercion.mp4 53.42M
  • 019 Truthy and Falsy Values.mp4 58.00M
  • 020 Equality Operators == vs. ===.mp4 88.44M
  • 021 Boolean Logic.mp4 33.20M
  • 022 Logical Operators.mp4 66.60M
  • 024 CHALLENGE #3 Video Solution.mp4 78.81M
  • 025 The switch Statement.mp4 89.89M
  • 026 Statements and Expressions.mp4 29.43M
  • 027 The Conditional (Ternary) Operator.mp4 54.01M
  • 029 CHALLENGE #4 Video Solution.mp4 36.83M
  • 030 JavaScript Releases ES5, ES6+ and ESNext.mp4 66.79M
  • 03 - JavaScript Fundamentals – Part 2.mp4
  • 001 Section Intro.mp4 12.19M
  • 002 Activating Strict Mode.mp4 42.03M
  • 003 Functions.mp4 104.72M
  • 004 Function Declarations vs. Expressions.mp4 52.26M
  • 005 Arrow Functions.mp4 50.15M
  • 006 Functions Calling Other Functions.mp4 59.39M
  • 007 Reviewing Functions.mp4 97.85M
  • 009 CHALLENGE #1 Video Solution.mp4 86.34M
  • 010 Introduction to Arrays.mp4 131.73M
  • 011 Basic Array Operations (Methods).mp4 83.72M
  • 013 CHALLENGE #2 Video Solution.mp4 44.39M
  • 014 Introduction to Objects.mp4 29.17M
  • 015 Dot vs. Bracket Notation.mp4 142.29M
  • 016 Object Methods.mp4 151.97M
  • 018 CHALLENGE #3 Video Solution.mp4 56.09M
  • 019 Iteration The for Loop.mp4 75.35M
  • 020 Looping Arrays, Breaking and Continuing.mp4 152.70M
  • 021 Looping Backwards and Loops in Loops.mp4 75.19M
  • 022 The while Loop.mp4 78.51M
  • 024 CHALLENGE #4 Video Solution.mp4 79.15M
  • 04 - How to Navigate This Course.mp4
  • 001 Pathways and Section Roadmaps.mp4 63.60M
  • 002 pathways.pdf 4.56M
  • 05 - Developer Skills & Editor Setup.mp4
  • 001 Section Intro.mp4 13.59M
  • 003 Setting up Prettier and VS Code.mp4 102.56M
  • 004 Installing Node.js and Setting Up a Dev Environment.mp4 73.77M
  • 005 Learning How to Code.mp4 94.78M
  • 006 How to Think Like a Developer Become a Problem Solver!.mp4 52.21M
  • 007 Using Google, StackOverflow and MDN.mp4 219.93M
  • 008 Debugging (Fixing Errors).mp4 25.45M
  • 009 Debugging with the Console and Breakpoints.mp4 151.31M
  • 010 Coding Challenge #1.mp4 107.43M
  • 06 - [OPTIONAL] HTML & CSS Crash Course.mp4
  • 001 Section Intro.mp4 13.63M
  • 002 Basic HTML Structure and Elements.mp4 44.50M
  • 003 Attributes, Classes and IDs.mp4 82.30M
  • 004 Basic Styling with CSS.mp4 79.85M
  • 005 Introduction to the CSS Box Model.mp4 140.20M
  • 07 - JavaScript in the Browser DOM and Events Fundamentals.mp4
  • 001 Section Intro.mp4 16.58M
  • 003 PROJECT #1 Guess My Number!.mp4 42.86M
  • 004 What's the DOM and DOM Manipulation.mp4 30.22M
  • 005 Selecting and Manipulating Elements.mp4 54.74M
  • 006 Handling Click Events.mp4 92.96M
  • 007 Implementing the Game Logic.mp4 160.27M
  • 008 Manipulating CSS Styles.mp4 68.51M
  • 009 Coding Challenge #1.mp4 87.91M
  • 010 Implementing Highscores.mp4 59.52M
  • 011 Refactoring Our Code The DRY Principle.mp4 128.23M
  • 012 PROJECT #2 Modal Window.mp4 88.89M
  • 013 Working With Classes.mp4 153.26M
  • 014 Handling an Esc Keypress Event.mp4 95.82M
  • 015 PROJECT #3 Pig Game.mp4 91.70M
  • 016 Rolling the Dice.mp4 102.12M
  • 017 Switching the Active Player.mp4 90.74M
  • 018 Holding Current Score.mp4 177.03M
  • 019 Resetting the Game.mp4 114.78M
  • 08 - How JavaScript Works Behind the Scenes.mp4
  • 001 Section Intro.mp4 32.61M
  • 003 An High-Level Overview of JavaScript.mp4 60.60M
  • 004 The JavaScript Engine and Runtime.mp4 61.63M
  • 005 Execution Contexts and The Call Stack.mp4 81.68M
  • 006 Scope and The Scope Chain.mp4 127.22M
  • 007 Scoping in Practice.mp4 131.34M
  • 008 Variable Environment Hoisting and The TDZ.mp4 50.61M
  • 009 Hoisting and TDZ in Practice.mp4 92.01M
  • 010 The this Keyword.mp4 34.29M
  • 011 The this Keyword in Practice.mp4 82.29M
  • 012 Regular Functions vs. Arrow Functions.mp4 124.17M
  • 013 Primitives vs. Objects (Primitive vs. Reference Types).mp4 68.80M
  • 014 Primitives vs. Objects in Practice.mp4 101.25M
  • 09 - Data Structures, Modern Operators and Strings.mp4
  • 001 Section Intro.mp4 18.90M
  • 003 Destructuring Arrays.mp4 121.65M
  • 005 Destructuring Objects.mp4 170.50M
  • 006 The Spread Operator (...).mp4 177.32M
  • 007 Rest Pattern and Parameters.mp4 146.00M
  • 008 Short Circuiting (&& and ).mp4 117.84M
  • 009 The Nullish Coalescing Operator ().mp4 26.00M
  • 010 Logical Assignment Operators.mp4 68.01M
  • 011 Coding Challenge #1.mp4 149.62M
  • 012 Looping Arrays The for-of Loop.mp4 60.80M
  • 013 Enhanced Object Literals.mp4 63.45M
  • 014 Optional Chaining (.).mp4 129.90M
  • 015 Looping Objects Object Keys, Values, and Entries.mp4 89.04M
  • 016 Coding Challenge #2.mp4 125.27M
  • 017 Sets.mp4 113.08M
  • 018 Maps Fundamentals.mp4 113.19M
  • 019 Maps Iteration.mp4 116.63M
  • 020 Summary Which Data Structure to Use.mp4 48.85M
  • 021 Coding Challenge #3.mp4 92.85M
  • 022 Working With Strings - Part 1.mp4 143.68M
  • 023 Working With Strings - Part 2.mp4 185.90M
  • 024 Working With Strings - Part 3.mp4 192.49M
  • 025 Coding Challenge #4.mp4 139.16M
  • 026 String Methods Practice.mp4 154.96M
  • 10 - A Closer Look at Functions.mp4
  • 001 Section Intro.mp4 16.78M
  • 003 Default Parameters.mp4 33.84M
  • 004 How Passing Arguments Works Value vs. Reference.mp4 81.75M
  • 005 First-Class and Higher-Order Functions.mp4 30.19M
  • 006 Functions Accepting Callback Functions.mp4 114.82M
  • 007 Functions Returning Functions.mp4 34.89M
  • 008 The call and apply Methods.mp4 127.86M
  • 009 The bind Method.mp4 168.76M
  • 010 Coding Challenge #1.mp4 155.36M
  • 011 Immediately Invoked Function Expressions (IIFE).mp4 46.47M
  • 012 Closures.mp4 110.73M
  • 013 More Closure Examples.mp4 96.88M
  • 014 Coding Challenge #2.mp4 33.46M
  • 11 - Working With Arrays.mp4
  • 001 Section Intro.mp4 18.33M
  • 003 Simple Array Methods.mp4 118.23M
  • 004 The new at Method.mp4 15.86M
  • 005 Looping Arrays forEach.mp4 102.00M
  • 006 forEach With Maps and Sets.mp4 31.62M
  • 007 PROJECT Bankist App.mp4 59.49M
  • 008 Creating DOM Elements.mp4 168.75M
  • 009 Coding Challenge #1.mp4 68.70M
  • 010 Data Transformations map, filter, reduce.mp4 20.66M
  • 011 The map Method.mp4 121.23M
  • 012 Computing Usernames.mp4 93.87M
  • 013 The filter Method.mp4 41.45M
  • 014 The reduce Method.mp4 145.73M
  • 015 Coding Challenge #2.mp4 77.45M
  • 016 The Magic of Chaining Methods.mp4 166.69M
  • 017 Coding Challenge #3.mp4 31.03M
  • 018 The find Method.mp4 40.16M
  • 019 Implementing Login.mp4 212.67M
  • 020 Implementing Transfers.mp4 193.12M
  • 021 The findIndex Method.mp4 111.06M
  • 022 some and every.mp4 82.26M
  • 023 flat and flatMap.mp4 42.56M
  • 024 Sorting Arrays.mp4 150.58M
  • 025 More Ways of Creating and Filling Arrays.mp4 125.17M
  • 026 Summary Which Array Method to Use.mp4 30.99M
  • 027 Array Methods Practice.mp4 220.28M
  • 028 Coding Challenge #4.mp4 192.26M
  • 12 - Numbers, Dates, Intl and Timers.mp4
  • 001 Section Intro.mp4 17.73M
  • 003 Converting and Checking Numbers.mp4 113.52M
  • 004 Math and Rounding.mp4 144.04M
  • 005 The Remainder Operator.mp4 68.48M
  • 006 Numeric Separators.mp4 18.54M
  • 007 Working with BigInt.mp4 66.23M
  • 008 Creating Dates.mp4 95.41M
  • 009 Adding Dates to Bankist App.mp4 223.42M
  • 010 Operations With Dates.mp4 127.54M
  • 011 Internationalizing Dates (Intl).mp4 158.98M
  • 012 Internationalizing Numbers (Intl).mp4 176.25M
  • 013 Timers setTimeout and setInterval.mp4 91.89M
  • 014 Implementing a Countdown Timer.mp4 257.83M
  • 13 - Advanced DOM and Events.mp4
  • 001 Section Intro.mp4 22.83M
  • 003 PROJECT Bankist Website.mp4 83.14M
  • 004 How the DOM Really Works.mp4 49.17M
  • 005 Selecting, Creating, and Deleting Elements.mp4 173.19M
  • 006 Styles, Attributes and Classes.mp4 187.31M
  • 007 Implementing Smooth Scrolling.mp4 132.88M
  • 008 Types of Events and Event Handlers.mp4 77.72M
  • 009 Event Propagation Bubbling and Capturing.mp4 22.73M
  • 010 Event Propagation in Practice.mp4 156.32M
  • 011 Event Delegation Implementing Page Navigation.mp4 175.48M
  • 012 DOM Traversing.mp4 116.95M
  • 013 Building a Tabbed Component.mp4 233.98M
  • 014 Passing Arguments to Event Handlers.mp4 185.85M
  • 015 Implementing a Sticky Navigation The Scroll Event.mp4 80.27M
  • 016 A Better Way The Intersection Observer API.mp4 213.58M
  • 017 Revealing Elements on Scroll.mp4 133.19M
  • 018 Lazy Loading Images.mp4 191.55M
  • 019 Building a Slider Component Part 1.mp4 277.07M
  • 020 Building a Slider Component Part 2.mp4 278.49M
  • 021 Lifecycle DOM Events.mp4 74.94M
  • 022 Efficient Script Loading defer and async.mp4 85.51M
  • 14 - Object-Oriented Programming (OOP) With JavaScript.mp4
  • 001 Section Intro.mp4 23.59M
  • 003 What is Object-Oriented Programming.mp4 108.78M
  • 004 OOP in JavaScript.mp4 48.96M
  • 005 Constructor Functions and the new Operator.mp4 79.07M
  • 006 Prototypes.mp4 111.15M
  • 007 Prototypal Inheritance and The Prototype Chain.mp4 61.84M
  • 008 Prototypal Inheritance on Built-In Objects.mp4 133.85M
  • 009 Coding Challenge #1.mp4 51.57M
  • 010 ES6 Classes.mp4 65.24M
  • 011 Setters and Getters.mp4 102.72M
  • 012 Static Methods.mp4 57.64M
  • 013 Object.create.mp4 73.49M
  • 014 Coding Challenge #2.mp4 48.43M
  • 015 Inheritance Between Classes Constructor Functions.mp4 139.09M
  • 016 Coding Challenge #3.mp4 84.00M
  • 017 Inheritance Between Classes ES6 Classes.mp4 73.27M
  • 018 Inheritance Between Classes Object.create.mp4 35.56M
  • 019 Another Class Example.mp4 73.89M
  • 020 Encapsulation Protected Properties and Methods.mp4 55.81M
  • 021 Encapsulation Private Class Fields and Methods.mp4 133.34M
  • 022 Chaining Methods.mp4 40.72M
  • 023 ES6 Classes Summary.mp4 50.03M
  • 024 Coding Challenge #4.mp4 72.52M
  • 15 - Mapty App OOP, Geolocation, External Libraries, and More!.mp4
  • 001 Section Intro.mp4 20.55M
  • 003 Project Overview.mp4 66.22M
  • 004 How to Plan a Web Project.mp4 68.41M
  • 005 Using the Geolocation API.mp4 54.99M
  • 006 Displaying a Map Using Leaflet Library.mp4 132.32M
  • 007 Displaying a Map Marker.mp4 193.90M
  • 008 Rendering Workout Input Form.mp4 155.83M
  • 009 Project Architecture.mp4 50.04M
  • 010 Refactoring for Project Architecture.mp4 220.78M
  • 011 Managing Workout Data Creating Classes.mp4 139.58M
  • 012 Creating a New Workout.mp4 300.75M
  • 013 Rendering Workouts.mp4 236.89M
  • 014 Move to Marker On Click.mp4 190.92M
  • 015 Working with localStorage.mp4 248.83M
  • 016 Final Considerations.mp4 32.49M
  • 16 - Asynchronous JavaScript Promises, AsyncAwait, and AJAX.mp4
  • 001 Section Intro.mp4 19.45M
  • 003 Asynchronous JavaScript, AJAX and APIs.mp4 87.76M
  • 005 Our First AJAX Call XMLHttpRequest.mp4 131.45M
  • 006 [OPTIONAL] How the Web Works Requests and Responses.mp4 64.64M
  • 007 Welcome to Callback Hell.mp4 90.80M
  • 008 Promises and the Fetch API.mp4 41.50M
  • 009 Consuming Promises.mp4 55.75M
  • 010 Chaining Promises.mp4 56.37M
  • 011 Handling Rejected Promises.mp4 117.43M
  • 012 Throwing Errors Manually.mp4 137.50M
  • 013 Coding Challenge #1.mp4 157.47M
  • 014 Asynchronous Behind the Scenes The Event Loop.mp4 104.05M
  • 015 The Event Loop in Practice.mp4 42.68M
  • 016 Building a Simple Promise.mp4 109.82M
  • 017 Promisifying the Geolocation API.mp4 89.25M
  • 018 Coding Challenge #2.mp4 127.04M
  • 019 Consuming Promises with AsyncAwait.mp4 103.22M
  • 020 Error Handling With try...catch.mp4 92.09M
  • 021 Returning Values from Async Functions.mp4 103.62M
  • 022 Running Promises in Parallel.mp4 78.10M
  • 023 Other Promise Combinators race, allSettled and any.mp4 84.18M
  • 024 Coding Challenge #3.mp4 142.82M
  • 17 - Modern JavaScript Development Modules, Tooling, and Functional.mp4
  • 001 Section Intro.mp4 16.26M
  • 003 An Overview of Modern JavaScript Development.mp4 30.84M
  • 004 An Overview of Modules in JavaScript.mp4 81.12M
  • 005 Exporting and Importing in ES6 Modules.mp4 126.03M
  • 006 Top-Level await (ES2022).mp4 114.49M
  • 007 The Module Pattern.mp4 72.62M
  • 008 CommonJS Modules.mp4 23.96M
  • 009 A Brief Introduction to the Command Line.mp4 64.28M
  • 010 Introduction to NPM.mp4 141.86M
  • 011 Bundling With Parcel and NPM Scripts.mp4 184.44M
  • 012 Configuring Babel and Polyfilling.mp4 156.85M
  • 013 Review Writing Clean and Modern JavaScript.mp4 24.64M
  • 014 Let's Fix Some Bad Code Part 1.mp4 215.51M
  • 015 Declarative and Functional JavaScript Principles.mp4 65.18M
  • 016 Let's Fix Some Bad Code Part 2.mp4 255.53M
  • 18 - Forkify App Building a Modern Application.mp4
  • 001 Section Intro.mp4 19.95M
  • 003 Project Overview and Planning (I).mp4 74.52M
  • 005 Loading a Recipe from API.mp4 139.42M
  • 006 Rendering the Recipe.mp4 231.23M
  • 007 Listening For load and hashchange Events.mp4 98.48M
  • 008 The MVC Architecture.mp4 74.90M
  • 009 Refactoring for MVC.mp4 275.81M
  • 010 Helpers and Configuration Files.mp4 127.66M
  • 011 Event Handlers in MVC Publisher-Subscriber Pattern.mp4 93.67M
  • 012 Implementing Error and Success Messages.mp4 88.77M
  • 013 Implementing Search Results - Part 1.mp4 184.75M
  • 014 Implementing Search Results - Part 2.mp4 252.44M
  • 015 Implementing Pagination - Part 1.mp4 101.44M
  • 016 Implementing Pagination - Part 2.mp4 297.09M
  • 017 Project Planning II.mp4 17.12M
  • 018 Updating Recipe Servings.mp4 225.81M
  • 019 Developing a DOM Updating Algorithm.mp4 293.79M
  • 020 Implementing Bookmarks - Part 1.mp4 236.29M
  • 021 Implementing Bookmarks - Part 2.mp4 160.06M
  • 022 Storing Bookmarks With localStorage.mp4 167.63M
  • 023 Project Planning III.mp4 14.54M
  • 024 Uploading a New Recipe - Part 1.mp4 147.50M
  • 025 Uploading a New Recipe - Part 2.mp4 320.70M
  • 026 Uploading a New Recipe - Part 3.mp4 185.83M
  • 027 Wrapping Up Final Considerations.mp4 91.90M
  • 19 - Setting Up Git and Deployment.mp4
  • 001 Section Intro.mp4 15.18M
  • 003 Simple Deployment With Netlify.mp4 63.01M
  • 004 Setting Up Git and GitHub.mp4 55.29M
  • 005 Git Fundamentals.mp4 126.94M
  • 006 Pushing to GitHub.mp4 62.06M
  • 007 Setting Up Continuous Integration With Netlify.mp4 74.54M
  • 20 - The End!.mp4
  • 001 Where to Go from Here.mp4 64.52M
  • 21 - [LEGACY] Access the Old Course.mp4
  • 001 course-structure.pdf 79.54kb
  • 001 Section-01-Course-Introduction.zip 17.13M
  • 001 Section-02-JavaScript-Basics.zip 344.91M
  • 001 Section-03-How-JavaScript-Works.zip 70.92M
  • 001 Section-04-DOM-Manipulation.zip 214.79M
  • 001 Section-05-Objects-and-Functions.zip 228.09M
  • 001 Section-06-The-Budget-App-Project.zip 505.22M
  • 001 Section-07-Intro-to-ES6-ES2015.zip 290.75M
  • 001 Section-08-Asynchronous-JavaScript.zip 134.20M
  • 001 Section-09-Forkify-Project.zip 738.44M
  • 001 Section-10-Conclusion.zip 6.64M
  • 001 Section-11-Node.js-Crash-Course.zip 133.08M