項(xiàng)目4計(jì)算個(gè)人所得稅——JavaScript函數(shù)隨著個(gè)人所得稅年度匯算清繳工作的啟動(dòng)，不少老師在計(jì)算稅額時(shí)需要反復(fù)核對(duì)規(guī)則，過(guò)程較為煩瑣。為此，李老師計(jì)劃開發(fā)一款個(gè)人所得稅計(jì)算的網(wǎng)頁(yè)工具，并邀請(qǐng)張華共同參與開發(fā)，以幫助大家快速、準(zhǔn)確地完成個(gè)稅計(jì)算與查詢。該工具的計(jì)算邏輯嚴(yán)格依據(jù)2019年1月1日起實(shí)施的《中華人民共和國(guó)個(gè)人所得稅法》，個(gè)稅年度起征點(diǎn)為60000元（折合每月5000元），計(jì)算需先確定應(yīng)納稅所得額，計(jì)算公式為應(yīng)納稅所得額=個(gè)人年收入

-60000元（起征點(diǎn)金額）-年度社會(huì)保險(xiǎn)等扣除金額-年度專項(xiàng)附加扣除金額確定應(yīng)納稅所得額后，再根據(jù)其金額范圍匹配適用稅率和速算扣除數(shù)，最終通過(guò)公式計(jì)算應(yīng)納稅額：應(yīng)納稅額=應(yīng)納稅所得額×適用稅率-速算扣除數(shù)情境導(dǎo)入

情境導(dǎo)入表4-1個(gè)人所得稅稅率計(jì)算級(jí)數(shù)應(yīng)納稅所得額稅率/%速算扣除數(shù)/元1不超過(guò)36000元的30236000元～144000元的部分1025203144000元～300000元的部分20169204300000元～420000元的部分25319205420000元～660000元的部分30529206660000元～960000元的部分35859207超過(guò)960000元的部分45181920單擊頁(yè)面上的“計(jì)算個(gè)人所得稅”按鈕，如圖所示，實(shí)現(xiàn)效果如圖所示。情境導(dǎo)入■

理解函數(shù)的基本概念及其在編程中的作用?！?/p>

掌握核心預(yù)定義函數(shù)（如消息對(duì)話框函數(shù)、數(shù)值處理函數(shù)、字符串處理函數(shù)）的作用和使用方法?！?/p>

熟悉自定義函數(shù)的聲明、調(diào)用方式，以及函數(shù)的參數(shù)和返回值的設(shè)置方法?！?/p>

掌握函數(shù)表達(dá)式、匿名函數(shù)以及箭頭函數(shù)的基礎(chǔ)用法，了解箭頭函數(shù)的語(yǔ)法規(guī)則與適用場(chǎng)景?！?/p>

能夠正確使用預(yù)定義函數(shù)解決編程中的實(shí)際問(wèn)題?！?/p>

能夠獨(dú)立聲明和調(diào)用自定義函數(shù)，正確處理函數(shù)的參數(shù)傳遞（形象實(shí)參匹配）與返回值獲取?！?/p>

能夠運(yùn)用函數(shù)表達(dá)式、匿名函數(shù)和箭頭函數(shù)的基礎(chǔ)寫法實(shí)現(xiàn)簡(jiǎn)單功能?！?/p>

培養(yǎng)讀者的邏輯思維能力，使其能夠合理分解問(wèn)題，通過(guò)函數(shù)調(diào)用實(shí)現(xiàn)模塊化編程?！?/p>

提升讀者的自主學(xué)習(xí)和解決問(wèn)題的能力，鼓勵(lì)讀者在遇到問(wèn)題時(shí)主動(dòng)查找資料、嘗試不同的方法?！?/p>

培養(yǎng)讀者的模塊化編程思維，使其能夠?qū)?fù)雜功能拆解為獨(dú)立函數(shù)，提升代碼的可維護(hù)性與復(fù)用性。任務(wù)4.2使用預(yù)定義函數(shù)任務(wù)4.3使用自定義函數(shù)任務(wù)4.4運(yùn)用函數(shù)進(jìn)階任務(wù)4.1認(rèn)識(shí)函數(shù)認(rèn)識(shí)函數(shù)任務(wù)4.1函數(shù)是指由一行或多行語(yǔ)句組成的，能夠?qū)崿F(xiàn)某一特定功能的語(yǔ)句序列語(yǔ)句序列是一個(gè)整體，也叫函數(shù)體函數(shù)運(yùn)行的結(jié)果有多種形式，例如，可以利用函數(shù)輸出文本，也可以輸出數(shù)值，還可以為主程序返回值JavaScript中的函數(shù)大致可以分為兩種：預(yù)定義函數(shù)（或稱為內(nèi)置函數(shù)）自定義函數(shù)任務(wù)4.1認(rèn)識(shí)函數(shù)函數(shù)有兩大特點(diǎn)：一是它的重用性，在程序設(shè)計(jì)中如果要多次實(shí)現(xiàn)某一功能，就可以將實(shí)現(xiàn)該功能的代碼定義為一個(gè)函數(shù)，在使用時(shí)可以直接調(diào)用該函數(shù)，不必重寫代碼，從而實(shí)現(xiàn)代碼的重用；二是可降低程序的復(fù)雜度，通過(guò)函數(shù)可以將較大的程序分解成幾個(gè)較小的程序段，也就是說(shuō)可以把一個(gè)較復(fù)雜的大任務(wù)分解成幾個(gè)較容易解決的小任務(wù)，降低整個(gè)程序的復(fù)雜度。任務(wù)4.1認(rèn)識(shí)函數(shù)【任務(wù)實(shí)踐4-1】展示個(gè)人信息——函數(shù)的使用在網(wǎng)頁(yè)上展示個(gè)人信息，包括姓名、學(xué)號(hào)、專業(yè)等。任務(wù)目標(biāo)任務(wù)分析聲明變量來(lái)存儲(chǔ)個(gè)人信息，包括姓名、學(xué)號(hào)和專業(yè)等。使用document.write()函數(shù)來(lái)將這些信息輸出到網(wǎng)頁(yè)上?！救蝿?wù)實(shí)踐4-1】展示個(gè)人信息——函數(shù)的使用

