JavaScript基础入门

一，什么是JavaScript

1，与Java无关！与Java无关！与Java无关！

JavaScript是一种为网站添加互动以及自定义行为的客户端脚本语言，通常只能通过Web浏览器去完成操作，而无法像普通意义上的程序那样独立运行。
JavaScript是一种轻量级、解释型的 Web 开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都己嵌入了JavaScript引擎、JavaScript 源代码可以在浏览器中直接被解释执行，用户不用担心支持问题。

JavaScript的引入，符合”渐进增强“概念中的分层设计，能赋予网站页面更灵活的交互能力。可先对HTML、CSS与JavaScript在使用时的相互联系进行简单了解：web前端基础概述：基于一个简单的网页示例

2，怎样在网页中使用JavaScript

1，使用＜script>标签，直接把JavaScript源代码直接放到网页文档中：

<!DOCTYPE html>
<html>
<head><title>JavaScript基础</title><script>function resp() {document.getElementById("demo").innerHTML = "The World: Welcome,JavaScript!";}</script>
</head>
<body><script>document.write("<hl>JavaScript: Hello,World!</hl>");</script><p id="demo">回复她一下：</p><button type="button" onclick="resp()">发送回复</button>
</body>
</html>

在这里插入图片描述

对于页面内的JavaScript脚本来说，各种公共函数和变量应放在＜head＞和＜/head＞标签之间，而将页面加载期间执行的代码、DOM对象初始化以及与DOM相关的全局引用赋值操作放在＜body＞和＜/body＞标签之间，如果没有特殊要求，不妨放在＜/body＞标签前面。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//公用函数
function hello(user) {return "<h1>Hello," + user + "</h1>";
}
</script>
</head>
<script>
//全局变量象初始化
var user = "World";
</script>
<body>
<script>
//程序执行代码
document.write(hello(user));
</script>
</body>
</html>

2，使用 JavaScript 文件:
还是使用<script>标签。

<!DOCTYPE html>
<html>
<head><title>JavaScript基础</title><script type="text/javascript" src="../static/js/test.js"></script>
</head>
<body><p id="demo">回复她一下：</p><button type="button" onclick="resp()">发送回复</button>
</body>
</html>test.js：
function resp(){document.getElementById("demo").innerHTML = "The World: Welcome,JavaScript!";
}

实现一样的效果。

用＜script>标签引入JavaScript文件，通过该标签的 src 属性指定 JavaScript 文件的URL(统一资源定位符)。

二，JavaScript基础

1，语法基础

1，大小写敏感：

<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script>d = new Date();				// 获取当前日期和时间
alert(d.toString());			// 显示日期//骆驼命名法就是在名称中每一个逻辑断点都有一个大写字母来标记，例如：
printEmployeePaychecks();
//如果使用下画线命名法，则可以按如下方式输入：
print_employee_paychecks();
//帕斯卡命名法与骆驼命名法类似。只不过骆驼命名法是首字母小写，而帕斯卡命名法是首字母大写。例如，下面就是帕斯卡命名法定义的变量。
PrintEmployeePaychecks();</script>
</head>
<body>
</body>
</html>

在这里插入图片描述

2，代码注释:
单行使用//，多行/**/。

3，关键字和保留字：

reak、else、new、var、case、finally、return、void、catch、for、switch、while、continue、function、this、with、default、if、throw、delete、in、try、do、instranceof、typeof。
abstract、enum、int、short、boolean、export、interface、static、byte、extends、long、super、char、final、native、synchronized、class、float、package、throws、const、goto、private 、transient、debugger、implements、protected 、volatile、double、import、public。

2，常量和变量

1，常量：
JavaScript 不允许用户自定义常量，只提供了一些常用的数学常量。
关于“自定义JavaScript常量”的话题，可以参考这篇文章
2，声明与定义变量：

var a;
var e = 2, f = 3;
var e = f = 3;

关于变量的作用域，可以参考C语言的情况。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>var a = "a(域外) = 全局变量<br />";var b = "b(域外) = 全局变量<br />";function f() {var a = "a(域内) = 域内变量<br />";b = "b(域内) = 域内变量<br />";document.write(a);document.write(b);	}f();document.write(a);document.write(b);	
</script>
</head>
<body>
</body>
</html>

3，运算符

