JavaScript技术讲座

keaide

第四讲 基于对象的JavaScript语言

JavaScript语言是基于对象的（Object-Based），而不是面向对象的（object-oriented）。之所以说它是一门基于对象的语言，主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。
虽然JavaScript语言是一门基于对象的，但它还是具有一些面向对象的基本特征。它可以根据需要创建自己
的对象，从而进一步扩大JavaScript的应用范围，增强编写功能强大的Web文文件。
一、对象的基础知识
１、对象的基本结构
JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。
２、引用对象的途径
一个对象要真正地被使用，可采用以下几种方式获得：
引用JavaScript内部对象；
由浏览器环境中提供；
创建新对象。
这就是说一个对象在被引用之前，这个对象必须存在，否则引用将毫无意义，而出现错误信息。从上面中我们可以看出JavaScript引用对象可通过三种方式获取。要么创建新的对象，要么利用现存的对象。
３、有关对象操作语句
JavaScript不是一纯面向对象的语言，它设有提供面向对象语言的许多功能，因此JavaScript设计者之所以把它你“基于对象”而不是面向对象的语言，在JavaScript中提供了几个用于操作对象的语句和关键词及运算符。
1）、For...in语句
格式如下：
For（对象属性名 in 已知对象名）
说明：
该语句的功能是用于对已知对象的所有属性进行操作的控制循环。它是将一个已知对象的所有属性反复置给一个变量；而不是使用计数器来实现的。
该语句的优点就是无需知道对象中属性的个数即可进行操作。
例：下列函数是显示数组中的内容：
Function showData(object)
for (var X=0; X<30;X++)
document.write(object)；
该函数是通过数组下标顺序值，来访问每个对象的属性，使用这种方式首先必须知道数组的下标值，否则若超出范围，则就会发生错误。而使For...in语句，则根本不需要知道对象属性的个数，见下：
Function showData(object)
for(var prop in object)
document.write(object[prop])；
使用该函数时，在循环体中，For自动将的属性取出来，直到最后为此。
2）、with语句
使用该语句的意思是：在该语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。

with object{

...}

所有在with语句后的花括号中的语句，都是在后面object对象的作用域的。

keaide

3）、his关键词
this是对当前的引用，在JavaScript由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，最后自己已不知道现在引用的那一个对象，为此JavaScript提供了一个用于将对象指定当前对象的语句this。

4）、ew运算符
虽然在JavaScript中对象的功能已经是非常强大的了。但更强大的是设计人员可以按照需求来创建自己的对象，以满足某一特定的要求。使用New运算符可以创建一个新的对象。其创建对象使用如下格式：
Newobject=NEW Object(Parameters table);
其中Newobject创建的新对象：object是已经存在的对象； parameters table参数表；new是JavaScript中的命令语句。
如创建一个日期新对象
newData=New Data()
birthday=New Data (December 12.1998)
之后就可使NewData、birthday作为一个新的日期对象了。
　
４、对象属性的引用
对象属性的引用可由下列三种方式之一实现：
（１）使用点（.）运算符
university.Name=“云南省”
university.city=“昆明市”
university.Date="1999"
其中university是一个已经存在的对象，Name、City、Date是它的三个属性，并通过操作对其赋值。
（２）通过对象的下标实现引用
university[0]=“云南”
university[1]=“昆明市”
university[2]="1999"
通过数组形式的访问属性，可以使用循环操作获取其值。
function showunievsity(object)
for (var j=0;j<2; j++)
document.write(object[j])
若采用For...in则可以不知其属性的个数后就可以实现：
Function showmy(object)
for (var prop in this)
docament.write(this[prop]);
（３）通过字符串的形式实现
university["Name"]=“云南”
university["City"]=“昆明市”
university["Date"]="1999"
　
５、对象的方法的引用
在JavaScript中对象方法的引用是非常简单的。
ObjectName.methods()
实际上methods()=FunctionName方法实质上是一个函数。 如引用university对象中的showmy（）方法，则可使用：
document.write (university.showmy())
或：document.write(university)
如引用math内部对象中cos()的方法
则：
with(math)
document.write(cos(35));
document.write(cos(80));
若不使用with则引用时相对要复杂些：
document.write(Math.cos(35))
document.write(math.sin(80))
　

keaide