<script>

//聲明并初始化變量

letname="張華";

letstuNum="2024030303";

letmajor="計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)";

lethometown="山東濰坊";

//使用document.write()函數(shù)輸出信息

document.write("我是"+name+"，學(xué)號(hào)是"+stuNum+"，我的專業(yè)是"+major+"，我來(lái)自"+hometown+"。");

</script>使用預(yù)定義函數(shù)任務(wù)4.2

在JavaScript中，預(yù)定義函數(shù)是系統(tǒng)為我們準(zhǔn)備好的、可以直接調(diào)用的函數(shù)。這些函數(shù)可以幫助我們快速實(shí)現(xiàn)一些常見的功能，提高編程效率。常用的預(yù)定義函數(shù)主要包括消息對(duì)話框函數(shù)數(shù)值處理函數(shù)字符串處理函數(shù)任務(wù)4.2使用預(yù)定義函數(shù)在JavaScript中，消息對(duì)話框函數(shù)本質(zhì)上是由JavaScript的內(nèi)置對(duì)象的方法實(shí)現(xiàn)的，它能夠?qū)⒊绦驁?zhí)行的結(jié)果在頁(yè)面上以對(duì)話框的形式直觀地顯示出來(lái)。消息對(duì)話框在JavaScript中應(yīng)用很廣泛，經(jīng)常用來(lái)在頁(yè)面上輸出結(jié)果、接收通過(guò)鍵盤輸入的數(shù)據(jù)、實(shí)現(xiàn)程序與用戶的交互等。JavaScript程序中常用的消息對(duì)話框有警示對(duì)話框確認(rèn)對(duì)話框提示對(duì)話框4.2.1消息對(duì)話框函數(shù)1.警示對(duì)話框函數(shù)使用alert()函數(shù)可以彈出警示對(duì)話框。alert()的功能是直接在頁(yè)面上以對(duì)話框的形式輸出字符串或者變量的值。

alert()函數(shù)除了輸出字符串和變量外，警示對(duì)話框中還有一個(gè)“確定”按鈕，單擊這個(gè)“確定”按鈕會(huì)關(guān)閉警示對(duì)話框。4.2.1消息對(duì)話框函數(shù)alert(顯示內(nèi)容);【任務(wù)實(shí)踐4-2】新學(xué)期寄語(yǔ)——警示對(duì)話框制作一個(gè)新學(xué)期寄語(yǔ)頁(yè)面，當(dāng)用戶打開頁(yè)面時(shí)，會(huì)彈出一個(gè)警示對(duì)話框，顯示新學(xué)期寄語(yǔ)內(nèi)容。任務(wù)目標(biāo)任務(wù)分析聲明變量，保存姓名和新學(xué)期寄語(yǔ)。使用警示對(duì)話框在頁(yè)面上輸出內(nèi)容?！救蝿?wù)實(shí)踐4-2】新學(xué)期寄語(yǔ)——警示對(duì)話框

<scripttype="text/javascript">

letsName="張華";

letiQuote="新學(xué)期，新起點(diǎn)，愿你揚(yáng)帆起航，勇往直前！";

alert(sName+"，新學(xué)期寄語(yǔ)：\n"+iQuote);

</script>2.確認(rèn)對(duì)話框函數(shù)

使用confirm()函數(shù)可以顯示確認(rèn)對(duì)話框

確認(rèn)對(duì)話框的功能同警示對(duì)話框功能十分相似，不同之處是，確認(rèn)對(duì)話框有“確定”“取消”兩個(gè)按鈕，并且在單擊“確定”按鈕后會(huì)返回布爾值true，單擊“取消”按鈕將返回布爾值false。4.2.1消息對(duì)話框函數(shù)confirm(確認(rèn)內(nèi)容);【任務(wù)實(shí)踐4-3】服務(wù)協(xié)議確認(rèn)——確認(rèn)對(duì)話框制作一個(gè)服務(wù)協(xié)議確認(rèn)對(duì)話框，根據(jù)用戶的選擇執(zhí)行不同的操作。任務(wù)目標(biāo)任務(wù)分析聲明變量，保存協(xié)議。使用if…else語(yǔ)句，根據(jù)confirm()函數(shù)的返回值執(zhí)行不同的操作。如果用戶單擊“確定”按鈕，則彈出歡迎使用服務(wù)的提示；如果用戶單擊“取消”按鈕，則彈出無(wú)法使用服務(wù)的提示?！救蝿?wù)實(shí)踐4-3】服務(wù)協(xié)議確認(rèn)——確認(rèn)對(duì)話框

<scripttype="text/javascript">

letagreement="您是否同意相關(guān)服務(wù)協(xié)議？";

if(confirm(agreement)){

alert("感謝您的同意，歡迎使用我們的服務(wù)！");

}else{

alert("很遺憾，您未同意相關(guān)服務(wù)協(xié)議，無(wú)法使用我們的服務(wù)。");

}

