您的位置 首页 java

第35讲.js超级玛丽小游戏2.js面向对象的进一步说明

1.直接获取 CSS 的内容

举几个例子先来测试下:

先定义一个css文件

#div2{

width:500px;

height:200px;

background-color:green;

left:50px; top:200px;

position:absolute;

}

#div3{

width:500px;

height:200px;

background-color:red;

left:50px; top:450px; position:absolute;

}

<body>

<table >

<tr>

<td><input type=”button” value=”测试” οnclick=”test()” /> </td>

</tr>

</table>

<br/>

再定义个 html文件

function test(){

1)★方式1- html 属性

可以

2)★方式2-css原始

var div2 = document.getElementById(“div2”);

//取出width

原始 css方式添加的样式中, 可以获取 到属性

window. alert (“div2:”+div2.style.width);

可以:500px

3)方式3

Id既可以代表 html元素id ,又可以代表 ID选择器

取不出

因为div2没有给属性值

4)方式4

想从id选择器里取

取不出来

5)方式5

也取不出来

有些浏览器能认这个

6)★结论

① 可以 html属性 方式

② css原始 方式

2.★ 构造方法 (函数)介绍

1)★ 构造函数 的基本用法

function 类名(参数列表){

属性=参数值;

}

① 属性名不一定有this

② 没有的话,要进行区分(这里没有讲到,先保留疑问)

举例如下:

function Person(name,age){

this不能少

this.name=name;

this.age=age;

}

创建一个Person对象的时候 ,就可以 直接给名字,和年龄

var p1 =new Person(“abc”,820);

window.alert(p1.name);

var p2 = new Person(“Hello”,80);

window.alert(p2.name + p2.age);

2)特点

3)★初始化实例-指定函数属性

创建一个对象实例 的时候, 单独 指定一个方法

看案例:

<html>

<head>

< script language=”javascript”>

function jisuan(num1,num2,oper){

if(oper==”+”){

return num1+num2;

}else if(oper==”-“){

return num1-num2;

}if(oper==”*”){

return num1*num2;

}if(oper==”/”){

return num1/num2;

}

}

传递一个函数,很神奇

相当与将函数赋给类的属性

function Person(name,age,fun){

this.name=name;

this.age=age;

this.myfun=fun;

}

var p1=new Person(“aa”,60, jisuan );

如果不指定函数,给个null就好了

var p1=new Person(“aa”,60, null) ;

window.alert(p1.name+p1.age);

window.alert( p1.myfun (80,50,”+”));

</script>

</head>

<body></body>

</html>

4)★小结

① 构造方法名 和类名相同

② 主要作用是完成对新 对象 实例的 初始化

③ 在创建对象实例时,系统 自动调用 该对象的构造方法

④ 给对象初始化属性值的时候,可以 指定函数属性

3.类(原型对象)定义的完善:

面向对象编程的进一步认识

4. Extjs

比较强大

一个js框架,可以用来在网页上画图

炒股,动态图曲线图

5.★一种新的创建对象方式

1)★指定属性

① extjs里面常用

② 类似与json

③ 创建对象的又一种形式:如果一个 对象比较简单 ,我们 可以直接创建 (可以指定普通属性和函数属性)

④ 韩顺平,培训机构出来,发现很多知识太多不会了,但好就好在,并不要求全会

⑤ 会的越多,价值会上升

⑥ 技术更替是客观存在的

⑦ 不要觉得恐慌,最重要的是夯实基础,基础扎实,学习东西就很容易

⑧ 安卓,就是以Java 网络的东西为基础,基础好的话容易上手

<html>

<head>

<script language=”javascript”>

① 这里是name:’小明’,而不是name=’小明’,是 冒号 而不是等于号

② 属性中间是

③ 不要模板了

④ 需要掌握

⑤ 属性是公开的

⑥ Js中属性一般都是公开的

⑦ 本质是以object方式创建对象,属性动态添加进去的

var dog={name:’小明’,age:9};

window.alert(dog.constructor);

window.alert(dog.name); 小明

2)★指定函数

很多框架都有这种写法

var dog={name:’小明’, //属性之间用 逗号 隔开

age:9,

sayHello:function(a,b){window.alert(“Hello”);},

jisuan:function(a,b){window.alert(“结果=”+(a+b));}

} ;

window.alert(dog.name);

window.alert(dog[“name”]);//这样也可以访问

dog.sayHello();

dog.jisuan(50,60);

</script>

</head>

<body></body>

</html>

6.★call-一种新的调用方式

1)基本语法

有时,我们会看到这样一种调用方法

函数名.call(对象实例)

函数call对象

这样调用,该函数的this就指向 对象实例

<html>

<head>

<script language=”javascript”>

var dog={name:’小明’,age:9} ; //这里是name:’小明’,而不是name=’小明’,是冒号而不是等于号

function test(){

window.alert(this.name);

}

function test1(){

window.alert(this.name1);

}

test(); //空白 ,什么也没有输出,其实也就是 undefined

window.test(); //空白 ,什么也没有输出,其实也就是undefined

test.call(dog);

① call实际上为了改变test函数中this的指向,

② 韩老师说其 等价于 dog.test() ; 前提是需要指定

③ 目的是,传递进去的对象改变this,this改成放进去的对象,放的是什么就是什么,希望传进去的对象充当this的角色

var name1 = “顺平”;

test1.call(window);

New test();会报错

7.★forin

① 利用 for … in 可以很方便的 查看某一对象 的所有 属性 方法

② 用处很大

var dog={name:’小明’, //属性之间用 逗号 隔开

age:9,

sayHello:function(a,b){window.alert(“Hello”);},

jisuan:function(a,b){window.alert(“结果=”+(a+b));}

};

循环列出dog对象的所有属性和方法,对象名[‘属性名’]

for(var key in dog){

document.writeln(dog[key]+”<br/>”);

}

1)意义:

① 查看不同浏览器对window对象属性支持不同

② 比查文档或者网上查方便

③ 或者查看其他的对象

//循环列出window对象的所有属性和方法

document.writeln(“***当前浏览器window对象有 属性 和 方法***<br/>”);

for(var key in window){

document.writeln(key + “:” + window[key] + “<br/>”);

}

//如果想看其他对象的属性和方法,将window改为其他的即可

document.writeln(“***当前浏览器history对象有 属性 和 方法***<br/>”);

for(var key in history){

document.writeln(key + “:” + history[key] + “<br/>”);

}

</script>

</head>

<body></body>

</html>

这里最重要的就是 浏览器window对象的属性和方法,利用for in 我们就可以知道当前我们使用的浏览器支持window对象中的哪些方法和属性,就不用查找网络了,浏览器除了window对象外,还有其他对象,如下图所示:

通过下面的方法查看浏览器window对象的属性和方法:(我用的是火狐浏览器)

//循环列出window对象的所有属性和方法

document.writeln(“***当前浏览器window对象有 属性 和 方法***<br/>”);

for(var key in window){

document.writeln(key + “:” + window[key] + “<br/>”);

}

输出结果:

再来看浏览器 history 对象的属性和方法: (我用的是火狐浏览器)

Js的内容基本已经学完了

前面压力比较大

后面相对轻松一点了

文章来源:智云一二三科技

文章标题:第35讲.js超级玛丽小游戏2.js面向对象的进一步说明

文章地址:https://www.zhihuclub.com/186350.shtml

关于作者: 智云科技

热门文章

网站地图