《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》 教案-教學(xué)設(shè)計 第1-3章 初識JavaScript、JavaScript基礎(chǔ)、數(shù)組

博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效PAGE12PAGE4《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》教學(xué)設(shè)計課程名稱：授課年級：授課學(xué)期：教師姓名：年月課題名稱第1章初識JavaScript計劃課時4課時教學(xué)引入Web前端開發(fā)必備的技術(shù)包括HTML（HypertextMarkupLanguage，超文本標(biāo)記語言）、CSS（CascadingStyleSheets，串聯(lián)樣式表）和JavaScript。HTML和CSS用于創(chuàng)建美觀且易于理解的網(wǎng)頁布局和頁面樣式，但對于具有交互性和動態(tài)性的網(wǎng)頁，JavaScript是必不可少的。因此，學(xué)習(xí)Web前端開發(fā)并實現(xiàn)更為復(fù)雜的交互效果和功能不僅需要掌握HTML和CSS的基礎(chǔ)知識，還需要掌握J(rèn)avaScript技術(shù)。本章將介紹JavaScript基本概念、JavaScript開發(fā)工具、JavaScript基本使用和變量等內(nèi)容，讓讀者對JavaScript有初步的認(rèn)識。教學(xué)目標(biāo)使學(xué)生了解JavaScript基本概念，能夠描述JavaScript的作用、由來、組成和特點使學(xué)生了解瀏覽器的組成，能夠描述瀏覽器的特點以及作用使學(xué)生掌握下載和安裝VisualStudioCode編輯器的方法，能夠獨立下載和安裝編輯器使學(xué)生掌握J(rèn)avaScript代碼的引入方式，能夠靈活運用行內(nèi)式、內(nèi)部式、外部式的方式引入JavaScript代碼使學(xué)生掌握J(rèn)avaScript常用的輸入輸出語句，能夠靈活運用prompt()、alert()、document.write()、document.log()語句使學(xué)生掌握J(rèn)avaScript注釋的使用，能夠合理運用單行注釋、多行注釋增強代碼的可讀性使學(xué)生了解什么是變量，能夠描述變量的概念使學(xué)生掌握變量的命名規(guī)則，能夠根據(jù)變量的命名規(guī)則為變量命名使學(xué)生掌握變量的聲明與賦值，能夠聲明變量并為其賦值教學(xué)重點JavaScript代碼引入方式JavaScript常用的輸入輸出語句JavaScript注釋變量的命名規(guī)則變量的聲明與賦值教學(xué)難點【案例】交換兩個變量的值教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進(jìn)行教學(xué)教學(xué)過程第一課時（JavaScript概述、JavaScript的由來、JavaScript的組成、JavaScript的特點、瀏覽器、代碼編輯器）一、通過直接引入的方式導(dǎo)入新課學(xué)習(xí)任何一種語言，我們都需要了解其基本概念，JavaScript也不例外。本節(jié)課將對JavaScript的基本概念和開發(fā)工具進(jìn)行講解。通過本節(jié)課的學(xué)習(xí)，讓大家對JavaScript有一個初步的認(rèn)識，為后續(xù)學(xué)習(xí)交互式的開發(fā)奠定基礎(chǔ)。二、新課講解知識點1-JavaScript概述教師通過PPT的方式講解JavaScript概述。JavaScript的概念和作用。HTML、CSS和JavaScript的說明。知識點2-JavaScript的由來教師通過PPT的方式講解JavaScript的由來。為什么會出現(xiàn)JavaScript。JavaScript是如何走向標(biāo)準(zhǔn)化的。JavaScript和ECMAScript的關(guān)系。知識點3-JavaScript的組成教師通過PPT的方式講解JavaScript的組成。對JavaScript的3個組成部分進(jìn)行介紹。ECMAScriptDOMBOM知識點4-JavaScript的特點教師通過PPT的方式講解JavaScript的特點。對JavaScript的3個特點進(jìn)行介紹。簡單易用跨平臺面向?qū)ο笾R點5-瀏覽器教師通過PPT的方式講解瀏覽器。瀏覽器的概念。常見的瀏覽器及其特點。瀏覽器的組成。知識點6-代碼編輯器教師通過PPT結(jié)合實際操作的方式講解代碼編輯器。常見的JavaScript代碼編輯器。VisualStudioCode代碼編輯器的特點。下載和安裝VisualStudioCode代碼編輯器。安裝中文語言擴展。安裝LiveServer擴展。創(chuàng)建項目文件夾。三、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。四、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第二課時（JavaScript初體驗、JavaScript代碼引入方式、JavaScript常用的輸入輸出語句、JavaScript注釋）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點進(jìn)行再次鞏固講解。二、通過直接引入的方式導(dǎo)入新課在上一節(jié)中講解了JavaScript的基本概念和開發(fā)工具，下面本節(jié)課將會講解JavaScript的基本使用，包括JavaScript初體驗、JavaScript代碼引入方式、JavaScript常用的輸入輸出語句和JavaScript注釋。三、新課講解知識點1-JavaScript初體驗教師通過PPT結(jié)合實際操作的方式講解JavaScript初體驗。通過一個案例演示如何在VisualStudioCode代碼編輯器中編寫一段簡單的JavaScript代碼。本案例的需求是打開網(wǎng)頁時自動彈出一個警告框，警告框中的提示內(nèi)容為“鍥而不舍，金石可鏤”。知識點2-JavaScript代碼引入方式教師通過PPT結(jié)合實際操作的方式講解JavaScript代碼引入方式。分別介紹3種JavaScript代碼的引入方式。行內(nèi)式內(nèi)部式外部式外部式相比內(nèi)部式的優(yōu)勢。知識點3-JavaScript常用的輸入輸出語句教師通過PPT結(jié)合實際操作的方式講解JavaScript常用的輸入輸出語句。分別介紹常用的輸入輸出語句。prompt()語句alert()語句document.write()語句console.log()語句知識點4-JavaScript注釋教師通過PPT結(jié)合實際操作的方式講解JavaScript注釋。分別介紹JavaScript中的單行注釋和多行注釋。單行注釋多行注釋四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式檢測學(xué)生對JavaScript基本使用的掌握情況。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第三課時（什么是變量、變量的命名規(guī)則、變量的聲明與賦值、【案例】使用變量保存商品信息、【案例】使用變量保存用戶輸入的值、【案例】交換兩個變量的值）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點進(jìn)行再次鞏固講解。二、通過直接引入的方式導(dǎo)入新課在程序中，變量可以作為存儲數(shù)據(jù)的容器，用于保存臨時數(shù)據(jù)，并在需要時可以設(shè)置、更新或讀取變量中的內(nèi)容。此外，變量還可以保存用戶輸入的數(shù)據(jù)或運算結(jié)果。本節(jié)課將講解什么是變量、變量的命名規(guī)則、變量的聲明與賦值，并通過3個案例鞏固變量的使用。三、新課講解知識點1-什么是變量教師通過PPT講解什么是變量。什么是變量。變量的組成。知識點2-變量的命名規(guī)則教師通過PPT講解變量的命名規(guī)則。變量的命名規(guī)則。變量命名的建議。知識點3-變量的聲明與賦值教師通過PPT結(jié)合實際操作的方式講解變量的聲明與賦值。先聲明變量后賦值。聲明變量的同時并賦值。知識點4-【案例】使用變量保存商品信息教師通過PPT結(jié)合實際操作的方式講解【案例】使用變量保存商品信息。通過一個案例演示如何使用變量保存商品信息。其中，商品名稱為襯衫，商品顏色為白色，商品價格為50，商品尺寸為均碼。編寫代碼實現(xiàn)案例。知識點5-【案例】使用變量保存用戶輸入的值教師通過PPT結(jié)合實際操作的方式講解【案例】使用變量保存用戶輸入的值。通過一個案例演示如何使用變量保存用戶輸入的值。聲明一個email變量，當(dāng)用戶打開頁面時提示用戶輸入郵箱，用戶輸入完郵箱后并單擊“確定”按鈕后，頁面將顯示用戶的郵箱。編寫代碼實現(xiàn)案例。知識點6-【案例】交換兩個變量的值教師通過PPT結(jié)合實際操作的方式講解【案例】交換兩個變量的值。通過一個案例演示如何交換兩個變量的值。首先定義兩個變量apple1和apple2，其中，變量apple1的值為紅蘋果，變量apple2的值為青蘋果，然后定義第3個變量temp來保存臨時數(shù)據(jù)，實現(xiàn)紅蘋果和青蘋果的交換。編寫代碼實現(xiàn)案例。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式檢測學(xué)生對變量的基本使用的掌握情況。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第四課時（上機練習(xí)）上機練習(xí)主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進(jìn)行練習(xí)，通過上機練習(xí)考察學(xué)生對知識點的掌握情況。上機：（考察知識點為：【案例】使用變量保存商品信息、【案例】使用變量保存用戶輸入的值、【案例】交換兩個變量的值）形式：單獨完成題目：按照要求編寫程序。具體要求：練習(xí)使用變量保存商品信息的案例。練習(xí)使用變量保存用戶輸入的值的案例。練習(xí)交換兩個變量的值的案例。教學(xué)后記《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》教學(xué)設(shè)計課程名稱：授課年級：授課學(xué)期：教師姓名：年月課題名稱第2章JavaScript基礎(chǔ)計劃課時6課時教學(xué)引入JavaScript作為一門編程語言，在Web前端開發(fā)領(lǐng)域中扮演著至關(guān)重要的角色。作為一名初學(xué)者，掌握J(rèn)avaScript基礎(chǔ)是十分必要的。只有掌握了JavaScript基礎(chǔ)，才能更好地理解和編寫JavaScript程序，為后續(xù)的學(xué)習(xí)奠定堅實的基礎(chǔ)。本章將對JavaScript基礎(chǔ)進(jìn)行講解，包括數(shù)據(jù)類型、數(shù)據(jù)類型轉(zhuǎn)換、運算符和流程控制。教學(xué)目標(biāo)使學(xué)生了解數(shù)據(jù)類型的分類，能夠描述JavaScript中的基本數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型使學(xué)生掌握常用的基本數(shù)據(jù)類型，能夠根據(jù)實際需求定義基本數(shù)據(jù)類型的變量使學(xué)生掌握數(shù)據(jù)類型轉(zhuǎn)換，能夠根據(jù)實際需求將數(shù)據(jù)轉(zhuǎn)換為布爾型、數(shù)字型或字符串型使學(xué)生掌握運算符的使用，能夠靈活運用運算符完成運算使學(xué)生掌握選擇結(jié)構(gòu)語句，能夠根據(jù)實際需求選擇合適的選擇結(jié)構(gòu)語句使學(xué)生掌握循環(huán)結(jié)構(gòu)語句，能夠根據(jù)實際需求選擇合適的循環(huán)結(jié)構(gòu)語句使學(xué)生掌握跳轉(zhuǎn)語句，能夠靈活運用continue語句或break語句完成程序中的流程跳轉(zhuǎn)教學(xué)重點算術(shù)運算符字符串運算符賦值運算符比較運算符邏輯運算符三元運算符位運算符數(shù)據(jù)類型檢測運算符運算符優(yōu)先級選擇結(jié)構(gòu)循環(huán)結(jié)構(gòu)跳轉(zhuǎn)語句教學(xué)難點選擇結(jié)構(gòu)循環(huán)結(jié)構(gòu)【案例】for語句的使用循環(huán)嵌套教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進(jìn)行教學(xué)教學(xué)過程第一課時（數(shù)據(jù)類型分類、常用的基本數(shù)據(jù)類型、將數(shù)據(jù)轉(zhuǎn)換為布爾型數(shù)據(jù)、將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)、將數(shù)據(jù)轉(zhuǎn)換為字符串型數(shù)據(jù)）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點進(jìn)行再次鞏固講解。二、通過直接引入的方式導(dǎo)入新課在計算機編程中，數(shù)據(jù)有多種不同的類型。不同數(shù)據(jù)類型的數(shù)據(jù)占用的存儲空間不同，計算方式也不同。本節(jié)課將講解數(shù)據(jù)類型及其轉(zhuǎn)換。三、新課講解知識點1-數(shù)據(jù)類型分類教師通過PPT的方式講解數(shù)據(jù)類型分類?；緮?shù)據(jù)類型。復(fù)雜數(shù)據(jù)類型。知識點2-常用的基本數(shù)據(jù)類型教師通過PPT的方式講解常用的基本數(shù)據(jù)類型。布爾型。數(shù)字型。整數(shù)浮點數(shù)字符串型。空型。未定義型。知識點3-將數(shù)據(jù)轉(zhuǎn)換為布爾型數(shù)據(jù)教師通過PPT結(jié)合實際操作的方式講解將數(shù)據(jù)轉(zhuǎn)換為布爾型數(shù)據(jù)。在JavaScript中，使用Boolean()可以將給定的數(shù)據(jù)轉(zhuǎn)換為布爾型數(shù)據(jù)通過代碼演示如何將數(shù)據(jù)轉(zhuǎn)換為布爾型數(shù)據(jù)知識點4-將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)教師通過PPT結(jié)合實際操作的方式講解將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)。將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)的方式。parseInt()parseFloat()Number()通過代碼演示如何將數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)。不同類型數(shù)據(jù)轉(zhuǎn)換為數(shù)字型數(shù)據(jù)的結(jié)果。知識點5-將數(shù)據(jù)轉(zhuǎn)換為字符串型數(shù)據(jù)教師通過PPT結(jié)合實際操作的方式講解將數(shù)據(jù)轉(zhuǎn)換為字符串型數(shù)據(jù)。在JavaScript中可以使用String()或toString()將數(shù)據(jù)轉(zhuǎn)換為字符串型數(shù)據(jù)。String()和toString()的區(qū)別。通過代碼演示如何將數(shù)據(jù)轉(zhuǎn)換為字符串型數(shù)據(jù)。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第二課時（算術(shù)運算符、字符串運算符、賦值運算符、比較運算符、邏輯運算符、三元運算符、位運算符、數(shù)據(jù)類型檢測運算符、運算符優(yōu)先級、【案例】計算圓的周長和面積）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點進(jìn)行再次鞏固講解。二、通過需求引入的方式導(dǎo)入新課在實際開發(fā)中，經(jīng)常需要對數(shù)據(jù)進(jìn)行運算，JavaScript提供了多種類型的運算符用于運算。運算符也稱為操作符，用于實現(xiàn)算術(shù)運算、字符串運算、賦值運算、比較運算、邏輯運算等。本節(jié)課將講解JavaScript中常用的運算符和運算符的優(yōu)先級，并進(jìn)行案例練習(xí)。三、新課講解知識點1-算術(shù)運算符教師通過PPT結(jié)合實際操作的方式講解算術(shù)運算符。算術(shù)運算符的作用。JavaScript中常用的算術(shù)運算符。通過代碼演示自增和自減運算。算術(shù)運算符在實際應(yīng)用過程中的注意事項。知識點2-字符串運算符教師通過PPT結(jié)合實際操作的方式講解字符串運算符。字符串運算符的作用。通過代碼演示字符串運算符的使用。使用模板字符串的方式實現(xiàn)字符串的拼接。知識點3-賦值運算符教師通過PPT結(jié)合實際操作的方式講解賦值運算符。賦值運算符的作用。JavaScript中常用的賦值運算符。通過代碼演示賦值運算符的使用。知識點4-比較運算符教師通過PPT結(jié)合實際操作的方式講解比較運算符。比較運算符的作用。JavaScript中常用的比較運算符。通過代碼演示比較運算符的使用。知識點5-邏輯運算符教師通過PPT結(jié)合實際操作的方式講解邏輯運算符。邏輯運算符的作用。JavaScript中常用的邏輯運算符。通過代碼演示邏輯運算符的使用。知識點6-三元運算符教師通過PPT結(jié)合實際操作的方式講解三元運算符。三元運算符的作用。三元表達(dá)式的語法格式。通過代碼演示三元運算符的使用。知識點7-位運算符教師通過PPT結(jié)合實際操作的方式講解位運算符。位運算符的作用。JavaScript中常用的位運算符。通過代碼演示位運算符的使用。知識點8-數(shù)據(jù)類型檢測運算符教師通過PPT結(jié)合實際操作的方式講解數(shù)據(jù)類型檢測運算符。typeof運算符的兩種語法格式。通過代碼演示使用typeof運算符檢測數(shù)據(jù)類型。知識點9-運算符優(yōu)先級教師通過PPT結(jié)合實際操作的方式講解運算符優(yōu)先級。JavaScript中的運算符優(yōu)先級。通過代碼演示未加小括號的表達(dá)式和加小括號的表達(dá)式的運算順序。知識點10-【案例】計算圓的周長和面積教師通過PPT結(jié)合實際操作的方式講解【案例】計算圓的周長和面積。JavaScript中的運算符優(yōu)先級案例要求運用運算符的知識，實現(xiàn)計算圓的周長和面積。其中，計算圓的周長的公式為2r，計算圓的面積的公式為r2。公式中，表示圓周率，在代碼中使用圓周率的近似值3.14；r表示圓的半徑。編寫代碼實現(xiàn)案例四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式檢測學(xué)生對運算符的掌握情況。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第三、四課時（選擇結(jié)構(gòu)、【案例】查詢蔬菜的價格、循環(huán)結(jié)構(gòu)、【案例】for語句的使用、循環(huán)嵌套、跳轉(zhuǎn)語句）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點進(jìn)行再次鞏固講解。二、通過直接引入的方式導(dǎo)入新課在JavaScript中，當(dāng)需要實現(xiàn)復(fù)雜的業(yè)務(wù)邏輯時，需要對程序進(jìn)行流程控制。根據(jù)流程控制的需要，通常將程序分為3種結(jié)構(gòu)，分別是順序結(jié)構(gòu)、選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)。本節(jié)課將詳細(xì)講解這3種結(jié)構(gòu)。三、新課講解知識點1-選擇結(jié)構(gòu)教師通過PPT結(jié)合實際操作的方式講解選擇結(jié)構(gòu)。if語句。if語句的語法格式if語句的運行流程通過代碼演示if語句的使用if…else語句。if…else語句的語法格式if…else語句的運行流程通過代碼演示if…else語句的使用if…elseif…else語句。if…elseif…else語句的語法結(jié)格式if…elseif…else語句的運行流程通過代碼演示if…elseif…else語句的使用switch語句。switch語句的語法結(jié)構(gòu)switch語句的運行流程通過代碼演示switch語句的使用知識點2-【案例】查詢蔬菜的價格教師通過PPT結(jié)合實際操作的方式講解【案例】查詢蔬菜的價格。案例要求定義一個用于保存售貨員輸入的蔬菜名稱的變量vegetable，然后使用switch語句實現(xiàn)查詢對應(yīng)蔬菜的價格。當(dāng)售貨員輸入需要查詢的蔬菜名稱后，控制臺會輸出對應(yīng)的蔬菜價格，其中，芹菜的價格是3.2元/kg；黃瓜的價格是2.5元/kg；蓮藕的價格是9.0元/kg；土豆的價格是1.2元/kg。如果輸入的蔬菜名稱不存在，則輸出“沒有此蔬菜”。編寫代碼實現(xiàn)案例。知識點3-循環(huán)結(jié)構(gòu)教師通過PPT結(jié)合實際操作的方式講解循環(huán)結(jié)構(gòu)。for語句。for語句的語法格式for語句的運行流程通過代碼演示for語句的使用while語句。while語句的語法格式while語句的運行流程通過代碼演示while語句的使用do…while語句。do…while語句的語法格式do…while語句的運行流程通過代碼演示do…while語句的使用知識點4-【案例】for語句的使用教師通過PPT結(jié)合實際操作的方式講解【案例】for語句的使用。通過6個小案例鞏固for語句的使用。重復(fù)運行相同代碼。重復(fù)運行不同代碼。計算1~100所有整數(shù)的和與平均值。計算1~100所有整數(shù)中偶數(shù)的和與奇數(shù)的和。計算1~100所有整數(shù)中能被5整除的整數(shù)之和。自動生成字符串。知識點5-循環(huán)嵌套教師通過PPT結(jié)合實際操作的方式講解循環(huán)嵌套。for語句循環(huán)嵌套for語句的語法格式。通過3個案例演示循環(huán)嵌套的使用。生成指定行列的星星圖案生成星星構(gòu)成的三角形圖案生成九九乘法表知識點6-跳轉(zhuǎn)語句教師通過PPT結(jié)合實際操作的方式講解跳轉(zhuǎn)語句。跳轉(zhuǎn)語句的作用。JavaScript中常用的跳轉(zhuǎn)語句。continue語句continue語句的作用通過代碼演示continue語句的使用break語句break語句的作用通過代碼演示break語句的使用break語句跳轉(zhuǎn)到指定標(biāo)簽的語法格式通過代碼演示標(biāo)簽語句的使用四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式檢測學(xué)生對選擇結(jié)構(gòu)、循環(huán)結(jié)構(gòu)和跳轉(zhuǎn)語句的基本使用的掌握情況。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第五、六課時（上機練習(xí)）上機練習(xí)主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進(jìn)行練習(xí)，通過上機練習(xí)考察學(xué)生對知識點的掌握情況。上機：（考察知識點為：【案例】計算圓的周長和面積、【案例】查詢蔬菜的價格、【案例】for語句的使用、循環(huán)嵌套）形式：單獨完成題目：按照要求編寫程序。具體要求：運用運算符的知識，實現(xiàn)計算圓的周長和面積。使用for語句計算1~100所有整數(shù)的和與平均值。使用for語句計算1~100所有整數(shù)中偶數(shù)的和與奇數(shù)的和。使用for語句計算1~100所有整數(shù)中能被5整除的整數(shù)之和。使用for語句自動生成對應(yīng)數(shù)量的星星字符串。使用for語句生成5行5列的星星圖案。使用for語句生成星星構(gòu)成的三角形圖案。使用for語句嵌套循環(huán)生成九九乘法表。教學(xué)后記《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》教學(xué)設(shè)計課程名稱：授課年級：授課學(xué)期：教師姓名：年月課題名稱第3章數(shù)組計劃課時6課時教學(xué)引入數(shù)組用于將一組數(shù)據(jù)集合在一起。將數(shù)組賦值給一個變量后，通過變量就可以訪問一組數(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)建，能夠靈活運用數(shù)組字面量的方式創(chuàng)建數(shù)組使學(xué)生掌握獲取和修改數(shù)組長度的方法，能夠?qū)崿F(xiàn)數(shù)組長度的獲取和修改使學(xué)生掌握訪問數(shù)組的方法，能夠訪問數(shù)組元素使學(xué)生掌握遍歷數(shù)組的方法，能夠使用for語句實現(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é)重點創(chuàng)建數(shù)組獲取和修改數(shù)組長度訪問數(shù)組遍歷數(shù)組添加和修改數(shù)組元素刪除數(shù)組元素篩選數(shù)組元素反轉(zhuǎn)數(shù)組元素順序冒泡排序插入排序創(chuàng)建與訪問二維數(shù)組遍歷二維數(shù)組教學(xué)難點【案例】查找班級最高分和最低分冒泡排序插入排序【案例】使用二維數(shù)組實現(xiàn)矩陣轉(zhuǎn)置教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進(jìn)行教學(xué)教學(xué)過程第一、二課時（初識數(shù)組、創(chuàng)建數(shù)組、獲取和修改數(shù)組長度、訪問數(shù)組、遍歷數(shù)組、添加和修改數(shù)組元素、刪除數(shù)組元素、篩選數(shù)組元素、反轉(zhuǎn)數(shù)組元素順序、【案例】查找班級最高分和最低分）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點進(jìn)行再次鞏固講解。二、通過需求引入的方式導(dǎo)入新課在實際開發(fā)中，經(jīng)常需要保存一批相關(guān)聯(lián)的數(shù)據(jù)并進(jìn)行處理。例如，保存一個班級中所有學(xué)生的語文考試成績并計算這些成績的平均分。雖然我們可以通過多個變量分別保存每位學(xué)生的考試成績，再將這些變量相加后除以班級人數(shù)，求出平均分，但是這種方式非常麻煩和低效。此時，可以使用JavaScript中的數(shù)組來保存班級內(nèi)每位學(xué)生的成績，然后通過對數(shù)組的處理求出平均分，這種方式不僅簡單，而且開發(fā)效率更高。下面本節(jié)課將對JavaScript中的數(shù)組和數(shù)組的基本操作進(jìn)行講解。三、新課講解知識點1-初識數(shù)組教師通過PPT的方式講解初識數(shù)組。數(shù)組的組成。數(shù)組中索引和值的關(guān)系。知識點2-創(chuàng)建數(shù)組教師通過PPT結(jié)合實際操作的方式講解創(chuàng)建數(shù)組。使用數(shù)組字面量“[]”創(chuàng)建數(shù)組的語法格式。數(shù)組中包含空位的語法格式。通過代碼演示如何使用數(shù)組字面量“[]”創(chuàng)建數(shù)組。知識點3-獲取和修改數(shù)組長度教師通過PPT結(jié)合實際操作的方式講解獲取和修改數(shù)組長度。什么是數(shù)組長度。獲取數(shù)組長度。獲取數(shù)組長度的語法格式通過代碼演示如何獲取數(shù)組長度修改數(shù)組長度。修改數(shù)組長度的語法通過代碼演示如何修改數(shù)組長度知識點4-訪問數(shù)組教師通過PPT結(jié)合實際操作的方式講解訪問數(shù)組。訪問數(shù)組的語法格式。通過代碼演示如何在創(chuàng)建數(shù)組后訪問數(shù)組。知識點5-遍歷數(shù)組教師通過PPT結(jié)合實際操作的方式講解遍歷數(shù)組。什么是遍歷數(shù)組。遍歷數(shù)組的語法格式。以求班級中語文成績的平均分為例演示遍歷數(shù)組的使用。知識點6-添加和修改數(shù)組元素教師通過PPT結(jié)合實際操作的方式講解添加和修改數(shù)組元素。什么是添加數(shù)組元素。什么是修改數(shù)組元素。添加和修改數(shù)組元素的語法格式。通過代碼演示如何添加和修改數(shù)組元素。通過for語句為數(shù)組添加多個數(shù)組元素。知識點7-刪除數(shù)組元素教師通過PPT結(jié)合實際操作的方式講解刪除數(shù)組元素。刪除數(shù)組元素的語法格式。通過代碼演示如何刪除數(shù)組元素。知識點8-篩選數(shù)組元素教師通過PPT結(jié)合實際操作的方式講解篩選數(shù)組元素。通過for語句和if語句實現(xiàn)篩選數(shù)組元素的功能。通過代碼演示篩選所有大于或等于80分的學(xué)生成績，并將篩選出來的成績保存到一個新的數(shù)組中。知識點9-反轉(zhuǎn)數(shù)組元素順序教師通過PPT結(jié)合實際操作的方式講解反轉(zhuǎn)數(shù)組元素順序。什么是反轉(zhuǎn)數(shù)組元素順序。通過代碼演示數(shù)組元素的反轉(zhuǎn)。知識點10-【案例】查找班級最高分和最低分教師通過PPT結(jié)合實際操作的方式講解【案例】查找班級最高分和最低分。實現(xiàn)本案例的具體思路是：假設(shè)數(shù)組中第一個元素為最大值，使用for語句從數(shù)組索引為1的元素開始遍歷到最后一個元素，將當(dāng)前元素與預(yù)先設(shè)置的最大值比較。如果當(dāng)前元素比最大值大，則將當(dāng)前元素設(shè)置為最大值，再繼續(xù)比較下一個元素，遍歷完成后即可找到最大值。查找最小值的方法與查找最大值的方法類似。編寫代碼實現(xiàn)案例。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第三、四課時（冒泡排序、插入排序、創(chuàng)建與訪問二維數(shù)組、遍歷二維數(shù)組、【案例】使用二維數(shù)組實現(xiàn)矩陣轉(zhuǎn)置）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點進(jìn)行再次鞏固講解。二、通過直接引