JavaScript編程基礎(chǔ)教學(xué)課件_第1頁
JavaScript編程基礎(chǔ)教學(xué)課件_第2頁
JavaScript編程基礎(chǔ)教學(xué)課件_第3頁
JavaScript編程基礎(chǔ)教學(xué)課件_第4頁
JavaScript編程基礎(chǔ)教學(xué)課件_第5頁
已閱讀5頁,還剩95頁未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

第3章JavaScript編程基礎(chǔ)11一月2023《基于WEB的JAVA開發(fā)設(shè)計》2教學(xué)要求了解js的概念和數(shù)據(jù)類型了解js中使用函數(shù)了解js的表達(dá)式和運(yùn)算符掌握js中變量的使用掌握條件語句、循環(huán)語句的使用掌握js中常用對象重點:js基本語法難點:js對象的使用11一月2023《基于WEB的JAVA開發(fā)設(shè)計》3JavaScript教程語言概況JavaScript是由Nescape公司的LiveScript演變而來。在Sun公司推出Java語言后,Java占據(jù)了服務(wù)器端腳本的編程地位,這時十分需要與之相對應(yīng)的客戶端腳本程序。Nescape公司和Sun公司一起在1995年重新設(shè)計了LiveScript,并改名為JavaScript。JavaScript是Web頁面中的一種腳本編程語言,它可以用于Web系統(tǒng)的在客戶端的編程。嵌入到HTML文檔中的JavaScript腳本程序由客戶端進(jìn)行解釋并執(zhí)行,可以獲得交互效果和其它的動態(tài)效果。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》4JavaScript幾個基本特點腳本編寫語言

基于對象的語言

簡單性

安全性

動態(tài)性

跨平臺性

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》5JavaScript和Java的區(qū)別雖然JavaScript與Java有緊密的聯(lián)系,但卻是兩個公司開發(fā)的不同的兩個產(chǎn)品。Java是SUN公司推出的新一代面向?qū)ο蟮某绦蛟O(shè)計語言,特別適合于Internet應(yīng)用程序開發(fā);JavaScript是Netscape公司的產(chǎn)品,其目的是為了擴(kuò)展NetscapeNavigator功能,而開發(fā)的一種可以嵌入Web頁面中的基于對象和事件驅(qū)動的解釋性語言,它的前身是LiveScript;Java的前身是Oak語言。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》6基于對象和面向?qū)ο?/p>

Java是一種真正的面向?qū)ο蟮恼Z言,即使是開發(fā)簡單的程序,必須設(shè)計對象。JavaScript是種腳本語言,它可以用來制作與網(wǎng)絡(luò)無關(guān)的,與用戶交互作用的復(fù)雜軟件。它是一種基于對象(ObjectBased)和事件驅(qū)動(EventDriver)的編程語言。因而它本身提供了非常豐富的內(nèi)部對象供設(shè)計人員使用。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》7解釋和編譯

兩種語言在其瀏覽器中所執(zhí)行的方式不一樣。Java的源代碼在傳遞到客戶端執(zhí)行之前,必須經(jīng)過編譯,因而客戶端上必須具有相應(yīng)平臺上的仿真器或解釋器,它可以通過編譯器或解釋器實現(xiàn)獨(dú)立于某個特定的平臺編譯代碼的束縛。JavaScript是一種解釋性編程語言,其源代碼在發(fā)往客戶端執(zhí)行之前不需經(jīng)過編譯,而是將文本格式的字符代碼發(fā)送給客戶編由瀏覽器解釋執(zhí)行。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》8強(qiáng)變量和弱變量

兩種語言所采取的變量是不一樣的。Java采用強(qiáng)類型變量檢查,即所有變量在編譯之前必須作聲明。如:

Integerx;

Stringy;

x=1234;

x=4321;

其中X=1234說明是一個整數(shù),Y=4321說明是一個字符串。JavaScript中變量聲明,采用其弱類型。即變量在使用前不需作聲明,而是解釋器在運(yùn)行時檢查其數(shù)據(jù)類型,如:

x=1234;

y="4321";

前者說明x為其數(shù)值型變量,而后者說明y為字符型變量。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》9代碼格式不一樣

Java是一種與HTML無關(guān)的格式,必須通過像HTML中引用外媒體那么進(jìn)行裝載,其代碼以字節(jié)代碼的形式保存在獨(dú)立的文檔中。JavaScript的代碼是一種文本字符格式,可以直接嵌入HTML文檔中,并且可動態(tài)裝載。編寫HTML文檔就像編輯文本文件一樣方便。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》10嵌入方式不一樣

在HTML文檔中,兩種編程語言的標(biāo)識不同,JavaScript使用<Script>...</Script>來標(biāo)識Java使用<applet>...</applet>來標(biāo)識。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》11編寫第一個JavaScript程序<html>

<head>

<ScriptLanguage="JavaScript">

//JavaScriptAppearshere.

alert("這是第一個JavaScript例子!");

