为什么你需要这门课
很多前端初学者卡在 HTML 和 CSS 的静态页面之后，面对“动态”二字无从下手。表单提交后页面整体刷新、交互逻辑写得一团乱麻、或者只会套用现成的库却不懂底层原理，是常见的能力缺口。本课程不聊抽象概念，而是直接切入动态网页最核心的痛点：如何用代码精确控制页面元素的行为与状态。它解决的是从“静态排版”到“动态交互”的转化问题，重点训练变量、函数、条件判断这些基础语法在实际业务场景中的落地能力，比如实现小说网站换肤，或者处理复杂的全选、反选与联动选择逻辑。
学习门槛与顺序建议
这门课适合零基础上手或仅有 HTML/CSS 基础的学习者，旨在补齐 JavaScript 语法薄弱、缺乏实战项目经验的短板。建议严格遵循目录顺序推进，前三章是地基，切勿跳跃。
务必先啃下“JS 基础入门”部分：从第一个 JS 程序开始，深入理解变量作用域和函数定义，熟练掌握条件判断 if 语句。特别要重视“小说网站换肤”案例，这是将语法转化为可视效果的典型练习。接着进入“JS 基础应用”阶段，重点攻克事件提取、样式属性操作以及全选/反选/联动选择的功能实现。这部分内容琐碎但高频，是日常开发中处理表单和用户交互的必备技能。如果遇到理解困难，不要死磕，先跟着敲一遍代码跑通效果，再回头补理论。
学完产出与资料用法
完成本课程后，你应该能够独立编写无框架依赖的纯原生 JavaScript 代码，实现常见的网页交互效果。具体包括：熟练操作 DOM 元素，通过脚本动态修改 CSS 样式和 HTML 属性；能够处理鼠标点击、滑过等事件，实现显隐、换肤等交互；能够编写逻辑处理多选框的全选、反选及级联选择功能。
在学习过程中，资料包只是辅助，核心在于动手。每看完一个知识点，立刻在本地环境复现案例代码，尝试修改参数观察效果变化，比如改变换肤的颜色值或调整全选的逻辑分支。对于全选、反选等功能，建议先自己写一遍，再对照课程解析检查逻辑漏洞，特别是事件绑定和循环遍历部分。通过这种针对性练习，才能真正掌握动态网站开发的基础技能，为后续学习 Vue、React 等框架打下坚实基础。
课程目录
1-1 [JS基础入门] JavaScript简介 (02:44) 1-2 [JS基础入门] 第一个js程序 (11:35) 1-3 [JS基础入门] 鼠标滑过div显隐功能实现 (08:14) 1-4 [JS基础入门] 变量和函数 (11:59) 1-5 [JS基础入门] 条件判断if (10:52) 1-6 [JS基础入门] 小说网站换肤 (13:46) 1-7 [JS基础入门] 函数参数 (11:29) 2-1 [JS基础应用] 提取行间事件 (16:03) 2-2 [JS基础应用] 全选功能实现 (18:12) 2-3 [JS基础应用] js操作样式和属性的两种方法 (13:23) 2-4 [JS基础应用] 反选功能实现 (09:37) 2-5 [JS基础应用] 全选不选和反选功能实现 (05:02) 2-6 [JS基础应用] 联动选择 (09:16) 2-7 [JS基础应用] 选项卡实现 (24:07) 2-8 [JS基础应用] JS语言基础-数据类型与类型转换 (22:48) 2-9 [JS基础应用] JS语言基础-运算符 (18:32) 2-10 [JS基础应用] JS语言基础-流程控制 (26:08) 2-11 [JS基础应用] JS语言基础-函数返回值 (13:35) 2-12 [JS基础应用] 京东双色球 (20:26) 2-13 [JS基础应用] 定时器基础知识 (13:01) 2-14 [JS基础应用] 文字时钟 (14:05) 2-15 [JS基础应用] 新浪延迟广告 (06:00) 2-16 [JS基础应用] 自动播放选项卡 (19:18) 2-17 [JS基础应用] 定时器中this的问题 (03:45) 2-18 [JS基础应用] 代码调试和规范 (09:39) 2-19 [JS基础应用] 解决命名冲突问题 (13:41) 2-20 [JS基础应用] 一道面试题引发的血案 (04:30) 2-21 [JS基础应用] i的问题解决方案（1） (06:27) 2-22 [JS基础应用] i的问题解决方案（2） (03:45) 3-1 [BOM&BOM应用] JS的组成部分 (04:24) 3-2 [BOM&BOM应用] DOM常见操作-增删改查 (14:55) 3-3 [BOM&BOM应用] js操作元素内容和属性的两种方法 (06:09) 3-4 [BOM&BOM应用] 上移下移功能实现 (06:33) 3-5 [BOM&BOM应用] 留言本功能实现 (04:03) 3-6 [BOM&BOM应用] 右下角悬浮框功能实现 (08:14) 3-7 [BOM&BOM应用] 选项卡实现 (07:25) 3-8 [BOM&BOM应用] 任务清单功能实现 (05:35) 3-9 [BOM&BOM应用] 数组常用方法 (15:49) 3-10 [BOM&BOM应用] 字符串常用方法 (03:01) 3-11 [BOM&BOM应用] json和字符串互转 (06:06) 3-12 [BOM&BOM应用] BOM介绍 (01:46) 3-13 [BOM&BOM应用] 常见各种窗口 (02:02) 3-14 [BOM&BOM应用] JS运行代码 (04:37) 3-15 [BOM&BOM应用] 浏览器类型检测 (02:20) 3-16 [BOM&BOM应用] 天猫吸顶条实现 (09:07) 3-17 [BOM&BOM应用] 文字输入框提示实现 (03:01) 3-18 [BOM&BOM应用] 图片延迟加载 (03:35) 3-19 [BOM&BOM应用] 瀑布流实现 (07:50) 4-1 [JS事件对象与应用] 事件对象简介 (10:13) 4-2 [JS事件对象与应用] 获取点击位置 (02:43) 4-3 [JS事件对象与应用] div跟随鼠标效果 (03:17) 4-4 [JS事件对象与应用] 禁止保存 (05:41) 4-5 [JS事件对象与应用] 阻止复制 (02:30) 4-6 [JS事件对象与应用] 自定义右键菜单 (02:05) 4-7 [JS事件对象与应用] 仿QQ发送消息 (02:17) 4-8 [JS事件对象与应用] 拖拽 (09:47) 4-9 [JS事件对象与应用] 限制范围拖拽 (02:41) 4-10 [JS事件对象与应用] 磁性拖拽 (02:20) 4-11 [JS事件对象与应用] 半透明拖拽 (05:20) 5-1 [JS运动基础] 运动核心原理 (13:28) 5-2 [JS运动基础] 运动幻灯片效果实现 (02:14) 5-3 [JS运动基础] jiathis效果实现 (02:18) 5-4 [JS运动基础] 透明度运动效果实现 (02:40) 5-5 [JS运动基础] 多物体运动效果实现 (02:35) 5-6 [JS运动基础] 多样式运动 (03:16) 5-7 [JS运动基础] 链式运动 (03:16) 5-8 [JS运动基础] 加速减速运动 (07:35) 5-9 [JS运动基础] 动画库封装 (03:05) 5-10 [JS运动基础] 手风琴效果实现 (04:45) 5-11 [JS运动基础] 京东无缝滚动效果实现 (07:29) 5-12 [JS运动基础] Infinite运动效果实现 (03:21) 5-13 [JS运动基础] 网易幻灯片效果实现 (03:48)
