JavaScript 是什么

你已经会写 HTML 和 CSS 了，页面有了内容和样式，但它还是静态的。用户点按钮没有反应，表单填完没有提示，这些都缺一样东西，就是行为。JavaScript 就是给网页补上行为能力的语言，它是前端开发的三大支柱之一。

这篇是 JavaScript 教程的第一篇，先搞清楚 JavaScript 从哪里来、能做什么，再动手写第一个程序。

JavaScript 的历史与定位

JavaScript 诞生于 1995 年，由 Netscape（网景）公司开发，最初目的很简单，就是为网页添加交互能力。它的名字里有 Java，但它和 Java 语言没有关系，纯属当年的营销合作。

现在的 JavaScript 由 ECMA 国际组织维护标准，这个标准叫 ECMAScript。JavaScript 是 ECMAScript 的一种实现，各大浏览器都遵循这套标准。

JavaScript 的定位经过多次升级，现在它不止运行在浏览器里，还能通过 Node.js 在服务器端运行，甚至能做桌面应用、小程序。不过本教程聚焦浏览器端的前端开发，这正是 JavaScript 的根据地。

JavaScript 与 HTML、CSS 的关系

一个网页由三样东西组成，HTML 管结构，CSS 管样式，JavaScript 管行为。它们各司其职，缺一不可。

可以把网页比作一个人。HTML 是骨架，决定身体有哪些部位。CSS 是皮肤和衣服，决定长什么样、好不好看。JavaScript 是肌肉和神经，决定能不能动、怎么动。

举个例子，页面里有一个按钮，按钮本身是 HTML，它的红色圆角样式是 CSS，而点击它弹出提示文字，就是 JavaScript 的工作。

浏览器中的 JavaScript 能做什么

在浏览器里，JavaScript 可以做的事情包括

• 修改页面内容。比如点击按钮后替换一段文字。
• 响应用户操作。比如点击、移动鼠标、按下键盘。
• 处理表单。比如校验邮箱格式、阻止空表单提交。
• 请求服务器数据。比如加载最新文章列表，这会在后面的教程涉及。
• 制作动画和游戏。比如轮播图、进度条。

一句话概括，凡是页面上动态的东西，背后基本都有 JavaScript。

编程语言与标记语言的本质区别

这一节是本篇的重点，也是很多新手混淆的地方。HTML 和 CSS 是标记语言，JavaScript 是编程语言，它们有本质区别。

标记语言描述内容和样式的结构，本身没有逻辑。HTML 用标签声明这里有个标题、那里有个列表，CSS 用规则声明标题是红色、列表靠左。它们只是”描述”，不会做任何判断和计算。

编程语言不一样，它有变量、条件判断、循环、函数这些能力，能按规则”做事情”。同样是一段文字，HTML 只是展示它，JavaScript 可以判断文字长度、提取其中一部分、根据条件决定显示还是隐藏。

看一个直观的对比

<!-- 标记语言只能描述结构，不能做判断 -->
<p>你好，世界</p>

<!-- 编程语言可以判断和计算 -->
<script>
  const msg = '你好，世界';
  if (msg.length > 3) {
    console.log('这句话长度超过 3');
  }
</script>

标记语言里没有变量、没有 if、没有循环，这些概念只存在于编程语言。学会从”描述”思维切换成”逻辑”思维，是入门 JavaScript 的第一道门槛。

认识开发者工具 Console 面板

写 JavaScript 需要调试工具。Chrome 等现代浏览器自带开发者工具，按 F12 可以打开，面板上方有一排标签页，其中 Console（控制台）是我们最常用的。

Console 有两大用途。第一，显示代码输出的信息和报错，这是观察程序运行结果的窗口。第二，可以直接在里面输入代码回车执行，适合随手验证小段代码。

打开 Console 后，能看到一些日志信息，也可能是空白的，都正常。后面的教程所有示例都可以直接粘贴进 Console 运行，会省很多事。

第一个程序

现在写第一个程序。在 Console 里输入下面这行，按回车

console.log('Hello');

会在 Console 输出一行内容

Hello

console 是浏览器提供的对象，log 是它上面的方法，意思是输出日志。console.log() 的作用就是把括号里的内容打印到控制台，括号里的 ‘Hello’ 是一个字符串，关于字符串在后面的文章详细介绍。

这是最常见的调试手段。程序哪里不对，就在关键位置加一行 console.log()，看看数据走到哪一步出了问题。

小结

• JavaScript 1995 年诞生，现在由 ECMA 组织维护 ECMAScript 标准，还能通过 Node.js 运行在服务器端。
• HTML 管结构、CSS 管样式、JavaScript 管行为，分别对应骨架、皮肤、肌肉。
• 标记语言描述结构没有逻辑，编程语言有变量、条件、循环、函数，能按规则做事情。
• F12 打开开发者工具，Console 面板可以查看输出和报错，也可以直接运行代码。
• console.log(‘Hello’) 是第一个程序，作用是在控制台输出信息。