运算符参考

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>var a = 1, b = 2;
var c = a + b;name = name ? name : "no value";       	//通过三元运算符初始化变量的值
alert(name);var a = [];                       		//声明并初始化变量a的值
for(var i = 0, j = 10; i <= 10; i ++ , j -- ){    	//在循环体中使用逗号运算符实现额外计算任务a[i, j] = i + j ;document.writeln("a[" + i + "," + j + "]= " + a[i, j] + "<br/>");
}window.onload =function(){document.getElementById("info").innerHTML = window.location;}</script>
</head>
<body>
<form action="#123456?name=ok" method="get" name="form1" id="form1" ><input type="text" value="zhangsan" name="name" /><br><input type="password" value="123456" name="pass" /><br>
</form><a href="javascript:void(document.forms[0].submit())">提交当前表单</a> </body>
</html>

4，语句

1，if：
在这里插入图片描述

if (a > 0){a -= 6;if (b > 0)b = 0;else if(c > 0){c = a;a = 6;}else if(d > 0){d = a;b = a;}elseb = c;
}
else {a += 6;b = a;
}

2，switch：

var age = prompt("请输入年龄：",'')switch (age) {case 1:alert("一岁");break;case 2:alert("两岁");break;case 3:alert("瞎猜你三岁");break;default:alert("不知道你几岁");
}

3，while：
在这里插入图片描述

var a = 0;while (a < 10){document.write(a);a++;
}do{document.write(a);a--;
}while (a > 0);