alert("歡迎你進(jìn)入JavaScript世界!");

alert("今后我們將共同學(xué)習(xí)JavaScript知識!");

</Script>

</Head>

</Html>11一月2023《基于WEB的JAVA開發(fā)設(shè)計》12編寫第一個JavaScript程序JavaScript代碼由<ScriptLanguage="JavaScript">...</Script>說明。在標(biāo)識<ScriptLanguage="JavaScript">...</Script>之間就可加入JavaScript腳本。

alert()是JavaScript的窗口對象方法,其功能是彈出一個具有OK對話框并顯示()中的字符串。

<!--...//-->標(biāo)識:若不認(rèn)識JavaScript代碼的瀏覽器,則所有在其中的標(biāo)識均被忽略;若認(rèn)識,則執(zhí)行其結(jié)果。使用注釋這是一個好的編程習(xí)慣,它使其他人可以讀懂你的語言。

JavaScript以</Script>標(biāo)簽結(jié)束。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》13JavaScript基本數(shù)據(jù)結(jié)構(gòu)

JavaScript提供腳本語言的編程與C++非常相似,它只是去掉了C語言中有關(guān)指針等容易產(chǎn)生的錯誤,并提供了功能強(qiáng)大的類庫。對于已經(jīng)具備C++或C語言的人來說,學(xué)習(xí)JavaScript腳本語言是一件非常輕松愉快的事。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》14JavaScript代碼的加入可以直接將JavaScript腳本加入文檔<ScriptLanguage="JavaScript">

JavaScript語言代碼;

JavaScript語言代碼;

....

</Script>說明:通過標(biāo)識<Script>...</Script>指明JavaScript腳本源代碼將放入其間。

通過屬性Language="JavaScript"說明標(biāo)識中是使用的何種語言,這里是JavaScript語言,表示在JavaScript中使用的語言。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》15基本數(shù)據(jù)類型基本數(shù)據(jù)類型常量變量11一月2023《基于WEB的JAVA開發(fā)設(shè)計》16基本數(shù)據(jù)類型在JavaScript中四種基本的數(shù)據(jù)類型:數(shù)值(整數(shù)和實數(shù))、字符串型(用“”號或‘’括起來的字符或數(shù)值)、布爾型(使True或False表示)和空值.11一月2023《基于WEB的JAVA開發(fā)設(shè)計》17常量整型常量實型常量布爾值字符型常量空值11一月2023《基于WEB的JAVA開發(fā)設(shè)計》18表達(dá)式在定義完變量后,就可以對它們進(jìn)行賦值、改變、計算等一系列操作,這一過程通常又叫稱一個叫表達(dá)式來完成,可以說它是變量、常量、布爾及運(yùn)算符的集合,因此表達(dá)式可以分為算術(shù)表達(dá)式、字串表達(dá)式、賦值表達(dá)式以及布爾表達(dá)式等。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》19運(yùn)算符算術(shù)運(yùn)算符比較運(yùn)算符布爾邏輯運(yùn)算符11一月2023《基于WEB的JAVA開發(fā)設(shè)計》20算術(shù)運(yùn)算符JavaScript中的算術(shù)運(yùn)算符有單目運(yùn)算符和雙目運(yùn)算符。

雙目運(yùn)算符:

+(加)、-(減)、*(乘)、/(除)、%(取模)、|(按位或)、&(按位與)、<<(左移)、>>(右移)、>>>(右移,零填充)。

單目運(yùn)算符:

-(取反)、~(取補(bǔ))、++(遞加1)、--(遞減1)。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》21比較運(yùn)算符比較運(yùn)算符它的基本操作過程是,首先對它的操作數(shù)進(jìn)行比較,爾后再返回一個true或False值,有8個比較運(yùn)算符:

<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》22布爾邏輯運(yùn)算符在JavaScript中增加了幾個布爾邏輯運(yùn)算符:

!(取反)、&=(與之后賦值)、&(邏輯與)、|=(或之后賦值)、|(邏輯或)、^=(異或之后賦值)、^(邏輯異或)、?:(三目操作符)、||(或)、==(等于)、|=(不等于)。

其中三目操作符主要格式如下:

操作數(shù)?結(jié)果1:結(jié)果2

若操作數(shù)的結(jié)果為真,則表述式的結(jié)果為結(jié)果1,否則為結(jié)果2。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》23一個跑馬燈效果的JavaScript文檔。<html>

<head>

<scriptLanguage="JavaScript">

varmsg="這是一個跑馬燈效果的JavaScript文檔";

varinterval=100;

varspacelen=120;

varspace10="";

varseq=0;

functionScroll(){

len=msg.length;

window.status=msg.substring(0,seq+1);

seq++;

if(seq>=len){

seq=spacelen;

window.setTimeout("Scroll2();",interval);

}

else

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》24一個跑馬燈效果的JavaScript文檔window.setTimeout("Scroll();",interval);

}