</script>【任務(wù)實(shí)踐4-3】服務(wù)協(xié)議確認(rèn)——確認(rèn)對(duì)話框3.提示對(duì)話框函數(shù)使用prompt()函數(shù)可以打開提示對(duì)話框，提示對(duì)話框不僅有“確定”“取消”兩個(gè)按鈕，而且提供用戶可以用鍵盤輸入的文本框，這個(gè)文本框可以實(shí)現(xiàn)用戶與系統(tǒng)的交互功能。語(yǔ)法格式如下。

“提示部分”是提示需要輸入的內(nèi)容的語(yǔ)句，“默認(rèn)結(jié)果”部分可以有，也可以沒(méi)有。提示對(duì)話框是具有人機(jī)交互功能的消息對(duì)話框。4.2.1消息對(duì)話框函數(shù)prompt(提示部分[,默認(rèn)結(jié)果]);【任務(wù)實(shí)踐4-4】詩(shī)詞接力——提示對(duì)話框讓用戶通過(guò)鍵盤輸入給定詩(shī)詞的下一句，并在頁(yè)面上即時(shí)反饋結(jié)果。任務(wù)目標(biāo)任務(wù)分析聲明一個(gè)變量，存儲(chǔ)用戶輸入的詩(shī)詞。使用prompt()函數(shù)構(gòu)建一個(gè)交互式提示對(duì)話框，引導(dǎo)用戶輸入給定詩(shī)詞的下一句?！救蝿?wù)實(shí)踐4-4】詩(shī)詞接力——提示對(duì)話框

<scripttype="text/javascript">

letuserInput;

letgivenPoem="少年易老學(xué)難成";

userInput=prompt("請(qǐng)根據(jù)提示，寫出下列詩(shī)詞的下一句:\n"+givenPoem);

if(userInput==="一寸光陰不可輕"){

alert("恭喜，回答正確！");

}else{

alert("很遺憾，回答錯(cuò)誤。");

}

</script>【任務(wù)實(shí)踐4-4】詩(shī)詞接力——提示對(duì)話框在JavaScript中，數(shù)值處理函數(shù)本質(zhì)上是由JavaScript的內(nèi)置對(duì)象的方法實(shí)現(xiàn)的，它能夠?qū)?shù)據(jù)進(jìn)行判斷、格式化等。4.2.2數(shù)值處理函數(shù)1.isNaN()、isFinite()函數(shù)isNaN()函數(shù)用來(lái)確定一個(gè)變量是否為非數(shù)字。如果是非數(shù)字，返回true；如果是數(shù)字，則返回false。

4.2.2數(shù)值處理函數(shù)isNaN(1);//返回falseisNaN(true);//返回falseisNaN(“a”);//返回true1.isNaN()、isFinite()函數(shù)isFinite()函數(shù)用來(lái)確定一個(gè)變量是否有限，如果這個(gè)變量不是NaN、字符串、負(fù)無(wú)窮或正無(wú)窮，那么isFinite()將返回true，否則將返回false。

4.2.2數(shù)值處理函數(shù)isFinite(1);//返回trueisFinite(true);//返回trueisFinite(“a”);//返回false【任務(wù)實(shí)踐4-5】數(shù)據(jù)有效性驗(yàn)證——isNaN()和isFinite()函數(shù)的使用驗(yàn)證用戶輸入的數(shù)據(jù)是否為合法且有限的數(shù)字。任務(wù)目標(biāo)任務(wù)分析使用isNaN()函數(shù)來(lái)檢測(cè)用戶通過(guò)提示對(duì)話框輸入的數(shù)據(jù)是否為NaN，若返回true，則表明輸入的不是數(shù)字；若返回false，則初步判斷輸入的是數(shù)字。進(jìn)一步使用isFinite()函數(shù)來(lái)確保輸入的數(shù)字是有限的。使用alert()函數(shù)在頁(yè)面上直觀地給出驗(yàn)證結(jié)果。【任務(wù)實(shí)踐4-5】數(shù)據(jù)有效性驗(yàn)證——isNaN()和isFinite()函數(shù)的使用

<scripttype="text/javascript">

letinputNumber=prompt("請(qǐng)輸入一個(gè)有效的數(shù)字：");

if(isNaN(inputNumber)||!isFinite(Number(inputNumber))){

alert("輸入無(wú)效，請(qǐng)確保輸入的是一個(gè)有效的、有限的數(shù)字。");

}else{

alert("輸入有效，您輸入的數(shù)字是："+inputNumber);

}

</script>【任務(wù)實(shí)踐4-5】數(shù)據(jù)有效性驗(yàn)證——isNaN()和isFinite()函數(shù)的使用2.parseFloat()、parseInt()函數(shù)parseFloat()和parseInt()函數(shù)分別用于將字符串轉(zhuǎn)換為浮點(diǎn)數(shù)和整數(shù)。parseFloat()函數(shù)會(huì)解析字符串并返回一個(gè)浮點(diǎn)數(shù)，而parseInt()函數(shù)會(huì)返回一個(gè)整數(shù)。但是，如果字符串不以數(shù)字開頭，那么這兩個(gè)函數(shù)都會(huì)返回NaN。4.2.2數(shù)值處理函數(shù)parseFloat("123.45");//返回123.45parseFloat("123.4abc");//返回123.4parseFloat("abc123.45");//返回NaNparseInt("123.45");//返回123parseInt("123.45abc");//返回123parseInt(true);//返回NaN【任務(wù)實(shí)踐4-6】數(shù)據(jù)格式化——parseFloat()和parseInt()函數(shù)的使用使用parseFloat()和parseInt()函數(shù)將用戶輸入的字符串分別轉(zhuǎn)換為浮點(diǎn)數(shù)和整數(shù)。任務(wù)目標(biāo)任務(wù)分析允許用戶通過(guò)提示對(duì)話框輸入數(shù)據(jù)，使用parseFloat()和parseInt()函數(shù)將字符串分別轉(zhuǎn)換為浮點(diǎn)數(shù)和整數(shù)。使用document.write()函數(shù)在頁(yè)面上輸出轉(zhuǎn)換結(jié)果?！救蝿?wù)實(shí)踐4-6】數(shù)據(jù)格式化——parseFloat()和parseInt()函數(shù)的使用

