资源介绍
视频数量：120个
总时长：7小时53分
课程介绍：
两周精通前端交互编程：从零到独立开发
打开浏览器，点开一个网页，点击按钮、拖动图片、输入搜索词，页面立刻有了反应。这些看起来理所当然的交互，背后都是JavaScript这门脚本语言在干活。如果你学过HTML和CSS，能把页面做得漂漂亮亮，但总觉得缺点什么，缺的就是让页面活起来的那口气。这门课要解决的正是这个问题：带你从零开始，用大约两周的时间，把网页交互编程从头到尾啃下来。
课程总共120个视频，总时长不到8小时。别看时长不长，内容塞得很满。设计者很清楚初学者会卡在哪里，每一节都不啰嗦，讲完概念立刻上手写代码，几乎每个知识点后面都跟着练习题，做完再看解答，节奏刚好。
如果你之前连HTML和CSS都没碰过，也不用担心。课程专门给完全的零基础准备了一个前端三件套速成章节，从什么是网页结构语言讲起，怎么创建第一个网页，怎么用代码编辑器，怎么装上实时刷新插件，再到图片标签、链接、列表、注释，一步步带你做出第一个小项目。后半段切入样式表，语法、颜色、类和标识、高度宽度、外边距内边距、盒模型、display属性，全部覆盖。整章大约24个视频，看完你至少能看懂网页的结构，不会在后面的脚本部分对着文档对象模型一脸懵。
正式进入脚本部分之前，先做准备工作。带你安装开发工具，写下人生第一行代码，学会把脚本放到单独的文件里，再用浏览器的控制台调试。看着自己写的代码在控制台里打出第一句话，那种感觉挺奇妙的，算是正式入门了。
接下来是变量、数据类型和运算符。你会学到怎么声明变量，脚本语言有哪些数据类型，怎么查看类型，算术运算符怎么工作，以及类型转换和强制转换的坑。这一章的练习题是关于变量和运算符的，做完之后你会发现，写一些简单的小计算程序已经不在话下。
然后是逻辑和控制流。比较运算符、if语句、嵌套if、逻辑运算符、三元运算符，一样样来。练习题也很接地气，做一个网店折扣计算器，根据购买金额算出最终价格；做一个票价计算器，根据年龄判断该买哪种票；还有一个用三元运算符判断能不能开车的练习。这些题目做完，你会对程序怎么根据不同情况走不同分支有非常具体的体感。
循环这一章讲while循环怎么写、for循环怎么用、break和continue分别在什么场景下出场。练习题是统计偶数但跳过某个特定的数字，这种细节处理正好是新手最容易栽跟头的地方。
函数这一章特别重要。什么是函数、怎么创建第一个函数、作用域是怎么回事、参数和实参的区别、return语句怎么用、提升到底是什么鬼、函数声明和函数表达式有什么不同，最后是回调函数。练习题包括自定义范围打印器和一个用回调函数模拟登录流程的小项目。回调函数这一节，是后面理解异步编程的基石。
字符串这一章聚焦模板字面量和字符串插值，让你告别丑陋的字符串拼接。字符串的各种方法、属性、方法链式调用，一节课一个一个拆开讲。练习题是一个缩写生成器，比如把一段长句子变成首字母缩写，做完会对字符串处理建立起信心。
数组和对象分别用两章讲完。数组部分从数组是什么开始，怎么添加删除元素、数组的各种方法、引用类型和原始类型的区别（这个概念特别容易混淆）、怎么把字符串转成数组、数组和循环怎么配合、forEach循环怎么用。对象部分讲什么是对象、怎么创建、修改、遍历对象、对象的方法和this关键字、拓展运算符，最后是数组里嵌套对象这种实际开发中非常常见的结构。
高级数组方法这一章被很多人视为分水岭。map、filter、reduce这三个方法号称是数组处理的三剑客，学会之后处理数据会轻松很多。每个方法都配了一个练习：map配合定向折扣、filter实现按名称或分类搜索产品、reduce统计库存数量。把这些做完，你会发现自己写代码的效率有了明显提升。
从这一章开始，课程进入浏览器交互部分。文档对象模型这一章带你认识脚本在浏览器里是怎么运行的、怎么修改文档结构、怎么用各种方法选择页面元素（单个选择和批量选择）、怎么操作元素属性、怎么通过类名和类列表控制样式。这一章配了完整的示例代码，跟着敲一遍就能上手。
事件与交互让网页真正活起来。点击属性怎么用、事件的更多细节、事件监听方法是现代开发的标准做法、事件对象是什么、this在事件处理函数里的特殊含义。每个视频都不长，但讲的都是实际开发中绕不开的知识点。
第一个实战项目是经典的饼干点击小游戏。从项目介绍开始，搭建项目结构，实现点击饼干增加计数，用定时器实现每秒自动生成饼干，搭一个商店功能让玩家用饼干购买升级，最后把数据存到浏览器里，整个流程走一遍。学完这个项目，你会对定时器、事件监听、数据持久化这些概念有非常具体的认识。
接下来是文档对象模型的遍历。怎么选择父元素、子元素、兄弟元素，怎么选择后代和祖先。这一章内容相对精炼，但都是实际开发中经常需要用到的技巧。
处理用户输入和表单这一章教你读取用户输入、认识输入事件、submit事件怎么处理。练习题特别实用，做一个实时密码安全检查，根据用户输入的内容实时判断密码强度并给出提示，这种功能在注册页面太常见了。
动态创建和删除元素这一章讲怎么从页面上移除元素、怎么创建新元素并添加到文档结构里。这一章虽然视频不多，但是后面所有项目的基础。
迷你项目合集练习两个常见的界面功能。第一个是阅读更多按钮，文字太长时只显示一部分，点一下展开全部内容，再点一下收起。第二个是搜索栏，而且给出了两种解决方案，精确字符串匹配和单词级别的搜索。两种方案各有适用场景，对比着学能加深理解。
第二个大项目是待办事项应用。从项目介绍、搭建、样式、自定义复选框、添加待办事项、动态生成HTML代码、保存待办事项、删除待办事项、记住勾选状态，整个流程一口气做完。这个项目把前面学到的所有知识，文档操作、事件、表单、本地存储，全部串了起来，做完之后你会发现自己真的能写出一个能用的应用了。
最后一个项目是笔记应用。HTML结构怎么搭、怎么创建新笔记、怎么更新笔记，最后还要加一个暗黑模式切换。这个项目比待办事项应用更复杂，涉及的逻辑也更多，比如编辑现有笔记的实现、数据的增删改查等。做完这个，你对前端开发的整体认知会再上一个台阶。
整个课程的设计逻辑非常清晰：从环境搭建和前端三件套基础开始，到脚本语法，再到数据处理和文档对象模型操作，最后用三个递进的项目把所有知识融会贯通。不跳步骤，不留死角，跟着走下来，你会发现自己真的能用这门脚本语言写出能跑能用的网页应用。
完全没碰过编程、想从零开始学前端的人可以跟着速成部分入门；已经会搭静态页面、想突破到交互层面的开发者，这门课能从语法到项目帮你系统补齐；学生或者转行者想做出能写到简历里的作品，这三个递进的项目正好可以练手。学完之后，你不会是一个只会背概念的程序员，而是一个真正写过代码、改过bug、把想法变成可运行程序的人。这门技术不会让你白学，前端、后端、移动端、桌面应用，它都能用得上，是一个真正能陪你走很远的方向。