functionScroll2(){

varout="";

for(i=1;i<=spacelen/space10.length;i++)out+=

space10;

out=out+msg;

len=out.length;

window.status=out.substring(seq,len);

seq++;

if(seq>=len){seq=0;};

window.setTimeout("Scroll2();",interval);

}

Scroll();

</script>

<body>

</body>

</html>11一月2023《基于WEB的JAVA開發(fā)設(shè)計》25JavaScript程序構(gòu)成

控制語句函數(shù)對象方法屬性11一月2023《基于WEB的JAVA開發(fā)設(shè)計》26if條件語句基本格式

if(表述式)

語句段1;

......

else

語句段2;

.....

功能:若表達(dá)式為true,則執(zhí)行語句段1;否則執(zhí)行語句段2。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》27if語句的嵌套if(布爾值)語句1;

else(布爾值)語句2;

elseif(布爾值)語句3;

……

else語句4;

在這種情況下,每一級的布爾表述式都會被計算,若為真,則執(zhí)行其相應(yīng)的語句,否則執(zhí)行else后的語句。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》28For循環(huán)語句基本格式

for(初始化;條件;增量)

語句集;

功能:實現(xiàn)條件循環(huán),當(dāng)條件成立時,執(zhí)行語句集,否則跳出循環(huán)體。

說明:

初始化參數(shù)告訴循環(huán)的開始位置,必須賦予變量的初值;

條件:是用于判別循環(huán)停止時的條件。若條件滿足,則執(zhí)行循環(huán)體,否則跳出。

增量:主要定義循環(huán)控制變量在每次循環(huán)時按什么方式變化。

三個主要語句之間,必須使用逗號分隔。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》29while循環(huán)基本格式

while(條件)

語句集;

該語句與For語句一樣,當(dāng)條件為真時,重復(fù)循環(huán),否則退出循環(huán)。

For與while語句

兩種語句都是循環(huán)語句,使用For語句在處理有關(guān)數(shù)字時更易看懂,也較緊湊;而while循環(huán)對復(fù)雜的語句效果更特別。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》30break和continue語句與C++語言相同,使用break語句使得循環(huán)從For或while中跳出,continue使得跳過循環(huán)內(nèi)剩余的語句而進(jìn)入下一次循環(huán)。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》31函數(shù)函數(shù)為程序設(shè)計人員提供了一個豐常方便的能力。通常在進(jìn)行一個復(fù)雜的程序設(shè)計時,總是根據(jù)所要完成的功能,將程序劃分為一些相對獨(dú)立的部分,每部分編寫一個函數(shù)。從而,使各部分充分獨(dú)立,任務(wù)單一,程序清晰,易懂、易讀、易維護(hù)。JavaScript函數(shù)可以封裝那些在程序中可能要多次用到的模塊。并可作為事件驅(qū)動的結(jié)果而調(diào)用的程序。從而實現(xiàn)一個函數(shù)把它與事件驅(qū)動相關(guān)聯(lián)。這是與其它語言不樣的地方。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》32JavaScript函數(shù)定義Function函數(shù)名(參數(shù)){

函數(shù)體;.

Return表達(dá)式;

}

說明:

函數(shù)由關(guān)鍵字Function定義。

函數(shù)名:定義自己函數(shù)的名字。

參數(shù)表,是傳遞給函數(shù)使用或操作的值,其值可以是常量,變量或其它表達(dá)式。

通過指定函數(shù)名(實參)來調(diào)用一個函數(shù)。

必須使用Return將值返回。

函數(shù)名對大小寫是敏感的。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》33函數(shù)中的形式參數(shù)在函數(shù)的定義中,我們看到函數(shù)名后有參數(shù)表,這些參數(shù)變量可能是一個或幾個。那么怎樣才能確定參數(shù)變量的個數(shù)呢?在JavaScript中可通過arguments.Length來檢查參數(shù)的個數(shù)。

例:

Functionfunction_Name(exp1,exp2,exp3,exp4)

Number=function_Name.arguments.length;

if(Number>1)

document.wrile(exp2);

if(Number>2)

document.write(exp3);

if(Number>3)

document.write(exp4);

...11一月2023《基于WEB的JAVA開發(fā)設(shè)計》34事件驅(qū)動及事件處理JavaScript是基于對象(object-based)的語言。這與Java不同,Java是面向?qū)ο蟮恼Z言。而基于對象的基本特征,就是采用事件驅(qū)動(event-driven)。它是在圖形界面的環(huán)境下,使得一切輸入變化簡單化。通常鼠標(biāo)或熱鍵的動作我們稱之為事件(Event),而由鼠標(biāo)或熱鍵引發(fā)的一連串程序的動作,稱之為事件驅(qū)動(EventDriver)。而對事件進(jìn)行處理程序或函數(shù),我們稱之為事件處理程序(EventHandler)。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》35事件處理程序在JavaScript中對象事件的處理通常由函數(shù)(Function)擔(dān)任。其基本格式與函數(shù)全部一樣,可以將前面所介紹的所有函數(shù)作為事件處理程序。

