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

博學(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代碼的引入方式，能夠靈活運(yùn)用行內(nèi)式、內(nèi)部式、外部式的方式引入JavaScript代碼使學(xué)生掌握J(rèn)avaScript常用的輸入輸出語句，能夠靈活運(yùn)用prompt()、alert()、document.write()、document.log()語句使學(xué)生掌握J(rèn)avaScript注釋的使用，能夠合理運(yùn)用單行注釋、多行注釋增強(qiáng)代碼的可讀性使學(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代碼編輯器。安裝中文語言擴(kuò)展。安裝LiveServer擴(kuò)展。創(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ù)或運(yùn)算結(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)容。第四課時（上機(jī)練習(xí)）上機(jī)練習(xí)主要針