课程定位与核心问题

JavaScript 生态庞大且碎片化严重，初学者往往陷入“看了教程就会，脱离视频就废”的困境。这门课程的核心价值在于将语言语法与工程实践深度绑定。它不满足于罗列语法规则，而是通过构建一个真实的端到端项目，帮助开发者解决从“懂语法”到“能开发”之间的鸿沟。课程涵盖了从环境搭建、基础数据类型、逻辑控制到函数、数组及对象的完整链路，并穿插编码挑战，确保每个概念都能在实践中落地。这种“学练结合”的结构，是填补知识盲区、建立代码手感的有效手段。

适读人群与前置建议

本课程适合具备基础编程逻辑但 JavaScript 经验不足的学习者，尤其是需要从 HTML/CSS 静态页面转向动态交互开发的 Web 前端工程师，或希望补全 JS 底层逻辑的后端开发者。建议先看“课程介绍”与“工具设置”部分，熟悉 VS Code 或 Brackets 等编辑器的配置及 Chrome 开发者工具的使用。紧接着重点攻克“语言基础”章节，特别是变量类型转换、操作符优先级、数组方法（如 map/filter/reduce）以及对象属性的操作，这是后续处理复杂业务逻辑的基石。务必完成每章后的编码挑战，不要直接观看解答，先独立思考实现方案。

实战路径与成果预期

学完本课程后，你将能够独立构建基于 DOM 操作和事件处理的标准 Web 应用，理解 JavaScript 的执行上下文与数据流向。资料包中的代码片段和项目文件应作为对照参考，而非简单的复制对象。建议采用“阅读源码-复现逻辑-重构优化”三步法配合练习：先运行官方项目观察效果，再关闭视频尝试复现代码，最后尝试修改功能（如增加表单验证、调整 UI 逻辑）以检验掌握程度。通过将分散的语法点串联进完整项目，你可以建立起可复用的开发思维，为后续学习框架（如 Vue、React）打下坚实的地基。

课程目录

