第1章 JavaScript快速入門 教學(xué)設(shè)計(jì)

第3章面向?qū)ο螅ㄉ希禞avaScript前端開發(fā)案例教程》教學(xué)設(shè)計(jì)課程名稱：JavaScript前端開發(fā)案例教程授課年級(jí)：年級(jí)授課學(xué)期：學(xué)年第一學(xué)期教師姓名：年月日課題名稱第1章JavaScript快速入門計(jì)劃學(xué)時(shí)4學(xué)時(shí)內(nèi)容分析在Web前端開發(fā)中，HTML、CSS和JavaScript是開發(fā)一個(gè)網(wǎng)頁所必備的技術(shù)。在掌握了HTML和CSS技術(shù)之后，已經(jīng)能夠編寫出各式各樣的網(wǎng)頁了，但若想讓網(wǎng)頁具有良好的交互性，JavaScript就是一個(gè)極佳的選擇。本章將介紹JavaScript的基本概念，并通過實(shí)踐案例來體驗(yàn)JavaScript編程。教學(xué)目標(biāo)及基本要求熟悉JavaScript的用途和發(fā)展?fàn)顩r理解JavaScript與ECMAScript的關(guān)系掌握J(rèn)avaScript的基本使用方法教學(xué)重點(diǎn)JavaScript引入方式、語法風(fēng)格、注釋、輸出語句教學(xué)難點(diǎn)函數(shù)、對(duì)象、事件的基本概念教學(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é)過程第一學(xué)時(shí)（初識(shí)JavaScript、開發(fā)工具）一、提出需求，導(dǎo)入學(xué)習(xí)任務(wù)（1）回顧網(wǎng)頁開發(fā)的常用技術(shù)，引出為什么要學(xué)習(xí)JavaScript。HTML、CSS和JavaScript是開發(fā)網(wǎng)頁的必備技術(shù)。HTML、CSS用來實(shí)現(xiàn)網(wǎng)頁的結(jié)構(gòu)和樣式。使用JavaScript可以讓網(wǎng)頁具有良好的交互性。（2）明確學(xué)習(xí)方向。掌握J(rèn)avaScript的概念、應(yīng)用、由來、特點(diǎn)。理解JavaScript與ECMAScript的關(guān)系。了解常用瀏覽器的分類、特點(diǎn)，以及排版引擎、JavaScript引擎的概念。了解常用編輯工具，至少掌握一種編輯工具的使用。二、知識(shí)講解什么是JavaScript作用：開發(fā)交互式的Web頁面。分工：HTML負(fù)責(zé)結(jié)構(gòu)，CSS負(fù)責(zé)樣式，JavaScript負(fù)責(zé)行為。JavaScript可以嵌入到網(wǎng)頁中。應(yīng)用：演示JavaScript在網(wǎng)頁開發(fā)中的應(yīng)用，如輪播圖、選項(xiàng)卡、地圖、表單驗(yàn)證、百度搜索框等。優(yōu)點(diǎn)：可以使網(wǎng)頁的互動(dòng)性更強(qiáng)，用戶體驗(yàn)更好。JavaScript的由來與發(fā)展由來：1995年網(wǎng)景公司開發(fā)的LiveScript。名稱改變：借用Java名氣，改名為JavaScript，兩者其實(shí)是不同的語言。設(shè)計(jì)初衷：嵌入到網(wǎng)頁中的編程語言，用來控制瀏覽器的行為。濫用現(xiàn)象：廣告、彈窗、惡意代碼、安全漏洞。里程碑：Ajax技術(shù)的流行與發(fā)展。未來發(fā)展：服務(wù)器端Node.js、移動(dòng)端開發(fā)、全棧開發(fā)。JavaScript的特點(diǎn)JavaScript是腳本語言，具有腳本語言的一些特點(diǎn)：簡(jiǎn)單、易學(xué)、易用。JavaScript可以跨平臺(tái)，開發(fā)和使用都非常方便，支持PC和移動(dòng)端。JavaScript支持面向?qū)ο?，誕生了許多庫和框架，提高開發(fā)速度，能夠用來解決復(fù)雜問題。JavaScript與ECMAScript的關(guān)系ECMAScript是一種規(guī)范標(biāo)準(zhǔn)，用于統(tǒng)一JavaScript同類的語言，如JScript。JavaScript是ECMAScript的一種實(shí)現(xiàn)，其他實(shí)現(xiàn)還有ActionScript。開發(fā)工具——瀏覽器介紹常見的瀏覽器和其開發(fā)廠商。了解常見瀏覽器的特點(diǎn)。注意老版本IE瀏覽器的市場(chǎng)占有率和兼容性問題。重點(diǎn)介紹標(biāo)準(zhǔn)瀏覽器——Chrome、火狐。介紹瀏覽器的引擎，并列舉常見瀏覽器和與之相對(duì)應(yīng)的引擎。理解瀏覽器引擎與瀏覽器、開發(fā)人員的關(guān)系。熟悉瀏覽器的兼容問題。熟悉Chrome瀏覽器的開發(fā)者工具。開發(fā)工具——代碼編輯器了解常見的代碼編輯器。選擇一種代碼編輯器進(jìn)行詳細(xì)講解。掌握代碼編輯器的安裝和使用方法，并掌握基本的配置。三、【案例】第一個(gè)JavaScript程序創(chuàng)建網(wǎng)頁并設(shè)置編碼創(chuàng)建hello.html文件。將編碼設(shè)置為UTF-8無BOM格式。補(bǔ)充講解常見字符集、編碼格式，如ANSI、GB2312、GBK、Unicode、UTF-8，以及UTF-8的BOM的含義。編寫一個(gè)簡(jiǎn)單的網(wǎng)頁使用HTML5的模板編寫一個(gè)簡(jiǎn)單的網(wǎng)頁。復(fù)習(xí)網(wǎng)頁的基本結(jié)構(gòu)，強(qiáng)調(diào)meta設(shè)置字符集的必要性。將JavaScript嵌入到HTML思考如何在HTML中嵌入JavaScript，引出“落腳點(diǎn)”的概念。思考JavaScript代碼應(yīng)該寫在什么位置。講解JavaScript標(biāo)記——<script>。介紹一個(gè)基本函數(shù)alert()的使用，輸出一個(gè)字符串。講解語句的概念，以及“;”的作用。測(cè)試網(wǎng)頁程序使用瀏覽器打開hello.html。觀察程序運(yùn)行結(jié)果。總結(jié)JavaScript基本語法規(guī)則JavaScript嚴(yán)格區(qū)分大小寫，演示將alert改成Alert觀察效果。JavaScript對(duì)空格、換行、縮進(jìn)不敏感，一條語句可以分成多行書寫。演示將alert后面的括號(hào)“()”換到下一行，觀察程序是否正確執(zhí)行。JavaScript的分號(hào)可以省略，但要注意什么情況下可以省略，什么情況下不能省略。并指出代碼風(fēng)格的重要性，不建議省略分號(hào)。四、知識(shí)鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）使用博學(xué)谷系統(tǒng)下發(fā)課后作業(yè)。第二學(xué)時(shí)（JavaScript入門）一、回顧上節(jié)課內(nèi)容（1）對(duì)上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。上節(jié)課介紹了JavaScript的基本概念，并通過一個(gè)簡(jiǎn)單的案例演示了如何在網(wǎng)頁中編寫JavaScript代碼。接下來本節(jié)將針對(duì)JavaScript入門知識(shí)進(jìn)行詳解。（3）明確學(xué)習(xí)方向。掌握J(rèn)avaScript的3種引入方式，了解每種方式的特點(diǎn)和應(yīng)用場(chǎng)景。理解JavaScript的異步加載模式。掌握常用輸出語句的使用。掌握注釋的使用。熟悉JavaScript的簡(jiǎn)單數(shù)據(jù)運(yùn)算操作。了解JavaScript函數(shù)的基本概念，熟悉函數(shù)的基本代碼。了解JavaScript對(duì)象的基本概念，熟悉對(duì)象的基本代碼。了解JavaScript事件的基本概念，掌握如何給按鈕添加單擊事件。二、知識(shí)講解JavaScript引入方式——嵌入式<script>標(biāo)記、type屬性的作用。JavaScript引入方式——外鏈?zhǔn)窖菔就怄準(zhǔn)降膶?shí)現(xiàn)方式，以及代碼書寫的細(xì)節(jié)。復(fù)習(xí)相對(duì)路徑、絕對(duì)路徑、URL地址的概念。比較外鏈?zhǔn)胶颓度胧降膬?yōu)缺點(diǎn)，以及適合的應(yīng)用場(chǎng)景。JavaScript引入方式——行內(nèi)式了解行內(nèi)式的代碼書寫方式。了解行內(nèi)式的應(yīng)用場(chǎng)景。JavaScript引入方式——異步加載講解JavaScript在網(wǎng)頁中的加載順序，以及代碼阻塞的問題。演示<script>的屬性async和defer的作用，比較兩者的區(qū)別。常用輸出語句演示alert()、console.log()、document.write()的使用。演示document.write()根據(jù)嵌入位置的不同，而產(chǎn)生的不同結(jié)果。注釋理解注釋的作用，為什么要在代碼中使用注釋。演示單行注釋的基本代碼。演示多行注釋的基本代碼，注意嵌套問題。比較單行注釋和多行注釋，掌握各自的特點(diǎn)。數(shù)據(jù)與運(yùn)算演示如何利用JavaScript實(shí)現(xiàn)加、減、乘、除運(yùn)算。演示如何利用JavaScript比較兩個(gè)數(shù)字的大小。熟悉字符串的概念，演示如何使用字符串來保存數(shù)據(jù)。演示使用比較運(yùn)算符“==”比較兩個(gè)字符串是否相同。演示字符串與數(shù)字拼接的細(xì)節(jié)問題，“+”針對(duì)數(shù)字和字符串操作的區(qū)別。演示如何根據(jù)比較的不同結(jié)果，執(zhí)行不同的代碼。熟悉變量的概念，演示如何利用變量保存數(shù)據(jù)。函數(shù)介紹函數(shù)的概念、作用，出現(xiàn)的原因。以alert()、prompt()為例，演示函數(shù)的優(yōu)點(diǎn)，以及其參數(shù)、返回值的概念。熟悉如何編寫一個(gè)簡(jiǎn)單的自定義函數(shù)。對(duì)象介紹對(duì)象的概念、作用、出現(xiàn)的原因。以window、document、String對(duì)象為例，演示對(duì)象的基本使用，體會(huì)使用對(duì)象的優(yōu)點(diǎn)，學(xué)習(xí)對(duì)象的必要性。熟悉自定義對(duì)象的基本語法。事件介紹事件的基本概念。舉例說明哪些操作屬于事件，如點(diǎn)擊鼠標(biāo)、滾動(dòng)屏幕、敲擊鍵盤等。熟悉如何給一個(gè)按鈕添加單擊事件。三、【案例】改變網(wǎng)頁背景色案例分析通過案例，建立對(duì)JavaScript開發(fā)的興趣，利用JavaScript完成一個(gè)簡(jiǎn)單的網(wǎng)頁交互，帶來成就感。并熟悉了函數(shù)、事件、對(duì)象在開發(fā)中的使用場(chǎng)景。代碼實(shí)現(xiàn)編寫網(wǎng)頁基本結(jié)構(gòu)。準(zhǔn)備4個(gè)按鈕用來改變網(wǎng)頁背景色，并利用函數(shù)、事件來完成功能?？偨Y(jié)隨著后面的學(xué)習(xí)，就能理解這些代碼的實(shí)現(xiàn)原理，并學(xué)會(huì)根據(jù)自己的需求來開發(fā)更多的程序。四、【動(dòng)手實(shí)踐】驗(yàn)證用戶輸入的密碼案例分析在網(wǎng)頁中彈出一個(gè)輸入框，用戶輸入密碼后，對(duì)密碼進(jìn)行驗(yàn)證。驗(yàn)證后，提示用戶輸入的密碼是正確還是錯(cuò)誤。代碼實(shí)現(xiàn)通過prompt()函數(shù)提示用戶輸入的密碼密碼，接收該函數(shù)的返回值，保