《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》 教案-教學(xué)設(shè)計(jì) 第3章 數(shù)組

博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效PAGE12PAGE6《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》教學(xué)設(shè)計(jì)課程名稱：授課年級：授課學(xué)期：教師姓名：年月課題名稱第3章數(shù)組計(jì)劃課時(shí)6課時(shí)教學(xué)引入數(shù)組用于將一組數(shù)據(jù)集合在一起。將數(shù)組賦值給一個(gè)變量后，通過變量就可以訪問一組數(shù)據(jù)。在JavaScript中，使用數(shù)組可以很方便地對數(shù)據(jù)進(jìn)行分類和批量處理。本章將對數(shù)組進(jìn)行詳細(xì)講解，包括初識數(shù)組、創(chuàng)建數(shù)組、數(shù)組的基本操作、數(shù)組元素排序和二維數(shù)組。教學(xué)目標(biāo)使學(xué)生了解數(shù)組的概念，能夠描述數(shù)組的組成使學(xué)生掌握數(shù)組的創(chuàng)建，能夠靈活運(yùn)用數(shù)組字面量的方式創(chuàng)建數(shù)組使學(xué)生掌握獲取和修改數(shù)組長度的方法，能夠?qū)崿F(xiàn)數(shù)組長度的獲取和修改使學(xué)生掌握訪問數(shù)組的方法，能夠訪問數(shù)組元素使學(xué)生掌握遍歷數(shù)組的方法，能夠使用for語句實(shí)現(xiàn)數(shù)組的遍歷使學(xué)生掌握添加、修改、刪除和篩選數(shù)組元素的方法，能夠?qū)崿F(xiàn)添加、修改、刪除和篩選數(shù)組元素使學(xué)生掌握反轉(zhuǎn)數(shù)組元素順序的方法，能夠?qū)崿F(xiàn)數(shù)組元素順序的反轉(zhuǎn)使學(xué)生掌握數(shù)組的排序，能夠?qū)崿F(xiàn)數(shù)組的冒泡排序和插入排序使學(xué)生掌握創(chuàng)建與訪問二維數(shù)組的方法，能夠?qū)崿F(xiàn)二維數(shù)組的創(chuàng)建與訪問使學(xué)生掌握遍歷二維數(shù)組的方法，能夠?qū)崿F(xiàn)二維數(shù)組的遍歷教學(xué)重點(diǎn)創(chuàng)建數(shù)組獲取和修改數(shù)組長度訪問數(shù)組遍歷數(shù)組添加和修改數(shù)組元素刪除數(shù)組元素篩選數(shù)組元素反轉(zhuǎn)數(shù)組元素順序冒泡排序插入排序創(chuàng)建與訪問二維數(shù)組遍歷二維數(shù)組教學(xué)難點(diǎn)【案例】查找班級最高分和最低分冒泡排序插入排序【案例】使用二維數(shù)組實(shí)現(xiàn)矩陣轉(zhuǎn)置教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進(jìn)行教學(xué)教學(xué)過程第一、二課時(shí)（初識數(shù)組、創(chuàng)建數(shù)組、獲取和修改數(shù)組長度、訪問數(shù)組、遍歷數(shù)組、添加和修改數(shù)組元素、刪除數(shù)組元素、篩選數(shù)組元素、反轉(zhuǎn)數(shù)組元素順序、【案例】查找班級最高分和最低分）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點(diǎn)進(jìn)行再次鞏固講解。二、通過需求引入的方式導(dǎo)入新課在實(shí)際開發(fā)中，經(jīng)常需要保存一批相關(guān)聯(lián)的數(shù)據(jù)并進(jìn)行處理。例如，保存一個(gè)班級中所有學(xué)生的語文考試成績并計(jì)算這些成績的平均分。雖然我們可以通過多個(gè)變量分別保存每位學(xué)生的考試成績，再將這些變量相加后除以班級人數(shù)，求出平均分，但是這種方式非常麻煩和低效。此時(shí)，可以使用JavaScript中的數(shù)組來保存班級內(nèi)每位學(xué)生的成績，然后通過對數(shù)組的處理求出平均分，這種方式不僅簡單，而且開發(fā)效率更高。下面本節(jié)課將對JavaScript中的數(shù)組和數(shù)組的基本操作進(jìn)行講解。三、新課講解知識點(diǎn)1-初識數(shù)組教師通過PPT的方式講解初識數(shù)組。數(shù)組的組成。數(shù)組中索引和值的關(guān)系。知識點(diǎn)2-創(chuàng)建數(shù)組教師通過PPT結(jié)合實(shí)際操作的方式講解創(chuàng)建數(shù)組。使用數(shù)組字面量“[]”創(chuàng)建數(shù)組的語法格式。數(shù)組中包含空位的語法格式。通過代碼演示如何使用數(shù)組字面量“[]”創(chuàng)建數(shù)組。知識點(diǎn)3-獲取和修改數(shù)組長度教師通過PPT結(jié)合實(shí)際操作的方式講解獲取和修改數(shù)組長度。什么是數(shù)組長度。獲取數(shù)組長度。獲取數(shù)組長度的語法格式通過代碼演示如何獲取數(shù)組長度修改數(shù)組長度。修改數(shù)組長度的語法通過代碼演示如何修改數(shù)組長度知識點(diǎn)4-訪問數(shù)組教師通過PPT結(jié)合實(shí)際操作的方式講解訪問數(shù)組。訪問數(shù)組的語法格式。通過代碼演示如何在創(chuàng)建數(shù)組后訪問數(shù)組。知識點(diǎn)5-遍歷數(shù)組教師通過PPT結(jié)合實(shí)際操作的方式講解遍歷數(shù)組。什么是遍歷數(shù)組。遍歷數(shù)組的語法格式。以求班級中語文成績的平均分為例演示遍歷數(shù)組的使用。知識點(diǎn)6-添加和修改數(shù)組元素教師通過PPT結(jié)合實(shí)際操作的方式講解添加和修改數(shù)組元素。什么是添加數(shù)組元素。什么是修改數(shù)組元素。添加和修改數(shù)組元素的語法格式。通過代碼演示如何添加和修改數(shù)組元素。通過for語句為數(shù)組添加多個(gè)數(shù)組元素。知識點(diǎn)7-刪除數(shù)組元素教師通過PPT結(jié)合實(shí)際操作的方式講解刪除數(shù)組元素。刪除數(shù)組元素的語法格式。通過代碼演示如何刪除數(shù)組元素。知識點(diǎn)8-篩選數(shù)組元素教師通過PPT結(jié)合實(shí)際操作的方式講解篩選數(shù)組元素。通過for語句和if語句實(shí)現(xiàn)篩選數(shù)組元素的功能。通過代碼演示篩選所有大于或等于80分的學(xué)生成績，并將篩選出來的成績保存到一個(gè)新的數(shù)組中。知識點(diǎn)9-反轉(zhuǎn)數(shù)組元素順序教師通過PPT結(jié)合實(shí)際操作的方式講解反轉(zhuǎn)數(shù)組元素順序。什么是反轉(zhuǎn)數(shù)組元素順序。通過代碼演示數(shù)組元素的反轉(zhuǎn)。知識點(diǎn)10-【案例】查找班級最高分和最低分教師通過PPT結(jié)合實(shí)際操作的方式講解【案例】查找班級最高分和最低分。實(shí)現(xiàn)本案例的具體思路是：假設(shè)數(shù)組中第一個(gè)元素為最大值，使用for語句從數(shù)組索引為1的元素開始遍歷到最后一個(gè)元素，將當(dāng)前元素與預(yù)先設(shè)置的最大值比較。如果當(dāng)前元素比最大值大，則將當(dāng)前元素設(shè)置為最大值，再繼續(xù)比較下一個(gè)元素，遍歷完成后即可找到最大值。查找最小值的方法與查找最大值的方法類似。編寫代碼實(shí)現(xiàn)案例。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第三、四課時(shí)（冒泡排序、插入排序、創(chuàng)建與訪問二維數(shù)組、遍歷二維數(shù)組、【案例】使用二維數(shù)組實(shí)現(xiàn)矩陣轉(zhuǎn)置）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點(diǎn)進(jìn)行再次鞏固講解。二、通過直接引入的方式導(dǎo)入新課數(shù)組元素排序是指將數(shù)組中的元素排列成一個(gè)有序的序列。排序需要使用算法來完成，下面本節(jié)課將講解JavaScript中常見的數(shù)組元素排序算法以及二維數(shù)組的創(chuàng)建、訪問、遍歷。三、新課講解知識點(diǎn)1-冒泡排序教師通過PPT結(jié)合實(shí)際操作的方式講解冒泡排序。什么是冒泡排序。冒泡排序的具體過程。通過代碼演示冒泡排序的實(shí)現(xiàn)。知識點(diǎn)2-插入排序教師通過PPT結(jié)合實(shí)際操作的方式講解插入排序。什么是插入排序。插入排序的具體過程。通過代碼演示插入排序的實(shí)現(xiàn)。知識點(diǎn)3-創(chuàng)建與訪問二維數(shù)組教師通過PPT結(jié)合實(shí)際操作的方式講解創(chuàng)建與訪問二維數(shù)組。什么是二維數(shù)組。二維數(shù)組的應(yīng)用。二維數(shù)組的創(chuàng)建。通過代碼演示如何創(chuàng)建與訪問二維數(shù)組。知識點(diǎn)4-遍歷二維數(shù)組教師通過PPT結(jié)合實(shí)際操作的方式講解遍歷二維數(shù)組。通過代碼演示如何遍歷二維數(shù)組。通過一個(gè)求和的案例演示二維數(shù)組的遍歷方法。首先創(chuàng)建二維數(shù)組arr，然后使用for語句遍歷二維數(shù)組中的元素，最后進(jìn)行求和。知識點(diǎn)5-【案例】使用二維數(shù)組實(shí)現(xiàn)矩陣轉(zhuǎn)置教師通過PPT結(jié)合實(shí)際操作的方式講解【案例】使用二維數(shù)組實(shí)現(xiàn)矩陣轉(zhuǎn)置。什么是矩陣轉(zhuǎn)置。編寫代碼實(shí)現(xiàn)案例。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第五、六課時(shí)（上機(jī)練習(xí)）上機(jī)練習(xí)主要針對本章中需要重點(diǎn)掌握的知識點(diǎn)，以及在程序中容易出錯(cuò)的內(nèi)容進(jìn)行練習(xí)，通過上機(jī)練習(xí)考察學(xué)生對知識點(diǎn)的掌握情況。上機(jī)：（考察知識點(diǎn)為：遍歷數(shù)組、篩選數(shù)組元素、反轉(zhuǎn)數(shù)組元素順序、【案例】查找班級最高分和最低分、冒泡排序、插入排序、【案例】使用二維數(shù)組實(shí)現(xiàn)矩陣轉(zhuǎn)置）形式：單獨(dú)完成題目：按照要求編寫程序。具體要求：首先使用數(shù)組保存班級中所有學(xué)生的語文成績，然后通過遍歷數(shù)組對數(shù)組元素求和，最后使用求和結(jié)果除以數(shù)組的長度求出班級的語文成績平均分。將班級中所有學(xué)生的數(shù)學(xué)成績保存到數(shù)組中，然后篩選所有大于或等于80分的學(xué)生成績，并將篩選出來的成績保存到一個(gè)新的數(shù)組中。將數(shù)組['tiger','elephant','cat','dog','bear','monkey']中的元素順序反轉(zhuǎn)。把班級中所有學(xué)生的分?jǐn)?shù)保存到數(shù)組中，然后通過查找數(shù)組中最大值和最小值找到班級中分?jǐn)?shù)最高和分?jǐn)?shù)最低的