<scripttype="text/javascript">

letinput=prompt("請(qǐng)輸入要轉(zhuǎn)換的數(shù)據(jù)");

letfloatValue=parseFloat(input);

letintValue=parseInt(input);

document.write(input+"格式化為浮點(diǎn)數(shù)是"+floatValue+"<br/>");

document.write(input+"格式化為整數(shù)是"+intValue+"<br/>");

</script>【任務(wù)實(shí)踐4-6】數(shù)據(jù)格式化——parseFloat()和parseInt()函數(shù)的使用3.toString()、toFixed()函數(shù)toString()函數(shù)用來(lái)將數(shù)值型的數(shù)據(jù)轉(zhuǎn)換為字符串型，也可以返回指定進(jìn)制的數(shù)據(jù)（默認(rèn)為十進(jìn)制數(shù)據(jù)）具體如下

4.2.2數(shù)值處理函數(shù)num.toString([進(jìn)制]);//如果未指定進(jìn)制，將num轉(zhuǎn)換為默認(rèn)的十進(jìn)制的字符串；如果指定進(jìn)制，那么返回相應(yīng)進(jìn)制的數(shù)據(jù)varnum=12;document.write(num.toString());//頁(yè)面顯示字符串12document.write(num.toString(8));//頁(yè)面顯示12的八進(jìn)制數(shù)143.toString()、toFixed()函數(shù)toFixed()函數(shù)用來(lái)將浮點(diǎn)數(shù)轉(zhuǎn)換為固定小數(shù)位數(shù)的數(shù)字。具體如下：

4.2.2數(shù)值處理函數(shù)num.toFixed([位數(shù)]);//將num四舍五入，保留指定位數(shù)的小數(shù)；若省略參數(shù)，則只保留整數(shù)部分。varnum=12.5678;document.write(num.toFixed());//頁(yè)面顯示13document.write(num.toFixed(2));//頁(yè)面顯示12四舍五入并保留2位小數(shù)的結(jié)果12.57在JavaScript中，字符串處理函數(shù)同前面介紹的消息對(duì)話框函數(shù)、數(shù)值處理函數(shù)一樣，都是由JavaScript的內(nèi)置對(duì)象的方法實(shí)現(xiàn)的，字符串處理函數(shù)能夠?qū)ψ址M(jìn)行一定的操作。4.2.3字符串處理函數(shù)1.eval()函數(shù)eval()函數(shù)用來(lái)計(jì)算字符串中的表達(dá)式，并返回表達(dá)式的值。4.2.3字符串處理函數(shù)alert(eval("30+9/3"));返回33alert(eval("3>4"));返回falsealert(eval("6>5"));返回true【任務(wù)實(shí)踐4-7】計(jì)算數(shù)學(xué)表達(dá)式——eval()函數(shù)使用eval()函數(shù)來(lái)計(jì)算用戶輸入的數(shù)學(xué)表達(dá)式，并展示結(jié)果。任務(wù)目標(biāo)任務(wù)分析允許用戶通過(guò)提示對(duì)話框輸入數(shù)學(xué)表達(dá)式，使用eval()函數(shù)來(lái)計(jì)算表達(dá)式的值。利用警示對(duì)話框在頁(yè)面上輸出計(jì)算結(jié)果?！救蝿?wù)實(shí)踐4-7】計(jì)算數(shù)學(xué)表達(dá)式——eval()函數(shù)

<scripttype="text/javascript">

letexpr;

expr=prompt("請(qǐng)輸入一個(gè)數(shù)學(xué)表達(dá)式，例如5+6/2。","0");

alert(expr+"的計(jì)算結(jié)果是"+eval(expr));

</script>【任務(wù)實(shí)踐4-7】計(jì)算數(shù)學(xué)表達(dá)式——eval()函數(shù)2.escape()、unescape()函數(shù)escape()函數(shù)和unescape()函數(shù)是一對(duì)互逆函數(shù)。escape()函數(shù)用于對(duì)字符串中的字符（除字母和數(shù)字）進(jìn)行編碼轉(zhuǎn)換，轉(zhuǎn)換為%AA或者%UUUU的形式。AA指的是字符ASCII的十六進(jìn)制數(shù)的形式，UUUU指的是非ASCII字符（如漢字）的Unicode的形式。4.2.3字符串處理函數(shù)alert(escape("Hello，王小麗！"));//此處返回Hello%2C%u738B%u5C0F%u4E3D%uFF01alert(unescape("Hello%2C%u738B%u5C0F%u4E3D%uFF01"));//此處返回Hello，王小麗！聲明自定義函數(shù)任務(wù)4.3