01 Course Introduction
001 Welcome to This Course.mp4 86.11M
004 Setting up Our Tools Brackets and Google Chrome.mp4 13.27M
02 JavaScript Language Basics
005 Section Intro.mp4 24.73M
007 Introduction to JavaScript.mp4 9.60M
008 Getting Started with JavaScript.mp4 10.61M
009 Variables and Data Types.mp4 18.32M
010 Variable Mutation and Type Coercion.mp4 34.87M
011 Operators.mp4 38.79M
012 If else Statements.mp4 21.95M
013 Boolean Logic and Switch Statements.mp4 35.62M
014 Coding Challenge 1.mp4 5.61M
015 Coding Challenge 1 Solution.mp4 35.26M
016 Functions.mp4 36.78M
017 Statements and Expressions.mp4 7.53M
018 Arrays.mp4 25.88M
019 Objects and Properties.mp4 21.82M
020 Objects and Methods.mp4 38.18M
021 Loops and Iteration.mp4 43.12M
022 Coding Challenge 2.mp4 8.36M
023 Coding Challenge 2 Solution.mp4 39.72M
024 Important Note ES5 ES6 ES2015 and ES2016.mp4 11.96M
03 How JavaScript Works Behind the Scenes
025 Section Intro.mp4 32.96M
027 How Our Code Is Executed JavaScript Parsers and Engines.mp4 6.08M
028 Execution Contexts and the Execution Stack.mp4 12.09M
029 Execution Contexts in Detail Creation and Execution Phases and Hoisting.mp4 9.23M
030 Hoisting in Practice.mp4 28.50M
031 Scoping and the Scope Chain.mp4 27.93M
032 The this Keyword.mp4 5.16M
033 The this Keyword in Practice.mp4 26.64M
04 JavaScript in the Browser DOM Manipulation and Events
034 Section Intro.mp4 20.58M
036 The DOM and DOM Manipulation.mp4 5.17M
037 5-Minute HTML and CSS Crash Course.mp4 21.04M
038 Project Setup and Details.mp4 14.29M
039 First DOM Access and Manipulation.mp4 52.94M
040 Events and Event Handling Rolling the Dice.mp4 48.58M
041 Updating Scores and Changing the Active Player.mp4 42.31M
042 Implementing Our Hold Function and the DRY Principle.mp4 58.98M
043 Creating a Game Initialization Function.mp4 41.63M
044 Finishing Touches State Variables.mp4 29.43M
045 Coding Challenge 3.mp4 9.59M
046 Coding Challenge 3 Solution Part 1.mp4 19.45M
047 Coding Challenge 3 Solution Part 2.mp4 27.33M
048 Coding Challenge 3 Solution Part 3.mp4 29.43M
05 Advanced JavaScript Objects and Functions
049 Section Intro.mp4 29.97M
051 Everything Is an Object Inheritance and the Prototype Chain.mp4 21.53M
052 Creating Objects Function Constructors.mp4 32.25M
053 The Prototype Chain in the Console.mp4 23.71M
054 Creating Objects Object.create.mp4 16.92M
055 Primitives vs. Objects.mp4 20.02M
056 First Class Functions Passing Functions as Arguments.mp4 33.82M
057 First Class Functions Functions Returning Functions.mp4 21.70M
058 Immediately Invoked Function Expressions IIFE.mp4 14.91M
059 Closures.mp4 41.55M
060 Bind Call and Apply.mp4 43.34M
061 Coding Challenge 4.mp4 18.10M
062 Coding Challenge 4 Solution Part 1.mp4 54.22M
063 Coding Challenge 4 Solution Part 2.mp4 48.73M
06 Putting It All Together The Budget App Project
064 Section Intro.mp4 33.99M
066 Project Setup and Details.mp4 14.48M
067 Project Planning and Architecture Step 1.mp4 12.76M
068 Implementing the Module Pattern.mp4 35.72M
069 Setting up the First Event Listeners.mp4 39.07M
070 Reading Input Data.mp4 50.33M
071 Creating an Initialization Function.mp4 16.81M
072 Creating Income and Expense Function Constructors.mp4 22.38M
073 Adding a New Item to Our Budget Controller.mp4 48.00M
074 Adding a New Item to the UI.mp4 69.67M
075 Clearing Our Input Fields.mp4 36.00M
076 Updating the Budget Controller.mp4 31.34M
077 Updating the Budget Budget Controller.mp4 63.06M
078 Updating the Budget UI Controller.mp4 49.88M
079 Project Planning and Architecture Step 2.mp4 5.93M
080 Event Delegation.mp4 8.69M
081 Setting up the Delete Event Listener Using Event Delegation.mp4 66.14M
082 Deleting an Item from Our Budget Controller.mp4 59.01M
083 Deleting an Item from the UI.mp4 33.42M
084 Project Planning and Architecture Step 3.mp4 4.82M
085 Updating the Percentages Controller.mp4 14.09M
086 Updating the Percentages Budget Controller.mp4 50.71M
087 Updating the Percentages UI Controller.mp4 39.26M
088 Formatting Our Budget Numbers String Manipulation.mp4 59.20M
089 Displaying the Current Month and Year.mp4 26.64M
090 Finishing Touches Improving the UX.mp4 33.83M
091 Weve Made It Final Considerations.mp4 4.00M
07 Get Ready for the Future ES6 ES2015
092 Section Intro.mp4 15.04M
094 Whats new in ES6 ES2015.mp4 19.11M
095 Variable Declarations with let and const.mp4 40.43M
096 Blocks and IIFEs.mp4 8.85M
097 Strings in ES6 ES2015.mp4 25.01M
098 Arrow Functions Basics.mp4 19.72M
099 Arrow Functions Lexical this Keyword.mp4 45.71M
100 Destructuring.mp4 19.04M
101 Arrays in ES6 ES2015.mp4 42.22M
102 The Spread Operator.mp4 23.66M
103 Rest Parameters.mp4 31.59M
104 Default Parameters.mp4 20.13M
105 Maps.mp4 52.06M
106 Classes.mp4 25.51M
107 Classes with Subclasses.mp4 45.63M
108 Coding Challenge 5.mp4 9.02M
109 Coding Challenge 5 Solution.mp4 87.11M
110 How to use ES2015 ES6 Today.mp4 56.45M
08 Final Course Exam 30 Questions to Test Your JavaScript Knowledge
09 Conclusion
112 Where to Go from Here.mp4 44.04M