第3章JavaScript基础,怎么打开隐藏的文件

文件 0
第3章JavaScript基础 JS即JavaScript，属于网络的脚本语言，JavaScript被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多应用。
下面学习JavaScript的相关知识。
本章主要内容：“JavaScript简介“JavaScript基础“流程控制语句“函数的定义与调用“事件处理“常用对象“DOM技术“异常控制语句 3.1JavaScript简介 JavaScript是一种由Netscape的LiveScript发展而来的、原型化继承的、面向对象的、动态类型的、区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费时间太多。
于是，Netscape的浏览器Navigator加入了JavaScript，提供了数据验证的基本功能。
JavaScript既是一种描述性语言，也是一种基于对象（Object）和事件驱动（EventDriven），并具有安全性能的脚本语言。
使用它的目的是与HTML超文本标记语言一起实现在一个Web页面中链接多个对象，并与Web客户端实现交互效果。
无论是在客户端还是在服务器端，JavaScript应用程序都要下载到浏览器的客户端执行，从而减轻服务器端的负担。
3.1.1JavaScript基本结构 JavaScript代码是用结束标记为止。
最后浏览器将检查JavaScript语句的语法，如果有任何错误，就会在警告框中显示出来，如果没有错误，客户端浏览器将编译并执行语句。
JavaScript脚本的基本结构如下。
JavaWeb -JavaScript脚本代码片段1JavaScript脚本代码片段2JavaScript脚本代码片段3….--> language属性用于指定编写脚本使用哪一种脚本语言，脚本语言是浏览器用于解释脚 本的语言，通过该属性还可以指定使用的脚本语言的版本。
---->是注释标记，--表示开始注释标记，-->表示结束注释标记，此标记告知不支 持脚本的浏览器忽略标记中包含的语句。
此标记是可选的，但最好在脚本中使用此标记， 可确保不支持脚本的浏览器会忽略嵌入到
HTML文档中的JavaScript语句。
实 下面通过一个实例了解JavaScript的基本用法。
战开 发 完 全 JavaScript的基本用法 学 习 document.write("JavaScript世界欢迎您！"); 手册a迎来到JavaScript的脚本世界！"); 在上述代码中，document.write()方法类似于Java语言中的print()函数，表示向页面输出显示信息。
alert()方法表示弹出一个提示框，用于显示弹出信息，上述代码执行效果如图3-1所示。
图3-1JavaScript的基本用法90 JavaScript 理论上，可以将JavaScript语句放置在HTML文档中的任意位置。
然而，将其放置在标签之间是一个良好的编程习惯，因为这样确保了所有代码在从body部分调用之前被阅读和执行。
3.1.2JavaScript脚本的执行原理 了解了JavaScript脚本的基本结构，下面再来了解脚本的执行原理。
在脚本的执行过程中，客户端浏览器与应用服务器之间采用请求/响应模式进行交互。
第3章 基础 图3-2脚本执行原理 如图3-2所示，交互过程如下。

（1）浏览器接收到用户的请求：用于输入要访问的网址（包含JavaScript脚本）。

（2）客户端浏览器向服务器请求某个包含JavaScript脚本的页面，浏览器将请求消息发送至服务器，等待服务器的响应。

（3）应用服务器向客户端浏览器发送响应消息，也就是把含有JavaScript脚本的HTML文件发送至客户端，然后由客户端浏览器由上至下逐行解析HTML标记和JavaScript脚本，并将解析结果呈现给用户。
使用JavaScript脚本的好处如下。

（1）含有脚本的页面只需在第一次请求时下载一次即可，从而减少了不必要的网络通信。

（2）JavaScript脚本是由客户端浏览器执行，而不是服务器端执行，从而减轻了服务器端的 压力。
3.1.3解释型语言 对程序来说，计算机需要一个“翻译”，即把程序代码变成由0和1组成的包含信息的序列、计算机可以理解的二进制语言。
目前存在编译和解释两种翻译类型。
两种方式都需要对代码进行翻译，只是翻译的时间不同而已。
编译型语言在计算机运行代码前，需要先把代码翻译成计算机可以理解的文件，如 91 JavaWeb EXE文件，这个EXE文件只需要经过一次编译就可以运行了，而且除非修改代码，否则都不需要重新编译，所以编译型语言的程序执行效率高。
解释型语言则不同，解释型语言的程序不需要在运行前编译，在运行程序时才翻译，专门的解释器负责在每个语句执行时解释程序代码。
这样解释型语言每执行一次就要翻译一次，效率比较低。
由于JavaScript属于解释型语言，这就表示每句代码只有在运行时，系统才知道这句代码是否有错，就是说，由于编译型语言在运行前进行了编译，编译器对所有代码都进行了检查，这样就不会产生一些低级错误。
但是由于JavaScript语言的性质决定了目前的大部分工具对JavaScript脚本语言的调试都支持得不是很好，这就需要开发者更细心、更专心地对付这些脚本了。
3.2JavaScript的基础 实 战开 JavaScript像Java一样，也是一门编程语言，有其自身的基本数据类型、表达式、运 发 算符号和逻辑控制语句等基本语法。
JavaScript通过数据类型来处理数字和文字、通过变量 完全 提供存放信息的地方，通过表达式完成较为复杂的信息处理等，下面学习JavaScript的 学 基础。
习 手册3.2.1数据类型 在JavaScript脚本语言中有如下四种基本数据类型。

1．字符串类型用双引号或单引号括起来的字符或数值，这是程序中使用最广的一种类型。
JavaScript将字符串类型定义为由0个或多个16位无符号整数组成的有限序列，如"abc123"或""。
引号用来表示这是一个字符串类型的值，注意是英文引号。
在字符串序列中的每个字符都有一个索引值，用来定位字符的位置，例如，第一个字符的索引值是
0，第二个字符是
1，以此类推。
字符串的长度用一个正整数来表示，字符串序列中有几个字符，它的长度就是几，如"abc"的长度是
3，代码如下所示。
varn="abc";alert(n.length); 运行效果如图3-3所示。
92 JavaScript 第3章 图3-3非空字符串长度 如果没有字符，像空字符串""，它的长度就是
0，把图3-3中的代码变量n值变为空，运行效果如图3-4所示。
基础 图3-4空字符串长度 对初学者而言，一个容易混淆的概念就是空字符串，应该把空字符串和空值（null）区分开来。
例如： //空字符串，表示变量str的值是一个字符串，字符串内容为空varstr="";//空值，表示变量str的值是空varstr=null; JavaScript不区分单引号或者双引号，其功能相同，但应该防止出现引号不匹配的情况，例如： varstr='abc";//或varstr="abc'; 93 JavaWeb 防止出现这类情况最好的办法是先写一对引号，再写中间的内容。
如果想在字符串内使用单/双引号作为字符的话，注意不要与字符串界限符（字符串的开始和结束）发生冲突。
例如： varstr="Shesaid"howcouldthisbe""; 这是一个错误的字符串格式，字符串内容中的双引号和字符串界限符发生了冲突，结果就是语法错误，避免这种情况最好的方法就是使用单/双引号混合，例如： varstr="Shesaid'howcouldthisbe'"; 这样就不会有问题了，但如果内容中必须要用双引号，或者单/双引号都要作为字符串 的值出现时，就要使用转义字符了。

2．数值类型 实 包括常用的整数和实数。
JavaScript
中的数值类型为64位双精度浮点类型，遵循二进 战 制浮点数算术标准IEEE754（美国电气和电子工程师协会标准）。
IEEE754标准详细描述 开发了浮点数的组成及范围大小等。
完 数值类型可以通过整数、小数及各种不同的进制格式来表示。
JavaScript中没有针对整 全学数的类别，这跟其他服务端编程语言是不大相同的——通常小数和整数会被分别存储在不 习 同的类别中。
手册下面观察JavaScript中所能表示的各种数值类型及不同的格式。
//十进制 varnum=100; //十进制小数varnum=1.919; //八进制varnum=010; //十六进制varnum=0xFD; //科学计数法varnum=9.99e+9; 不管参与运算的变量值是什么进制的数值，但计算结果仍然会是十进制，如下面的例子。
//不同格式数值的混合运算varn1=010;varn2=0xFD;alert(n1*n2); 94 JavaScript 运行结果如图3-5所示。
第3章 图3-5不同格式的数值混合计算的结果 数值类型有三个特殊的常量值，分别是NaN、+Infinity和-Infinity。

（1）NaN。
NaN的全称是NotaNumber，非数值常量表示一个值并不是合法的数值形式，它通常基础用来验证一个变量的值是否是数值。
虽然NaN本身是系统已经提供的常量，但通常不与它进行直接比较，而且这种比较也是无法得到正确的结果，例如： varstr1='abc';alert(str1==NaN); 运行结果如图3-6所示。
图3-6确认变量是否为数值
(1) 从图3-5中可以看到，显然通过与NaN比较是不行的，要想得到正确结果，应该使用isNaN函数进行判断。
isNaN()函数用于检查其参数是否是非数字值，例如： varstr1='abc';alert(isNaN(str1)); 运行结果如图3-7所示。
95 JavaWeb 图3-7确认变量是否为数值
(2)
（2）+Infinity。
正无穷常量表示一个数值表达式的计算结果是无穷大，JavaScript规定大于或等于
2 的1024次方的数为无穷，例如： 实 战 alert(Math.pow(2,1024)); 开 Math.pow()返回指定数字的指定次幂。
发 完 运行结果如图3-8所示。
全 学 习 手 册 图3-8正无穷
（3）-Infinity。
负无穷常量与正无穷相反，但它们的数量级是相同的，例如： alert(-Math.pow(2,1024)); 运行结果如图3-9所示。
图3-9负无穷96
3．布尔值使用true或false表示的值。
布尔类型也就是真假类型，这个类型有两个标准值，true（真）、false（假）。
布尔值用来表示一个逻辑表达式的结果，通常用于判断处理，如1<
2，这个逻辑表达式的值就为true，反之则为false，如图3-10所示。
JavaScript 第3章 图3-10布尔表达式
4．空值 基 这个类型只有一个值——null。
null是一个占位符，表示一个变量已经有值，但值为空。
础 不同于undefined，null值通常产生在程序运行当中。
当变量不再被使用时，将变量赋值为 null，以释放存储空间。

