零基础学 JavaScript(用浏览器运行)
先说一句:学历和编程能力关系不大。编程靠的是动手和坚持,不需要高深数学。JS 很适合入门,因为只要有浏览器就能写代码、马上看到结果,不用安装复杂环境。
一、整体学习路线(参考)
| 阶段 | 内容 | 大约时间 |
|---|---|---|
| 第1阶段 | 认识浏览器控制台、输出、简单计算 | 第1周 |
| 第2阶段 | 变量、数据类型(数字、文字、真假) | 第1-2周 |
| 第3阶段 | 条件判断(if)、循环(for) | 第2-3周 |
| 第4阶段 | 函数、数组、对象 | 第3-5周 |
| 第5阶段 | 操作网页(DOM):点按钮、改文字 | 第5-7周 |
| 第6阶段 | 做小项目:计算器、待办清单、猜数字游戏 | 第7周以后 |
每天 1 小时,坚持 2 个月,就能做出自己的小网页程序。
二、第一课应该讲什么
第一课的目标不是学知识点,而是让学习者:
- 知道"编程"是什么
- 亲手运行第一行代码
- 获得"我也能做到"的成就感
第一课内容安排(约 60 分钟)
① 编程是什么?(5分钟)
用生活比喻:
编程就是给电脑写一份说明书。电脑很听话,但很笨,你必须一步一步、准确地告诉它做什么。
JavaScript 就是浏览器能听懂的一种"语言"。你平时刷网页,点按钮弹出提示、图片轮播,背后很多都是 JS 在工作。
② 打开浏览器的"控制台"(10分钟)
推荐使用 Chrome 或 Edge 浏览器。
操作步骤:
- 打开浏览器,随便打开一个页面(空白页也行)
- 按键盘 F12(或右键 → "检查")
- 点击顶部的 Console(控制台) 标签
- 看到一个可以打字的地方,有个
>符号
这里就是你写代码的地方,输入代码按回车,电脑马上执行。
⚠️ 注意:如果第一次粘贴代码时,浏览器提示要输入 allow pasting,照着输入回车即可(这是浏览器的安全保护)。
③ 第一行代码:让电脑说话(15分钟)
在控制台输入:
console.log("你好,世界!")
按回车,控制台显示:你好,世界!
讲解:
console.log= "在控制台打印出来"- 括号
()里放要打印的内容 - 文字要用英文引号
" "包起来
再试试:
console.log("我叫小明")
console.log("我正在学编程")
④ 让电脑做计算(10分钟)
console.log(1 + 1)
console.log(100 - 35)
console.log(6 * 7)
console.log(20 / 4)
讲解:
- 数字不用加引号
*是乘号,/是除号
对比一个有趣的现象:
console.log(1 + 1) // 结果:2
console.log("1" + "1") // 结果:11
加了引号,电脑就把它当成"文字",文字相加就是拼在一起。这是第一个"电脑思维"的体验。
⑤ 弹出一个窗口(5分钟)
alert("欢迎来到编程世界!")
页面会弹出一个提示框。再试试和用户互动:
prompt("你叫什么名字?")
这一步成就感很强,因为"看得见"。
⑥ 常见错误(10分钟)——非常重要
零基础最容易卡在这里,提前告诉他们:
| 错误写法 | 问题 |
|---|---|
console.log("你好") | 用了中文括号 |
console.log(“你好”) | 用了中文引号 |
Console.log("你好") | 大小写错了,JS 区分大小写 |
console.log("你好) | 引号没配对 |
记住:写代码时,所有符号都用英文输入法!
看到红色报错不要慌,报错是正常的,程序员每天都在看报错。
⑦ 课后练习(5分钟布置)
- 在控制台打印你的名字、年龄、家乡
- 计算:一个月工资 5000,一年是多少?(
5000 * 12) - 用
alert弹出一句你想说的话 - 故意写错一次(用中文括号),看看报错长什么样