在編寫代碼時(shí)，可能會(huì)出現(xiàn)非常多相同的代碼，或者功能類似的代碼，這些代碼需要重復(fù)使用。任務(wù)4.3使用自定義函數(shù)自定義函數(shù)是指根據(jù)需要自己定義的一段程序代碼，具體分為兩類：有名函數(shù)和匿名函數(shù)。有關(guān)匿名函數(shù)的內(nèi)容將在任務(wù)4.4中進(jìn)行介紹。自定義有名函數(shù)時(shí)，必須先聲明函數(shù)。4.3.1聲明自定義函數(shù)function函數(shù)名([參數(shù)1],[參數(shù)2]…){

函數(shù)體；

[return表達(dá)式;]}（1）function是定義函數(shù)的關(guān)鍵字，它的后面是函數(shù)名。函數(shù)名是必選項(xiàng)，且在同一作用域內(nèi)必須是唯一的。命名函數(shù)遵守函數(shù)名體現(xiàn)其功能的規(guī)則，即函數(shù)名應(yīng)做到“見名知意”。（2）參數(shù)是可選項(xiàng)，用于向函數(shù)傳遞數(shù)據(jù)。多個(gè)參數(shù)之間使用逗號(hào)進(jìn)行分隔。（3）函數(shù)體是必選項(xiàng)，用于實(shí)現(xiàn)函數(shù)的功能。（4）return語(yǔ)句是可選項(xiàng)，用于返回函數(shù)執(zhí)行的結(jié)果。建議將函數(shù)定義在<head>標(biāo)簽內(nèi)或<body>標(biāo)簽?zāi)┪?，避免因函?shù)未定義導(dǎo)致報(bào)錯(cuò)。4.3.1聲明自定義函數(shù)【任務(wù)實(shí)踐4-8】計(jì)算商品總價(jià)——函數(shù)定義定義函數(shù)，計(jì)算商品總價(jià)。任務(wù)目標(biāo)任務(wù)分析為了實(shí)現(xiàn)計(jì)算功能，函數(shù)體要用到算術(shù)表達(dá)式——總價(jià)=單價(jià)×數(shù)量。聲明3個(gè)變量unitPrice、quantity和totalPrice，分別用來(lái)保存單價(jià)、數(shù)量及總價(jià)?！救蝿?wù)實(shí)踐4-8】計(jì)算商品總價(jià)——函數(shù)定義

<scripttype="text/javascript">

functioncalculateTotalPrice(){

letunitPrice=30;//單價(jià)

letquantity=5;

//數(shù)量

lettotalPrice=unitPrice*quantity;//總價(jià)

document.write("商品的總價(jià)為："+totalPrice+"元");

}

</script>自定義函數(shù)定義好之后，就可以同內(nèi)置函數(shù)一樣，在程序中進(jìn)行調(diào)用。一般來(lái)說(shuō)，在程序中調(diào)用函數(shù)有如下3種方式。4.3.2調(diào)用自定義函數(shù)1.使用函數(shù)名調(diào)用函數(shù)在JavaScript程序中，可以直接使用函數(shù)名來(lái)調(diào)用函數(shù)。無(wú)論是內(nèi)置函數(shù)還是自定義函數(shù)，調(diào)用的方法是一樣的。用函數(shù)名來(lái)調(diào)用函數(shù)的形式是“函數(shù)名()”，在調(diào)用函數(shù)時(shí)后面必須加括號(hào)。4.3.2調(diào)用自定義函數(shù)printStr();2.在HTML中用超鏈接的方式來(lái)調(diào)用函數(shù)在HTML中，可以使用超鏈接（在<a>標(biāo)簽的href屬性中使用“javascript：”）的方式來(lái)調(diào)用JavaScript函數(shù)。調(diào)用方法如下4.3.2調(diào)用自定義函數(shù)<ahref="javascript:函數(shù)名(參數(shù))">…</a>3.在事件處理中用與事件結(jié)合的方式調(diào)用函數(shù)在事件處理中，可以將JavaScript函數(shù)作為事件處理函數(shù)來(lái)調(diào)用。當(dāng)觸發(fā)事件時(shí)會(huì)自動(dòng)調(diào)用指定的JavaScript函數(shù)。4.3.2調(diào)用自定義函數(shù)【任務(wù)實(shí)踐4-9】計(jì)算商品總價(jià)——使用函數(shù)名調(diào)用函數(shù)通過(guò)直接使用函數(shù)名調(diào)用任務(wù)實(shí)踐4-8中定義的函數(shù)來(lái)計(jì)算商品總價(jià)。任務(wù)目標(biāo)任務(wù)分析在<script>標(biāo)簽中調(diào)用函數(shù)。注意，調(diào)用函數(shù)的操作要在定義函數(shù)之后進(jìn)行?！救蝿?wù)實(shí)踐4-9】計(jì)算商品總價(jià)——使用函數(shù)名調(diào)用函數(shù)

<scripttype="text/javascript">

functioncalculateTotalPrice(){

letunitPrice=30;//單價(jià)

letquantity=5;

//數(shù)量

lettotalPrice=unitPrice*quantity;//總價(jià)

document.write("商品的總價(jià)為："+totalPrice+"元");

}

calculateTotalPrice();//直接調(diào)用函數(shù)

</script>【任務(wù)實(shí)踐4-10】計(jì)算商品總價(jià)——使用超鏈接調(diào)用函數(shù)通過(guò)超鏈接調(diào)用任務(wù)實(shí)踐4-8中定義的函數(shù)來(lái)計(jì)算商品總價(jià)。任務(wù)目標(biāo)任務(wù)分析調(diào)用任務(wù)實(shí)踐4-9中的同一個(gè)自定義函數(shù)，不過(guò)調(diào)用方式不同，這里通過(guò)超鏈接來(lái)調(diào)用函數(shù)?！救蝿?wù)實(shí)踐4-10】計(jì)算商品總價(jià)——使用超鏈接調(diào)用函數(shù)<head>

