JavaScript基础入门
一，什么是JavaScript1，与Java无关！与Java无关！与Java无关！JavaScript是一种为网站添加互动以及自定义行为的客户端脚本语言， 通常只能通过Web浏览器去完成操作， 而无法像普通意义上的程序那样独立运行。JavaScript是一种轻量级、解释型的 Web 开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都己嵌入了JavaScript引擎、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;
}
else
b = 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("实参与形参不一致，请重新调用函数！");
else
return 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>
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
9
0- 0
已为社区贡献9条内容
所有评论(0)