10.1 JavaScript概述
10.1.1 JavaScript简介
JavaScript是一种基于 对象(0bject) 和 事件驱动(EventDriven) 并具有安全性能的脚本语言，能够与HTML(超文本标记语言)、Java语言一起在Web页面中与web 客户交互，它无须经过先将数据传给服务器端(Server)、再传回来的过程，而直接可以由客户端(Client)的应用程序处理，从而可以开发客户端的应用程序等。JavaScript是通过嵌入或调入在标准的HTML语言中实现的，弥补了HTML语言的缺陷、是Java与HTML折中的选择，通常具有以下特点。
10.1.1.1 简单性
JavaScripl是一种脚本语言，采用小程序段的方式实现编程。像其他脚本语言一样JavaScript 同样是一种解释性语言，提供了一个简易的开发过程。
10.1.1.2 动态性
JavaScript 是动态的，可以直接响应用户或客户的输入，无须经过Web服务程序，通过事动来响应用户的请求。
10.1.1.3 跨平台性
JavaScrip依赖浏览器，与操作环境无关，只要能运行浏览器的计算机、支持JavaSeript的浏览器就可以正确执行。
10.1.1.4 安全性
JavaScript 是一种安全性语言，不允许访问本地的硬盘，并不能将数据存人到服务器上不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，可有效地防止数据的丢失。
10.1.1.5 基于对象的语言
JavaScript是一种基于对象的语言，同时可以看作是一种面向对象的语言。这意味着它能将特定功能封装在对象中。
10.1.2 JavaScript入门案例
JavaScript程序不能独立运行，必须依赖HTML文件，通常将JavaScript 代码放置在script 标记内，由浏览器 JavaScript 脚本引擎来解释执行。
语法：
<script type =" text/javascript" >
//(JavaScript 代码)
</script>说明：
script 标记是成对标记，以<script>开始，以</script>结束。type 属性说明脚本的类型属性值“text/javascript”意思是使用Javascript编写的程序是文本文件。script 标记既可以放在HIML的头部，也可以放在HTML的主体部分，只是装载的时间不同。
下面来看看入门案例
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8" >
<title>JavaScript 入门案例</title>
</head>
<body>
<script type="text/javascript">
document.write('Hello World!');
</script>
</body>
</html>
document.write() 是文档对象的输出函数，其功能是将括号中的字符或变量值输出到窗口。
10.1.3 JavaScript放置的位置
JavaScript 代码一般放置在页面的 head 或 body 部分。当页面载人时，会自动执行位于body 部分的 JavaScript；而位于 head 部分的 JavaSeript 只有被显式调用时才会被执行。
10.1.3.1 head标记中的脚本
script标记放在头部 head 标记中，通JavaScript 代码必须定义成函数形式，并在主体body 标记内调用或通过事件触发。放在head 标记内的脚本在页面装载时同时载人，这样在主体标记内调用时可以直接执行，提高了脚本执行速度。
语法：
function functionname(参数1, 参数2, …… , 参数n) {
函数体语句;
}
说明：
- JavaScript 自定义函数必须以 function 关键字开始，然后给自定义函数命名，函数命名时一定遵守标识符命名规范。函数名称后面一定要有一对括号“ () ”，括号内可以有参数，也可以无参数，多个参数之间用逗号 “ , ” 分隔。函数体语句必须放在大括号“ { } ”内。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>head中定义的JS函数</title>
<script type="text/javascript">
function message(){
alert("调用js函数！sum(100,200)="+sum(100,200));
}
function sum(x,y){
return x + y;
}//函数返回结果
</script>
</head>
<body>
<h4>head标记内定义两个JS函数</h4>
<p>无返回值函数：message()</p>
<p>有返回值函数：sum(x,y)</p>
<form>
<input name="btncal" type="button" onclick="message();"value="计算并显示两个数的和"/>
</form>
</body>
</html> 
以上示例中在 head 部分插入 script 标记，在 script 标记内定义 JavaScript 函数 messag() 、sum(x，y)。alert()函数是弹出告警消息框，并调用 sum(100，200)函数，计算出结果并输出相关信息；body中定义了一个普通按钮 btncal，当单击该按钮时触发按钮的onclick 事件，调用在 head 部分定义的 message 函数，弹出告警框。
10.1.3.2 body标记中的脚本
script 标记放在主体 body 标记中，JavaScript 代码可以定义成函数形式，在主体 body 标记内调用或通过事件触发。也可以在script标记内直接编写脚本语句，在页面装载时同时执行相关代码，这些代码执行的结果直接构成网页的内容，在浏览器中可以查看。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>body中的JS脚本</title>
</head>
<body>
<p id="clk">Clicke Here</p>
<script type="text/javascript">
var demo=document.getElementById("clk");
demo.onclick=msg;
function msg(){
alert("我是body中的JavaScript脚本");
}
</script>
</body>
</html>以上示例中，为 p 元素添加了一个 id 属性，是为了使 JavaScript 脚本方便获取该元素。通过 document. getElementByld("ck") 方法就可根据 id 访问这个元素，该方法返回的结果是一个DOM对象：demo。然后，通过 “ DOM对象 . 事件名 = 函数名 ”就能设置该对象在事件发生时将执行的函数；当用户点击 “Click Here” 文本时，就会弹出如上图所示的警示框。
10.1.3.3 外部js文件中的脚本
除了将 JavaScript 代码写在 head 和 body部分以外，也可将JavaScript 函数单独写成个js文件，在 HTML 文档中引用该 js文件。
例如：调用外部js文件中的JavaScript函数。
js/demo.js文件的代码如下：
function message(){
alert('调用外部js文件中的JavaScript函数！');
}HTML文件的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>调用外部JS文件JavaScript函数</title>
<script type="text/javascript" src="js/demo.js">
document.write("这条语句没有执行，被忽略了");
</script>
</head>
<body>
<form>
<input name="btn1" type="button" onclick="message()" value="调用外部JS文件JavaScript函数"/>
</form>
</body>
</html>
以上示例中将 JavaScript 函数写在一个文件 demo.js中，代码中定义了一个函数message，注意在“ js ”文件中不需要使用<script></script>标记来包围代码。当点击上述示例中的按钮时，触发 onclick 事件，执行 demo.js中定义的 message()函数实现在页面上弹出告警框的功能，如上图所示。
10.1.3.4 事件处理代码中的脚本
JavaScript 代码除了上述三种放置位置外，还可直接写在事件处理代码中
例如： 调用直接写在事件处理代码中JavaScript程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>直接在事件处理中加入JavaScript代码</title>
</head>
<body>
<form>
<input name="button" onclick="alert('直接在事件处理中加入JavaScript代码')" value="直接调用JavaScript代码"/>
</form>
</body>
</html>
上面示例中直接在普通按钮的 onclick 事件中插入了 JavaScript 代码，单击该按钮时弹出告警框。
用浏览器打开 JavaScript 程序时，安全级别设置较高的浏览器会阻止程序的运行，应选择"允许阻止的内容”选项，才能运行。
10.2 JavaScript语法
10.2.1 语法基础
在运用JavaScript语言编写程序时，需注意以下几点：
10.2.1.1 区分大小写
在 JavaScript 中，变量名、函数名、关键字等都是区分大小写的。这意味着myVariable和myvariable是两个完全不同的标识符。例如，如果你定义了一个函数function myFunction() {...}，那么在调用这个函数时，必须使用myFunction()，如果写成myfunction()，JavaScript 会认为这是一个未定义的函数，从而导致错误。
10.2.1.2 变量不区分类型
JavaScript 是一种弱类型语言，这与强类型语言（如 Java、C#）形成对比。在 JavaScript 中，变量的类型不需要在声明时指定，并且一个变量可以在不同的时间点存储不同类型的数据。例如，你可以先将一个数字赋值给变量x，然后再将一个字符串赋值给x。
例如：
let x = 5;
console.log(x);
x = "Hello";
console.log(x); 10.2.1.3 每行代码结尾可以省略分号
在JavaScript里面每条语句结尾的分号“ ; ”不是必要的，如果多个语句写在一行上那么语句之间的分号“ ; ”才是必需的，最后一条语句的分号“ ; ”可以省略。为了养成良好的编程习惯，建议还是在每条语句后面加上分号。
10.2.1.4 注释与C、C++、Java等语言相同
JavaScript 支持两种类型的注释，与 C、C++、Java 等语言类似。一种是单行注释，使用//符号，从//开始到本行末尾的内容都会被视为注释而不被执行。另一种是多行注释，使用/* */符号，在/*和*/之间的所有内容都被视为注释，这种注释可以跨越多行。
10.2.2 标识符和常用变量
10.2.2.1 标识符
标识符是计算机语言中用来表示变量名、函数名等的有效字符序列，简单来说，标识符就是一个名字，JavaScript关于标识符的规定如下：
- 必须使用英文字母或者下划线开头。
- 必须使用英文字母、数字、下划线组成，不能出现空格或制表符
- 不能使用JavaScript关键字与 JavaScript 保留字。
- 不能使用JavaSeript语言内部的单词，比如 Infinity，NaN，undefined 等
- 大小写敏感，如 name 和 Name 是不同的两个标识符。
合法的标识符:Hello、_12t、sum、Dog23等不合法的标识符:if、3com、case、swilch 等。
10.2.2.2 变量声明
在JavaScript语言环境中，变量是用于存储信息的容器中任何类型的变量声明。JavaScript是采用的隐式变量声明，但要注意在JavaScrpt语言的何位置进行隐式变量声明会将变量声明为全局变量，而函数内的局部变量则必须使用来声明变量，因此，在声明变量时，需要根据变量的作用范围来声明变量。
变量声明的格式：
var count; //单个声明
var count , amount , level ; //用单个 var 关键字声明的多个变量
var count=O,amount= 100; //一条语句中的变量声明和初始化10.2.2.3 变量类型
Javascript有6种数据类型，主要的类型有Nmmber数值型、String字符型、以及 Boolean 布尔型，其他两种类型为Null和 Undefined.
- Number数值型。JavaScript支持整数和浮点数。整数可以为正数、0或负数;浮点数包含小数点，例如3.53、-534.87等都是浮点数。浮点数还可以采用科学计数法进行表示，如 3.5E15 表示 3.5x1015
-
Sting字符型。字符型数据又称为字符串型，由若干个字符组成，并且用单引号或双引号封装起来，例如: "你好!" "this is string" "学习语言” 。
在使用字符串的过程中，有时会遇到一种情况:在一个字符串中需要使用单引号或双引号。正确的方法是在由双引号标记的字符串中引用字符时使用单引号，在由单引号标记的字符串中引用字符时使用双引号，即单引号、双引号必须成对使用相互包含，但不能交叉。
例如：
"热烈欢迎参加 'JavaScript 技术' 研讨的专家"; //正确的用法
"学习不是一件"容易"的事件' ; //错误的用法 -
Boolean布尔型。Boolean值有true和false，这是两个特殊值，可以将他们转换为其他类型的数据，例如可将值为true的布尔型数据转换为整数1，而将值为false的布尔型数据转换为整数 0。但不能用true 表示1或false 表示 0。
-
Undefined 数据类型。JavaScript 会对未赋值变量赋值为 undefined。
-
Null数据类型。这是一个对象，但是为空。因为是对象，所以typeof null 返回“Object”，注意null是 Javascript 保留关键字。
-
0bject类型。除了上面提到的各种常用类型外，对象类型也是JavaScript中的重要
组成部分。
10.2.3 运算符与表达式
JavaScript 运算符主要有:算术运算符、关系运算符、逻辑运算符、赋值运算符、条件运算符、逗号运算符等。根据操作数的个数，可以将运算符分为一元运算符、二元运算符和三元运算符。
由操作数(变量、常量、函数调用等)和运算符结合在一起构成的式子称为“表达式”,最简单的表达式可以是常量名称。
10.2.3.1 算术运算符和表达式
算术运算符负责算术运算，用算术运算符和运算对象(操作数)连接起来符合规则的式子，称为算术表达式。JavaScript中常用算术运算符见下表。
前置，先运算再使用。
后置，先使用再运算
10.2.3.2 关系运算符和表达式
关系运算符用于比较运算符两端的表达式的值，确定二者的关系，根据运算结果返回一个布尔值。用关系运算符和操作数连接起来符合规则的式子，称为关系表达式。
JavaScript中常用的关系运算符如下
10.2.3.3 逻辑运算符和表达式
逻辑运算符用来执行逻辑运算，其操作数都应该是 布尔型数值 和 表达式 或者 是可以转为布尔型的数值和表达式，其运算结果返回 true或false。用逻辑运算符和操作数连接起来符合规则的式子，称为逻辑表达式。
JavaScript中常用的逻辑运算符式如下
10.2.3.4 赋值运算符和表达式
赋值运算符是 JavaScript 中使用频率最高的运算符之一。赋值运算符要求其左操作数是个变量、数组元素或对象属性，右操作数是一个任意类型的值，可以为常量、变量、数组元素或对象属性。赋值运算符的作用就是将右操作数的值赋给左操作数。用赋值运算符和操无数连接起来符合规则的式子，称为赋值表达式。
10.2.3.5 条件运算符和表达式
条件运算符是一个三元运算符，条件表达式由条件运算符和三个操作数构成。
语法：
变量=表达式1 ? 表达式2 : 表达式3
说明：
该条件表达式表示，如果表达式1的结果为真(true)，则将表达式2的值赋给变量，否则将表达式3的值赋给变量。例如，变量number1、number2 比较大小，将较大的数赋值变量max，
代码如下:
var max= ( number1>number2) ? number1 : number2 ;10.2.3.6 逗号运算符和表达式
逗号运算符是一个二元运算符，逗号运算符的优先级最低，由逗号运算符和操作数连接媒来符合规则的式子，称为逗号表达式，其运算规则是先计算第一个表达式的值，再计算第二个表达式的值，依次类推，计算完所有表达式的值，运算结果为最后一个表达式的值。
例如：
var rs=(3+5,10*6);
/*先计算第一个表达式 3+5 的值为8,再计算第二个表达式 10*6的值为 60最后将第二个表达式的值60赋给变量rs */10.2.4 程序设计
Javascipt 脚本语言的基本构成是由控制语句、函数、对象等来实现编程的，其中控制句主要有条件分支语句和循环语句。
10.2.4.1 条件分支语句
if-else语句：语法格式：
if (条件表达式) { // 条件为true时执行的代码块 语句1; } else { // 条件为false时执行的代码块 语句2; }例如：
let temperature = 20; if (temperature > 25) { console.log("天气炎热"); } else { console.log("天气比较凉爽"); }这里判断温度值，如果温度大于
25就输出 “天气炎热”，否则输出 “天气比较凉爽”，实现了根据不同条件执行不同代码逻辑的功能。if-else if-else语句（多重条件判断）语法格式：
if (条件表达式1) { // 条件1为true时执行的代码块 语句1; } else if (条件表达式2) { // 条件1为false且条件2为true时执行的代码块 语句2; } // 可以继续添加更多的else if部分 else { // 前面所有条件都为false时执行的代码块 语句3; }例如：
let score = 85; if (score >= 90) { console.log("优秀"); } else if (score >= 80) { console.log("良好"); } else if (score >= 60) { console.log("及格"); } else { console.log("不及格"); }通过多个
else if分支，可以对成绩进行更细致的等级划分，根据score的不同值进入相应的代码块输出对应的等级评价。-
switch语句语法格式：
switch (表达式) { case 值1: // 当表达式的值等于值1时执行的语句 语句1; break; case 值2: // 当表达式的值等于值2时执行的语句 语句2; break; // 可以有多个case分支 default: // 当表达式的值与所有case的值都不匹配时执行的语句 语句3; }例如：
let day = "Monday"; switch (day) { case "Monday": console.log("今天是周一，新的一周开始啦"); break; case "Tuesday": console.log("今天是周二"); break; // 其他case分支省略 default: console.log("这是其他日子"); }在这个示例中，根据变量
day的值来匹配相应的case，如果day的值为"Monday"，就会执行对应的console.log语句并输出相应内容，然后通过break语句跳出switch结构，避免继续执行后面的case分支代码。若day的值与所有case列举的值都不匹配，则执行default分支的代码。
10.2.4.2 循环语句
1. for 循环
- 基本语法格式：
for (初始化表达式; 条件表达式; 更新表达式) {
// 循环体，只要条件表达式的值为true，就会重复执行这里面的语句
语句1;
语句2;
}
例如，计算 1 到 100 的整数和：
let sum = 0;
for (let i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum);
在 for 循环中，首先执行初始化表达式 let i = 1，定义循环变量 i 并初始化为 1；然后每次循环开始前判断条件表达式 i <= 100 是否为 true，如果是则执行循环体中的代码（这里是将 i 的值累加到 sum 变量上），接着执行更新表达式 i++ 对循环变量 i 进行自增操作，如此反复，直到条件表达式的值为 false 时停止循环，最后输出总和。
2. while 循环
- 语法格式：
while (条件表达式) {
// 只要条件表达式的值为true，就会一直执行这里面的语句
语句1;
语句2;
}
例如，用 while 循环实现同样计算 1 到 100 整数和的功能
let sum = 0;
let i = 1;
while (i <= 100) {
sum += i;
i++;
}
console.log(sum);
这里先初始化变量 i 和 sum，然后只要 i <= 100 这个条件为 true，就会不断执行循环体中的累加和自增操作，当条件不满足时停止循环并输出结果。
3. do-while 循环
- 语法格式：
do {
// 先执行一次循环体语句，然后再判断条件表达式的值
语句1;
语句2;
} while (条件表达式);
例如：
let num = 1;
do {
console.log(num);
num++;
} while (num <= 5);
在 do-while 循环中，会先执行一次循环体，输出 num 的当前值，然后对 num 进行自增操作，接着判断 num <= 5 这个条件表达式是否为 true，如果是则继续执行循环体，重复上述过程，直到条件为 false 时停止循环。与 while 循环不同的是，do-while 循环至少会执行一次循环体，即使初始条件不满足，也会先执行一次里面的语句再进行后续判断。
这些条件分支语句和循环语句是 JavaScript 中用于控制程序流程、实现不同逻辑处理和重复执行代码块的重要语法结构，它们在各种实际应用场景中都有着广泛的运用。
10.2.5 函数
10.2.5.1 定义函数
- 语法格式：
function 函数名(参数列表) {
// 函数体，包含要执行的语句
语句1;
语句2;
//...
}
例如，定义一个简单的函数用于计算两个数的和：
function add(num1, num2) {
return num1 + num2;
}
这里定义了一个名为 add 的函数，它接受两个参数 num1 和 num2，在函数体中通过 return 语句返回这两个数相加的结果。
10.2.5.2 函数返回值
需要返回某个值的函数必须使用retum语句。
例如:
function sum ( a , b){
x= a+ b;
return x;
}JavaScript 中的函数无须对函数的返回值进行声明，直接使用 return，返回值的类型可以是本节提到的6种类型中的任意一种。
10.2.5.3 函数调用
函数的调用很简单，可以通过其名字加上括号中的参数进行调用。如调用上面的sun函数，可以这样写：sum(5，8)。
例如：调用JavaScript函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>函数调用</title>
<script type="text/javascript">
function sayHello(){
alert("Hello Word!");
}
</script>
</head>
<body>
<button onclick="sayHello()">单击这里</button>
</body>
</html>
10.3 JavaScript对象
10.3.1 对象基础
10.3.1.1 概述
JavaScript 编程是使用“面向对象”的概念，也称为“对象化编程”。JavaScript“面向对象编程”的意思就是把JavaScript 能涉及的范围划分成大大小小的对象，对象下面还继续划分对象，所有的编程都以对象为出发点，基于对象，小到一个变量，大到网页文档、窗口甚至屏幕，都是对象。
在JavaScript里面可以创建自己的对象，但在创建用户自定义对象前，需要先学习创建的JavaScript对象，以及如何使用它们。本节后续开始将具体地依次讲解JavaScript的内建对象。
在JavaScript 里面创建一个新的空对象，例如：
var o= new object( );
JavaScript 的对象可分为本地对象或内置对象、Browser 对象和 HTML DOM 对象。
- 本地对象。本地对象就是 ECMA-262 标准内定义的类,见下表：
全局对象是预定义的对象，作为JavaScript的全局函数和全局属性的占位符。通过使用全局对象，可以访问所有其他预定义的对象、函数和属性。全局对象不是任何对象的属性，所以它没有名称。
全局对象只是一个对象，而不是类，它既没有构造函数，也无法实例化一个新的全局 - Browser对象。Browser 0bjects也可被称作 BOM,是用来与浏览器窗体网页产生互动的对象。Browser 对象列表见下表：
- HTML DOM对象。HTML DOM定义了用于HTML的一系列标准对象，以及访问和处理 HTML文档的标准方法。其中，最重要的一个对象就是document对象，document 代表整个HTML文档，用来访问页面中的所有元素。
10.3.1.2 属性
1. 什么是属性
在 JavaScript 中，对象是由属性和方法组成的复合数据结构。属性可以理解为对象所具有的特征或状态，它以键值对的形式存在，其中键（Key）是一个字符串（在 ES6 之后也可以使用 Symbol 类型，但相对较少用），值（Value）可以是任意的 JavaScript 数据类型，比如数字、字符串、布尔值、数组、函数甚至是其他对象等。
例如，定义一个表示人的对象：
let person = {
name: "Alice",
age: 30,
isStudent: false,
hobbies: ["reading", "traveling"]
};
在这个 person 对象中，name、age、isStudent、hobbies 就是对象的属性名（键），而 "Alice"、30、false、["reading", "traveling"] 分别是对应的属性值。
2. 属性的访问
- 点表示法：
- 当属性名是合法的标识符（符合变量命名规则，比如不能以数字开头等）时，可以使用点（
.）表示法来访问对象的属性。例如，获取person对象的name属性值并输出：
- 当属性名是合法的标识符（符合变量命名规则，比如不能以数字开头等）时，可以使用点（
console.log(person.name); // 输出 "Alice"
同样，可以修改属性的值：
person.age = 31; // 将person对象的age属性值修改为31
console.log(person.age); // 输出 3110.3.1.3 方法
1. 什么是方法
方法本质上就是对象的属性，只不过这个属性的值是一个函数。方法用于定义对象能够执行的操作或行为，通过调用这些函数来实现特定的功能。
例如，继续扩展前面的 person 对象，添加一些方法：
let person = {
name: "Alice",
age: 30,
hobbies: ["reading", "traveling"],
sayHello: function() {
console.log("Hello, I'm " + this.name);
},
addHobby: function(newHobby) {
this.hobbies.push(newHobby);
}
};
这里 sayHello 和 addHobby 就是 person 对象的方法，它们都是函数类型的属性。
2. 方法的调用
- 同样可以使用点表示法或方括号表示法来调用对象的方法，通常使用点表示法更为常见。例如，调用
person对象的sayHello方法：
person.sayHello(); // 输出 "Hello, I'm Alice"
调用 addHobby 方法给 hobbies 属性添加一个新的爱好：
person.addHobby("painting");
console.log(person.hobbies); // 输出 ["reading", "traveling", "painting"]
在方法内部，this 关键字通常指向调用该方法的对象本身，这使得方法能够访问和操作对象自身的属性。不过要注意在不同的调用场景下，this 的指向可能会发生变化，比如在回调函数等复杂情况下，可能需要使用 bind、call、apply 等方法来正确绑定 this 的指向，确保方法能正确地与所属对象进行交互。
3. 动态添加和替换方法
- 与属性类似，可以动态地给对象添加新方法或者替换已有的方法。例如：
person.showDetails = function() {
console.log(`Name: ${this.name}, Age: ${this.age}`);
};
person.showDetails(); // 输出 "Name: Alice, Age: 30"
// 替换已有的sayHello方法
person.sayHello = function() {
console.log("Hi there!");
};
person.sayHello(); // 输出 "Hi there!"
对象的属性和方法是 JavaScript 面向对象编程中的重要概念，它们使得代码能够更自然地模拟现实世界中的实体以及它们的行为，并且方便进行数据组织和功能实现，在构建复杂应用程序时经常会用到这些知识。
10.3.2 常用对象
10.3.2.1 window对象
window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，window 对象是全局对象，所有的表达式都在当前的环境中计算。
（1）窗口操作。window 对象是 JavaScript 中最大的对象，主要用于操作浏览器窗口。通常要引用它的属性和方法时不用 window.xx形式，而直接使用方法名称即可。通过 window 对象移动或调整浏览器窗口的大小，有4种方法:
- moveBy(x，y)：从当前位置水平移动窗体x个像素，垂直移动窗体y个像素。x为负数,将向左移动窗体;y为负数，将向下移动窗体。
- moveTo(x，y)：移动窗体左上角到相对于屏幕左上角的(x，y)点。当使用负数作为参数时，窗体会移出屏幕的可视区域。
- resizeBy(w，h)：相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体。
- resizeTo(w，h)：把窗体宽度调整为w个像素，高度调整为h个像素。
例如：使用windows对象移动浏览器窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>移动窗口</title>
<script type="text/javascript">
function moveWin(){
myWindow.moveTo(50,50);
}
</script>
</head>
<body>
<script type="text/javascript">
myWindow = window.open(",",width=200,height=100)
myWindow.document.write("This is 'myWindow'");
</script>
<input type="button" value="Move'myWindow'" onclick="moveWin()"/>
</body>
</html>
以上示例开始运行时效果入上图所示，点击 "Move'myWindow'" 后小窗口的左上角移动到屏幕左上角的（50，50）点。
（2）打开窗口。用open()打开新窗口。
语法：
window. open( url , name , features , replace );
说明：
- url：要载入窗体的URL.
- name：新建窗体的名称。
- features：代表窗体特性的字符串，字符串中每个特性使用逗号分隔。
- replace：一个布尔值，说明新载人的页面是否替换当前载入的页面，此参数通常不用指定。
（3）关闭窗口。用close()关闭窗口。
语法：
window. close( );
例如，关闭一个新建的窗口：
var NewWin= window.open(.....);
NewWin. close( );
（4）系统对话框。window对象有三种常用的对话框：
- alert()：显示提示信息，不能对脚本产生任何改变。常见于提醒用户信息不完整、有误等情况。
- confirm()：弹出消息对话框(对话框中包含一个0K按钮与一个Cancel 按钮)，一般用于确认信息，返回true或fale，所以主要用于if…else…判断。常见于用户对信息更改前的确认。
- prompt()：一个带输人框的对话框，可以返回用户填入的字符串，常见于某些留言板或论坛输入内容那里的插入 UBB格式图片。
例如：使用confirm() 对话框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>confirm()的使用</title>
</head>
<body>
<script>
var userChoice = window.confirm("请选择“确定”或“取消”");
if(userChoice==true){
document.write("OK!");
}
if(userChoice==false){
document.write("Cancel!");
}
</script>
</body>
</html>
单击确定
单击取消
例如：使用prompt（）提示对话框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>prompt()的使用</title>
</head>
<body>
<script type="text/javascript">
var hobby = prompt('请问您的爱好？','请输入');
document.write("您的爱好是---"+ hobby);
</script>
</body>
</html>
10.3.2.2 document对象
document本身是一个对象，但又是JavaScript中 window 对象和 frames 对象的一个属性其描述当前窗口或指定窗口对象的文档。它包含文档从<head>标签到</body>标签的全部内容。
用法为 document 或<窗口对象>.document，其中 document 表示当前窗口的文档，<窗口对象>.document 表示指定窗口的文档。
（1）document 对象属性。表为 document 对象比较常用的属性，其他更多的属性请查阅 JavaScript的相关技术文档。
例如：查看document对象属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document属性</title>
</head>
<body>
<img src="img/1.bmp" BORDER="0" alt=""/><br/>
<script type="text/javascript">
document.write("文件地址：" + document.location+"<br/>")
document.write("文件标题：" + document.title+"<br/>");
document.write("图片路径：" + document.images[0].src+"<br/>");
</script>
</body>
</html> 
（2）document对象方法。document对象常用的方法如下表
10.3.2.3 location对象
location 对象用于获取或设置窗体的URL，并且可以用于解析URL，是JavaScript 中最重要的对象之一，location的中文意思是 “位置” 。location既是 window对象的属性又是document对象的属性，即“window . location== document . location;”。
(1) location对象属性。location对象包含8个属性，最重要的一个是 href属性，代表当前窗体的URL，其余7个都是当前窗体的URL的一部分。
例如：location对象属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>location对象属性</title>
<script type="text/javascript">
function currLocation(){alert(window.location)}
function newLocation(){window.location="10.3.2.html"}
</script>
</head>
<body>
<input type="button" onclick="currLocation()" value="显示当前的URL"/>
<input type="button" onclick="newLocation()" value="改变URL"/>
</body>
</html>
(2) location 对象方法。
10.3.2.4 navigator对象
navigator 对象的中文意思为 “导航器”，通常用于检测浏览器与操作系统的版本，也是window 对象的属性。
由于navigator没有统一的标准，因此各个浏览器都有自己不同的navigator版本navigator的属性和方法也会有一定的不同。这里介绍普遍支持且常用的部分属性和方法。
（1）navigator对象属性。navigator中最重要的是userAgent属性，它用来返回包含浏览器版本等信息的字符串;其次cookieEnabled也很重要，使用它可以判断用户浏览器是否开启 cookie。
（2）navigator对象方法。
10.3.2.5 screen对象
screen 对象用于获取用户的屏幕信息，是window 对象的属性
每个 window 对象的 screen 属性都引用一个 screen 对象。可以通过seren 对象获取一些10用户屏幕的信息，如宽度、高度、像素等，而这些信息对于设置图片和页面在测览器中显示的大小都是非常有用的。screen 对象的属性应用和测览器的关系比较密切，所以在应用这些属性时，一定要注意浏览器之间的兼容性。
10.4 JavaScript事件
10.4.1 事件及事件处理
指定事件处理程序有三种方法:
- 直接在HTML标记中指定。这种方法用得最多。
一般形式:
<标记…事件=”事件处理程序”[事件="事件处理程序"…]> - 编写特定对象特定事件的JavaScript。这种方法用得少，但是在某些场合还是很好
用的。
一般形式:
<script language="JavaScript" for="对象" event="事件"> - 在JavaScript 中说明。
一般形式:
<事件主角-对象>.<事件>=<事件处理程序>;
10.4.2 常用事件
JavaScript 中常用事件主要包括一般页面事件、鼠标事件、键盘事件等。
10.4.3 事件应用举例
事件的应用常见于下面几种场景：鼠标单击某一元素、页面或图像载人、鼠标悬浮于页面的某个热点之上、在表单中选取输入框、确认表单、键盘按键等。下面通过几个示例来学习事件的具体应用。
例如：onLoad事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onLoad事件</title>
</head>
<body onload="checkCookies()">
<script type="text/javascript">
function checkCookies(){
if(navigator.cookieEnabled == true)
alert("已启用Cookies");
else
alert("未启用Cookies");
}
</script>
<p>提示框会告诉你，浏览器是否已启用Cookies</p>
</body>
</html>
例如：onchange事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onchange事件</title>
<script type="text/javascript">
function myFunction(){
var x = document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
请输入英文字符:<input type="text" id="fname" onchange="myFunction()"/>
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
</body>
</html>
例如： 鼠标事件(包含：onmouseover、onmouseout、onmousedown,、onmouseup)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标事件(onmouseover、onmouseout、onmousedown,、onmouseup)</title>
<script type="text/javascript">
function mouseOver(obj){
obj.style.color="blue";
obj.innerHTML="把鼠标移开";
}
function mouseOut(obj){
obj.style.color="red";
obj.innerHTML="把鼠标移到上面";
}
function mouseDown(obj){
obj.style.backgroundColor="blue";
obj.innerHTML="请释放鼠标按钮";
}
function mouseUp(obj){
obj.style.backgroundColor="red";
obj.innerHTML="请按下鼠标按钮";
}
</script>
</head>
<body>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)"
style="background-color: green; width: 120px;height: 20px;padding: 20px;color:
#ffffff;">
把鼠标移到上面
</div>
<br />
<div onmousedown="mouseDown(this)" onmouseup="mouseUp(this)"
style="background-color: green; width: 120px;height: 20px;padding: 20px;color:
#ffffff;">
请按下鼠标按钮
</div>
</body>
</html>
把鼠标移到上面
按下鼠标按钮
例如：onkeypress事件、onkeydown事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘事件</title>
<script type="text/javascript">
function keyDown(){
alert("你按下了按键");
if(event.ctrlKey){
alert("你按下了Ctrl键");
}
}
function KeyPress(){
alert("你按下了键，并释放了按键");
}
</script>
</head>
<body onkeydown="keyDown()" onkeypress="KeyPress()">
</body>
</html>按下键盘任意键（除ctrl键）
按下ctrl键
释放按键
10.5 综合案例——轮播广告
在网站的首页经常看到轮流播放的图片广告，既美化了页面又节省了版面。本例要求制作一个图片轮播页面，效果图如下
运行效果
图片轮播原理：将一系列图片平铺，利用CSS布局只显示其中一张图片，其余隐藏。通过计算偏移量利用定时器实现自动播放，或通过手动点击事件（点击左右两边的箭头）切换图片。
HTML布局：
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播广告</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-decoration: none;
}
body {
padding: 20px;
}
#container {
position: relative;
width: 600px;
height: 400px;
border: 1px solid #333;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
#list {
position: absolute;
z-index: 1;
width: 4200px;
height: 400px;
}
#list img {
float: left;
width: 600px;
height: 400px;
}
#buttons {
position: absolute;
left: 250px;
bottom: 20px;
z-index: 2;
height: 10px;
width: 100px;
}
#buttons span {
float: left;
margin-right: 5px;
width: 10px;
height: 10px;
border: 1px solid #fff;
border-radius: 50%;
background: #333;
cursor: pointer;
}
#buttons span.on {
background: orangered;
}
.arrow {
position: absolute;
top: 180px;
z-index: 2;
display: none;
width: 40px;
height: 40px;
font-size: 36px;
font-weight: bold;
line-height: 39px;
text-align: center;
color: #fff;
background-color: rgba(0, 0, 0, .3);
cursor: pointer;
}
.arrow:hover {
background-color: rgba(0, 0, 0, .7);
}
#container:hover .arrow {
display: block;
}
#prev {
left: 20px;
}
#next {
right: 20px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var container = document.getElementById('container');
var list = document.getElementById('list');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = 1;
var timer;
function animate(offset) {
var newLeft = parseInt(list.style.left) + offset;
list.style.left = newLeft + 'px';
if (newLeft > -600) {
list.style.left = -3000 + 'px';
}
if (newLeft < -3000) {
list.style.left = -600 + 'px';
}
}
function play() {
timer = setInterval(function() {
next.onclick();
}, 2000);
}
function stop() {
clearInterval(timer);
}
function buttonsShow() {
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].className == "on") {
buttons[i].className = "";
}
}
buttons[index - 1].className = "on";
}
prev.onclick = function() {
index -= 1;
if (index < 1) {
index = 5;
}
buttonsShow();
animate(600);
};
next.onclick = function() {
index += 1;
if (index > 5) {
index = 1;
}
animate(-600);
buttonsShow();
};
for (var i = 0; i < buttons.length; i++) {
(function(i) {
buttons[i].onclick = function() {
var clickIndex = parseInt(this.getAttribute('index'));
var offset = 600 * (index - clickIndex);
animate(offset);
index = clickIndex;
buttonsShow();
};
})(i);
}
container.onmouseover = stop;
container.onmouseout = play;
play();
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="img/p5.jpg" alt="草原风光" />
<img src="img/p1.jpg" alt="故宫" />
<img src="img/p2.jpg" alt="长城" />
<img src="img/p3.jpg" alt="卢沟桥" />
<img src="img/p4.jpg" alt="布达拉宫" />
<img src="img/p5.jpg" alt="草原风光" />
<img src="img/p1.jpg" alt="故宫" />
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:void(0);" id="prev" class="arrow"><</a>
<a href="javascript:void(0);" id="next" class="arrow">></a>
</div>
</body>
</html>代码讲解
- 自动播放函数play
function play() {... }：创建一个定时器，每隔 2000 毫秒（2 秒）触发一次next.onclick()，即模拟点击下一张图片的操作，从而实现轮播图的自动播放功能。 -
两次img/p5.jpg、img/p1.jpg出现是为了方便在轮播过程中实现无缝循环滚动的效果，确保切换过程流畅自然，不会出现空白等情况。<div id="list" style="left: -600px;"> <img src="img/p5.jpg" alt="草原风光" /> <img src="img/p1.jpg" alt="故宫" /> <img src="img/p2.jpg" alt="长城" /> <img src="img/p3.jpg" alt="卢沟桥" /> <img src="img/p4.jpg" alt="布达拉宫" /> <img src="img/p5.jpg" alt="草原风光" /> <img src="img/p1.jpg" alt="故宫" /> </div>#list元素的left样式初始值为-600px。这意味着在初始状态下，第一张图片（img/p5.jpg）会有一部分被移出#container容器的可视范围，而第二张图片（img/p1.jpg）会处于容器的可视区域开始展示。
![第一部分：基础知识 3. 数据类型 --[MySQL轻松入门教程]](https://i-blog.csdnimg.cn/direct/15efbf59122541599a3d1923fbdb8fef.png#pic_center)