5．引用类型 相对于以上的几种基本类型外，引用类型最大的不同在于变量值的存储方式。
对基本 类型来说，变量中存储的是值本身，如图
3-11所示。
而引用类型存储x的是值所在内存空间的地址，也就是指针，如图3-12所示。
varn=12345; varn=‘string’; varobj=Object; 图3-11基本类型内存地址0xFF1D 图3-12引用类型 引用类型通常被认为是类，而它的值就是对象。
对象是一种特殊的值，相当于集合。
可以通过（点运算符）访问集合内部的值，如obj.name。
引用对象的地址是因为，对象的大小无法像基本类型那样确定，例如，数值最大64bit， 97 JavaWeb 布尔值只有真和假等，集合的大小不是固定的，计算机在分配存储空间时是在堆上分配。
而基本类型则是在栈上分配空间，便于迅速查找变量值。
字符串类型在JavaScript中有点特殊，在其他编程语言中，它都是引用类型，因为字符串的长度不是固定的。
但在JavaScript规范中，它被定义为基本类型，但这只是对使用而言。
下面的例子演示了基本类型和引用类型在存储方面的差异。
//值传递varnum1=1;varnum2=num1;num1=2;alert(num2); 运行结果如图3-13所示。
实战开发完全学习手册 图3-13基本类型的值传递 图3-13演示了基本类型的值传递，当把变量num1的值赋值给变量num2时，是把变量num1所存储的值1赋给了变量num2，所以，后面把变量num1的值改为2时，对变量num2没有影响，变量num2的值仍然为
1。
而下面的代码就不同了。
//引用传递vara=Object;varb=a;a.name='ylem';alert(b.name); 运行结果如图3-14所示。
图3-14演示了引用类型的引用传递，变量a的值为对象Object的指针，当把变量a赋值给变量b时，b存储的只是和a一样的指针，都指向Object。
当通过变量a的引用把Object的name属性改变后，通过变量b的引用也发生了改变，因为它们引用的是同一个对象。
98 JavaScript 图3-14引用类型的引用传递 第 3章 使用引用类型赋值时需要特别小心，因为被赋值的变量和原变量引用了同一个对象， 修改任意一个引用时，另一个也会受影响。
3.2.2JavaScript中的常量 基常量是一种固定不变的数据类型。
在JavaScript程序中的常量一旦定义了数值，则会础一直保持固定的数值直至程序运行结束。
JavaScript中主要包含以下类型的常量。

1．整型常量JavaScript的常量通常又称为字面常量，它是不能改变的数据，其整形常量可以用十六进制、八进制和十进制来表示其具体值。

2．实型常量实型常量由整数部分和小数部分共同表示，如24.56和391.92等，也可以使用科学计数法表示，如5E6和4E3等。

3．布尔值布尔常量只有true和false两种状态，其主要功能用来说明或代表一种对象的状态或标志，以说明操作流程。
JavaScript中的布尔值与C++不同。
C++可以用0或1表示其状态，而JavaScript只能用False或True来表示其状态。

4．字符型常量字符型常量即使用单引号或双引号括起来的一个或几个字符，如“HelloWorldJavaScript”、“1234”和“hello7.2”等。

5．空值JavaScript中只有一个空值NULL，表示什么也没有。

6．特殊字符JavaScript中以反斜杠（\）开头的不可显示的特殊字符，通常称为控制字符，可以作为脚本代码的注释。
99 JavaWeb 3.2.3JavaScript中的变量 变量是指可以变化的数据类型，变量一经定义后可以根本程序的需要而代表不同的数值。
变量的主要功能是存取数据和提供存放信息的容器。
变量以非数字的符号来表达。
变量是常数的相反。
在变量使用时必须明确变量的命名、类型、声明和其作用域。

1．变量的声明变量声明语法如下。
var变量名;JavaScript通过关键字var来声明一个变量。
在关键字和变量名之间至少要有一个空格。
变量名需要遵守一定的规范，至少不应该出现中文及特殊字符。
分号表示代码的分隔，在JavaScript中不是必须的，如果一行只有一条语句，分号是可以忽 实 略的，但笔者的意见是，除非JavaScript中明确规定不能写分号，否则在任何时候都不要忘 战开 记写分号。
在实际使用脚本代码时，通常都会对代码进行压缩和混淆，以便使得网页可以更 发 快地打开，从增加用户体验，另一方面混淆代码使得程序更加安全。
不写分号将很有可能导 完 致压缩后的代码无法使用，同样的事情还会发生在大括号上，读者可以在学习语句后了解大 全学
括号。
习手声明语句告诉浏览器，这个变量可以用来存放或修改数据。
未被赋值的变量也是有值 册 的，要给变量赋值，需要使用赋值语句。

2．变量的赋值 变量的赋值语法如下。
变量名=值; 这里的等号（=）为赋值运算符。
通常，用法更多的是把变量声明和变量赋值这两种操作合二为
一，如 varage=26; 上述代码声明一个叫做age的变量，并对其进行初始化，初始化的值为26。
在JavaScript中还会发生一些比较奇怪的事情，例如：varnum=28;varnum=9;上面的代码通常会被解释为声明了两个同名的变量，而这在大多数编程语言中都会引发程序的错误，但奇怪的事情就发生在JavaScript中。
JavaScript把重复的声明和赋值当作对同一变量的重新赋值。
相当于：varnum=28;num=9;读者在编码过程中应该避免出现这样的情况。
JavaScript是一种弱类型的脚本语言，在其他强类型语言（如Java、C#、C/C++）中，声明变量时必须指定变量的具体类型。
100 JavaScript 例如： intm;//声明一个整数类型的变量floatn;//声明一个单精度浮点型的变量doublex;//声明一个双精度浮点型的变量charc;//声明一个字符类型的变量 而在JavaScript中，不管什么类型的变量，声明时都只使用var关键字（var是“变量” 英文名的缩写），而变量的具体类型是在赋值后才确定的。

3．变量的命名 JavaScript中的变量命名与其他编程语言相比，主要遵循如下几点。
第 必须是一个有效的变量，即变量以字母和“$”和“_”开头，而后可以出现数字等。
3章 变量名中不能存在空格、+、-、逗号等其他特殊符号。
另外，JavaScript
中的变量名是 区分大小写的。
例如： var$_$=1; 基 var_$_1=2; 础 varName=’Tom’; 这些都是合法的命名。
而像下面的代码。
var&_&=1;var1ab=1;var._.=1; 都是不合法命名，在运行中会出现语法错误。

4．变量的声明和作用域可以在使用JavaScript变量前先声明并赋值。
JavaScript是采用动态编译的，而动态编译的缺点是不易发现代码中的错误，特别是变量命名方面。
当使用变量进行声明后，可以及时发现代码中的错误。
JavaScript中的变量有全局变量和局部变量两种。
全局变量定义在所有函数体外，其作用范围是整个函数；而局部变量定义在函数体之内，只对该函数是可见的，而对其他函数则是不可见的。
3.2.4类型转换 不同类型值之间的相互转换在实际开发中使用是非常频繁的。
最简单的例子就是从网页输入框获取数值进行数学运算之前，获取的值必须进行转换，因为所有从网页中获取的文本数据，都是字符串类型的，必须先转换成数值类型。

1．转换成数值类型数据有两种方式被转换成其他类型：一种是“隐式转换”；另一种是“显式转换”。
101 JavaWeb
（1）隐式转换。
在数据运算过程中，系统自动把不同的基本数据类型转换成相同类型进行运算，例如： //字符串转数字alert('777'-677); 运行结果如图3-15所示。
系统会自动把参与运算的基本类型按照系统自己的逻辑进行类型转换，有时可能不是开发者想要的那样，例如，字符串转数值时，如果把字符串放在运算符的左边，结果就是一个字符串值，而不是数值了。
实战开发 完 全 学 习手 图3-15字符串转数值 册 null转数值的例子如下。
//null转数值alert(1-null); 运行结果如图3-16所示。
图3-16null转数值 布尔值转数值的例子如下。
//布尔值转数值alert(true+false+1); 运行结果如图3-17所示。
102 JavaScript 图3-17布尔值转数值 第 undefined转数值的例子如下。
3章 //undefined转数值alert(1-undefined); 运行结果如图3-18所示。
基础 图3-18undefined转数值
（2）显式转换。
系统无法总是猜中开发者的意图，所以有时开发者需要自己对数据进行类型转换。
最 简单直接的办法是在字符串前面加正/负符号。
此外，JavaScript还提供了两种函数用于基本数值类型的转换，分别是parseInt()和parseFloat()。
“parseInt()。
转换成整数的函数，只能对字符串类型进行转换，其他类型被转换的结构都将得到NaN。
parseInt的转换过程是从字符串的第一个字符开始依次进行判断，如果发现字符不是数字字符，那么将停止转换，例如，parseInt(‘123a1234’)的转换结果就是123。
如果字符串的第一个字符是除了减号（表示负数）外的任何非数字字符，将得到NaN的结果，例如： alert(parseInt('a12345')); 运行结果如图3-19所示。
103 JavaWeb 图3-19parseInt函数的使用 除了parseInt的基本用法外，还可以进行转换进制的指定，例如，把16位的字符转换实战为数值，如alert(parseInt('FF',16));运行结果如图3-20所示。
开发完全学习手册 图3-20parseInt指定转换格式 实际上不仅是16进制，还可以是8进制，甚至是11进制，读者可以试着改变这个参数。
注意，不要以为默认的parseInt的结果一定是10进制数，如果字符串第一个字符是0的话，会被转换为8进制数，在使用时一定要注意，如图3-21所示。
图3-21parseInt默认的8进制转换104 （2）parseFloat()。
转换成小数的函数，除了转换结果是浮点数外，也无法指定转换格式，其他特性与 parseInt没有区别，例如： alert(parseFloat('1.12')); 运行结果如图3-22所示。
第3章 图3-22parseFloat函数的使用 基础
2．转换成字符串类型JavaScript没有用于转换字符串类型的函数，原因很简单，大部分的数据都是字符串类型的。
转换成字符串类型很简单，只需要使用连接符号“+”连接一个字符串类型的值，就能将其他类型的值拼接成新的字符串，例如： alert('yg'+null+undefined+123+true); 运行结果如图3-23所示。
JavaScript 图3-23字符串类型的隐式转换 图3-23完美地诠释了字符串的威力，所有类型的值都被融合为一个大的字符串。

3．转换成布尔类型在JavaScript中，除了true和false外，还有很多值可以表示“真”或“假”，见表3-
1。
105 JavaWeb 数据类型 UndefinedNullStringNumberObject(引用类型) 表3-1很多值可以表示“真”或“假” 布尔值为假时的值undefinednull‘’0或者NaNnull 布尔值为真时的值无无非空字符串非0非空对象 3.2.5转义字符 转义字符是一种特殊的字符常量。
转义字符以反斜线“\”开头，后跟一个或几个字符。
转义字符具有特定的含义，不同于字符原有的意义，这有点类似于键盘上的Shift。
表3-2中列举了常用的转义字符。
实 战 表3-2常用的转义字符及其含义 开发 转义字符Unicode 含义 完 \b \u0008 退格 全 t \u0009 横向跳到下一制表位置 学习\n\u000A回车换行 手 \v \u000B 竖向跳到下一制表位置 册 \f \u000C 走纸换页 \r \u000D 回车 \" \u0022 双引号符 \' \u0027 单引号符 \\ \u005C 反斜线符 \xnn 十六进制代码
nn(n是0到F中的一个十六进制数字)表示的字符 \unnnn 十六进制代码nnnn(n是0到F中的一个十六进制数字)表示的Unicode 除了基本的转义字符（“\”+单字符）外，还有两种特别的格式，即\x和\u。
\x是用2位十六进制数字来表示字符，但不同浏览器对字符的支持不同，会出现不同的结果，例如： //不同的浏览器结果不同alert("\x10"); 在IE和FF下的运行结果分别如图3-24、图3-25所示。
图3-24IE10的转义结果106 JavaScript 第3章 图3-25FF的转义结果 \u是用4位十六进制数字来表示字符，实际上每个字符（包括转义字符）都对应一个 基 此格式的编码，也就是Unicode编码，例如： 础 alert("hesaid\"howcouldthisbe\uff01\""); 运行结果如图3-26所示。
图3-26Unicode编码的使用 3.2.6关键字与保留字 JavaScript关键字是指在JavaScript语言中有特定含义，成为JavaScript语法中一部分的那些字。
JavaScript关键字是不能作为变量名和函数名使用的。
使用JavaScript关键字作为变量名或函数名，会使JavaScript在载入过程中出现编译错误。
JavaScript关键字列表。
107 JavaWeb breakcasecatchcontinuedebuggerdefault deletedoelsefalse finallyfor functionifin instanceofnewnull returnswitch thisthrowtrue try typeofvarvoidwhilewith JavaScript还有一些保留字，这些保留字虽然现在没有用到JavaScript语言中，但是将来有可能用到。
JavaScript保留字列表如下。
abstract Double float long short volatile boolean debugger goto native static byte enum implements package super 实 char export import private synchronized 战 class extends int protected throws 开发
constfinalinterfacepublictransient 完 全学 3.2.7运算符 习 手册除了加、减、乘、除外，JavaScript还拥有其他丰富的运算符，包括常见的大于、小于 等比较运算符，还包括可以查看数据类型的typeof运算符，掌握并理解这些运算符，是学 好JavaScript的基础。