<metacharset="utf-8">

<title>計(jì)算商品總價(jià)——通過(guò)超鏈接調(diào)用函數(shù)</title>

<scripttype="text/javascript">

functioncalculateTotalPrice(){

letunitPrice=30;//單價(jià)

letquantity=5;

//數(shù)量

lettotalPrice=unitPrice*quantity;//總價(jià)

document.write("商品的總價(jià)為："+totalPrice+"元");

}

</script></head><body>

<ahref="javascript:calculateTotalPrice();">計(jì)算商品總價(jià)</a></body>【任務(wù)實(shí)踐4-10】計(jì)算商品總價(jià)——使用超鏈接調(diào)用函數(shù)JavaScript函數(shù)在定義和調(diào)用時(shí)是可以有參數(shù)和返回值的。1.函數(shù)的參數(shù)創(chuàng)建自定義函數(shù)時(shí)，可以在函數(shù)名后的括號(hào)中指定參數(shù)，這些參數(shù)在函數(shù)被調(diào)用時(shí)接收傳入的值。4.3.2函數(shù)的參數(shù)和返回值function函數(shù)名([參數(shù)1],[參數(shù)2]…){

函數(shù)體；

[return表達(dá)式;]}1.函數(shù)的參數(shù)我們把定義函數(shù)時(shí)指定的參數(shù)稱為形式參數(shù)，簡(jiǎn)稱形參；而把調(diào)用函數(shù)時(shí)為形參實(shí)際傳遞值的參數(shù)稱為實(shí)際參數(shù)，簡(jiǎn)稱實(shí)參。如果定義的函數(shù)中有參數(shù)，那么調(diào)用這種函數(shù)的方式如下所示4.3.2函數(shù)的參數(shù)和返回值函數(shù)名(實(shí)參1,實(shí)參2,…);【任務(wù)實(shí)踐4-11】計(jì)算任意商品總價(jià)——有參函數(shù)通過(guò)定義有參函數(shù)計(jì)算商品的總價(jià)任務(wù)目標(biāo)任務(wù)分析為了計(jì)算任意數(shù)量和單價(jià)的商品總價(jià)，定義有參函數(shù)，這樣的程序更加通用和靈活。定義函數(shù)時(shí)設(shè)置兩個(gè)形參：unitPrice（單價(jià)）和quantity（數(shù)量）。函數(shù)內(nèi)部將計(jì)算總價(jià)，即unitPrice*quantity。調(diào)用函數(shù)時(shí)，提供具體的商品單價(jià)和購(gòu)買數(shù)量作為實(shí)參?！救蝿?wù)實(shí)踐4-11】計(jì)算任意商品總價(jià)——有參函數(shù)

<scripttype="text/javascript">

//定義有參函數(shù)

functioncalculateTotalPrice(unitPrice,quantity){

lettotalPrice=unitPrice*quantity;//總價(jià)

document.write("商品的總價(jià)為："+totalPrice+"元");

}

calculateTotalPrice(23,5);

</script>【任務(wù)實(shí)踐4-11】計(jì)算任意商品總價(jià)——有參函數(shù)2.函數(shù)的返回值函數(shù)的返回值是指函數(shù)在調(diào)用后獲得的數(shù)據(jù)。在定義函數(shù)時(shí)，可以為函數(shù)指定一個(gè)返回值，函數(shù)的返回值可以是任何類型的數(shù)據(jù)。在JavaScript中使用return語(yǔ)句得到返回值并退出函數(shù)。這條語(yǔ)句的作用是結(jié)束函數(shù)體的執(zhí)行，并把表達(dá)式的值作為函數(shù)的返回值。4.3.2函數(shù)的參數(shù)和返回值return表達(dá)式;【任務(wù)實(shí)踐4-12】計(jì)算兩個(gè)成績(jī)的平均值——return語(yǔ)句的簡(jiǎn)單應(yīng)用定義一個(gè)函數(shù)，用于計(jì)算兩個(gè)成績(jī)的平均值，并通過(guò)return語(yǔ)句返回結(jié)果。任務(wù)目標(biāo)任務(wù)分析用戶輸入兩個(gè)成績(jī)。定義函數(shù)計(jì)算這兩個(gè)成績(jī)的平均值，接收用戶輸入的兩個(gè)成績(jī)作為參數(shù)。函數(shù)返回計(jì)算出的平均值?！救蝿?wù)實(shí)踐4-12】計(jì)算兩個(gè)成績(jī)的平均值——return語(yǔ)句的簡(jiǎn)單應(yīng)用

<scripttype="text/javascript">

functioncalculateAverage(score1,score2){

letaverage=(score1+score2)/2;

returnaverage;//返回兩個(gè)成績(jī)的平均值

}

letscore1=parseFloat(prompt("請(qǐng)輸入第一個(gè)成績(jī):"));

letscore2=parseFloat(prompt("請(qǐng)輸入第二個(gè)成績(jī):"));

letaverageScore=calculateAverage(score1,score2);

alert("兩個(gè)成績(jī)的平均值為："+averageScore);

