第4章 函數(shù) 教學(xué)設(shè)計(jì)

第3章面向?qū)ο螅ㄉ希禞avaScript前端開(kāi)發(fā)案例教程》教學(xué)設(shè)計(jì)課程名稱：JavaScript前端開(kāi)發(fā)案例教程授課年級(jí)：年級(jí)授課學(xué)期：學(xué)年第一學(xué)期教師姓名：年月日課題名稱第4章函數(shù)計(jì)劃學(xué)時(shí)5學(xué)時(shí)內(nèi)容分析函數(shù)是JavaScript中最常用的功能之一，它可以避免相同功能代碼的重復(fù)編寫(xiě)，將程序中的代碼模塊化，提高程序的可讀性，減少開(kāi)發(fā)者的工作量，便于后期的維護(hù)。例如，在計(jì)算班級(jí)學(xué)生的平均分時(shí)，每計(jì)算一個(gè)學(xué)生的平均分，都要編寫(xiě)一段功能相同的代碼，這樣會(huì)導(dǎo)致代碼量大大增加。為此，JavaScript提供了函數(shù)，通過(guò)函數(shù)可以將計(jì)算平均分的代碼進(jìn)行封裝，在使用時(shí)直接調(diào)用即可，無(wú)需重復(fù)編寫(xiě)。本章將針對(duì)函數(shù)的內(nèi)容進(jìn)行詳細(xì)講解。教學(xué)目標(biāo)及基本要求掌握函數(shù)的使用方法掌握變量的作用域掌握匿名函數(shù)與閉包函數(shù)教學(xué)重點(diǎn)函數(shù)的創(chuàng)建和使用、變量的作用域、匿名與回調(diào)函數(shù)、閉包函數(shù)教學(xué)難點(diǎn)函數(shù)嵌套與作用域鏈、閉包函數(shù)教學(xué)方式教學(xué)采用教師課堂講授為主概念性知識(shí)點(diǎn)：提出為什么，將抽象具體化，配合教學(xué)PPT、圖例輔助講解。功能性知識(shí)點(diǎn)：提需求，并上機(jī)演示如何應(yīng)用，重點(diǎn)內(nèi)容總結(jié)運(yùn)行原理。綜合實(shí)戰(zhàn)操作：分析整體的設(shè)計(jì)思路和步驟，對(duì)具體操作進(jìn)行上機(jī)演練。教學(xué)過(guò)程第一學(xué)時(shí)（初識(shí)函數(shù)、參數(shù)設(shè)置、函數(shù)的調(diào)用、變量的作用域）一、回顧上節(jié)課內(nèi)容（1）對(duì)上節(jié)課布置的作業(yè)以及學(xué)生提出的問(wèn)題進(jìn)行答疑解惑。（2）回顧前面學(xué)過(guò)的內(nèi)容，引出本節(jié)課主題。前面學(xué)習(xí)了PHP的一些基本語(yǔ)法，包括變量、表達(dá)式、數(shù)據(jù)類型、運(yùn)算符、流程控制語(yǔ)句等，這些是最基本又很重要的內(nèi)容。然后學(xué)習(xí)了數(shù)組，用來(lái)存儲(chǔ)和管理大量的數(shù)據(jù)。接下來(lái)，本節(jié)將針對(duì)函數(shù)進(jìn)行詳細(xì)講解，掌握函數(shù)的具體使用細(xì)節(jié)，使程序代碼模塊化，提高程序的可讀性和后期的可維護(hù)性。（3）明確學(xué)習(xí)方向。能夠充分理解函數(shù)的概念。能夠獨(dú)立的完成函數(shù)的定義。熟練掌握函數(shù)的各種參數(shù)設(shè)置。理解函數(shù)中變量的作用域機(jī)制。二、知識(shí)講解初識(shí)函數(shù)回顧之前學(xué)過(guò)的函數(shù)，如parseFlost()、isNan()、parseInt()等?；仡欀熬帉?xiě)過(guò)的自定義函數(shù)。請(qǐng)學(xué)生講出自己對(duì)函數(shù)的理解，引出函數(shù)的含義、作用、以及其好處。總結(jié)自定義函數(shù)的語(yǔ)法結(jié)構(gòu)，以及返回值。注意函數(shù)的命名規(guī)則，不能使用數(shù)字開(kāi)頭。編寫(xiě)代碼實(shí)現(xiàn)求最大值、最小值等功能。編寫(xiě)一個(gè)$()函數(shù)，封裝document.getElementById()方法，從而更方便的獲取DOM對(duì)象。函數(shù)的參數(shù)設(shè)置按照參數(shù)劃分，函數(shù)分為：無(wú)參函數(shù)和有參函數(shù)。理解形參、實(shí)參的概念，演示函數(shù)參數(shù)的傳遞。函數(shù)的形參可以不設(shè)置，在函數(shù)內(nèi)通過(guò)arguments即可獲取調(diào)用函數(shù)時(shí)傳遞的具體參數(shù)。通過(guò)arguments.length可獲取參數(shù)的數(shù)量。在ES6中，定義函數(shù)的語(yǔ)法得到了加強(qiáng)，可以為函數(shù)參數(shù)設(shè)置默認(rèn)值，或在參數(shù)數(shù)量不確定時(shí)，利用“…變量名”的方式動(dòng)態(tài)的接收參數(shù)。函數(shù)的調(diào)用講解函數(shù)調(diào)用的語(yǔ)法，實(shí)參列表的概念。通過(guò)求和的案例，演示函數(shù)的調(diào)用，以及arguments的使用。提出問(wèn)題：函數(shù)的聲明與調(diào)用的順序，可以先調(diào)用后聲明。變量的作用域分析函數(shù)的作用域問(wèn)題，測(cè)試在函數(shù)內(nèi)是否可以訪問(wèn)函數(shù)外的變量，在函數(shù)外是否可以訪問(wèn)函數(shù)內(nèi)的變量。總結(jié)變量的作用域規(guī)律，根據(jù)作用域的不同，分為全局作用域、函數(shù)作用域、塊級(jí)作用域。針對(duì)這3種作用域分別講解其特點(diǎn)，并能夠通過(guò)代碼演示。垃圾回收機(jī)制思考：函數(shù)調(diào)用完成后，其內(nèi)部的變量的值去哪里了。引出：垃圾回收機(jī)制，將局部變量釋放，節(jié)省內(nèi)存使用量。思考：如何將函數(shù)內(nèi)的局部變量保存下來(lái)。引出：兩種方式。使用return返回，或使用全局變量保存。編寫(xiě)代碼，在函數(shù)內(nèi)部使用函數(shù)外部的變量，來(lái)保存函數(shù)內(nèi)部的值，觀察能否在函數(shù)執(zhí)行完成后將值保留下來(lái)。三、【案例】字符串大小寫(xiě)轉(zhuǎn)換效果分析分析案例的實(shí)現(xiàn)效果，通過(guò)單擊網(wǎng)頁(yè)上的按鈕，實(shí)現(xiàn)對(duì)文本框內(nèi)的文本進(jìn)行大寫(xiě)、小寫(xiě)轉(zhuǎn)換，將轉(zhuǎn)換結(jié)果顯示在另一個(gè)文本框中。代碼實(shí)現(xiàn)編寫(xiě)基本頁(yè)面。為按鈕添加deal()事件函數(shù)，用于單擊后調(diào)用函數(shù)執(zhí)行轉(zhuǎn)換操作。為deal()函數(shù)傳遞參數(shù)（upper、lower），表示執(zhí)行轉(zhuǎn)大寫(xiě)還是轉(zhuǎn)小寫(xiě)的操作。在deal()函數(shù)中，通過(guò)switch判斷操作類型。分析如何實(shí)現(xiàn)字符串大小寫(xiě)轉(zhuǎn)換，利用str.toLowerCase()、str.toUpperCase()方法來(lái)實(shí)現(xiàn)具體功能。四、知識(shí)鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）使用博學(xué)谷系統(tǒng)下發(fā)課后作業(yè)。第二學(xué)時(shí)（函數(shù)表達(dá)式、匿名函數(shù)、回調(diào)函數(shù)）一、回顧上節(jié)課內(nèi)容（1）對(duì)上節(jié)課布置的作業(yè)以及學(xué)生提出的問(wèn)題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。（3）明確學(xué)習(xí)方向。了解函數(shù)表達(dá)式的概念，能夠區(qū)分函數(shù)表達(dá)式和普通函數(shù)的區(qū)別。掌握匿名函數(shù)的代碼編寫(xiě)和應(yīng)用。了解ES6新增語(yǔ)法箭頭函數(shù)的使用。掌握回調(diào)函數(shù)的代碼編寫(xiě)和應(yīng)用。二、知識(shí)講解函數(shù)表達(dá)式講解什么是函數(shù)表達(dá)式，函數(shù)表達(dá)式的代碼如何編寫(xiě)。注意函數(shù)表達(dá)式與函數(shù)聲明的區(qū)別，若函數(shù)表達(dá)式寫(xiě)在函數(shù)調(diào)用的前面，將無(wú)法被調(diào)用。匿名函數(shù)作用：沒(méi)有名稱的函數(shù)，可避免全局變量命名污染即函數(shù)沖突問(wèn)題。演示匿名函數(shù)的3種實(shí)現(xiàn)方式，方式1：省略函數(shù)名，方式2：自調(diào)用，方式3：處理事件時(shí)寫(xiě)的函數(shù)。分析3種方式的優(yōu)缺點(diǎn)，以及應(yīng)用場(chǎng)景。箭頭函數(shù)作用：ES6新增的語(yǔ)法，方便代碼書(shū)寫(xiě)。演示箭頭函數(shù)的4種用法。對(duì)比講解箭頭函數(shù)代碼與普通函數(shù)的代碼。通過(guò)代碼演示箭頭函數(shù)的使用，設(shè)置1個(gè)參數(shù)與設(shè)置2個(gè)參數(shù)的語(yǔ)法?；卣{(diào)函數(shù)作用：將函數(shù)作為參數(shù)傳遞給另一個(gè)函數(shù)，然后調(diào)用這個(gè)函數(shù)。特點(diǎn)：根據(jù)傳入的函數(shù)不同，執(zhí)行結(jié)果不同。通過(guò)代碼演示的具體實(shí)現(xiàn)。在JavaScript中，有一些數(shù)組方法支持使用回調(diào)函數(shù)，如find()、every()、some()、forEach()、map()、reduce()、reduceRight()等。演示這些方法的使用。三、知識(shí)鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）使用博學(xué)谷系統(tǒng)下發(fā)課后作業(yè)。第三學(xué)時(shí)（函數(shù)嵌套與作用域鏈、遞歸調(diào)用）一、回顧上節(jié)課內(nèi)容（1）對(duì)上節(jié)課布置的作業(yè)以及學(xué)生提出的問(wèn)題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。（3）明確學(xué)習(xí)方向。理解函數(shù)嵌套調(diào)用的概念。理解函數(shù)嵌套情況下的作用域鏈機(jī)制。掌握函數(shù)遞歸調(diào)用的原理與實(shí)現(xiàn)。掌握“求斐波那契數(shù)列第N項(xiàng)值”的案例代碼實(shí)現(xiàn)。二、知識(shí)講解函數(shù)嵌套與作用域鏈通過(guò)代碼演示如何在函數(shù)中嵌套函數(shù)。測(cè)試在函數(shù)嵌套情況下，訪問(wèn)變量時(shí)，變量的向上查找機(jī)制?？偨Y(jié)作用域鏈機(jī)制。遞歸調(diào)用通過(guò)代碼演示函數(shù)的遞歸調(diào)用。演示函數(shù)遞歸調(diào)用的應(yīng)用，實(shí)現(xiàn)計(jì)算指定數(shù)據(jù)的階乘。畫(huà)圖分析函數(shù)的遞歸調(diào)用執(zhí)行過(guò)程?？偨Y(jié)函數(shù)遞歸調(diào)用的優(yōu)缺點(diǎn)。適合進(jìn)行數(shù)學(xué)計(jì)算、遍歷維數(shù)不固定的多維數(shù)組。但要注意，遞歸調(diào)用會(huì)導(dǎo)致占用較多的內(nèi)存空間和資源，在開(kāi)發(fā)時(shí)要慎重使用。三、【案例】求斐波那契數(shù)列第N項(xiàng)的值案例分析介紹什么是斐波那契數(shù)列。演示示例“1,1,2,3,5,8,13,21……”。分析示例，找出規(guī)律。即從第3項(xiàng)開(kāi)始，每一項(xiàng)等于前兩項(xiàng)數(shù)字之和。代碼實(shí)現(xiàn)思考如何通過(guò)編程實(shí)現(xiàn)輸出斐波那契數(shù)列。思考如何計(jì)算斐波那契數(shù)列的第N項(xiàng)值。利用遞歸函數(shù)實(shí)現(xiàn)計(jì)算。函數(shù)的參數(shù)n：表示求斐波那契數(shù)列中第幾項(xiàng)的值。在函數(shù)中判斷n的值，如果等于0返回0，等于1返回1，大于1則進(jìn)行遞歸調(diào)用。四、知識(shí)鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）使用博學(xué)谷系統(tǒng)下發(fā)課后作業(yè)。第四學(xué)時(shí)（什么是閉包函數(shù)、閉包函數(shù)的實(shí)現(xiàn)、動(dòng)手實(shí)踐：網(wǎng)頁(yè)計(jì)算器）一、回顧上節(jié)課內(nèi)容（1）對(duì)上節(jié)課布置的作業(yè)以及學(xué)生提出的問(wèn)題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。前面講解了函數(shù)表達(dá)式、匿名函數(shù)、回調(diào)函數(shù)等。JavaScript將函數(shù)設(shè)計(jì)的非常靈活，它還支持閉包函數(shù)，在實(shí)際開(kāi)發(fā)中，閉包函數(shù)也是非常實(shí)用的一個(gè)功能。本節(jié)將結(jié)合案例，對(duì)閉包函數(shù)進(jìn)行詳細(xì)講解。（3）明確學(xué)習(xí)方向。理解什么是閉包函數(shù)。理解閉包函數(shù)的特點(diǎn)和應(yīng)用場(chǎng)景。掌握閉包函數(shù)的實(shí)現(xiàn)。二、知識(shí)講解什么是閉包函數(shù)特點(diǎn)：內(nèi)嵌函數(shù)可以訪問(wèn)定義在外層函數(shù)中的所有變量和函數(shù)，并包括其外層函數(shù)能訪問(wèn)的所有變量和函數(shù)。但是在函數(shù)外部則不能訪問(wèn)函數(shù)的內(nèi)部變量和嵌套函數(shù)。作用1：可以在函數(shù)外部讀取函數(shù)內(nèi)部的變量。作用2：可以讓變量的值保持在內(nèi)存中。閉包函數(shù)的實(shí)現(xiàn)在函數(shù)中，通過(guò)return返回一個(gè)函數(shù)，然后在調(diào)用函數(shù)時(shí)，接收這個(gè)返回的函數(shù)。此時(shí)，就可以實(shí)現(xiàn)在函數(shù)外調(diào)用函數(shù)內(nèi)部定義的函數(shù)。三、【動(dòng)手實(shí)踐】網(wǎng)頁(yè)計(jì)算器案例分析展示案例完成后的效果，對(duì)功能進(jìn)行分析。代碼實(shí)現(xiàn)設(shè)計(jì)網(wǎng)頁(yè)計(jì)算器的基本頁(yè)面。提供兩個(gè)文本框，用來(lái)輸入數(shù)字，然后提供4個(gè)按鈕，分別表示加、減、乘、除，用來(lái)對(duì)數(shù)字進(jìn)行計(jì)算。編寫(xiě)add()、sub()、mul()、div()這4個(gè)函數(shù)，分部用于加法、減法、乘法、除法的運(yùn)算。編寫(xiě)calc()函數(shù)，當(dāng)單擊按鈕時(shí)，通過(guò)onclick事件調(diào)用此函數(shù)。該函數(shù)的參數(shù)func是一個(gè)回調(diào)函數(shù)，用來(lái)根據(jù)回調(diào)函數(shù)執(zhí)行具體的計(jì)算。例如，當(dāng)單擊“加”按鈕時(shí)，就調(diào)用calc()函數(shù)并將a