1．算术运算符 虽然是算术运算符，但它已经超出了算术的范围，不过读者大可不必担心什么，它们 很简单，如表3-3所示。
基本的四则运算符在这里仍然有效，包括可以使用小括号进行优先级的改变。
加号除 了可以做四则运算外，还可以作为连接符来拼接字符串。
在JavaScript的除法中，即使两个操作数都是整数，当无法整除时，结果是一个小数，而不是整数。
还有当除数为0时，并不会引发程序错误，而是得到一个Infinity的结果。
运算符 +*/%++-+value-value 含义加减乘除取模(余数)数值加1数值减1变量取正变量取负 表3-3算术运算符操作数类型 整数、小数、字符串整数、小数整数、小数整数、小数整数、小数整数、小数整数、小数整数、小数、字符串整数、小数、字符串 结果类型整数、小数、字符串整数、小数整数、小数整数、小数整数、小数整数、小数整数、小数整数、小数整数、小数 108 JavaScript
（1）%运算符。
取模运算符类似除法运算符，需要两个操作数：除数和被除数。
返回余数。
取模运算 符常被用来判断一个数是否能被整除。
例如： y=5，x=y%
2,则x=
1
（2）++/--运算符。
自增/自减运算符，只需要一个操作数，必须是变量。
对操作数的值加1或减
1。
分为 前缀和后缀两种用法，例如： //前缀用法 vary=5; 第 alert(++y); 3章 运行结果如图3-27所示。
基础 图3-27自增/自减运算符的前缀用法 又如： //后缀用法vary=1;alert(y--); 运行结果如图3-28所示。
图3-28自增/自减运算符的后缀用法109 JavaWeb 下面演示前缀用法和后缀用法的混合用法。
//混合用法 vary=1;--y;alert(y++) 运行结果如图3-29所示。
实战开发 完 全 学 习 图3-29混合用法 手 册 上面的代码详细介绍了自增/自减运算符的用法，对前缀运算符来说，可以直接认为是 变量值加
1，但后缀运算符有些特殊，注意，图3-28所示结果并不是
0，而图3-29所示结 果也不是
1，这是因为后缀运算符的优先级比较低，当在一句代码中涉及多个操作时，后 缀运算符会最后执行。
所以先以alert()输出了y的值，之后y的值才发生改变。

（3）+value/-value运算符。
变量取正/负运算符，只需要一个操作数，可以是常量。
正/负符号最有用的地方在于 可以很容易地将字符串类型的值转换为数值类型，例如： alert(typeof+'1234') 运行结果如图3-30所示。
图3-30字符串转换数字110 JavaScript 如果字符串中的字符不是有效的数字字符，那么，转换结果将得到NaN。

2．赋值运算符不论哪种编程语言，赋值运算符都是使用最频繁的运算符。
只要是有变量的地方，基本上就会出现赋值运算符。
除了基本的赋值符号外，JavaScript还提供了这种复合赋值符号，在编写代码时，使用复合赋值运算符，可以简化代码，但在使用之前必须了解每种运算符的含义，如表3-4所示的分解表达式。
针对位移运算和按位操作本书稍后会详细介绍。
表3-4赋值运算符列表 运算符 =+=-=*=/=%=<<=>>=>>>= 含义赋值先相加后赋值先相减后赋值先相乘后赋值先相除后赋值先取模后赋值向左位移后赋值向右位移后赋值无符号按位右移后赋值 分解表达式 第 a=b a=a+b 3章 a=a-b a=a*b a=a/b a=a%b a=a<>b 础 a=a>>>b
3．关系运算符关系运算符是对两个操作数进行关系判断，并产生布尔结果的一种运算符。
例如，大于、小于或等于。
JavaScript中的关系运算符如表3-5所示。
运算符 <>=====<=>=!
=!
== 表3-5关系运算符 含义小于大于等于严格等于小于等于大于等于不等于严格不等于 JavaScript中的关系运算符不仅可以做数值间的比较，还可以做数值与其他类型值的比较，更可以做非数值类型间的比较，但通常这样的比较不具有意义。
读者更感兴趣的应该是严格等于和严格不等于，这种运算符在其他编程语言（C/C++、Java）中是没有的。
严格的意思就是不仅比较值本身，还会对值的类型进行比较，例如： alert((123==='123')+'----'+(123!
=='123')) 运行结果如图3-31所示。
111 JavaWeb 图3-31使用严格等于和严格不等于 图3-31所示严格比较运算符的使用方法，从另一个方面来说，如果要求不严格，可以 使用非严格判断的等号或不等号进行判断，例如，用户从页面输入了一个数值进行比较， 实 这时就可以直接用字符串进行比较而不需要转换。
战
开
4．逻辑运算符 发 与关系运算符相同，逻辑运算符的结果也是一个布尔值。
三种逻辑运算符如表3-
6 完全 所示。
学 习 表3-6逻辑运算符 手 运算符 含义 表达式 册 && 与 a&&b || 或 a||b !
非 !
a 实际上关系运算也属于一种逻辑运算，但逻辑运算符可以处理更复杂的关系。
简单来说，逻辑运算符可以计算多个关系运算的结果，例如，要验证某人年龄的值是既小于28又大于20的，这两种关系必须是同时满足的。
但JavaScript中不存在20 运算符&&逻辑与需要两个操作数，都是布尔类型。
逻辑与对两个布尔值进行判断，如果两个布尔值都为真，那么，逻辑和表达式的值就为真，如果其中任意一个条件为假或者都为假，那表达式的结果就为假，例如： if(age>20{ } &&age<28)alert(age); 运算符||逻辑或需要两个操作数，都是布尔类型。
逻辑或对两个布尔值进行判断，只要其中任意一个条件为真，那表达式的结果就为真。
否则为假。
运算符!
逻辑非需要两个操作数，是布尔类型。
逻辑非很简单，对操作的布尔结果执行取反 112 运算。
逻辑运算符经常和关系运算符一起组成逻辑表达式，例如： alert((28<20)||(50<60)) 运行结果如图3-32所示。
第3章 JavaScript 图3-32逻辑运算 基 础
4．位运算符 位运算符在各种编程语言中都被认为是一种高级操作，这主要是因为位运算牵扯到更 多的计算机内部原理，这可能妨碍了很多人学习编程的兴趣。
如果读者不了解“位”的概 念，可以先不必阅读此节，事实上在实际的开发中，位运算被使用的几率也很小。
位运算符的运算对象是各种进制的数值类型（包括
8进制、10进制、16进制），但在 处理时却使用值的二进制来处理。
常用的位运算符如表3-7所示。
运算符 &|~^<<>>>>> 表3-7位运算符含义 按位与按位或按位非按位异或按位左移按位右移无符号按位右移 表达式 a&ba|b~aa^ba<>xa>>>x
（1）按位与。
对于两个数值，与操作会对两个数值的二进制位进行“逻辑和”操作，例如： alert(2&3);//结果为
2 一个二进制的位操作图可以很好地解释这一结果，如图3-33所示。
从图3-33中可以看到“与”操作实际上就是对二进制数的每一位进行“逻辑和”操作，而因为是按照位来做运算的，所以叫“按位与”。
113 JavaWeb 图3-33按位与运算模型 另一个更简易的办法就是把10进制数当作二进制数直接进行观察，例如： alert(101&110);//结果是100
（2）按位或。
实 “或”操作和“与”操作的运算方式是相同的，只是“逻辑和”操作换成了“逻辑或”， 战 例如： 开 发 alert(101|111); 完 全
（3）按位非。
学习不同于其他位操作，“非”操作只有一个操作数，“非”运算会对操作数的每一位取反， 手 0变成1，1变成
0，例如： 册 ~
5
（4）按位异或。
“异或”操作也采用两个操作数之间进行位操作的方式，只是运算方式发生了改变。
如果两个位的值不同，那么，结果位则为真，例如： alert(1
^2);//结果是
3，因为二进制01^10的结果是11alert(10^01);//结果是11。

（5）按位左移。
左移操作符可以按照二进制格式把一个数值的所有位向左移动，例如： alert(1<<1);//结果是
2 所有位向左移动后，原有的空位就补
0，如图3-34所示。
图3-34按位左移运算模型 每向左移动一次，相当于把原有数值乘以
2，如果在频繁的乘法运算中使用位移操作， 114 JavaScript 那么，计算效率将得到显著提高。

（6）按位右移。
与按位左移相似，右移就是把数字位向右进行移动。
注意，当右移作为除以2的运算 时，余数是不显示的，例如： alert(21>>1);//结果是10 但如果运算数包含符号，结果就不同了，例如： alert(-21>>1);//结果是-11
5．其他运算符 除了前面所讲的常用运算符外，JavaScript还有一些特有的运算符，如表3-8所示。
第 运算符 表3-8其他运算符 3章 含义 表达式 [] 获取对象属性或数组元素 a[1]或people[‘age’] instanceof 验证对象是否为类的实例 ainstanceofb typeof 查看数据类型 typeofa newvoiddelete 构造对象取消返回值删除元素 newA JavaScript:voidExp 基 deletea 础 in 验证属性 ‘a’inb
（1）运算符[]。
方括号运算符用于获取对象属性，或者数组的元素。
例如，要获得数组a的第一个元素，则使用a[0]访问即可。

（2）运算符instanceof。
实例判断运算符。
用于判断一个对象是否为一个类的实例。
例如，要判断对象a是否为数组的实例，则使用ainstanceofArray 尔类型，代码如下。
即可，返回值为布 vara=newArray();alert("ainstanceofArray:"+(ainstanceofArray)); 以上代码判断a是否为数组的一个实例。
运行效果如图3-35所示。
图3-35运算符instanceof的使用115
（2）运算符typeof。
类型检查运算符typeof运算符返回一个用来表示表达式的数据类型的字符串，用于查 看值的数据类型，数据值可以是变量或常量。
可能的字符串有"number"、"string"、"boolean"、"object"、"function"和"undefined"， 例如： alert(typeof(123));//typeof(123)返回"number"alert(typeof("123"));//typeof("123")返回"string"
（3）运算符new。
对象构造运算符。
用于构造一个新的对象实例，例如： vara=newArray();
（4）运算符void。
实战 取消返回值运算符。
void运算符可以取消一个表达式的结果。
如取消一个函数的返回 开 值，例如： 发 完 alert(voidparseInt('123abc')); 全 学 运行结果如图3-36所示。
习 手 册 JavaWeb 图3-36void运算符的使用 图3-36中的结果是undefined，并不是123，这是因为void消除了函数的返回值。
但void最有用的地方在于：通常JavaScript伪协议用在标签的href属性，或者其他标签的src属性中，如标签。
当在这些属性中使用伪协议时，所计算的表达式可能会产生某些非undefined的值。
当href或者src属性得到这些值时，页面就会被替换成这些值，而页面本身就被覆盖掉了，例如： (1+2)'>超链接 116 JavaScript 读者可以尝试把其中的void去掉是什么效果，可以更容易地了解void的作用。

