javaScript第三章:对象基础
1.javascript中病没有类的定义,只是将对象实例化时看做类的实例。
2.面向对象的语言要有四种能力:
封装-吧相关信息存储在对象中的能力。
聚集-把一个对象封装在另一个对象中的能力。
继承-由另一个类得到累的属性和方法的能力。
多态-编写能以多种方法运行的函数和方法的能力。
3.声明和实例化:
var oObject = new Object();
4.在ECMAScript中,不能访问对象的物理表示,只能访问对象的引用,
每次创建对象时,存储在变量中的都是该对象的引用,而不是对象本身。
5.ECMAScript中有一种”无用存储单元收集程序“,可以自动销毁对象释放内存。
如果将对象的引用设置成null,可以强制的废除对象。
var oObject = new Object();
oObject = null; //废除对象
6.对象的类型:有三种:本地对象;内置对象;宿主对象。
本地对象:Object,Function ,Boolean,String,Array,Number.......
Array: var arr = new Array('red','green');和java中一样。
alert(arr.length);
toString().ValueOf()返回数组的字符串形式,
还有join()方法,连接字符串的作用。
Date:基于java.util.date类。
var d = new Date();
还有两个方法:parse()接收字符串为参数,将时间转换成毫秒数。
UTC()返回的也是时间毫秒数。
var d = new Date(Date.parse("May 25,2008"));
var d = new Date(Date.UTC(2009,6,8));
或者:var d = new Date(2009,3,4);
其他的方法:getTime();getDate().......
内置对象:Global,Math.
Global:
其实它根本不存在。
isFinite(),parseInt()都是Global对象的方法。
encodeURI(),encodeURIComponent()用于编码传递给浏览器的URL.
var url = "http://www.baidu.com";
alert(encodeURL(url));
还有一个函数eval(); eval(alert("hello"));等价于alert(“hello”);
Math:
min(),max(),abs(),ceil(),floor(),round(),sqrt(),sin(),cos(),......random(),
宿主对象:
所有的DOM,BOM对象都是宿主对象。
7。作用域:ECMAScript中只有一种作用域:公用作用域,所有的属性和方法都是公用的。
8。定义类和对象的方式:
(1)工厂方式
//工厂函数
function createCar(isColor,iDoor){
var car = new Object;
car.color = isColor;
car.doors = iDoor;
car.showcolor = function(){alert(this.color)}
return car;
}
var car1 = createCar("red",4);
var car2 = createCar("yellow",3);
利用一个工厂函数进行创建对象。
(2)构造函数方式
function Car(isColor,iDoor){
var car = new Object;
car.color = isColor;
car.doors = iDoor;
car.showcolor = function(){alert(this.color)}
return car;
}
var car1 = new Car("red",4);
var car2 = new Car("yellow",3);
(3)原型方式
利用了对象的prototype属性。
function Car(){}
Car.prototype.color = "red";
Car.prototype.doors = "4";
Car.prototype.showColor = function(){alert(this.color)};
Car.prototyp.drivers = new Array("sue","json");
var car1 = new Car();
var car2 = new Car();
原型方式不能根据传递参数构造对象,不尽人意,有木有更好的方式呢,有!!
(4)混合的构造函数/原型方式===============================================这种方式使用最广泛
即用构造函数定义对象的非函数的属性,用原型构造对象的函数属性。
function Car(isColor,iDoor){
var car = new Object;
car.color = isColor;
car.doors = iDoor;
this.drivers = new Array("sue","json");
return car;
}
car.prototype.showcolor = function(){alert(this.color)};
var car1 = new Car("red",4);
var car2 = new Car("yellow",3);
car2.drivers.push("Mike");
alert(car1.drivers); //sue,json
alert(car2.drivers); //sue,json,Mike
有些开发者还是觉得不满意,所以使用:
动态原型方法,混合工厂方式。
9.在ECMAScript中,每个本地对象都有一个prototype属性
可以通过它对已有类定义新的方法。
Number.prototype.toHexstring(){return this.toString(16)};
var num = 15;
alert(num.toHexString()); //输出为 ”F“(15的16进制表示)
也可以重定义已有的方法。
************************第四章:继承****************************
1.继承机制实例
几何形状:用UML图表示继承关系:基类:shape,子类:Ellipse,子类circle
2.继承的方式
(1)call()方法
function sayColor(Sprefix,sSuffix){
alert(sprefix+this.color+sSufix);
}
var obj = new Object();
obj.color = "red";
sayCorlor.call(obj,"this color is",",a very nice color indeed")
它的第一个参数是this,其他的参数要传给函数本身。
最后的结果是”this color is red,a very nice color indeed.
(2)apply()方法
它有两个参数,第一个参数是this,第二个参数是由字符串构成的数组。
function sayColor(Sprefix,sSuffix){
alert(sprefix+this.color+sSufix);
}
var obj = new Object();
obj.color = "red";
sayCorlor.call(obj,new Array("this color is",",a very nice color indeed"))
(3)原型链
function classA(){
}
classA.prototype.color = "red";
classA.prototype.saycolor = function(){
alert(this.color);
}
function classB(){}
classB.prototype = new classA();
把classB的prototype设置成classA的实例。classA的所有属性和方法必须在prototype中被赋值,因为之前的所有方法必须删除。
classB.prototype.color = "yellow";
这种方式不支持多继承。
(4)混合方式
对象冒充和原型链。
function classA(color){
this.color = color;
}
classA.prototype.sayColor = function(){
alert(this.color);
}
function classB(color,name){
classA.call(this,color);
this.name = name;
}
classB.prototype = new classA();
classB.prototype.sayName = function(){
alert(this.name);
}
var objA = new classA("red");
var objB = new classB("blue","Niches");
objA.sayColor();//red
objB.sayColor();//blue
objB.sayName();//Niches
一个更实际的例子:
function Polygon(sides){
this.sides = sides;
}
Polygon.prototype.getArea = function(){
return 0;
}
function Triangle (base,height){
Polygon.call(this,3);
this.base = base;
this.height = height;
}
Triangle.prototype = new Polygon();
Triangle.prototype.getArea = function(){
return 0.5*this.base*this.height;
}
var triangle = new Triangle(12,4);
alert(triangle.sides);
alert(triangle.getArea());
到此为止讲完了ECMAScript的基础知识。
*************************** 第五章:web浏览器中的javaScript*****************************
1.HTML中的JavaScript
<script/>标签
包含在<head>标签中。其中language="JavaScript" src是可选的。
javaScript代码是写成内嵌代码,还是外部文件???
写成外部文件的原因如下;
1.安全性-查看源代码就能看到js代码。用户就知道你做了什么操作。
2.代码维护-js代码分布在很多html页面中不好管理,应该放在一个文件夹下易于维护。
3.缓存-浏览器根据特定的设置缓存加载所需要的js文件。
<noscript/>标签
开发者定义了一种方法,当浏览器不支持javascript 代码时显示什么内容,就用这个标签。
支持javascrpt的浏览器就忽略这些代码,不支持的就显示这些代码。
<noscript>
your brower doesn't support Javascript。
</noscript>
2.XHTML中的改变
<script/>中的language不再使用,改为了type="text/javascript"
3.SVG中的javaScript
SVG是基于XML语言,在web上绘制矢量图形。(了解)
4.BOM
浏览器对象模型。
window对象是整个BOM的核心,
window对象:
表示整个浏览器窗口。还可以移动调整浏览器的大小等。
</head>
<frameset rows="100,*">
<frame src="javaScript/frame.html" name="topFrame"/>
<frameset cols="50%,50%">
<frame src="javaScript/anotherFrame.html" name="leftFrame"/>
<frame src="javaScript/twoFrame.html" name="rightFrame"/>
</frameset>
</frameset>
window.frames["topFrame"]:答案为:frame.html
top.frames[0]; 答案为:frame.html
top对象指向的是最顶层的框架,即浏览器本身。
window.name;答案:“” window的name属性,存储的是框架的名字,一定是空白或者top
如果页面上没有框架的话, 那么window,self,top就是指浏览器自身。
(1)窗口操作
moveBy(dx,dy);像素移动
moveTo(x,y);坐标移动
resizeBy(dw,dh);调整像素
resizeTo(w,h);高宽调整
(2)导航和打开新窗口
window.open();四个参数,第一个:url.第二个:新窗口的名字,第三个:特性字符串,第四个:是否用新载入的页面替换当前页面的boolean值。
一般用前三个参数、
window.open("http://www.baidu.com.cn",“topFrame”);
专用的框架名:_self,_parent,_top,_blank;
(3)系统对话框
弹出窗口:alert(),confirm(),prompt();
window.alert("hello");等价于alert("hello");
window.prompt("what's your name","");
confirm("Are you sure");
(4)状态栏
status,defaultstaus 属性
status可以使状态栏上的文本暂时改变。
defaultstaus当用户要离开本页面时才改变。
(5)时间间隔和暂停
window对象的setTimeout()方法设置暂停。
function sayHi(){
alert("hello world");
}
setTimeout(sayHi,5000);
结果:隔五秒中之后,弹出一个窗口显示“Hello world”
window对象使用setInterval()方法设置时间间隔。
function sayHi(){
alert("hello world");
}
setInterval(sayHi,5000);
结果:每间隔5秒,弹出一个窗口。
(6)历史
历史就是用户访问过的站点。history属性。
后退一页:window.history.go(-1);等价于history.go(-1)等价于history.back();
前进一页:history.forword();等价于history.go(1)
document对象:
它是window对象的属性。
它是唯一一个既属于BOM又属于DOM的对象。
document对象是一系列集合构成的,可以访问到文档的各个部分。
有两个方法:write().writeln();接收写入文档的字符串。
location对象:
location对象表示的是:载入窗口的URL.
最常用的是location.href=""
location.reload(false);从缓存载入
location.reload(true);从服务器载入
navigator对象,Screen对象(了解)
**********第六章 DOM基础**************************
1.当谈论DOM树的时候,实际上讨论的是节点(node)的层次。
2.DOM定义了node的接口以及许多种节点类型来表示XML节点的多个方面。
Document--最顶层的节点。
DocumentType--DTD引用的对象表现形式。<!DOCTYPE HTML PBLIC "W3C//DTD/...>
Element--表示起始标签和结束标签之间的内容,例如<tag></tag>
Attr--代表一对特性名和特性值。
Comment--代表XML注释。
Text--普通文本
。。。。。
Node接口也定义了一些特性和方法:
nodeName、nodeValue.nodeType.....
3.使用DOM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DOM.html</title>
</head>
<body>
<p>hello world</p>
<p>isn't this exceting??</p>
<p>You're learning the Dom</p>
</body>
</html>
var h= document.documentElement;
alert(h);
结果是:[object HTMLHtmlElement] 是<html>
var a = h.firstChild;
alert(a);
结果是:[object HTMLHeadElement] 是<head>
var b = h.lastChild;
alert(b);
结果是:[object HTMLBodyElement] 是<body>
4.访问指定的节点
getElementByTagName():用来返回包含所有的tagname特性等于某个特定值的元素的NodeList.
例如: var h = document.getElementByTagName("img");
alert(h[0].tagname); //IMG
getElementByName(): 通过name=“”来获取元素。
getElementById():通过id来获取元素。
5.创建和操作节点。
创建新节点,常用的方法:
createElement();createTextNode();appendChild();
要想使用DOM添加下列代码:<p>Hello word</p>
这样写:var op = document.createElement("p");
var oText = document.createTextNode("Hello world");
op.appendChild(oText);
document.body.appendChild(op);
删除节点,
常用的方法:removeChild();replaceChild();insertChild();
var op = document.body.getElementByTagName("p");
document.body.removeChild(op);
替换节点:用replaceChild(newNode,oldNode)方法、
添加节点:用appendChild(node);方法
6.遍历DOM
NodeIterator
用它可以对树进行深度优先的搜索。
TreeWalker
有点像NodeIterator的大哥,它有NodeIterator所有的功能(nextNode(),previousNode()),
还增加了一些方法,
firstChild(),lastChild().......
接下来要讲的是事件