4，for：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding: 0;}span{display: inline-block;width: 60px;height: 16px;line-height: 16px;padding: 2px;margin: 5px;border: 1px solid red;text-align: center;}</style>
</head>
<body><div id="wrap"></div><script>window.onload = function (){var wrap = document.getElementById("wrap");var str = "";for (var i = 1; i <= 9; i++) { //使用局部变量var count = i;for (var j = 1; j <= count ; j++) {j === count ? str += "<span>" + j + "x" + count + "=" + j*count + "</span><br>": str += "<span>" + j + "x" + count + "=" + j*count + "</span>";}}wrap.innerHTML = str;}</script>
</body>
</html>

4，跳转语句 break、continue、return

5，异常处理：
在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
try{alert("执行程序");var err = new Error("异常");throw err;
}
catch(e){alert("错误名称:" + e.name + "\n错误信息:" + e.message);
}
finally{alert("finally");
}
</script>
</head>
<body>
</body>
</html>

6，var与function：

var 语句声明一个或多个变量。
function 语句定义函数。

7，with 语句和空语句：
with 语句能够为一组语句创建缺省的对象。在这一组语句中，任何不指定对象的属性引用都将被认为是缺省对象的。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box"></div>
<script>
document.getElementById("box").style.borderColor="red";
document.getElementById("box").style.borderWidth="1px";
document.getElementById("box").style.borderStyle="solid";
document.getElementById("box").style.width="400px";
document.getElementById("box").style.height="200px";
document.getElementById("box").innerHTML = "test";
等效：
with(document.getElementById("box").style){borderColor="red"; borderWidth="1px";borderStyle="solid";width="400px";height="200px";
}
</script>
</body>
</html>

5，数据类型

JavaScript 是一种弱类型语言，在定义变量时不需要指定类型。

直接存储数据，称为值类型数据。
存储数据的空间地址来间接保存数据，称为引用型数据。

1，数值：
JavaScript 包含 3 种基本数据类型：数值、字符串和布尔型。

JavaScript 数值不区分整型和浮点数，所有数值都为浮点型数值来表示。
JavaScript使用typeof()方法查看数据类型。
JavaScript提供严格模式用于消除Javascript语法的一些不合理、不严谨之处。

数值类型：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script>
//【示例1】数值直接量可以细分为整型直接量和浮点型直接量。浮点数就是带有小数点的数值，而整数是不带小数点的数。
var int = 1;					// 整型数值
var float = 1.0; 				// 浮点型数值
//【示例2】浮点数可以使用科学计数法来表示。
var float = 1.2e3;
//等价于：
var float = 1.2*10*10*10;
//或：
var float = 1200;//【示例3】
var float = 1.2e-3;
//等价于：
var float = 0.0012;
//但不等于：
var float = 1.2*1/10*1/10*1/10; 	// 返回0.0012000000000000001
//或：
var float = 1.2/10/10/10;			// 返回0.0012000000000000001//【示例4】十六进制数值直接量：以“0X”或“0x”作为前缀，后面跟随十六进制的数值直接量。
var num = 0x1F4; 				// 十六进制数值
alert(num); 					// 返回500//【示例5】八进制数值直接量：以数字0为前缀，其后跟随一个八进制的数值直接量。
var num = 0764; 				// 八进制数值//【示例6】JavaScript还提供了大量的数值运算函数，这它们都是静态函数，可以直接调用。
var a = Math.floor(20.5);				// 调用数学函数，下舍入
var b = Math.round(20.5);				// 调用数学函数，四舍五入
alert(a); 								// 返回20
alert(b); 								// 返回21//【示例7】toString()是一个非常实用的方法，它可以根据所传递的参数把数值转换为对应进制的数值字符串。参数可以接受2~36之间的任意整数，也就是说，该方法可以把数值转换为2~36之间任意一种进制数值字符串。
var a = 32;
document.writeln(a.toString(2));		// 返回字符串100000 
document.writeln(a.toString(4)); 		// 返回字符串200 
document.writeln(a.toString(16)); 		// 返回字符串20 
document.writeln(a.toString(30)); 		// 返回字符串12
document.writeln(a.toString(32)); 		// 返回字符串10//【提示】
document.writeln(32.toString(16)); 	// 执行错误
document.writeln((32).toString(16)); 	// 返回20</script>
</head>
<body>
</body>
</html>

字符串类型：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script>//【示例1】下面代码将返回“学而不思则罔思而不学则殆”合并后的字符串。
alert("学而不思则罔" + "思而不学则殆");
//【示例2】确定字符串的长度可以使用length属性，下面代码将返回13。
alert("学而不思则罔，思而不学则殆".length);	// 返回13</script>
</head>
<body>
<script>
var str = "'JavaScript'不是'Java'";
var str = '<meta charset="utf-8">';
</script>
</body>
</html>

布尔类型：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script>//【示例1】下面使用Boolean构造函数强制转换各种特殊值为布尔值。
alert(Boolean(0));			 	// 返回false
alert(Boolean(!!1)); 			// 先转为布尔值，再返回true
alert(Boolean(null)); 			// 返回false
alert(Boolean(""));			// 返回false
alert(Boolean(undefined)); 	// 返回false
//【示例2】下面代码利用假值的特殊性，判断变量a是否为空，如果为空，则提示错误信息。
var a;
if(!a){alert("该变量为空，还没有赋值！");
}
//【示例3】通过下面方式可以有效是否初始化，检测变量b，并根据情况补充赋值：
var b;
b = b?b:"OK";				// 如果变量b为空则重新为其赋值，否则采用原来的值
alert(b);</script>
</head>
<body>
</body>
</html>

typeof():
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script>alert(typeof 1);				// 返回字符串"number"
alert(typeof "1");				// 返回字符串"string"
alert(typeof true); 			// 返回字符串"boolean"
alert(typeof {});				// 返回字符串"object"
alert(typeof []);				// 返回字符串"object "
alert(typeof function(){});	// 返回字符串"function"
alert(typeof null); 			// 返回字符串"object"
alert(typeof undefined); 		// 返回字符串"undefined"</script>
</head>
<body>
</body>
</html>

严格模式：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>//【示例2】将"use strict"放到函数内的第一行，则整个函数将以严格模式运行。function strict(){"use strict";return "这是严格模式。";}function notStrict(){return "这是正常模式。";} //【示例3】如果定义一个模块或者一个库，可以采用一个匿名函数自执行的方式进行设计：
(function (){ "use strict";//some code here
})();//以下都是无效的，将不会触发严格模式。
//"use strict"前有代码
var width = 10;
'use strict';
globalVar = 100 ;
//"use strict"前有空语句
;
'use strict';
globalVar = 100;
//或
function func() {;'use strict';localVar = 200;
}
//或
function func() {;'use strict'localVar = 200;
} //当然，"use strict"前加注释是可以的：
//strict mode
'use strict';
globalVar = 100;
//或
function func() {// strict mode'use strict';localVar = 200;
}
</script>
</head>
<body>

基本数值类型转换：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script>
//数值转为字符串：
var a = 100;
var b = a + "";
alert(typeof b);    //返回string
var a = 1 + 1 + "a";
alert(a); 							// 返回字符串"2a"//字符串转为数值：
var a = "3.14";
var b = parseInt(a);
alert(typeof b);    //返回number
var c = parseFloat(a);
alert(typeof c);    //返回number
var d = a * 1;
alert(typeof d);    //返回number
var e = "a" + 1 + 1 ;
alert(e); 							// 返回字符串"a11"//数值转为布尔：
var a = 233;
var b = !!a;
alert(typeof b);    //返回boolean//布尔转为字符串：
var bool = false;
var a = bool + "";
alert(a);    //返回"false"</script>
</head>
<body>
</body>
</html>

2，null 与 undefined：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script>
//数值转为字符串：
var a = null;
alert("a="+a + " " + "typeof a is "+typeof a); //a=null   typeof a is object
var b;
alert("b="+b + "" + "typeof b is "+typeof b);  //b=undefined   typeof b is undefined
</script>
</head>
<body>
</body>
</html>

3，引用型数据：
后面会讲哦~

6，函数

JavaScript 是函数式编程语言，要熟悉 JavaScript 语言，就应该熟悉函数的应用。
1，有两种方式定义函数：

使用 function 语句声明函数。

命名函数的方法也被称为声明式函数，而匿名函数的方法也被称为引用式函数或者函数表达式，即把函数看做一个复杂的表达式，并把表达式赋予给变量。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body><div id="person"><script>var say = function(name, id){document.write('<h1>' +  name + ' ： ' + id + '</h1>');}say("张三", "9527");</script></div><div id="infor"><script>function info(information){document.write('<h1>' +  information + '</h1>');}</script><button type="button" onclick="info('绝密，不可查看！')">点击查看张三信息</button></div>
</body>
</html>

通过 Function 对象来构造函数。

每个 arg 都是一个函数参数，最后一个参数是函数主体〈要执行的代码〉。 Function()的所有参数必须是字符串。

<script>
var say = new Function("name", "say", "document.write('<h1>' +  name + ' ： ' + say + '</h1>');"); 
say("张三", "Hi!"); 
</script>

2，调用函数：

<script>
function f(){return "Hello,World！";
}
document.write(f());
</script>

3，函数参数：

形参就是在定义函数时，传递给函数的参数，被称为形参，即形式上参数。
实参就是当函数被调用时，传给函数的参数，这些参数被称为实参。

<script>
function add(a, b) {if (add.length !== arguments.length) //length获取形参个数，arguments对象可以快速操纵函数的实参。使用 ar胆ments . length 可以获取函数实参的个数，使用数组下标（缸guments[n] ）可以获取实际传递给函数的每个参数值。throw new Error("实参与形参不一致，请重新调用函数！");elsereturn a + b;
}
try{alert(add(2));
}
catch(e){alert(e.message);
}
</script>

在这里插入图片描述
4，函数应用：
在实际开发中函数常被当作表达式来进行处理。

匿名函数

<script>
var z = function(x, y) {return (x + y) / 2;
}(23, 35);
alert(z);
</script>

函数作为值

<script>
var a = function(x,y) {return (x+y)/2;
}
alert( a(12,33) );//函数既然可以当作值来使用，因此也可以参与到表达式运算中。
(function(x) {alert(x);
})(50);
</script>

函数作为参数

<script>
var a = function (f, x, y) {return f(x, y);
};
var b = function(x, y) {return x + y;
};
alert( a(b, 3, 4) );
</script>

5，闭包函数:
闭包是能够读取其他函数内部变量的函数，在JavaScript中，只有函数内部的子函数才能读取该函数的局部变量，所以闭包是将函数内部和函数外部连接起来的桥梁，闭包函数就是外部函数被调用后，它的变量不会消失，仍然被内部函数所使用，而且所有的内部函数都拥有对外部函数的访问权限。

<script>
function a() {var n = 0;function b(m){n = n + m;return n;}return b;
}
var c = a();            //调用外层函数，n=0，返回内部函数b
document.write(typeof c); //function
document.write("<br>");
document.write(c(3));   //内部函数b保存了n=0，向内部函数b传入3后，3=0+3，返回3
document.write("<br>");
document.write(c(4));   //内部函数b保存了n=3，向内部函数b传入4后，7=3+4，返回7
document.write("<br>");
document.write(c(5));   //内部函数b保存了n=7，向内部函数b传入5后，12=7+5，返回12
</script>

7，对象

1，创建对象：
对象是由 new 运算符生成，生成对象的函数被称为类。生成的对象被称为类的实例，简称为对象。这里不再深入讲OOP的概念了。

直接实例化已有的类：
var today = new Date();定义对象直接量：
var point = { x:2.3, y:-1.2 
};

2，访问对象：
通过点号运算符 . 来访问对象的属性。

var today = new Date();
var hourNow = today.getHours();var point = { x:2.3, y:-1.2 
};
var x = point.x;

对象的属性值可以是简单的值，也可以是复杂的值，如函数、对象。

<script>
var point = {f : function(){return this.y; //this就相当于Java中的this、python中的self},x : {a : 1,b : 2},y : -1.2
};
var pf = point.f();
alert(pf);
var pa = point.x.a; //等价于var a =point["x"]["a"];
alert(pa);
</script>

8，数组

1，定义数组：
通过构造函数 Array()和运算符 new 实现。

<script>//定义空数组
var a = new Array();//定义带有多种数据类型元素的数组
var a = new Array(1,2,3,"4","5"); //数组的元素没有类型限制，同python中的list//定义指定长度的数组
var a = new Array(6); //没有为元素初始化赋值，这时它们的初始值都是undefined。数组长度是可变的！
alert(a.length) //通过数组的 length 属性确定数组的长度。//以省略new运算符，直接使用Array()函数来
var a = new Array(6);
var a = Array(6);//定义数组直接量
var a = [1,2,3,"4","5"];
</script>

2，存取元素:
使用日运算符可以存取数组元素的值。

<script>
//使用for遍历数组
var str = "";
var a = [1, 2, 3, 4, 5];
for(var i = 0 ; i < a.length; i ++ ){str += (-a[i]) + " ";
}
document.write(a + "<br>");
document.write(str + "<br>");var a = [1, 2, 3, 4, 5];
a.length = 4;
document.write(a + "<br>");//尾插尾删
a.push(1,2,3);
document.write(a + "<br>");
a.push(4,5);
document.write(a + "<br>");
a.pop();
document.write(a + "<br>");//头插头删
a.unshift(0);
document.write(a + "<br>");
a.unshift(-2, -1);
document.write(a + "<br>");
a.shift();
document.write(a + "<br>");//获取从指定位置开始的指定个数的元素
var a = [1,2,3,4,5,6];
var b = a.splice(2,2);
document.write(a + "<br />");
document.write(b + "<br />"); //3，4
//用新元素替换从指定位置开始的指定个数的元素
var a = [1,2,3,4,5,6];
var b = a.splice(2,2,7,8,9);
document.write(a + "<br />"); //1，2，7，8，9，5，6
document.write(b + "<br />"); //3，4
</script>

三，操作BOM

BOM(Browser Object Model)即浏览器对象模型，主要用于管理浏览器窗口。它提供了大量独立的、可以与浏览器窗口进行互动的功能，这些功能虽然与任何网页内容无关，但作用域交互层，为交互式网页提供了条件。
BOM由多个对象组成，包括window对象、location对象、navigator对象、history对象等。

1，使用 window 对象

window 对象是 BOM 的核心，代表浏览器窗口的一个实例。它作为JavaScript中的全局对象，是JavaScript访问浏览器窗口的接口。
1，访问浏览器窗口:
过 window 对象可以访问浏览器窗口，同时与浏览器相关的其他客户端对象都是 window 的子对象，通过 window 属性进行引用。
在这里插入图片描述
其中：

window：客户端 JavaScript 中的顶层对象。每当＜body＞或＜frameset>标签出现时，window 对象就会被自动创建。
navigator ：包含客户端有关浏览器的信息。
screen ：包含客户端显示屏的信息。
history ：包含浏览器窗口访问过的 URL 信息。
location ：包含当前网页文挡的 URL 信息。
document ：包含整个 HTML 文档，可被用来访问文档内容，及其所有页面元素。

2，全局作用域：
window 对象提供了全局作用域，所有的全局变量都被视为该对象的属性。

var a = "window.a";
function f(){alert(a);
}
alert(window.a); //引用 window 对象的属性 a，返回字符串 ”window.a ”
window.f(); //调用 windwo 对象的方法 f （），返回字符串” window.a ”

3，使用系统测试方法：
window 对象定义了 3 个人机交互的接口方法，方便开发人员对 JavaScript 脚本进行测试：

alert() ：简单的提示对话框，由浏览器向用户弹出提示性信息。该方法包含一个可选的提示信息参数。这个在前面用到很多次了。
confinn() ：简单的提示对话框，由浏览器向用户弹出提示性信息，对话框中包含两个按钮，分别表示“确定”和“取消”。也包含一个可选的提示信息参数，
prompt()：弹出提示对话框，可以接收用户输入的信息，并把用户输入的信息返回。包含一个可选的提示信息参数。

var user = prompt("请输入你的用户名：");
if( ! ! user){	var ok = confirm("你输入的用户名为：\n" + user + "\n请确认。");if(ok){alert("欢迎你：\n" + user );}else{	user = prompt("请重新输入你的用户名：");alert("欢迎你：\n" + user );}
}
else {user = prompt("请输入你的用户名：");
}

在这里插入图片描述
通过 HTML 方式在客户端输出一段 HTML 片段，然后使用 css 修饰对话框的显示样式，借助 JavaScript 来设计对话框的行为和交互效果。

<style type="text/css">
#alert_box { position: absolute; left: 50%; top: 50%; width: 400px; height: 200px; display:none;}
#alert_box dl { position: absolute; left: -200px; top: -100px; width: 400px; height: 200px; border: solid 1px #999; border-radius: 8px; overflow: hidden; }
#alert_box dt { background-color: #ccc; height: 30px; text-align: center; line-height: 30px; font-weight: bold; font-size: 15px; }
#alert_box dd { padding: 6px; margin: 0; font-size: 12px; }
</style>window.alert =  function(title, info){var box = document.getElementById("alert_box");var html = '<dl><dt>' + title + '</dt><dd>' + info + '</dd><\/dl>';if( box ){box.innerHTML = html;box.style.display = "block";}else {var div = document.createElement("div");div.id = "alert_box";div.style.display = "block";document.body.appendChild(div);div.innerHTML = html;}
}
alert("重写alert()方法", "这仅是一个设计思路，还可以进一步设计");

4，打开和关闭窗口：
打开窗口：window. open(URL, narne,features,replace);

URL ：可选字符串，声明在新窗口中显示文档的 URL 。
name：可选字符串，声明新窗口的名称。
features ：可选字符串，声明了新窗口要显示的标准浏览器的特征。
replace：可选的布尔值，规定了装载到窗口的 URL 是否在窗口浏览历史中创建一个新条目。
新创建的 window 对象拥有一个 opener 属性，它保存着打开它的原始窗口对象。

myWindow=window.open();
myWindow.document.write("<h1>这是新打开的窗口</h1>");
myWindow.focus();
myWindow.opener.document.write("<h1>这是原来窗口</h1>");
alert( myWindow.opener == window);窗口并不跟踪己打开的弹出窗口，因此必要时只能手动实现跟踪 。
有些浏览器（如 Chrome）会在独立的进程中运行每个标签页。当一个标签页打开另一个标签页时，如果两个 window 对象之间需要通信，那么新标签页就不能运行在独立的进程中 。

2，关闭窗口：window . close;

使用 window.closed 属性可以检测当前窗口是否关闭。
关闭一个新创建的 w 窗口：w.close;

var error = false;
try {var url = "http://news.baidu.com/";var features = "height=500, width=800, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no";var w = window.open (url, "newW", features);if (w == null){error = true;}setTimeout(function(){if(w.closed){alert("创建的窗口已经关闭。")}else{w.close();}},3000);	
} 
catch (ex){error = true;
}if (error){alert("浏览器禁止弹出窗口。");
}

5，使用框架集：
在HTML文档中，如果页面包含框架，则每个框架都拥有自己的 window 对象，并且保存在 frames集合中，可以通过frames数值索引从左至右、从上到下访问每个 window 对象，或者使用框架名称访问每个 window 对象。每个 window 对象都有一个 name 属性，其中包含框架的名称。
在这里插入图片描述
6，控制窗口位置：
使用 window 对象的 screenLeft 和 screenTop 属性可以读取或设置窗口的位置。

<script type="text/javascript">var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;alert("Left: " + leftPos);alert("Top: " + topPos);
</script>

使用 window 对象的 moveToO和 moveByO方法可以将窗口精确地移动到一个新位置。

<script type="text/javascript">
//将窗口移动到屏幕左上角
window.moveTo(0,0);
//将窗口向下移动100像素
window.moveBy(0, 100);
//将窗口移动到(200,300)新位置
window.moveTo(200, 300);
//将窗口向左移动50像素
window.moveBy(-50, 0);
</script>

7，控制窗口大小：
使用 window 对象的 innerWidth、 innerHeight、 outerWidth 和 outerHeight 这 4 个属性可以确定窗口大小。

<script type="text/javascript">var pageWidth = window.innerWidth,pageHeight = window.innerHeight;if (typeof pageWidth != "number"){if (document.compatMode == "CSS1Compat"){pageWidth = document.documentElement.clientWidth;pageHeight = document.documentElement.clientHeight;} else {pageWidth = document.body.clientWidth;pageHeight = document.body.clientHeight;}}alert("Width: " + pageWidth);alert("Height: " + pageHeight);
</script>

window 对象定义了 resizeByO和 resizeToO方法，它们可以按照相对数量和绝对数量调整窗口的大小。

<script type="text/javascript">
window.onload = function(){timer = window.setInterval("jump()", 1000);
}
function jump(){window.resizeTo(200, 200)x = Math.ceil(Math.random() * 1024)y = Math.ceil(Math.random() * 760)window.moveTo(x, y)
}
</script>

8，使用定时器：
window 对象包含 4 个定时器专用方法，说明如表 16.3 所示，使用它们可以实现代码定时运行，避免连续执行，这样可以设计动画。
在这里插入图片描述

<script>
var o = document.getElementsByTagName("body")[0].childNodes; // 获取body元素下所有子元素
for(var i = 0; i < o.length; i ++ ){ 		// 遍历元素集合o[i].onmouseover = function(i){ 		// 注册鼠标经过事件处理函数return function(){					// 返回闭包函数f(o[i]); 		// 调用函数f，并传递当前对象引用}}(i);				// 调用函数并传递循环序号，实现在闭包中存储对象序号值
}
function f(o){ 			// 延迟处理函数// 定义延迟半秒钟后执行代码var out = setTimeout( function(){alert(o.tagName); 					// 显示当前元素的名称}, 1000);
}
</script>

2，使用 navigator 对象

navigator 对象包含了浏览器的基本信息，如名称、版本和系统等。通过window.navigator 可以引用该对象，并利用它的属性来读取客户端基本信息，
在这里插入图片描述
1，浏览器检测方法：
如果不关心浏览器的身份，仅仅在意浏览器的执行能力，那么使用特征检测法就完全可以满足需要。

if(document.getElementsByName){ 		// 如果存在，则使用该方法获取a元素var a = document.getElementsByName("a");
}
else if(document.getElementsByTagName){ 	// 如果存在，则使用该方法获取a元素var a = document.getElementsByTagName("a");
}

使用用户代理字符串检测浏览器类型。客户端浏览器每次发送 Hπp 请求时，都会附带有一个 user-agent 字符串，对于 Web 开发人员来说，可以通过脚本识别客户使用的浏览器类型。

var s = window.navigator.userAgent;
alert(s); // 返回字符串"Mozilla /4.0 (compatible;MSIE 7.0;Windows NT 5.1;DigExt ; NET CLR 2. 0.50727 ) "var s = navigator.userAgent;

2，检测浏览器类型和版本号：
用户只需要根据不同浏览器类型匹配特殊信息即可。

var ua = navigator.userAgent.toLowerCase();		// 获取用户端信息
var info ={ie : /msie/.test(ua) && !/opera/.test(ua),		// 匹配IE浏览器op : /opera/.test(ua), 							// 匹配Opera浏览器sa : /version.*safari/.test(ua), 				// 匹配Safari浏览器ch : /chrome/.test(ua), 						// 匹配Chrome浏览器ff : /gecko/.test(ua) && !/webkit/.test(ua) 	// 匹配Firefox浏览器
};(info.ie) && alert("IE浏览器");
(info.op) && alert("Opera浏览器");
(info.sa) && alert("Safari浏览器");
(info.ff) && alert("Firefox浏览器");
(info.ch) && alert("Chrome浏览器");function getIEVer(){var ua = navigator.userAgent;		// 获取用户端信息var b = ua.indexOf("MSIE ");		// 检测特殊字符串"MSIE "的位置if(b < 0){return 0;}return parseFloat(ua.substring(b + 5, ua.indexOf(";", b)));// 截取版本号字符串，并转换为数值
}alert(getIEVer());

3，检测客户操作系统：
在 navigator.userAgent 返回值中，一般都会包含操作系统的基本信息，不过这些信息比较散乱，没有统一的规则。一般情况下用户可以检测一些更为通用的信息。

<script type="text/javascript">
var isWin = (navigator.userAgent.indexOf("Win") != - 1);// 如果是Windows系统，则返回true
var isMac = (navigator.userAgent.indexOf("Mac") != - 1); // 如果是Macintosh系统，则返回true 
var isUnix = (navigator.userAgent.indexOf("X11") != - 1); // 如果是UNIX系统，则返回true
var isLinux = (navigator.userAgent.indexOf("Linux") != - 1); // 如果是Linux系统，则返回true
</script>

4，检测插件：
对于非 E 浏览器，可以使用 navigator 对象的 plugins 属性实现。 plugins 是一个数组，该数组中的每一项都包含下列属性。

name：插件的名字。
description：插件的描述。
filename：插件的文件名。
length：插件所处理的 MIME 类型数量。

<script>
function hasPlugin(name){name = name.toLowerCase();for (var i=0; i < navigator.plugins.length; i++){if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){return true;}}return false;
}
alert(hasPlugin("Flash"));
alert(hasPlugin("QuickTime"));
alert(hasPlugin("Java"));
</script>

在 E 中检测插件可以使用 ActiveXObject。

<script>
function hasIEPlugin(name){try {new ActiveXObject(name);return true;} catch (ex){return false;}
}
alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));
alert(hasIEPlugin("QuickTime.QuickTime"));
</script>

