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

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