javascript复习

最新推荐文章于 2024-11-02 12:42:04 发布

阿托斯之棍

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量557

点赞数

文章标签： javascript function json button layer prototype

本文深入探讨了JavaScript的数据转换、数据传递、函数与事件、面向对象编程、JSON对象使用、动态属性添加、继承、私有与静态属性、方法覆盖、重写提示框、复制继承与原始继承方法，并详细介绍了面向对象编程的特性及其应用。

摘要由CSDN通过智能技术生成

1. JavaScript数据类准换

转换为Number：根据parseInt()来转化。

转换String：任何类型加字符串即为字符串。

转换Boolean：true,false,所有非0数字为true,否则为false

Undefind / null 直接转换为false

2. JavaScript数据专递

基本数据类型采用值传递：

3. JavaScript语法函数与事件

函数和事件通常是一种绑定关系，通过事件调用函数。如果绑定多个函数，中间用分号隔开。

l 常用事件

l Onload

l OnClick

l MouseOver 鼠标移动到指定目标上

l MouseOut 鼠标离开指定目标

l Focus 当元素获得焦点

l Blur 当元素失去焦点

l Change 1.输入内容发生改变，2.select选项发生改变

l Onkeyup 键盘案件弹起

l 常用事件

l Onload

l OnClick

l MouseOver 鼠标移动到指定目标上

l MouseOut 鼠标离开指定目标

l Focus 当元素获得焦点

l Blur 当元素失去焦点

l Change 1.输入内容发生改变，2.select选项发生改变

l Onkeyup 键盘案件弹起

4. JavaScript面向对象编程

JavaScript定义属性和方法

方法一：

function Test(){

//javascript定义属性

Test.prototype.name="zsw";

//javascript定义方法

Test.prototype.say = function(){

alert(this.name + " love hy!");

};

}

function a(){

new Test().say(); //javascript调用方法

}

方法二：

function boy(){

//js通过this定义属性

this.name = "zsw";

this.age = 21;

//js通过this定义方法

this.say = function(){

alert(this.name + " love hy!");

}

};

function b(){

var _boy = new boy();

alert(_boy.name);

alert(_boy.age+"");

_boy.say();

};

总结:

定义属性，方法

1.使用prototype创建

2.使用this创建

5. Json的方式创建对象

var json = {name:'zsw',age:20};

alert(json.name);

function showName(o){

alert(o.name);

alert(o["name"]);

}

function showObject(){

var json = "{name:'zsw',age:20}";

showName(eval("("+json+")"));

}

Json对象是可以传递的

原理：JSON可以在字符串和对象间转换。

可以通过JavaScript的eval()方法将字符串转换成对象。

6．动态添加属性和方法

function test1(){};

function runTest1(){

var t1 = new test1();

t1.name = "zsw";

t1.age = 21;

t1.say = function(){

alert("Hello World!!!");

};

alert(t1.name);

t1.say();

};

7.在内置对象添加属性和方法

8.Javascript面向对象中的继承

function Person(){

Person.prototype.name = "zsw";

Person.prototype.age = 21;

Person.prototype.say = function(){

alert("Javascript 面向对象的继承");

};

}

function Student(){

Student.prototype.schoolName = "bdqn";

}

function TestStu(){

Student.prototype = new Person();

var s = new Student();

alert(s.schoolName);

s.say();

}

9．定义私有属性

function Person(){

Person.prototype.name = "zsw";

Person.prototype.age = 21;

Person.prototype.say = function(){

alert("Javascript 面向对象的继承");

};

}

function Student(){

Student.prototype.schoolName = "bdqn";

//定义私有属性

var gfName = "hy";

}

function TestStu(){

Student.prototype = new Person();

var s = new Student();

alert(s.schoolName);

s.say();

alert(s.gfName); //不可见，因为访问的私有属性

}

10.定义静态属性

function Person(){

Person.prototype.name = "zsw";

Person.prototype.age = 21;

Person.prototype.say = function(){

alert("Javascript 面向对象的继承");

};

}