3，使用 location 对象

location 对象存储当前页面与位置（ URL ）相关的信息，表示当前显示文档的 Web 地址。使用 window对象的 location 属性可以访问。
location 对象定义了 8 个属性：
在这里插入图片描述

<script>
/*http://www.mysite.cn:80/news/index.asp?id=123&name=location#top
*/
var queryString = function(){		// 获取URL查询字符串参数值的通用函数var q = location.search.substring(1); // 获取查询字符串，即“id=123&name= location”部分var a = q.split("&");			// 以&符号为界把查询字符串劈开为数组var o = {};						// 定义一个临时对象for( var i = 0; i <a.length; i++){		// 遍历数组var n = a[i].indexOf("=");			// 获取每个参数中的等号小标位置if(n == -1) continue; 	// 如果没有发现则跳到下一次循环继续操作var v1 = a[i].substring(0, n); 		// 截取等号前的参数名称var v2 = a[i].substring(n+1); 		// 截取等号后的参数值o[v1] = unescape(v2); 				// 以名/值对的形式存储在对象中}return o; 								// 返回对象
}
var f1 = queryString();				// 调用查询字符串函数
for(var i in f1){ 						// 遍历返回对象，获取每个参数及其值alert(i + "=" + f1[i]);
}
</script>

4，使用 history 对象

