JavaScript語言是基于對象的(Object-Based),而不是面向?qū)ο蟮模╫bject-oriented)。之所以說它是一門基于對象的語言,主要是因為它沒有提供象抽象、繼承、重載等有關(guān)面向?qū)ο笳Z言的許多功能。而是把其它語言所創(chuàng)建的復(fù)雜對象統(tǒng)一起來,從而形成一個非常強(qiáng)大的對象系統(tǒng)。 雖然JavaScript語言是一門基于對象的,但它還是具有一些面向?qū)ο蟮幕咎卣鳌K梢愿鶕?jù)需要創(chuàng)建自己的對象,從而進(jìn)一步擴(kuò)大JavaScript的應(yīng)用范圍,增強(qiáng)編寫功能強(qiáng)大的Web文檔。
一、對象的基礎(chǔ)知識
1、對象的基本結(jié)構(gòu)
JavaScript中的對象是由屬性(properties)和方法(methods)兩個基本的元素的構(gòu)成的。前者是對象在實施其所需要行為的過程中,實現(xiàn)信息的裝載單位,從而與變量相關(guān)聯(lián);后者是指對象能夠按照設(shè)計者的意圖而被執(zhí)行,從而與特定的函數(shù)相聯(lián)。
2、引用對象的途徑
一個對象要真正地被使用,可采用以下幾種方式獲得:
o 引用JavaScript內(nèi)部對象;
o 由瀏覽器環(huán)境中提供;
o 創(chuàng)建新對象。
這就是說一個對象在被引用之前,這個對象必須存在,否則引用將毫無意義,而出現(xiàn)錯誤信息。從上面中我們可以看出JavaScript引用對象可通過三種方式獲取。要么創(chuàng)建新的對象,要么利用現(xiàn)存的對象。
3、有關(guān)對象操作語句
JavaScript不是一純面向?qū)ο蟮恼Z言,它設(shè)有提供面向?qū)ο笳Z言的許多功能,因此JavaScript設(shè)計者之所以把它你“基于對象”而不是面向?qū)ο蟮恼Z言,在JavaScript中提供了幾個用于操作對象的語句和關(guān)鍵字及運(yùn)算符。
(1) For...in語句
格式如下:
For(對象屬性名 in 已知對象名)
說明:
o 該語句的功能是用于對已知對象的所有屬性進(jìn)行操作的控制循環(huán)。它是將一個已知對象的所有屬性反復(fù)置給一個變量;而不是使用計數(shù)器來實現(xiàn)的。
o 該語句的優(yōu)點(diǎn)就是無需知道對象中屬性的個數(shù)即可進(jìn)行操作。
例:下列函數(shù)是顯示數(shù)組中的內(nèi)容:
該函數(shù)是通過數(shù)組下標(biāo)順序值,來訪問每個對象的屬性,使用這種方式首先必須知道數(shù)組的下標(biāo)值,否則若超出范圍,則就會發(fā)生錯誤。而使For...in語句,則根本不需要知道對象屬性的個數(shù),見下:
使用該函數(shù)時,在循環(huán)體中,F(xiàn)or自動將的屬性取出來,直到最后為此。
(2) with語句
使用該語句的意思是:在該語句體內(nèi),任何對變量的引用被認(rèn)為是這個對象的屬性,以節(jié)省一些代碼。
with object{
...}
所有在with語句后的花括號中的語句,都是在后面object對象的作用域的。
(3) this關(guān)鍵字
this是對當(dāng)前的引用,在JavaScript由于對象的引用是多層次,多方位的,往往一個對象的引用又需要對另一個對象的引用,而另一個對象有可能又要引用另一個對象,這樣有可能造成混亂,最后自己已不知道現(xiàn)在引用的那一個對象,為此JavaScript提供了一個用于將對象指定當(dāng)前對象的語句this。
(4) New運(yùn)算符
雖然在JavaScript中對象的功能已經(jīng)是非常強(qiáng)大的了。但更強(qiáng)大的是設(shè)計人員可以按照需求來創(chuàng)建自己的對象,以滿足某一特定的要求。使用New運(yùn)算符可以創(chuàng)建一個新的對象。其創(chuàng)建對象使用如下格式:
Newobject=NEW Object(Parameters table);
其中Newobject創(chuàng)建的新對象:object是已經(jīng)存在的對象; parameters table參數(shù)表;new是JavaScript中的命令語句。
如創(chuàng)建一個日期新對象
newData=New Data()
birthday=New Data (December 12.1998)
之后就可使NewData、birthday作為一個新的日期對象了。
4、對象屬性的引用
對象屬性的引用可由下列三種方式之一實現(xiàn):
(1)使用點(diǎn)(.)運(yùn)算符
其中university是一個已經(jīng)存在的對象,Name、City、Date是它的三個屬性,并通過操作對其賦值。
(2)通過對象的下標(biāo)實現(xiàn)引用
通過數(shù)組形式的訪問屬性,可以使用循環(huán)操作獲取其值。
若采用For...in則可以不知其屬性的個數(shù)后就可以實現(xiàn):
(3)通過字符串的形式實現(xiàn)
5、對象的方法的引用
在JavaScript中對象方法的引用是非常簡單的。
ObjectName.methods()
實際上methods()=FunctionName方法實質(zhì)上是一個函數(shù)。 如引用university對象中的showmy()方法,則可使用:
document.write (university.showmy())
或:document.write(university)
如引用math內(nèi)部對象中cos()的方法
則:
with(math)
document.write(cos(35));
document.write(cos(80));
若不使用with則引用時相對要復(fù)雜些:
document.write(Math.cos(35))
document.write(math.sin(80))
二、常用對象的屬性和方法
JavaScript為我們提供了一些非常有用的常用內(nèi)部對象和方法。用戶不需要用腳本來實現(xiàn)這些功能。這正是基于對象編程的真正目的。
在JavaScript提供了string(字符串)、math(數(shù)值計算)和Date(日期)三種對象和其它一些相關(guān)的方法。從而為編程人員快速開發(fā)強(qiáng)大的腳本程序提供了非常有利的條件。
1、常用內(nèi)部對象
在JavaScript中對于對象屬性與方法的引用,有兩種情況:其一是說該對象是靜態(tài)對象,即在引用該對象的屬性或方法時不需要為它創(chuàng)建實例;而另一種對象則在引用它的對象或方法是必須為它創(chuàng)建一個實例,即該對象是動態(tài)對象。
對JavaScript內(nèi)部對象的引用,以是緊緊圍繞著它的屬性與方法進(jìn)行的。因而明確對象的靜動性對于掌握和理解JavaScript內(nèi)部對象是具有非常重要的意義。
1)、串對象
o string對象:內(nèi)部靜態(tài)性。
o 訪問properties和methods時,可使用(.)運(yùn)算符實現(xiàn)。
o 基本使用格式:objectName.prop/methods
(1)串對象的屬性
該對象只有一個屬性,即length。它表明了字符串中的字符個數(shù),包括所有符號。
例:
mytest="This is a JavaScript"
mystringlength=mytest.length
最后mystringlength返回mytest字串的長度為20。
(2)串對象的方法
string對象的方法共有19個。主要用于有關(guān)字符串在Web頁面中的顯示、字體大小、字體顏色、字符的搜索以及字符的大小寫轉(zhuǎn)換。
其主要方法如下:
o 錨點(diǎn)anchor():該方法創(chuàng)建如用Html文檔中一樣的anchor標(biāo)記。使用anchor如用Html中(A Name="")一樣。通過下列格式訪問:string.anchor(anchorName)。
o 有關(guān)字符顯示的控制方法
big字體顯示, Italics()斜體字顯示,bold()粗體字顯示,blink()字符閃爍顯示,small()字符用小體字顯示,fixed()固定高亮字顯示、fontsize(size)控制字體大小等。
o 字體顏色方法;fontcolor(color)
o 字符串大小寫轉(zhuǎn)換
toLowerCase()-小寫轉(zhuǎn)換,toUpperCase()大寫轉(zhuǎn)換。下列把一個給定的串分別轉(zhuǎn)換成大寫和小寫格式:
string=stringValue.toUpperCase和string=stringValue.toLowerCase。
o 字符搜索:indexOf[charactor,fromIndex]
從指定formIndtx位置開始搜索charactor第一次出現(xiàn)的位置。
返回字串的一部分字串:substring(start,end)
從start開始到end的字符全部返回。
2)、算術(shù)函數(shù)的math對象
功能:提供除加、減、乘、除以外的一引些自述運(yùn)算。如對數(shù),平方根等 。
靜動性:靜態(tài)對象
(1)主要屬性
math中提供了6個屬性,它們是數(shù)學(xué)中經(jīng)常用到的常數(shù)E、以10為底的自然對數(shù)LN10、以2為底的自然對數(shù)LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根為SQRT2。
(2)主要方法
絕對值:abs()
正弦余弦值:sin(),cos()
反正弦反余弦 :asin(), acos()
正切反正切:tan(),atan()
四舍五入:round()
平方根:sqrt()
基于幾方次的值:Pow(base,exponent)
...
3)、日期及時間對象
功能:提供一個有關(guān)日期和時間的對象。
靜動性:動態(tài)性,即必須使用New運(yùn)算符創(chuàng)建一個實例。例:
MyDate=New Date()
Date對象沒有提供直接訪問的屬性。只具有獲取和設(shè)置日期和時間的方法。
日期起始值:1770年1月1日00:00:00。
1. 獲取日期的時間方法
getYear(): 返回年數(shù)
getMonth():返回當(dāng)月號數(shù)
getDate(): 返回當(dāng)日號數(shù)
getDay():返回星期幾
getHours():返回小時數(shù)
getMintes(:返回分鐘數(shù)
getSeconds():返回秒數(shù)
getTime() : 返回毫秒數(shù)
(2)設(shè)置日期和時間:
setYear();設(shè)置年
setDate():設(shè)置當(dāng)月號數(shù)
setMonth():設(shè)置當(dāng)月份數(shù)
setHours():設(shè)置小時數(shù)
setMintes():設(shè)置分鐘數(shù)
setSeconds():設(shè)置秒數(shù)
setTime ():設(shè)置毫秒數(shù)
...
2、JavaScript中的系統(tǒng)函數(shù)
JavaScript中的系統(tǒng)函數(shù)又稱內(nèi)部方法。它提供了與任何對象無關(guān)的系統(tǒng)函數(shù),使用這些函數(shù)不需創(chuàng)建任何實例,可直接用。
1.返回字符串表達(dá)式中的值:
方法名:eval(字串表達(dá)式),例:
test=eval("8+9+5/2");
2. 返回字符串ASCI碼:
方法名:unEscape (string)
3.返回字符的編碼:
方法名:escape(character)
4.返回實數(shù):
parseFloat(floustring);
5.返回不同進(jìn)制的數(shù):
parseInt(numbestring ,rad.X)
其中radix是數(shù)的進(jìn)制,numbs字符串?dāng)?shù)
三、范例
下面是一個時鐘顯示的JavaScript文檔。在文檔中用了非常多的函數(shù)。
Test4_1.htm
本講介紹了基于對象的JavaScript中常用內(nèi)部對象屬性、方法的使用。
dm520
一、對象的基礎(chǔ)知識
1、對象的基本結(jié)構(gòu)
JavaScript中的對象是由屬性(properties)和方法(methods)兩個基本的元素的構(gòu)成的。前者是對象在實施其所需要行為的過程中,實現(xiàn)信息的裝載單位,從而與變量相關(guān)聯(lián);后者是指對象能夠按照設(shè)計者的意圖而被執(zhí)行,從而與特定的函數(shù)相聯(lián)。
2、引用對象的途徑
一個對象要真正地被使用,可采用以下幾種方式獲得:
o 引用JavaScript內(nèi)部對象;
o 由瀏覽器環(huán)境中提供;
o 創(chuàng)建新對象。
這就是說一個對象在被引用之前,這個對象必須存在,否則引用將毫無意義,而出現(xiàn)錯誤信息。從上面中我們可以看出JavaScript引用對象可通過三種方式獲取。要么創(chuàng)建新的對象,要么利用現(xiàn)存的對象。
3、有關(guān)對象操作語句
JavaScript不是一純面向?qū)ο蟮恼Z言,它設(shè)有提供面向?qū)ο笳Z言的許多功能,因此JavaScript設(shè)計者之所以把它你“基于對象”而不是面向?qū)ο蟮恼Z言,在JavaScript中提供了幾個用于操作對象的語句和關(guān)鍵字及運(yùn)算符。
(1) For...in語句
格式如下:
For(對象屬性名 in 已知對象名)
說明:
o 該語句的功能是用于對已知對象的所有屬性進(jìn)行操作的控制循環(huán)。它是將一個已知對象的所有屬性反復(fù)置給一個變量;而不是使用計數(shù)器來實現(xiàn)的。
o 該語句的優(yōu)點(diǎn)就是無需知道對象中屬性的個數(shù)即可進(jìn)行操作。
例:下列函數(shù)是顯示數(shù)組中的內(nèi)容:
Function showData(object) for (var X=0; X<30;X++) document.write(object[i]); |
Function showData(object) for(var prop in object) document.write(object[prop]); |
(2) with語句
使用該語句的意思是:在該語句體內(nèi),任何對變量的引用被認(rèn)為是這個對象的屬性,以節(jié)省一些代碼。
with object{
...}
所有在with語句后的花括號中的語句,都是在后面object對象的作用域的。
(3) this關(guān)鍵字
this是對當(dāng)前的引用,在JavaScript由于對象的引用是多層次,多方位的,往往一個對象的引用又需要對另一個對象的引用,而另一個對象有可能又要引用另一個對象,這樣有可能造成混亂,最后自己已不知道現(xiàn)在引用的那一個對象,為此JavaScript提供了一個用于將對象指定當(dāng)前對象的語句this。
(4) New運(yùn)算符
雖然在JavaScript中對象的功能已經(jīng)是非常強(qiáng)大的了。但更強(qiáng)大的是設(shè)計人員可以按照需求來創(chuàng)建自己的對象,以滿足某一特定的要求。使用New運(yùn)算符可以創(chuàng)建一個新的對象。其創(chuàng)建對象使用如下格式:
Newobject=NEW Object(Parameters table);
其中Newobject創(chuàng)建的新對象:object是已經(jīng)存在的對象; parameters table參數(shù)表;new是JavaScript中的命令語句。
如創(chuàng)建一個日期新對象
newData=New Data()
birthday=New Data (December 12.1998)
之后就可使NewData、birthday作為一個新的日期對象了。
4、對象屬性的引用
對象屬性的引用可由下列三種方式之一實現(xiàn):
(1)使用點(diǎn)(.)運(yùn)算符
university.Name=“云南省” university.city=“昆明市” university.Date="1999" |
(2)通過對象的下標(biāo)實現(xiàn)引用
university[0]=“云南” university[1]=“昆明市” university[2]="1999" |
function showunievsity(object) for (var j=0;j<2; j++) document.write(object[j]) |
Function showmy(object) for (var prop in this) docament.write(this[prop]); |
university["Name"]=“云南” university["City"]=“昆明市” university["Date"]="1999" |
5、對象的方法的引用
在JavaScript中對象方法的引用是非常簡單的。
ObjectName.methods()
實際上methods()=FunctionName方法實質(zhì)上是一個函數(shù)。 如引用university對象中的showmy()方法,則可使用:
document.write (university.showmy())
或:document.write(university)
如引用math內(nèi)部對象中cos()的方法
則:
with(math)
document.write(cos(35));
document.write(cos(80));
若不使用with則引用時相對要復(fù)雜些:
document.write(Math.cos(35))
document.write(math.sin(80))
二、常用對象的屬性和方法
JavaScript為我們提供了一些非常有用的常用內(nèi)部對象和方法。用戶不需要用腳本來實現(xiàn)這些功能。這正是基于對象編程的真正目的。
在JavaScript提供了string(字符串)、math(數(shù)值計算)和Date(日期)三種對象和其它一些相關(guān)的方法。從而為編程人員快速開發(fā)強(qiáng)大的腳本程序提供了非常有利的條件。
1、常用內(nèi)部對象
在JavaScript中對于對象屬性與方法的引用,有兩種情況:其一是說該對象是靜態(tài)對象,即在引用該對象的屬性或方法時不需要為它創(chuàng)建實例;而另一種對象則在引用它的對象或方法是必須為它創(chuàng)建一個實例,即該對象是動態(tài)對象。
對JavaScript內(nèi)部對象的引用,以是緊緊圍繞著它的屬性與方法進(jìn)行的。因而明確對象的靜動性對于掌握和理解JavaScript內(nèi)部對象是具有非常重要的意義。
1)、串對象
o string對象:內(nèi)部靜態(tài)性。
o 訪問properties和methods時,可使用(.)運(yùn)算符實現(xiàn)。
o 基本使用格式:objectName.prop/methods
(1)串對象的屬性
該對象只有一個屬性,即length。它表明了字符串中的字符個數(shù),包括所有符號。
例:
mytest="This is a JavaScript"
mystringlength=mytest.length
最后mystringlength返回mytest字串的長度為20。
(2)串對象的方法
string對象的方法共有19個。主要用于有關(guān)字符串在Web頁面中的顯示、字體大小、字體顏色、字符的搜索以及字符的大小寫轉(zhuǎn)換。
其主要方法如下:
o 錨點(diǎn)anchor():該方法創(chuàng)建如用Html文檔中一樣的anchor標(biāo)記。使用anchor如用Html中(A Name="")一樣。通過下列格式訪問:string.anchor(anchorName)。
o 有關(guān)字符顯示的控制方法
big字體顯示, Italics()斜體字顯示,bold()粗體字顯示,blink()字符閃爍顯示,small()字符用小體字顯示,fixed()固定高亮字顯示、fontsize(size)控制字體大小等。
o 字體顏色方法;fontcolor(color)
o 字符串大小寫轉(zhuǎn)換
toLowerCase()-小寫轉(zhuǎn)換,toUpperCase()大寫轉(zhuǎn)換。下列把一個給定的串分別轉(zhuǎn)換成大寫和小寫格式:
string=stringValue.toUpperCase和string=stringValue.toLowerCase。
o 字符搜索:indexOf[charactor,fromIndex]
從指定formIndtx位置開始搜索charactor第一次出現(xiàn)的位置。
返回字串的一部分字串:substring(start,end)
從start開始到end的字符全部返回。
2)、算術(shù)函數(shù)的math對象
功能:提供除加、減、乘、除以外的一引些自述運(yùn)算。如對數(shù),平方根等 。
靜動性:靜態(tài)對象
(1)主要屬性
math中提供了6個屬性,它們是數(shù)學(xué)中經(jīng)常用到的常數(shù)E、以10為底的自然對數(shù)LN10、以2為底的自然對數(shù)LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根為SQRT2。
(2)主要方法
絕對值:abs()
正弦余弦值:sin(),cos()
反正弦反余弦 :asin(), acos()
正切反正切:tan(),atan()
四舍五入:round()
平方根:sqrt()
基于幾方次的值:Pow(base,exponent)
...
3)、日期及時間對象
功能:提供一個有關(guān)日期和時間的對象。
靜動性:動態(tài)性,即必須使用New運(yùn)算符創(chuàng)建一個實例。例:
MyDate=New Date()
Date對象沒有提供直接訪問的屬性。只具有獲取和設(shè)置日期和時間的方法。
日期起始值:1770年1月1日00:00:00。
1. 獲取日期的時間方法
getYear(): 返回年數(shù)
getMonth():返回當(dāng)月號數(shù)
getDate(): 返回當(dāng)日號數(shù)
getDay():返回星期幾
getHours():返回小時數(shù)
getMintes(:返回分鐘數(shù)
getSeconds():返回秒數(shù)
getTime() : 返回毫秒數(shù)
(2)設(shè)置日期和時間:
setYear();設(shè)置年
setDate():設(shè)置當(dāng)月號數(shù)
setMonth():設(shè)置當(dāng)月份數(shù)
setHours():設(shè)置小時數(shù)
setMintes():設(shè)置分鐘數(shù)
setSeconds():設(shè)置秒數(shù)
setTime ():設(shè)置毫秒數(shù)
...
2、JavaScript中的系統(tǒng)函數(shù)
JavaScript中的系統(tǒng)函數(shù)又稱內(nèi)部方法。它提供了與任何對象無關(guān)的系統(tǒng)函數(shù),使用這些函數(shù)不需創(chuàng)建任何實例,可直接用。
1.返回字符串表達(dá)式中的值:
方法名:eval(字串表達(dá)式),例:
test=eval("8+9+5/2");
2. 返回字符串ASCI碼:
方法名:unEscape (string)
3.返回字符的編碼:
方法名:escape(character)
4.返回實數(shù):
parseFloat(floustring);
5.返回不同進(jìn)制的數(shù):
parseInt(numbestring ,rad.X)
其中radix是數(shù)的進(jìn)制,numbs字符串?dāng)?shù)
三、范例
下面是一個時鐘顯示的JavaScript文檔。在文檔中用了非常多的函數(shù)。
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> <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> |
dm520