</script>【任務(wù)實(shí)踐4-12】計(jì)算兩個(gè)成績(jī)的平均值——return語(yǔ)句的簡(jiǎn)單應(yīng)用在函數(shù)內(nèi)部，變量的作用域規(guī)則尤為關(guān)鍵，直接影響到數(shù)據(jù)的封裝、生命周期及避免沖突。ES6引入let和const后，JavaScript在函數(shù)內(nèi)部存在兩種主要的局部作用域機(jī)制。4.3.4變量的作用域（函數(shù)/塊級(jí)）特性函數(shù)作用域（var）塊級(jí)作用域（let/const）作用范圍整個(gè)函數(shù)體（含嵌套塊）僅聲明所在的代碼塊

{}

(如

if、for、while)聲明位置可在全局環(huán)境或函數(shù)內(nèi)任意位置聲明（全局聲明對(duì)應(yīng)全局作用域，函數(shù)內(nèi)聲明對(duì)應(yīng)函數(shù)作用域）可在全局環(huán)境或代碼塊內(nèi)（如if、for、{}）聲明（全局聲明對(duì)應(yīng)全局塊級(jí)作用域，代碼塊內(nèi)聲明對(duì)應(yīng)局部塊級(jí)作用域）提升（Hoisting）變量聲明提升至函數(shù)頂部（初始為undefined）存在暫時(shí)性死區(qū)（TemporalDeadZone，TDZ），聲明前訪問(wèn)會(huì)報(bào)錯(cuò)重復(fù)聲明允許在同一函數(shù)內(nèi)重復(fù)聲明同名變量（易導(dǎo)致覆蓋）禁止在同一塊內(nèi)重復(fù)聲明同名變量

（編譯時(shí)報(bào)錯(cuò)）生命周期隨函數(shù)執(zhí)行結(jié)束而銷毀隨代碼塊執(zhí)行結(jié)束而銷毀【任務(wù)實(shí)踐4-13】輸出變量的值——變量的作用域通過(guò)代碼運(yùn)行結(jié)果，直觀感受全局作用域、函數(shù)作用域（局部）和塊級(jí)作用域的差異。任務(wù)目標(biāo)任務(wù)分析聲明全局變量a并賦值，觀察其在函數(shù)內(nèi)外的訪問(wèn)結(jié)果。在函數(shù)內(nèi)用var聲明同名變量a（函數(shù)作用域），驗(yàn)證“遮蔽”現(xiàn)象及函數(shù)內(nèi)外的訪問(wèn)差異。在for循環(huán)中用let聲明同名變量a（塊級(jí)作用域），驗(yàn)證其僅在循環(huán)塊內(nèi)有效的特性。最終驗(yàn)證全局變量a的值是否不受局部變量影響?！救蝿?wù)實(shí)踐4-13】輸出變量的值——變量的作用域

<scripttype="text/javascript">

//1.聲明全局變量a（全局作用域）

vara="我是全局變量";

document.write("初始全局變量a："+a+"<br>");//輸出全局變量

//2.定義函數(shù)，內(nèi)部聲明同名函數(shù)作用域變量a

functiontestScope(){

vara="我是局部變量（函數(shù)作用域）";//函數(shù)內(nèi)用var聲明，僅在函數(shù)內(nèi)可見

document.write("函數(shù)內(nèi)部的a："+a+"<br>");//優(yōu)先訪問(wèn)函數(shù)內(nèi)變量（遮蔽全局變量）

}

//調(diào)用函數(shù)，執(zhí)行函數(shù)內(nèi)邏輯

testScope();【任務(wù)實(shí)踐4-13】輸出變量的值——變量的作用域

//3.函數(shù)外部訪問(wèn)a（仍為全局變量）

document.write("函數(shù)外部的a："+a+"<br>");

//4.用let在for循環(huán)塊內(nèi)聲明同名變量a（塊級(jí)作用域）

document.write("-----循環(huán)內(nèi)的塊級(jí)變量a-----<br>");

for(leta=0;a<2;a++){

document.write("循環(huán)內(nèi)部的a："+a+"<br>");//僅在循環(huán)塊內(nèi)可見

}

//5.循環(huán)外部訪問(wèn)a（仍為全局變量）

document.write("-----循環(huán)外部的a-----<br>");

document.write("循環(huán)外部的a："+a+"<br>");

</script>函數(shù)的嵌套是指在一個(gè)函數(shù)內(nèi)包含另外一個(gè)函數(shù)。在JavaScript中，一個(gè)函數(shù)體內(nèi)的語(yǔ)句可以調(diào)用另外一個(gè)函數(shù)，這就是函數(shù)的嵌套調(diào)用。在函數(shù)嵌套調(diào)用時(shí)，被調(diào)用的函數(shù)應(yīng)該先寫好，否則不能完成函數(shù)的嵌套調(diào)用。4.3.5函數(shù)的嵌套【任務(wù)實(shí)踐4-14】計(jì)算累加和——函數(shù)嵌套的應(yīng)用

使用函數(shù)嵌套來(lái)計(jì)算一個(gè)特定數(shù)列的累加和。任務(wù)目標(biāo)任務(wù)分析編寫一個(gè)函數(shù)sumToN()來(lái)計(jì)算1～n的累加和。編寫另一個(gè)函數(shù)totalSum()來(lái)嵌套調(diào)用函數(shù)sumToN()，并累加每個(gè)子數(shù)列的和?！救蝿?wù)實(shí)踐4-14】計(jì)算累加和——函數(shù)嵌套的應(yīng)用函數(shù)進(jìn)階任務(wù)4.4函數(shù)表達(dá)式是指將聲明的函數(shù)賦值給一個(gè)變量，通過(guò)變量完成函數(shù)的調(diào)用。自定義函數(shù)通常是通過(guò)function關(guān)鍵字明確聲明的函數(shù)，而函數(shù)表達(dá)式則是將函數(shù)賦值給變量或?qū)傩缘谋磉_(dá)式形式4.4.1函數(shù)表達(dá)式varfn=functiongetSum(num1,num2){returnnum1+num2;};fn(2,4);顧名思義，匿名函數(shù)就是沒(méi)有名稱的函數(shù)，它是函數(shù)表達(dá)式的另一種形式。匿名函數(shù)在函數(shù)表達(dá)式的基礎(chǔ)上去掉了函數(shù)名。觀察匿名函數(shù)的調(diào)用，通過(guò)“變量名(

)”的形式，可以將整個(gè)function部分替換成“變量名”，于是就有了如下的自調(diào)用方式。4.4.2匿名函數(shù)//匿名函數(shù)的自調(diào)用方式