（5）运算符delete。
删除值运算符，这可不是C语言或数据库中的delete，虽然它们貌似相同，但功能却差得很远。
在C中的delete可以删除指针所指向的内存数据，释放内存空间，而JavaScript的内存管理是自动的。
JavaScript中的delete用来删除对象的属性或者数组中的元素，例如： deleteobj.a; deleteobj['a'];//通过方括号运算符来调用属性 deletearray[0];//删除数组中的第一个元素 第 当以delete操作过对象的属性后，再次调用这个属性会得到undefined，说明对象已经 3章 没有这个属性了。
注意，这跟属性值为空是不一样的。
虽然delete可以删除一个对象中所有的可删除属性（有些属性无法删除），但对象本身 还存在，如果要释放对象本身，可以将引用对象的变量赋值为null。

（6）运算符in。
属性验证运算符。
in运算符可以验证一个对象是否包含某属性，如‘a’inobj就是验证基础 对象obj是否拥有属性a。
3.2.8优先级和结合性 看下面的例子。
varn1=1+2*3-4/5; 像数学运算样，程序中的运算符也有先乘除后加减的顺序，这种基本的结合性规则保证了计算机和现实世界拥有完全相同的处理思路。
如果想改变运算符本身的结合顺序，那就必须借助于小括号来达到目的，例如： varn2=1+2*(3–4)/5; 除了从左到右的基本结合规则外，从右到左也是会经常用到的，例如： varx=1–2+3; 结合性保证了计算机按照正确的顺序和逻辑来处理运算符和运算数之间的关系，而在多种运算符混合的代码中，不同的运算符还需要遵循运算符优先级的顺序进行处理。
例如： alert(1<2&&3<4) 逻辑运算符的优先级默认低于关系运算符，所以两个逻辑运算被优先处理，结果就是true&&true。
更多的运算符优先级如表3-9所示。
117 JavaWeb 表3-9运算符的优先级 优先级 运算符 描述 () 括号 ++-- 递增或递减 !
逻辑非 */% 乘法、除法、取模 +- 加法、减法 + 拼接 <<= 小于、小于等于 >>= 大于、大于等于 ==!
= 等于、不等于 由高到===!
== 低排序& | 实战^ 开 ~ 发 << 完 >> 全学 >>> 习 && 手 || 册 ?
: 等同（类型相同）、不等同按位与按位或按位异或按位非按位左移按位右移按位右移，左边以0填充逻辑与逻辑或三元条件表达式 =+=-=*=%=<<=>>= 赋值 结合性从左到右从右到左从右到左从左到右从左到右从左到右从左到右从左到右从左到右从左到右从左到右 从左到右从左到右从右到左从右到左 3.3流程控制语句 程序是算法的实现，在实现算法时，经常会出现重复、选择分支等操作，这些操作控制程序的流程向正确的方向进行。
JavaScript提供了丰富的流程控制语句。
3.3.1if语句
1．基本if语句if语句是使用最多的选择条件语句。
其含义是如果表达式的值为true（真）时，那么执行语句
1，否则执行语句
2。
如果if或else后有多行语句，则大括号必须出现，否则可省略。
语法格式如下。
if(表达式){ 语句1;}else 118 JavaScript {语句2; } 条件语句就是一个逻辑表达式。
当程序流程不需要处理相对的关系时，可以省略else。
else的使用是根据场景的不同而决定的。
例如，某市的驾照理论考试，90分以上（含90）算合格，其余为不合格。
if(score>=90) { alert('考试通过!
'); } 第 else { 3章 alert('考试未通过'); }
2．多重if语句 多重if语句表示在else之后可以再增加if条件的判断，用于两个以上分支时使用。
语法如下。
基 础 if(表达式1){语句
1 }elseif(表达式2){语句
2 }elseif(表达式3){语句
3 }else{语句…; } 例如，某超市搞活动，消费满100减2元，满200减5元，满500减20元，代码如下。
varmoney=330;//消费金额if(money>=100&&money<200){ alert('减2元');}elseif(money>=200&&money<500){alert('减5元');}elseif(money>=500){ alert('减20元');}else{ alert('消费未达到最低要求'); 119 } 此代码演示了多重if语句的使用，当前一个条件不满足时，会顺序判断接下来的条件是否满足，如果都不满足则执行else语句。
在整个语句中，一旦有条件满足，后面的else...if...语句则不会被执行。
注意，任何elseif语句都可以在不改变原有流程的情况下被多个单独的if语句代替，例如： varmoney=330;//消费金额if(money>=100&&money<200){alert('减2元');} JavaWeb if(money>=200&&money<500) 实 { 战 alert('减5元'); 开发} 完 全 学 if(money>=500) 习 { 手 alert('减20元'); 册 } else { alert('消费未达到最低要求'); } 从结果上来说，两段代码并没有区别。
都能实现判断消费额多少。
请读者仔细分析一下这两段代码，如果多重if代码段中的第一个if条件成立，下面的所有语句都不会执行。
而在单if代码段中，除了最后的else外，所有if都会被执行一遍，如果每个if语句中不是简单的一句提示信息而是大量操作的话，多个单if语句的性能显然比多重if要低得多，这就是区别。

3．嵌套if语句嵌套if语句就是在if或else语句内再包含if语句，并且被包含的if或者else语句内也可以再嵌套语句。
语法： if(表达式1){语句1;if(表达式2){语句2;}}else 120 JavaScript {语句3;if(表达式3){语句4;}} 嵌套语句通常用在需要判断具有先后条件的场景中，例如，某商城招聘客服人员，要 求如下：女性，年龄为20~28岁。
代码如下。
varsex='女'; //性别 第 varage=23; //年龄 3章 if(sex=='女') { if(age>=20&&age<=28) //内层if { alert('满足条件!
'); } 基 else //内层else 础 alert('不满足条件!
'); } else //外层else alert('不满足条件!
'); 上面的代码在两层if语句中都使用了else子句，因为一旦进入if，else则不会执行，它们是对立的，所以每个else只对同层的if起作用。
一个不成文的规定：if语句的嵌套深度不要超过3层。
试想一下，用户的工作是维护一段具有10层以上嵌套深度的代码是什么感觉。
3.3.2switch语句 switch语句是跟if语句类似的选择语句。
其含义是当判断条件多于3个时，就可以使用switch语句，这样可以使程序的结构更加清晰。
switch根据一个变量的不同取值执行不同的语句段。
在执行switch语句时，表达式的值将从上由下与每一个case条件语句相比较。
如果相等，则执行该case语句后的JavaScript代码。
如果没有任何case语句与之表达式的值相等，则执行最后的default语句。
语法格式如下。
switch(表达式){case匹配条件1:JavaScript语句1;break;case匹配条件2:JavaScript语句2; 121 JavaWeb break;......case匹配条件m:JavaScript语句m;break;default:JavaScript语句x;} switch的语法有些类似多个if的顺序执行，但也不完全一样。
因为没有break语句的控制，将会发生一些预料不到的事情。
下面来看一个根据运算符号来进行算数的例子。
varysf='*'; varn1=6; varn2=8; 实战scwaistech'(-y's:f)a{lert(n1-n2);break; 开 case'*':alert(n1*n2);break; 发 case'/':alert(n1/n2);break; 完 default:alert(n1+n2); 全 } 学 习 读者可以试着把代码中的break语句去掉。
这时如果变量ysf值为'-'的话，所有的alert() 手册 语句都会被顺序执行一遍。
因为没有break语句，程序在执行完匹配的语句后，所有后面 的语句都会被执行，并且不管是否匹配，这可不是本例子想展示的效果。
注意代码中的比较条件，读者可能已经看出来了，switch只能对条件进行相等判断， 而不像if语句那样支持复杂的逻辑表达式。
3.3.3循环语句 除了选择语句外，控制程序流程另一个重要的语句就是循环语句，可以说只要有条件语句的地方，基本上都会出现循环语句。
循环是程序设计语言中反复执行某些代码的一种计算机处理过程，常见的有按照次数循环和按照条件循环。
循环语句是由循环体及循环的终止条件两部分组成的。
要使用循环语句时，必须要确定循环体及条件（布尔表达式）两个重要因素，亦即首要考虑的是要重复执行哪些语句，要重复到什么时候为止。
下面介绍几种选择语句。
1．for循环语法如下。
for(初始化;条件;更新表达式){JavaScript语句;} 其中，初始化参数指定循环的起始值。
条件是用于判断循环终止时的条件，若满足条件，则继续执行循环语句，否则跳出循环。
更新表达式是定义循环变量在每次循环时怎样 122 变化。
三个条件之间必须用分号隔开。
for语句中的三个表达式都可以为空，但分号不能少，也就是说for可以这样写： for(;;){ JavaScript语句;} 这就相当于： while(true) { JavaScript语句; 第 } 3章 也就是死循环，下面分析可选的三个表达式的含义。
例如，改变i的值，每循环一次，更新表达式就执行一次，直到循环结束，如下面的 小例子实现求1到100的和。
varsum; 基 for(vari=1;i<=100;i++) 础 { sum+=i; } 2．for…in循环语法： for(varinobject){ JavaScript JavaScript语句;} for...in循环语句只能用于对象。
for...in语句可以通过循环将对象所有的属性显示出来，例如： varn=3;vars='';for(variinwindow){ n--;s+=i+":"+window[i]+'\n';if(n==0) break;}alert(s); 代码显示了window对象的前3个属性的名称和值，运行效果如图3-37所示。
123 JavaWeb 图3-37for…in循环的应用 for...in与for和while语句相比，使用频率很低，而且for...in语句的效率也不高，所以 实 在开发时除非必要，否则最好不使用for...in语句。
战 3．while循环 开发while循环是比较容易理解的一种循环控制语句，即当“条件”的值为真时，就重复执 完 行“JavaScript语句”。
相反，当条件为假时，就退出循环。
全学语法如下。
习 while(条件) 手册 { JavaScript语句; } 4．do…while语句do…while和while循环非常相似，区别在于表达式的值是在每次循环结束时检查而不是开始时。
和正规的while循环主要的区别是do…while的循环语句保证会执行一次（表达式的真值在每次循环结束后检查），然而在正规的while循环中就不一定了（表达式真值在循环开始时检查，如果一开始就为false则整个循环立即终止）。
语法： do{ JavaScript语句;} while(条件){ } 5．break语句break语句可用于跳出循环。
break语句跳出循环后，会继续执行该循环之后的代码（如果有的话），例如: for(i=0;i<6;i++){ 124 JavaScript if(i==4){break;} x=x+"Thenumberis"+i+"
";} 6．continue语句 continue语句和break语句相似。
所不同的是它不是退出一个循环，而是开始循环的
一 次新迭代。
continue语句只能用在while语句、do…while语句、for语句或for…in语句的 循环体内，在其他地方使用都会引起错误！ 代码如下。
第 for(vari=1;i<=10;i++) 3章 { if(i==5) continue; document.write(i); }基 //输出结果：1234678910 础 当i=5时，直接跳出本次for循环，继续下次循环。

7．条件表达式 语法如下。
变量=布尔值？值1:值
2 除了if和switch两种条件语句外，JavaScript还提供了一种条件表达式，用来完成简单的if操作，即如果布尔值为真，那么将问号后的值1赋给变量，否则，将冒号后的值2赋给变量。
值1或值2可以是表达式产生的结果，例如： alert(1?
1:0); 运行结果如图3-38所示。
图3-38使用条件表达式125 JavaWeb 注意，条件表达式的分支中并不能执行非赋值的语句，也就是说在问号或者冒号后面如果是语句的话，这个语句必须产生一个值，否则，程序将出现语法错误。
3.4函数的定义与调用 函数是由事件驱动的，或当它被调用时执行的可重复使用的代码块。
函数过程中的这些语句用于完成某些有意义的工作——通常是处理文本，控制输入或计算数值。
通过在程序代码中引入函数名称和所需的参数，可在该程序中执行（或称调用）该函数。
3.4.1函数的定义 实 函数就是包裹在花括号中的代码块，前面使用了关键词function，语法如下。
战 开 functionfunctionname() 发 { 完 //这里是要执行的代码 全学 } 习 手册 3.4.2函数的调用 当调用该函数时，会执行函数内的代码，可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由JavaScript在任何位置进行调用。
JavaScript对大小写敏感。
关键词function必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
在调用函数时，可以向其传递值，这些值被称为参数，这些参数可以在函数中使用。
此外，还可以发送任意多的参数，由逗号(,)分隔，例如： myFunction(argument1,argument2) 当用户声明函数时，请把参数作为变量来声明，例如： functionmyFunction(var1,var2){//这里是要执行的代码} 变量和参数必须以一致的顺序出现。
第一个变量就是第一个被传递的参数的给定值，以此类推，例如： ClickMe！ 上面的函数会当按钮被单击时提示"eJack,theCEO"。
函数很灵活，可以使用不同的参数来调用该函数，这样就会给出不同的消息，例如：ClickMe！ClickMe！ 第 3.5事件处理 3章 JavaScript 事件是JavaScript应用跳动的心脏，当用户与浏览器中Web页面进行某些类型的交互 时，事件就发生了。
事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下 键盘上的某些按键。
事件还可能是Web浏览器中发生的事情，比如说，某个Web页面 基 加载完成，或者是用户滚动窗口或改变窗口大小。
通过使用JavaScript，用户可以监听特 础 定事件的发生，并规定让某些事件发生以对这些事件做出响应。
3.5.1事件处理程序 事件就是用户或浏览器自身执行的某种动作，如click、mouseover，都是事件的名字。
而相应某个事件的函数就叫事件处理程序（或事件侦听器）。

1．DOM0级事件处理程序将一个函数的返回值赋值给一个事件处理程序的属性，例如： varbtn=document.getElementById("myBtn");btn.onclick=funtion(){alert(this.id);//"myBtn"} 如果要删除事件，则把对应的事件赋值为null即可，如btn.onclick=null。

2．DOM2级事件处理程序“DOM2级事件”定义的两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。
所有DOM节点都包含这两个方法，接受3个参数：处理事件名、作为事件处理程序的函数和一个布尔值。
最后的布尔值参数，true：表示在捕获阶段调用事件处理程序；false：表示在冒泡阶段调用事件处理程序。
例如： varbtn=document.getElementById("myBtn");btn.addEventListener("click",funciton(){alert(this.id); 127 JavaWeb },false); 用DOM2级方法添加事件处理程序主要的好处是可以添加多个事件处理程序。
例如： varbtn=document.getElementById("myBtn");btn.addEventListener("click",funciton(){alert(this.id);},false);btn.addEventListener("click",funciton(){alert("HelloWorld！");},false); 这两个事件会按照顺序触发。
通过addEventListener()添加的事件只能用removeEventListener()移除。
移除时传入的 实 参数需与添加时的参数一致，也就是说匿名函数将无法移除。
战开 varbtn=document.getElementById("myBtn"); 发 varhandler=function(){ 完 alert(this.id); 全 }; 学 btn.addEventListener("click",handler,false); 习手btn.removeEventListener("click",handler,false); 册 大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，以便兼容各种浏览器。
firefox、chrome、safari、opera支持DOM2级事件处理程序。

3．IE事件处理程序 IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。
这两个方法都 接受两个参数：事件处理程序名称和事件处理程序函数。
由于IE只支持时间冒泡，所以， 通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段，例如： varbtn=document.getElementById("myBtn");btn.attachEvent("onclick",function(){alert("Clicked");}) 注意，attachEvent()的第一个参数是“onclick”而非“click”。
IE的attachEvent()与DOM0的addEventListener()的主要区别是事件处理程序的作用域。
DOM0级方法，事件处理程序会在所属元素的作用域内运行；attachEvent()方法，事件处理程序会在全局作用域中运行，因此，this等于window。
attachEvent()也可以为一个元素添加多个事件处理程序，例如： varbtn=document.getElementById("myBtn");btn.attachEvent("onclick",function(){alert("clicked");})btn.attachEvent("onclick",function(){alert("HelloWorld!
");}) 128 与DOM方法不同的是，这些事件处理程序不是以添加顺序执行，而是以相反的方向执行。
detachEvent()的用法与removeEventListener()的用法相同。
3.5.2JavaScript常用事件 JavaScript常用事件包括onclick事件、onLoad事件、onScroll事件、onBlur事件、onFocus 事件、onChange事件、onSubmit事件、onKeyDown事件、setTimeout事件和clearTimeout 事件等。

1．常用事件 （1）onclick事件。
第 鼠标单击事件，通常在下列基本对象中产生： 3章 button（按钮对象）、checkbox（复选框）或（检查列表框）、radio（单选钮）、resetbuttons （重置按钮）、submitbutton（提交按钮）。
例如，可通过下列按钮激活change()文件。
基 础 （2）onLoad事件。
页面加载事件：当页面加载时，自动调用函数（方法）。
JavaScript 此方法只能写在标签之中！ （3）onScroll事件。
窗口滚动事件：当页面滚动时调用函数。
此事件写在方法的外面，且函数名（方法名）后不加括号！ 例如： window.onscroll=move; （4）onBlur事件。
失去焦点事件：当光标离开文本框是触发调用函数。
当text对象或textarea对象及select对象不再拥有焦点，而退到后台时，引发该文件， 它与onFocus事件是一个对应的关系。
（5）onFocus事件。
光标进入文本框时触发调用函数。
当用户单击Text或textarea以及select对象时，产 生该事件。
（6）onChange事件。
129 JavaWeb 文本框的value值发生改变时调用函数。
当利用text或textarea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件，例如：
value="Test" （7）onSubmit事件。
属于
表单元素，写在表单标签内。
语法如下。
onSubmit="return函数名()" 实（8）onKeyDown事件。
战 在输入框中按下键盘上的任何一个键时，都会触发事件，调用函数。
开 发 完 此事件写在方法的外面，且函数名（方法名）后不加括号！ 全 学 习手例如： 册 document.onkeydown=函数名()。
（9）setTimeout事件。
此事件可以以一定的毫秒数定时执行一个已经定义好的函数。
语法如下。
setTimeout("函数名()",间隔时间(以毫秒为单位)); （10）clearTimeout（对象）。
清除已设置的setTimeout对象。
（11）onMouseOver：鼠标移动到某对象范围的上方时，触发事件调用函数。
在同一个区域之内，无论怎样移动都只触发一次函数。
（12）onMouseOut：鼠标离开某对象范围时，触发事件调用函数。

（13）onMouseMove：鼠标移动到某对象范围的上方时，触发事件调用函数。
在同一个区域之内，只要移动一次就触发一次事件调用一次函数。
（14）onmouseup：当鼠标松开时触发。

（15）onmousedown：当鼠标按下键时触发。
130 JavaScript 2．document对象常用的方法 （1）document.getElementById()。
通过ID获得唯一的一个HTML元素，没有ID时，通过name查找匹配。
（2）document.getElementByName()。
获取相同名称的一组元素，主要用于表单中的复选框。

3．Date对象常用方法 Vara=newDate();//创建a为一个新的日期对象。
y=a.getYear();//y的值为从对象a中获取年份值，两位数年份。
y1=a.getFullYear();//获取全年份数，四位数年份。
m=a.getMonth();//获取月份值(0~11)。
第 d=a.getDate();//获取日期值。
3章 d1=a.getDay();//获取当前星期值。
h=a.getHours();//获取当前小时数。
m1=a.getMinutes();//获取当前分钟数。
s=a.getSeconds();//获取当前秒钟数。
基础 3.6常用对象 JavaScript常用对象包括：数组（Array）对象、字符串（String）对象、数学（Math）对象及日期（Date）对象等。
3.6.1数组对象 数组对象用于在单个的变量中存储多个值。

1．新建数组varObj=newArray();//新建一个长度为零的数组。
varObj=newArray([size]);//新建一个指定长度n的数组。
varObj=newArray([element0[,element1[,...[,elementN]]]]);//新建一个指定长度的数组，并赋值。
数组中的序列号是从0开始计算。
如果要引用数组中的元素，则使用：数组变量[i]=值；变量名=数组变量[i]。

2．动态数组JavaScript数组的长度不是固定不变的，如果要增加数组的长度，只要直接赋值一个新元素就可以了，例如：数组变量[数组变量.长度]=值； 131 JavaWeb
3．数组常用方法 concat(array1,arrayn)：将两个或两个以上的数组值连接起来，合并后返回结果。
join(string)：将数组中元素合并为字符串，string
为分隔符。
如省略参数则直接合并， 不再分隔。
pop()：移除数组中的最后一个元素并返回该元素。
push(value)：在数组的末尾加上一个或多个元素，并且返回新的数组长度值。
reverse()：颠倒数组中元素的顺序，反向排列。
shift()：移除数组中的第一个元素并返回该元素。
pare
Function)：在未指定排序号的情况下，按照元素的字母顺序排列，如果不 是字符串类型，则转换成字符串再排序，返回排序后的数组。
splice()：从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入 新元素，返回所移除的元素。
实 toSource()：显示对象的源代码。
战
开 toString()：将数组所有元素返回一个字符串，其间用逗号分隔。
发 unshift(value)：为数组的开始部分加上一个或多个元素，并且返回该数组的新长度。
完 全 学习
3.6.2string对象 手 册 String对象用于处理文本（字符串）。
字符串对象的属性如下。
Length：返回字符串的字符长度。
字符串对象的方法如表3-10所示。
表3-10方法big()blink()bold()fontcolor(color)fontsize(size)link(url) small()strike()sub() sup() charAt(index)concat(string2)indexOf(searchStringstartIndex)lastlndexOf(searchStringstartIndex) 字符串对象的方法与含义 含义把字符串中的文本变成大字体()把字符串中的文本变成闪烁字体()把字符串中的文本变成黑字体()设置字符串中文本的颜色()用来把字符串转换-HTML链接标记中()把字符串中的文本变成小字体()把字符串中的文本变成划掉字体()把字符串中的文本变成下标(subscript)字体()把字符串中的文本变成上标(superscript)字体()返回指定索引处的字符连接两条或多条字符串返回字符串中第一个出现指定字符串的位置返回字符串中最后一个出现指定字符串的位置 132 JavaScript 方法slice(startIndex,endIndex)split(delimiter)substr(startIndex,length)substring(startIndex,endIndex) toLowerCase()toUpperCase() 续表 含义将部分字符抽出并在新的字符串中返回剩余部分将字符串分配为数组从startIndex开始取length个字符取startIndex和endIndex之间的字符，不包括endIndex把字符串中的文本变成小写把字符串中的文本变成大写 3.6.3数学对象 第 数学对象Math用于执行数学任务。
3章数学对象属性如表3-11所示。
表3-11数学对象的属性与含义 属性ELN2LN10LOG2ELOG10EPI 含义 欧拉常量,自然对数的底(约等于2.718) 基 2的自然对数(约等于0.693) 础 10的自然对数(约等于2.302) 以2为底的e的对数.(约等于1.442) 以10为底的e的对数(约等于0.434) 的值(约等于3.14159) 数学对象的方法如表3-12所示。
属性表3-12SQRT(1/2)SQRT(2)abs(x)acos(x)asin(x)atan(x)ceil(x)cos(x)exp(x)floor(x)log(x)max(x,y)min(x,y)pow(x,y)random()round(x)sin(x)sqrt(x)tan(x) 数学对象的方法与含义含义 1/2(0.5)的平方根(即l除以2的平方根,约等于o.707)2的平方根(约等于1.414)返回数字的绝对值返回数字的反余弦值返回数字的反正弦值返回位于-PI/2和PI/2的反正切值返回比x大的最小整数返回一个数字的余弦值返回E^x值返回比x小的最大整数返回底数为E的自然对数返回x和y之间较大的数返回x和y之间较小的数返回y^x的值返回位于0到1之间的随机函数四舍五入后取整返回数字的正弦值返回数字的平方根返回一个角度的正切值 133 JavaWeb 3.6.4date对象 Date对象用于处理日期和时间。
日期对象的主要方法如表3-13所示。
表3-13日期对象的方法与含义 属性 含义 getDay() 返回一周中的第几天(0~6) etYear() 返回年份，2000年以前为2位，2000(包含)以后为4位 getFullYear() 返回完整的4位年份数 getMonth() 返回月份数(0~11) 实 getDate() 战 getHours() 开 getMinutes() 发 getSeconds() 完全
getMilliseconds() 学 getTime() 习 手 setYear(yearInt) 册 setFullYear(yearInt) 返回日(1~31)
返回小时数(0~23)返回分钟(0~59)返回秒数(0~59)返回毫秒(0~999)返回从1970年1月1号0:0:0到现在一共花去的毫秒数设置年份，2位数或4位数设置年份，4位数 setMonth(monthInt) 设置月份(0~11) setDate(dateInt) 设置日(1~31) setHours(hourInt) 设置小时数(0~23) setMinutes(minInt) 设置分钟数(0~59) setSeconds(secInt) 设置秒数(0~59) setMilliseconds(milliInt) 设置毫秒(0~999) setTime(timeInt) 设置从
1970年1月1日开始的时间，毫秒数 toSource() 显示对象的源代码 3.7dom技术 DOM可被JavaScript用来读取、改变HTML、XHTML及XML文档。
通过JavaScript，用户可以重构整个HTML文档。
可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript就需要对HTML文档中所有元素进行访问的入口，这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
3.7.1dom的分层结构 DOM由核心、XML及HTML三部分构成，其级别分别为DOMLevel1/2/3。
核心 134 JavaScript DOM(CoreDOM)定义了一套标准的针对任何结构化文档的对象。
XMLDOM定义了一套 标准的针对XML文档的对象。
HTMLDOM定义了一套标准的针对HTML文档的对象。
HTML文档中的每个成分都是一个节点。
DOM是这样规定的。
“整个文档是一个文档节点。
“每个HTML标签是一个元素节点。
“包含在HTML元素中的文本是文本节点。
“每一个HTML属性是一个属性节点。
“注释属于注释节点。
节点彼此都有等级关系。
第 HTML文档中的所有节点组成了一个文档树（或节点树）。
HTML文档中的每个元素、 3章 属性、文本等都代表着树中的一个节点。
树起始于文档节点，并由此继续伸出枝条，直到 处于这棵树最低级别的所有文本节点为止。
例如： 基 础 DOM<br>

DOMStudy

HelloWorld!

上面所有的节点彼此间都存在关系，除文档节点之外的每个节点都有父节点。
如和的父节点是节点，文本节点"HelloWorld!
"的父节点是

节点。
大部分元素节点都有子节点。
比如，节点有一个子节点：节点，<title>节点也有一个子节点：文本节点"DOMStudy"。<br>当节点分享同一个父节点时，它们就是同级节点，如<h1>和<p>是同级节点，因为它们的父节点均是<body>节点。<br>节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。<br>比如说，所有的文本节点都是<html>节点的后代，而第一个文本节点是<head>节点的后代。<br>节点也可以拥有先辈。<br>先辈是某个节点的父节点，或者父节点的父节点，以此类推。<br>比如，所有的文本节点都可把<html>节点作为先辈节点。<br> 3.7.2查找并访问节点 可通过若干种方法来查找希望操作的元素。<br><br><span class='xp'>1．</span>通过使用getElementById()和getElementsByTagName()方法getElementById()和getElementsByTagName()这两种方法，可查找整个HTML文档中的任何HTML元素，这两种方法会忽略文档的结构。<br>假如希望查找文档中所有的<p>元素，getElementsByTagName()会把它们全部找到，不管<p>元素处于文档中的哪个层次。<br>同时， 135 JavaWeb getElementById()方法也会返回正确的元素，不论它被隐藏在文档结构中的什么位置。<br>当然这两种方法会提供任何所需要的HTML元素，不论它们在文档中所处的位置！ getElementById()可通过指定的ID来返回元素。<br>getElementById()语法如下。<br> document.getElementById("ID"); getElementById()无法工作在XML中。<br>在XML文档中，用户必须通过拥有类型ID的属性来进行搜索，而此类型必须在XMLDTD中进行声明。<br> getElementsByTagName()方法会使用指定的标签名返回所有的元素（作为一个节点列 表），这些元素是用户在使用此方法时所处元素的后代。<br> getElementsByTagName()可被用于任何的HTML元素。<br> getElementsByTagName()语法如下。<br> 实 document.getElementsByTagName("标签名称"); 战开 或者 发 document.getElementById('ID').getElementsByTagName("标签名称"); 完全 下面代码会返回文档中所有<p>元素的一个节点列表。<br> 学 document.getElementsByTagName("p")。<br> 习手 下面的代码会返回所有<p>元素的一个节点列表，且这些<p>元素必须是ID为 册 "maindiv"的元素的后代。<br> document.getElementById('maindiv').getElementsByTagName("p")。<br> <br><span class='xp'>2．</span>通过使用一个元素节点的<br>parentNode、firstChild以及lastChild属性 parentNode、firstChild及lastChild这三个属性可遵循文档的结构，在文档中进行“短 距离的旅行”。<br> 请看下面这个HTML片段。<br> <table><tr><td>John</td><td>LiLei</td><td>HanMeiMei</td></tr> </table> 在上面的HTML代码中，第一个<td>是<tr>元素的首个子元素（firstChild），而最后一个<td>是<tr>元素的最后一个子元素（lastChild）。<br>此外，<tr>是每个<td>元素的父节点（parentNode）。<br> 对firstChild最普遍的用法是访问某个元素的文本。<br>varx=[aparagraph];vartext=x.firstChild.nodeValue; 136 parentNode属性常被用来改变文档的结构。<br>假设您希望从文档中删除带有Id为 "maindiv"的节点。<br> varx=document.getElementById("maindiv");x.parentNode.removeChild(x); 首先，用户需要找到带有指定ID的节点，然后移至其父节点并执行 方法。<br> removeChild() <br><span class='xp'>3．</span>对特殊节点的访问 有两种特殊的文档属性可用来访问根节点，document.documentElement和 document.body。<br> 第一个属性可返回存在于XML及HTML文档中的文档根节点。<br> 第二个属性是对HTML页面的特殊扩展，提供了对<body>标签的直接访问。<br> 第 HTMLDOM节点信息如下。<br> 3章 nodeName、nodeValue及nodeType包含有关于节点的信息。<br> 每个节点都拥有包含着关于节点某些信息的属性，这些属性如下。<br> nodeName（节点名称）。<br> nodeValue（节点值）。<br> nodeType（节点类型）。<br> 基<br>础 nodeName。<br> nodeName属性含有某个节点的名称。<br> 元素节点的nodeName是标签名称。<br> 属性节点的nodeName是属性名称。<br> 文本节点的nodeName永远是#text。<br> 文档节点的nodeName永远是#document。<br> JavaScript nodeName所包含的XML元素的标签名称永远是大写的。<br> nodeValue。<br>对于文本节点，nodeValue属性包含文本。<br>对于属性节点，nodeValue属性包含属性值。<br>nodeValue属性对于文档节点和元素节点是不可用的。<br>nodeType。<br>nodeType属性可返回节点的类型。<br>最重要的节点类型如下。<br> 元素类型元素属性文本注释文档 节点类型12389 137 JavaWeb 下面通过一个例子向读者展示当一个用户在文档中点击时，HTML文档的背景颜色如何被改变。<br> <html> <head> <scripttype="text/javascript"> functionChangeColor() { document.body.bgColor="red" } </script> </head> <bodyonclick="ChangeColor()"> ClickMe!<br> </body> 实 </html> 战 开发 图3-39、图3-40分别展示了以上例子页面加载后的效果及单击页面后的效果。<br> 完全学习手册 图3-39页面加载后的效果 图3-40单击页面后的效果138 JavaScript 3.8with语句 with语句并不是用来控制程序流程的语句，其作用是简化代码的编写。<br>with语句需要一个对象作为它的参数。<br>当with语句体内的代码都需要引用这个对象时，with的作用就显示出来了。<br> 语法如下。<br> 第 with(object){ 语句 3章 } 例如： //不使用with语句 alert(Math.pow(Math.abs(-5),2)); 基 础 //使用with语句 with(Math){ alert(pow(abs(-5),2)); } 上面两段代码具有相同的效果，可以看到，当with语句体内的引用越多时，效果越明显，但读者要明白，这只是代码编写上的一种变通，如果频繁地使用with语句，将导致程序整体性能的降低。<br> 3.9异常控制语句 虽然是脚本语言，但作为一种使用频率很高并且能够创建出大型应用的便捷脚本语言，JavaScript提供了目前主流编程语言都有的异常控制功能。<br> 异常控制可以帮助开发者预防那些可能出现的错误，例如，使用未定义的变量或在循环语句中导致循环变量变成非数值从而引发程序错误等。<br>一旦开发者捕获了这些错误，就可以做出一些处理，防止这些错误中断程序或导致其他不好的用户体验，例如，可以弹出提示框告诉用户什么地方出现了错误。<br>对用户来说，这就是人性化。<br> 3.9.1异常的产生 程序中的任何错误都会引发异常，在JavaScript版本3中错误地被分为很多类型，常见的错误包括语法错误、类型错误和对象引用错误等。<br> 139 JavaWeb <br><span class='xp'>1．</span>语法错误语法错误是初学者最容易犯的一种错误。<br>常见的错误方式如表3-14所示。<br> 错误代码intnum=1;Functionx(inta){}for(i=0;i++){} 表3-14常见的语法错误错误分析 JavaScript中声明变量不区分类型关键字大小写错误，参数无类型缺少判断条件 正确代码varnum=1;functionx(a){}for(i=0;i<1;i++){} 语法错误很常见但也最容易避免，只要在编写代码时仔细检查，或者使用有提示功能的开发工具就可以最大限度地避免语法错误的发生。<br> <br><span class='xp'>2．</span>类型错误类型错误通常都和对象有关。<br>如果对基本类型的变量使用对象操作符new： 实 alert(new1); 战 开 系统就会抛出一个严重的类型异常，如图3-41所示。<br> 发 完全学习手册 图3-41FF3中的异常提示 错误提示是说1不是一个构造函数，这种错误通常是不会出现的，当然前提是在学习过对象的概念以后。<br> <br><span class='xp'>3．</span>对象引用错误这个错误也是由对象引起的，通常是使用了对象不存在的属性。<br>简单来说，就是程序中使用了一个不存在的东西，例如，在函数中使用了一个未声明的变量。<br> 在JavaScript中，有些其他语言中的异常是不会出现的，例如，除数为0时将得到一个“Infinity”的值，而不是抛出错误。<br>不同类型的数据之间运算也不会报错，例如，数值和字符做运算，将得到一个“NaN”的值。<br> 3.9.2异常的捕获 使用try…catch语句可以对异常进行捕获，捕获异常可以防止错误对try…catch语句外的其他流程造成影响，它就像个家长一样，随时观察着自己的孩子。<br> 语法如下。<br> try{ JavaScript语句; 140 JavaScript }catch(e) {异常处理 }Finally {异常处理 } 未使用异常捕获时，一旦程序发生错误，程序流就会被中断，之后的代码就不会被执 行了，例如： 第 vxar+=x"=进入""-;>";3章 varj=i;//i是一个未定义的变量，发生异常，中断程序流x+="永远不会执行的语句->"; //程序流被中断，未弹出提示框 alert(x); 基 遇见这种情况的最好解决办法就是通过增加代码间的alert()语句，这样通过确定哪个 础 alert()语句没有执行时，便可以快速地定位错误代码，例如： varx="";x+="进入->";alert("跟踪点1");varj=i;//i是一个未定义的变量，发生异常，中断程序流alert("跟踪点2");x+="永远不会执行的语句->"; //程序流被中断，未弹出提示框alert(x); 执行的结果是只有“跟踪点1”可以出现在提示框中，而之后就发生了异常。<br>使用 try…catch语句后不但可以防止程序流被中断，还能得到错误的具体信息，例如： varx="";try {x+="进入->";varj=i;//i是一个未定义的变量，发生异常x+="永远不会执行的语句->"; }catch(e){x+="异常处理1->";//未被捕获的异常，可以解除下面的注释来观察效果//varj=i; }finally{x+="异常处理2"; 141 }//程序流未被中断，弹出提示框alert(x); 运行结果如图3-42所示。<br> JavaWeb 实 战 开 发完 图3-42错误提示 全 学 使用try…catch语句对错误代码进行监控后会捕获异常，错误就只会影响try后面的大 习手括号内的语句执行，并没有影响try…catch语句外的alert()语句执行，所以，浏览器弹出了 册 提示框。<br> 从图3-41中可以看到异常出现后try...catch语句的执行顺序。<br> <br><span class='xp'>（1）</span>在错误语句之后的语句是不会被执行的。<br> <br><span class='xp'>（2）</span>抛出的错误被try…catch语句捕获后进入catch子句，catch子句可以获取发生异 常的具体信息。<br> 例如： //e是一个错误对象，当异常发生时系统会自动将一个错误对象当作catch子句的参数传递过来 try{ //...} catch(e){ //显示错误信息alert(e.message)} <br><span class='xp'>（3）</span>无论异常是否发生，最后finally子句都会被执行，但它是可以省略的，就像if语句中的else子句也不是必需的。<br> 虽然catch语句本身是用来捕获异常的，但catch子句中包含的代码同样可能发生异常，这些异常需要进行再次捕获，否则将影响外层的异常捕获，例如，代码中catch子句中注释的语句部分，就需要在catch子句中嵌套try…catch语句。<br> 142 3.10本章小结 本章主要介绍了Javascript的相关知识。<br>分别从JavaScript的基础（数据类型、常量、变量、运算符）、JavaScript的流程控制语句、函数的定义与调用、循环语句和JavaScript的常用事件和对象，以及dom和异常的相关知识来介绍，使读者了解了JavaScript基本结构和JavaScript脚本的执行原理。<br> 3.11上机练习 第 3章 <br><span class='xp'>1．</span>使用嵌套循环打印一个由“★”组成的矩形，矩形有5行，每行9个“★” 提示： 外层循环控制打印行数。<br>内层循环控制打印列数。<br>基础<br><span class='xp'>2．</span>使用嵌套循环打印9×9乘法表。<br><br><span class='xp'>3．</span>写出一个冒泡排序算法。<br> JavaScript 143 </div> <div class="art-copyright br mb"> <div>本文地址：<a href="https://www.apjn.cn/w/769/7281.html" title="第3章JavaScript基础,怎么打开隐藏的文件" target="_blank">https://www.apjn.cn/w/769/7281.html</a></div> <div><span class="copyright">声明：</span> 该资讯来自于互联网网友发布，如有侵犯您的权益请联系我们。</div> </div> <p class="tag-wrap mt mb"> <i class="iconfont icon-tag"></i>标签： <span class="padding"><i class="dot">#</i><a class="tags" href="/w/768" title="文件夹">文件夹</a></span> <span class="padding"><i class="dot">#</i><a class="tags" href="/w/767" title="后缀">后缀</a></span> <span class="padding"><i class="dot">#</i><a class="tags" href="/w/766" title="文件">文件</a></span> <span class="padding"><i class="dot">#</i><a class="tags" href="/w/765" title="单位">单位</a></span> <span class="padding"><i class="dot">#</i><a class="tags" href="/w/764" title="文字">文字</a></span> <span class="padding"><i class="dot">#</i><a class="tags" href="/w/763" title="机器人">机器人</a></span> <span class="padding"><i class="dot">#</i><a class="tags" href="/w/761" title="使用率">使用率</a></span> <span class="padding"><i class="dot">#</i><a class="tags" href="/w/760" title="卷轴">卷轴</a></span> </p> </div> </article> <!-- 广告位AD5 --> <div class="prev-next sb br mb clearfix"> <p class="post-prev fl ellipsis"> <span class="prev iconfont icon-toleft">上一篇</span><strong><a href='/w/769/7280.html' title='IDE 快速入门,怎么打开隐藏的文件'>IDE 快速入门,怎么打开隐藏的文件</a></strong> </p> <p class="post-next fr ellipsis"> <span class="next iconfont icon-toright">下一篇</span><strong><a href='/w/769/7282.html' title='辅助功能的使用,怎么打开隐藏的文件'>辅助功能的使用,怎么打开隐藏的文件</a></strong> </p> </div> <div class="related-art sb br mb"> <p class="c-title"><span class="name">相关文章</span></p> <ul class="ul clearfix"> <article class="article-list sb clearfix"> <figure class="figure fl br"> <a class="thumbnail" href="/w/2915/15760.html" title="如何打包文件，如何打包文件发给别人"> <img class="img-cover br" src="//img.apjn.cn/apjn/2023/11/ckaxl2fcvls.jpg" alt="如何打包文件，如何打包文件发给别人" title="如何打包文件，如何打包文件发给别人"> </a> </figure> <div class="content"> <h2 class="title ellipsis m-multi-ellipsis"><a href="/w/2915/15760.html" title="如何打包文件，如何打包文件发给别人">如何打包文件，如何打包文件发给别人</a></h2> <p class="intro hidden-sm">本节课将介绍如何配置webpock打包的入口和出口文件本节课将介绍如何配置webpock打包的入口和出口文件。在开始配置静态文件之前，需要先进行webpock的打包。在打包过程中，需要指定一个入口文件</p> <p class="data clearfix"> <span class="hidden-sm-md-lg author fl"><i class="iconfont icon-user"></i>文件</span> <span class="view fl font-oswald"><i class="iconfont icon-view"></i><span id="read_num">5</span></span> <time class="time fl font-oswald"><i class="iconfont icon-time"></i>2023-11-14</time> </p> </div> </article> <article class="article-list sb clearfix"> <figure class="figure fl br"> <a class="thumbnail" href="/w/2915/15759.html" title="如何打包文件，如何打包文件发给别人"> <img class="img-cover br" src="//img.apjn.cn/apjn/2023/11/f3kmnf3fwoh.jpg" alt="如何打包文件，如何打包文件发给别人" title="如何打包文件，如何打包文件发给别人"> </a> </figure> <div class="content"> <h2 class="title ellipsis m-multi-ellipsis"><a href="/w/2915/15759.html" title="如何打包文件，如何打包文件发给别人">如何打包文件，如何打包文件发给别人</a></h2> <p class="intro hidden-sm">为什么apk下载下来的是zip压缩包为什么apk下载下来的是zip压缩包？解压了是一堆文件，怎么打包成apk？凤君9732109MusicFree打包和查看包文件指令一二打包和查看包文件指令一二。ha</p> <p class="data clearfix"> <span class="hidden-sm-md-lg author fl"><i class="iconfont icon-user"></i>文件</span> <span class="view fl font-oswald"><i class="iconfont icon-view"></i><span id="read_num">2</span></span> <time class="time fl font-oswald"><i class="iconfont icon-time"></i>2023-11-14</time> </p> </div> </article> <article class="article-list sb clearfix"> <figure class="figure fl br"> <a class="thumbnail" href="/w/2915/15758.html" title="如何打包文件，如何打包文件夹成压缩包"> <img class="img-cover br" src="//img.apjn.cn/apjn/2023/11/ckaxl2fcvls.jpg" alt="如何打包文件，如何打包文件夹成压缩包" title="如何打包文件，如何打包文件夹成压缩包"> </a> </figure> <div class="content"> <h2 class="title ellipsis m-multi-ellipsis"><a href="/w/2915/15758.html" title="如何打包文件，如何打包文件夹成压缩包">如何打包文件，如何打包文件夹成压缩包</a></h2> <p class="intro hidden-sm">一般可以将 GitHub 上的 Python 源代码通过打包工具打包成可执行文件（一般可以将 GitHub 上的 Python 源代码通过打包工具打包成可执行文件（.exe）或 Android 应用程</p> <p class="data clearfix"> <span class="hidden-sm-md-lg author fl"><i class="iconfont icon-user"></i>文件</span> <span class="view fl font-oswald"><i class="iconfont icon-view"></i><span id="read_num">2</span></span> <time class="time fl font-oswald"><i class="iconfont icon-time"></i>2023-11-14</time> </p> </div> </article> </ul> </div> </div> <aside id="sidebar" class="hidden-sm-md-lg fr"> <div class="theiaStickySidebar"> <section id="aside_hot_comment" class="widget widget_aside_hot_comment sb br mb"> <p class="c-title mb"><span class="name">热点文章</span></p> <ul class="widget-content aside_hot_comment"> <li class="list clearfix"><span class='img-wrap br'><img src='//img.apjn.cn/apjn/2023/11/dblhy04y34i.jpg' alt='微信收藏的文件保存在哪里，微信收藏的文件保存在哪里电脑' class='img-cover br random-img'></span><div class="new-text"><p class="title"><a href="/w/4391/5315.html">微信收藏的文件保存在哪里，微信收藏的文件保存在哪里电脑</a></p><div class="info"><span class="time"><i class="iconfont icon-cate"></i><span class="font-oswald"><a href='/biancheng' target='_blank'>编程</a></span></span><span class="comment"><i class="iconfont icon-comment"></i><span class="font-oswald">5</span></span></div></div></li> <li class="list clearfix"><div class="new-text"><p class="title"><a href="/w/11113/6369.html">ppap需要提交哪些文件，ppap提交材料</a></p><div class="info"><span class="time"><i class="iconfont icon-cate"></i><span class="font-oswald"><a href='/biancheng' target='_blank'>编程</a></span></span><span class="comment"><i class="iconfont icon-comment"></i><span class="font-oswald">12</span></span></div></div></li> <li class="list clearfix"><span class='img-wrap br'><img src='//img.apjn.cn/apjn/2023/11/wid3o3dnqmp.jpg' alt='linux怎么查找文件，linux怎么创建文件' class='img-cover br random-img'></span><div class="new-text"><p class="title"><a href="/w/49087/3850.html">linux怎么查找文件，linux怎么创建文件</a></p><div class="info"><span class="time"><i class="iconfont icon-cate"></i><span class="font-oswald"><a href='/yunwei' target='_blank'>运维</a></span></span><span class="comment"><i class="iconfont icon-comment"></i><span class="font-oswald">2</span></span></div></div></li> <li class="list clearfix"><span class='img-wrap br'><img src='//img.apjn.cn/apjn/2023/11/1nesuyg0yke.jpg' alt='微信docx文件怎样打开，微信docx文件怎样打开权限' class='img-cover br random-img'></span><div class="new-text"><p class="title"><a href="/w/7763/5714.html">微信docx文件怎样打开，微信docx文件怎样打开权限</a></p><div class="info"><span class="time"><i class="iconfont icon-cate"></i><span class="font-oswald"><a href='/biancheng' target='_blank'>编程</a></span></span><span class="comment"><i class="iconfont icon-comment"></i><span class="font-oswald">2</span></span></div></div></li> <li class="list clearfix"><span class='img-wrap br'><img src='//img.apjn.cn/apjn/2023/11/ckaxl2fcvls.jpg' alt='如何打包文件，如何打包文件发给别人' class='img-cover br random-img'></span><div class="new-text"><p class="title"><a href="/w/2915/15760.html">如何打包文件，如何打包文件发给别人</a></p><div class="info"><span class="time"><i class="iconfont icon-cate"></i><span class="font-oswald"><a href='/biancheng' target='_blank'>编程</a></span></span><span class="comment"><i class="iconfont icon-comment"></i><span class="font-oswald">9</span></span></div></div></li> <li class="list clearfix"><span class='img-wrap br'><img src='//img.apjn.cn/apjn/2023/11/m2kqea3ppxu.jpg' alt='怎样压缩图片文件，怎样压缩图片文件夹' class='img-cover br random-img'></span><div class="new-text"><p class="title"><a href="/w/8529/5692.html">怎样压缩图片文件，怎样压缩图片文件夹</a></p><div class="info"><span class="time"><i class="iconfont icon-cate"></i><span class="font-oswald"><a href='/biancheng' target='_blank'>编程</a></span></span><span class="comment"><i class="iconfont icon-comment"></i><span class="font-oswald">4</span></span></div></div></li> </ul> </section> <section id="aside_rdTag" class="widget widget_aside_rdTag sb br mb"> <p class="c-title mb"><span class="name">热门Tag</span></p> <ul class="widget-content aside_rdTag"> <li><a href='/w/31902'>怎么做</a></li><li><a href='/w/47509'>病毒感染</a></li><li><a href='/w/2201'>cartier</a></li><li><a href='/w/12347'>显卡</a></li><li><a href='/w/12247'>锐程</a></li><li><a href='/w/33342'>怎么做</a></li><li><a href='/w/23900'>视频教程</a></li><li><a href='/w/29259'>不记得</a></li><li><a href='/w/4952'>cf</a></li><li><a href='/w/23770'>手机</a></li><li><a href='/w/1451'>都是</a></li><li><a href='/w/13155'>cad</a></li><li><a href='/w/2934'>页码</a></li><li><a href='/w/16399'>芒果</a></li><li><a href='/w/17719'>店铺</a></li><li><a href='/w/10972'>框架</a></li><li><a href='/w/4828'>小米</a></li><li><a href='/w/23025'>不上</a></li><li><a href='/w/41865'>公众</a></li><li><a href='/w/30679'>视频教程</a></li><li><a href='/w/32581'>怎么弄</a></li><li><a href='/w/23221'>流量</a></li><li><a href='/w/48992'>数据恢复</a></li><li><a href='/w/47979'>网络安全</a></li><li><a href='/w/20130'>网站建设</a></li><li><a href='/w/2329'>软件</a></li><li><a href='/w/21375'>泳衣</a></li><li><a href='/w/22873'>收不到</a></li><li><a href='/w/45726'>洛阳</a></li><li><a href='/w/17610'>猎头</a></li></ul> </section> <section id="divComments" class="widget widget_comments sb br mb"> <p class="c-title mb"><span class="name">热榜</span></p> <ul class="widget-content divComments"> <li class="list clearfix"><div class="title"><a class="a ellipsis" href="/w/2718/15763.html" title="转换器未能保存文件如何解决，转换器未能转换文件">转换器未能保存文件如何解决，转换器未能转换文件</a><div class="info"><span class="author"><i class="iconfont icon-user"></i><a href="/w/2718" target="_blank">转换器</a> </span><span class="time font-oswald"><i class="iconfont icon-time"></i>2023-11-15</span></div></div></li> <li class="list clearfix"><div class="title"><a class="a ellipsis" href="/w/2915/15760.html" title="如何打包文件，如何打包文件发给别人">如何打包文件，如何打包文件发给别人</a><div class="info"><span class="author"><i class="iconfont icon-user"></i><a href="/w/2915" target="_blank">文件</a> </span><span class="time font-oswald"><i class="iconfont icon-time"></i>2023-11-14</span></div></div></li> <li class="list clearfix"><div class="title"><a class="a ellipsis" href="/w/2233/15764.html" title="rm文件用什么播放器，rm视频文件用什么打开">rm文件用什么播放器，rm视频文件用什么打开</a><div class="info"><span class="author"><i class="iconfont icon-user"></i><a href="/w/2233" target="_blank">播放器</a> </span><span class="time font-oswald"><i class="iconfont icon-time"></i>2023-11-16</span></div></div></li> <li class="list clearfix"><div class="title"><a class="a ellipsis" href="/w/2449/15753.html" title="为什么下载的文件打不开，为什么下载的文件无法打开">为什么下载的文件打不开，为什么下载的文件无法打开</a><div class="info"><span class="author"><i class="iconfont icon-user"></i><a href="/w/2449" target="_blank">打不开</a> </span><span class="time font-oswald"><i class="iconfont icon-time"></i>2023-11-13</span></div></div></li> <li class="list clearfix"><div class="title"><a class="a ellipsis" href="/w/2233/15765.html" title="rm文件用什么播放器，rm视频文件用什么打开">rm文件用什么播放器，rm视频文件用什么打开</a><div class="info"><span class="author"><i class="iconfont icon-user"></i><a href="/w/2233" target="_blank">播放器</a> </span><span class="time font-oswald"><i class="iconfont icon-time"></i>2023-11-16</span></div></div></li> <li class="list clearfix"><div class="title"><a class="a ellipsis" href="/w/2414/15767.html" title="为什么学习程序开发，程序员为什么要学英语">为什么学习程序开发，程序员为什么要学英语</a><div class="info"><span class="author"><i class="iconfont icon-user"></i><a href="/w/2414" target="_blank">程序开发</a> </span><span class="time font-oswald"><i class="iconfont icon-time"></i>2023-11-17</span></div></div></li> <li class="list clearfix"><div class="title"><a class="a ellipsis" href="/w/2414/15768.html" title="为什么学习程序开发，为什么要编程">为什么学习程序开发，为什么要编程</a><div class="info"><span class="author"><i class="iconfont icon-user"></i><a href="/w/2414" target="_blank">程序开发</a> </span><span class="time font-oswald"><i class="iconfont icon-time"></i>2023-11-17</span></div></div></li> <li class="list clearfix"><div class="title"><a class="a ellipsis" href="/w/2718/15762.html" title="转换器未能保存文件如何解决，转换器未能保存文件如何解决?">转换器未能保存文件如何解决，转换器未能保存文件如何解决?</a><div class="info"><span class="author"><i class="iconfont icon-user"></i><a href="/w/2718" target="_blank">转换器</a> </span><span class="time font-oswald"><i class="iconfont icon-time"></i>2023-11-15</span></div></div></li> <li class="list clearfix"><div class="title"><a class="a ellipsis" href="/w/2449/15752.html" title="为什么下载的文件打不开，为什么我下载的文件打不开">为什么下载的文件打不开，为什么我下载的文件打不开</a><div class="info"><span class="author"><i class="iconfont icon-user"></i><a href="/w/2449" target="_blank">打不开</a> </span><span class="time font-oswald"><i class="iconfont icon-time"></i>2023-11-13</span></div></div></li> <li class="list clearfix"><div class="title"><a class="a ellipsis" href="/w/2919/15754.html" title="如何给电脑文件夹加密，如何给电脑文件夹加密?">如何给电脑文件夹加密，如何给电脑文件夹加密?</a><div class="info"><span class="author"><i class="iconfont icon-user"></i><a href="/w/2919" target="_blank">文件夹加密</a> </span><span class="time font-oswald"><i class="iconfont icon-time"></i>2023-11-14</span></div></div></li> </ul> </section></div> </aside> </div> <footer class="footer"> <div class="main container"> <div class="f-about fr"> <small>本站数据均来自互联网网友分享，若本页侵犯到您的权益请告知我们（jinmi8@foxmail.com），我们将在48小时内处理。Copyright © apjn.cn <icp id="icpinfo"></</icp></small> </div> <div class="f-diy fl"><small></small></div> <div class="clear"></div> </div> <div id="toolbar" class="toolbar "> <div id="totop" class="btn hidden"> <i class="iconfont icon-totop"></i> </div> </div> </footer> <script src="/temp/common.js" type="text/javascript"></script> <script src="/temp/com.js?1937988090" type="text/javascript"></script> </body> <script> $(function(){ fm("/read_doc_769_7281",""); }); </script> <!--OK--> </html><!--htm-->