JavaScript学习第四天

1、自定义属性，使用好索引值

例子：

下面有一段js代码：

　　window.onload = function(){

　　　　var oBtn = document.getElementByTagName("button");

　　　　for(var i=0;i<oBtn.length;i++){

　　　　　　//在循环的时候给每一个btn添加一个自定义属性

　　　　　　oBtn[i].index = i;//这行代码的相当于<button index=0 type="button" value="btn1" />...

　　　　　　oBtn[i].onclick = function(){

　　　　　　　　//alert(i);

　　　　　　　　//此时我们的目的是要将btn一个一个的alert出来，但是结果并不是我们想到的那样，最终只会alert出来一个3,解决办法是给每一个btn添加自定义属性

　　　　　　　　alert(this.index);//此时的效果就是我们要的 0 1 2这种效果

　　　　　　}

</script>

<html>

　　<body>

　　</body>

</html>

//************************************分割线************************************/

ECMScript:标准、核心，规定了JavaScript的标准

2、JS中的类型:

【数字，字符串，布尔，函数，对象（obj,数组，json,未定义）】

typeof:判断数据类型 alert(typeof i);

var i = 100 数据类型：number

var s = "abc" 字符串类型： string 空格也是算上长度的,字符串有长度length,chatAt(1)根据下标找到字符串中的某个字符

var b = true 布尔值 true or false

var fn = function(){alert(1)} 函数类型 alert(fn);//直接弹出函数代码，加上括号就是调用了

var obj = window;alert(typeof obj);//object 物体对象

var obj = document;alert(typeof obj);//object 物体对象

object 那么我们可以自定义属性，只要不是空的，是object，那么我们就可以操作它。

var arr = [1,3,4,5] 数组类型

数组也是object类型的，那么我们就可以给数组添加自定义属性，添加函数，或者其他

var json = {num:1,name:jack,age:5};//json也是Object类型的

alert(json.num);//1这样可以直接取值

var n = null;//这个也是object,他是空的，是不存在的，不可以添加自定义属性

var u; alert(typeof u);//undefined未定义，这个表示是一种状态，说明程序有问题

3、类型转换

方法：

Number();

//可以将看起来像数字的字符串转换为数字，如果是空的字符串会转换成0，可以将布尔值将true和false转为1和0，空数组转为0，转换不了的转为NaN

parseInt();

//转整数，从左往右一个转换，遇到非数字，那么就截取，认识 + —，不认识小数点，默认是是转十进制，parseInt(a,2);//指二进制转换a

parseFloat();//转为浮点数

以上这几种都是显示类型转换，强制类型转换

隐使类型转换：

数字之间的比较和字符串之间的比较是不一样的，数字大小比较，字符串比较是根据编码来比较

alert("2" == 2); 还有 ===

4、NaN是什么？

NaN:not a number;不是一个数字,不是数字类型，数字和数字类型是两码事。出现了NaN,说明进行了非法运算操作。

NaN是一种数字类型，但是不是数字，NaN自己和自己不相等的,其他数据类型是自己等于自己的。

isNaN():is not a number:是不是数字？（不是数字），讨厌数字

用来判断是否是数字；内部是根据Number()来转换，能转成数字就false.

5、函数传参

函数传递参数；参数就是js的那些数据类型。

6、JS作用域与作用域链

浏览器是什么？浏览器可以读取很多格式的文件，其中有“JSIE解析器”，这个解析器（1）预解析：首先会找一些参数（var、function）等参数，此时所有的变量都是未定义的，都是undefined，所有的函数都是整个函数块，（2）然后再逐行解读代码，从左往右。什么是表达式，= + - * / % ++ -- ！这些都是连接的都是表达式。

如下下面代码块：会有什么执行结果呢？

　　alert(a); //function a(){alert(4);} 这块解析到最后剩下的a就是函数块

　　var a = 1;

　　alert(a); // 1

　　function a(){alert(2);}//这里函数没有被调用

　　alert(a); // 1

　　var a = 3;

　　alert(a); //3

　　function a(){alert(4);}

　　alert(a); //3

</script>

浏览器在读取各种文件时会首先预解析，解析到该文件中有变量 var，或者有函数 function等等，但是在预解析的过程中遇到重名的话，变量遇到函数，那么只会留下函数，当函数遇到重名的函数，会有上下文的这个规则，会留下最后的那个函数，然后预解析结束，就会开始逐行解析代码;要注意一点就是逐行解析代码时遇到表达式，会改变变量值的。

什么是域？

这就是一个域，是个全局域，可以写js代码。域之间的单线程的，只能这块域先预解析，在逐行执行，然后在执行其他域，执行的顺序是从上到下。是可以找到上一个域中已存在的变量的。

函数也是域 function fn(){}

下面代码块怎么执行的呢？

var a = 1;

function fn1(){ // 首先执行到这个函数块时，是没有被调用的，所以不会弹出任何东西

　　alert(a); //undefinded

　　var a = 2;

}

fn1(); // 这里就是函数被调用，逐行执行函数块代码，弹出undefinded，执行到函数块中var a = 2时，这里的a是局部变量，那么这里会有js的垃圾处理机制，后面再说。

alert(a); //1 执行到这行时，a还是那个全局变量a ,所以弹出来的是1；

下面这块代码,与上者的区别就是函数块中a 没有var修饰了，那么此时是怎么执行的呢？

var a = 1;

function fn1(){ //

　　alert(a); // 1

　　a = 2;

}

fn1(); //

alert(a); //2

其实和前者浏览器读取时一样，首先预解析，再逐行执行。1、预解析的过程是找参数，遇到var就知道有变量，遇到function知道有函数，那么预解析过程，有变量a 值的未定义就是undefined，在预解析，发现函数块fn1();再往下解析，没有遇到关键字，剩下什么也没有发现。2、开始执行逐行解析。首先执行到var a = 1；那么会将1赋值给a,然后执行到函数块，又开始进行预解析，因为我们知道函数也是域，读取域的过程都是要预解析，在逐行执行。在函数域中没有发现var function这些关键字，也就是没有找到任何变量，那么此时就会到外面找这个a,那么a就是1，然后执行到a=2,那么就会将2赋值到a,也就是改变了函数域外面的a的值，所以最终alert(a)是2.

这里面有个作用域链，函数的解析是由里到外。

看下面这段代码,会是什么效果呢？

var a = 1;

function fn1(a){ //

　　alert(a); // undefined

　　a = 2;

}

fn1(); //

alert(a); //1

首先这里和前者的区别是函数多了参数a，这个参数a就相当于var a,是未定义的，在预解析的过程，遇到var a = 1,此事a是未定义，遇到函数块，然后遇到fn1()就逐行解析函数域，在预解析函数域时，发现参数a,那么这里弹出来undefined，再执行函数外的，就是1

在看下面代码，

var a = 1;

function fn1(a){ //

　　alert(a); // 1

　　a = 2;

}

fn1(a); //

alert(a); //1

一样的处理，首先预解析，a undefined，函数块，预解析完毕，逐行执行，执行到fn1(a),此时这个a就是全局变量的a ,那么值就是1，预解析函数块，a就是1，弹出1，再执行到a = 2此时这个a是局部变量和全局变量var a = 1是没有任何关系的，所以alert(a)就是1

要明白全局变量与局部变量的作用域

全局变量任何函数都是可以改变其值的。处理的顺序是由上到下，由里到外，方向是不可以反的。

可以利用全局变量获取函数中的内容。

注意：

当你需要定义一个全局变量或者全局函数，那么要记住，不要讲这个全局变量或者全局函数定义在for循环或者if代码块中，因为火狐浏览器的预解析解析不出来！

7、函数返回值

函数默认有个return,空函数return的是undefined，

1、函数名+括号----》return 后面的值

2、所有的函数默认返回值是：未定义

3、return 后面的任何代码都不会执行

8、arguments实参与局部变量、参数关系

arguments实参的集合。

function fn1(){

　　alert(arguments[arguments.length-1]);//弹出来的是3

}

fn1(1,2,3);

当函数的参数个数不确定，可以使用arguments，可以直接使用arguments.length获取参数的个数。

arguments与作用域的关系：

var a = 1;

function fn2(a){

　　arguments[0] = 3;

　　alert(a); //3

　　var a = 2;

　　alert(arguments[0]);// 2

}

fn2(a);

alert(a);// 1

9、currentStyle 、getComputedStyle应用

getComputedStyle()获得的是浏览器计算之后的样式值。但是在IE 6 7 8浏览器中是有问题的，不兼容。

currentStyle