histOIγ 对象存储浏览器窗口的浏览历史，通过 window 对象的 history 属性可以访问该对象。为了保护客户端浏览信息的安全和隐私， history对象禁止 JavaScript 脚本直接操作这些访问信息。
History 对象允许使用 length 属性读取列表中 URL 的个数，并可以调用 backO 、 forwardQ和 goQ方法访问数组中的 URL。

5，使用 screen 对象

screen 对象存储客户端屏幕信息，这些信息可以用来探测客户端硬件的基本配置。利用 sαeen 对象可以优化程序的设计，满足不同用户的显示要求。

在这里插入图片描述

<script>
function center(url){ 	// 窗口居中处理函数var w = screen.availWidth / 2; 	//获取客户端屏幕的宽度一半var h = screen.availHeight/2; 	// 获取客户端屏幕的高度一半var t = (screen.availHeight - h)/2; 	// 计算居中显示时顶部坐标var l = (screen.availWidth - w)/2; 	// 计算居中显示时左侧坐标var p = "top=" + t + ",left=" + l + ",width=" + w + ",height=" +h; // 设计坐标参数字符串var win = window.open(url,"url",p); 	// 打开指定的窗口，并传递参数win.focus();	// 获取窗口焦点
}
center("https://www.baidu.com/");	// 调用该函数
</script>

