版權(quán)說(shuō)明:本文檔由用戶(hù)提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第一次作業(yè)創(chuàng)立并運(yùn)行假設(shè)干簡(jiǎn)單的網(wǎng)頁(yè),包含以下內(nèi)容:(1)完成教材15頁(yè)的本章實(shí)驗(yàn),并截圖顯示在網(wǎng)頁(yè)上證實(shí)自己的機(jī)器上已經(jīng)部署好IIS、SQLServer、VS或VWD等根本軟件;(2)你的個(gè)人介紹,方方面面的個(gè)人信息〔不涉及個(gè)人隱私〕;(3)你對(duì)本專(zhuān)業(yè)以及本門(mén)課程的理解、建議與期望等。(4)要使用CSS將網(wǎng)頁(yè)風(fēng)格化。每人一個(gè)以長(zhǎng)學(xué)號(hào)命名的文件夾【例如:2023344436】第3章JavaScript編程根底本章主要內(nèi)容3.1JavaScript簡(jiǎn)介3.2JavaScript編程根底3.3瀏覽器對(duì)象模型3.4文檔對(duì)象模型3.5客戶(hù)端動(dòng)態(tài)網(wǎng)頁(yè)編程3.1JavaScript簡(jiǎn)介3.1.1JavaScript的起源20世紀(jì)90年代,上網(wǎng)越來(lái)越流行,對(duì)開(kāi)發(fā)客戶(hù)端腳本的需求也逐漸增大。此時(shí),網(wǎng)頁(yè)已經(jīng)不斷地變得更大和更復(fù)雜,而大局部Internet用戶(hù)還僅僅通過(guò)28.8kbit/s的速率連接到網(wǎng)絡(luò),更加加劇用戶(hù)痛苦的是,僅僅為了簡(jiǎn)單的表單有效性驗(yàn)證,就要與效勞器進(jìn)行屢次往返交互。在Microsoft公司進(jìn)軍瀏覽器市場(chǎng)后,有3種不同的JavaScript版本同時(shí)存在:NetscapeNavigator3.0中的JavaScript、IE中的JScript以及CEnvi中的ScriptEase。與其他編程語(yǔ)言不同的是,JavaScript并沒(méi)有一個(gè)標(biāo)準(zhǔn)來(lái)統(tǒng)一其語(yǔ)法或特性,而這3種不同的版本恰恰突出了這個(gè)問(wèn)題。幾點(diǎn)說(shuō)明:語(yǔ)法習(xí)慣上,JavaScript與Java、C#非常相似。Java與JavaScript,并無(wú)太多關(guān)系。W3C教程JQuery是一個(gè)JavaScript庫(kù),
極大地簡(jiǎn)化了JavaScript編程,很容易學(xué)習(xí)。3.1.2JavaScript的特點(diǎn)JavaScript是一種腳本語(yǔ)言,采用小程序段的方式進(jìn)行編程。JavaScript是一種功能強(qiáng)大的語(yǔ)言,它可以和HTML完美地結(jié)合在一起。JavaScript是一種基于對(duì)象〔ObjectBased〕和事件驅(qū)動(dòng)〔EventDriver〕的編程語(yǔ)言。JavaScript用于客戶(hù)端。3.1.3JavaScript的作用JavaScript可以彌補(bǔ)HTML的缺陷,可以制作出多種網(wǎng)頁(yè)特效,其主要作用有:〔1〕增加動(dòng)態(tài)效果〔2〕讀寫(xiě)HTML元素〔3〕響應(yīng)事件〔4〕驗(yàn)證表單數(shù)據(jù)〔5〕檢查瀏覽器〔6〕創(chuàng)立Cookies3.1.4JavaScript的組成JavaScript作為一種網(wǎng)絡(luò)客戶(hù)端的腳本語(yǔ)言,由以下3局部組成:〔1〕ECMAScript〔2〕文檔對(duì)象模型〔DocumentObjectModel,DOM〕〔3〕瀏覽器對(duì)象模型〔BrowserObjectModel,BOM〕3.1.5JavaScript程序的編輯和調(diào)試JavaScript的編寫(xiě)形式有以下3種:
1.直接把JavaScript嵌入HTML的任何標(biāo)簽中2.使用JavaScript函數(shù)時(shí),將函數(shù)定義在<head>標(biāo)簽中3.使用單獨(dú)的.js文件第一個(gè)JavaScript程序<html><head><scripttype="text/javascript">functiondisplaymessage(){alert("HelloWorld!")}</script></head><body><form><inputtype="button"value="Clickme!"onclick="displaymessage()"></form></body></html><html><body><scripttype="text/javascript">document.write("HelloWorld!");</script></body></html><html><head><meta-equiv="Content-Type"content="text/html;charset=gb2312"><title>實(shí)時(shí)顯示時(shí)間</title><scripttype="text/javascript"><!--setInterval("showTime()",1000);functionshowTime(){vard,s;d=newDate();s=d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();="<h1>當(dāng)前時(shí)間:<fontcolor=blue>"+timetxt.innerHTMLs+"</font></h1>";}//--></script></head><body><divid="timetxt"align="center"></div></body></html>在網(wǎng)頁(yè)中嵌入JavaScript腳本JavaScript腳本的引入方法通過(guò)<script>與</script>標(biāo)簽對(duì)引入。將JavaScript腳本代碼放在<script>與</script>之間,瀏覽器自動(dòng)識(shí)別該標(biāo)簽對(duì)并逐行解釋其間的代碼。通過(guò)<script>標(biāo)簽的src屬性引入。將包含在<script>與</script>標(biāo)簽對(duì)之間的代碼放入擴(kuò)展名為.js的腳本文件中,然后在HTML文檔中通過(guò)<script>標(biāo)簽的src屬性來(lái)引用該腳本文件。在網(wǎng)頁(yè)中嵌入JavaScript腳本JavaScript腳本的引入方法通過(guò)JavaScript偽協(xié)議引入。偽協(xié)議是非標(biāo)準(zhǔn)化通信機(jī)制的統(tǒng)稱(chēng),JavaScript偽協(xié)議的一般格式為:javascript:URL。其中“javascript:〞是偽協(xié)議說(shuō)明符,URL的主體可以是任意的JavaScript代碼,多個(gè)語(yǔ)句之間使用分號(hào)進(jìn)行分隔。例如:<imgsrc="hua.jpg"onClick="javascript:vard1=(newDate()).getTime();vard2=(newDate(2023,1,28)).getTime();vardays=Math.floor((d2-d1)/(1000*60*60*24));alert('距離2023年春節(jié)還剩下'+days+'天!')">JavaScript消息框警告框alert("文本")警告框經(jīng)常用于確保用戶(hù)可以得到某些信息。當(dāng)警告框出現(xiàn)后,用戶(hù)需要點(diǎn)擊確定按鈕才能繼續(xù)進(jìn)行操作。確認(rèn)框confirm("文本")確認(rèn)框用于使用戶(hù)可以驗(yàn)證或者接受某些信息。當(dāng)確認(rèn)框出現(xiàn)后,用戶(hù)需要點(diǎn)擊確定或者取消按鈕才能繼續(xù)進(jìn)行操作。如果用戶(hù)點(diǎn)擊確認(rèn),那么返回值為true。如果用戶(hù)點(diǎn)擊取消,那么返回值為false。提示框prompt("文本","默認(rèn)值")提示框經(jīng)常用于提示用戶(hù)在進(jìn)入頁(yè)面前輸入某個(gè)值。當(dāng)提示框出現(xiàn)后,用戶(hù)需要輸入某個(gè)值,然后點(diǎn)擊確認(rèn)或取消按鈕才能繼續(xù)操縱。如果用戶(hù)點(diǎn)擊確認(rèn),那么返回值為輸入的值。如果用戶(hù)點(diǎn)擊取消,那么返回值為null。在網(wǎng)頁(yè)中嵌入JavaScript腳本JavaScript腳本的引入方法通過(guò)HTML的事件屬性引入。HTML元素的事件屬性用于指示如何處理特定的事件,方法是將腳本指定為事件屬性的值,以響應(yīng)系統(tǒng)或用戶(hù)的動(dòng)作。事件屬性名稱(chēng)由事件名稱(chēng)加一個(gè)“on〞前綴構(gòu)成,如onClick,onMouseOver等。例如:<scripttype="text/javascript"><!--functionshowMsg(){vard1=(newDate()).getTime();vard2=(newDate(2023,1,28)).getTime();vardays=Math.floor((d2-d1)/(1000*60*60*24));alert('距離2023年春節(jié)還剩下'+days+'天!');}//--></script><imgsrc="hua.jpg"onClick="showMsg()">在網(wǎng)頁(yè)中嵌入JavaScript腳本嵌入JavaScript腳本的位置
JavaScript腳本可放在HTML文檔中任何需要的位置。一般來(lái)說(shuō),可以在<head>與</head>標(biāo)簽對(duì)、<body>與</body>標(biāo)簽對(duì)之間放置JavaScript腳本代碼。放置在<head>與</head>標(biāo)簽對(duì)之間的JavaScript腳本一般用于提前載入,以響應(yīng)用戶(hù)的頁(yè)面動(dòng)作,且一般不影響HTML文檔的瀏覽器顯示格局。如果需要在頁(yè)面載入時(shí)動(dòng)態(tài)生成頁(yè)面內(nèi)容,應(yīng)將JavaScript腳本放置在<body>與</body>標(biāo)簽對(duì)之間。使用單獨(dú)的.js文件考慮到代碼的復(fù)用性和移植性,將JavaScript代碼單獨(dú)放到擴(kuò)展名為.js的獨(dú)立文件中,在需要的頁(yè)面使用src指明文件的位置即可。<html><head><scripttype="text/JavaScript"src="JSript.js"></script></head><body><scripttype="text/JavaScript">write();</script></body></html>3.2JavaScript編程根底3.2.1JavaScript的變量無(wú)論是編程語(yǔ)言還是腳本語(yǔ)言,變量都是最根本的元素,在腳本運(yùn)行時(shí),往往需要用一個(gè)有名稱(chēng)的單元將信息存儲(chǔ)起來(lái),這個(gè)有名稱(chēng)的單元就是變量。詞法規(guī)那么標(biāo)識(shí)符的第一個(gè)字符必須是字母、下劃線(xiàn)或美元符號(hào),后續(xù)字符可以是字母、數(shù)字、下劃線(xiàn)或美元符號(hào)。不能使用JavaScript中的關(guān)鍵字、保存字作為標(biāo)識(shí)符。JavaScript是一種區(qū)分大小寫(xiě)的腳本語(yǔ)言。注意處理與HTML的關(guān)系。以分號(hào)作為語(yǔ)句結(jié)束。單行注釋//,多行注釋/*….*/。1.變量的聲明方式JavaScript中變量的名稱(chēng)區(qū)分大小寫(xiě),使用關(guān)鍵字var來(lái)聲明變量。JavaScript并沒(méi)有強(qiáng)制要求變量必須先聲明才使用,但是先聲明變量再使用是一種良好的編程風(fēng)格。2.變量類(lèi)型JavaScript不要求預(yù)先確定變量的數(shù)據(jù)類(lèi)型,但實(shí)際上,每個(gè)JavaScript變量都對(duì)應(yīng)一個(gè)數(shù)據(jù)類(lèi)型的值,例如,如果box=3,那就認(rèn)為box變量是數(shù)值類(lèi)型的變量。JavaScript是一種弱類(lèi)型語(yǔ)言,弱類(lèi)型語(yǔ)言中變量賦值的數(shù)據(jù)類(lèi)型是可以發(fā)生變化的。ECMAScript中定義了5種原始類(lèi)型〔primitivetype):undefined、null、boolean、number和string?!?〕undefined類(lèi)型:聲明的變量未初始化時(shí),該變量的初始值是undefined。〔2〕null類(lèi)型:用于尚未存在的對(duì)象,值undefined實(shí)際是從值null派生的?!?〕boolean類(lèi)型:只有兩個(gè)值true和false?!?〕number類(lèi)型:任何數(shù)字都被看做是number類(lèi)型的字面量〔5〕string類(lèi)型:字符串類(lèi)型。根本數(shù)據(jù)類(lèi)型根本數(shù)據(jù)類(lèi)型和常量當(dāng)某種根本類(lèi)型的數(shù)據(jù)項(xiàng)直接出現(xiàn)在程序中時(shí),稱(chēng)之為常量,即值不能被改變的量。數(shù)值型:最根本的數(shù)據(jù)類(lèi)型,包括整型和浮點(diǎn)型整型常量:可以使用十進(jìn)制、八進(jìn)制或十六進(jìn)制表示,如1234、0745、0x93C等。浮點(diǎn)型常量:可以使用小數(shù)或指數(shù)方法表示,如12.34、5.9e7、4.3e-5等。特殊的數(shù)值型常量:Infinity表示正無(wú)窮大,-Infinity表示負(fù)無(wú)窮大,NaN表示“不是一個(gè)數(shù)值〞、“沒(méi)有意義的運(yùn)算〞或“無(wú)法轉(zhuǎn)換成數(shù)值類(lèi)型〞。如5/0的運(yùn)算結(jié)果為Infinity,-5/0的運(yùn)算結(jié)果為-Infinity,0/0的運(yùn)算結(jié)果為NaN。根本數(shù)據(jù)類(lèi)型根本數(shù)據(jù)類(lèi)型和常量字符串型:表示文本的數(shù)據(jù)類(lèi)型字符串常量:用""或''括起來(lái)的假設(shè)干個(gè)字符,如"JavaScript"、'ThisisabookofC++'等。轉(zhuǎn)義字符:以反斜杠\開(kāi)頭的具有特殊功能的字符。轉(zhuǎn)義字符功能說(shuō)明\b退格\f換頁(yè)\n換行\(zhòng)r回車(chē)\t制表\'單引號(hào)\"雙引號(hào)\\反斜線(xiàn)根本數(shù)據(jù)類(lèi)型根本數(shù)據(jù)類(lèi)型和常量布爾型:表示狀態(tài)的數(shù)據(jù)類(lèi)型布爾常量:只有兩個(gè)可能的值true和false,表示“真〞和“假〞兩種狀態(tài)。如5>3的運(yùn)算結(jié)果為true,“Chinese〞<“China〞的運(yùn)算結(jié)果是false。變量變量是存放常量的容器,主要作用是存取數(shù)據(jù)。變量的聲明:在JavaScript中,可以先通過(guò)關(guān)鍵字var來(lái)聲明變量,然后再使用。例如:varnum;varstr,flag;num=100;str="JavaScriptLanguage";flag=true;根本數(shù)據(jù)類(lèi)型變量的初始化:變量可以在聲明的同時(shí)指定初始值。例如:varnum=100;varstr="JavaScriptLanguage",flag=true;
僅用var聲明但未初始化的變量獲得默認(rèn)初值undefined。變量的類(lèi)型實(shí)際類(lèi)型視變量?jī)?nèi)容而定。例如,上例中的num為數(shù)值型變量,str為字符串型變量,flag為布爾型變量。變量的類(lèi)型可以根據(jù)變量?jī)?nèi)容的改變而自動(dòng)更改。例如:varnum=1;//num為數(shù)值型變量
num="HelloWorld!";//num為字符串型變量變量可以不經(jīng)過(guò)var聲明就直接使用,而在變量賦值時(shí)自動(dòng)聲明該變量。例如:num=100;str="JavaScriptLanguage";flag=true;好的編程風(fēng)格:所有變量在第一次使用前都用var進(jìn)行聲明!3.typeof運(yùn)算符使用typeof可以得到一個(gè)變量或值的類(lèi)型。例如:varsTemp="teststring";alert(typeofsTemp);//輸出"string"alert(typeof86);//輸出"number"4.類(lèi)型轉(zhuǎn)換〔1〕轉(zhuǎn)換成字符串:toString()varboo=newBoolean(true);document.write(boo.toString());〔2〕轉(zhuǎn)換成數(shù)字parseInt(),parseFloat()varx=parseInt("123");varx=parseFloat("123mm");〔3〕強(qiáng)制類(lèi)型轉(zhuǎn)換varx=String(123);varx=Number("123");3.2.2數(shù)組1.?dāng)?shù)組的定義JavaScript中的數(shù)組是內(nèi)部類(lèi)型Array的對(duì)象,因此,可以使用如下方式創(chuàng)立數(shù)組。varmyArray=newArray();//創(chuàng)立一個(gè)長(zhǎng)度為0的數(shù)組varmyArray=newArray(n);//創(chuàng)立一個(gè)擁有n個(gè)元素的數(shù)組,每個(gè)元素為undefined類(lèi)型varmyArray=newArray(1,2,"abc");//創(chuàng)立一個(gè)長(zhǎng)度為3的數(shù)組,并賦初值同時(shí),也支持使用括號(hào)來(lái)定義數(shù)組,例如:varmyArray=[];//創(chuàng)立一個(gè)長(zhǎng)度為0的數(shù)組varmyArray=[1,2,"abc"];//創(chuàng)立一個(gè)長(zhǎng)度為3的數(shù)組2.?dāng)?shù)組元素的訪(fǎng)問(wèn)數(shù)組元素按索引進(jìn)行訪(fǎng)問(wèn),索引號(hào)從0開(kāi)始記。例如:myArray[2]=4;//將4賦值給myArray數(shù)組的第3個(gè)元素vari=myArray[2];//將myArray數(shù)組的第3個(gè)元素的值賦給變量i3.動(dòng)態(tài)數(shù)組JavaScript數(shù)組的長(zhǎng)度不是固定不變的,假設(shè)要增加數(shù)組的長(zhǎng)度,直接賦值即可。例如:varmyArray=newArray(1,2,3);myArray[3]=4;這時(shí)myArray的長(zhǎng)度為4,如果varmyArray=newArray(1,2,3);myArray[4]=4;那么長(zhǎng)度為5,其中myArra[3]的值為undefined。4.?dāng)?shù)組的常用屬性和方法length屬性:獲取數(shù)組長(zhǎng)度。concat方法:連接兩個(gè)或更多的數(shù)組,并返回結(jié)果。也可以直接連接數(shù)值,例如:a.concat(4,5,6);join方法:連接數(shù)組,缺省的連接符號(hào)為“,〞。push方法:在數(shù)組的結(jié)尾添加一個(gè)或多個(gè)項(xiàng),同時(shí)更改數(shù)組的長(zhǎng)度。pop方法:刪除最后一個(gè)數(shù)組項(xiàng),將其作為函數(shù)值返回。shift方法:刪除數(shù)組中的第一個(gè)項(xiàng),將其作為函數(shù)值返回。unshift方法:添加元素至數(shù)組開(kāi)始處。slice方法:返回?cái)?shù)組的片斷〔或者說(shuō)子數(shù)組〕。splice方法:從數(shù)組中替換或刪除元素。sort方法:數(shù)組排序。sort方法可以指定比較函數(shù),根據(jù)比較函數(shù)進(jìn)行排序。reverse方法:將數(shù)組倒序。3.2.3string類(lèi)型字符串〔string〕類(lèi)型在JavaScript中用得很多,這里簡(jiǎn)單介紹其主要屬性和方法。字符串由多個(gè)字符組成,使用雙引號(hào)或單引號(hào)可定義一個(gè)字符串常量,并可賦給一個(gè)字符串類(lèi)型的變量,利用length屬性可獲取字符串的長(zhǎng)度。*參見(jiàn)教材40頁(yè)3.2.4JavaScript的函數(shù)1.函數(shù)的定義2.a(chǎn)rguments對(duì)象無(wú)需指明參數(shù)名,也不限參數(shù)個(gè)數(shù)3.函數(shù)是對(duì)象function是Function類(lèi)的實(shí)例化函數(shù)在JavaScript中,函數(shù)用來(lái)封裝那些在程序中反復(fù)使用的程序段,常作為事件處理程序被調(diào)用。函數(shù)的根本組成函數(shù)定義一般格式:function函數(shù)名([參數(shù)列表]){函數(shù)體;[return返回值;]}說(shuō)明:function:定義函數(shù)的關(guān)鍵字。函數(shù)名:函數(shù)的標(biāo)識(shí)符,表示函數(shù)的入口地址。參數(shù)列表:包含假設(shè)干個(gè)參數(shù),不同參數(shù)間用逗號(hào)間隔。當(dāng)調(diào)用函數(shù)時(shí),可以向參數(shù)列表中傳入常量值、變量值或其它表達(dá)式的值,函數(shù)內(nèi)的程序語(yǔ)句可以通過(guò)參數(shù)名稱(chēng)來(lái)引用傳進(jìn)來(lái)的這些值。參數(shù)列表也可以為空。函數(shù)體:實(shí)現(xiàn)函數(shù)功能的程序語(yǔ)句。return:指定函數(shù)返回值的關(guān)鍵字。return語(yǔ)句負(fù)責(zé)將函數(shù)的執(zhí)行結(jié)果返回到程序中函數(shù)調(diào)用的位置,一個(gè)函數(shù)中最多只能有一條return語(yǔ)句。函數(shù)例定義一個(gè)求階乘的函數(shù)
functionfact(n){vars=1,i; for(i=1;i<=n;i++) s=s*i; returns;}定義函數(shù)的關(guān)鍵字函數(shù)名參數(shù)列表函數(shù)體返回函數(shù)的執(zhí)行結(jié)果函數(shù)函數(shù)調(diào)用一般格式:函數(shù)名(實(shí)參列表);說(shuō)明:實(shí)參列表中包含假設(shè)干個(gè)實(shí)際參數(shù),參數(shù)之間用逗號(hào)間隔,實(shí)參個(gè)數(shù)應(yīng)與函數(shù)定義時(shí)參數(shù)列表中的參數(shù)個(gè)數(shù)相等。實(shí)參的表示形式可以是常量、變量或者表達(dá)式,所有實(shí)參都必須得到具體的賦值。函數(shù)調(diào)用時(shí)的參數(shù)傳遞都是以值傳遞的方式進(jìn)行的。也就是說(shuō),在函數(shù)中將某個(gè)傳進(jìn)來(lái)的變量值改變了,并不會(huì)影響原來(lái)函數(shù)外的變量值。例如:functioninc(n){n++;alert(n);}varx=5;inc(x);alert(x);函數(shù)調(diào)用參數(shù)傳遞函數(shù)定義程序運(yùn)行結(jié)果:
n=6x=5函數(shù)函數(shù)的作用域在函數(shù)外部聲明的變量稱(chēng)為全局變量,全局變量在程序的任何地方都可以使用。在函數(shù)內(nèi)部聲明的變量稱(chēng)為局部變量,局部變量應(yīng)用關(guān)鍵字var聲明,沒(méi)有用var聲明的局部變量在函數(shù)執(zhí)行完畢后會(huì)變成全局變量。程序運(yùn)行結(jié)果:
sum=8程序運(yùn)行結(jié)果:
y未定義functioninc(n){y=++n;returny;}varx=3;varsum=inc(x)+y;alert(sum);functioninc(n){vary=++n;returny;}varx=3;varsum=inc(x)+y;alert(sum);函數(shù)函數(shù)的嵌套與遞歸函數(shù)的嵌套:嵌套定義是指在定義一個(gè)函數(shù)的過(guò)程中定義另一個(gè)函數(shù),定義在某個(gè)函數(shù)內(nèi)部的函數(shù)稱(chēng)為局部函數(shù),其作用域局限在所屬的框架函數(shù)。嵌套調(diào)用是指在調(diào)用一個(gè)函數(shù)的過(guò)程中又調(diào)用另一個(gè)函數(shù)。例如:functionlcm(m,n){//框架函數(shù),求最小公倍數(shù)
varres;functiongcd(m,n){//局部函數(shù),求最大公約數(shù)
vara,b,t;if(m<n){t=m;m=n;n=t;}a=m;b=n;while((r=a%b)!=0){a=b;b=r;}returnb;}res=m*n/gcd(m,n);//嵌套調(diào)用gcd函數(shù)
alert(m+"和"+n+"的最小公倍數(shù)是"+res);}函數(shù)函數(shù)的遞歸:遞歸調(diào)用是指函數(shù)在調(diào)用過(guò)程中直接或間接調(diào)用自身,是一種特殊的嵌套調(diào)用。例如:functionfac(n){varres;if(n==1)res=1;elseres=n*fac(n-1);//遞歸調(diào)用
returnres;}varn=parseInt(prompt("請(qǐng)輸入整數(shù)",""));varf=fac(n);alert(n+"的階乘是"+f);2.Arguments對(duì)象
JavaScript不要求函數(shù)的實(shí)參與形參完全一致。使用特殊對(duì)象Arguments,無(wú)須指出參數(shù)名,就能訪(fǎng)問(wèn)它們。例如,如下函數(shù)SayHi()就可以有兩種調(diào)用形式。functionSayHi(){
if(arguments[0]=="bye"){return;}alert(arguments[0]);}調(diào)用形式1:<scriptlanguage="javascript">
SayHi("test");</script>433.2.4JavaScript的函數(shù)調(diào)用形式2:<scriptlanguage="javascript">
SayHi("test",123);</script>函數(shù)可以接受多個(gè)參數(shù)而不會(huì)引發(fā)錯(cuò)誤。443.2.4JavaScript的函數(shù)例:利用Arguments對(duì)象求和。<htmlxmlns=":///1999/xhtml"><head><title>JavaScript的函數(shù)參數(shù)數(shù)組</title><scripttype="text/javascript">functionsumInteger()//使用參數(shù)數(shù)組獲取傳遞的參數(shù){vartotal=0;for(vari=0;i<sumInteger.arguments.length;i++)//獲取傳遞的所有參數(shù) {total+=sumInteger.arguments[i];}returntotal;}</script></head>453.2.4JavaScript的函數(shù)<body><h2>JavaScript的函數(shù)參數(shù)數(shù)組</h2><hr/><scripttype="text/javascript">varintTotal=0;//聲明變量
intTotal=sumInteger(1,100,98,29);document.write("函數(shù)sumInteger(1,100,98,29)="+intTotal+"<br/>");</script></body></html>463.2.4JavaScript的函數(shù)3.2.5JavaScript對(duì)象化編程創(chuàng)立對(duì)象最簡(jiǎn)單的方法是使用“屬性名:值〞格式項(xiàng)的集合。屬性名要求是一個(gè)JavaScript的有效標(biāo)識(shí)符或者是一個(gè)字符串,屬性值可以是一個(gè)常量、一個(gè)表達(dá)式或一個(gè)函數(shù),項(xiàng)之間使用逗號(hào)分隔。例如:varpose={x:0,y:0,theta:0};2.添加、刪除對(duì)象的屬性JavaScript中的對(duì)象在定義好后還可以添加或刪除其屬性,例如:varpose={x:0};pose.y=0;pose.theta=0;上述代碼中的第一句還可以改寫(xiě)成為:varpose={};//或者為varpose=newObject();pose.x=0;使用delete關(guān)鍵字可以刪除一個(gè)對(duì)象的屬性,屬性刪除之后自然就不能再訪(fǎng)問(wèn)了。例如,下面的代碼完成對(duì)pose對(duì)象theta屬性的刪除。deletepose.theta;3.添加對(duì)象的方法如果對(duì)象的屬性保存的是一個(gè)函數(shù),那么此函數(shù)稱(chēng)為對(duì)象的方法,例如,下面的代碼給pose對(duì)象添加了一個(gè)showInfo()方法,然后調(diào)用它。varpose={x:0,y:0,theta:0};//添加對(duì)象的方法pose.showInfo=function(){return"x="+pose.x+",y="+pose.y+",theta="+pose.theta;}//調(diào)用對(duì)象的方法alert(pose.showInfo());4.構(gòu)造函數(shù)在默認(rèn)情況下JavaScript不會(huì)為對(duì)象創(chuàng)立構(gòu)造函數(shù),這樣前面例子中定義的pose對(duì)象就無(wú)法通過(guò)“newpose()〞表達(dá)式直接創(chuàng)立,而只能先創(chuàng)立一個(gè)Object對(duì)象,然后再向這個(gè)已創(chuàng)立的對(duì)象添加需要的屬性和方法,這樣就不能表達(dá)出類(lèi)型的特點(diǎn)。給對(duì)象定義相應(yīng)的構(gòu)造函數(shù)就可以解決這個(gè)問(wèn)題。5.prototype屬性//定義student類(lèi)functionstudent(sname,ssex,sscore){=sname;this.sex=ssex;this.score=sscore;}//創(chuàng)立兩個(gè)對(duì)象varst1=newstudent("張三","男",59);varst2=newstudent("李四","女",38);//給st1添加一個(gè)方法showInfo1st1.showInfo1=function(str){alert(str);}//調(diào)用兩個(gè)對(duì)象都有的showInfo方法st1.showInfo();st2.showInfo();//調(diào)用新添加的方法st1.showInfo1("調(diào)用st1的showInfo1方法");st2.showInfo1("調(diào)用st2的showInfo1方法");//該行運(yùn)行會(huì)報(bào)錯(cuò):對(duì)象不支持此屬性或方法3.2.6事件驅(qū)動(dòng)及事件處理JavaScript是基于對(duì)象的語(yǔ)言,基于對(duì)象的根本特征就是采用事件驅(qū)動(dòng)機(jī)制,這里的事件包括鼠標(biāo)或鍵盤(pán)的動(dòng)作。所謂事件驅(qū)動(dòng),是指由鼠標(biāo)或鍵盤(pán)的動(dòng)作引發(fā)的一連串程序的動(dòng)作;瀏覽器為了響應(yīng)某個(gè)事件而進(jìn)行的處理過(guò)程稱(chēng)為事件處理。瀏覽器在程序運(yùn)行的大局部時(shí)間里都在等待交互時(shí)間的發(fā)生,并在事件發(fā)生時(shí),自動(dòng)調(diào)用事件處理程序完成事件處理過(guò)程。<ahref="/index.html"onmouseover="alert('Welcome');returnfalse"></a>常見(jiàn)的事件常見(jiàn)的事件常見(jiàn)的事件用JavaScript處理事件JavaScript語(yǔ)言與HTML文檔相關(guān)聯(lián)主要是通過(guò)“事件〞,JavaScript的函數(shù)就是用于處理事件的程序,事件的語(yǔ)法規(guī)那么如下。事件=“函數(shù)名〞或事件=“JavaScript語(yǔ)句〞例如:<inputtype="button"value="[測(cè)試]"onclick="alert('helloworld');"/>也可以定義好函數(shù)后再調(diào)用,例如:functionmessage(){alert('helloworld');}<inputtype="button"value="[測(cè)試]"onclick="message();〞/>3.實(shí)例練習(xí)實(shí)例1:裝載與卸載<head><title>用JavaScript處理事件</title><scripttype="text/javascript">functionLoadForm(){alert("這是一個(gè)裝載的例子");}functionUnLoadForm(){alert("這是一個(gè)卸載的例子");}</script></head><bodyonload="LoadForm();"onunload="UnLoadForm();"><ahref="t.htm">測(cè)試</a></body></html>3.實(shí)例練習(xí)實(shí)例2:驗(yàn)證輸入<head><title>無(wú)標(biāo)題文檔</title><scripttype="text/javascript"language="javascript">functionvalidate(){if(user.value==""){alert("請(qǐng)輸入?。?!");}}</script></head><body><inputtype="text"name="user"/><inputtype="submit"value="提交"onclick="validate();"/></body>3.3瀏覽器對(duì)象模型3.3.1體系結(jié)構(gòu)
瀏覽器對(duì)象模型3.3.2window對(duì)象
在客戶(hù)端JavaScript中,Window對(duì)象是全局對(duì)象,所有的表達(dá)式都在當(dāng)前的環(huán)境中計(jì)算。也就是說(shuō),要引用當(dāng)前窗口根本不需要特殊的語(yǔ)法,可以把那個(gè)窗口的屬性作為全局變量來(lái)使用。例如,可以只寫(xiě)document,而不必寫(xiě)window.document。同樣,可以把當(dāng)前窗口對(duì)象的方法當(dāng)作函數(shù)來(lái)使用,如只寫(xiě)alert(),而不必寫(xiě)window.alert()。要引用窗口中的一個(gè)框架,可以使用如下語(yǔ)法。frame[i] //當(dāng)前窗口的框架self.frame[i] //當(dāng)前窗口的框架w.frame[i] //窗口w的框架要引用一個(gè)框架的父窗口〔或父框架〕,可以使用下面的語(yǔ)法。parent //當(dāng)前窗口的父窗口self.parent //當(dāng)前窗口的父窗口w.parent //窗口w的父窗口要從頂層窗口含有的任何一個(gè)框架中引用它,可以使用如下語(yǔ)法。top //當(dāng)前框架的頂層窗口self.top //當(dāng)前框架的頂層窗口f.top //框架f的頂層窗口使用window對(duì)象完成的常用功能1.導(dǎo)航和翻開(kāi)新窗口2.關(guān)閉窗口3.系統(tǒng)對(duì)話(huà)框4.時(shí)間間隔和暫停例如:翻開(kāi)一個(gè)窗口,加載頁(yè)面1.html,窗口設(shè)有工具欄、地址欄、狀態(tài)欄,沒(méi)有菜單欄、滾動(dòng)欄和目錄按鈕,窗口高300像素、寬300像素,具體實(shí)現(xiàn)的代碼如下:varwindow1=window.open(“1.html〞,null,“toolbar=yes,location=yes,status=yes,directories=no,menubar=no,scrollbars=no,height=300,width=300〞);//null代表默認(rèn)值2.關(guān)閉窗體:window.close();1.window對(duì)象例:JavaScript對(duì)話(huà)框<htmlxmlns=":///1999/xhtml"><head><title>JavaScript對(duì)話(huà)框</title><scripttype="text/javascript">functionbtnAlert_onclick(){alert("這是一個(gè)警告對(duì)話(huà)框,常用于輸出一些信息");}functionbtnConfirm_onclick(){varret=confirm("這是確認(rèn)操作對(duì)話(huà)框,提供兩個(gè)按鈕供用戶(hù)選擇");varinfo=document.getElementById("info");//返回指定對(duì)象的引用if(ret==true)info.innerHTML="你按了確定按鈕";elseinfo.innerHTML="你按了取消按鈕";}3.系統(tǒng)對(duì)話(huà)框functionbtnPrompt_onclick(){varret=prompt("這是一個(gè)提示信息","用戶(hù)請(qǐng)?jiān)诖溯斎?);varinfo=document.getElementById("info");if(ret!="")info.innerHTML="您輸入了:"+ret;if(ret=="")info.innerHTML="您按了確定按鈕,但沒(méi)有輸入信息";if(ret==null)info.innerHTML="您按了取消按鈕";}</script></head>3.系統(tǒng)對(duì)話(huà)框<bodystyle="text-align:center;"><h2>JavaScript對(duì)話(huà)框</h2><hr/><inputid="btnAlert"type="button"value="alert:警告對(duì)話(huà)框"onclick="return
btnAlert_onclick()"/><br/><br/><inputid="btnConfirm"type="button"value="confirm:確認(rèn)操作對(duì)話(huà)框"onclick="returnbtnConfirm_onclick()"/><br/><br/><inputid="btnPrompt"type="button"value="prompt:用戶(hù)輸入對(duì)話(huà)框"onclick="returnbtnPrompt_onclick()"/><br/><br/><divid="info"></div></body></html>3.系統(tǒng)對(duì)話(huà)框4.時(shí)間間隔和暫停<htmlxmlns=":///1999/xhtml"><head><title>顯示當(dāng)前時(shí)間</title><scripttype="text/javascript">functionShowTime(){varShowTimeDiv=document.getElementById("currentTime");if(ShowTimeDiv){ShowTimeDiv.innerHTML=“當(dāng)前時(shí)間:〞+(newDate).toLocaleTimeString();//時(shí)間局部轉(zhuǎn)為字符串}}varintervalID;functionBeginShowTime(){intervalID=setInterval(ShowTime,1000);setTimeout("alert('隔3秒后彈出此消息框,只顯示一次。')",3000);}
4.時(shí)間間隔和暫停functionStopShowTime(){clearInterval(intervalID);}</script></head><bodystyle="text-align:center;"><h2>顯示當(dāng)前時(shí)間</h2>展示setTimeout和setInterval的用法。<br/><hr/><divid="currentTime"></div><br/><inputname="btnStart"type="button"value="顯示時(shí)間"onclick="BeginShowTime();"/><inputname="btnEnd"type="button"value="停止刷新顯示時(shí)間"onclick="StopShowTime();"/></body></html>3.3.3Document對(duì)象Document對(duì)象比較獨(dú)特,它既屬于BOM,又屬于DOM。每個(gè)載入瀏覽器的HTML文檔都會(huì)成為Document對(duì)象,Document對(duì)象使用戶(hù)可以從腳本中訪(fǎng)問(wèn)HTML頁(yè)面中的所有元素。Document對(duì)象是Window對(duì)象的一局部,可通過(guò)window.document屬性對(duì)其進(jìn)行訪(fǎng)問(wèn)。Document對(duì)象實(shí)例例如:<body><imgsrc="logo.gif"name="imgHome"/><formmethod="post"action="1.htm"name="data"><inputtype="text"name="txtEmail"/><inputtype="submit"value="提交"/></form></body>訪(fǎng)問(wèn)body中img圖像的代碼如下。document.images[“imgHome〞];訪(fǎng)問(wèn)表單中輸入框的代碼如下。document.forms[“data〞].txtEmail;2.Document對(duì)象的方法Document對(duì)象的常用方法有write、writeln、clear、open和close等。write將字符串寫(xiě)到一個(gè)新文檔中;writeln將字符串寫(xiě)到一個(gè)新文檔,并在字符串末尾加上換行符;clear去除文檔當(dāng)前內(nèi)容;open和close翻開(kāi)一個(gè)新文檔并關(guān)閉當(dāng)前文檔。Document對(duì)象的方法實(shí)例動(dòng)態(tài)引入.js文件的功能。在該例中將</script>進(jìn)行了拆分,這是因?yàn)闉g覽器一遇到</script>,就會(huì)假定其中的代碼是完整的〔即使它出現(xiàn)在字符串中〕,這樣就會(huì)忽略后面的代碼。<scripttype="text/javascript">document.write("<scripttype='text/javascript'src='1.js'>"+"</scr"+"ipt>");</script>3.3.4Location對(duì)象Location對(duì)象提供當(dāng)前頁(yè)面的URL信息,它有一組屬性,用于存儲(chǔ)URL的各個(gè)組成局部。它的方法可以重載當(dāng)前頁(yè)面或載入新頁(yè)面。例如,有如下的URL。://zjl.xom:80/book/1.html#section11.Location對(duì)象的屬性屬性說(shuō)明在上例中的應(yīng)用情況hash如果頁(yè)面中有頁(yè)面內(nèi)跳轉(zhuǎn)的錨標(biāo),則hash屬性返回href中#號(hào)后面的字符串用location.hash可以獲得錨標(biāo)為#section1(接下來(lái)只列出屬性值)host提供URL頁(yè)面所在的Web服務(wù)器主機(jī)名稱(chēng)和端口號(hào):80hostname提供URL的主機(jī)名稱(chēng)部分href提供整個(gè)URL:/book/1.html#section1pathname提供文檔在主機(jī)上的路徑及文件名book/1.htmlport返回URL中的端口部分80protocol協(xié)議名稱(chēng)HTTPsearch提供完整URL中“?”后面的查詢(xún)字符串2.Location對(duì)象的方法Location對(duì)象的方法有reloa
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年度新能源汽車(chē)充電樁建設(shè)與運(yùn)營(yíng)合作協(xié)議3篇
- 二零二五年商業(yè)房屋抵押貸款登記服務(wù)協(xié)議3篇
- 成都信息工程大學(xué)《生態(tài)學(xué)通識(shí)》2023-2024學(xué)年第一學(xué)期期末試卷
- 成都文理學(xué)院《印刷工藝》2023-2024學(xué)年第一學(xué)期期末試卷
- 成都農(nóng)業(yè)科技職業(yè)學(xué)院《醫(yī)學(xué)綜合1(基礎(chǔ)到臨床)》2023-2024學(xué)年第一學(xué)期期末試卷
- 二零二五年地坪漆施工與品牌授權(quán)合同范本3篇
- 二零二五年EPS構(gòu)件供應(yīng)及建筑節(jié)能綠色施工服務(wù)合同3篇
- 成都理工大學(xué)《財(cái)經(jīng)基礎(chǔ)知識(shí)》2023-2024學(xué)年第一學(xué)期期末試卷
- 成都工業(yè)職業(yè)技術(shù)學(xué)院《嵌入式軟件設(shè)計(jì)》2023-2024學(xué)年第一學(xué)期期末試卷
- 2025年度汽車(chē)配件OEM生產(chǎn)合作合同規(guī)范文本2篇
- 社區(qū)獲得性肺炎診斷和治療指南
- 叉車(chē)定期檢驗(yàn)研究報(bào)告
- 人教版一年級(jí)數(shù)學(xué)上冊(cè)期末無(wú)紙筆考試試卷(A卷)【含答案】
- 2,3-二甲苯酚的理化性質(zhì)及危險(xiǎn)特性表
- 申報(bào)職稱(chēng):副教授演示課件
- 型濾池計(jì)算說(shuō)明書(shū)
- 格力離心機(jī)技術(shù)服務(wù)手冊(cè)
- 水泥攪拌樁計(jì)算(完美)
- 旭化成離子交換膜的介紹
- JJRB輕鋼龍骨隔墻施工方案要點(diǎn)
- 石油石化用化學(xué)劑產(chǎn)品質(zhì)量認(rèn)可實(shí)施細(xì)則
評(píng)論
0/150
提交評(píng)論