格式如下:

Function事件處理名(參數(shù)表){

事件處理語句集;

……

}11一月2023《基于WEB的JAVA開發(fā)設(shè)計》36主要有以下幾個事件單擊事件onClickonChange改變事件選中事件onSelect獲得焦點事件onFocus失去焦點onBlur載入文件onLoad卸載文件onUnload11一月2023《基于WEB的JAVA開發(fā)設(shè)計》37范例1<HTML>

<HEAD>

<scriptLanguage="JavaScript">

<!--

functionloadform(){

alert("這是一個自動裝載例子!");

}

functionunloadform(){

alert("這是一個卸載例子!");

}

//-->

</Script>

</HEAD>

<BODYOnLoad="loadform()"OnUnload="unloadform()">

<ahref="test.htm">調(diào)用</a>

</BODY>

</HTML>

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》38范例2<html>

<head>

<scriptlanguage="JavaScript"><!--

//-->

functionmakeArray(n){

this.length=n

returnthis

}

functionhexfromdec(num){

hex=newmakeArray(1);

varhexstring="";

varshifthex=16;

vartemp1=num;

for(x=1;x>=0;x--){

hex[x]=Math.round(temp1/shifthex-.5);

hex[x-1]=temp1-hex[x]*shifthex;

temp1=hex[x-1];

shifthex/=16;

}

for(x=1;x>=0;x--){hexstring+=getletter(hex[x]);}

return(hexstring);

}

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》39范例2functiongetletter(num){

if(num<10){returnnum;}

else{

if(num==10){return"A"}

if(num==11){return"B"}

if(num==12){return"C"}

if(num==13){return"D"}

if(num==14){return"E"}

if(num==15){return"F"}

}

}

functionrainbow(text){

varcolor_d1;

varallstring="";

for(i=0;i<text.length;i=i+2){

color_d1=255*Math.sin(i/(text.length/3));

color_h1=hexfromdec(color_d1);

allstring+="<FONTCOLOR="+color_h1+"ff"+color_h1+">"+text.substring(i,i+2)+"</FONT>";

}

returnallstring;

}

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》40范例2functionsizefont(text){

varcolor_d1;

varallstring="";

varflag=0;

for(i=0,j=0;i<text.length;i=i+1){

if(flag==0){

j++;

if(j>=7){

flag=1;}}

if(flag==1){

j=j-1;

if(j<=0){

flag=0;}}

allstring+="<FONTSIZE="+j+">"+text.substring(i,i+1)+"</FONT>";

}

returnallstring;

}

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》41范例2document.write("<fontsize=8><CENTER>")

document.write("<BR><BR>")

document.write(sizefont("這是一個獲取WEB瀏覽器的程序"))

document.write("</CENTER></font>")

document.write("瀏覽器名稱:"+navigator.appName+"<br>");

document.write("版本號:"+navigator.appVersion+"<br>");

document.write("代碼名字:"+navigator.appCodeName+"<br>");

document.write("用戶代理標(biāo)識:"+navigator.userAgent);

</script>

<body>

</body>

</html>

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》42范例2輸出結(jié)果圖1所示11一月2023《基于WEB的JAVA開發(fā)設(shè)計》43基于對象的JavaScript語言

JavaScript語言是基于對象的(Object-Based),而不是面向?qū)ο蟮模╫bject-oriented)。之所以說它是一門基于對象的語言,主要是因為它沒有提供象抽象、繼承、重載等有關(guān)面向?qū)ο笳Z言的許多功能。而是把其它語言所創(chuàng)建的復(fù)雜對象統(tǒng)一起來,從而形成一個非常強(qiáng)大的對象系統(tǒng)。雖然JavaScript語言是一門基于對象的,但它還是具有一些面向?qū)ο蟮幕咎卣?。它可以根?jù)需要創(chuàng)建自己的對象,從而進(jìn)一步擴(kuò)大JavaScript的應(yīng)用范圍,增強(qiáng)編寫功能強(qiáng)大的Web文檔。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》44對象的基礎(chǔ)知識對象的基本結(jié)構(gòu)引用對象的途徑有關(guān)對象操作語句對象屬性的引用對象的方法的引用11一月2023《基于WEB的JAVA開發(fā)設(shè)計》45對象的基本結(jié)構(gòu)JavaScript中的對象是由屬性(properties)和方法(methods)兩個基本的元素的構(gòu)成的。前者是對象在實施其所需要行為的過程中,實現(xiàn)信息的裝載單位,從而與變量相關(guān)聯(lián);后者是指對象能夠按照設(shè)計者的意圖而被執(zhí)行,從而與特定的函數(shù)相聯(lián)。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》46引用對象的途徑一個對象要真正地被使用,可采用以下幾種方式:1.引用JavaScript內(nèi)部對象;2.由瀏覽器環(huán)境中提供3.創(chuàng)建新對象。這就是說一個對象在被引用之前,這個對象必須存在,否則引用將毫無意義,而出現(xiàn)錯誤信息。從上面中我們可以看出JavaScript引用對象可通過三種方式獲取。要么創(chuàng)建新的對象,要么利用現(xiàn)存的對象。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》47有關(guān)對象操作語句For...in語句with語句this關(guān)鍵字New運(yùn)算符11一月2023《基于WEB的JAVA開發(fā)設(shè)計》48For...in語句格式如下:

