《javascript征途》学习笔记
基础
1、 只有函数有作用域
2、 如果在<script src>的src 中设置了src特性，则script元素包含的任意代码就无效了。应该分开放到不同的script块中。
3、 外部js脚本文件和页面内嵌的js代码的执行顺序是按它们在文档中的位置决定的，而不是先执行内嵌脚本，后执行外部脚本文件。
4、 建议通过外部文件形式导入js文件。
5、 使用接口技术解决js文件函数重名的冲突。问题是如果封装的接口也冲突了怎么办？定义接口的对象名也不能够相同，否则也会冲突。P46 这个例子没运行起来。
6、 Js为css设置样式，是以html文件为参考的，而不用考虑js文件的具体位置，而css文件是以它本身位置为参考的。
7、 浏览器是从上到下解析网页源码的。
8、 接口的概念？
9、 使用变量之前必须先声明。尽量少使用全局变量。
10、 怎么区分构造函数、类和一般的函数？在命名时构造函数和类名建议首字母大写，而函数小写开头
11、 使用alert和confirm进行手动调试
第四章 数据类型和变量
1、 实词和虚词。实词指标识符、关键字保留字、直接量等。虚词指空白符、换行符、注释等无意义的字符。实词是区分大小写的。
2、 Js只有三种数据类型：数值型（不区分浮点和整数，都是浮点型）、字符串型和数组型。null、undefined，number，string,Boolean是五种原始数据类型。
object
function是对象。是object的特殊情况。
棧存储值类型，堆存储引用类型。
3、 alert(Boolean(1));//返回的是true。书上返回的是13。有误
alert((a = 1,2,3,4));//4
alert(a=(1,2,3,4));//4
alert(Boolean(1));//true
a = 1,2,3,4;
alert(a);//1
var a = 1,2,3,4;
alert(a);//null
4、 JS仅支持定义一维数组。不支持多维数组。但是可以模拟多维数组。但是性能不好。
Var a = [[1,2,3],[4,5,6]];。数组可以放入不同的任意类型的数据，包括function和表达式。
5、 函数在js中是第一种类型（基类，父类），其他类型继承于function。Object也是由Function来实现的。这点很NB啊。
6、 函数如果没有返回值，责约定返回值是undefined。
7、 函数是一个独立的作用域，只能通过函数返回值读取函数内部的数据。而构造函数是可以通过this.属性，获取函数内部的属性值。构造函数是定义对象的模板，就是类。
8、 函数解析的机制：js解释器在预编译时就会把所有function语句声明的函数处理，如果存在同名函数，则后面的函数体会覆盖前面的函数体。而js解释器只是对var语句声明的变量名进行索引，变量的初始化值却被忽略，直到执行期才去为变量读取初始值。而对于function声明的函数体，js解释器不仅对函数盟按变量标识符进行索引，而且对于函数体也提前处理。
第一：JavaScript时按<script></script>编译,并执行的。
第二：JavaScript编译时完成对变量的声明，及函数处理。
第三：JavaScript后声明的函数将会覆盖前声明的函数
9、 处于同一个文档中的js教本，都属于同一个作用域：window。可以互相通信和调用。
10、 Constructor属性。表示构造函数的属性值，用来检测数据类型。(10).constructor。返回number。
Js习惯：先声明后读写，先赋值后运算。
变量的作用域:
1、 局部变量都比全局变量的优先权高
2、 内部局部变量比外层局部变量优先权高
3、 变量都是对象的属性。全局变量是window对象的属性。
第五章
Delete
如果删除内部对象的预定义成员和客户端对象成员，使用var语句申明的变量也是不允许删除的。
可以删除不存在的变量，返回true。
Delete操作是彻底删除所占用的存储空间。
Void运算符的优先级、void的运算结果返回undefined。
第七章
函数的作用域。
function和Function构造函数的作用域是不同的。Funtion有顶级作用域。而function是局部的。
函数的解析机制
Js解释器是一段段分析和执行程序的。在同一段代码中，function语句和函数直接量定义的函数结构总会被提取出来执行。只有当函数被解析和执行完毕之后，才会按顺序执行其它代码。但是Function构造函数定义的函数并非提前运行，而是在运行时动态地被执行。
函数的接收值个数没有限制。函数的返回值只能有一个。若要返回多个数据，则用数组存储。
函数的生命周期：
使用function语句声明的函数被预先编译，此时如果存在相同的函数名，则会按顺序覆盖。而函数直接量和构造函数定义的函数都属于表达式函数，因此在代码按行执行时，才被激活生命周期。
函数的形参通过length属性来获取。
Arguments对象。参数管理器
Arguments.length表示实参的个数。Arguments不是array对象，而是object对象，不能用for/in结构遍历。
可以通过arguments[i]下标动态改变实参的值。也可以通过修改length动态增大或减小实参的个数。
Arguments.Callee可以返回当前arugments对象所属的函数的引用，等价于函数名。Arguments.Callee.length表示函数形参的个数。
This关键字
Undefined+undefined=NaN。多个undefined相加会返回NaN。
函数作用域和实例化函数this的作用域是不同的。实例化只值向当前函数的作用域，而函数调用对象的作用域则是window。
函数属性的作用域：
函数体外定于的属性可以任意的访问，可以在函数体内或外部访问，而函数内部定义的属性在初始化状态只能在函数体内部被调用。但若函数被调用后，则可以在外部访问函数内部定义的属性。若属性是函数，作用域也是一样的。
Call和apply。Apply传递的是数组。
1、 Call和apply将函数转换成方法传递给某个对象，只是临时的，函数最终没有作为对象的方法存在，当函数被调用后，该对象方法会自动被注销。
2、 Call和apply避免了资源浪费。
闭包:数据存储的一种方式。在动态环境中，数据实时变化，为了避免前面的数据丢失，js提供了闭包来寄存动态数据。
特性：
自闭特性。外界无法访问闭包结构内部的数据。
包裹特性。
第八章
定义抽象对象的方法是通过构造函数来实现的。
Push()会添加新元素后返回数组长度。
创建对象时，存储在变量中的只是引用指针，并不是对象本身。删除变量后，对象本身依然存在。
Js的垃圾回收机制，自动收集无用存储单元，不需要专门销毁无用对象以释放内存。当对象没有被任何变量引用时，js会自动侦测并把所有废除的对象注销。
当我们把对象的所有引用变量都设置为null时，可以强制对象处于废除状态。并被回收。
当删除对象属性后，不是将属性设为undefined，而是真正从内存清除掉。
对象的作用域：
Js仅支持一种作用域，即公共作用域。对于js所有对象的所有属性和方法来说都是公开的。
Js对象的结构封闭性不如函数结构。函数有自己的私有作用域。外界是无法访问的。
通过命名规则以区分私有作用域。O.x._a_=1;
静态对象：static 声明。Math和Global都是静态对象。
Js不支持静态作用域。
构造对象：就是构造函数。如Object、Date、Function。构造对象的首字母要大写。
构造对象不能直接被引用。必须使用new来实例化。
alert(Point.name); //直接读取构造对象的属性
alert(p1.name); //但是不能够通过实例对象来读取构造对象的属性 返回 undefined。这个name是构造对象在函数外定义的。如果是在函数内定义的则可以访问。
对于构造对象的属性，实例对象是不能继承的，因此也不能够通过实例对象来读取构造对象的属性，反过来，构造对象也不能读取实例对象的属性。
构造对象不能使用this关键字来读去实例对象的属性。
function Point(x,y){
this.x = x;
this.y = y;
this.z = z;
}
Point.name = "类属性";
Point.money = "1203";
Point.saying = function(){
alert(this.length); //返回值2
}
Point.saying();
var p = new Point();
alert(p.name);// 实例对象不能访问构造对象的属性。抛错。
function Point(x){
this.x = x;
}
Point.saying = function(){ //构造对象的方法
alert("类方法");
}
Point.saying(); //直接调用构造对象的方法
Point.saying = function(){
alert(this.x);//不能通过this访问实例对象的属性
}
Point.saying(); //直接调用构造对象的方法 返回undefined
实例对象
实例对象的属性有两种：
第一种：从构造对象中继承过来的，这种属性每一个实力属性都有，但是他们拥有不同的副本。
第二种：自己创建的，这种属性只有这个实例对象所独有。
原型对象
就是构造函数的实例对象。它所包含的所有属性和方法能够供构造函数的所有实例共享。（类继承的实现），js叫原型继承。
原型对象时在使用构造函数创建对象是同时实例化的一个对象，所有的对象都共同拥有这个对象的引用。
通常我们在原型对象里面定义实例对象公用的方法，这样的好处是：
第一：所有的对象都共有这样一个方法实例，大大的节省的内存。
第二： 当我们想修改对象的方法是，只用修改原型对象的方法既可以了，不用再麻烦的修改每一个实例的方法。
如果原型属性和实例对象自定义的属性发生了命名冲突，则自定义的属性会“覆盖”原型属性的内容。这时由他的工作机制所决定的，但并不是真正的覆盖。如果我们删除这个属性，也是删除的实例的属性。
当js解释器在检索属性时，会先检查对象实例是否定义该属性，没有，则会检查构造函数的原型对象是否具有这个属性。属性的继承只发生在读属性值时，而在写属性时不会发生。
构造器
构造器是在Object类中定义的属性，该属性始终指向对象的构造函数。
对象的构造器属性是通过原型对象继承的，如果我们删除掉对象的原型，就可以看到他会自动查找到上一层的构造器属性。最终是要指向Ojbect的。
对于js内置对象来说，由于它们的原型是只读的，用户无法修改，所以可以使用constructor属性来判断内置对象的数据类型。
ToString ()、valueOf()方法。
hasOwnProperty 用来检测一个对象的属性是继承属性，还是私有属性。但是注意：如果是一个对象的继承属性则会返回false，但是对于这个对象的原型对象来说则会返回true
isPrototypeOf：判断一个对象的原形对象。函数的原型对象可以是Object.prototype，或者Function.prototype。
Global对象。是抽象类。JavaScript规定所有的对象和函数都不能独立存在，换句话说，所有的函数都必须是某个对象的方法， 所有的对象都必须是某个类的子类。
这就是全局对象，虽然是全局对象，但是global却没有方法调用全局的变量和方法。 这些方法却可以自己直接执行。
所以global有点像名誉zhuxi。没有实际的操控权利。
Date对象：
//获取本地系统的当前时间。
var now = new Date();
alert(now); //返回当前时间对象，如"Wed Apr 29 15 :37: 55 UTC +0800 2009 "
//通过多选参数来创建指定的时间对象。此时，构造函数Date()的参数格式如下：
new Date(year, month, day, hours, minutes, seconds, ms)
//除了前两个参数外（年和月）外，其他所有参数都是可选的，其中月数参数从0开始，如0表示第1个月，11表示第12个月。
var d1 = new Date(2009,4,1);
alert(d1); //返回时间对象，如"Fri May 1 00: 00:00 UTC+ 0800 2009"
var d2 = new Date(2009,4,1,5,30,30);
alert(d2); //返回时间对象，如"Fri May 1 00: 00:00 UTC+ 0800 2009"
//通过一个时间格式的字符串来创建指定的时间对象。此时，月份是从1开始，而不是从0开始。
var d1 = new Date("2009/4/1 5:30:30");
alert(d1); //返回时间对象，如"Wed Apr 1 05 :30: 30 UTC +0800 2009"
//通过传递一个毫秒数来创建指定的时间对象。这个毫秒数是距离1970年1月1日午夜(GMT时间)的毫秒数。
var d1 = new Date(1000000000000);
alert(d1); //返回时间对象，如"Sun Sep 9 09 :46 :40 UTC +0800 2001"
第九章 数组
数组的定义有两种方法：
1.使用new关键字，传入参数。
2.使用数组直接量，在中括号中添加元素。
建议使用第二种方法因为效率高一些。
Js的数组的长度可以任意伸缩，可以存储任意类型的数据内容。数组的下标可以不连续。Js在初始化数组时，只有真正存储在数组中的元素才能够被分配到内存中。
数组中的元素可以自由定义，例如如果只定义1和100则在内存中实际额只存在这两个元素。
所以在JavaScript中数组是否按顺序并不是那么重要。
Array.length返回的不是数组存储值的实际个数，而是当前数组的最大元素的个数。
数组和对象的一个区别就是：数组使用的是下标和具体的值相关联，而对象中则使用的是特定的字符串。
交换两个变量
var a = 10, b = 20; //变量初始化
//var temp = a; //定义临时变量存储a
//a = b; //把b的值赋值给a
//b = temp; //把临时变量的值赋值给b
a = [b, b = a ][0]; //通过数组快速交换数据
定义数组的基本方法：
第一步： 定义函数名，通过一个或表达式首先判断如果存在则直接使用如果不存在则定义。
第二步： 将第一的函数名付给Object，
Array.prototype._sum = Array.prototype.sum || //检测是否存在同名方法
( Array.prototype.sum = function(){ //定义该方法
var _n = 0; //临时汇总变量
for(var i in this){ //遍历当前数组对象
if( this[i] = parseFloat( this[i] ) ) _n += this[i]; //如果数组元素是数字，则进行累加
};
return _n; //返回累加的和
});
Object.prototype.sum = Array.prototype._sum //把数组临时原型方法赋值给对象的原型方法sum()
var a = [1, 2, 3, 4, 5, 6, 7, 8, "9"]; //定义数组直接量
alert( a.sum() ); //返回45
第十章字符串
Js解释器采用了引用的方法实现对字符串的操作。字符串数据被存储到堆，然后把字符串的引用地址存储在字符串变量中。同时为了避免错误操作，js解释器强制约定字符串在堆存储的数据是不可变的。相当于设置字符串在堆区存储的数据是只读的。
js对字符串的复制，传递操作，仅是简单的采用引用的方法，操作对象为堆区字符串的地址，即复制和传递地址。但是一旦编辑字符串本身的值，则js就会把堆区的字符串读取到棧区进行独立操作。
字符串的比较是逐字节比较的。先把两个变量的字符串读取到栈区，然后逐字节比较，最后返回比较结果。
字符串的操作是结合了值操作和引用操作的。当申明一个字符串时会把它的真实值存放在堆区，并且设定了堆区的内容是不可改变的，而在栈去存放堆区的地址。所以当进行复制和传递操作时只是进行了地址的传递，但是一旦要对字符串进行修改时则会复制一份放到栈区。实际是对栈区的内容进行改变，所以操作之后我们需要将这个值再次赋给引用，否则它会只是存放在栈区里，等待垃圾回收。
对于字符串类型的语句或表达式，可以使用静态方法eval()来执行。
var s = "alert('love')";
eval(s);
var s = new String(); //创建一个空字符串对象，并赋值给变量s.object类型。
var s = String( 123456 ); //包装字符串。String类型。
var s = String( 1, 2, 3, 4, 5, 6 ); //带有多个参数，只处理第一个参数并把它转换为字符串返回。
fromCharCode可以包含n个参数，参数代表字符的unicode编码。返回对应编码的字符的新字符串。
var a = [35835, 32773, 24744, 22909], b = [];//声明一个字符编码的数组
for( var i in a ){ //遍历数组
b.push( String.fromCharCode( a[i] ) ); //把每个字符编码都转换为字符串
}
alert( b ); //返回字符串"读,者,您,好"
alert( b.join( "" ) ); //返回字符串"读者您好"
第12章 BOM
BOM：浏览器对象模型。Browser Object Model
Bom对象包括：window,navigator,screen,history,location,document.
Window代表根节点，其它对象是window的属性。它是全局作用域
Window对象定义的3个人机交互方法：alert，confirm，prompt。
var url = "http://www.css8.cn/";
var features = "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no";
document.write('<a href="http://www.baidu.com/" target="newW" >切换到百度首页</a>');
var me = window.open (url, "newW", features);
setTimeout(function(){
me.close();
},30000);
使用write 方法时会覆盖掉前一个的内容。
Location.search 捕获url查询字符串信息。
第十三章 DOM
window.onload = function(){
var tag = document.getElementsByTagName("ul")[0];
var a = tag.childNodes;//获取列表结果所包含的所有列表节点
alert(a[0].nodeName);//显示第一个列表项的节点名称
node.childNodes[0] = node.firstChild
node.childNodes[node.childNodes.length-1] = node.lastChild
}
</script>
<ul>
<li>D表示文档，DOM的物质基础</li>
<li>O表示对象，DOM的思想基础</li>
<li>M表示模型，DOM的方法基础</li>
</ul>
DOM把元素之间的空格也当成文本节点。这在XML中是一样的。XML解析也是如此。
NodeType=1表示的是元素节点。
innerHTML返回元素包含的html信息内容。
第十四章 事件驱动模型
个人认为类似于as的事件机制。有父子元素冒泡和捕获的概念。
document.write('<script type="text/javascript">'); 写的js命令，必须放在<script></script>中。
4种事件处理模型：
1、0级 基本事件模型
2、标准事件模型
3、IE事件模型
4、Nerscape4事件模型
JS不支持多线程。支持异步回调。类似于as的回调函数。一旦异步执行完，根据执行返回条件执行对应的回调函数。
Js的事件流机制：捕获型和冒泡型。三个阶段：捕获阶段、目标阶段、冒泡阶段。
从IE6开始，html元素可以接受事件流。而这之前的版本是不行的。MOZILLA支持window对象。
<script language="javascript" type="text/javascript">
function f(a){
alert(a);//p点击时，FIREFOX的顺序是P，HTML，BODY。IE的顺序是P，BODY，HTML。
}
</script>
<html onclick="f('HTML')">
<body onclick="f('BODY')" bgcolor="#333333">
<p onClick="f('P')">冒泡型事件</p>
</body>
</html>
DOM2.0支持冒泡型事件流和捕获型事件流。但是规定捕获型事件流先进行响应。默认情况下，事件采用冒泡事件流，不采用捕获事件流。在firefox可以显示设置是否使用捕获型事件流。
一般来说事件处理函数都会有返回值，如果我们设置返回值为false就可以禁止它的默认行为。例如阻止超链接，阻止表单提交数据。
Event.srcElement。表示当前事件的源。利用该属性可以捕获当前对象。但是DOM2不支持该属性。在firefox浏览器要使用event.target。
alert(event.srcElement);//firefox:undefined,IE: object.firefox和 DOM2不支持srcElement属性
<button id="btn">按 钮</button>
<script language="javascript" type="text/javascript">
document.getElementById("btn").onclick = function(event){
event = event || window.event; //兼容FF和IE浏览器的event参数模式
var src = event.srcElement || event.target; //捕获当前事件的对象句柄
alert(src.innerHTML); //显示当前对象所包含的HTML文本信息
}
</script>
This对象
通常情况下this等于事件源对象。
<!--
通常情况下this等于事件源对象。
-->
<button id="btn" onClick="this.style.background='red';">按 钮</button>
<script language="javascript" type="text/javascript">
function btn1(){
this.style.background = "red"; //并非指向当前事件的目标对象.this指向window对象.
}
function btn2(event){
event = event || window.event;
var src = event.srcElement ? event.srcElement : event.target;
src.style.background = "red"; //指向当前事件的目标对象
}
</script>
<button onClick="btn1();">按 钮 1</button>
<button onClick="btn2(event);">按 钮 2</button>
再看个例子
<button id="btn1">按 钮 1</button>
<button id="btn2">按 钮 2</button>
<script language="javascript" type="text/javascript">
var b1 = document.getElementsByTagName("button")[0];
var b2 = document.getElementsByTagName("button")[1];
b1.f = function(){
this.style.background = "red"; //并非指向按钮1 按钮1 点击指向的是window,按钮2点击指向的是btn2.
}
b2.onclick = b1.f;
</script>
b2.onclick = function(){
b1.f(); //指向按钮1
}
这是因为函数的作用域造成的。
Js的函数总是运行在词法作用域中，即函数总是在定义它们的作用域中运行，而不在调用它们的作用域中运行。
元素的事件处理函数的作用域是独立的作用域，与局部作用域不同。
Js在引用变量值时，会根据作用域从内到外，从下到上检索，作用域顶部是window对象。但是对于html元素的属性的事件处理函数，它的作用域顶部是元素目标调用对象。
addEventListener()和removeEventListener()。在事件处理函数内部，this总是指向当前元素。
IE 7不支持DOM的addEventListener方法。
<p id="p">IE事件注册</p>
<script language="javascript" type="text/javascript">
/*
注销函数是不能够使用匿名函数，应为这样无法真正的删除这个绑定的函数。Firefox会把绑定和注销的两个结构相同的匿名函数视为不同函数。
*/
var p = document.getElementById("p");
p.attachEvent("onclick", f);
p.detachEvent("onclick", f);
function f(){
alert("p");
}
</script>
addEventListener()和removeEventListener()的第三个参数是否捕获，必须一致。
var event = event || window.event; //标准化事件对象 如果存在event则使用event，不存在则使用window.event
loading事件机制
<body onLoad="f1()">
<script language="javascript" type="text/javascript">
window.onload = f2;
function f1(){
alert('<body onload="f1()">');
}
function f2(){
alert('window.onload = f2;');
}
</script>
如果同时使用两种方式定义load事件类型,会使用window对象注册的事件处理函数覆盖掉body元素定义的页面初始化事件属性。
window.onload = f1;
window.onload = f2;
以上写法f1会被f2覆盖掉。
window.addEventListener("load",f1,false); //为load添加事件处理函数
window.addEventListener("load",f2,false); //为load添加事件处理函数
这些写法就不会覆盖。两个监听都会执行。
DOMContentLoaded事件类型。
Load事件需要等到所有图像全部载入完成之后才会被触发。而DOMContentLoaded事件会在页面结构加载完毕后就能执行。先于load事件。IE7 不支持。
Onunload 和Beforeunload事件类型。关闭窗口之前的事件处理函数。
第十五章 样式
IE不支持DOM定义的style方法。
DOM的style定义方法
var box = document.getElementById("box");
box.style.setProperty("width","400px","");//第三个参数 priority表示是否为属性设置！important优先级命令。
IE的style定义方法
Box.style.width = “400px”;
看下面的例子：
<style type="text/css">
#box {
width:100px;
height:100px;
border:solid 50px blue;
}
</style>
<div id="box"></div>
<script language="javascript" type="text/javascript">
var box = document.getElementById("box");
alert(box.style.border);//返回空值。使用style样式无法访问样式表中的样式属性。css样式信息并非存储在 style属性中，而是存储在css 类中。
</script>
和
<div id="box" style="width:100px; height:100px; border:solid 50px blue;"></div>
<script language="javascript" type="text/javascript">
var box = document.getElementById("box");
alert(box.getAttribute("style"));
</script>
要访问css类。可以使用document.styleSheet集合来实现。该集合包包含了文档中所有样式表的引用。如style 的link和import的外部样式表。和定义在本文档中的style样式。
DOM提供了cssRules集合，用来包含指定样式表中所有的样式。IE不支持。
<script language="javascript" type="text/javascript">
var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;//判断浏览器的类型，是否支持cssRules。
alert(cssRules[0].style.border); //调用cssRules集合中的border属性
</script>
CssRules或rules集合的style对象在调用css属性时，使用的是js样式属性，不能够使用连字符，如cssRules[0].style.backgroundColor 不行，而必须使用cssRules[0].style.background-Color
如果同时存在css外部样式表，又存在定义在文档中的样式属性。按照它们的位置排列styleSheets数组的索引位置。
<link href="out.css" rel="stylesheet" type="text/css" media="all" />//styleSheets[0]
//styleSheets[1]
<style type="text/css">
#box { color:green; }
.red { color:red; }
.blue { color:blue; }
</style>
每个css规则都包含有selectorText属性，获取指定样式的选择符。在IE中大写显示，Firefox小写显示。
alert(cssRules[2].selectorText);
alert(cssRules[2].style.color);
动态添加样式insertRule和addRule
IE中支持addRule。FireFox支持insertRule
if(styleSheets.insertRule){ //判断浏览器是否支持insertRule()方法
//使用insertRule()方法在文档内部样式表中增加一个p标签选择符的样式，设置段落背景色为红色，字体颜色为白色，补白为一个字体大小。插入位置在样式表的末尾，
styleSheets.insertRule("p{color:#fff;padding:1em;}", index);
}else{ //如果哦浏览器不支持insertRule()方法
styleSheets.addRule("P", "color:#fff;padding:1em;", index);
}
addRule的Index表示样式插入的位置。默认是-1，表示在样式表末尾。
insertRule的Index表示样式插入的位置。默认是0，表示在样式表末尾。必须设置。
访问最终样式
IE: currentStyle对象，包含了所有元素的style对象定义的属性和任何未被覆盖的css规则的style属性。只有IE 支持。
alert("背 景 色："+p.currentStyle.backgroundColor+"\n字体颜色："+p.currentStyle.color);
DOM提供了getComputedStyle()方法。该方法需要在document.defaultView对象中访问。
var p = document.getElementsByTagName("p")[0];
alert("背 景 色："+document.defaultView.getComputedStyle(p,null).backgroundColor+"\n字体颜色："+document.defaultView.getComputedStyle(p,null).color);
offsetWidth表示元素在页面中的总宽度。
offsetHeight表示元素在页面中的总高度。
但是当为元素或者它的父元素定义了display:none，则offsetWidth和 offsetHeight都为0。
不同浏览器下获取style
function getStyle(e, n)
{
if(e.style[n])
{
return e.style[n];
}
else if(e.currentStyle)
{
return e.currentStyle[n];
}
else if(document.defaultView && document.defaultView.getComputedStyle)
{
n = n.replace(/([A-Z])/g, "-$1");
n = n.toLowerCase();
var s = document.defaultView.getComputedStyle(e, null);
if(s) return s.getPropertyValue(n);
}
else
return null;
}
显示和隐藏元素
css支持两种:visibility和display。
Visibility： 会保持元素在文档流中的影响力，隐藏后元素的位置保持不变。属性包括visible和hidden。
Display： 为none时，文档的结构会发生变化。被隐藏的元素及其子元素就被删除了。该元素不再占据文档位置。后面的元素会上移占据被删除的元素的位置。
透明度 ：e.style.opacity = n / 100;
动画：
var out = setInterval(f, 1000); //定义周期性执行的函数.
clearTimeout(out); //则清除周期性调用函数
setTimeout();//只能被执行一次。如果要循环执行，采用以下嵌套的方式。
var t = document.getElementsByTagName("input")[0];
var i = 1;
function f(){
var out = setTimeout( //定义延迟执行的方法
function(){ //延迟执行函数
t.value = i ++ ; //递加数字
f(); //调用包含setTimeout()方法的函数
}, 1000); //设置每秒执行一次调用
if(i > 10){ //如果超过10次，则清除执行，并弹出提示信息
clearTimeout(out);
alert("10秒钟已到");
}
}
f(); //调用函数
第十六章 COOKIE
有效期 expires属性
可见性 path domain属性
安全性 secure属性
以上都是cookie属性，而不是js属性。
Name：唯一的。不区分大小写。
Value:cookie信息。不超过4KB
Domain:
Path: 有效访问路径。Path=/。表示cookie信息将会与服务器根目录下所有网页相关联
Expires:失效日期
Secure：boolean。True表示安全方式传递。
Cookie字符串是一对名值对。
Cookie的封装：
function cookie(name, value, options)
{
if (typeof value != 'undefined')
{
options = options ||
{
}
;
if (value === null)
{
value = '';
options.expires = - 1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString))
{
var date;
if (typeof options.expires == 'number')
{
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
}
else
{
date = options.expires;
}
expires = '; expires=' + date.toUTCString();
}
var path = options.path ? '; path=' + options.path : '';
var domain = options.domain ? '; domain=' + options.domain : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
}
else
{
var cookieValue = null;
if (document.cookie && document.cookie != '')
{
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i ++ )
{
var cookie = (cookies[i] || "").replace( /^\s+|\s+$/g, "" );
if (cookie.substring(0, name.length + 1) == (name + '='))
{
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
}
第十七章 xml和json
XML ：区分元素节点和文本节点。属性节点。
推荐使用JSON。
Json的数据结构基于对象和数组来构建。
对象：名值对。{“string1”:”value1”, “string2”:”value2”}
数组：
第十八章AJAX
注意 ：客户端和服务器端的编码要一致。
JSON 异步通信协议 XMLHttpRequest 是 ajax异步交互的核心插件。和frame只能在同域中通信。
JSONP : JSON with Padding。能够通过在当前文档中生成脚本标记（script），来调用垮域脚本时使用的约定。
JSONP格式的数据就是把JSON数据作为参数传递给callback并传回。
ActiveXObject
XMLHRttpRequest。
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
第十九章 OOP
Object，Function，Array，是内置的类。但是并不应该称为构造函数。我们在实例化的时候，会实例类的构造函数，但是类并不等于构造函数。
构造函数没有返回值，但是在js中构造函书可以返回一个对象值。构造函书内部并没有创造对象，而是使用this代替。This是新创建对象的引用指针。
原型模式
当在构造函书中定义prototype属性后，任何实例化的对象都拥有prototype属性所定义的属性。而实例化的对象不能通过prototype属性定义原型。
Js的内置对象都是构造函数结构体，因此都拥有prototype属性。
Prototype属性也是一个引用对象的指针，它值向一个隐形的对象，该对象存储着构造函书所有的原型属性。相当于基因库。一旦某个对象的属性被改动，则所有其他实例对象的属性也会变化。
构造函数属性和原型属性混合模式是ECMAScript的推荐标准。
function Book(title,pages){
this.title = title;
this.pages = pages;
Book.prototype.what = function(){
alert(this.title +this.pages);
};
}
动态原型模式
function Book(title,pages){
this.title = title;
this.pages = pages;
if(typeof Book.isLock == "undefined"){
Book.prototype.what = function(){
alert(this.title +this.pages);
};
Book.isLock = true;
}
}
修改原型属性，所有实例的原型值都会发生改变。
这章太复杂拉。可以单独写一本书出来了。
第20章
函数是第一型。表示。