6，使用 document 对象

在浏览器窗口中，每个 window 对象都会包含一个 document 属性，该属性引用窗口中显示 HTML 文档的 document 对象。 document 对象与它所包含的各种节点（如表单、图像和链接）构成了文档对象模型。

在这里插入图片描述
1，访问文档对象：
浏览器在加载文档时，会自动构建文档对象模型，把文档中同类元素对象映射到一个集合中，然后以 document 对象属性的形式允许用户访问。
这些集合都是 HTMLCollection 对象，为访问文档常用对象提供了快捷方式。

document.anchors ：返回文档中所有 Archor对象，即所有带 name 特性的＜a>标签。
document.applets ：返回文档中所有 Applet 对象，即所有＜applet>标签，不再推荐使用。
document.forms ：返回文档中所有 Form 对象，与document.getElementsByTagName('form")得到的结果相同.
document.images：返回文档中所有 Image 对象，与 document.getElementsByTagName("img”）得到的结果相同.
document.links：返回文档中所有 Area 和 Link 对象，即所有带 href 特性的＜a>标签。

2,动态生成文档内容:
使用 document 对象的 write（）和 writeln（）方法可以动态生成文档内容。包括以下两种方式:

在浏览器解析时动态输出信息。
在调用事件处理函数时使用 write（）或 writeln（）方法生成文档内容。

<script>
function f(){document.write('<p>调用事件处理函数时动态生成的内容</p>');
}
document.write('<p οnclick="f()">文档解析时动态生成的内容</p>');
</script>