For(對象屬性名in已知對象名)

說明:

1.該語句的功能是用于對已知對象的所有屬性進(jìn)行操作的控制循環(huán)。它是將一個已知對象的所有屬性反復(fù)置給一個變量;而不是使用計數(shù)器來實現(xiàn)的。

2.該語句的優(yōu)點就是無需知道對象中屬性的個數(shù)即可進(jìn)行操作。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》49例:下列函數(shù)是顯示數(shù)組中的內(nèi)容:

FunctionshowData(object)

for(varX=0;X<30;X++)

document.write(object[i]);

該函數(shù)是通過數(shù)組下標(biāo)順序值,來訪問每個對象的屬性,使用這種方式首先必須知道數(shù)組的下標(biāo)值,否則若超出范圍,則就會發(fā)生錯誤。而使For...in語句,則根本不需要知道對象屬性的個數(shù),見下:

FunctionshowData(object)

for(varpropinobject)

document.write(object[prop]);

使用該函數(shù)時,在循環(huán)體中,F(xiàn)or自動將的屬性取出來,直到最后為此。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》50with語句使用該語句的意思是:在該語句體內(nèi),任何對變量的引用被認(rèn)為是這個對象的屬性,以節(jié)省一些代碼。

withobject{

...}

所有在with語句后的花括號中的語句,都是在后面object對象的作用域的。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》51this關(guān)鍵字this是對當(dāng)前的引用,在JavaScript由于對象的引用是多層次,多方位的,往往一個對象的引用又需要對另一個對象的引用,而另一個對象有可能又要引用另一個對象,這樣有可能造成混亂,最后自己已不知道現(xiàn)在引用的那一個對象,為此JavaScript提供了一個用于將對象指定為當(dāng)前對象的語句this。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》52New運(yùn)算符使用New運(yùn)算符可以創(chuàng)建一個新的對象。其創(chuàng)建對象使用如下格式:

Newobject=NEWObject(Parameterstable);

其中Newobject創(chuàng)建的新對象:object是已經(jīng)存在的對象;parameterstable參數(shù)表;new是JavaScript中的命令語句。如創(chuàng)建一個日期新對象

newData=NewData()

birthday=NewData(December12.1998)

之后就可使NewData、birthday作為一個新的日期對象了。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》53對象屬性的引用使用點(.)運(yùn)算符:university.Name=“廣西”通過對象的下標(biāo)實現(xiàn)引用:university[0]=“廣西”通過字符串的形式實現(xiàn):university["Name"]=“廣西”11一月2023《基于WEB的JAVA開發(fā)設(shè)計》54對象的方法的引用在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))11一月2023《基于WEB的JAVA開發(fā)設(shè)計》55常用對象的屬性和方法JavaScript為我們提供了一些非常有用的常用內(nèi)部對象和方法。用戶不需要用腳本來實現(xiàn)這些功能。這正是基于對象編程的真正目的。在JavaScript提供了string(字符串)、math(數(shù)值計算)和Date(日期)三種對象和其它一些相關(guān)的方法。從而為編程人員快速開發(fā)強(qiáng)大的腳本程序提供了非常有利的條件。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》56常用內(nèi)部對象在JavaScript中對于對象屬性與方法的引用,有兩種情況:其一是說該對象是靜態(tài)對象,即在引用該對象的屬性或方法時不需要為它創(chuàng)建實例;而另一種對象則在引用它的對象或方法是必須為它創(chuàng)建一個實例,即該對象是動態(tài)對象。

對JavaScript內(nèi)部對象的引用,以是緊緊圍繞著它的屬性與方法進(jìn)行的。因而明確對象的靜動性對于掌握和理解JavaScript內(nèi)部對象是具有非常重要的意義。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》57串對象string對象:內(nèi)部靜態(tài)性。

訪問properties和methods時,可使用(.)運(yùn)算符實現(xiàn)。

基本使用格式:objectNp/methods

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》58串對象的屬性string對象只有一個屬性,即length。它表明了字符串中的字符個數(shù),包括所有符號。

例:

mytest="ThisisaJavaScript"

mystringlength=mytest.length

最后mystringlength返回mytest字串的長度為20。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》59串對象的方法string對象的方法共有19個。主要用于有關(guān)字符串在Web頁面中的顯示、字體大小、字體顏色、字符的搜索以及字符的大小寫轉(zhuǎn)換。

其主要方法如下:

o錨點anchor():該方法創(chuàng)建如用Html文檔中一樣的anchor標(biāo)記。使用anchor如用Html中(AName="")一樣。通過下列格式訪問:string.anchor(anchorName)。

