網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：JavaScript語法基礎(chǔ)-函數(shù)_第1頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：JavaScript語法基礎(chǔ)-函數(shù)_第2頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：JavaScript語法基礎(chǔ)-函數(shù)_第3頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：JavaScript語法基礎(chǔ)-函數(shù)_第4頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：JavaScript語法基礎(chǔ)-函數(shù)_第5頁
已閱讀5頁，還剩28頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

函數(shù)（function）是指實(shí)現(xiàn)某項(xiàng)單一功能的，可重復(fù)使用的程序段。

JavaScript語法基礎(chǔ)

函數(shù)目錄

JavaScript程序設(shè)計(jì)基礎(chǔ)7.1JavaScript概述7.2在HTML文檔中使用JavaScript7.3數(shù)據(jù)類型7.4標(biāo)識符、變量和常量7.5運(yùn)算符和表達(dá)式7.6流程控制7.7函數(shù)7.8正則表達(dá)式習(xí)題77.7函數(shù)7.7.1函數(shù)的聲明1.聲明函數(shù)(Functiondeclaration)語法格式如下：function函數(shù)名(參數(shù)1,參數(shù)2,…){

函數(shù)體語句塊;return返回值;}7.7函數(shù)【例7-20】聲明兩個(gè)數(shù)的乘法函數(shù)multiple。本例文件7-20.html。<scripttype="text/javascript">

functionmultiple(number1,number2){varresult=number1*number2;returnresult;//函數(shù)有返回值

}varresult=multiple(20,30);//調(diào)用有返回值的函數(shù)

document.write(result);//顯示：600document.write("<br>");

document.write(multiple(2,3));//調(diào)用函數(shù)，顯示：6</script>7.7函數(shù)2.聲明函數(shù)表達(dá)式（FunctionExpression）（1）把函數(shù)表達(dá)式直接賦值給變量格式如下：var變量名=function(參數(shù)1,參數(shù)2,…){//函數(shù)體語句塊;return返回值;}7.7函數(shù)【例7-21】聲明函數(shù)表達(dá)式示例。本例文件7-21.html。<scripttype="text/javascript">varmultiple=function(number1,number2){varresult=number1*number2;returnresult;//函數(shù)有返回值

}varresult=multiple(20,30);//調(diào)用有返回值的函數(shù)

document.write(result);//顯示：600document.write("<br>");//換行

document.write(multiple(2,3));//調(diào)用函數(shù)，顯示：6</script>7.7函數(shù)（2）網(wǎng)頁事件直接調(diào)用函數(shù)表達(dá)式格式為：window.onload=function(參數(shù)1,參數(shù)2,…){//函數(shù)體語句塊;return返回值;}7.7函數(shù)（3）自執(zhí)行函數(shù)如果表達(dá)式后面緊跟()，則會(huì)自動(dòng)調(diào)用執(zhí)行。【例7-22】自執(zhí)行函數(shù)示例。本例文件7-22.html在瀏覽器中顯示如圖7-23所示。<scripttype="text/javascript">(function(){varx="Hello!!";document.write(x+"<br>");})();//自調(diào)用無參函數(shù)，將調(diào)用自己，自動(dòng)執(zhí)行

(function(x,y){document.write(x+y+"<br>");

})(2,3);//自調(diào)用有參函數(shù)

varsum=(function(x,y){returnx+y;

})(5,6);//自調(diào)用有參函數(shù)帶返回值

document.write(sum);</script>7.7函數(shù)7.7.2函數(shù)的調(diào)用1.直接調(diào)用函數(shù)用下面的格式調(diào)用定義的函數(shù)：函數(shù)名(傳遞給函數(shù)的參數(shù)1,傳遞給函數(shù)的參數(shù)2,…);調(diào)用函數(shù)時(shí)的參數(shù)取決于聲明該函數(shù)時(shí)的參數(shù)，如果定義時(shí)有參數(shù)，就需要增加實(shí)參。7.7函數(shù)【例7-23】直接調(diào)用函數(shù)示例。本例文件7-23.html在瀏覽器中顯示如圖7-24所示。<scripttype="text/javascript">functionhello(name){alert("Hello"+name+"!");}varhi=prompt("輸入名字：")

