HTML5第二节课笔记

HTML5第二节课笔记
一．事件
1.一般事件方式：
<button type="button" class="mui-btnmui-btn-blue" id="mybutton">按钮
</button>
function test1(){
alert("aaa");
}
oinput.onclick=test1;
//结果：弹出aaa
2.传参方式
oinput.onclick=function(){
test1("wang")
};
oinput.onclick=function(){
test1("wang")
};
//结果为：弹出wang
3.事件绑定（重点）
（1）加事件：一个元素的同一个事件加两次会相互覆盖
function test1(){
alert("aaa");
}
function test2()
{
alert("bbb");
}
oinput.onclick=test1;
oinput.onclick=test2;
//结果：只能弹出bbb
（2）事件绑定：可以同时加多个事件函数到同一个事件上，不会被覆盖addEventLister(‘事件’，函数，true或false)
true:表示：在捕获阶段调用事件处理程序
false表示：在冒泡阶段调用
一般为false;
function test1(){
alert("aaa");
}
function test2()
{
alert("bbb");
}
oinput.addEventListener('tap',test1,false);
oinput.addEventListener('tap',test2,false);
//结果为先弹出aaa,再弹出bbb
二．原型
（1）原型法
//原型：对系统类做方法扩展
varmyString="hello world";
String.prototype.aaa=function(){
alert('mystring');
}
myString.aaa();
（2）类的定义（原型模式）
//定义类
Prototype属性是一个指针，指向一个对象，这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

通过调用构
造函数而创建的那个对象实例的原型对象。

原型对象好处：可以让所有对象实例共享它所包含的属性和方法。

//如果没有值，this代表window
function Student(name,age){
this.sname=name;
this.sage=age;
}
Student.prototype.sayName=function(){
alert(this.sname);
}
varostu=new Student('yang',20);
ostu.sayName();
//结果为：yang
(3)如果需要包名
varneusoft={};
neusoft.html5games={};
neusoft.html5games.pingpong=function(version){
this.version=version;
}
neusoft.html5games.pingpong.prototype.play=function(){
alert(this.version);
}
var op=new neusoft.html5games.pingpong('1.0');
op.play();
//结果为：1.0
三．JSON
//json对象
varstu={"name":"yang","age":20};//字符串表示属性之间用,号取值方便
alert();//yang
alert(stu.age);//20
//多个对象json对象集合
varstus=[{"name":"yang","age":20},
{"name":"wang","age":44},
{"name":"zhang","age":233}];
alert(stus[1].age);
//44
//json反序列化
var stu1='{"name":"yang","age":20}';
varostu=JSON.parse(stu1);//还原成对象反序列化
alert();
//yang
//json序列化
varstu={"name":"yang","age":20};
varstuString=JSON.stringify(stu);
alert(stuString);
//{"name":"yang","age":20}
JSON练习
JSON练习：
vardataString='{"teachers":[{"name":"黄波","course":"网页高级设计
"},{"name":"贺敏","course":"Java程序设计"},{"name":"毛丽娟","course":"JavaScript程序设计"}],"students":[{"name":"张三
","age":20},{"name":"李四","age":21},{"name":"王五","age":19}]}';把王五这个值取出来
<script>
vardataString='{"teachers":[{"name":"黄波","course":"网页高级设计"},{"name":"贺敏","course":"Java程序设计"},{"name":"毛丽娟","course":"JavaScript程序设计"}],"students":[{"name":"张三
","age":20},{"name":"李四","age":21},{"name":"王五","age":19}]}';
var data=JSON.parse(dataString);
// alert(data); //[object object] 说明反序列化成功
// alert(data.students[2].name);//王五
for(vari=0;i<data.students.length;i++)
{
alert(data.students[i].name);
}
</script>
刷新，按F10进行调试。