function Student(){

Student.prototype.schoolName = "bdqn";

//定义私有属性

var gfName = "hy";

Student.cityName = "深圳";

}

function TestStu(){

Student.prototype = new Person();

var s = new Student();

alert(s.schoolName);

s.say();

alert(s.gfName); //不可见，因为访问的私有属性

//访问静态属性

alert(Student.cityName);

}

11.Json对象

定义Json对对象，在对象中添加属性：

function jsonTest(){

var jsonObj = {

name:'周尚武',

sex:'男',

age:21

};

alert(jsonObj.name);

}

Json添加方法：

function jsonTest(){

var jsonObj = {

name:'周尚武',

sex:'男',

age:21,

say:function(){

alert("Json对象中添加方法!");

}

};

alert(jsonObj.name);

jsonObj.say();

}

Json添加子对象：

function jsonTest(){

var jsonObj = {

name:'周尚武',

sex:'男',

age:21,

say:function(){

alert("Json对象中添加方法!");

}

};

alert(jsonObj.name);

jsonObj.say();

var jsonArray = ["A","B","C"];

alert(jsonArray[0]);

}

在此复习一下静态方法

function test(){

test.prototype.name="huangyi";

test.cityName="深圳";

}

function T(){

alert(test.cityName); //将输出undefined

}

以上调用test.cityName必须先把test实例化一下：

function test(){

test.prototype.name="huangyi";

test.cityName="深圳";

}

function T(){

new test();

alert(test.cityName);

}

总结：

Javascript面向对象和所有面向对象编程语言一样，都是通过实例化的方式进行访问，两个对象间的非静态变量不会被干扰。

JSON中，属性可以是方法，甚至可以是一个子对象。

使用静态变量，需要实例化一下function，告诉浏览器它不是函数，而是对象。

12.方法覆盖

function test(){

test.prototype.name = "zsw";

test.prototype.age = 21;

test.prototype.say=function(){

alert("Hello World!");

}

function T(){

var t = new test();

t.say = function(){

alert("你好!");

}

t.say();

}

13.重写window.alert();提示框

function run(){

window.alert = function(s){

var o = document.getElementById("Layer1");

o.innerHTML = "<input name='button' type='button' οnclick='closeWin()' value='关闭' />"+s;

o.style.display = "block";

}

window.show = function(s){

alert(s);

}

show('zsw love hy！！');

}

function closeWin(){

var o = document.getElementById("Layer1");

o.style.display = "none";

}

</script>

<!--

#Layer1 {

position:absolute;

left:341px;

top:168px;

width:296px;

height:142px;

z-index:1;

color:#FFFFFF;

display:none;

background-color:#00CC99;

}

-->

</style>

</head>

<body>

</div>

</body>

补充：javascript复制继承法

[javascript] view plain copy print ?

<mce:script type="text/javascript"><!--
function dw(s){
alert(s);
}
Function.prototype.extend_p = function(obj){
for(var i in obj){
this.prototype[i] = obj[i];
}
}
Person = function(){
this.name = "accp";
this.setName = function(obj){
this.name = obj;
}
this.getName = function(){
return this.name;
}
}
Student = function(){
}
Student.extend_p(new Person());
var s = new Student();
s.setName('黄翊');
dw(s.getName());
// --></mce:script>

Javascript 原始继承法

[javascript] view plain copy print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript原始继承法</title>
<mce:script type="text/javascript"><!--
function ds(s){
alert(s);
}
Person = function(){
this.name = "hy";
this.setName = function(obj){
this.name = obj;
}
this.getName = function(){
return this.name;
}
}
Student = function(){
this.stuNo = "0001";
}
Student.prototype = new Person();
var stu = new Student();
stu.setName('黄翊');
alert("名字："+stu.getName());
alert("编号："+stu.stuNo);
// --></mce:script>
</head>
<body>
</body>
</html>