《web前端技術》(趙敏)003-0教案 第16課 JavaScript基礎（上）

PAGE1PAGE1PAGE2PAGE2

課題第16課JavaScript基礎（上）課時2課時（90min）教學目標知識技能目標：（1）熟悉JavaScript的基本語法（2）掌握在網頁中引入JavaScript的方式，包括內嵌式、外鏈式和行內式素質目標：（1）學習JavaScript的基礎知識，激發(fā)了解和探索新技術的欲望（2）積極參與實戰(zhàn)演練，提升自身動手能力，強化實踐能力教學重難點教學重點：JavaScript的基本語法教學難點：在網頁中引入JavaScript的方式教學方法問答法、討論法、講授法、實踐練習法、演示法教學用具電腦、投影儀、多媒體課件、教材、文旌課堂教學設計第1節(jié)課：→→→傳授新知（25min）→課堂練習（15min）第2節(jié)課：→傳授新知（20min）→實戰(zhàn)演練（15min）→課堂小結（3min）→作業(yè)布置（2min）教學過程主要教學內容及步驟設計意圖第一節(jié)課課前任務【教師】布置課前任務，和學生負責人取得聯系，讓其提醒同學通過文旌課堂APP或其他學習軟件，完成課前任務提前了解JavaScript是什么，有什么作用，相比其他編程語言，它有哪些特點，為上課打好基礎【學生】完成課前任務通過課前任務，讓學生提前了解JavaScript，為課堂上學習相關知識點做準備考勤（2min）【教師】使用文旌課堂APP進行簽到【學生】按照老師要求簽到培養(yǎng)學生的組織紀律性，掌握學生的出勤情況問題導入（3min）【教師】提出問題什么是JavaScript？相比其他編程語言，它有哪些特點？【學生】思考、舉手回答【教師】通過學生的回答引入要講的知識JavaScript是一種解釋型腳本語言，用于實現網頁與用戶之間的動態(tài)交互。目前，幾乎所有的瀏覽器都可以很好地支持JavaScript。同時，由于JavaScript可以及時響應用戶的操作，并控制頁面的行為表現，提高用戶體驗，因而JavaScript已經成為Web前端開發(fā)人員必須掌握的技能之一。本章將對JavaScript的基礎知識進行詳細介紹。這節(jié)課我們先學習JavaScript的基本語法。通過問題導入的方法，引導學生主動思考，激發(fā)學生的學習興趣傳授新知（25min）9.1JavaScript的基本語法【教師】講解JavaScript的功能，并舉例說明JavaScript是一種可以嵌入到網頁文件中的編程語言，可以實現網頁的交互效果，使用戶體驗更好。例如，…（詳見教材）【學生】聆聽、記錄、理解9.1.1代碼格式【教師】講解JavaScript的代碼格式和編寫時的注意事項每條JavaScript代碼語句以英文分號“;”作為結束標志。有時候也可以省略英文分號，以換行符作為語句結束的標志。但是，這種做法在特定的情況容易引發(fā)解析錯誤，因此建議使用英文分號作為語句結束標志。JavaScript代碼的編寫格式比較自由，它一般會忽略分隔符，如空格符、制表符和換行符等。…（詳見教材）在編寫JavaScript代碼時，還應該注意以下幾點?！ㄔ斠娊滩模緦W生】聆聽、記錄、理解9.1.2標識符【教師】講解標識符的概念及定義規(guī)則，命名方法，并舉出一些標識符，讓學生說說是否是正確的標識符，錯誤的違反了哪種定義規(guī)則標識符是指開發(fā)者自定義的變量、函數、屬性等的名稱。例如，單詞apple可以作為標識符使用。每種編程語言都有自己的標識符定義規(guī)則，下面簡單介紹JavaScript中的標識符定義規(guī)則。(1)標識符由字母、下畫線（_）、美元符號（$）和數字構成。(2)第一個字符不能為數字。(3)在定義標識符時，最好能做到見名知義。(4)能使用JavaScript中的關鍵字和保留字命名自定義的標識符。想一想：car，_book1，$money，123str，name，sex，char可以做為標識符么？test、TEST和Test是否表示同一種標識符？【課堂拓展】JavaScript對字母大小寫是敏感的。例如，test、TEST和Test表示不同的標識符。所以，在定義和使用標識符時要特別注意字母的大小寫。在定義較復雜的標識符時，可能會用到多個單詞，此時可使用駝峰命名法（如redBag）、帕斯卡命名法（如RedBag）和下畫線命名法（如red_bag）命名標識符。駝峰命名法常用于函數的命名，帕斯卡命名法常用于類和構造器的命名，下畫線命名法常用于常量和私有變量的命名?！緦W生】聆聽、記錄、理解、思考、討論、回答9.1.3關鍵字和保留字【教師】展示表“JavaScript中常見的關鍵字”和表“JavaScript中常見的保留字”，講解講解關鍵字和保留字關鍵字是指JavaScript中預先定義好的單詞，它們被賦予了各種不同的含義。例如，var關鍵字表示變量聲明?！ㄔ斠娊滩模┏鲜鲫P鍵字之外，JavaScript中還有一些保留關鍵字，簡稱保留字。保留字是指將來可能會用作JavaScript關鍵字的一些單詞，是為JavaScript的發(fā)展預留的一些單詞。…（詳見教材）【學生】聆聽、記錄、理解9.1.4輸出方式【教師】講解JavaScript代碼執(zhí)行結果的輸出方式，并演示例子輔助理解JavaScript代碼按照執(zhí)行的機制可分為兩類，非事件處理代碼和事件處理代碼?！ㄔ斠娊滩模㎎avaScript代碼執(zhí)行結果的輸出方式有頁面輸出、控制臺輸出和彈窗輸出。1．頁面輸出頁面輸出是指根據用戶動作觸發(fā)事件將元素加載到頁面上，其代碼實現格式如下：…（詳見教材）【例9-1】在HTML文檔中引入以下JavaScript代碼，可以在頁面中添加<div>元素，且顯示的內容為“頁面輸出”，…（詳見教材）2．控制臺輸出控制臺輸出是指在控制臺輸出內容，其代碼實現格式如下：…（詳見教材）【例9-2】在HTML文檔中引入以下JavaScript代碼，使用Chrome瀏覽器加載頁面后不顯示任何內容，但是按“F12”鍵打開瀏覽器的“開發(fā)者工具”窗格后，選擇“Console”選項卡，便可以看到控制臺的輸出內容“控制臺輸出”，…（詳見教材）【課堂拓展】控制臺輸出可以用于調試JavaScript代碼，因此開發(fā)者常使用該函數編寫斷點測試的代碼。3．彈窗輸出彈窗輸出是指在瀏覽器中彈出一個對話框，然后把要輸出的內容展示出來。根據作用的不同，彈窗可分為警告框、確認框和提示框。警告框可以彈出窗口，顯示信息，也可以用于測試程序運行效果，其代碼實現格式如下：…（詳見教材）【例9-3】在HTML文檔中引入以下JavaScript代碼，當頁面加載或觸發(fā)相關事件后，彈出警告框，顯示內容“彈出警告框消息”，…（詳見教材）確認框可以用于確認某項信息，其代碼實現格式如下：confirm("要輸出的內容")…（詳見教材）【例9-4】在HTML文檔中引入以下JavaScript代碼，頁面加載后，彈出確認框，顯示內容“這是確認框嗎？”，…（詳見教材）提示框是可以輸入信息的對話框，用于提示用戶輸入某種類型的數據，并接收用戶輸入的數據，最后返回輸入的信息，其代碼實現格式如下：prompt("要輸出的內容")【例9-5】在HTML文檔中引入以下JavaScript代碼，頁面加載后，彈出提示框，顯示提示信息“請輸入您的姓名”，接著用戶輸入姓名“張三”，此時單擊“確定”按鈕彈出“您的姓名是張三”提示信息；單擊“取消”按鈕則彈出“您的姓名是null”提示信息，…（詳見教材）【學生】聆聽、記錄、理解、觀看效果9.1.5注釋【教師】講解JavaScript中的注釋幾乎所有的編程語言都有注釋功能。注釋主要用于描述、解釋當前已編寫的代碼，可以讓其他人更好地理解這些代碼，這在多人合作開發(fā)時尤其有用。在程序解析時，注釋會被解釋器忽略。JavaScript中的注釋主要有兩種，分別為單行注釋和多行注釋。1．單行注釋單行注釋以兩個斜杠“//”開始，后面都是注釋內容，其語法格式如下：…（詳見教材）2．多行注釋多行注釋以斜杠和星號“/*”開始，星號和斜杠“*/”結束，其語法格式如下：…（詳見教材）【學生】聆聽、記錄、理解通過教師的講解、提問、演示例子，使學生了解JavaScript的基本語法課堂練習（15min）【教師】要求學生根據課上所學知識，自行練習例9-1到9-5，有疑問可互相討論或咨詢老師【學生】討論、思考、操作通過實踐練習，鞏固學生對JavaScript的基本語法的理解與掌握，并鍛煉學生的實際操作能力第二節(jié)課問題導入（5min）【教師】提出問題在上節(jié)課我們講解了JavaScript的基本語法，那怎么在網頁里引入JavaScript呢？【學生】思考、舉手回答【教師】通過學生的回答引入要講的知識通過問題導入的方法，引導學生主動思考，激發(fā)學生的學習興趣傳授新知（20min）9.2在網頁中引入JavaScript【教師】講解在網頁中引入JavaScript的三種方式，并舉例說明在HTML網頁中引入JavaScript的方式有內嵌式、外鏈式和行內式。不同的引入方式對應不同的使用情況，下面詳細介紹這3種引入方式。9.2.1內嵌式內嵌式是將JavaScript代碼包裹在<script>標簽中，然后直接編寫到HTML文檔中，其語法格式如下…（詳見教材）【課堂拓展】在HTML5中，<script>標簽的type屬性值默認為“text/javascript”，在不考慮老版本瀏覽器兼容性的情況下，可以不寫type屬性。type屬性值除可以設置為“text/javascript”外，還可以設置為其他類型，感興趣的讀者可以自行查閱學習。9.2.2外鏈式外鏈式是指創(chuàng)建一個擴展名為js的文件，將JavaScript代碼編寫在該文件里，然后通過<script>標簽的src屬性將文件引入網頁中，其語法格式如下：…（詳見教材）【課堂拓展】含有JavaScript代碼的<script>標簽可以放置在HTML文檔的任意位置。一般情況下，該標簽放置在<head>標簽內的<title>標簽之后，或者放置在<body>標簽的末尾（即</body>標簽之前）。…（詳見教材）此外，瀏覽器還提供了async和defer兩個屬性來設置JavaScript的延遲下載和執(zhí)行?！ㄔ斠娊滩模?.2.3行內式行內式是指將JavaScript代碼作為HTML標簽的屬性值使用。例如，單擊網頁上的按鈕彈出提示框，可通過以下代碼實現。除按鈕單擊事件之外，為<a>標簽的href屬性賦值JavaScript代碼后，單擊鏈接標簽也能彈出提示框，代碼如下：…（詳見教材）現代網頁開發(fā)提倡使用HTML、CSS、JavaScript分離的方式，即CSS和JavaScript都通過外鏈的方式引入。這樣既能減小HTML文件的大小，也能通過defer等屬性提升網頁加載速度，還能增加代碼的可讀性和可維護性。【學生】聆聽、記錄、理解通過教師的講解和演示例子，使學生了解JavaScript的基本語法實戰(zhàn)演練（15min）為“金企鵝教育”網站主頁鏈接js文件【教師】先演示下最終效果，再講解練習中較為重要和學生容易出錯的地方，再要求學生制作“為“金企鵝教育”網站主頁鏈接js文件”，遇到不會的問題可以掃描微課二維碼觀看視頻”為“金企鵝教育”網站主頁鏈接js文件”（詳見教材），可討論或咨詢老師，可互相幫助“金企鵝教育”網站主頁中展示了輪播圖，此處的輪播圖效果是使用JavaScript代碼實現的。下面就帶領大家一起采用外鏈式的方式為“金企鵝教育”網站主頁鏈接js文件，便于后續(xù)JavaScript代碼的編寫（具體可見第12章實戰(zhàn)演練）。步驟1在HBuilderX中導入本書配套素材“素材與案例\第9章\實戰(zhàn)演練\9.2\JinqieProject”文件夾，右擊HBuilderX主界面左側欄中的“JinqieProject”文件夾，……（詳見教材）步驟2彈出“新建js文件”對話框，輸入js文件名稱“index”，選擇模板“default”；單擊“創(chuàng)建(N)”按鈕……（詳見教材）步驟3js文件創(chuàng)建成功，文檔顯示在編輯窗口中，如圖9-10所示。用于實現輪播圖效果的JavaScript代碼將編寫在“index.js”文件中，該文件位于“JinqieProject”項目文件夾下?！ㄔ斠娊滩模┎襟E4打開“index.html”文檔，使用外鏈式在“金企鵝教育”網站主頁中引入js文件，即在</body>標簽前編寫以下代碼?！ㄔ斠娊滩模┲谱黜椖浚^看微課，討論通過制作為“金企鵝教育”網站主頁鏈接js文件項目，使學生鞏固所學知識，鍛煉動手操作能力課堂小結（3min）【教師】簡要總結本節(jié)課的要點本節(jié)課主要介紹了JavaScript的基礎知識。通過本節(jié)課的學習，學生應重點掌握以下內容。（1）JavaScript是一種可以嵌入到網頁文件中的編程語言，可以實現網頁的交互效果，使用戶體驗更好。（2）JavaScript代碼執(zhí)行結果的輸出方式有頁面輸出、控制臺輸出和彈窗輸出。（3）在HTML網頁中引入JavaScript的方式有內嵌式、外鏈式和行內式?！緦W生】總結回顧知識點總結知識點，使學生牢固掌握JavaScript的基礎知識作業(yè)布置（2min）【教師】布置課后作業(yè)團隊作業(yè)：在上節(jié)