二、常用对象的属性和方法
JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是基于对象编程的真正目的。
在JavaScript提供了string（字符串）、math（数值计算）和Date（日期）三种对象和其它一些相关的方法。从而为编程人员快速开发强大的脚本程序提供了非常有利的条件。

1、常用内部对象
在JavaScript中对于对象属性与方法的引用，有两种情况：其一是说该对象是静态对象，即在引用该对象的属性或方法时不需要为它创建实例；而另一种对象则在引用它的对象或方法是必须为它创建一个实例，即该对象是动态对象。
对JavaScript内部对象的引用，以是紧紧围绕着它的属性与方法进行的。因而明确对象的静动性对于掌握和理解JavaScript内部对象是具有非常重要的意义。
１)、串对象

string对象：内部静态性。

访问properties和methods时，可使用（.）运算符实现。

基本使用格式：objectName.prop/methods
（１）串对象的属性
该对象只有一个属性，即length。它表明了字符串中的字符个数，包括所有符号。例：
mytest="This is a JavaScript"
mystringlength=mytest.length
最后mystringlength返回mytest字符串的长度为20。
（２）串对象的方法
string对象的方法共有１９个。主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。
其主要方法如下：

锚点anchor()：该方法创建如用Html文文件中一样的anchor标记。使用anchor如用Html中(A Name=""一样。通过下列格式访问:string.anchor(anchorName)。

有关字符显示的控制方法
big字体显示, Italics()斜体字显示，bold()粗体字显示，blink()字符闪烁显示，small（）字符用小体字显示，fixed()固定高亮字显示、fontsize(size)控制字体大小等。

字体颜色方法；fontcolor(color)

字符串大小写转换
toLowerCase()－小写转换，toUpperCase()大写转换。下列把一个给定的串分别转换成大写和小写格式:
string=stringValue.toUpperCase和string=stringValue.toLowerCase。

字符搜索：indexOf[charactor,fromIndex]
从指定formIndtx位置开始搜索charactor第一次出现的位置。

返回字符串的一部分字符串：substring(start,end)

从start开始到end的字符全部返回。
　

keaide

２)、算术函数的math对象
　功能：提供除加、减、乘、除以外的一引些自述运算。如对数，平方根等 。
　静动性：静态对象
（１）主要属性
math中提供了６个属性，它们是数学中经常用到的常数Ｅ、以１０为底的自然对数ＬＮ１０、以２为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根为SQRT2。
（２）主要方法
　绝对值：abs()
　正弦余弦值：sin(),cos()
　反正弦反余弦 :asin(), acos()
　正切反正切：tan(),atan()
　四舍五入：round()
　平方根：sqrt()
　基于几方次的值：Pow(base,exponent)
...
３)、日期及时间对象
　功能：提供一个有关日期和时间的对象。
　静动性：动态性，即必须使用New运算符创建一个实例。例:

MyDate=New Date()
Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。
　日期起始值:１７７０年１月１日００:００:００。

(1) 获取日期的时间方法
　getYear(): 返回年数
　getMonth():返回当月号数
　getDate(): 返回当日号数
　getDay():返回星期几
　getHours():返回小时数
　getMintes(:返回分钟数
　getSeconds():返回秒数
　getTime() : 返回毫秒数

(1) 设置日期和时间：
　setYear();设置年
　setDate():设置当月号数
　setMonth():设置当月份数
　setHours():设置小时数
　setMintes():设置分钟数
　setSeconds():设置秒数
　setTime ():设置毫秒数
...
2、JavaScript中的系统函数
JavaScript中的系统函数又称内部方法。它提供了与任何对象无关的系统函数，使用这些函数不需创建任何实例,可直接用。
1) 返回字符串表达式中的值：
　方法名：eval（字符串表达式），例：
test=eval("8+9+5/2";
2) 返回字符串ASCI码：
　方法名：unEscape (string)
3) 返回字符的编码：
　方法名：escape(character)
4) 返回实数：
parseFloat(floustring);
5) 返回不同进制的数：
parseInt(numbestring ,rad.X)
其中radix是数的进制，numbs字符串数

keaide

三、范例