hello(hi);//調(diào)用函數(shù)</script>7.7函數(shù)2.在表達(dá)式中調(diào)用函數(shù)變量名=函數(shù)名(傳遞給函數(shù)的參數(shù)1,傳遞給函數(shù)的參數(shù)2,…);例如，result=multiple(10,20);。對于有返回值的函數(shù)調(diào)用，也可以將其寫在表達(dá)式中，直接利用其返回的值。例如：document.write(multiple(10,20));7.7函數(shù)3.在事件中調(diào)用函數(shù)<標(biāo)簽屬性="屬性值"…事件="函數(shù)名(參數(shù)表)"></標(biāo)簽>例如，使用<a>標(biāo)記的單擊事件onClick調(diào)用函數(shù)，其代碼形式為：<ahref="#"onClick="函數(shù)名(參數(shù)表)">熱點(diǎn)文本</a>7.7函數(shù)【例7-24】本例中的hello()函數(shù)顯示一個(gè)對話框，當(dāng)網(wǎng)頁加載完成后就調(diào)用一次hello()函數(shù)，使用<body>標(biāo)記的onLoad屬性，本例文件7-24.html在瀏覽器中的顯示是先顯示對話框，如圖7-25左圖所示；單擊確定按鈕后，才顯示網(wǎng)頁內(nèi)容，如圖7-25右圖所示。7.7函數(shù)<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>在事件中調(diào)用函數(shù)</title><scripttype="text/javascript">functionhello(){//定義函數(shù)

window.alert("Hello");}</script></head><bodyonLoad="hello();"><!--使用onLoad調(diào)用函數(shù)--><p>網(wǎng)頁內(nèi)容</p></body></html>7.7函數(shù)4.函數(shù)的嵌套調(diào)用（1）嵌套調(diào)用函數(shù)【例7-25】編程序求1+(1+2)+(1+2+3)+...+(1+2+3+…+n)的和。1）首先定義一個(gè)求1+2+3+…+n和的函數(shù)fnSum(num)。functionfnSum(num){ varsum=0,i; for(i=1;i<=num;i++){ sum+=i; } returnsum;}7.6函數(shù)2）然后定義求整個(gè)和的函數(shù)fnAllSum(iNum)，在函數(shù)fnAllSum(num)中調(diào)用函數(shù)fnSum(num)。functionfnAllSum(num){ varsum=0,i; for(i=1;i<=num;i++){ sum+=fnSum(i); } returnsum;}3）在主程序中調(diào)用函數(shù)fnAllSum(num)。document.write(fnAllSum(10));//輸出:2207.6函數(shù)4）完成程序如下：<scripttype="text/javascript">functionfnSum(num){varsum=0,i;for(i=1;i<=num;i++){sum+=i;}returnsum;}functionfnAllSum(num){varsum=0,i;for(i=1;i<=num;i++){sum+=fnSum(i);}returnsum;}document.write(fnAllSum(10));//輸出:220</script>7.7函數(shù)（2）遞歸調(diào)用函數(shù)【例7-26】用遞歸求階乘n!。在下面程序中，階乘函數(shù)fnFactorial(num)自己調(diào)用自己，滿足了以上兩點(diǎn)條件，實(shí)現(xiàn)了遞歸。本例文件7-26.html在瀏覽器中的顯示3628800。7.7函數(shù)<scripttype="text/javascript">functionfnFactorial(num){varresult;if(num<=1)result=1;//遞歸結(jié)束的條件，不再遞歸

elseresult=num*fnFactorial(num-1);//遞歸調(diào)用

returnresult;}document.write(fnFactorial(10));//輸出:3628800</script>7.7函數(shù)7.7.3變量的作用域和生命周期1.變量的作用域【例7-27】觀察下面代碼中變量a、b、c、d值的變化。本例文件7-27.html在瀏覽器中的顯示如圖7-26所示。7.6函數(shù)<scripttype="text/javascript">vara=1;//a是全局變量

b=2;//b是全局變量