function(num1,num2){returnnum1+num2;}(4,5);ES6中新引入了一種匿名函數(shù)，稱為箭頭函數(shù)。使用ES6箭頭函數(shù)語(yǔ)法定義函數(shù)，需將原函數(shù)的function關(guān)鍵字刪掉，并使用“=>”連接參數(shù)列表和函數(shù)體。4.4.3箭頭函數(shù)箭頭函數(shù)相當(dāng)于匿名函數(shù)，并且簡(jiǎn)化了函數(shù)定義。箭頭函數(shù)有兩種核心格式，對(duì)應(yīng)不同的函數(shù)體場(chǎng)景?！?/p>

單表達(dá)式函數(shù)體：函數(shù)體僅包含一條表達(dá)式時(shí)，可省略花括號(hào){}和return關(guān)鍵字，表達(dá)式結(jié)果會(huì)被隱式返回?！穸嗾Z(yǔ)句函數(shù)體：函數(shù)體包含多條語(yǔ)句時(shí)，必須用花括號(hào){}包裹，若需返回值，則需顯式使用return。4.4.3箭頭函數(shù)【任務(wù)實(shí)踐4-15】繪制星號(hào)三角形圖案——箭頭函數(shù)使用箭頭函數(shù)來(lái)繪制一個(gè)由星號(hào)組成的三角形圖案。任務(wù)目標(biāo)任務(wù)分析定義一個(gè)箭頭函數(shù)drawTriangle()，它接收一個(gè)參數(shù)n，代表三角形圖案的層數(shù)。函數(shù)內(nèi)部使用嵌套的循環(huán)來(lái)輸出相應(yīng)層數(shù)的三角形圖案。使用prompt()函數(shù)來(lái)獲取用戶輸入的層數(shù)，并調(diào)用drawTriangle()函數(shù)來(lái)繪制三角形圖案?！救蝿?wù)實(shí)踐4-15】繪制星號(hào)三角形圖案——箭頭函數(shù)

<scripttype="text/javascript">

constdrawTriangle=n=>{

for(leti=1;i<=n;i++){

//打印空格

for(letj=1;j<=n-i;j++){

document.write("  ");

}

//打印星號(hào)

for(letk=1;k<=i;k++){

document.write("*");

document.write("  ");

}

//換行

document.write("<br/>");

}

};

constnum=prompt("請(qǐng)輸入三角形圖案的層數(shù)","3");

drawTriangle(parseInt(num,10));//將輸入的字符串轉(zhuǎn)換為整數(shù)

</script>【能力提升】閉包函數(shù)閉包函數(shù)是指能夠訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)。也就是說(shuō)，當(dāng)一個(gè)函數(shù)返回另一個(gè)內(nèi)層函數(shù)，且該內(nèi)層函數(shù)引用了外層函數(shù)內(nèi)部的變量時(shí)，就產(chǎn)生了閉包。functionfn1(){vara=1;functionfn(){a++;console.log(a);//輸出2}returnfn;}【能力提升】閉包函數(shù)利用這種嵌套方式產(chǎn)生的函數(shù)就是閉包函數(shù)，閉包函數(shù)的作用是讓內(nèi)層函數(shù)能夠訪問(wèn)外層函數(shù)的局部變量，外層函數(shù)執(zhí)行完畢，其局部變量因被內(nèi)層函數(shù)引用而不會(huì)被垃圾回收機(jī)制銷毀。調(diào)用上述函數(shù)的代碼如下。functionfn1(){varx=fn1();x(); //結(jié)果是2x(); //結(jié)果是3根據(jù)項(xiàng)目要求，編寫函數(shù)計(jì)算個(gè)人所得稅。由于應(yīng)納稅所得額的判斷條件是連續(xù)的范圍區(qū)間（如“不超過(guò)

36000

元”“36000

元至

144000

元”等），將個(gè)稅計(jì)算邏輯封裝為函數(shù)，結(jié)合

if…elseif…else多分支結(jié)構(gòu)，既能實(shí)現(xiàn)代碼復(fù)用，又能讓邏輯直觀清晰，因此選擇這種實(shí)現(xiàn)方案。項(xiàng)目分析1.頁(yè)面布局設(shè)計(jì)項(xiàng)目實(shí)施<!DOCTYPEhtml><html><head>

<metacharset="utf-8">

<title>個(gè)人所得稅計(jì)算器</title>

<style>

/*CSS樣式將在此處定義*/

</style></head><body>

<pstyle="text-align:center;">

<inputtype="button"value="計(jì)算個(gè)人所得稅"onclick="calculate()">

</p>

<scripttype="text/javascript">

//JavaScript代碼將在此處定義

</script></body></html>2.頁(yè)面美化設(shè)計(jì)項(xiàng)目實(shí)施

<style>

p{