o有關(guān)字符顯示的控制方法

big字體顯示,Italics()斜體字顯示,bold()粗體字顯示,blink()字符閃爍顯示,small()字符用小體字顯示,fixed()固定高亮字顯示、fontsize(size)控制字體大小等。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》60o字體顏色方法;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的字符全部返回。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》61算術(shù)函數(shù)的math對象功能:提供除加、減、乘、除以外的一引些自述運(yùn)算。如對數(shù),平方根等。靜動性:靜態(tài)對象主要屬性:math中提供了6個屬性,它們是數(shù)學(xué)中經(jīng)常用到的常數(shù)E、以10為底的自然對數(shù)LN10、以2為底的自然對數(shù)LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根為SQRT2。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》62算術(shù)函數(shù)的math對象主要方法: 絕對值:abs()

正弦余弦值:sin(),cos()

反正弦反余弦:asin(),acos()

正切反正切:tan(),atan()

四舍五入:round()

平方根:sqrt()

基于幾方次的值:Pow(base,exponent)

...

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》63日期及時間對象功能:提供一個有關(guān)日期和時間的對象。靜動性:動態(tài)性,即必須使用New運(yùn)算符創(chuàng)建一個實例。例:

MyDate=NewDate()

Date對象沒有提供直接訪問的屬性。只具有獲取和設(shè)置日期和時間的方法。

日期起始值:1770年1月1日00:00:00。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》64獲取日期的時間方法

getYear():返回年數(shù)

getMonth():返回當(dāng)月號數(shù)

getDate():返回當(dāng)日號數(shù)

getDay():返回星期幾

getHours():返回小時數(shù)

getMintes(:返回分鐘數(shù)

getSeconds():返回秒數(shù)

getTime():返回毫秒數(shù)11一月2023《基于WEB的JAVA開發(fā)設(shè)計》65設(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ù)11一月2023《基于WEB的JAVA開發(fā)設(shè)計》66JavaScript中的系統(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,radiX)

其中radix是數(shù)的進(jìn)制,numbs字符串?dāng)?shù)11一月2023《基于WEB的JAVA開發(fā)設(shè)計》67在JavaScript中創(chuàng)建新對象

使用JavaScript可以創(chuàng)建自己的對象。雖然JavaScript內(nèi)部和瀏覽器本身的功能已十分強(qiáng)大,但JavaScript還是提供了創(chuàng)建一個新對象的方法。使其不必像超文本標(biāo)識語言那樣,求于或其它多媒體工具,就能完成許多復(fù)雜的工作。

在JavaScript中創(chuàng)建一個新的對象是十分簡單的。首先它必須定義一個對象,而后再為該對象創(chuàng)建一個實例。這個實例就是一個新對象,它具有對象定義中的基本特征。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》68對象的定義JavaScript對象的定義,其基本格式如下:

FunctionObject(屬性表)

Tp1=prop1

Tp2=prop2

...

This.meth=FunctionName1;

This.meth=FunctionName2;

...

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》69在一個對象的定義中,可以為該對象指明其屬性和方法。通過屬性和方法構(gòu)成了一個對象的實例。如以下是一個關(guān)于University對象的定義:

Functionuniversity(name,city,creatDateURL)

T=name

This.city=city

This.creatDate=NewDate(creatDate)

This.URL=URL

其基本含義如下:

Name-指定一個“單位”名稱。

City-“單位”所在城市。

CreatDate-記載university對象的更新日期。

URL-該對象指向一個網(wǎng)址。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》70創(chuàng)建對象實例一旦對象定義完成后,就可以為該對象創(chuàng)建一個實例了:

NewObject=Newobject();

其中Newobjet是新的對象,Object已經(jīng)定義好的對象。例:

U1=Newuniversity(“云南省”,“昆明市”,"January05,199712:00:00","http://www.YN.KM")

U2=Newuniversity(“云南電子科技大學(xué)”,“昆明”,"January07,199712:00:00","htlp://www.YNKJ.CN")

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》71對象方法的使用在對象中除了使用屬性外,有時還需要使用方法。在對象的定義中,我們看到This.meth=FunctionName語句,那就是為定義對象的方法。實質(zhì)對象的方法就是一個函數(shù)FunctionName,通過它實現(xiàn)自己的意圖例在university對象中增加一個方法,該方法是顯示它自己本身,并返回相應(yīng)的字串。

…..

This.showuniversity=showuniversity;

其中This.showuniversity就是定義了一個方法---showuniversity()。

而showuniversity()方法是實現(xiàn)university對象本身的顯示。

functionshowuniversity()

For(varpropinthis)