functiontest(){c=3;//c是全局變量

varb=5,d=6;//b、d是局部變量

document.write("test:",a,"<br>");//test:1document.write("test:",b,"<br>");//test:5document.write("test:",c,"<br>");//test:3document.write("test:",d,"<br>");//test:6a=11;//全局變量a被賦值

b=55;//局部變量b被賦值

}test();document.write(a,"<br>");//顯示全局變量a的值11document.write(b,"<br>");//顯示全局變量b的值2document.write(c,"<br>");//顯示全局變量c的值3document.write(d,"<br>");//出錯(cuò)，不顯示</script>7.7函數(shù)2.變量的生命周期變量的生命周期也叫變量的生存期，對于用var關(guān)鍵字在函數(shù)內(nèi)部聲明的變量，當(dāng)退出函數(shù)時(shí)，這些局部變量會(huì)隨著函數(shù)調(diào)用的結(jié)束而被銷毀。7.7函數(shù)7.7.4內(nèi)嵌函數(shù)【例7-28】內(nèi)嵌函數(shù)示例，在定義函數(shù)add()的內(nèi)部又定義了一個(gè)函數(shù)plus()。本例文件7-28.html在瀏覽器中的顯示3。<scripttype="text/javascript">functionadd(){//定義函數(shù)add()varcounter=2;//add()函數(shù)內(nèi)部的局部變量counterfunctionplus(){//在函數(shù)add()內(nèi)部定義函數(shù)plus()，內(nèi)嵌函數(shù)

counter+=1;//在內(nèi)嵌函數(shù)plus()內(nèi)部訪問父函數(shù)的局部變量counter}plus();//在函數(shù)add()內(nèi)調(diào)用內(nèi)嵌的函數(shù)plus()，counter變?yōu)?returncounter;//返回counter的值

}document.write(add());//調(diào)用add()函數(shù)，顯示：3</script>7.7函數(shù)7.6.5閉包函數(shù)1.閉包的概念【例7-29】閉包函數(shù)示例。本例文件7-29.html在瀏覽器中的顯示50。<scripttype="text/javascript">functionAdd(num1,num2){//外層函數(shù)

varsum=0;//sum外層函數(shù)定義的局部變量

functionDoAdd(){//內(nèi)嵌函數(shù)，在函數(shù)add()內(nèi)部定義函數(shù)DoAdd()sum=num1+num2;//在內(nèi)嵌函數(shù)內(nèi)部訪問外層函數(shù)的局部變量num1、num2、sumreturnsum;//返回計(jì)算結(jié)果

}varresultAdd=DoAdd();//在外層函數(shù)中調(diào)用內(nèi)嵌函數(shù)DoAdd()得到結(jié)果，保存到變量中

returnresultAdd;//返回DoAdd()函數(shù)的結(jié)果

}document.write(Add(20,30));//顯示:50</script>7.6函數(shù)2.閉包的原理3.閉包的用途【例7-30】函數(shù)Add()內(nèi)部聲明的函數(shù)DoAdd()是一個(gè)閉包，實(shí)現(xiàn)函數(shù)累加器功能。本例文件7-30.html在瀏覽器中的顯示如圖7-27所示。7.6函數(shù)<scripttype="text/javascript">functionAdd(start){//聲明外層函數(shù)

varcounter=start;//外層函數(shù)定義的局部變量counter，從start開始計(jì)數(shù)

functionDoAdd(){//聲明內(nèi)嵌函數(shù)，無參數(shù)傳遞

counter=counter+1;//內(nèi)嵌函數(shù)直接使用外層函數(shù)的局部變量counteralert(counter);//用于調(diào)試時(shí)顯示變量的變化

}returnDoAdd;//外層函數(shù)返回內(nèi)嵌函數(shù)名

}varfn=Add(10);//fn就是DoAdd函數(shù)

fn(1);//第1次調(diào)用fn函數(shù)，輸出：11fn(1);//第2次調(diào)用fn函數(shù)，輸出：12fn(1);//第3次調(diào)用fn函數(shù)，輸出：13</script>7.6函數(shù)7.7函數(shù)7.7.6箭頭函數(shù)在JavaScript中，“=>”用于定義箭頭函數(shù)（ArrowFunction）。1．箭頭函數(shù)的格式箭頭函數(shù)的基本語法格式為：(parameters)=>{statements}如果函數(shù)只接受一個(gè)參數(shù)，那么可以省略圓括號：parameter=>{statements}如果函數(shù)體只有一條語句，那么可以省略大括號，并且該語句的結(jié)果將會(huì)被自動(dòng)返回：parameters=>expression7.7函數(shù)以下是一些使用箭頭函數(shù)的示例。1）不帶參數(shù)的箭頭函數(shù)：letgreet=()=>{document.write("Hello,World!");};greet();//輸出:"Hello,World!"2）帶一個(gè)參數(shù)的箭頭函數(shù)：letdouble=num=>num*2;document.write(double(5));//輸出:10

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(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)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論