在介绍JavaScript之前，首先让我们来简单了解一下脚本语言。大家知道，HTML通常用于格式化和链接文本，各种编程语言通常用于向机器发出一系列复杂的指令，而脚本语言是介于HTML和C++、Java等编程语言之间的语言。脚本语言是一种简单的语言，其语法和规则没有编程语言严格和复杂。用C++、Java等编写的程序必须先经过编译，将源代码转换为二进制代码之后才可执行，而脚本语言是一种解释性的语言，其程序不需要事先编译，可以直接运行，只要使用合适的解释器来解释便可以执行；脚本语言由一些ASCII码组成，以文本形式存在。常用的脚本语言有JavaScript、VBScript等。
因为脚本语言是在客户端被解释执行的，所以我们通常用脚本语言来实现客户端动态网页。网站发展的初期，所有的程序都是在服务器端执行，然后再将执行结果发送到客户端。随着客户端计算机的功能越来越强大，CPU速度越来越快，如果将部分简单的操作交给客户端的计算机处理，就可以大大提高服务器的工作效率。这样网页脚本语言就应运而生了，因为这种脚本语言能够与一般的HTML语言交互使用。在读取网页的同时，脚本语言编写的小程序也被传输到客户机上，并在客户机上执行。
一、JavaScript简介
通过HTML标签的描述可以实现文字、表格、声音、图像、动画等信息的浏览，然而这只是一种静态信息资源的提供，缺少动态交互。JavaScript的出现，使得信息和用户之间不仅只是一种显示和浏览的关系，而且实现了一种实时的、动态的、可交互式的表达。从而使得基于CGI的静态HTML页面被可提供动态实时信息、并对客户操作进行反应的Web页面所取代。
JavaScript早期是由Netscape（网景）公司研发出来的一种在Netscape浏览器上执行的程序语言。它不仅包含了数组对象、数学对象，还包括一般语言所包含的操作数、控制流程等结构组件。用户可以利用它设计出交互式的网页内容，但这些网页不能单独执行，必须由浏览器或服务器执行。
开发JavaScript的最初动机是想要减轻服务器数据处理的负荷，能够完成如在网页上显示时间、动态广告、处理表单传送数据等工作。随着JavaScript所支持的功能日益增多，不少网页编制人员转而利用它来进行动态网页的设计。Microsoft公司所研发的IE网络浏览器早期版本是不支持JavaScript语言的，但在IE 4.0之后也开始全面支持JavaScript，这使得JavaScript成为两大浏览器的通用语言。
1. 什么是JavaScript
JavaScript是一种基于对象（Object）和事件驱动（Event Driven），并具有安全性能的脚本语言。使用它的目的是与HTML、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用，从而可以开发客户端的应用程序等。它是通过嵌入在标准的HTML语言中实现的，它的出现弥补了HTML语言的缺陷。
2. JavaScript与Java的区别
很多人看到 Java 和 JavaScript 都有“Java”，就以为它们是同一样东西，实际上Java之与Javascript就好比Car（汽车）之于Carpet（地毯）。虽然JavaScript与Java有紧密的联系，但却是两个公司开发的不同的两个产品。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；而JavaScript是Netscape公司的产品，是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。下面对两种语言间的异同作如下比较：
1）基于对象和面向对象
Java是完全面向对象的语言，即使是开发简单的程序，也必须设计类和对象。 JavaScript是基于对象的脚本语言，它虽然基于对象和事件驱动，但由于脚本语言的特性，在功能上与Java相比要差得多。
2）解释和编译
两种语言在其浏览器中执行的方式不一样。Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码。JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端由浏览器解释执行。
3）强变量和弱变量
两种语言所采用的变量是不一样的。Java采用强类型变量检查，即所有变量在编译之前必须作声明。JavaScript中的变量是弱类型的，即变量在使用前不需作声明。
4）代码格式不一样
Java的格式与HTML无关，其代码以字节形式保存在独立的文档中。而JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。
5）嵌入方式不一样
在HTML文档中，通过不同的标签标识两种编程语言，JavaScript使用<script>...</script>标签，而Java使用<applet>...</applet>标签。
6）静态联编和动态联编
Java采用静态联编，即Java的对象引用必须在编译时进行，以使编译器能够实现强类型检查。JavaScript采用动态联编，即JavaScript先编译，再在运行时对对象引用进行检查。
二、 JavaScript语言基础知识
1. JavaScript代码的加入
上节已经提到JavaScript嵌入在HTML文档中使用，那么，在HTML文档的什么地方插入JavaScript脚本呢？实际上，使用标签对<script></script>，你可以在 HTML 文档的任意地方插入 JavaScript，甚至在<html>之前插入也不成问题，多数情况下将其放于<head></head>中，因为一些代码可能需要在页面装载起始就开始运行。不过如果要在声明框架的网页中插入，就一定要在<frameset>之前插入，否则不会运行。脚本代码插入基本格式如下：
<script language ="JavaScript">
JavaScript代码；
……
</script>
标签对<script></script>指明其间放入的是脚本源代码；属性language 说明标签中使用的是何种脚本语言，这里是JavaScript语言，也可以不写，因为目前大部分浏览器都将其设为默认值。
另外，还可以把 JavaScript 代码写到一个单独的文件中（此文件通常应该用“.js”作扩展名），然后用下面所示的格式在HTML文档中调用。
<script language="JavaScript" src="url">
……
</script>
其中，url属性指明JavaScrip文档的地址。这种方式非常适合多个网页调用同一个JavaScript程序的情况。
【例6-20】JavaScript简单实例（js.html）
<html>
<head>
<title>JavaScript实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<script language="JavaScript">
document.write("<h2>JavaScript的第一个网页！</h2>");
document. close();
</script>
</body>
</html>
运行结果如图6-31所示。
图6-31 使用JavaScript的第一个网页
说明：
（1）document. write()：是文档对象的输出函数，其功能是将括号中的字符或变量值输出到窗口。
（2）document. close()：是将输出关闭。
（3）分号“;”是 JavaScript语句结束符。
（4）JavaScript区分大小写。
2. 基本数据类型
JavaScript中有四种基本数据类型：数值型（整数和实数）、字符串型（用“”号括起来的字符或数值）、布尔型（用true或false表示）、空值。JavaScript的基本类型数据可以是常量，也可以是变量。JavaScript采用弱类型的形式，因而一个变量或常量不必在使用前声明，而是在使用或赋值时确定其数据类型。当然，用户也可以先声明该数据的类型，然后再进行赋值，也可以在声明变量的同时为其赋值。
3. 常量
和其它语言一样，常量的值在程序执行过程中不会发生改变。
1）整型常量
（1）十进制：例如，666。
（2）八进制：由“0”开始，例如，0222。
（3）十六进制：由“0x”开始，例如，0x33。
2）实型常量
例如，0.002。也可以使用科学计数法表示实型常量，即写成指数形式。例如，0.002可以写成2e-3或2E-3。
3）布尔常量
布尔常量只有两个值：true、false。 不能用0表示假、用非0表示真。
4）字符型常量
使用单引号（'）括起来的一个字符或使用双引号（"）括起来的一个或若干个字符。例如，"3a6e"。转义字符用反斜杠（\）开头，如：\n表示换行，\r表示回车。
5）未定义（undefined）
变量定义后没有赋初值，变量的值便是undefined。
6）空值（null）
null表示什么也没有，如果试图引用没有定义的变量，则返回一个null值。
4. 变量
变量的值在程序执行过程中可以发生改变，其命名必须满足合法标识符要求，即以字母或下划线开头，只包含字母、数字和下划线，不能使用JavaScript中的关键字作为变量名。在JavaScript中，变量的定义方式有三种。
（1）用关键字var定义变量，但不赋初值，使用时再赋值。
例如：var sample；
此时变量sample的值是undefined
（2）用关键字var定义变量的同时给变量赋初值，这样就定义了变量的数据类型，使用时也可再赋其它类型的值。
例如：var sample=99;
（3）变量不事先定义，而是在使用时通过给变量赋值来定义变量同时确定变量类型。
例如：temp=true;
该语句定义变量temp，变量数据类型是布尔型。
和其它语言一样，JavaScript中有全局变量和局部变量。全局变量定义在所有函数体之外，其作用范围是整个文档；局部变量定义在函数体之内，作用范围是定义它的函数内部。
5. 运算符
JavaScript运算符按操作数个数可分为一元、二元、三元运算符，按类型可分为算术运算符、关系运算符、逻辑运算符、位运算符、赋值运算符。在运算时按优先级顺序进行，表6-1中按优先级从高到低对各种运算符进行了简单介绍。
除此之外，JavaScript里还有一些特殊运算符。
（1）字符串连接运算符“+”：该运算符可以将多个字符串连接在一起。
例如："Java"+"Script"的结果为"JavaScript"。
（2）delete：删除对象。
（3）typeof：返回一个可以标识类型的字符串。
（4）void：函数无返回值。
表6-1 JavaScript运算符
|
| 运算符 | 运算符说明 |
| 括号 | (x) [x] | 中括号只用于指明数组的下标 |
| 求反 | -x | 返回 x 的相反数 |
| !x | 返回与 x (布尔值)相反的布尔值 | |
| x++ | x 值加 1，但仍返回原来的 x 值 | |
| x-- | x 值减 1，但仍返回原来的 x 值 | |
| ++x | x 值加 1，返回最新的 x 值 | |
| --x | x 值减 1，返回最新的 x 值 | |
| 乘、除 | x*y | 返回 x 乘以 y 的值 |
| x/y | 返回 x 除以 y 的值 | |
| x%y | 返回 x 与 y 的模（x 除以y 的余数） | |
| 加、减 | x+y | 返回 x 加 y 的值 |
| x-y | 返回 x 减 y 的值 | |
| 关系运算 | x<y x<=y | 当符合条件时返回 true 值，否则返回 false 值 |
| 等于、 | x==y | 当 x 等于 y 时返回 true 值，否则返回 false 值 |
| x!=y | 当 x 不等于 y 时返回 true 值，否则返回 false 值 | |
| 按位与 | x&y | 当两个数位同时为 1 时，返回的数据的当前数位为 1，其它情况都为 0 |
| 按位异或 | x^y | 两个数位中有且只有一个为 0 时，返回 1，否则返回 0 |
| 按位或 | x|y | 两个数位中只要有一个为 1，则返回 1；当两个数位都为零时才返回零 |
| 逻辑与 | x&&y | 当 x 和 y 同时为 true 时返回 true，否则返回 false |
| 逻辑或 | x||y | 当 x 和 y 任意一个为 true 时返回 true，当两者同时为 false 时返回 false |
| 条件 | c?x:y | 当条件 c 为 true 时返回 x 的值（执行 x 语句），否则返回 y 的值（执行 y 语句） |
| 赋值、 复合运算 | x=y | 把 y 的值赋给 x，返回所赋的值 |
| x+=y x-=y x*=y | x 与 y 相加/减/乘/除/求余，所得结果赋给 x，并返回 x 赋值后的值 |
6. 控制语句
和其它语言一样，JavaScript控制语句包括选择语句、循环语句、跳出语句。
1）选择语句
l if(条件判定)
…语句1（条件为true时）
else
…语句2（条件为false时）
l 嵌套的if……else结构
l switch(表达式)
{
case 常量1: 语句
break ;
case 常量2: 语句
break ;
…
default : 语句
}
2）循环语句
l do{
语句
}while(条件判断)
l while(条件判断) 语句
l for([初始表达式];[条件];[增量表达式])
语句
（3）跳出语句
l break语句：跳出并结束本层循环。
l continue语句：跳出并结束本层的本次循环，开始下一次循环。
7. 函数
函数是一个执行特定任务的过程，它是JavaScript中最基本的成员。使用函数前，必须先定义，然后再在脚本中调用。JavaScript中支持的函数分为两大类：一类是JavaScript预定义函数，另一类是用户自定义函数。
1）函数定义
函数定义语法格式：
function 函数名(参数集合)
{
函数体
return 表达式;
}
（1）函数由关键字function来定义，定义形式与其它语言类似。
（2）函数定义位置通常在文档的头部，以便当文档被载入时首先载入函数；否则，有可能文档正在被载入时，用户已经触发了一个事件而调用了一个还没有定义的函数，导致一个错误的产生。
（3）可使用arguments .Length来获得参数集合中参数的个数。
2）预定义函数
下面介绍几种常用的预定义函数。
（）1eval函数：对包含数字表达式的字符串求值。其语法格式如下所示。
eval(参数)
如果参数是数字表达式字符串，那么对该表达式求值；如果该参数代表一个或多个JavaScript语句，则执行这些语句；eval还可以把一个日期从一种格式转换为数值表达式或数字。
（2）Number和String函数：用来将一个对象转换为一个数字或字符串。其语法格式如下所示。
Number(对象)
String(对象)
（3）parseInt和parseFloat函数：用来将字符串参数转换为一个数值。其语法格式如下所示。
parseFloat(str)
parseInt(str[,radix])
parseFloat将字符串转换为一个浮点数。parseInt基于指定的基数radix或底数之上返回一个整数。例如，若基数为10则将其转化为十进制，为8则转化为八进制。
三、 JavaScript对象
JavaScript中的对象是对客观事物或事物之间关系的描述，对象可以是一段文字、一幅图片、一个表单（form），每个对象有它自己的属性、方法和事件。对象的属性是指该对象具有的特性，例如，图片的地址；对象的方法指该对象具有的行为，例如表单的“提交”(submit)；对象的事件指外界对该对象所作的动作，例如点击button产生的“单击事件”。JavaScript中可以使用以下几种对象：
（1）内置对象，例如：Date、Math、String。
（2）用户自定义的对象。
（3）由浏览器根据页面内容自动提供的对象。
（4）服务器上固有的对象。
在JavaScript中提供了几个对象处理的语句，例如，this（返回当前对象）、with（为一个或一组语句指定默认对象）、new（创建对象）等。但JavaScript没有提供继承、重载等面向对象语言所必须具有的功能，所以它只是基本面向对象的语言。
1. 创建对象
在JavaScript中创建一个新的对象，首先需定义一个类，然后再为该类创建一个实例。定义类用关键字“function”，格式如下所示。
function 类名(类中属性的值的集合)
{
属性定义、赋值
方法定义
}
创建对象使用关键字“new”，格式为：对象实例名=new 类名（参数表）；
例如：定义类person，它的属性包括name、age、sex、depart，则：
function person(name,age,sex,depart)
{
this.name=name;
this.age=age;
this.sex=sex;
this.depart=depart;
}
然后再创建该类对象sample，如下：
sample=new person("peter",22, "female"，"personnel department");
2. 引用对象属性
引用对象属性的语法格式为：对象名.属性名
3. 引用对象方法
引用对象方法的语法格式为：对象名.方法名
4. 删除对象
删除对象用delete运算符。例如，删除上面创建的对象sample，使用
delete sample;
5. 内置对象
下面介绍几种内置对象。
1）String对象
String对象即字符串对象，用于处理或格式化文本字符串，以及确定和定位子串。
（1）属性
length：保存字符串的长度。格式：字符串对象名.length；
例如：var str="helloworld";
则str.length的值为10。
（2）方法
charAt(position) ：返回该字符串第position位的字符。
indexOf(substring[，startpos])：返回字符串中第startpos位开始的第一个子串substring的位置，如果该子串存在，就返回它的位置，不存在返回-1。
例如：str.indexOf（"llo",1）; //结果为2
lastIndexOf(substring[，startpos]) ：跟 indexOf() 相似，不过是从startpos位开始从后边往前查找第一个substring出现的位置。
split(字符串分隔符集合) ：返回一个数组，该数组的值是按“字符串分隔符”从原字符串对象中分离开来的子串。
例如：str.split('o');
则返回的数组值是："hell"、"w"、"rld"。
substring(startpos[，endpos]) ：返回原字符串的子串，子串是原字符串从startpos位置到endpos位置的字符序列。如果没有指定endpos或指定的超过字符串长度，则子字符串一直取到原字符串尾；如果所指定的位置不能返回字符串，则返回空字符串。
toLowerCase() ：返回把原字符串所有大写字母都变成小写字母的字符串。
toUpperCase() ：返回把原字符串所有小写字母都变成大写字母的字符串。
2）Array对象
Array对象即数组对象，是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置。创建数组有两种方法：
arrName=new Array(element0,element1,…,elementN)
arrName=new Array(arrLength)
这里arrName既可以是存在的对象，也可以是一个新的对象。而element0,element1,…,elementN是数组元素的值，arrLength则是数组初始化的长度。
除了在创建数组时给它赋值以外，也可以直接通过数组名加下标的方法给数组元素赋值，例如：
arr=new Array(6);
arr[0]="sample"。
（1）属性
length ：返回数组的长度。
（2）方法
join(分隔符) 用法：返回一个字符串，该字符串把数组中的各个元素串起来，用分隔符置于元素与元素之间。
reverse() 用法：返回将原数组元素顺序反转后的新数组。
sort() 用法：返回排序后的新数组。
3）Math对象
Math对象即算术对象，提供常用的数学常量和数学函数。
例如：E 返回2.718281828...，PI返回3.1415926535...，abs(x) 返回 x 的绝对值，max(a, b) 返回 a, b 中较大的数，random() 返回大于 0 小于 1 的一个随机数等等。
4）Date对象
Date对象即日期对象，可以储存任意一个日期，从 0001 年到 9999 年，并且可以精确到毫秒数（1/1000 秒）。Date对象有许多方法来设置、提取和操作时间，类似于Java。
6.文档对象
文档对象是指在网页文档里划分出来的对象，在 JavaScript中文档对象主要有：window、document、location、navigator、screen、history 等。
1）navigator对象
navigator对象即浏览器对象，包含了当前使用的浏览器的版本信息。
（1）appName属性返回浏览器的名字。
（2）appVersion属性返回浏览器的版本。
（3）platform属性返回浏览器的操作系统平台。
（4）javaEnabled属性返回一个布尔值代表当前浏览器是否允许使用Java。
【例6-21】navigator对象使用（navigator.html）
<html>
<head>
<title>navigator对象使用</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="JavaScript">
document.write("浏览器是：" + navigator.appName+"<br>");
document.write("浏览器的版本是：" + navigator.appVersion+"<br>");
document.write("浏览器所处操作系统是：" + navigator.platform+"<br>");
if (document.javaEnabled==true)
document.write("你的浏览器允许使用Java");
else
document.write("你的浏览器不允许使用Java");
</script>
</head>
<body>
</body>
</html>
运行结果如图6-32所示。
图6-32 navigator对象使用
2）screen对象
screen对象即屏幕对象，包含了当前用户的屏幕设置信息。
（1）width属性返回屏幕的宽度，单位为像素。
（2）height属性返回屏幕的高度，单位为像素。
（3）colorDepth属性保存当前颜色设置，取值可为：-1（黑白）、8（256色）、16（增强色）、24/32（真彩色）。
3）window对象
window对象即窗口对象，它是所有对象的“父”对象，可以在JavaScript应用程序中创建多个窗口，而一个框架页面也是一个窗口。
（1）open(参数表)：该方法用来创建一个新的窗口，其中参数表提供有窗口的尺寸、内容以及是否有按钮条、地址框等属性。
（2）close()：该方法用来关闭一个窗口。其中，window.close()或self.close()用来关闭当前窗口；窗口对象名.close()用来关闭指定的窗口。
（3）alert(字符串)：该方法弹出一个只包含“确定”按钮的对话框，并显示“字符串”的内容，同时整个文档的读取和Script 的运行暂停，直到用户按下“确定”。
（4）confirm(字符串)：该方法弹出一个包含“确定”和“取消”按钮的对话框，并显示“字符串”的内容，同时整个文档的读取和Script 的运行暂停，等待用户的选择。如果用户按下“确定”，则返回 true ，如果按下“取消”，则返回 false。
（5）prompt(字符串[, 初始值])：该方法弹出一个包含“确认”、“取消”按钮和一个文本框的对话框，并显示“字符串”的内容，要求用户在文本框输入数据，同时整个文档的读取和Script 的运行暂停。如果用户按下“确认”，则返回文本框里已有的内容，如果用户按下“取消”，则返回 null 值。如果指定“初始值”，则文本框里将用初始值作为默认值。
（6）blur()和focus()：使窗口失去或得到焦点。
（7）scrollTo (x, y)：该方法使窗口滚动到指定的坐标。
【例6-22】window对象使用（window.html）
<html>
<head>
<title>window对象使用</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="JavaScript">
alert("window对象使用");
</script>
</head>
</html>
运行结果如图6-33所示。
图6-33 window对象使用
4）history对象
history对象即历史对象，包含浏览器的浏览历史。其length属性返回历史记录的项数。
5）location对象
location对象即地址对象，它描述的是某一个窗口对象所打开页面的URL地址信息。
（1）protocol属性：返回地址的协议，取值为“http”、“https”、“file”等。
（2）hostname属性：返回地址的主机名。
（3）reload()方法：强制窗口重载当前文档。
（4）replace()方法：从当前历史记录装载指定的URL。
6）document对象
document对象即文档对象，它描述当前窗口或指定窗口对象从<head>到</body>的文档信息。
（1）open() ：打开文档。
（2）write()/ writeln()： 向文档写入数据。writeln() 在写入数据以后换行。
（3）clear()：清空当前文档。
（4）close()：关闭文档，停止写入数据。
四、JavaScript事件
用户与网页交互时产生的动作，称为事件。事件可以由用户引发，例如，用户单击鼠标按钮引发click事件；事件也可以由页面自身引发。事件引发后所执行的程序或函数称为事件处理程序，指定事件的处理程序的一般方法是直接在HTML标签中指明函数名或程序，格式如下：
<标签 …… 事件="事件处理程序" [事件="事件处理程序" ...]>
例如：
<body …… οnlοad="alert('欢迎 !')" οnunlοad="alert('bye !')">
该例在文档读取完毕时弹出一个对话框，对话框里写着“欢迎！”；在用户关闭窗口或访问另一个页面时弹出“bye！”。
经常引发的事件如下所示。
（1）onfocus事件：窗口获得焦点时引发，应用于window 对象。
（2）onload事件：文档全部载入时引发，应用于window 对象，写在<body>标签中。
（3）onmousedown事件：鼠标在对象上按下时引发，应用于Button 对象、Link 对象。
（4）onmouseout事件：鼠标离开对象时引发，应用于Link 对象。
（5）onmouseover事件：鼠标进入对象时引发，应用于Link 对象。
（6）onmouseup事件：鼠标在对象上按下后弹起时引发，应用于Button 对象、Link 对象。
（7）onreset事件：“重置”按钮被单击时引发，应用于Form 对象。
（8）onresize事件：窗口被调整大小时引发，应用于window 对象。
（9）onsubmit事件：“提交”按钮被单击时引发，应用于Form 对象。
（10）onunload事件：卸载文档时引发，应用于window 对象，写在<body>标签中
阅读目录（置顶)(长期更新计算机领域知识）https://blog.csdn.net/weixin_43392489/article/details/102380691
阅读目录（置顶)(长期更新计算机领域知识）https://blog.csdn.net/weixin_43392489/article/details/102380882
599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
