JavaScript概述
JavaScript是Web开发领域中的一种功能强大的编程语言，主要用于开发交互式的Web页面。在计算机、手机等设备上浏览的网页，其大多数的交互逻辑几乎都是由JavaScript实现的。
对于制作一个网页而言，HTML、CSS和JavaScript分别代表了结构、样式和行为，结构是网页的骨架，样式是网页的外观，行为是网页的交互逻辑，如表1所示。
表1 比较HTML、CSS和JavaScript
| 语言 | 作用 | 说明 |
|---|---|---|
| HTML | 结构 | 决定网页的结构和内容，相当于人的身体 |
| CSS | 样式 | 决定网页呈现给用户的模样，相当于给人穿衣服、化妆 |
| JavaScript | 行为 | 实现业务逻辑和页面控制，相当于人的各种动作 |
JavaScript内嵌于HTML网页中，通过浏览器内置的JavaScript引擎进行解释执行，把一个原本只用来显示的页面转变成支持用户交互的页面程序。
浏览器是访问互联网中各种网站所必备的工具，JavaScript主要就是运行在浏览器中的。表2列举了几种常见的浏览器及其特点。
表2 常见浏览器及特点
| 浏览器 | 特点 |
|---|---|
| Internet Explorer | Windows操作系统的内置浏览器，用户数量较多 |
| Microsoft Edge | Windows 10操作系统提供的浏览器，速度更快、功能更多 |
| Google Chrome | 目前市场占有率较高的浏览器，具有简洁、快速的特点 |
| Mozilla Firefox | 一款优秀的浏览器，市场占有率低于Google Chrome |
| Safari | 主要应用在苹果iOS、macOS操作系统中的浏览器 |
在表2列举的浏览器中，Internet Explorer浏览器的常见版本有6、7、8、9、10、11。其中6、7、8发布时间较早，已经跟不上Web技术发展，正在逐渐被淘汰。本书选择各方面比较优秀的Google Chrome浏览器进行讲解。
浏览器内核分为两部分：渲染引擎（也称为排版引擎）和JavaScript引擎。渲染引擎（如Chrome浏览器的Blink）负责解析HTML与CSS，JavaScript引擎（如Chrome浏览器的V8引擎）是JavaScript语言的解释器，用于读取网页中的JavaScript代码，对其处理后执行。
JavaScript的诞生和发展
在1995年时，Netscape（网景）公司（现在的Mozilla）的布兰登·艾奇（Brendan Eich）在网景导航者浏览器上首次设计出了JavaScript。Netscape最初将这个脚本语言命名为LiveScript，后来Netscape公司与Sun公司（2009年被Oracle公司收购）合作之后将其改名为JavaScript，这是由于当时Sun公司推出的Java语言备受关注，Netscape公司为了营销借用了Java这个名称，但实际上JavaScript与Java的关系就像“雷锋”与“雷峰塔”，它们本质上是两种不同的编程语言。
在设计之初，JavaScript是一种可以嵌入到网页中的编程语言，用来控制浏览器的行为。例如，直接在浏览器中进行表单验证，用户只有填写格式正确的内容后才能够提交表单，如图1所示。这样避免了用户因表单填写错误导致的反复提交，节省了时间和网络资源。
图1 表单验证
现在，JavaScript的用途已经不仅局限于浏览器了。Node.js的出现使得开发人员能够在服务器端编写JavaScript代码，使得JavaScript的应用更加广泛，而本书主要针对浏览器端的JavaScript基础进行讲解。学习了JavaScript基础之后，读者可以深入学习三大主流框架Vue.js、Angular、React，或者进行前端开发、小程序开发，或者混合App的开发。推荐读者在掌握JavaScript语言基础后再学习更高级的技术。
下面我们通过一些示例来展示基于JavaScript语言结合流行框架开发出来的页面效果，效果如图2~图5所示。其中，图2是利用前后端分离模式进行开发，基于React技术栈开发的移动Web项目；图3是基于Angular构建的响应式移动Web项目；图4是使用WePY框架并结合ES 6语法开发的小程序电商项目；图5是基于Vue.js全套技术栈开发出来的网页端后台管理系统。
图2 基于React开发的租房项目
图3 基于Angular开发的移动Web预定酒店项目
图4 小程序电商项目
图5 Vue.js开发的后台管理系统项目
在项目开发中，页面中的许多常见的交互效果都可以利用JavaScript来实现。JavaScript可以使网页的互动性更强、用户体验更好。
JavaScript的特点
1. JavaScript是一种脚本语言
脚本（Script）简单地说就是一条条的文本命令，这些命令按照程序流程逐条被执行。常见的脚本语言有JavaScript、TypeScript、PHP、Python等。非脚本语言（如C、C++）一般需要编译、链接，生成独立的可执行文件后才能运行，而脚本语言依赖于解释器，只在被调用时自动进行解释或编译。脚本语言通常都有简单、易学、易用的特点，语法规则比较松散，使开发人员能够快速完成程序的编写工作。
2. JavaScript可以跨平台
JavaScript语言不依赖操作系统，仅需要浏览器的支持。在移动互联网时代，利用手机等各类移动设备上网的用户越来越多，JavaScript的跨平台性使其在移动端也承担着重要的职责。
3. JavaScript支持面向对象
面向对象是软件开发中的一种重要的编程思想，其优点非常多。例如，基于面向对象思想诞生了许多优秀的库和框架（如jQuery），可以使JavaScript开发变得快捷和高效，降低了开发成本。
JavaScript的组成
JavaScript是由ECMAScript、DOM、BOM三部分组成的，如图1所示。
图1 JavaScript的组成部分
接下来我们对JavaScript的组成进行简单的介绍。
-
ECMAScript：是JavaScript的核心。ECMAScript规定了JavaScript的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套JavaScript语法工业标准。
-
DOM：文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口，可以对页面上的各种元素进行操作（如大小、位置、颜色等）。
-
BOM：浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM，可以对浏览器窗口进行操作（如弹出框、控制浏览器导航跳转等）。
代码书写位置
在网页中编写JavaScript代码时，有3种书写位置，分别是行内式、内嵌式（也称为嵌入式）和外部式（也称为外链式），下面分别进行讲解。
1. 行内式
行内式是指将单行或少量的JavaScript代码写在HTML标签的事件属性中（也就是以on开头的属性，如onclick）。下面通过具体操作步骤进行演示。
（1）创建一个简单的HTML页面，将文件命名为demo01.html。
（2）编写demo01.html，具体代码如下。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 </body> 9 </html>
在上述代码中，第4行声明了网页的编码为UTF-8，帮助浏览器正确识别网页的编码。在声明编码后，还需要确保文件本身的编码也是UTF-8。目前大多数代码编辑器新建的文件编码默认都是UTF-8。另外，Windows记事本默认的编码是ANSI，在记事本中编写的网页容易出现乱码，因此读者应杜绝使用记事本编写代码文件。
（3）使用行内式编写JavaScript代码，实现单击一个按钮后，弹出一个警告框，显示一些提示信息，具体代码如下。
1 <body>
2 <input type="button" value="点我" οnclick="alert('行内式')">
3 </body>
在上述代码中，写在onclick属性里的代码就是JavaScript代码。
（4）通过浏览器访问demo01.html，运行结果如图1所示。
图1 行内式
以上步骤演示了行内式的使用。在实际开发中，使用行内式还需要注意以下4点。
① 注意单引号和双引号的使用。在HTML中推荐使用双引号，而JavaScript推荐使用单引号。
② 行内式可读性较差，尤其是在HTML中编写大量JavaScript代码时，不方便阅读。
③ 在遇到多层引号嵌套的情况时，非常容易混淆，导致代码出错。
④ 只有临时测试，或者特殊情况下再使用行内式，一般情况下不推荐使用行内式。
2. 内嵌式（嵌入式）
内嵌式是使用<script>标签包裹JavaScript代码，<script>标签可以写在<head>或<body>标签中。通过内嵌式，可以将多行JavaScript代码写在<script>标签中。内嵌式是学习JavaScript时最常使用的方式。
下面我们通过具体操作步骤进行演示。
（1）创建demo02.html，用来编写内嵌式JavaScript代码，示例代码如下。
1 <head>
2 ……
3 <script>
4 alert('内嵌式');
5 </script>
6 </head>
在上述代码中，第4行是一条JavaScript语句，其末尾的分号“;”表示该语句结束，后面可以编写下一条语句。<script>标签还有一个type属性，在HTML 5中该属性的默认值为“text/javascript”，因此在编写时可以省略type属性。
（2）通过浏览器访问demo02.html，页面一打开后，就会自动弹出一个警告框，提示信息为“内嵌式”。
3. 外部式（外链式）
外部式是指将JavaScript代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML页面中使用<script>标签进行引入，适合JavaScript代码量比较多的情况。
外部式有利于HTML页面代码结构化，把大段的JavaScript代码独立到HTML页面之外，既美观，也方便文件级别的代码复用。需要注意的是，外部式的<script>标签内不可以编写JavaScript代码。
下面我们通过具体操作步骤进行演示。
（1）创建demo03.html，用来编写外部式JavaScript代码，示例代码如下。
1 <head> 2 …… 3 <script src="test.js"></script> 4 </head>
（2）创建test.js文件，在文件中编写JavaScript代码，如下所示。
alert('外部式');
（3）通过浏览器访问demo03.html，页面一打开后，就会自动弹出一个警告框，提示信息为“外部式”。
注释
在JavaScript开发过程中，使用注释更有利于代码的可读性。注释在程序解析时会被JavaScript解释器忽略。JavaScript支持单行注释和多行注释，具体示例如下。
1. 单行注释“//”
单行注释以“//”开始，到该行结束或<script>标签结束之前的内容都是注释。下面我们通过代码演示单行注释的使用。
1 <script>
2 alert('Hello, JavaScript'); // 输出Hello, JavaScript
3 </script>
上述示例中，“//”和后面的“输出 Hello, JavaScript”是一个单行注释。
2. 多行注释“/* */”
多行注释以“/”开始，以“/”结束。多行注释中可以嵌套单行注释，但不能再嵌套多行注释。示例代码如下。
1 <script>
2 /*
3 alert('Hello, JavaScript');
4 */
5 </script>
上述示例中，第2~4行的内容就是多行注释。
输入和输出语句
JavaScript是一门编程语言，可以在网页中实现用户交互效果。例如，在网页打开后，自动弹出一个输入框，让用户输入内容，输入后，由程序内部进行处理，处理完成后，再把结果返回给用户。这整个过程分为输入、处理和输出3个步骤。
为了方便信息的输入和输出，JavaScript提供了输入和输出语句，如表1所示。
表1常用的输入和输出语句
| 语句 | 说明 |
|---|---|
| alert('msg') | 浏览器弹出警告框 |
| console.log('msg') | 浏览器控制台输出信息 |
| prompt('msg') | 浏览器弹出输入框，用户可以输入内容 |
下面我们通过代码演示这3个输入和输出语句的使用，如下所示。
1 <script>
2 alert('这是一个警告框');
3 console.log('在控制台输出信息');
4 prompt('这是一个输入框');
5 </script>
通过浏览器访问测试，alert()的显示效果如图1所示。
图1 alert()效果
console.log()的输出结果需要在浏览器的控制台中查看。在Chrome浏览器中按F12键（或在网页空白区域单击鼠标右键，在弹出的菜单中选择“检查”）启动开发者工具，然后切换到“Console”（控制台）选项卡，如图2所示。
图2 console.log()效果
prompt()的显示效果如图3所示。
图3 prompt()
控制台的使用
在浏览器的控制台中可以直接输入JavaScript代码来执行，这为JavaScript初学者提供了很大的便利。打开控制台后，会看到一个闪烁的光标，此时可以输入代码，按回车键执行。图1演示了直接在控制台中输入代码执行的效果。
图1 控制台输入
在图1中，代码前面的“>”图标表示该行代码是用户输入的，下一行的“<”图标表示控制台的输出结果，用于显示用户输入的表达式的值。
在控制台中还可以用“Ctrl+鼠标滚轮”放大或缩小，用快捷键【Shift+Enter】在输入的代码中进行换行。
扫一扫
224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
