JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）

一、JavaScript简介

JavaScript是一种解释执行的脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型，它遵循ECMAScript标准。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，主要用来给HTML增加动态功能。

几乎所有主流的语言都可以编译为JavaScript，进而能够在所有平台上的浏览器中执行，这也体现了JavaScript的强大性和在Web开发中的重要性。如Blade：一个Visual Studio扩展，可以将C#代码转换为JavaScript，Ceylon：一个可编译为JavaScript的、模块化的、静态类型JVM语言。

JavaScript是一种可以同时运行在前端与后台的语言，如Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境（类似Java或.NET）。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

1.1、javascript组成

ECMAScript，描述了该语言的语法和基本对象，如类型、运算、流程控制、面向对象、异常等。

文档对象模型（DOM），描述处理网页内容的方法和接口。

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

JavaScript由对象组成，一切皆为对象。

1.2、JavaScript脚本语言特点

a)、解释型的脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

b)、简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

c)、动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

d)、跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

二、ECMAScript（JavaScript核心与语法）

2.1、ECMAScript定义

1)、ECMAScript是一个标准（欧洲计算机制造商协会），JavaScript只是它的一个实现，其他实现包括ActionScript（Flash脚本）

2)、ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力，即ECMAScript不与具体的宿主环境相绑定，如JavaScript的宿主环境是浏览器，AS的宿主环境是Flash。、

3)、ECMAScript描述了以下内容：语法、类型、语句、关键字、保留字、运算符、对象等

2.2、数据类型

在JS中使用var关键词声明变量，变量的类型会根据其所赋值来决定（动态类型）。JS中数据类型分为原始数据类型（5种）和引用数据类型（Object类型）。

1）5种原始数据类型：Undefined、Null、Boolean、Number和String。需要注意的是JS中字符串属于原始数据类型。

2）typeof运算符：查看变量类型，对变量或值调用typeof运算符将返回下列值之一：

• undefined – 如果变量是 Undefined 类型的
• boolean – 如果变量是 Boolean 类型的
• number – 如果变量是 Number 类型的
• string – 如果变量是 String 类型的
• object – 如果变量是一种引用类型或 Null 类型的

3）通过instanceof 运算符解决引用类型判断问题

4）null 被认为是对象的占位符，typeof运算符对于null值返回“object”。

5）原始数据类型和引用数据类型变量在内存中的存放如下：

6）JS中对类型的定义：一组值的集合。如Boolean类型的值有两个：true、false。Undefined和Null 类型都只有一个值，分别是undefined和null。

Null 类型只有一个值，就是 null ； Undefined 类型也只有一个值，即 undefined 。 null 和 undefined 都可以作为字面量（literal）在 JavaScript 代码中直接使用。

null 与对象引用有关系，表示为空或不存在的对象引用。当声明一个变量却没有给它赋值的时候，它的值就是 undefined 。

undefined 的值会出现在如下情况：

从一个对象中获取某个属性，如果该对象及其 prototype 链 中的对象都没有该属性的时候，该属性的值为 undefined 。

一个 function 如果没有显式的通过 return 来返回值给其调用者的话，其返回值就是 undefined 。有一个特例就是在使用new的时候。

JavaScript 中的 function 可以声明任意个形式参数，当该 function 实际被调用的时候，传入的参数的个数如果小于声明的形式参数，那么多余的形式参数的值为 undefined 。

示例：

结果：

关于 null 和 undefined 有一些有趣的特性：

如果对值为 null 的变量使用 typeof 操作符的话，得到的结果是 object ；

而对 undefined 的值使用 typeof，得到的结果是 undefined 。

如 typeof null === "object" //true; typeof undefined === "undefined" //true null == undefined //true，但是 null !== undefined //true

示例：

结果：

7)、 boolean类型的特殊性

8)、== 与 ===

JavaScript 中有两个判断值是否相等的操作符，== 与 === 。两者相比，== 会做一定的类型转换；而 === 不做类型转换，所接受的相等条件更加严格。

===比较时会比较类型

当然与之对应的就是!=与!==

尽量使用===而不要使用==

console.log("5"==5); //true
console.log("5"===5); //false
console.log("5"!=5); //false
console.log("5"!==5); //true

2.3、局部变量和全局变量