alert(prop+="+this[prop]+"");

其中alert是JavaScript中的內(nèi)部函數(shù),顯示其字符串。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》72JavaScript中的數(shù)組使用New創(chuàng)建數(shù)組

JavaScript中沒有提供像其它語言具有明顯的數(shù)組類型,但可以通過function定義一個數(shù)組,并使用New對象操作符創(chuàng)建一個具有下標(biāo)的數(shù)組。從而可以實現(xiàn)任何數(shù)據(jù)類型的存儲。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》73定義對象的數(shù)組FunctionarrayName(size){

This.length=Size;

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

this[X]=0;

Returethis;

}

其中arrayName是定義數(shù)組的一個名子,Size是有關(guān)數(shù)組大小的值(1-size),即數(shù)組元素的個數(shù)。通過for循環(huán)對一個當(dāng)前對象的數(shù)組進(jìn)行定義,最后返回這個數(shù)組。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》74創(chuàng)建數(shù)組實例一個數(shù)組定義完成以后,還不能馬上使用,必須為該數(shù)組創(chuàng)建一個數(shù)組實例:

Myarray=NewarrayName(n);

并賦于初值:

Myarray[1]=“字串1”;

Myarray[2]=“字串2”;

Myarray[3]=“字串3”;

...

Myarray[n]=“字串n”;

一旦給數(shù)組賦于了初值后,數(shù)組中就具有真正意義的數(shù)據(jù)了,以后就可以在程序設(shè)計過程中直接引用。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》75創(chuàng)建多維數(shù)組FunctioncreatMArray(row,col){

varindx=0;

this.length=(row*10)+col

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

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

indx=(x*10)+y;

this[indx]=””;

}

myMArray=newcreatMArray();

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

…來引用。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》76內(nèi)部數(shù)組在JS中為了方便內(nèi)部對象的操作,可以使用窗體(Forms)、框架(Frames)、元素(element)、鏈接(links)和錨(Anchors)數(shù)組實現(xiàn)對象的訪問。anchors[]:使用<Aname=“anchorName“>標(biāo)識來建立錨的鏈接。links[]:使用<Ahref=”URL”>來定義一個超文本鏈接項。Forms[]:在程序中使用多窗體時,建立該數(shù)組。它是通過<formname=“form1”>所指定的Elements[]:在一個窗口中使用從個元素時,建立該數(shù)組。Frames[]:建立框架時,使用該數(shù)組11一月2023《基于WEB的JAVA開發(fā)設(shè)計》77JavaScript對象系統(tǒng)的使用

使用瀏覽器的內(nèi)部對象系統(tǒng),可實現(xiàn)與HTML文檔進(jìn)行交互。它的作用是將相關(guān)元素組織包裝起來,提供給程序設(shè)計人員使用,從而減輕編程人的勞動,提高設(shè)計Web頁面的能力。編程人員利用這些對象,可以對WWW瀏覽器環(huán)境中的事件進(jìn)行控制并作出處理。在JavaScript中提供了非常豐富的內(nèi)部方法和屬性,從而減輕了編程人員的工作,提高編程效率11一月2023《基于WEB的JAVA開發(fā)設(shè)計》78JavaScript對象系統(tǒng)

瀏覽器對象(Navigator)窗口對象(Window)文檔對象(Document)位置對象(Location)歷史對象(History)在這些對象系統(tǒng)中,文檔對象非常重要,它位于最低層,但對于我們實現(xiàn)Web頁面信息交互起作關(guān)鍵作用。因而它是對象系統(tǒng)的核心部分。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》79document對象的主要作用LinksAnchorFormMethodProp鏈接對象錨對象窗體對象方法對象document對象的主要作用就是把這些基本的元素(如links,anchor等)包裝起來,提供給編程人員使用。從另一個角度看,document對象中又是由屬性和方法組成。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》80文檔對象的基本元素(1)窗體屬性:forms

窗體屬性是與HTML文檔中<Form>...</Form>相對應(yīng)的一組對象在HTML文檔所創(chuàng)建的窗體數(shù),由length指定。通過document.forms.length反映該文檔中所創(chuàng)建的窗體數(shù)目。

(2)錨屬性:anchors

該屬性中,包含了HTML文檔的所有<A></A>標(biāo)記為Name=...的語句標(biāo)識。所有“錨”的數(shù)目保存在document.anchors.length中。

(3)鏈接屬性:links

鏈接屬性是指在文檔中<A>...</A>的由Href=...指定的數(shù)目,其鏈接數(shù)目保存在document.links.length中。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》81JavaScript窗口及輸入輸出

JavaScript是基于對象的腳本編程語言,那么它的輸入輸出就是通過對象來完成的。其中有關(guān)輸入可通過窗口(Window)對象來完成,而輸出可通過文檔(document)對象的方法來實現(xiàn)。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》82窗口及輸入輸出請看下面例子:

<HTML>

<Head>

<scriptlanguaga="JavaScript">

Vartest=mpt("請輸入數(shù)據(jù):");

document.write(test+"JavaScript輸入輸出的例子");

</script>

</Head>

</HTML>

其中mpt()就是一個窗口對象的方法,其基本作用是,當(dāng)裝入Web頁面時在屏幕上顯示一個具有“確定”和“取消”的對話框,讓你輸出數(shù)據(jù)。document.writle是一個文檔對象的方法,它的基本功能,是實現(xiàn)Web頁面的輸出顯示。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》83窗口對象該對象包括許多有用的屬性、方法和事件驅(qū)動程序,編程人員可以利用這些對象控制瀏覽器窗口顯示的各個方面,如對話框、框架等。在使用應(yīng)注意以下幾點:

該對象對應(yīng)于HTML文檔中的<Body>和<FrameSet>兩種標(biāo)識;

onload和onunload都是窗口對象屬性;

在JavaScript腳本中可直接引用窗口對象。如:

window.alert("窗口對象輸入方法")

可直接使用以下格式:

alert("窗口對象輸入方法")

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》84窗口對象的事件驅(qū)動窗口對象主要有裝入Web文檔事件onload和卸載時onunload事件。用于文檔載入和停止載入時開始和停止更新文檔。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》85窗口對象的方法窗口對象的方法主要用來提供信息或輸入數(shù)據(jù)以及創(chuàng)建一個新的窗口。創(chuàng)建一個新窗口open()

使用window.open(參數(shù)表)方法可以創(chuàng)建一個新的窗口。其中參數(shù)表提供有窗口的主要特性和文檔及窗口的命名。具有OK按鈕的對話框

alert()方法能創(chuàng)建一個具有OK按鈕的對話框。具有OK和Cancel按鈕的對話框

confirm()方法為編程人員提供一個具有兩個按鈕的對話框。具有輸入信息的對話框

prompt()方法允許用戶在對話框中輸入信息,并可使用默認(rèn)值,其基本格式如下prompt(“提示信息”,默認(rèn)值)。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》86窗口對象中的屬性窗口對象中的屬性主要用來對瀏覽器中存在的各種窗口和框架的引用,其主要屬性有以下幾個:

(1)frames確文檔中幀的數(shù)目

frames(幀)作為實現(xiàn)一個窗口的分隔操作,起到非常有用的作用,在使用注意以下幾點:

frames屬性是通過HTML標(biāo)識<Frames>的順序來引用的,它包含了一個窗口中的全部幀數(shù)。

幀本身已是一類窗口,繼承了窗口對象所有的全部屬性和方法。

(2)Parent指明當(dāng)前窗口或幀的父窗口。

(3)defaultstatus:默認(rèn)狀態(tài),它的值顯示在窗口的狀態(tài)欄中。

(4)status:包含文檔窗口中幀中的當(dāng)前信息。

(5)top:包括的是用以實現(xiàn)所有的下級窗口的窗口。

(6)window.指的是當(dāng)前窗口

(7)self:引用當(dāng)前窗口。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》87輸出流及文檔對象在JavaScript文檔對象中,提供了用于顯示關(guān)閉、消除、打開HTML頁面的輸出流。創(chuàng)建新文檔open()方法write()、writeln()輸出顯示關(guān)閉文檔流close()清除文檔內(nèi)容clear()11一月2023《基于WEB的JAVA開發(fā)設(shè)計》88簡單的輸入、輸出例子輸入:Wmpt("提示信",預(yù)定輸入信息);輸出:document.write()方法和document.writeln()方法

說明:

write()和writeln()方法都是用于向瀏覽器窗口輸出文本字串;

二者的唯一區(qū)別就是writeln()方法自動在文本之后加入回車符。window.alert()輸出,在JavaScript為了方便信息輸出,JavaScript提供了具有獨(dú)立的對話框信息輸出─alert()方法。

11一月2023《基于WEB的JAVA開發(fā)設(shè)計》89利用輸入、輸出方法實現(xiàn)交互<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

<ScriptLanguage="JavaScript">

<!--HideFromOtherBrowsers

document.write("<H1>有關(guān)交互的例子");

my=prompt("請輸入數(shù)據(jù):");

document.write(my+"</H1>");

document.close();

//StopHidingfromOtherBrowsers-->

</Script>

</BODY>

</HTML>

從上面程序可以看出:

可通過write()和prompt()方法實現(xiàn)交互。

在JavaScript腳本語言中可以使用HTML標(biāo)識語言的代碼。從而實現(xiàn)混合編程。其中<H1>和<Br>就是HTML標(biāo)識符。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》90窗體基礎(chǔ)知識窗體對象可以使設(shè)計人員能用窗體中不同的元素與客戶機(jī)用戶相交互,而用不著在之前首先進(jìn)行數(shù)據(jù)輸入,就可以實現(xiàn)動態(tài)改變Web文檔的行為。11一月2023《基于WEB的JAVA開發(fā)設(shè)計》91什么是窗體對象窗體(Form):它是構(gòu)成了Web頁面的基本元素。通常一個Web頁面有一個窗體或幾個窗體,使用Forms[]數(shù)組來實現(xiàn)不同窗體的訪問。

<formName=Form1>

<INPUTtype=text...>

<Inputtype=tex

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論