传智-韩顺平-html+css+javascrtpt-课程笔记2(吐血整理)

javascript2===============================================================================js面向/基于对象编程-----类（原型对象）与对象（实例）js面向/基于对象特征介绍Javascript是一种基于对象（object-based）的动态脚本语言，你遇到的所有东西都是对象。js的面向对象技术广泛应用于AJAX等优秀框架。☞特别说明：基于对象也好，面向对象也好，实际上都是以对象的概念来编写程序。从本质上并无区别，所以这两个概念在课程中是一样的。因为javascript中没有class(类)，所以有人把类也称为原型对象。其实这两个概念在编程中发挥的作用都看成一个意思。为什么需要原型对象（类）？例子：张老太养了两只猫猫：一只猫叫小白，今年3岁，白色；还有一只叫小花，今年5岁，花色。 //一般的解决方法，但是这种方法比较麻烦 varcat1_name="小白"; varcat1_age=3; varcat1_color="白色"; //把属性集中，定义原型对象，也就是类 functionCat(){ } //如果这样用，就成了函数 //Cat(); //所以应该用创建Cat的一个对象的办法使用 varcat1=newCat(); //可以在后面添加对象的属性，支持动态添加 ="小白"; cat1.age=3; cat1.color="白色"; window.alert();类（原型对象）————如何自定义类（原型对象）和对象创建类的方式有5中方法：工厂方法——使用newObject创建对象并添加相关属性使用构造函数来定义类（原型对象）：上面的Cat类就是用此种方法基本语法： function类名/原型对象名(){ }创建对象： var对象名=new类名/原型对象名();使用prototype构造函数及原型混合方式动态原型方式如何判断一个对象实例是不是Cat类型？if(ainstanceofCat){ window.alert(“a是Cat的实例”) }if(a.constructor==Cat){ window.alert(“a是Cat的实例”) }带var和不带var的区别 varabc=89; functiontest(){ abc=900;//在函数里，如果不带var，则表示使用全局的abc变量89。 //如果带var，则表示在函数中，定义一个新的私有的abc变量。 } test(); window.alert(abc);对象垃圾回收机制js的对象垃圾回收机制和java类似，此外js也提供了一种主动释放内存的方法：delete对象名.属性名;//立即释放对象的属性空间js中this问题的提出：functionPerson(){}varp1=newPerson();=”小明”;p1.age=22;window.alert(+””+p1.age);varp2=newPerson();window.alert();在这里我们可以看到window.alert()会输出undefined；在实际的编程中，我们可能有这样的需求，当我们创建了一个对象后，就希望该对象自动的拥有某些属性。【比如：当我们创建了一个Person对象后，就希望该对象自动拥有name和age属性，这又怎么办？】可以使用this解决。functionPerson(){ =”abc”; this.age=10;}varp1=newPerson();varp2=newPerson();window.alert(+””+);this的作用在于将成员公开化，允许外部访问使用。哪个对象实例调用this所在的函数，那么this就代表哪个对象实例。注意：this不能在类定义的外部使用，只能在类定义的内部使用。否则就变成了window的。私有成员变量和公有成员变量成员函数<scriptlanguage="javascript"> functionPerson(name,age){ //这个就是使用传入的实际参数去初始化形参 =name; this.age=age; //输出自己名字的函数 this.speak=function(){ document.write("名字："+); } this.jisuan=function(){ varres=0; for(vari=0;i<1000;i++){ res+=i; } returnres; } //函数可以接受参数 this.jisuan2=function(n){ varres=0; for(vari=0;i<n;i++){ res+=i; } returnres; } }varperson=newPerson("张三",22);person.show();</script>怎么实现原型对象滞后绑定<scriptlanguage="javascript"> functionDog(name,age){ =name; this.age=age; } vardog1=newDog(“阿黄”,2); //动态绑定一个函数show dog1.show=function(){ document.write("小狗的名字"++"年龄："+this.age)； } //调用show函数 dog1.show(); vardog2=newDog(“小黑”,3); dog2.show();//此处就会报错，因为show是dog1独有的一份。</script>怎么解决上述出现的问题呢？<scriptlanguage="javascript"> functionDog(name,age){ =name; this.age=age; } //使用prototype动态绑定一个共享的函数show w=function(){ document.write("小狗的名字"++"年龄："+this.age)； } vardog1=newDog(); //调用show函数 dog1.show(“阿黄”,2); vardog2=newDog(“小黑”,3); dog2.show();//</script>注：使用prototype方式动态绑定函数不能访问类中的私有变量和方法！成员函数几种特殊添加方式Object类Array类构造函数function类名(参数列表){属性=参数列表;}例如：functionPerson(name,age){=name;this.age=age;}//创建Person对象的时候就可以直接给出名字和年龄varp1=newPerson(‘ABC’,20);window.alert();创建对象的另一种形式如果一个对象比较简单，我们可以这样创建，指定普通属性和函数属性：varperson={name:’abc’,age:22,fun1=function(){window.alert(‘helloworld!’)}};函数调用的另外几种方式等价于普通方式，默认都有window普通方式等价于普通方式，默认都有window普通方式封装js提供有以下几种控制方法和属性的访问权限：公开级别：对外公开私有级别：类本身可以访问，不对外公开.继承问题引出解决办法——继承注：js中实际上是通过对象冒充来实现继承机制的，支持多重继承！重载与覆盖js不支持重载，但天然支持可变参数functiontest(a){window.alert(a);}functiontest(a,b){window.alert(a+’ ’+b);} test(23);结论：js在调用一个函数时，是根据函数名来调用的。如果有多个函数名相同，则默认最后一个函数。Js支持覆盖子类可以重新写函数，来覆盖父类的某个方法。多态闭包Closure闭包和gc是相关的闭包实际上是涉及到一个对象的属性何时被gc处理的问题怎样才能对对象的属性形成一个闭包functionA(){vari=0; functionb(){ window.alert(i++);}returnb;}A();//此时内存中i空间被gc处理varc=A();//这种用c接收A()结果的用法，gc不会把i当作垃圾c();//输出0c();//输出1，从而证明i变量被闭包js的内部类js中本身有提供一些可以直接使用的类就是内部类，主要有：Object/Array/Math/Boolean/String/RegExp/Date/NumberObject类（在前面有介绍）Math类的常用方法abs(x)返回数的绝对值ceil(x)对一个数进行上舍入floor(x)对一个数进行下舍入max(x,y)求x,y中较大的数mix(x,y)求x,y中较小的数round(x)对x进行四舍五入的整数random()一个大于0小于1的16位（不是16进制）小数Date类的常用方法（动态类，需要先创建对象才能使用）Date()返回当前日期时间对象（系统格式UTC）getDate()从Date对象返回一个月中的某一天(1~31)getDay()从Date对象返回一周中的某一天(0~6)getMonth()从Date对象返回月份(0~11)getFullYear()从Date对象返回年（不推荐使用getYear()）getHours()从Date对象返回小时数(0~23)getMinutes()从Date对象返回分钟(0~59)getSeconds()从Date对象那个返回秒(0~59)String类的常用方法（动态类，需要先创建对象才能使用）length属性，可以得到字符串的长度indexOf返回某个字符串值在该字符串中首次出现的位置split()把字符串分割为字符串数组注意区分substr()提取取从start下标开始的指定数目的字符注意区分substring()提取字符串中介于两个指定下标之间的子串charAt()返回指定位置的字符toString()所有内部对象的成员方法，将对象中的数据转换成某个格式的字符串match()/replace()/search()用的很多，涉及到正则表达式，后续介绍Array类的常用方法（动态类，需要先创建对象才能使用）length属性，可以得到数组的长度concat()连接两个或更多的数组，并返回结果sort()对数组的元素进行排序toString()把数组转换为字符串，并返回结果pop()删除并返回数组的最后一个元素push()向数组的末尾添加一个或更多元素，并返回新的长度Boolean类toString()把逻辑值转换为字符串，并返回结果valueOf()返回Boolean对象的原始值Number类toString()把一个Number对象转换为一个字符串，并返回结果（若()里不输入值，则默认表示为十进制，可以输入2,8,10,16分别表示对应的进制数）2)toFixed()把数字转换为字符串，结果的小数点后有指定位数的数字常用系统函数不是很完美用处很大不是很完美用处很大事件驱动机制js是采用事件驱动(event-driven)机制来响应用户操作的。比如通过鼠标或者按键在浏览器窗口或者网页元素(按钮、文本框、浏览器窗口...)上执行的操作，我们称之为事件(Event)。由鼠标或热键引发的一连串程序的动作，称之为事件驱动(Event-Driver)。对事件进行处理程序或函数，我们称之为事件处理程序(EventHandler)，可以有多个。监听监听事件的分类案例：监听鼠标点击事件，并显示鼠标点击的坐标x和y和当前时间<html><head><scripttype="text/javascript">functiontest1(event){alert(“已监听到鼠标点击”);x=event.clientX;//返回当前鼠标点击事件的x坐标y=event.clientY;//返回当前鼠标点击事件的y坐标alert("Xcoords:"+x+",Ycoords:"+y);}functiontest2(){alert(newDate());}</script></head><bodyonmousedown="test1(event)"><inputtype=”button”onclick=”test2()”value=”显示时间”/></body></html>js访问CSS技术访问元素中style属性的CSS样式这个可以直接使用style对象方便的访问：<div

id="mdiv"

style="background-color:blue;">....</div>访问CSS:

<scripttype="text/javascript">//获得元素varoDiv=document.getElementyId("mdiv");//访问元素的style对象,再访问对象中的属性,也可以修改属性的值,直接为他赋值alert(oDiv.style.backgroundColor);</script>访问外部定义的CSS样式（类定义的CSS样式）这个没法使用上面的方法去访问，因为CSS数据不是存储在style属性中，它是存储在类中的。访问方法：先取得定义类的样式表的引用，用document.styleSheets集合实现这个目的，这个集合包含HTML页面中所有的样式表，DOM为每个样式表定义一个cssRules的集合，这个集合中包含定义在样式表中的所用CSS规则（注意：Mozilla和Safasi中是cssRules，而IE中式rules）。<style>/*第一条规则*/div.ss{background