- JavaScript 从入门到项目实践（超值版）
- 聚慕课教育研发中心
- 5059字
- 2021-03-30 11:00:47
第3章
感受JavaScript精彩——基础入门
◎本章教学微视频：17个 32分钟
学习指引
无论是传统编程语言，还是脚本语言，都有数据类型、常量和变量、注释语句等基本元素，这些基本元素构成了编程基础。本章将详细介绍JavaScript的基础入门知识，主要内容包括JavaScript的语法、变量、数据类型、关键字与保留字。
重点导读
- 掌握JavaScript的语法知识。
- 掌握JavaScript的变量知识。
- 掌握JavaScript的数据类型。
- 掌握JavaScript的关键字。
- 掌握JavaScript的保留字。
3.1 JavaScript的语法
与C、Java及其他语言一样，JavaScript也有自己的语法，但只要熟悉其他语言就会发现JavaScript的语法也是非常简单的。
3.1.1 代码执行顺序
JavaScript程序按照在HTML文件中出现的顺序逐行执行。如果需要在整个HTML文件中执行。最好将其放在HTML文件的<head>…</head>标签当中。某些代码，如函数体内的代码，不会被立即执行，只有当所在的函数被其他程序调用时，该代码才被执行。
3.1.2 区分大小写
JavaScript对字母大小写敏感，也就是说在输入语言的关键字、函数、变量以及其他标识符时，一定要严格区分字母的大小写。例如，变量username与变量userName是两个不同的变量。
提示：HTML不区分大小写。由于JavaScript与HTML紧密相关，这一点很容易混淆，许多JavaScript对象和属性都与其代表的HTML标签或属性同名，在HTML中，这些名称可以以任意的大小写方式输入而不会引起混乱，但在JavaScript中，这些名称通常都是小写的。例如，在HTML中的事件处理器属性ONCLICK通常被声明为onClick或Onclick，而在JavaScript中只能使用onclick。
3.1.3 分号与空格
在JavaScript语句当中，分号是可有可无的，这一点与Java语言不同，JavaScript并不要求每行必须以分号作为语句的结束标志。如果语句的结束处没有分号，JavaScript会自动将该代码的结尾作为语句的结尾。
例如，下面的两行代码书写方式都是正确的：
提示：作为程序开发人员应养成良好的编程习惯，每条语句以分号作为结束标志以增强程序的可读性，也可避免一些非主流浏览器的不兼容。
另外，JavaScript会忽略多余的空格，用户可以向脚本添加空格来提高其可读性。下面的两行代码是等效的：
3.1.4 代码折行标准
当一段代码比较长时，用户可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：
不过，用户不能像这样折行：
3.1.5 注释语句
与C、C++、Java、PHP相同，JavaScript的注释分为两种，其中一种是单行注释，例如：
另一种是多行注释，例如：
3.2 JavaScript的变量
变量是用来临时存储数值的容器。在程序中，变量存储的数值是可以变化的，变量占据一段内存，通过变量的名字可以调用内存中的信息。
3.2.1 变量的声明
尽管JavaScript是一种弱类型的脚本语言，变量可以在不声明的情况下直接使用，但在实际使用过程中，最好还是先使用var关键字对变量进行声明。声明变量具有如下几种规则。
- 可以使用一个关键字var同时声明多个变量，如语句“var x,y;”就同时声明了x和y两个变量。
- 可以在声明变量的同时对其赋值（称为初始化），例如“var president = "henan";var x=5,y=12;”声明了president、x和y3个变量，并分别对其进行了初始化。如果出现重复声明的变量，且该变量已有一个初始值，则此时的声明相当于对变量重新赋值。
- 如果只是声明了变量，并未对其赋值，其值默认为undefined。
- var语句可以用作for循环和for…in循环的一部分，这样可以使得循环变量的声明成为循环语法自身的一部分，使用起来较为方便。
当给一个尚未声明的变量赋值时，JavaScript会自动用该变量名创建一个全局变量。在一个函数内部，通常创建的只是一个仅在函数内部起作用的局部变量，而不是一个全局变量。要确保创建的是一个局部变量，而不仅仅是赋值给一个已经存在的局部变量，就必须使用var语句进行变量声明。
注意：声明JavaScript的变量时，不指定变量的数据类型。一个变量一旦声明，可以存放任何数据类型的信息，JavaScript会根据存放信息的类型，自动为变量分配合适的数据类型。
3.2.2 变量的作用域
变量的作用范围又称为作用域，是指某变量在程序中的有效范围。根据作用域的不同，变量可划分为全局变量和局部变量。
- 全局变量：全局变量的作用域是全局性的。在整个JavaScript程序中，全局变量处处都存在。
- 局部变量：局部变量是函数内部声明的，只作用于函数内部，其作用域是局部性的；函数的参数也是局部性的，只在函数内部起作用。
【例3-1】（实例文件：ch03\Chap3.1.html）变量定义示例。
相关的代码示例请参考Chap3.1.html文件。在IE浏览器里面运行的结果如图3-1所示，从结果中可以看到同一变量名具有不同的运行结果。
图3-1 定义变量后的运行结果
3.2.3 变量的优先级
在函数内部，局部变量的优先级高于同名的全局变量。也就是说，如果存在与全局变量名称相同的局部变量，或者在函数内部声明了与全局变量同名的参数，则该全局变量将不再起作用。
【例3-2】（实例文件：ch03\Chap3.2.html）变量的优先级。
相关的代码示例请参考Chap3.2.html文件，在IE浏览器里面运行的结果如图3-2所示，从结果中可以看出输入的是“局部变量”。
图3-2 变量的优先级
注意：虽然在全局作用域中可以不使用var声明变量，但声明局部变量时，一定要使用var语句。
JavaScript没有块级作用域，函数中的所有变量无论是在哪里声明的，在整个函数中都有意义。
【例3-3】（实例文件：ch03\Chap3.3.html）JavaScript无块级作用域。
相关的代码示例请参考Chap3.3.html文件，在IE浏览器里面运行的结果如图3-3所示。
单击“确定”按钮，结果如图3-4所示。
图3-3 运行结果
图3-4 局部变量
在本例中，用户可能认为因为声明局部变量的var语句还没有执行而调用全局变量scope，但由于无块级作用域的限制，局部变量在整个函数体内是有定义的。这就意味着在整个函数体中都隐藏了同名的全局变量，因此，输出的并不是“全局变量”。虽然局部变量在整个函数体是都是有定义的，但在执行var语句之前不会被初始化。
3.3 JavaScript的数据类型
JavaScript中共有9种数据类型，分别是未定义（Undefined）、空（Null）、布尔型（Boolean）、字符串（String）、数值（Number）、对象（Object）、引用（Reference）、列表（List）和完成（Completion）。其中，后3种类型仅仅作为JavaScript运行时中间结果的数据类型，因此不能在代码中使用，下面讲解常用的数据类型。
3.3.1 未定义类型
Undefined是未定义类型的变量，表示变量还没有赋值，如“var a;”，或者赋予一个不存在的属性值，如var a=String.notProperty。
此外，JavaScript中有一种特殊类型的数字常量NaN，表示“非数字”，当在程序中由于某种原因发生计算错误后，将产生一个没有意义的数字，此时JavaScript返回的数字值就是NaN。
【例3-4】（实例文件：ch03\Chap3.4.html）使用未定义类型。
相关的代码示例请参考Chap3.4.html文件，在IE浏览器里面运行的结果如图3-5所示。
图3-5 使用Undefined运行结果
3.3.2 空类型
JavaScript中的关键字null是一个特殊的值，表示空值，用于定义空的或不存在的引用。不过，null不等同于空的字符串或0。由此可见，null与undefined的区别是：null表示一个变量被赋予了一个空值，而undefined则表示该变量还未被赋值。
【例3-5】（实例文件：ch03\Chap3.5.html）使用null。
相关的代码示例请参考Chap3.5.html文件，在IE浏览器里面运行的结果如图3-6所示。
图3-6 使用空类型运行结果
3.3.3 布尔型
数值数据类型和字符串数据类型可能的值都无穷多，但布尔型数据类型只有两个值，这两个合法的值分别由true和false表示。一个布尔值代表的是一个“真值”，它说明了某个事物是真还是假。通常，我们使用1表示真，0表示假。布尔值通常是在JavaScript程序中比较所得的结果。
布尔类型的toString()方法只是输出true或false，结果由变量的值决定，例如：
【例3-6】（实例文件：ch03\Chap3.6.html）使用布尔类型。
相关的代码示例请参考Chap3.6.html文件，在IE浏览器里面运行的结果如图3-7所示。
图3-7 使用布尔型运行结果
3.3.4 字符串
字符串由零个或者多个字符构成，字符可以包括字母、数字、标点符号和空格、字符串必须放在单引号或者双引号里。JavaScript字符串定义方法如下。
方法一：
方法二：
JavaScript字符串使用的注意事项如下。
- 字符串类型可以表示一串字符，如“www.haut.edu.cn”、'中国'。
- 字符串类型应使用双引号(")或单引号(')引起来。
在写JavaScript脚本时，可能会要在HTML文档中显示或使用某些特殊字符（如引号或斜线），例如<img src="image5.jpg">，但是前面提过，声明一个字符串时，前后必须以引号括起来。如此一来，字符串当中引号可能会和标示字符串的引号搞混了，此时就要使用转义字符（Escape Character）。
JavaScript使用8种转义字符，这些字符都是以一个反斜线（\）开始。当JavaScript的解释器（Interpreter）看到反斜线时，就会特别注意表现出程序员所要表达的意思。
表3-1列出了JavaScript的转义序列以及它们所代表的字符。其中有两个转义序列是通用的，通过把Latin-1或Unicode字符编码表示为十六进制数，它们可以表示任意字符。例如，转义序列\xA9表示的是版权符号，它采用十六进制数A9表示Latin-1编码。同样地，\u表示的是由4位十六进制数指定的任意Unicode字符，如\u03c0表示的是字符π（圆周率）。
表3-1 JavaScript的转义序列以及它们所代表的字符
注意，虽然ECMAScript v1标准要求使用Unicode字符转义，但是JavaScript 1.3之前的版本通常不支持转义符。有些JavaScript版本还允许用反斜线符号后加3位八进制数字来表示Latin-1字符，但是ECMAScript v3标准不支持这种转义序列，所以不应该再使用它们。
1．字符串的使用
JavaScript的内部特性之一就是能够连接字符串。如果将加号（+）运算符用于数字，那就是把两个数字相加。但是，如果将它作用于字符串，它就会把这两个字符串连接起来，将第二个字符串连接在第一个字符串之后，例如：
【例3-7】（实例文件：ch03\Chap3.7.html）连接字符串示例。
相关的代码示例请参考Chap3.7.html文件。在IE浏览器里面运行的结果如图3-8所示，从结果中可以看到字符串连接运行的结果。
图3-8 字符串连接运行结果
如果想要确定一个字符串的长度（它包含字符的个数），用户就可以使用字符串的length属性，如果变量s包含一个字符串，可以使用如下方法访问它的长度：s.length。
【例3-8】（实例文件：ch03\Chap3.8.html）获取字符串长度。
相关的示例请参考Chap3.8.html文件。在IE浏览器里面运行的结果如图3-9所示，从结果中可以看到字符串的长度已经被计算出来。
图3-9 计算字符串的长度
根据字符串的length属性，可以对其进行许多操作，例如，可以获取字符串s的最后一个字符：
因为length是一个字符串的长度，即字符串的个数，而字符串中的首字符是从0开始的，所以最后一个字符在字符串中的位置为length-1。
2．字符串的大小写转换
使用字符串对象中的toLocaleLowerCase()、toLocaleUpperCase()、toLowerCase()、toUpperCase()方法可以转换字符串的大小写。这4种方法的语法格式如下：
【例3-9】（实例文件：ch03\Chap3.9.html）字符串大小转换。
相关的代码示例请参考Chap3.9.html文件，在IE浏览器里面运行的结果如图3-10所示。
图3-10 字符串大小转换
3.3.5 数值类型
JavaScript的数值类型表示一个数字，如5、12、-5、2e5等。在JavaScript中，数值类型有正数、负数、指数等。
【例3-10】（实例文件：ch03\Chap310.html）输出数值。
相关的代码示例请参考Chap3.10.html文件，在IE浏览器里面运行的结果如图3-11所示。
图3-11 输出数值
提示：JavaScript中只有一种数字类型，而且内部使用的是64位浮点型，等同于C#或Java中的double类型。
3.3.6 对象类型
Object是对象类型，该数据类型中包括Object、Function、String、Number、Boolean、Array、RegExp、Date、 Global、Math、Error，以及宿主环境提供的Object类型。
【例3-11】（实例文件：ch03\Chap3.11.html）Object数据类型的使用。
相关的代码示例请参考Chap3.11.html文件，在IE浏览器里面运行的结果如图3-12所示。
图3-12 Object数据类型的使用
3.4 JavaScript的关键字
关键字标识了JavaScript语句的开头或结尾。根据规定，关键字是保留的，不能用作变量名或函数名。表3-2所示为JavaScript中的关键字。
表3-2 JavaScript中的关键字
提示：JavaScript中的关键字是不能作为变量名和函数名使用的。
3.5 JavaScript的保留字
保留字在某种意义上是为将来的关键字而保留的单词。因此，保留字不能被用作变量名或函数名。表3-3所示为JavaScript中的保留字。
表3-3 JavaScript中的保留字
提示：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看作关键字，如此将出现关键字错误。
3.6 典型案例——九九乘法表
下面是一个JavaScript综合实例——九九乘法表。
【例3-12】（实例文件：ch03\Chap3.12.html）九九乘法表。
相关的示例请参考Chap3.12.html文件，在IE浏览器里面运行的结果如图3-13所示。
图3-13 九九乘法表
3.7 就业面试技巧与解析
3.7.1 面试技巧与解析（一）
面试官：你知道变量名有哪些命名规则吗？
应聘者：就我个人理解，变量命名规则有以下几种规则。
（1）变量名以字母、下画线或美元符号（$）开头。例如，txtName与_txtName都是合法的变量名，而1txtName和&txtName都是非法的变量名。
（2）变量名只能由字母、数字、下画线和美元符号（$）组成，其中不能包含标点与运算符，不能用汉字做变量名。例如，txt%Name、名称文本、txt-Name都是非法变量名。
（3）不能用JavaScript保留字做变量名。例如，var、enum、const都是非法变量名。
（4）JavaScript对大小写敏感。例如，变量txtName与txtname是两个不同的变量，两个变量不能混用。
3.7.2 面试技巧与解析（二）
面试官：你知道声明变量具有哪几种规则吗？
应聘者：就我个人理解，声明变量有以下几种规则。
（1）可以使用一个关键字var同时声明多个变量，如语句“var x,y;”就同时声明了x和y两个变量。
（2）可以在声明变量的同时对其赋值（称为初始化），例如“var president = "henan";var x=5,y=12;”声明了president、x和y3个变量，并分别对其进行了初始化。
（3）如果出现重复声明的变量，且该变量已有一个初始值，则此时的声明相当于对变量重新赋值。
（4）如果只是声明了变量，并未对其赋值，其值默认为undefined。
（5）var语句可以用作for循环和for…in循环的一部分，这样可使得循环变量的声明成为循环语法自身的一部分，使用起来较为方便。