在函数中声明的变量只能在函数中使用，当你退出函数时，变量就会被释放，这种变量被称为局部变量。因为每个局部变量只在各自的函数中有效，所以你可以在不同的函数中使用名称相同的变量。

如果在函数之外声明变量，那么页面中所有的函数都可以使用它。在全局变量被声明后，它们就开始生效了。在网页被关闭后，变量才会失效。

注意：JS语言中，在代码块中声明的变量属于全局变量。

JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，变量声明尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯。可以使用 var 语句来进行变量声明。如：var men = true; // men 中存储的值为 Boolean 类型。

变量命名

JavaScript 是一种区分大小写的语言，因此将一个变量命名为best和将其命名为Best是不一样的。 
另外，变量名称的长度是任意的，但必须遵循以下规则：

•  1.第一个字符必须是一个字母（大小写均可）、或一个下划线(_)或一个美元符 ($)。
•  2.后续的字符可以是字母、数字、下划线或美元符。
•  3.变量名称不能是保留字。

可以不使用var定义变量，但这样定义的变量是全局变量。

 示例：

结果：

2.4、数组（Array）

①js中，数组元素类型可以不一致。

②js中，数组长度可以动态改变。

③接着上述代码，typeof arr 和 arr instanceof Array 分别输出object和true。

console.log(typeof(names)); //object
console.log(names instanceof Array); //true
console.log("" instanceof String); //false 不是对象类型
console.log(true instanceof Boolean); //false

数组对象与方法

Array 对数组的内部支持
Array.concat( ) 连接数组
Array.join( ) 将数组元素连接起来以构建一个字符串
Array.length 数组的大小
Array.pop( ) 删除并返回数组的最后一个元素
Array.push( ) 给数组添加元素
Array.reverse( ) 颠倒数组中元素的顺序
Array.shift( ) 将元素移出数组
Array.slice( ) 返回数组的一部分
Array.sort( ) 对数组元素进行排序
Array.splice( ) 插入、删除或替换数组的元素
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串
Array.unshift( ) 在数组头部插入一个元素

2.4.1、创建

var arrayObj = new Array();
var arrayObj = new Array([size]);
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);

示例：

var array11 = new Array(); //空数组
var array12 = new Array(5); //指定长度，可越界
var array13 = new Array("a","b","c",1,2,3,true,false); //定义并赋值
var array14=[]; //空数组，语法糖
var array15=[1,2,3,"x","y"]; //定义并赋值

2.4.2、访问与修改

var testGetArrValue=arrayObj[1];

arrayObj[1]= "值";

array12[8]="hello array12"; //赋值或修改
console.log(array12[8]); //取值
//遍历
for (var i = 0; i < array13.length; i++) {
 console.log("arrayl3["+i+"]="+array13[i]);
}
//枚举
for(var i in array15){ 
 console.log(i+"="+array15[i]); //此处的i是下标
}

结果：

2.4.3、添加元素

将一个或多个新元素添加到数组未尾，并返回数组新长度

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);

将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度

arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);

将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回被删除元素数组，deleteCount要删除的元素个数

arrayObj.splice(insertPos,deleteCount,[item1[, item2[, . . . [,itemN]]]])

示例代码：

//4.3、添加元素
 var array31=[5,8];
 //添加到末尾
 array31.push(9);
 var len=array31.push(10,11);
 console.log("长度为："+len+"——"+array31);
 //添加到开始
 array31.unshift(4);
 var len=array31.unshift(1,2,3);
 console.log("长度为："+len+"——"+array31);
 //添加到中间
 var len=array31.splice(5,1,6,7); //从第5位开始插入，删除第5位后的1个元素，返回被删除元素
 console.log("被删除："+len+"——"+array31);

运行结果：

2.4.4、删除

移除最后一个元素并返回该元素值

arrayObj.pop();

移除最前一个元素并返回该元素值，数组中元素自动前移

arrayObj.shift();

删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素

arrayObj.splice(deletePos,deleteCount);

示例：

//4.4、删除
 var array41=[1,2,3,4,5,6,7,8];
 console.log("array41："+array41);
 //删除最后一个元素，并返回
 var e=array41.pop();
 console.log("被删除："+e+"——"+array41);
 //删除首部元素，并返回
 var e=array41.shift();
 console.log("被删除："+e+"——"+array41);
 //删除指定位置与个数
 var e=array41.splice(1,4); //从索引1开始删除4个
 console.log("被删除："+e+"——"+array41);

