先判断这门课值不值得你花时间
这门 JavaScript 课瞄准的是一个非常具体的工作场景:当你需要让网页动起来、响应用户点击、或者动态修改页面内容时,你不再只能看着静态的 HTML 和 CSS 发呆。很多做后台开发、设计、甚至运营的人,经常会遇到要改一个前端表单验证、或者给页面加个简单交互的需求,但每次都得求助于前端同事。这门课解决的就是这种“卡在门槛外”的尴尬。它没有一上来就灌输晦涩的底层原理,而是直接教你拿到页面元素、修改内容和属性。如果你是连变量和函数都没接触过的纯小白,或者想转行做前端但被各种大而全的教程劝退过,这份资料的基础铺垫很适合你。但如果你已经能熟练用框架写组件,这套内容对你来说就太浅了,没必要浪费时间。
建议的观看顺序与重点板块
拿到资料后,不要按顺序一集一集死磕,建议先跳到“尝试使用 JavaScript”这一组实操内容。这几节是整门课的核心骨架,它带着你在浏览器控制台里直接写代码,教你怎么精准抓取页面上的某个标签,怎么改它的文字和样式。把这部分跑通,你就能建立起最直接的成就感。看完实操再回头去补前面的基础概念和课程安排,你会更清楚每个知识点在实际操作中对应哪一步。尤其是控制台那一节,虽然篇幅不长,但它是你以后独立写代码时排查错误最依赖的工具,务必自己动手敲几遍,不要只看视频里的演示。
资料怎么配合练习以及学完能做什么
视频资料最大的坑就是“看懂了但手不会”。正确的用法是:准备好一个代码编辑器,每看完一个操作步骤就按下暂停,自己新建一个 HTML 文件,照着把代码敲一遍。比如讲到获取和修改元素属性时,你自己写一个带按钮的页面,点一下让图片切换。资料里附带的作业安排一定要做,那是检验你有没有真听懂的唯一标准。学完这套基础内容后,你能独立完成网页中常见的交互逻辑:比如表单提交前的简单非空校验、点击按钮展开或隐藏某个区块、根据用户输入实时计算并显示结果。虽然这离直接去应聘高级前端还有距离,但至少你拿到了入场券,能独立接手页面里零碎的交互需求,后续去学 Vue 或 React 这类框架时,也不会因为搞不懂基础语法而频频卡壳。
课程目录
课程目录158 集
- 1-1 [课程安排] 课程安排 (08:29).mp4
- 2-1 [认识 JavaScript] JavaScript能做什么 (08:06).mp4
- 2-2 [认识 JavaScript] 怎么使用JavaScript (09:31).mp4
- 3-1 [尝试使用 JavaScript] 第一步:拿到一个 HTML 元素 (09:57).mp4
- 3-2 [尝试使用 JavaScript] 第二步:认识控制台 (04:07).mp4
- 3-3 [尝试使用 JavaScript] 第三步:获取以及修改这个 HTML 元素的内容 (07:39).mp4
- 3-4 [尝试使用 JavaScript] 第四步:获取以及操作这个 HTML 元素的属性 (11:15).mp4
- 3-5 [尝试使用 JavaScript] 第五步:写点注释吧 (02:40).mp4
- 3-6 [尝试使用 JavaScript] 作业安排 (42).mp4
- 3-7 [尝试使用 JavaScript] 作业讲解 (06:26).mp4
- 4-1 [什么是ECMAScript] 什么是ECMAScript (07:07).mp4
- 5-1 [变量详解] 声明变量、初始化变量 (03:47).mp4
- 5-2 [变量详解] 全局变量、局部变量、 变量的类型 (06:20).mp4
- 5-3 [变量详解] 命名规则、命名方式 (08:12).mp4
- 6-1 [数据类型] 认识常用数据类型 (12:21).mp4
- 6-2 [数据类型] typeof 判断数据类型 (06:04).mp4
- 6-3 [数据类型] 原始值和引用值详解 (16:15).mp4
- 7-1 [运算] 数学运算符、赋值运算符 (06:35).mp4
- 7-2 [运算] 等性运算符、 关系运算符 (06:30).mp4
- 7-3 [运算] 逻辑运算符 (03:43).mp4
- 8-1 [先来认识一下隐式类型转换] 先来认识一下隐式类型转换 (09:49).mp4
- 9-1 [流程控制] 流程控制概念 (04:10).mp4
- 9-2 [流程控制] if else (06:01).mp4
- 9-3 [流程控制] switch (06:22).mp4
- 9-4 [流程控制] 三元表达式 (03:30).mp4
- 9-5 [流程控制] while、do while (07:25).mp4
- 9-6 [流程控制] for (04:47).mp4
- 9-7 [流程控制] Break、Continue (03:17).mp4
- 9-8 [流程控制] 作业安排 (04:50).mp4
- 9-9 [流程控制] 作业讲解 (05:40).mp4
- 10-1 [Function 精讲] 简单的函数定义与调用 (03:39).mp4
- 10-2 [Function 精讲] 函数的另外几种形式(上) (09:13).mp4
- 10-3 [Function 精讲] 函数的另外几种形式(下) (06:26).mp4
- 10-4 [Function 精讲] 函数的形式参数、实际参数 (10:36).mp4
- 10-5 [Function 精讲] 函数的实参列表 arguments (10:42).mp4
- 10-6 [Function 精讲] 函数的返回值 return (08:40).mp4
- 10-7 [Function 精讲] 作业安排 (01:53).mp4
- 10-8 [Function 精讲] 作业讲解 (08:23).mp4
- 11-1 [String 精讲] 字符串的创建、拼接、length (05:33).mp4
- 11-2 [String 精讲] String 的常用方法(上) (10:32).mp4
- 11-3 [String 精讲] String 的常用方法(中) (07:43).mp4
- 11-4 [String 精讲] String 的常用方法(下) (06:22).mp4
- 11-5 [String 精讲] 作业安排 (03:27).mp4
- 11-6 [String 精讲] 作业讲解 (08:45).mp4
- 12-1 [Number 精讲] 创建数字 (03:59).mp4
- 12-2 [Number 精讲] NaN、Infinity、-Infinity (06:55).mp4
- 12-3 [Number 精讲] 数字常用属性 (01:22).mp4
- 12-4 [Number 精讲] Number 的常用方法(上) (03:46).mp4
- 12-5 [Number 精讲] Number 的常用方法(下) (05:15).mp4
- 12-6 [Number 精讲] 全局对象下 Number 相关的方法(上) (06:10).mp4
- 12-7 [Number 精讲] 全局对象下 Number 相关的方法(下) (09:38).mp4
- 12-8 [Number 精讲] 作业安排 (01:44).mp4
- 12-9 [Number 精讲] 作业讲解 (03:30).mp4
- 13-1 [Array 精讲] 重新认识数组(上) (10:02).mp4
- 13-2 [Array 精讲] 重新认识数组(下) (01:26).mp4
- 13-3 [Array 精讲] 数组的常用方法 isArray()、concat() (09:21).mp4
- 13-4 [Array 精讲] 数组的常用方法 push()、pop() (05:23).mp4
- 13-5 [Array 精讲] 数组的常用方法 unshift()、shift() (03:16).mp4
- 13-6 [Array 精讲] 数组的常用方法 join()、reverse() (09:45).mp4
- 13-7 [Array 精讲] 数组的常用方法 sort() (08:49).mp4
- 13-8 [Array 精讲] 数组的常用方法 slice()、splice() (08:15).mp4
- 13-9 [Array 精讲] 数组的常用方法 indexOf()、lastIndex (02:33).mp4
- 13-10 [Array 精讲] 数组的常用方法 every()、some()、fil (05:54).mp4
- 13-11 [Array 精讲] 数组的常用方法 forEach()、map() (04:37).mp4
- 13-12 [Array 精讲] 数组的常用方法 reduce()、reduceRig (06:08).mp4
- 13-13 [Array 精讲] 作业安排 (01:33).mp4
- 13-14 [Array 精讲] 作业讲解 (09:35).mp4
- 14-1 [Object 精讲] 创建对象 (02:38).mp4
- 14-2 [Object 精讲] 2. 访问修改对象属性、方法 (05:10).mp4
- 14-3 [Object 精讲] for in 遍历对象 (06:18).mp4
- 14-4 [Object 精讲] 作业安排 (04:13).mp4
- 14-5 [Object 精讲] 作业讲解 (04:46).mp4
- 15-1 [RegExp 精讲] 创建正则表达式 (05:52).mp4
- 15-2 [RegExp 精讲] 修饰符 (03:46).mp4
- 15-3 [RegExp 精讲] 字符类别 (04:09).mp4
- 15-4 [RegExp 精讲] 字符集合 (04:15).mp4
- 15-5 [RegExp 精讲] 边界 (07:32).mp4
- 15-6 [RegExp 精讲] 数量词 (06:55).mp4
- 15-7 [RegExp 精讲] 分组与反向引用 (06:37).mp4
- 15-8 [RegExp 精讲] 零宽断言 (05:44).mp4
- 15-9 [RegExp 精讲] 正则常用属性 (05:59).mp4
- 15-10 [RegExp 精讲] 正则常用方法 (05:08).mp4
- 15-11 [RegExp 精讲] 配合正则的字符串方法 (05:32).mp4
- 15-12 [RegExp 精讲] 作业安排 (02:53).mp4
- 15-13 [RegExp 精讲] 作业讲解 (07:49).mp4
- 16-1 [Date 精讲] new Date()、 getTime() (01:59).mp4
- 16-2 [Date 精讲] 获取具体时间 (02:18).mp4
- 16-3 [Date 精讲] 设置具体时间 (01:43).mp4
- 17-1 [Math 精讲] Math 概述.html (42)
- 17-2 [Math 精讲] Math 常用方法(上) (02:32).mp4
- 17-3 [Math 精讲] Math 常用方法(中) (05:18).mp4
- 17-4 [Math 精讲] Math 常用方法(下) (01:39).mp4
- 18-1 [强制类型转换] 强制类型转换(上) (09:51).mp4
- 18-2 [强制类型转换] 强制类型转换(中) (08:47).mp4
- 18-3 [强制类型转换] 强制类型转换(下) (11:13).mp4
- 18-4 [强制类型转换] 作业安排 (01:04).mp4
- 19-1 [什么是 HTML DOM] 什么是 HTML DOM (04:29).mp4
- 20-1 [玩转 DOM] 玩转 DOM(一) (09:54).mp4
- 20-2 [玩转 DOM] 玩转 DOM(二) (08:42).mp4
- 20-3 [玩转 DOM] 玩转 DOM(三) (06:28).mp4
- 20-4 [玩转 DOM] 玩转 DOM(四) (09:19).mp4
- 20-5 [玩转 DOM] 玩转 DOM(五) (05:46).mp4
- 20-6 [玩转 DOM] 玩转 DOM(六) (09:58).mp4
- 20-7 [玩转 DOM] 玩转 DOM(七) (05:28).mp4
- 20-8 [玩转 DOM] 玩转 DOM(八) (15:24).mp4
- 21-1 [DOM 常用属性] className、id、style (09:57).mp4
- 21-2 [DOM 常用属性] attributes (06:25).mp4
- 21-3 [DOM 常用属性] classList (08:23).mp4
- 21-4 [DOM 常用属性] innerHTML、innerText (08:05).mp4
- 21-5 [DOM 常用属性] nodeType、nodeValue、nodeName (09:43).mp4
- 21-6 [DOM 常用属性] parentNode、parentElement、ch (06:45).mp4
- 21-7 [DOM 常用属性] firstChild、firstElementChil (04:42).mp4
- 21-8 [DOM 常用属性] nextSibling、nextElementSibl (03:05).mp4
- 21-9 [DOM 常用属性] clientWidth、 scrollWidth、of (07:32).mp4
- 21-10 [DOM 常用属性] clientLeft、scrollLeft、offs (05:34).mp4
- 21-11 [DOM 常用属性] offsetParent (04:14).mp4
- 22-1 [DOM 常用方法] getAttribute()、getAttribute (04:28).mp4
- 22-2 [DOM 常用方法] setAttribute()、setAttribute (07:32).mp4
- 22-3 [DOM 常用方法] removeAttribute()、removeAtt (05:28).mp4
- 22-4 [DOM 常用方法] getElementById()、getElement (03:12).mp4
- 22-5 [DOM 常用方法] querySelector()、querySelect (07:13).mp4
- 22-6 [DOM 常用方法] createElement()、createTextN (05:58).mp4
- 22-7 [DOM 常用方法] removeChild()、replaceChild( (06:07).mp4
- 22-8 [DOM 常用方法] focus()、hasFocus() (05:01).mp4
- 23-1 [DOM 事件] onclick、ondblclick、oncontex (05:21).mp4
- 23-2 [DOM 事件] onmousedown、onmouseup、onmou (04:51).mp4
- 23-3 [DOM 事件] onmouseenter、onmouseleave、 (07:49).mp4
- 23-4 [DOM 事件] onfocus、onblur、onselect (04:07).mp4
- 23-5 [DOM 事件] onchange、oninput、onsearch (06:20).mp4
- 23-6 [DOM 事件] onreset、onsubmit (02:58).mp4
- 23-7 [DOM 事件] onscroll、onresize.html (06:34)
- 23-8 [DOM 事件] onload (08:01).mp4
- 24-1 [DOM 事件监听] addEventListener()、removeEv (06:16).mp4
- 24-2 [DOM 事件监听] 事件冒泡、事件捕获详解 (09:25).mp4
- 24-3 [DOM 事件监听] 阻止事件传递 stopPropagation() (08:35).mp4
- 25-1 [Event 对象] 常用属性 (07:30).mp4
- 25-2 [Event 对象] 常用方法 (03:29).mp4
- 26-1 [深入学习 BOM] window 相关 (02:44).mp4
- 26-2 [深入学习 BOM] 什么是 BOM (03:22).mp4
- 26-3 [深入学习 BOM] location 相关 (01:32).mp4
- 26-4 [深入学习 BOM] 认识 Cookie (06:27).mp4
- 26-5 [深入学习 BOM] 设置 Cookie (08:28).mp4
- 26-6 [深入学习 BOM] 删除、修改 Cookie (09:04).mp4
- 26-7 [深入学习 BOM] setInterval()、clearInterval (05:50).mp4
- 26-8 [深入学习 BOM] setTimeout()、clearTimeout() (05:17).mp4
- 26-9 [深入学习 BOM] 作业安排-简单的轮播图 (40).mp4
- 26-10 [深入学习 BOM] 作业安排-简单的轮播图(一) (06:54).mp4
- 26-11 [深入学习 BOM] 作业安排-简单的轮播图(二) (11:31).mp4
- 26-12 [深入学习 BOM] 作业安排-简单的轮播图(三) (11:34).mp4
- 26-13 [深入学习 BOM] 最后啰嗦几分钟 (05:53).mp4
- 27-1 [Demo深度剖析] 方便、实用的可配置轮播图插件-效果演示 (08:26).mp4
- 27-2 [Demo深度剖析] 方便、实用的可配置轮播图插件-(一) (13:43).mp4
- 27-3 [Demo深度剖析] 方便、实用的可配置轮播图插件-(二) (08:59).mp4
- 27-4 [Demo深度剖析] 方便、实用的可配置轮播图插件-(三) (07:29).mp4
- 27-5 [Demo深度剖析] 方便、实用的可配置轮播图插件-(四) (26:07).mp4
- 27-6 [Demo深度剖析] 方便、实用的可配置轮播图插件-(五) (11:31).mp4
- 27-7 [Demo深度剖析] 方便、实用的可配置轮播图插件-(六) (16:28).mp4
- 27-8 [Demo深度剖析] 方便、实用的可配置轮播图插件-(七) (13:36).mp4






