《JavaScript从零开始学：视频教学版》试读： 无论是传统编程语言，还是脚本语言，都具有数据类型、常量和变量、运算符、表达式、注释语句、流程控制语句等基本元素构成，这些基本元素构成了编程基础。本章将主要讲述JavaScript编程的基本知识。
2.1 JavaScript的基本语法
JavaScript可以直接用记事本编写，其中包括语句、与语句相关的语句块以及注释。在一条语句内可以使用变量、表达式等。
2.1.1 执行顺序
JavaScript程序按照在HTML文件中出现的顺序逐行执行。如果需要在整个HTML文件中执行，最好将其放在HTML文件的<head>…</head>标记中。某些代码，如函数体内的代码，不会被立即执行，只有当所在的函数被其他程序调用时，该代码才被执行。
2.1.2 区分大小写
JavaScript对字母大小写敏感，也就是说在输入语言的关键字、函数、变量以及其他标识符时时，一定要严格区分字母的大小写。例如变量username与变量userName是两个不同的变量。
HTML不区分大小写。由于JavaScript与HTML紧密相关，这一点很容易混淆，许多JavaScript对象和属性都与其代表的HTML标签或属性同名，在HTML中，这些名称可以以任意的大小写方式输入而不会引起混乱，但在JavaScript中，这些名称通常都是小写的。例如，在HTML中的事件处理器属性ONCLICK通常被声明为onClick或Onclick，而在JavaScript中只能使用onclick。
2.1.3 分号与空格
在JavaScript语句当中，分号是可有可无的，这一点与Java语言不同，JavaScript并不要求每行必须以分号作为语句的结束标志。如果语句的结束处没有分号，JavaScript会自动将该代码的结尾作为语句的结尾。
例如，下面的两行代码书写方式都是正确的。
Alert（"hello,JavaScript"）
Alert（"hello,JavaScript"）;
鉴于最好的编写习惯，最好在每行的最后加上一个分号，这样能保证每行代码的准确性。
另外，JavaScript会忽略多余的空格，用户可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：
var name="Hello";
var name = "Hello";
2.1.4 对代码行进行折行
当一段代码比较长时，用户可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：
document.write("Hello \
World!");
不过，用户不能像这样折行：
document.write \
("Hello World!");
2.1.5 注释
注释通常用来解释程序代码的功能（增加代码的可读性）或阻止代码的执行（调试程序），不参于程序的执行。在JavaScript中注释分为单行注释和多行注释两种。
1. 单行注释语句
在JavaScript中，单行注释以双斜杠“//”开始，直到这一行结束。单行注释“//”可以放在行的开始或一行的末尾，无论放在哪里，只要从“//”符号开始到本行结束为止的所有内容都不会执行。在一般情况下，如果“//”位于一行的开始，则用来解释下一行或一段代码的功能；如果“//”位于一行的末尾，则用来解释当前行代码的功能。如果用来阻止一行代码的执行，也常将“//”放在一行的开始，如下加粗代码所示。
【例2.1】（实例文件：ch02\2.1.html）单行注释语句。
<!DOCTYPE html>
<html>
<head>
<title>date对象</title>
<script type="text/javascript">
function disptime( )
{
//创建日期对象now，并实现当前日期的输出
var now= new Date( );
//document.write(“<h1>河南旅游网</h1>”);
document.write("<H2>今天日期:"+now.getFullYear()+"年"+(now.getMonth( )+1)+"月"+now.getDate()+"日</H2>"); //在页面上显示当前年月日
}
</script>
<body onload="disptime( )">
</body>
</html>
以上代码中，共使用三个注释语句。第一个注释语句将“//”符号放在了行首，通常用来解释下面代码的功能与作用。第二个注释语句放在了代码的行首，阻止了该行代码的执行。第三个注释语句放在了行的末尾，主要是对该行的代码进行解释说明。
在IE 9.0中的浏览效果如图2-1所示。可以看到代码中的注释不被执行。
图2-1 程序运行结果
2. 多行注释
单行注释语句只能注释一行的代码，假设在调试程序时，希望有一段代码都不被浏览器执行或者对代码的功能说明一行书写不完，那么就需要使用多行注释语句。多行注释语句以“/*”开始，以“*/”结束，可以注释一段代码。
【例2.2】（实例文件：ch02\2.2.html）多行注释语句。
<!DOCTYPE html>
<html>
<body>
<h1 id="myH1"></h1>
<p id="myP"></p>
<script type="text/javascript">
/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
</script>
<p><b>注释：</b>注释块不会被执行。</p>
</body>
</html>
在IE 9.0中的浏览效果如图2-2所示，可以看到代码中的注释不被执行。
图2-2 程序运行结果
2.1.6 语句
JavaScript程序是语句的集合，一条JavaScript语句相当于英语中的一个完整句子。JavaScript语句将表达式组合起来，完成一定的任务。一条语句由一个或多个表达式、关键字或运算符组合，语句之间用分号（;）隔开，也就是，分号是一个JavaScript语句的结束符号。
下面给出JavaScript语句的分割示例，其中一行就是一条JavaScript语句。
Name="张三"； //将“张三”赋值给name
Var today=new Date()； //将今天的日期赋值给today
【例2.3】（实例文件：ch02\2.3.html）操作两个HTML元素。
<!DOCTYPE html>
<html>
<body>
<h1>我的网站</h1>
<p id="demo">一个段落.</p>
<div id="myDIV">一个div块.</div>
<script type="text/javascript">
document.getElementById("demo").innerHTML="Hello JavaScript";
document.getElementById("myDIV").innerHTML="How are you?";
</script>
</body>
</html>
在IE 9.0中的浏览效果如图2-3所示。
图2-3 程序运行结果
2.1.7 语句块
语句块是一些语句的组合，通常语句块都会被一对大括号括起来。在调用语句块时，JavaScript会按书写次序执行语句块中的语句。JavaScript会把语句块中的语句看成是一个整体全部执行，语句块通常用在函数中或流程控制语句中，如下所示代码就是一个语句块：
if (Fee < 2)
{
Fee = 2; //小于2元时，手续费为2元
}
语句块的作用是使语句序列一起执行，JavaScript 函数是将语句组合在块中的典型例子。
【例2.4】（实例文件：ch02\2.4.html）运行可操作两个HTML元素的函数。
<html>
<body>
<h1>我的网站</h1>
<p id="myPar">我是一个段落.</p>
<div id="myDiv">我是一个div块.</div>
<p>
<button type="button" onclick="myFunction()">单击这里</button>
</p>
<script type="text/javascript">
function myFunction()
{
document.getElementById("myPar").innerHTML="Hello JavaScript";
document.getElementById("myDiv").innerHTML="How are you?";
}
</script>
<p>当您单击上面的按钮时，两个元素会改变。</p>
</body>
</html>
在IE 9.0中的浏览效果如图2-4所示，单击其中的“单击这里”按钮，可以看到两个元素发生了变化，如图2-5所示。
图2-4 程序运行结果 图2-5 程序运行结果
2.2 JavaScript的数据结构
每一种计算机编程语言都有自己的数据结构，JavaScript脚本语言的数据结构包括标识符、常量、变量、关键字、保留字等。
2.2.1 标识符
JavaScript编写程序时，很多地方都要求用户给定名称，例如，JavaScript中的变量、函数等要素定义时都要求给定名称。可以将定义要素时使用的字符序列称为标识符。这些标识符必须遵循如下命名规则：
标识符只能由字母、数字下划线和中文组成，而不能包含空格、标点符号、运算符等其他符号。
标识符的第一个字符必须是字母、下划线或者中文。
标识符不能与JavaScript中的关键字名称相同，例如，if、else等。
例如，下面为合法的标识符：
UserName
Int2
_File_Open
Sex
例如，下面为不合法的标识符：
99BottlesofBeer
Namespace
It's-All-Over
2.2.2 关键字
关键字标识了JavaScript语句的开头或结尾，表2-1所示为JavaScript中的关键字。根据规定，关键字是保留的，不能用作变量名或函数名。
表2-1 JavaScript中的关键字
break case catch continue
default delete do else
finally for function if
in instanceof new return
switch this throw try
typeof var void while
with
JavaScript关键字是不能作为变量名和函数名使用的。
2.2.3 保留字
保留字在某种意义上是为将来的关键字而保留的单词，如表2-2所示为JavaScript中的保留字。因此，保留字不能被用作变量名或函数名。
表2-2 JavaScript中的保留字
abstract boolean byte char
class const debugger double
enum export extends final
float goto implements import
int interface long native
package private protected public
short static super synchronized
throws transient volatile
如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看作关键字，如此将出现关键字错误。
2.2.4 常量
简单地说，常量是字面变量，是固化在程序代码中的信息，常量的值从定义开始就是固定的。常量主要用于为程序提供固定和精确的值，包括数值和字符串，如数字、逻辑值真（true）、逻辑值假（false）等都是常量。
常量通常使用const关键字来声明。语法格式如下：
const
常量名：数据类型=值；
2.2.5 变量
变量，顾名思义，在程序运行过程中，其值可以改变。变量是存储信息的单元，它对应于某个内存空间，变量用于存储特定数据类型的数据，用变量名代表其存储空间。程序能在变量中存储值和取出值，可以把变量比作超市的货架（内存），货架上摆放着商品（变量），可以把商品从货架上取出来（读取），也可以把商品放入货架（赋值）。
1. 变量的命名
实际上，变量的名称是一个标识符。在JavaScript当中，用标识符来命令变量和函数，变量的名称可以是任意长度。创建变量名称时，应该遵循以下命令规则。
第一个字符必须是一个ASCII字符（大小写均可）或一个下划线（_），但是不能是文字。
后续的字符必须是字母、数字或下划线。
变量名称不能是JavaScript的保留字。
JavaScript的变量名是严格区分大小写的。例如：变量名称myCounter与变量名称MyCounter是不同的。
下面给出一些合法的变量命令示例。
_pagecount
Part9
Numer
下面给出一些错误的变量命名示例。
12balloon //不能以数字开头
Summary&Went //“与”符号不能用在变量名称中
2. 变量的声明与赋值
JavaScript是一种弱类型的程序设计语言，变量可以不声明直接使用。所谓声明变量即为变量指定一个名称。声明变量后，就可以把它们用作存储单元。
JavaScript中使用关键字var声明变量，在这个关键字之后的字符串将代表一个变量名。其格式为：
var 标识符;
例如，声明变量username，用来表示用户名，代码如下：
var username;
另外，一个关键字var也可以同时声明多个变量名，多个变量名之间必须用逗号“,”分隔，例如，同时声明变量username、pwd、age，分别表示用户名、密码和年龄，代码如下：
var username,pwd,age;
要给变量赋值，可以使用JavaScript中的赋值运算符，即等于号（=）。
声明变量名时同时赋值，例如，声明变量username，并赋值为“张三”，代码如下：
var username="张三";
声明变量之后，对变量赋值，或者对未声明的变量直接赋值。例如，声明变量age，然后再为它赋值，直接对变量count赋值：
var age; //声明变量
age=18; //对已声明的变量赋值
count=4; //对未声明的变量直接赋值
JavaScript中的变量如果未初始化（赋值），默认值为undefind。
3. 变量的作用范围
所谓变量的作用范围是指可以访问该变量的代码区域。JavaScript中按变量的作用范围分为全局变量和局部变量。
全局变量：可以在整个HTML文档范围中使用的变量，这种变量通常都是在函数体外定义的变量。
局部变量：只能在局部范围内使用的变量，这种变量通常都是在函数体内定义的变量，所以只能在函数体中有效。
省略关键字var声明的变量，无论是在函数体内，还是在函数体外，都是全局变量。
【例2.5】（实例文件：ch02\2.5.html）创建了名为carname的变量，并向其赋值Volvo，然后把它放入id="demo"的HTML段落中。
<!DOCTYPE html>
<html>
<body>
<p>单击这里来创建变量，并显示结果。</p>
<button onclick="myFunction()">单击这里</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction()
{
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
}
</script>
</body>
</html>
在IE 9.0中的浏览效果如图2-6所示。单击其中的“单击这里”按钮，可以看到两个元素发生了变化。如图2-7所示。
图2-6 程序运行结果 图2-7 程序运行结果
一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。
2.3 看透代码中的数据类型
每一种计算机语言除了有自己的数据结构外，还具有自己所支持的数据类型。在JavaScript脚本语言当中，采用的是弱数据方式，即一个数据不必首先做声明，可以在使用或赋值时再确定其数据的类型，当然也可以先声明该数据类型。
2.3.1 typeof 运算符
typeof 运算符有一个参数，即要检查的变量或值。例如：
var sTemp = "test string";
alert (typeof sTemp); //输出 string
alert (typeof 86); //输出 number
对变量或值调用typeof运算符将返回下列值之一。
undefined：如果变量是Undefined类型的。
boolean：如果变量是 Boolean 类型的。
number：如果变量是Number类型的。
string：如果变量是String类型的。
object：如果变量是一种引用类型或Null类型的。
【例2.6】（实例文件：ch02\2.6.html）typeof 运算符的使用。
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
typeof(1);
typeof(NaN);
typeof(Number.MIN_VALUE);
typeof(Infinity);
typeof("123");
typeof(true);
typeof(window);
typeof(document);
typeof(null);
typeof(eval);
typeof(Date);
typeof(sss);
typeof(undefined);
document.write ("typeof(1): "+typeof(1)+"<br>");
document.write ("typeof(NaN): "+typeof(NaN)+"<br>");
document.write ("typeof(Number.MIN_VALUE): "+typeof(Number.MIN_VALUE)+"<br>")
document.write ("typeof(Infinity): "+typeof(Infinity)+"<br>")
document.write ("typeof(\"123\"): "+typeof("123")+"<br>")
document.write ("typeof(true): "+typeof(true)+"<br>")
document.write ("typeof(window): "+typeof(window)+"<br>")
document.write ("typeof(document): "+typeof(document)+"<br>")
document.write ("typeof(null): "+typeof(null)+"<br>")
document.write ("typeof(eval): "+typeof(eval)+"<br>")
document.write ("typeof(Date): "+typeof(Date)+"<br>")
document.write ("typeof(sss): "+typeof(sss)+"<br>")
document.write ("typeof(undefined): "+typeof(undefined)+"<br>")
</script>
</body>
</html>
在IE 9.0中的浏览效果如图2-8所示。
图2-8 程序运行结果
2.3.2 Undefined类型
Undefined是未定义类型的变量，表示变量还没有赋值，如var a;，或者赋予一个不存在的属性值，例如var a=String.notProperty。
此外，JavaScript中有一种特殊类型的数字常量NaN，表示“非数字”，当在程序中由于某种原因发生计算错误后，将产生一个没有意义的数字，此时JavaScript返回的数字值就是NaN。
【例2.7】（实例文件：ch02\2.7.html）使用Undefined。
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var person;
document.write(person + "<br />");
</script>
</body>
</html>
在IE 9.0中的浏览效果如图2-9所示。
图2-9 程序运行结果
2.3.3 Null类型
JavaScript中的关键字null是一个特殊的值，表示空值，用于定义空的或不存在的引用。不过，null不等同于空的字符串或0。由此可见，null与undefined的区别是：null表示一个变量被赋予了一个空值，而undefined则表示该变量还未被赋值。
【例2.8】（实例文件：ch02\2.8.html）使用null。
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var person;
document.write(person + "<br />");
var car=null
document.write(car + "<br />");
</script>
</body>
</html>
在IE 9.0中的浏览效果如图2-10所示。
图2-10 程序运行结果
2.3.4 Boolean类型
布尔类型Boolean表示一个逻辑数值，用于表示两种可能的情况。逻辑真，用true表示；逻辑假，用false来表示。通常，使用1表示真，0表示假。
【例2.9】（实例文件：ch02\2.9.html）使用Boolean类型。
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var b1 = Boolean("");//返回false，空字符串
var b2 = Boolean("s");//返回true，非空字符串
var b3 = Boolean(0);//返回false，数字0
var b4 = Boolean(1);//返回true，非0数字
var b5 = Boolean(-1);//返回true，非0数字
var b6 = Boolean(null);//返回false
var b7 = Boolean(undefined);//返回false
var b8 = Boolean(new Object());//返回true，对象
document.write(b1 + "<br>")
document.write(b2 + "<br>")
document.write(b3 + "<br>")
document.write(b4 + "<br>")
document.write(b5 + "<br>")
document.write(b6 + "<br>")
document.write(b7 + "<br>")
document.write(b8 + "<br>")
</script>
</body>
</html>
在IE 9.0中的浏览效果如图2-11所示。
图2-11 程序运行结果
2.3.5 Number类型
JavaScript的数值类型可以分为4类，即整数、浮点数、内部常量和特殊值。整数可以为正数、0或者负数；浮点数可以包含小数点、也可以包含一个e（大小写均可，在科学记数法中表示“10的幂”）、或者同时包含这两项。整数可以10（十进制）、8（八进制）和16（十六进制）作为基数来表示。
【例2.10】（实例文件：ch02\2.10.html）输出数值。
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var x1=36.00;
var x2=36;
var y=123e5;
var z=123e-5;
document.write(x1 + "<br />")
document.write(x2 + "<br />")
document.write(y + "<br />")
document.write(z + "<br />")
</script>
</body>
</html>
在IE 9.0中的浏览效果如图2-12所示。
图2-12 程序运行结果
2.3.6 String类型
字符串是用一对单引号（' '）或双引号（" "）和引号中的部分构成的。一个字符串也是JavaScript中的一个对象，有专门的属性。引号中间的部分可以是任意多的字符，如果没有则是一个空字符串。如果要在字符串中使用双引号，则应该将其包含在使用单引号的字符串，使用单引号时则反之。
【例2.11】（实例文件：ch02\2.11.html）输出字符串。
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var string1="Bill Gates";
var string2='Bill Gates';
var string3="Nice to meet you!";
var string4="He is called 'Bill'";
var string5='He is called "Bill"';
document.write(string1 + "<br>")
document.write(string2 + "<br>")
document.write(string3 + "<br>")
document.write(string4 + "<br>")
document.write(string5 + "<br>")
</script>
</body>
</html>
在IE 9.0中的浏览效果如图2-13所示。
图2-13 程序运行结果
2.3.7 Object类型
前面介绍的5种数据类型是JavaScript的原始数据类型，而Object是对象类型。该数据类型中包括Object、Function、String、Number、Boolean、Array、Regexp、Date、Globel、Math、Error，以及宿主环境提供的Object类型。
【例2.12】（实例文件：ch02\2.12.html）Object数据类型的使用。
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
</script>
</body>
</html>
在IE 9.0中的浏览效果如图2-14所示。
图2-14 程序运行结果
2.4 明白数据间的计算法则——运算符
在JavaScript的程序中要完成各种各样的运算，是离不开运算符的。它用于将一个或几个值进行运算而得出所需要的结果值。在JavaScript中，按运算符类型可以分为算术运算符、比较运算符、位运算符、赋值运算符、逻辑运算符和条件运算符等。
2.4.1 算术运算符
算术运算符是最简单、最常用的运算符，所以有时也称它们为简单运算符，可以使用它们进行通用的数学计算。
JavaScript语言中提供的算术运算符有“+”、“-”、“*”、“/”、“%”、“++”、“--”这7种，如表2-3所示。分别表示加、减、乘、除、求余数、自增和自减。其中“+”、“-”、“*”、“/”、“%”这5种为二元运算符，表示对运算符左右两边的操作数作算术，其运算规则与数学中的运算规则相同，即先乘除后加减。“++”、“--”两种运算符都是一元运算符，其结合性为自右向左。在默认情况下，表示对运算符右边的变量的值增1或减1，而且它们的优先级比其他算术运算符高。
表2-3 算术运算符
运算符 说明 示例
+ 加法运算符，用于实现对两个数字进行求和 x+100、100+1000、+100
- 减法运算符或负值运算符 100-60、-100
* 乘法运算符 100*6
/ 除法运算符 100/50
% 求模运算符，也就是算术中的求余 100%30
++ 将变量值加1后再将结果赋值给该变量 x++用于在参与其他运算之前先将自己加1后，再用新的值参与其他运算
++x用于先用原值与其他运算后，再将自己加1
-- 将变量值减1后再将结果赋值给该变量 x--、--x，与++的用法相同
【例2.13】（实例文件：ch02\2.13.html）通过JavaScript在页面中定义变量，再通过运算符计算变量的运行结果。
<!DOCTYPE html>
<html>
<head>
<title>运用JavaScript运算符</title>
</head>
<body>
<script type="text/javascript">
var num1=120,num2 = 25; //定义两个变量
document.write("120+25=" + (num1+num2)+"<br>"); //计算两个变量的和
document.write("120-25="+(num1-num2)+"<br>"); //计算两个变量的差
document.write("120*25="+(num1*num2)+"<br>"); //计算两个变量的积
document.write("120/25="+(num1/num2)+"<br>"); //计算两个变量的余数
document.write("(120++)="+(num1++)+"<br>"); //自增运算
document.write("++120="+(++num1)+"<br>");
</script>
</body>
</html>
在IE 9.0中的浏览效果如图2-15所示。
图2-15 程序运行结果
2.4.2 比较运算符
比较运算符用于对运算符的两个表达式进行比较，然后根据比较结果返回布尔类型的值true或false，例如，比较两个值是否相同或比较两个数字值的大小等。在表2-4中列出了JavaScript支持的比较运算符。
表2-4 比较运算符
运算符 说明 示例
== 判断左右两边的表达式是否相等，当左边表达式等于右边表达式时返回true，否则返回false Number == 100
Number1 == Number2
!= 判断左边表达式是否不等于右边表达式，当左边表达式不等于右边表达时返回true，否则返回false Number != 100
Number1 != Number2
> 判断左边表达式是否大于右边表达式，当左边表达式大于右边表达式时返回true，否则返回false Number > 100
Number1 > Number2
>= 判断左边表达式是否大于等于右边表达式，当左边表达式大于等于右边表达式时返回true，否则返回false Number >= 100
Number1 >= Number2
< 判断左边表达式是否小于右边表达式，当左边表达式小于右边表达式时返回true，否则返回false Number < 100
Number1 < Number2
<= 判断左边表达式是否小于等于右边表达式，当左边表达式小于等于右边表达式时返回true，否则返回false Number <= 100
Numer <= Number2
【例2.14】（实例文件：ch02\2.14.html）使用比较运算符比较两个数值的大小。
<!DOCTYPE html>
<html>
<head>
<title>比较运算符的使用</title>
</head>
<body>
<script type="text/javascript">
var age = 25; //定义变量
document.write("age变量的值为："+age+"<br>"); //输出变量值
document.write("age>=20："+(age>=20)+"<br>"); //实现变量值比较
document.write("age<20："+(age<20)+"<br>");
document.write("age!=20："+(age!=20)+"<br>");
document.write("age>20："+(age>20)+"<br>");
</script>
</body>
</html>
在IE 9.0中的浏览效果如图2-16所示。
图2-16 程序运行结果
2.4.3 位运算符
任何信息在计算机中都是以二进制的形式保存的。位运算符就是对数据按二进制位进行运算的运算符。JavaScript语言中的位运算符有：“&（与）”、“|（或）”、“^（异或）”、“~（取补）”、“<<（左移）”、“>>（右移）”，如表2-5所示。其中，取补运算符为一元运算符，而其他的位运算符都是二元运算符。这些运算都不会产生溢出。位运算符的操作数为整型或者是可以转换为整型的任何其他类型。
表2-5 位运算符
运算符 描述
& 与运算，操作数中的两个位都为1，结果为1，两个位中有一个为0，结果为0
｜ 或运算，操作数中的两个位都为0，结果为0，否则，结果为0
^ 异或运算，两个操作位相同时，结果为0，不相同时，结果为1
~ 取补运算，操作数的各个位取反，即1变以0，0变为1
<< 左移位，操作数按位左移，高位被丢弃，低位顺序补0
>> 右移位，操作数按位右移，低位被丢弃，其他各位顺序一次右移
【例2.15】（实例文件：ch02\2.15.html）输出十进制数18的二进制数。
<!DOCTYPE html>
<html>
<body>
<h1>输出十进制18的二进制数</h1>
<script type="text/javascript">
var iNum = 18;
alert(iNum.toString(2));
</script>
</body>
</html>
在IE 9.0中的浏览效果如图2-17所示。18的二进制数只用了前5位，它们是这个数字的有效位。把数字转换成二进制字符串，就能看到有效位。这段代码只输出10010，而不是18的32位表示。是因为其他的数位并不重要，仅使用前5位即可确定这个十进制数值。
图2-17 程序运行结果
2.4.4 逻辑运算符
逻辑运算符通常用于执行布尔运算，它们常和比较运算符一起使用来表示复杂比较运算，这些运算涉及的变量通常不止一个，而且常用于if、while和for语句中。表2-6中列出了JavaScript支持的逻辑运算符。
表2-6 逻辑运算符
运算符 说明 示例
&& 逻辑与，若两边表达式的值都为true，则返回true；任意一个值为false，则返回false 100>60 &&100<200 返回true
100>50&&10>100 返回false
|| 逻辑或，只有表达式的值都为false时，才返回false 100>60||10>100 返回true
100>600||50>60 返回false
! 逻辑非，若表达式的值为true，则返回false，否则返true !(100>60)返回false
!(100>600)返回true
【例2.16】（实例文件：ch02\2.16.html）逻辑运算符的使用。
<!DOCTYPE html>
<html>
<body>
<h1>逻辑运算符的使用</h1>
<script type="text/javascript">
var a=true,b=false;
document.write(!a);
document.write("<br />");
document.write(!b);
document.write("<br />");
a=true,b=true;
document.write(a&&b);
document.write("<br />");
document.write(a||b);
document.write("<br />");
a=true,b=false;
document.write(a&&b);
document.write("<br />");
document.write(a||b);
document.write("<br />");
a=false,b=false;
document.write(a&&b);
document.write("<br />");
document.write(a||b);
document.write("<br />");
a=false,b=true;
document.write(a&&b);
document.write("<br />");
document.write(a||b);
</script>
</body>
</html>
在IE 9.0中的浏览效果如图2-18所示。
图2-18 程序运行结果
从运行结果可以看出逻辑运算符的规律如下。
true的!为false，false的!为true。
a&&b：a, b全true表达式为true，否则表达式为false。
a||b：a, b全false表达式为false，否则表达式为true。
2.4.5 条件运算符
除了上面介绍的常用运算符外，JavaScript还支持条件表达式运算符“?”，这个运算符是个三元运算符，它有三个部分：一个计算值的条件和两个根据条件返回的真假值，格式如下所示：
条件 ? 表示式1 : 表达式2
在使用条件运算符时，如果条件为真，则表达值使用表达式1的值，否则使用表达式2的值。示例如下：
( x > y ) ? 100*3 : 11
如果x的值大于y值，则表达式的值为300；否则x的值小于或等于y值时，表达式值为11。
【例2.17】（实例文件：ch02\2.17.html）
<!DOCTYPE html>
<html>
<body>
<h1>条件运算符的使用</h1>
<script type="text/javascript">
var a=3;
var b=5;
var c=b-a;
document.write(c+"<br>");
if(a>b)
{ document.write("a大于b<br>");}
else
{ document.write("a小于b<br>");}
document.write(a>b?"2":"3");
</script>
</body>
</html>
上面代码创建了两个变量a和b，变量c的值是b和a的差。下面使用if语句判断a和b的大小，并输出结果。最后使用了一个三元运算符，如果a>b，则输出2，否则输出3。<br>表示在网页中换行，“+”是一个连接字符串。
在IE 9.0中的浏览效果如图2-19所示，可以看到网页输出了JavaScript语句执行结果。
图2-19 条件运算符的使用
2.4.6 赋值运算符
赋值就是把一个数据赋值给一个变量。例如，myName="张三"的作用是执行一次赋值操作。把常量"张三"赋值给变量myName。赋值运算符为二元运算符，如表2-7所示，要求运算符两侧的操作数类型必须一致。JavaScript中提供有简单赋值运算符和复合赋值运算符两种。
表2-7 赋值运算符
运算符 说明 示例
= 将右边表达式的值赋值给左边的变量 Username="Bill"
+= 将运算符左边的变量加上右边表达式的值赋值给左边的变量 a+=b //相当于a=a+b
-= 将运算符左边的变量减去右边表达式的值赋值给左边的变量 a-=b //相当于a=a-b
*= 将运算符左边的变量乘以右边表达式的值赋值给左边的变量 a*=b //相当于a=a*b
/= 将运算符左边的变量除以右边表达式的值赋值给左边的变量 a/=b //相当于a=a/b
%= 将运算符左边的变量用右边表达式的值求模，并将结果赋给左边的变量 a%=b //相当于a=a%b
&= 将运算符左边的变量与右边表达式的变量进行逻辑与运算，将结果赋给左边的变量 a&=b //相当于a=a&b
|= 将运算符左边的变量与右边表达式的变量进行逻辑或运算，将结果赋给左边的变量 a|=b //相当于a=a||b
^= 将运算符左边的变量与右边表达式的变量进行逻辑异或运算，将结果赋给左边的变量 a^=b //相当于a=a^b
在书写复合赋值运算符时，两个符号之间一定不能有空格，否则将会出错。
【例2.18】（实例文件：ch02\2.18.html）赋值运算符的使用。
<!DOCTYPE html>
<html>
<body>
<h3>赋值运算符的使用规则</h3>
<p><strong>如果把数字与字符串相加，结果将成为字符串。</strong></p>
<script type="text/javascript">
x=5+5;
document.write(x);
document.write("<br />");
x="5"+"5";
document.write(x);
document.write("<br />");
x=5+"5";
document.write(x);
document.write("<br />");
x="5"+5;
document.write(x);
document.write("<br />");
</script>
</body>
</html>
在IE 9.0中的浏览效果如图2-20所示。
图2-20 程序运行结果
2.4.7 运算符优先级
运算符的种类非常多，通常不同的运算符又构成了不同的表达式，甚至一个表达式中又包含有多种运算符，因此运算方法应该有一定的规律性。JavaScript语言规定了各类运算符的运算级别及结合性等，见表2-8所示。
表2-8 运算符优先级别列表
优先级(1最高) 说明 运算符 结合性
1 括号 () 从左到右
2 自加/自减运算符 ++/-- 从右到左
3 乘法运算符、除法运算符、取模运算符 *、/、% 从左到右
4 加法运算符、减法运算符 +、- 从左到右
5 小于、小于等于、大于、大于等于 <、<=、>、>= 从左到右
6 等于、不等于 ==、!= 从左到右
7 逻辑与 && 从左到右
8 逻辑或 || 从左到右
9 赋值运算符和快捷运算符 =、+=、*=、/=、%=、-= 从右到左
建议在写表达式的时候，如果无法确定运算符的有效顺序，则尽量采用括号来保证运算的顺序，这样也使得程序一目了然，而且自己在编程时也能够思路清晰。
【例2.19】（实例文件：ch02\2.19.html）运算符的优先级。
<!DOCTYPE html>
<html>
<head>
<title>运算符的优先级</title>
</head>
<body>
<script language="javascript">
var a=1+2*3; //按自动优先级计算
var b=(1+2)*3; //使用()改变运算优先级
alert("a="+a+"\nb="+b); //分行输出结果
</script>
</body>
</html>
在IE 9.0中的浏览效果如图2-21示。
图2-21 程序运行结果
2.5 JavaScript的表达式
表达式是一个语句的集合，像一个组一样，计算结果是个单一值，然后该结果被JavaScript归入下列数据类型之一：布尔、数字、字符串、对象等。
一个表达式本身可以是一个数字或者变量，或者它可以包含许多连接在一起的变量关键字以及运算符。例如，表达式x/y，分别使自由变量x和y定值为10和5，其输出为数字2；但在y值为0时则没有定义，一个表达式的赋值和运算符的定义以及数值的定义域是有关联的。
2.5.1 赋值表达式
在JavaScript中，赋值表达式的一般语法形式为：“变量 赋值运算符 表达式”，在计算过程中是按照自右而左结合的。其中有简单的赋值表达式，如i=1；也有定义变量时，给变量赋初始值的赋值表达式，如var str="Happy World！"；还有使用比较复杂的赋值运算符连接的赋值表达式，如k+=18。
【例2.20】（实例文件：ch02\2.20.html）赋值表达式的用法。
<!DOCTYPE html>
<html>
<head>
<title>赋值表达式</title>
<body>
<script language="javascript">
<!--
var x = 15;
document.write("<p>目前变量x的值为：x="+ x);
x+=x-=x*x;
document.write("<p>执行语句“x+=x-=x*x”后，变量x的值为：x="+ x);
var y = 15;
document.write("<p>目前变量y的值为：y="+ y);
y+=(y-=y*y);
document.write("<p>执行语句“y+=(y-=y*y)”后，变量y的值为：y=" +y);
//-->
</script>
</body>
</head>
</html>
在上述代码中，表达式 x+=x-=x*x的运算流程如下：先计算x=x-(x*x)，得到x=-210，再计算x=x+(x-=x*x)，得到x=-195。同理，表达式y+=(y-=y*y)的结果为x=-195，如图2-22所示。
图2-22 程序运行结果
由于运算符的优先级规定较多并且容易混淆，为提高程序的可读性，在使用多操作符的运算时，尽量使用括号“()”来保证程序的正常运行。
2.5.2 算术表达式
算术表达式就是用算术运算符连接的JavaScript语句。如i+j+k;、20-x;、a*b;、j/k;、sum%2;等即为合法的算术运算符的表达式。算术运算符的两边必须都是数值，若在“+”运算中存在字符或字符串，则改表达式将是字符串表达式，因为JavaScript会自动将数值型数据转换成字符串型数据。例如，“"好好学习"+i+"天天向上"+j;”表达式将被看作是字符串表达式。
2.5.3 布尔表达式
布尔表达式一般用来判断某个条件或者表达式是否成立，其结果只能为true或false。
【例2.21】（实例文件：ch02\2.21.html）布尔表达式的用法。
<!DOCTYPE html>
<html>
<head>
<title>布尔表达式</title>
<body>
<script language="javascript" type="text/javaScript">
<!--
function checkYear()
{
var txtYearObj = document.all.txtYear; //文本框对象
var txtYear = txtYearObj.value;
if((txtYear == null) || (txtYear.length < 1)||(txtYear < 0))
{ //文本框值为空
window.alert("请在文本框中输入正确的年份！");
txtYearObj.focus();
return;
}
if(isNaN(txtYear))
{ //用户输入不是数字
window.alert("年份必须为整型数字！");
txtYearObj.focus();
return;
}
if(isLeapYear(txtYear))
window.alert(txtYear + "年是闰年！");
else
window.alert(txtYear + "年不是闰年！");
}
function isLeapYear(yearVal) //*判断是否闰年
{
if((yearVal % 100 == 0) && (yearVal % 400 == 0))
return true;
if(yearVal % 4 == 0) return true;
return false;
}
//-->
</script>
<form action="#" name="frmYear">
请输入当前年份：
<input type="text" name="txtYear">
<p>请单击按钮以判断是否为闰年：
<input type="button" value="按钮" onclick="checkYear()">
</form>
</body>
</head>
</html>
在代码中多次使用布尔表达式进行数值的判断。运行该段代码，在显示的文本框中输入2010，单击“确定”按钮后，系统先判断文本框是否为空，再判断文本框输入的数值是否合法，最后判断其是否为闰年并弹出相应的提示框，如图2-23所示。
图2-23 程序运行结果
同理，如图输入值为2012，具体的显示效果如图2-24所示。
图2-24 程序运行结果
2.5.4 字符串表达式
字符串表达式是操作字符串的JavaScript语句。JavaScript的字符串表达式只能使用“+”与“+=”两个字符串运算符。如果在同一个表达式中既有数字又有字符串，同时还没有将字符串转换成数字的方法，则返回值一定是字符串型。
【例2.22】（实例文件：ch02\2.22.html）字符串表达式的用法。
<!DOCTYPE html>
<html>
<head>
<title>字符串表达式</title>
<body>
<script language="javascript">
<!--
var x = 10;
document.write("<p>目前变量x的值为：x="+ x);
x=1+4+8;
document.write("<p>执行语句“x=1+4+8”后，变量x的值为：x="+ x);
document.write("<p>此时，变量x的数据类型为："+ (typeof x));
x=1+4+'8';
document.write("<p>执行语句“x=1+4+'8'”后，变量x的值为：x="+ x);
document.write("<p>此时，变量x的数据类型为："+ (typeof x));
//-->
</script>
</body>
</head>
</html>
运行上述代码，对于一般表达式1+4+8，将三者相加和为13；而在表达式1+4+'8'中，表达式按照从左至右的运算顺序，先计算数值1、4的和，结果为5；再计算之后的和转换成字符串型，与最后的字符串连接；最后得到的结果是字符串58，如图2-25所示。
图2-25 程序运行结果
2.5.5 类型转换
相对于强类型语言，JavaScript的变量没有预定类型，其类型相应于包含值的类型。当对不同类型的值进行运算时，JavaScript解释器将自动把数据类型之一改变（强制转换）为另一种数据类型，再执行相应运算。除自动类型转换外，为避免自动转换或不转换产生的不良后果，有时需要手动进行显式的类型转换，此时可利用JavaScript中提供的进行类型转换工具，如parseInt()方法和parseFloat()方法等。
【例2.23】（实例文件：ch02\2.23.html）字符串型转换为逻辑型数据。
<!DOCTYPE html>
<html>
<head>
<title>类型转换</title>
<body>
<script language="javascript">
<!--
var x = "happy"; // x值为非空字符串
if (x)
{
alert("字符串型变量x 转换为逻辑型后，结果为true");
}
else
{
alert("字符串型变量x 转换为逻辑型后，结果为false");
}
//-->
</script>
</body>
</head>
</html>
代码运行结果如图2-26所示。对于非空字符串变量x，按照数据类型转换规则，自动转换为逻辑型后结果为true。
图2-26 程序运行结果
2.6 实战演练——局部变量和全局变量的优先级
在函数内部，局部变量的优先级高于同名的全局变量。也就是说，如果存在与全局变量名称相同的局部变量，或者在函数内部声明了与全局变量同名的参数，则该全局变量将不再起作用。
<!DOCTYPE html>
<html>
<head>
<title>变量的优先级</title>
<body>
<script language="javascript">
<!--
var scope="全局变量";//声明一个全局变量
function checkscope()
{
var scope="局部变量";//声明一个同名的局部变量
document.write(scope);//使用的是局部变量，而不是全局变量
}
checkscope();//调用函数，输出结果
//-->
</script>
</body>
</head>
</html>
在IE 9.0中的浏览效果如图2-27所示，页面中将输出“局部变量”。
图2-27 程序运行结果
“注意”虽然在全局作用域中可以不使用var声明变量，但声明局部变量时，一定要使用var语句。
JavaScript没有块级作用域，函数中的所有变量无论是在哪里声明的，在整个函数中都有意义。
<!DOCTYPE html>
<html>
<head>
<title>变量的优先级</title>
<body>
<script language="javascript">
<!--
var scope="全局变量";//声明一个全局变量
function checkscope()
{
alert(scope); //调用局部变量，将显示undefined而不是“局部变量”
var scope="局部变量";//声明一个同名的局部变量
alert(scope);//使用的是局部变量，将显示“局部变量”
}
checkscope();//调用函数，输出结果
//-->
</script>
</body>
</head>
</html>
程序运行结果如图2-28所示。单击“确定”按钮，弹出结果如图2-29所示。
图2-28 程序运行结果 图2-29 程序运行结果
在本例中，用户可能认为因为声明局部变量的var语句还没有执行而调用全局变量scope，但由于“无块级作用域”的限制，局部变量在整个函数体内是有定义的。这就意味着在整个函数体中都隐藏了同名的全局变量，因此，输出的并不是“全局变量”。虽然局部变量在整个函数体都是有定义的，但在执行var语句之前不会被初始化。
2.7 疑难解惑
1. 变量名有哪些命名规则？
变量名以字母、下划线或美元符号（$）开头。例如，txtName与_txtName都是合法的变量名，而1txtName和&txtName都是非法的变量名。变量名只能由字母、数字、下划线和美元符号（$）组成，其中不能包含标点与运算符，不能用汉字做变量名。例如，txt%Name、名称文本、txt-Name都是非法变量名。不能用JavaScript保留字做变量名。例如，var、enum、const都是非法变量名。JavaScript对大小写敏感。例如，变量txtName与txtname是两个不同的变量，两个变量不能混用。
2. 声明变量具有哪几种规则？
可以使用一个关键字var同时声明多个变量，如语句var x,y;就同时声明了x和y两个变量。可以在声明变量的同时对其赋值（称为初始化），例如var president = "henan";var x=5,y=12;声明了三个变量president、x和y，并分别对其进行了初始化。如果出现重复声明的变量，且该变量已有一个初始值，则此时的声明相当于对变量的重新赋值。如果只是声明了变量，并未对其赋值，其值缺省为undefined。var语句可以用作for循环和for/in循环的一部分，这样可使得循环变量的声明成为循环语法自身的一部分，使用起来较为方便。
3. 比较运算符“==”与赋值运算符“=”的不同之处在于什么地方？
在各种运算符中，比较运算符“==”与赋值运算符“=”完全不同，运算符“=”用于给操作数赋值；而运算符“==”用于比较两个操作数的值是否相等。如果在需要比较两个表达式的值是否相等的情况下，错误的使用赋值运算符“=”，则会将右操作数的值赋给左操作数。
作者: 刘增杰，陈伟光，刘玉萍，张俊彬
isbn: 7302375232
书名: JavaScript从零开始学：视频教学版
页数: 444
定价: 65.00元
出版社: 清华大学出版社
装帧: 平装
出版年: 2014-10-1