结果：

2.4.5、截取和合并

以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素

arrayObj.slice(start, [end]);

将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]);

示例：

//4.5、截取和合并
 var array51=[1,2,3,4,5,6];
 var array52=[7,8,9,0,"a","b","c"];
 //截取，切片
 var array53=array51.slice(2); //从第3个元素开始截取到最后
 console.log("被截取："+array53+"——"+array51);
 var array54=array51.slice(1,4); //从第3个元素开始截取到索引号为3的元素
 console.log("被截取："+array54+"——"+array51);
 //合并
 var array55=array51.concat(array52,["d","e"],"f","g");
 console.log("合并后："+array55);

结果：

2.4.6、拷贝

返回数组的拷贝数组，注意是一个新的数组，不是指向

arrayObj.slice(0);

返回数组的拷贝数组，注意是一个新的数组，不是指向

arrayObj.concat();

因为数组是引用数据类型，直接赋值并没有达到真正实现拷贝，地址引用，我们需要的是深拷贝。

2.4.7、排序

反转元素（最前的排到最后、最后的排到最前），返回数组地址

arrayObj.reverse();

对数组元素排序，返回数组地址

arrayObj.sort();

arrayObj.sort(function(obj1,obj2){});

示例：

var array71=[4,5,6,1,2,3];
 array71.sort();
 console.log("排序后："+array71);
 var array72=[{name:"tom",age:19},{name:"jack",age:20},{name:"lucy",age:18}];
 array72.sort(function(user1,user2){
 return user1.age

结果：

2.4.8、合并成字符

返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。

arrayObj.join(separator);

示例代码：

//4.8、合并成字符与将字符拆分成数组
 var array81=[1,3,5,7,9];
 var ids=array81.join(",");
 console.log(ids);
 
 //拆分成数组
 var text="hello nodejs and angular";
 var array82=text.split(" ");
 console.log(array82);

运行结果：

所有代码：

2.5、正则表达式RegExp

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

RegExp对象：该对象代表正则表达式，用于字符串匹配

① 两种RegExp对象创建方式：

方式一，new 一个RegExp对象：var regExp = new RegExp(“[a-zA-Z0-9]{3,8}”);

方式二，通过字面量赋值：var regExp = /^[a-zA-Z0-9]{3,8}$/;

② 正则表达式的具体写法使用时查询文档。

③ 常用方法：test(string)，返回true或false。

直接量语法

/pattern/attributes

创建 RegExp 对象的语法：

new RegExp(pattern, attributes);

参数

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。

参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

返回值

一个新的 RegExp 对象，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。

如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern 是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象。

抛出

SyntaxError - 如果 pattern 不是合法的正则表达式，或 attributes 含有 "g"、"i" 和 "m" 之外的字符，抛出该异常。

TypeError - 如果 pattern 是 RegExp 对象，但没有省略 attributes 参数，抛出该异常。

示例：

结果：

支持正则表达式的 String 对象的方法

示例：

结果：

2.6、字符串对象String

字符串是 JavaScript 的一种基本的数据类型。
String 对象的 length 属性声明了该字符串中的字符数。
String 类定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符或子串。
需要注意的是，JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。

String 对象属性

String 对象方法

2.7、时间日期对象Date

Date 对象用于处理日期和时间。

创建 Date 对象的语法：

var myDate=new Date();

注释：Date 对象会自动把当前日期和时间保存为其初始值。

Date 对象属性

Date 对象方法

2.8、数学对象Math

Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);

Math 对象属性

Math 对象方法

2.9、JavaScript 全局对象

全局属性和函数可用于所有内建的 JavaScript 对象。

全局对象是预定义的对象，作为 JavaScript 的全局函数和全局属性的占位符。通过使用全局对象，可以访问所有其他所有预定义的对象、函数和属性。全局对象不是任何对象的属性，所以它没有名称。
在顶层 JavaScript 代码中，可以用关键字 this 引用全局对象。但通常不必用这种方式引用全局对象，因为全局对象是作用域链的头，这意味着所有非限定性的变量和函数名都会作为该对象的属性来查询。例如，当JavaScript 代码引用 parseInt() 函数时，它引用的是全局对象的 parseInt 属性。全局对象是作用域链的头，还意味着在顶层 JavaScript 代码中声明的所有变量都将成为全局对象的属性。
全局对象只是一个对象，而不是类。既没有构造函数，也无法实例化一个新的全局对象。
在 JavaScript 代码嵌入一个特殊环境中时，全局对象通常具有环境特定的属性。实际上，ECMAScript 标准没有规定全局对象的类型，JavaScript 的实现或嵌入的 JavaScript 都可以把任意类型的对象作为全局对象，只要该对象定义了这里列出的基本属性和函数。例如，在允许通过 LiveConnect 或相关的技术来脚本化 Java 的 JavaScript 实现中，全局对象被赋予了这里列出的 java 和 Package 属性以及 getClass() 方法。而在客户端 JavaScript 中，全局对象就是 Window 对象，表示允许 JavaScript 代码的 Web 浏览器窗口。

顶层函数（全局函数）

顶层属性（全局属性）

在 JavaScript 核心语言中，全局对象的预定义属性都是不可枚举的，所有可以用 for/in 循环列出所有隐式或显式声明的全局变量，如下所示：

var variables = "";
for (var name in this) 
{
variables += name + "、";
}
document.write(variables);

结果：

2.10、JavaScript避免使用的语法

1）、 ==

Javascript有两组相等运算符，一组是==和!=，另一组是===和!==。前者只比较值的相等，后者除了值以外，还比较类型是否相同。

请尽量不要使用前一组，永远只使用===和!==。因为==默认会进行类型转换，规则十分难记。如果你不相信的话，请回答下面五个判断式的值是true还是false：

false == 'false'
false == undefined
false == null
null == undefined
null == ''

2）、with

with的本意是减少键盘输入。比如

obj.a = obj.b;
obj.c = obj.d;

可以简写成

with(obj) {
　　　　a = b;
　　　　c = d;
　　}

但是，在实际运行时，解释器会首先判断obj.b和obj.d是否存在，如果不存在的话，再判断全局变量b和d是否存在。这样就导致了低效率，而且可能会导致意外，因此最好不要使用with语句。

3）、eval

eval用来直接执行一个字符串。这条语句也是不应该使用的，因为它有性能和安全性的问题，并且使得代码更难阅读。

eval能够做到的事情，不用它也能做到。比如

eval("myValue = myObject." + myKey + ";");

可以直接写成

　　myValue = myObject[myKey];

至于ajax操作返回的json字符串，可以使用官方网站提供的解析器json_parse.js运行。

4）、 continue

这条命令的作用是返回到循环的头部，但是循环本来就会返回到头部。所以通过适当的构造，完全可以避免使用这条命令，使得效率得到改善。

5）、switch 贯穿

switch结构中的case语句，默认是顺序执行，除非遇到break，return和throw。有的程序员喜欢利用这个特点，比如

switch(n) {
　　　　case 1:
　　　　case 2:
　　　　　　break;
　　}

这样写容易出错，而且难以发现。因此建议避免switch贯穿，凡是有case的地方，一律加上break。

switch(n) {
　　　　case 1:
　　　　　　break;
　　　　case 2:
　　　　　　break;
　　}

6）、单行的块结构

if、while、do和for，都是块结构语句，但是也可以接受单行命令。比如

　　if (ok) t = true;

甚至写成

　　if (ok)
　　　　t = true;
这样不利于阅读代码，而且将来添加语句时非常容易出错。建议不管是否只有一行命令，都一律加上大括号。

　　if (ok){
　　　　t = true;
　　}

7）、 ++和--

递增运算符++和递减运算符--，直接来自C语言，表面上可以让代码变得很紧凑，但是实际上会让代码看上去更复杂和更晦涩。因此为了代码的整洁性和易读性，不用为好。

8）、位运算符

Javascript完全套用了Java的位运算符，包括按位与&、按位或|、按位异或^、按位非~、左移<<、带符号的右移>>和用0补足的右移>>>。

这套运算符针对的是整数，所以对Javascript完全无用，因为Javascript内部，所有数字都保存为双精度浮点数。如果使用它们的话，Javascript不得不将运算数先转为整数，然后再进行运算，这样就降低了速度。而且"按位与运算符"&同"逻辑与运算符"&&，很容易混淆。

9）、function语句

在Javascript中定义一个函数，有两种写法：

　　function foo() { }
和

　　var foo = function () { }
两种写法完全等价。但是在解析的时候，前一种写法会被解析器自动提升到代码的头部，因此违背了函数应该先定义后使用的要求，所以建议定义函数时，全部采用后一种写法。

10）、基本数据类型的包装对象

Javascript的基本数据类型包括字符串、数字、布尔值，它们都有对应的包装对象String、Number和Boolean。所以，有人会这样定义相关值：

　　new String("Hello World");
　　new Number(2000);
　　new Boolean(false);

这样写完全没有必要，而且非常费解，因此建议不要使用。

另外，new Object和new Array也不建议使用，可以用{}和[]代替。

11）、new语句

Javascript是世界上第一个被大量使用的支持Lambda函数的语言，本质上属于与Lisp同类的函数式编程语言。但是当前世界，90%以上的程序员都是使用面向对象编程。为了靠近主流，Javascript做出了妥协，采纳了类的概念，允许根据类生成对象。

类是这样定义的：

　　var Cat = function (name) {
　　　　this.name = name;
　　　　this.saying = 'meow' ;
　　}

然后，再生成一个对象

　　var myCat = new Cat('mimi');
这种利用函数生成类、利用new生成对象的语法，其实非常奇怪，一点都不符合直觉。而且，使用的时候，很容易忘记加上new，就会变成执行函数，然后莫名其妙多出几个全局变量。所以，建议不要这样创建对象，而采用一种变通方法。

Douglas Crockford给出了一个函数：

Object.beget = function (o) {
　　　　var F = function (o) {};
　　　　F.prototype = o ;
　　　　return new F;
　　};

创建对象时就利用这个函数，对原型对象进行操作：

var Cat = {
　　　　name:'',
　　　　saying:'meow'
　　};

　　var myCat = Object.beget(Cat);

对象生成后，可以自行对相关属性进行赋值：

　　myCat.name = 'mimi';

12）、void

在大多数语言中，void都是一种类型，表示没有值。但是在Javascript中，void是一个运算符，接受一个运算数，并返回undefined。

　void 0; // undefined
这个命令没什么用，而且很令人困惑，建议避免使用。

三、BOM

3.1、BOM概要

BOM(Browser Object Model) 即浏览器对象模型，主要是指一些浏览器内置对象如：window、location、navigator、screen、history等对象，用于完成一些操作浏览器的特定API。

用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

• BOM是browser object model的缩写，简称浏览器对象模型
• BOM提供了独立于内容而与浏览器窗口进行交互的对象
• 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
• BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
• BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C
• BOM最初是Netscape浏览器标准的一部分

BOM结构

从上图可以看出：DOM是属于BOM的一个属性。

window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。

由于window是顶层对象，因此调用它的子对象时可以不显示的指明window对象。

以下两种写法均可：

document.write("www.jb51.net");
window.document.write(www.jb51.net);

3.2、BOM导图

BOM部分主要是针对浏览器的内容，其中常用的就是window对象和location

window是全局对象很多关于浏览器的脚本设置都是通过它。

location则是与地址栏内容相关，比如想要跳转到某个页面，或者通过URL获取一定的内容。

navigator中有很多浏览器相关的内容，通常判断浏览器类型都是通过这个对象。

screen常常用来判断屏幕的高度宽度等。

history访问浏览器的历史记录，如前进、后台、跳转到指定位置。

3.3、window对象

window对象在浏览器中具有双重角色：它既是ECMAscript规定的全局global对象，又是javascript访问浏览器窗口的一个接口。

moveBy() 函数
moveTo() 函数
resizeBy() 函数
resizeTo() 函数
scrollTo() 函数
scrollBy() 函数
focus() 函数
blur() 函数
open() 函数
close() 函数
opener 属性
alert() 函数
confirm() 函数
prompt() 函数
defaultStatus 属性
status 属性
setTimeout() 函数
clearTimeout() 函数
setInterval() 函数
clearInterval() 函数

1、获取窗口相对于屏幕左上角的位置

window.onresize = function() {
 var leftPos = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;
 var topPos = (typeof window.screenLeft === 'number') ? window.screenTop : window. screenY;
 document.write(leftPos+"，"+topPos);
 console.log(leftPos+"，"+topPos);
 }

需要注意的一点是，在IE，opera中，screenTop保存的是页面可见区域距离屏幕左侧的距离，而chrome,firefox,safari中，screenTop/screenY保存的则是整个浏览器区域距离屏幕左侧的距离。也就是说，二者差了一个浏览器工具栏的像素高度。

2、移动窗口，调整窗口大小

window.moveTo(0,0)
window.moveBy(20,10)
window.resizeTo(100,100);
window.resizeBy(100,100); 

注意，这几个方法在浏览器中很可能会被禁用。

3、获得浏览器页面视口的大小

var pageWith=document.documentElement.clientWidth||document.body.clientWidth;
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;

4、导航和打开窗口

window.open()既可以导航到特定的URL，也可以打开一个新的浏览器窗口，其接收四个参数，要加载的url，窗口目标（可以是关键字_self,_parent,_top,_blank）,一个特性字符串，以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只需要传递第一个参数。注意，在很多浏览器中，都是阻止弹出窗口的。

5、定时器

setTimeout(code,millisec)

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

code 必需，要调用的函数后要执行的 JavaScript 代码串。=

millisec 必需，在执行代码前需等待的毫秒数。

clearTimeout(对象) 清除已设置的setTimeout对象

示例：

 
 
 
 
 
 清除
 
 

结果：

setInterval(code,millisec[,"lang"])

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式
code 必需，要调用的函数或要执行的代码串。

millisec 必需，周期性执行或调用code之间的时间间隔，以毫秒计。

clearInterval(对象) 清除已设置的setInterval对象

6.系统对话框，这些对话框外观由操作系统/浏览器设置决定，css不起作用，所以很多时候可能需要自定义对话框

alert():带有一个确定按钮

confirm()：带有一个确定和取消按钮

prompt():显示OK和Cancel按钮之外，还会显示一个文本输入域

示例：

 
 
 
 
 
 清除
 
 

结果：

6、scroll系列方法

scrollHeight和scrollWidth 对象内部的实际内容的高度/宽度（不包括border）

scrollTop和scrollLeft 被卷去部分的顶部/左侧 到 可视区域 顶部/左侧 的距离

onscroll事件 滚动条滚动触发的事件

页面滚动坐标:

var scrollTop = window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

3.4、document 对象

请参考DOM一节的内容

write() 函数
writeln() 函数
document.open() 函数
document.close() 函数

3.5、location对象

location对象提供了当前窗口加载的文档的相关信息，还提供了一些导航功能。事实上，这是一个很特殊的对象，location既是window对象的属性，又是document对象的属性。

location.hash　　#contents　　返回url中的hash，如果不包含#后面的内容，则返回空字符串

location.host　　best.cnblogs.com:80　　返回服务器名称和端口号

location.port　　80　　返回端口号

location.hostname　　best.cnblogs.com　　返回服务器名称

location.href　　http://best.cnblogs.com　　返回当前加载页面的完整url

location.pathname　　/index.html　　返回url中的目录和文件名

location.protocol http　　返回页面使用的协议

location.search　　?q=javascript　　返回url中的查询字符串

改变浏览器的位置：location.href=http://www.baidu.com

如果使用location.replace('http://www.baidu.com'),不会在历史记录中生成新纪录，用户不能回到前一个页面。

location.reload()：重置当前页面，可能从缓存，也可能从服务器；如果强制从服务器取得，传入true参数

示例：

结果：

3.6、history对象

history对象保存着用户上网的历史记录，使用go()实现在用户的浏览记录中跳转：

history.go(-1) 等价于history.back()
history.go(1) 等价于 history.forward()
history.go(1) //前进两页
history.go('jb51.net')

3.7、navigator对象

这个对象代表浏览器实例，其属性很多，但常用的不太多。如下：

navigator.userAgent：用户代理字符串，用于浏览器监测中、

navigator.plugins:浏览器插件数组，用于插件监测

navigator.registerContentHandler 注册处理程序，如提供RSS阅读器等在线处理程序。

示例代码：

运行结果：

/*
浏览器名称Mozilla
次版本信息undefined
完整的浏览器名称Netscape
浏览器版本5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36
浏览器编译版本undefined
是否启用cookietrue
客户端计算机CPU类型undefined
浏览器是否启用javafalse
浏览器主语言zh-CN
浏览器中注册的MIME类型数组[object MimeTypeArray]
是否连接到网络true
客户端计算机操作系统或者CPUundefined
浏览器所在的系统平台Win32
浏览器中插件信息数组[object PluginArray]
用户的首选项
产品名称Gecko
产品的次要信息20030107
操作系统的语言undefined
浏览器的用户代理字符串Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36
操作系统默认语言undefined
用户个人信息对象undefined
浏览器品牌Google Inc.
浏览器供应商次要信息
*/

四、DOM

DOM（文档对象模型）是针对HTML和XML文档的一个API，通过DOM可以去改变文档。

DOM模型将整个文档（XML文档和HTML文档）看成一个树形结构，并用document对象表示该文档。

DOM规定文档中的每个成分都是一个节点（Node）：

文档节点（Document）：代表整个文档
元素节点（Element）：文档中的一个标记
文本节点（Text）：标记中的文本
属性节点（Attr）：代表一个属性，元素才有属性

4.1、节点类型

12中节点类型都有NodeType属性来表明节点类型

示例：

结果：

4.2、节点关系

节点关系方法：

hasChildNodes() 包含一个或多个节点时返回true
contains() 如果是后代节点返回true
isSameNode()、isEqualNode() 传入节点与引用节点的引用为同一个对象返回true
compareDocumentPostion() 确定节点之间的各种关系

示例：

 
 
 
 

 
 

 
p1
 
p2
 
p3
 
 
 

结果：

4.3、选择器

示例：

 
 
 
 
 

 
 

 
p1
 
p2
 
p3
 
 
 

结果：

4.4、样式操作方法style

代码：

 
 
 
 
 

 
 

 
p1
 
p2
 
p3
 
 
 

结果：

4.5、元素节点ELEMENT

示例：

结果：

4.6、属性节点attributes

示例：

结果：

4.7、文本节点TEXT

4.8、文档节点 Document

document.documentElement	代表页面中的元素
document.body	代表页面中的元素
document.doctype	代表标签
document.head	代表页面中的元素
document.title	代表 结果： 五、学习资料 http://common.jb51.net/tag/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3JavaScript%E7%B3%BB%E5%88%97/1.htm 六、作业 6.1)、尽量多的输出javascript中为false的情况 6.2)、尽量多的输出javascript中为undefined的情况 6.3)、用示例说明未定义全局变量，特别是没有使用var关键字时 6.4)、请定对照“数组”一节的内容，练习数组定义与每一个已列出的数组方法 6.5)、请使用纯JavaScript（不允许使用任何三方库，如jQuery）完成下列功能： 要求： 全选、反选、子项全部选项时父项被选择 完成所有功能 鼠标移动到每一行上时高亮显示（js） 尽量使用弹出窗口完成增加、修改、详细功能 删除时提示 使用正则验证 封装代码，最终运行的代码只有一个对象，只对外暴露一个对象 越漂亮越好 6.6)、请写出以下两个正则表达式并使用两个文本框模拟用户提交数据时验证： //身份证 //411081199004235955 41108119900423595x 41108119900423595X //邮箱 //zhangguo123@qq.com zhangguo@sina.com.cn 6.7)、请写一个javascript方法getQuery(key)用于根据key获得url中的参值，如果不指定参数则返回一个数组返回所有参数，如： url: http://127.0.0.1?id=1&name=tom getQuery("id") 返回 1 getQuery() 返回[{key:id,value:1},{key:name,value:tom}] //思考一个如果有多个想同的key时怎样处理 七、示例下载 https://git.coding.net/zhangguo5/javascript_01.git 八、视频 http://www.bilibili.com/video/av17173253/ 推荐阅读 程序员 正则表达式以相反的顺序提取文本,直到字符的第3个实例 如何解决《正则表达式以相反的顺序提取文本,直到字符的第3个实例》经验，为你挑选了1个好方法。 ... [详细] 程序员 使用外部python插件运行asyncio循环引擎 如何解决《使用外部python插件运行asyncio循环引擎》经验，为你挑选了0个好方法。 ... [详细] 程序员 @OneToMany @JoinTable错误 如何解决《@OneToMany@JoinTable错误》经验，为你挑选了0个好方法。 ... [详细] 程序员 如何在React中声明一个全局变量？ 如何解决《如何在React中声明一个全局变量？》经验，为你挑选了3个好方法。 ... [详细] 程序员 Yii2如何在Controller中包含一个php文件 如何解决《Yii2如何在Controller中包含一个php文件》经验，为你挑选了1个好方法。 ... [详细] 程序员 ArrayList.Remove在第一次调用时不起作用 如何解决《ArrayList.Remove在第一次调用时不起作用》经验，为你挑选了1个好方法。 ... [详细] 程序员 Powershell导入时会跳过txt文件的前2行 如何解决《Powershell导入时会跳过txt文件的前2行》经验，为你挑选了1个好方法。 ... [详细] 程序员 Caffe大型文件的类型为lmdb 如何解决《Caffe大型文件的类型为lmdb》经验，为你挑选了1个好方法。 ... [详细] 程序员 如何在javascript(节点js)中显示时间 如何解决《如何在javascript(节点js)中显示时间》经验，为你挑选了1个好方法。 ... [详细] 程序员 分离路径的正则表达式 如何解决《分离路径的正则表达式》经验，为你挑选了0个好方法。 ... [详细] 程序员 有没有办法在rails控制器方法中提醒/弹出而不渲染任何其他js文件 如何解决《有没有办法在rails控制器方法中提醒/弹出而不渲染任何其他js文件》经验，为你挑选了1个好方法。 ... [详细] 程序员 错误:无法从Oracle WebLogic Server 12.1.3.0开始两次加载此JVM TI代理 如何解决《错误:无法从OracleWebLogicServer12.1.3.0开始两次加载此JVMTI代理》经验，为你挑选了1个好方法。 ... [详细] 程序员 number_format()在5.3和5.4之间的行为 如何解决《number_format()在5.3和5.4之间的行为》经验，为你挑选了1个好方法。 ... [详细] 程序员 如果表单不起作用,则短 如何解决《如果表单不起作用,则短》经验，为你挑选了1个好方法。 ... [详细] 程序员 Swift:NSLengthFormatter只有1个小数位数 如何解决《Swift:NSLengthFormatter只有1个小数位数》经验，为你挑选了1个好方法。 ... [详细] 程序员 将数学函数传输到程序中 如何解决《将数学函数传输到程序中》经验，为你挑选了1个好方法。 ... [详细] 程序员 Django模型的回报值 如何解决《Django模型的回报值》经验，为你挑选了1个好方法。 ... [详细] 程序员 flex-basis和width之间有什么区别？ 如何解决《flex-basis和width之间有什么区别？》经验，为你挑选了3个好方法。 ... [详细] 程序员 在R中的数据框中将负值转换为零 如何解决《在R中的数据框中将负值转换为零》经验，为你挑选了2个好方法。 ... [详细] 程序员 依赖于参数的查找和函数模板 如何解决《依赖于参数的查找和函数模板》经验，为你挑选了0个好方法。 ... [详细] 吐了个 "CAO" ! 吐个槽吧,看都看了 会员登录 | 用户注册 臭小子 这个屌丝很懒，什么也没留下！ 关注作者 Tags | 热门标签 actionscrip bash c# c++ c语言 erlang flutter go golang java javascript lua node.js perl php python scala typescript RankList | 热门文章 1带有lambda表达式的invokeAndWait在静态初始化程序中永远挂起 2如何在派生类中重写模板类的静态方法 3如何使用MaterialiseCss创建自动完成表单？ 4"捕获"如何在原生Promise链中发挥作用？ 5点击列表中的一个视图和不同位置的其他视图自动工作？ 6页面之间丢失的PHP会话 - 根据服务器的不同而表现不同 7如何从最近的任务中杀死应用程序后重新启动服务 8以编程方式在springboot中设置hibernate.ddl-auto 9如何在PostgreSQL中获取特定表的每行大小？ 10每个推送通知横幅在iOS9上显示两次 11从Node.js中的文件同步读取行 12OpenCV:设置图像边框,没有填充 13Julia矩阵乘法比numpy慢 14Cognito和DynamoDB:"未授权执行:dynamodb:资源上的UpdateItem" 15C#Int32:m_value 16如何在QT构建期间禁用Qt Wayland模块？ 17强制div具有背景图像的大小 18我们如何使用规则的服务 19从推送重置应用程序图标上的徽章 20连接到Web服务会导致com.sun.xml.internal.ws.client.ClientTransportException：服务器发送了HTTP状态代码200：确定 DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6 Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有