零基础学 JavaScript(用浏览器运行)(1)

11 阅读3分钟

零基础学 JavaScript(用浏览器运行)

先说一句:学历和编程能力关系不大。编程靠的是动手和坚持,不需要高深数学。JS 很适合入门,因为只要有浏览器就能写代码、马上看到结果,不用安装复杂环境。


一、整体学习路线(参考)

阶段内容大约时间
第1阶段认识浏览器控制台、输出、简单计算第1周
第2阶段变量、数据类型(数字、文字、真假)第1-2周
第3阶段条件判断(if)、循环(for)第2-3周
第4阶段函数、数组、对象第3-5周
第5阶段操作网页(DOM):点按钮、改文字第5-7周
第6阶段做小项目:计算器、待办清单、猜数字游戏第7周以后

每天 1 小时,坚持 2 个月,就能做出自己的小网页程序。


二、第一课应该讲什么

第一课的目标不是学知识点,而是让学习者:

  1. 知道"编程"是什么
  2. 亲手运行第一行代码
  3. 获得"我也能做到"的成就感

第一课内容安排(约 60 分钟)


① 编程是什么?(5分钟)

用生活比喻:

编程就是给电脑写一份说明书。电脑很听话,但很笨,你必须一步一步、准确地告诉它做什么。

JavaScript 就是浏览器能听懂的一种"语言"。你平时刷网页,点按钮弹出提示、图片轮播,背后很多都是 JS 在工作。


② 打开浏览器的"控制台"(10分钟)

推荐使用 Chrome 或 Edge 浏览器。

操作步骤:

  1. 打开浏览器,随便打开一个页面(空白页也行)
  2. 按键盘 F12(或右键 → "检查")
  3. 点击顶部的 Console(控制台) 标签
  4. 看到一个可以打字的地方,有个 > 符号

这里就是你写代码的地方,输入代码按回车,电脑马上执行。

⚠️ 注意:如果第一次粘贴代码时,浏览器提示要输入 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分钟布置)

  1. 在控制台打印你的名字、年龄、家乡
  2. 计算:一个月工资 5000,一年是多少?(5000 * 12)
  3. 用 alert 弹出一句你想说的话
  4. 故意写错一次(用中文括号),看看报错长什么样