下面是一个时钟显示的JavaScript文檔。在文文件中用了非常多的函数。
Test4_1.htm
<html>
<head>
<style TYPE="text/css">
<style>
</style>
<title>时钟</title>
<script LANGUAGE="JavaScript">
function showClock() {
}
function hideClock() {
}
var timerID = null
var timerRunning = false
function stopClock() {
if(timerRunning)
clearTimeout(timerID);
timerRunning = false
document.clock.face.value = "";
}
function showTime() {
var now = new Date();
var year = now.getYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var hours = now.getHours();
var mins = now.getMinutes();
var secs = now.getSeconds();
var timeVal = "";
timeVal += ((hours <= 12) ? hours : hours - 12);
timeVal += ((mins < 10) ? ":0" : ":" + mins;
timeVal += ((secs <= 10) ? ":0" : ":" + secs;
timeVal += ((hours < 12) ? "AM" : "PM";
timeVal += ((month < 10) ? " on 0" : " on " + month + "-";
timeVal += date + "-" + year;
document.clock.face.value = timeVal;
timerID = setTimeout("showTime()", 1000);
timerRunning = true
}
function startClock() {
stopClock();
showTime();
}
　
function windowOpener( indexnum ){
var loadpos="date.html"+"#"+indexnum;
controlWindow=window.open(loadpos,"date","toolbar=no,location=no,directories=no,
status=no,menubar=no,scrollbars=yes,resizable=yes,width=620,height=400";
}
</script>
</head>
<body onLoad="startClock()" >
<p align="center"><big><span style="background-color: rgb(45,45,45)"><font face="Arial">form</font> &nbsp; <font face="宋体">时钟</font>　</span></big></p>
<p align="center">　</p>
<div align="center"><center>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form NAME="clock" onSubmit="0">
<div align="center"><center><p><input TYPE="text" NAME="face" size="20" VALUE style="background-color: rgb(192,192,192)"> </p>
</center></div>
</form>
</td>
</tr>
</table>
</center></div>
</body>
</html>

keaide

第五讲 创建新对象

使用JavaScript可以创建自己的对象。虽然JavaScript内部和浏览器本身的功能已十分强大，但JavaScript还是提供了创建一个新对象的方法。使其不必像超文本标识语言那样，求于或其它多媒体工具，就能完成许多复杂的工作。
在JavaScript中创建一个新的对象是十分简单的。首先它必须定义一个对象，而后再为该对象创建一个实例。这个实例就是一个新对象，它具有对象定义中的基本特征。
一、对象的定义

JavaScript对象的定义，其基本格式如下：

Function Object（属性表）


This.prop1=prop1
This.prop2=prop2

...

This.meth=FunctionName1;

This.meth=FunctionName2;

...

在一个对象的定义中，可以为该对象指明其属性和方法。通过属性和方法构成了一个对象的实例。如以下是一个关于University对象的定义：

Function university(name,city,creatDate URL)


This.name=name
This.city=city

This.creatDate=New Date(creatDate)

This.URL=URL

其基本含义如下：


　
Name－指定一个“单位”名称。
　
City－“单位”所在城市。
　
CreatDate－记载university对象的更新日期。
　
URL－该对象指向一个网址。
　

　

二、创建对象实例

一旦对象定义完成后，就可以为该对象创建一个实例了：


NewObject=New object();
其中Newobjet是新的对象，Object已经定义好的对象。例：

U1=New university(“云南省”，“昆明市”，"January 05,199712:00:00","http://www.YN.KM"

U2=New university(“云南电子科技大学”，“昆明”,"January 07,1997 12:00:00","htlp://www.YNKJ.CN"

　

keaide

三、对象方法的使用

在对象中除了使用属性外，有时还需要使用方法。在对象的定义中，我们看到This.meth=FunctionName语句，那就是为定义对象的方法。实质对象的方法就是一个函数FunctionName，通过它实现自己的意图。

例在university对象中增加一个方法，该方法是显示它自己本身，并返回相应的字串。

function university(name,city,createDate,URL)


This.Name=Name;
This.city=city;

This.createDate=New Date(creatDate)；

This.URL=URL；

This.showuniversity=showuniversity;

其中This.showuniversity就是定义了一个方法－－－showuniversity()。

而showuniversity()方法是实现university对象本身的显示。

function showuniversity()


For (var prop in this)
alert(prop+="+this[prop]+"";

其中alert是JavaScript中的内部函数，显示其字符串。

　

　

四、JavaScript中的数组

　
使用New创建数组
JavaScript中没有提供像其它语言具有明显的数组类型，但可以通过function定义一个数组，并使用New对象操作符创建一个具有下标的数组。从而可以实现任何数据类型的存储。
a、定义对象的数组

Function arrayName(size){

This.length=Size;

for(var X=; X<=size;X++)

this[X]=0;

Reture this;

}

其中arrayName是定义数组的一个名子，Size是有关数组大小的值（1-size），即数组元素的个数。通过for循环对一个当前对象的数组进行定义，最后返回这个数组。

从中可以看出，JavaScript中的数组是从1到size，这与其它０到size的数组表示方法有所不同，当然你可根据需要将数组的下标由１到size调整到０到size－１,可由下列实现:

Function arrayName (size)

For (var X=0; X<=size;X++)

this[X]=0;

this.lenght=size;

Return this;

从上面可以看出该方法是只是调整了this.lenght的位置，该位置是用于存储数组的大小的。从而调整后的数组的下标将与其它语言一致。但请读者注意正是由于数组下标顺序由１到size，使得JavaScript中的对象功能更加强大。

b、创建数组实例

一个数组定义完成以后，还不能马上使用，必须为该数组创建一个数组实例：

Myarray=New arrayName(n);

并赋于初值：

Myarray[1]=“字串１”；

Myarray[2]=“字串２”；

Myarray[3]=“字串３”；

...

Myarray[n]=“字串n”；

一旦给数组赋于了初值后，数组中就具有真正意义的数据了，以后就可以在程序设计过程中直接引用。

创建多维数组
Function creatMArray(row,col){
var indx=0;

this.length=(row*10)+col

for(var x=1;x<=row;x++)

for(var y=1;y<=col;y++)

indx=(x*10)+y;

this[indx]=””;

}

myMArray=new creatMArray();

之后可通过myMArray[11]、myMArray[12]、myMArray[13]、myMArray[21]、myMArray[22]、myMArray[23]、

…来引用。

内部数组

在Java中为了方便内部对象的操作,可以使用窗体(Forms)、框架(Frames)、元素(element)、链接(links)和锚(Anchors)数组实现对象的访问。
　anchors[]:使用《A name=“anchorName“》标识来建立锚的链接。

　links[]: 使用<A href=”URL”>来定义一个越文本链接项。

　Forms[]: 在程序中使用多窗体时,建立该数组。

　Elements[]:在一个窗口中使用从个元素时,建立该数组。

　Frames[]:建立框架时,使用该数组

　anchors[]用于窗体的访问(它是通过《form name=“form1”》所指定的),link[]用于被链接到的锚点的访问(它是通过《a href=URL》所指定的)。Forms[]反映窗体的属性,而anchors[]反映Web页面中的链接属性。

有关锚数组的文档：

<HTML>
<HEAD>
<BODY>
<A NAME=”MyAnchorsName1”> 定义第一个锚名
HTML Code
<A NAME=”MyAnchorsName2”> 定义第二个锚名
HTML Code
<A HREF=”#MyAnchorsName1”>建立锚的链接
<A HREF=”#MyAnchorsName2”> 建立锚的链接
….
该文档段建立了两面全锚的链接,可通过Anchors[]访问这些锚。document.Anchors[0]反映第一个锚,而document.Anchors[1]反映第二个锚的有关信息。

　

keaide

五、范例

范例1：一个动态文字滚动的例子。

test5_1.htm

<html>
<head>
<title></title>
<script LANGUAGE="JavaScript">
　
with (top.window.location)
{baseURL = href.substring (0,href.lastIndexOf ("/" + 1)}
total_toc_items = 0;
current_overID = "";
last_overID = "";
browser = navigator.appName;
version = parseInt(navigator.appVersion);
client=null;
loaded = 0;
if (browser == "Netscape" && version >= 3) client = "ns3";
function toc_item (img_name,icon_col,width,height) {
if (client =="ns3" {
img_prefix = baseURL + img_name;
this.icon_col = icon_col;
this.toc_img_off = new Image (width,height);
this.toc_img_off.src = img_prefix + "_off.gif";
this.toc_img_on = new Image (width,height);
this.toc_img_on.src = img_prefix + "_on.gif";
}
}
　
function new_toc_item (img_name,icon_row,width,height) {
toc_item [img_name] = new toc_item (img_name,icon_row,width,height);
}
　
function toc_mouseover (itemID) {
if (client =="ns3" {
current_overID = itemID;
if (current_overID != last_overID) {
document [current_overID].src = toc_item [current_overID].toc_img_on.src;
if (last_overID != "" {
document.images [last_overID].src = toc_item[last_overID].toc_img_off.src;
}
last_overID = current_overID;
}
}
}
　
function toc_mouseout () {
if (client =="ns3" {
if (current_overID != "" {
document.images [current_overID].src = toc_item [current_overID].toc_img_off.src;
}
current_overID = "";
last_overID = "";
}
}
new_toc_item ("1",2,120,20);
<!-- Begin
function bannerObject(p){
this.msg = MESSAGE
this.out = " "
this.pos = POSITION
this.delay = DELAY
this.i = 0
this.reset = clearMessage}
　
function clearMessage(){
this.pos = POSITION}
var POSITION = 50;
var DELAY = 150;
var MESSAGE = "这是一个动态JavaScript文字显示的例子";
var scroll = new bannerObject();
function scroller(){
scroll.out += " ";
if(scroll.pos>0)
for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) { scroll.out +=" " ; }
if (scroll.pos>= 0)
scroll.out += scroll.msg
else
scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)
document.noticeForm.notice.value = scroll.out
scroll.out = " ";
scroll.pos--;
scroll.pos--;
if (scroll.pos < -(scroll.msg.length)) { scroll.reset(); } setTimeout
('scroller()',scroll.delay);}
</script>
</head>
<body onload="scroller()" bgcolor="#000000" link="#C0C0C0" vlink="#C0C0C0"
alink="#008080"
text="#C0C0C0">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form NAME="noticeForm">
<p><input TYPE="text" name="notice" size="40" style="background-color: rgb(192,192,192)"></p>
</form>
</td>
</tr>
</table>
</center></div>
</body>
</html>

keaide

范例2:颜色变化的例子。

test5_2.htm

<html>
<head>
<script>
<!--
function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this = 0;
return this;}
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa = i;
hexa[10]="a";
hexa[11]="b";
hexa[12]="c";
hexa[13]="d";
hexa[14]="e";
hexa[15]="f";
function hex(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else return "" + hexa[Math.floor(i/16)] + hexa[i%16];}
function setbgColor(r, g, b) {
var hr = hex(r);
var hg = hex(g);
var hb = hex(b);
document.bgColor = "#"+hr+hg+hb;}
function fade(sr, sg, sb, er, eg, eb, step) {
for(var i = 0; i <= step; i++) {
setbgColor( Math.floor(sr * ((step-i)/step) + er * (i/step)),
Math.floor(sg * ((step-i)/step) + eg * (i/step)), Math.floor(sb *
((step-i)/step) + eb * (i/step))); }}
function fadein() {
fade(255,0,0,0,0,255,100);
fade(0,0,255,0,255,0,100);
fade(0,255,0, 0,0,0, 100);}
fadein();
// -->
</script>
<body>
</body>
</html>
　
　　本讲介绍了用户自行创建对象的方法, 用户可根据需要创建自己的对象。并介绍了JavaScript中建数组的方法。

keaide

第六讲 使用内部对象系统

　使用浏览器的内部对象系统, 可实现与HTML文档进行交互。它的作用是将相关元素组织包装起来，提供给程序设计人员使用，从而减轻编程人的劳动，提高设计Web页面的能力。
一、浏览器对象层次及其主要作用

　　除了前面提到过的文档document对象外，Navigator浏览器中还提供了窗口（Window）对象以及历史（History）和位置（Location）对象。

　浏览器对象(Navigator)

提供有关浏览器的信息

　窗口对象(Windows)

Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性。

　位置对象(Location)

Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象。

　历史对象(History)

History对象提供了与历史清单有关的信息。

　文档对象(Document)

document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。

　

　　编程人员利用这些对象，可以对WWW浏览器环境中的事件进行控制并作出处理。在JavaScript中提供了非常丰富的内部方法和属性,从而减轻了编程人员的工作,提高编程效率。这正是基于对象与面向对象的根本区别所在。在这些对象系统中,文档对象属于非常重要的,它位于最低层,但对于我们实现Web页面信息交互起作关键作用。因而它是对象系统的核心部分。