JavaScript程序設計案例教程（第2版）課程標準教學教案

《JavaScript程序設計案例教程》課程標準【課程名稱】JavaScript程序設計 【課程編碼】【課程類別】專業基礎課 【適用專業】計算機相關專業【授課單位】 【總學時】64【編寫執筆人】 【編寫日期】1．課程定位和課程設計1.1課程性質與作用1．課程性質JavaScript程序設計案例教程是一門重要的計算機專業課程。它具有很強的實踐性，通過豐富的案例引導學生掌握JavaScript語言。課程涵蓋語法基礎、面向對象編程、DOM操作等內容。這門課既為前端開發奠定基礎，又能與后端技術結合。它具有跨平臺性，可在瀏覽器、服務器等多種環境運行。同時，課程注重培養學生的邏輯思維和問題解決能力，讓學生能運用JavaScript創造出動態、交互性強的網頁和應用程序。2．課程作用該課程是連接理論知識與實際應用的橋梁。通過課程學習，學生能掌握JavaScript這門廣泛應用于前端開發的語言，為未來從事Web開發工作打下堅實基礎。課程中的大量案例幫助學生理解抽象的編程概念，提升實際問題解決能力。在實際應用中，JavaScript可用于創建動態網頁效果，如交互表單、動畫特效等，極大地提升用戶體驗。它還能與HTML和CSS緊密結合，實現頁面的豐富布局和美觀設計。此外，該課程培養學生的邏輯思維和編程習慣。學生將學會如何分析問題、設計算法，并以高效的代碼實現解決方案。同時，課程也有助于學生了解前端開發的最新趨勢和技術，為持續學習和職業發展提供動力。1.2課程設計思路本課程以黨的二十大精神為指導，有機融入黨的二十大精神，秉承能力教育與思想教育同向同行的理念，盡可能選取既對應相關知識點，又能夠體現職業素養并與實際應用緊密相關的案例；同時在教學中激發學生的愛國熱情、創新意識，提高學生的職業素養，引導學生樹立正確的人生觀和價值觀，鼓勵學生成長為能夠擔當國家建設大任的時代新人，培養具有正確價值觀的高技能型人才。課程上結合企業對軟件開發相關人才的實際要求，與實際應用緊密結合，使學生在做中學，學中做，學完即可上手操作，幫助學生更快達到學以致用的目的。還可以鍛煉學生的工作思維和實踐技能，實現學生實戰能力與崗位要求之間的無縫對接。2．課程目標2.1知識目標（1）了解JavaScript的起源、應用和特點；理解JavaScript和ECMAScript的關系；了解編輯器和瀏覽器相關知識及其應用；掌握JavaScript基礎應用；能夠使用JavaScript實現簡單的網頁功能。（2）了解標識符的概念及其定義規則；掌握變量的聲明和賦值方法；熟悉常用數據類型；掌握常用運算符的應用；掌握流程控制語句的應用。（3）了解什么是引用類型；掌握定義數組的方法；掌握數組元素的基本操作；掌握數組的遍歷；掌握數組相關方法的應用。（4）了解什么是函數；掌握函數的定義與調用；了解作用域及其應用；掌握匿名函數的應用；了解函數的嵌套和遞歸；了解變量提升；掌握閉包函數的應用。（5）理解面向對象思想，了解面向對象和面向過程的區別；了解對象的概念并掌握自定義對象的方法；掌握如何使用構造器創建自定義對象；掌握內置對象的常用屬性和方法；掌握對象繼承的應用。（6）了解什么是BOM；掌握window對象常用屬性和方法；掌握location對象常用屬性和方法；掌握history對象常用屬性和方法；掌握navigator對象常用屬性和方法；掌握screen對象常用屬性和方法；掌握定時器的使用。（7）了解什么是DOM；了解HTML節點樹；掌握常見HTML元素操作；掌握常見DOM節點操作。（8）了解什么是事件；掌握事件綁定方式；理解事件捕獲和冒泡；掌握事件對象使用；掌握多種事件類型；掌握事件優化方式。（9）了解什么是Ajax；了解如何搭建Web服務器；掌握使用XMLHttpRequest進行網絡請求的方法；掌握常見網絡請求方式的應用；理解XML和JSON的區別；掌握常見跨域請求方式。（10）掌握Cookie的常見用法；掌握sessionStorage的常見用法；掌握localStorage的常見用法。（11）了解什么是正則表達式；掌握常見正則表達式的應用；掌握正則表達式的語法規則；掌握String類中常用方法的應用；掌握RegExp類中常用方法的應用。（12）掌握安裝和在文檔中引入Vue的方法；掌握創建Vue實例的方法并了解其生命周期；掌握Vue數據綁定的方法；掌握Vue計算屬性和偵聽器的應用；了解Vue模板渲染語法。（13）掌握使用瀏覽器事件處理游戲中各種操作的方法；能夠使用CSS提升游戲效果。2.2能力目標（1）能夠運用合適的開發工具進行JavaScript代碼的編寫、運行和調試；具備解決瀏覽器兼容性問題的能力，確保開發的網頁能在各種瀏覽器上正常運行。（2）通過學習JavaScript的基本語法、數據類型、運算符、流程控制語句、函數、數組、對象等知識，能夠熟練運用JavaScript進行程序設計和開發，具備解決實際問題的能力。（3）熟練使用運算符進行數學運算和邏輯判斷；能夠運用流程控制語句編寫具有邏輯結構的程序，實現條件判斷和循環執行等功能；在編程過程中，能夠識別和處理常見的錯誤，如語法錯誤、邏輯錯誤等，提高程序的穩定性和可靠性。（4）通過綜合案例的學習和實踐，學生能夠將所學的函數知識綜合運用到實際的編程中，解決實際問題；培養學生的創新思維和解決問題的能力，能夠根據具體需求設計和實現合適的函數和算法。（5）通過學習面向對象的概念、三大特征（封裝、繼承、多態），以及對象、構造器、內置對象等知識，能夠運用面向對象的思想進行程序設計，提高代碼的復用性、可維護性和可擴展性。（6）通過學習BOM（瀏覽器對象模型）和DOM（文檔對象模型），能夠熟練操作瀏覽器窗口、網頁元素和文檔節點，實現網頁的動態交互和可視化效果，具備開發完整網頁的能力。（7）通過學習事件的概念、綁定方式、事件流、事件對象的使用，以及多種事件類型（鼠標事件、觸摸事件、鍵盤事件、焦點事件、頁面事件、HTML5事件等），能夠實現用戶與網頁的交互功能，提升網頁的用戶體驗。（8）通過學習Ajax技術，能夠實現瀏覽器與服務器的異步數據交互，掌握數據交換格式（XML和JSON）的使用，以及跨域請求的處理方式，具備開發高效、動態網頁應用的能力。（9）通過學習Cookie、sessionStorage、localStorage等瀏覽器存儲方式，能夠合理地存儲和管理網頁數據，實現數據的本地緩存和持久化，提高網頁的性能和用戶體驗。（10）能夠創建和應用正則表達式進行文本匹配和驗證；熟悉String類和RegExp類中與正則表達式相關的方法，能夠運用這些方法解決實際問題；提高編程能力和解決問題的能力，能夠運用正則表達式實現表單驗證、模板語法等功能，增強對文本處理的能力。（11）熟練使用Vue進行數據綁定、事件處理、條件渲染和循環渲染，以及如何創建響應式用戶界面。學生具備解決實際問題的能力，并激發對前端技術探索的熱情。（12）將之前所學的JavaScript知識，如DOM操作、事件處理、定時器使用等，綜合運用到貪吃蛇游戲的開發中，培養學生對知識的綜合運用能力；通過分析游戲需求，解決游戲開發中遇到的各種問題，如小蛇移動、碰撞檢測、食物生成等，培養學生解決實際問題的能力。2.3素質（思政）目標（1）通過對計算機技術的了解，增強探索意識；樹立正確的價值觀，提高媒介素養。（2）在學習和工作中培養刻苦努力、精益求精的態度；增強遵守規則的意識，養成按規矩行事的習慣；加強基礎知識的學習，從而實現從量變到質變的轉化，為個人的長遠發展打下堅實的基礎。（3）強化網絡安全意識，樹立正確的理想信念；增強個人信息保護和依法維權意識。（4）提高對相似事物歸納總結的能力；提高組織管理能力，加強團隊合作能力；培養人文精神和法治意識。（5）培養精益求精、科學嚴謹、追求卓越的工匠精神；養成良好的時間管理習慣；繼承優良傳統，培養創新精神。（6）樹立科技強國、為人民服務的遠大理想；增強法律意識，正確履行自身的責任和義務。（7）發揚精益求精的工匠精神，養成嚴謹的科學作風；了解國家政策，心系國家建設，樹立技能報國的人生理想。（8）了解科技發展，樹立刻苦鉆研、科技創新的人生目標；提高選擇合適方法解決不同問題的能力。（9）關注國家發展，心系國家建設，增強民族意識；增強版權意識，培養創新精神。（10）增強網絡安全意識，養成良好的職業習慣；心系國家建設，堅持以人民為中心，強化民族意識；樹立正確的網絡安全觀，提高在信息化發展中的幸福感、安全感。（11）培養利用計算機技術解決實際問題的能力；夯實基礎，提高專業水平，心系國家政府網站建設。（12）關注科技前沿新技術，激發為國爭光的熱情；培養執著專注、精益求精、追求卓越的工匠精神。（13）養成分析問題，事前規劃的良好習慣；樹立正確的文化觀，提高將文化與科技融合的能力。3．課程內容與教學要求本課程包含JavaScript入門、基本語法、數組、函數、面向對象、BOM、DOM、事件、Ajax、瀏覽器存儲、正則表達式、Vue、網頁版貪吃蛇，共13個部分的內容，60學時。具體安排如下表所示：所用教材課程內容教學建議與說明學時分配《JavaScript程序設計案例教程》第1章JavaScript入門1.1JavaScript介紹1.2開發工具問答法、討論法、講授法、項目式教學法241.3快速上手綜合案例：用戶登錄驗證問答法、討論法、講授法、項目式教學法2第2章基本語法2.1基本概念2.2變量2.3數據類型問答法、討論法、講授法、項目式教學法462.4運算符2.5流程控制語句綜合案例：計算銀行存款問答法、討論法、講授法、項目式教學法2第3章數組3.1認識引用類型3.2數組問答法、討論法、講授法、項目式教學法243.2數組綜合案例：地區選擇器問答法、討論法、講授法、項目式教學法2第4章函數4.1函數的定義與調用4.2作用域4.3匿名函數問答法、討論法、講授法、項目式教學法464.4嵌套與遞歸4.5閉包函數綜合案例：簡易版計算器問答法、討論法、講授法、項目式教學法2第5章面向對象5.1面向對象介紹5.2對象問答法、討論法、講授法、項目式教學法265.3構造器5.4內置對象問答法、討論法、講授法、項目式教學法25.5繼承綜合案例：限制輸入框輸入問答法、討論法、講授法、項目式教學法2第6章BOM6.1BOM介紹6.2window對象6.3location對象問答法、討論法、講授法、項目式教學法266.4history對象6.5navigator對象6.6screen對象問答法、討論法、講授法、項目式教學法26.7定時器綜合案例：限時秒殺活動問答法、討論法、講授法、項目式教學法2第7章DOM7.1DOM介紹7.2HTML元素操作問答法、討論法、講授法、項目式教學法247.3DOM節點操作綜合案例：電商購物車問答法、討論法、講授法、項目式教學法2第8章事件8.1事件介紹8.2事件對象問答法、討論法、講授法、項目式教學法248.3事件類型8.4事件優化綜合案例：圖片懶加載問答法、討論法、講授法、項目式教學法2第9章Ajax9.1初識Ajax9.2Web服務器搭建問答法、討論法、講授法、項目式教學法269.3XMLHttpRequest9.4數據交換格式問答法、討論法、講授法、項目式教學法29.5跨域處理綜合案例：多圖上傳功能問答法、討論法、講授法、項目式教學法2第10章瀏覽器存儲10.1Cookie10.2sessionStorage和localStorage問答法、討論法、講授法、項目式教學法2410.2sessionStorage和localStorage綜合案例：跨頁表單提交問答法、討論法、講授法、項目式教學法2第11章正則表達式11.1初識正則表達式11.2正則表達式的語法規則問答法、討論法、講授法、項目式教學法2411.3與正則表達式相關的方法綜合案例：實現表單驗證問答法、討論法、講授法、項目式教學法2第12章Vue12.1Vue入門12.2Vue實例問答法、討論法、講授法、項目式教學法2612.3數據綁定12.4計算屬性和偵聽器問答法、討論法、講授法、項目式教學法212.5模板渲染綜合案例：實現TodoList問答法、討論法、講授法、項目式教學法2第13章網頁版貪吃蛇13.1功能展示13.2功能分析問答法、討論法、講授法、項目式教學法2413.3功能實現問答法、討論法、講授法、項目式教學法2 4．課程實施4.1教學條件（1）教師能力擔任本課程的主講教師最好具有雙師型素質或是雙師型教師，具備較豐富的教學經驗，以及豐富的網站開發經驗，能夠根據本課程標準制定詳細的授課計劃，對每一堂課的教學過程精心設計，做出詳細、具體的安排，以及較強的施教能力。同時具有扎實的計算機專業知識，熟練使用JavaScript相關軟件，掌握網站開發、調試和應用中的關鍵點和技巧，具備較強的語言表達能力及教學組織能力，在教學過程中具備一定的課堂控制能力和應變能力。（2）多媒體教室多媒體教學可以使授課方式變得方便、快捷，使一些抽象難懂的知識或者操作變得直觀而形象，使課堂教學活動變得活潑生動有趣，節省了教師授課時的板書時間,提高了教學效率。（3）計算機實訓室上機操作是學生對課堂理論學習內容的再深造，可以直接體現學生對所學知識掌握程度，對提高學生的動腦、動手和實踐創新能力起著決定的作用。4.2教學方法建議教師在教學過程中，可根據自己班級學生的實際情況，靈活選用教學方法，找到適合自己學生的方法，爭取讓每位學生都能自己動手完成本課程的所有項目。在講授過程中，教師可根據實際情況選擇合適的教學模式，可先行開展相關理論知識的教學，讓學生積累足夠的知識，再讓學生進行任務實施，達到學以致用的教學目的。本課程可采用問答法、討論法、講授法、項目式教學法等多種方法，努力讓學生掌握所學知識，并達到熟練運用，所有任務都能親自動手完成。通過問答法，將教材的知識點以問題的形式呈現在學生的面前，讓學生在尋求，探索解決問題的思維活動中，掌握知識、發展智力、培養技能，進而培養學生自己發現問題解決問題的能力。通過討論法，通過預先的設計與組織，啟發學生就特定問題發表自己的見解，以培養學生的獨立思考水平和創新精神。通過項目式教學法，以任務需求來帶動教學，每次課都有相應的任務和問題，讓學生來完成，培養學生分析問題、解決問題和思考問題的習慣，增強學生實踐操作能力。通過講授法，讓學生學習基本理論和方法。結合已有的知識，適當組織一些討論，充分調動學生的主觀能動性。通過問答法，回顧所學知識內容，引導學生思考問題的方式和方法，增強學生上課的專注度。適當增加迭代教學，把重要的知識、思想、經驗在課程中反復涉及到，但每次涉及到這些內容時又不是簡單地重復，而是在回顧原有的內容的基礎上做進一步地深入和升華，既強化了記憶和理解，又拓展了新的視野，深化了理解。4.3教學評價與考核要求課程的教學評價由形成性測評（40%）和終結性測評（60%）組成，其考核要求如下：4.3.1形成性測評形成性測評考核學生在學習本課程過程中的學習情況和實際應用能力的發展情況，包括違紀考核（20%）、知識掌握情況考核（30%）、工作任務完成情況考核（50%）等。（1）違紀考核本項考核通過課前點名、上課紀律考核學生的課堂出勤率。上課遲到扣5分，上課吃東西扣5分，上課玩手機扣5分，其他擾亂課堂秩序的行為扣5分。（2）知識掌握情況考核本項考核主要通過在課堂上對學生學習態度，課堂發言，課堂參與度，問題分析和解決能力，所學知識點，項目實施過程。每次考核劃分為優秀（30分）、良好（25分）、中等（15分）、及格（10分）和不及格（5分）五個檔次。最后考核成績為學生每次任務成績的平均數。（3）工作任務完成情況考核本項考核主要通過學生對任務的解讀能力、軟件使用的能力、排查錯誤的能力、任務完成情況等，來檢測其知識掌握情況、自主學習能力、團隊協作能力，動手操作能力。每次工作任務完成情況按照相應標準而定，劃分為優秀（50分）、良好（40分）、中等（30分）、及格（15分）和不及格（5分）五個檔次。最后考核成績為學生每次任務成績的平均數。4.3.2終結性測評終結性測評主要考核學生在學完本課程后所達到的水平，通過期末考試進行考核。期末考試由閉卷筆試（60%）組成，主要評估學生對本門課程基本知識的掌握情況與綜合運用能力。5．課程資源開發與利用5.1建議教材5.2網絡資源

《JavaScript程序設計案例教程》

教案課時分配表章序課程內容課時備注1JavaScript入門42基本語法63數組44函數65面向對象66BOM67DOM48事件49Ajax610瀏覽器存儲411正則表達式412Vue613網頁版貪吃蛇4合計64

課題JavaScript入門課時4課時（180min）教學目標知識目標：（1）了解JavaScript的起源、應用和特點（2）理解JavaScript和ECMAScript的關系（3）了解編輯器和瀏覽器相關知識及其應用（4） 掌握JavaScript基礎應用（5） 能夠使用JavaScript實現簡單的網頁功能能力目標：（1）能夠運用合適的開發工具進行JavaScript代碼的編寫、運行和調試（2）掌握在HTML中以不同方式引入JavaScript的方法，并能根據實際項目需求進行正確選擇（3）能夠通過觸發事件（如按鈕點擊事件等）實現網頁的交互效果，提升用戶體驗（4）具備解決瀏覽器兼容性問題的能力，確保開發的網頁能在各種瀏覽器上正常運行素質目標：（1） 通過對計算機技術的了解，增強探索意識（2） 樹立正確的價值觀，提高媒介素養教學重難點教學重點：HTML引入JavaScript的三種方式及外鏈優勢，常用輸出語句，基礎表達式，開發工具（編輯器、瀏覽器），編輯器編寫代碼，瀏覽器運行調試代碼教學難點：JavaScript與ECMAScript的關系及完整組成，不同方式引入JavaScript的場景選擇，處理不同編輯器和瀏覽器的兼容性問題教學方法問答法、討論法、講授法教學用具電腦、投影儀、多媒體課件、教材教學過程主要教學內容及步驟課前任務【教師】布置課前任務，和學生負責人取得聯系，讓其提醒同學通過APP或其他學習軟件，完成課前任務請同學們打開常用的瀏覽器（如Chrome、Firefox等），瀏覽至少三個不同類型的網站，如新聞網站、購物網站、社交網站等。在瀏覽過程中，仔細觀察網頁上的各種交互元素并記錄，然后在APP上發表記錄。【學生】完成課前任務考勤【教師】使用APP進行簽到【學生】班干部報請假人員及原因新課預熱【教師】自我介紹，與學生簡單互動，介紹課程內容、考核標準等【學生】聆聽、互動【教師】講解JavaScript是網頁前端開發的必備技術，增強學生的學習興趣HTML、CSS和JavaScript是網頁前端開發的必備技術。使用HTML和CSS可以制作靜態的沒有交互性的網頁，而要使網頁具有交互效果，就必須要使用JavaScript來實現。我們每天都在使用電腦或手機瀏覽各種各樣的網頁，可以說瀏覽網頁已經成為我們生活的一部分，這些與我們緊密相關的網頁的實現都離不開JavaScript。【學生】聆聽、記錄、理解問題導入【教師】提出以下問題：同學們，當我們在瀏覽網頁時，經常會遇到一些很酷炫的效果和便捷的交互體驗，這些豐富的交互功能是如何實現的呢？它們背后又運用了哪些技術呢？傳授新知【教師】通過學生的回答，引入新知，講解JavaScript的基礎知識，JavaScript的開發工具，并編寫第一個JavaScript程序1.1JavaScript介紹1.1.1JavaScript的起源1995年，NetScape（網景）公司決定開發一種與Java搭配使用且語法上類似輔助腳本的語言，其公司員工BrendanEich（布蘭登·艾奇）僅花費10天時間便設計出了該腳本語言的原型。這門腳本語言最初命名為Mocha，1995年9月改名為LiveScript，同年12月，NetScape公司與Sun公司組成的開發聯盟為了讓這門語言搭上Java這門編程語言的熱度，將其臨時改名為JavaScript。但實際上Java和JavaScript是兩門完全不同的語言，除了在語法上有些類似之外，并沒有太多的共同點。……（詳見教材）1.1.2JavaScript的應用JavaScript是一種可以嵌入到網頁文件中的編程語言，可以實現網頁的交互效果，使用戶體驗更好。例如，當用戶在網頁上填寫手機號和驗證碼時，可以在瀏覽器端通過JavaScript進行校驗，如果不符合校驗規則，可以直接給出用戶提示，而不必提交到服務器，這不僅給了用戶好的體驗，還減輕了服務器端的壓力。?【教師】利用多媒體展示“百度搜索框”和“網頁上的輪播圖效果”圖片（詳見教材），并進行講解當我們在百度搜索框中輸入關鍵詞時，搜索框將會給出幾個與關鍵詞相關的提示。這是一個使用JavaScript實現的簡單效果。另外，使用JavaScript還能實現網頁中最常用到的輪播圖效果。1.1.3JavaScript的特點1．JavaScript是腳本語言腳本是一條條可執行的文本命令，一般按照自上而下的順序執行。常見的腳本語言有JavaScript、PHP、Python、Perl等，而C、C++、Java、Golang等語言并不屬于腳本語言。非腳本語言一般需要經過編譯、鏈接，生成可執行文件后才能夠運行。而腳本語言主要依賴于腳本解釋器，代碼在運行時自動進行解釋或編譯。……（詳見教材）2．支持面向對象編程，面向過程編程，函數式編程JavaScript是一種基于原型和函數的編程語言，同時也是一種多范式的語言，支持面向對象編程、命令式（面向過程）編程及函數式編程。?提示函數式編程（functionalprogramming）是將計算機運算視為函數的計算的編程范式。3．支持跨平臺執行JavaScript的執行主要依賴于瀏覽器的JavaScript引擎，目前幾乎所有瀏覽器都支持運行JavaScript，并且JavaScript語言本身不依賴操作系統，在任何平臺上都可以運行。在移動互聯網時代，利用手機等移動設備上網的用戶越來越多，JavaScript的跨平臺特性使其承擔更大的責任。1.1.4JavaScript和ECMAScript的關系ECMAScript是由Ecma國際（前身為歐洲計算機制造商協會）通過ECMA-262標準化的腳本程序設計語言，簡稱ES。JavaScript和Jscript語言可以理解為ECMAScript的實現和擴展。完整的JavaScript由三部分組成，分別是ECMAScript、DOM、BOM（詳見教材）。ECMAScript從1997年發布首個版本開始，截至目前已經更新了10個版本。從2015年6月的ECMAScript2015（簡稱ES6）開始，ECMAScript每年會更新一個版本。【課堂討論】?【教師】對學生進行分組，每組選出一名組長，然后組織學生以小組為單位討論以下問題：請結合自己日常瀏覽網頁的經驗，舉例說明JavaScript實現的交互效果，討論這些交互效果給用戶帶來哪些體驗？?【學生】聆聽、思考、小組討論，由小組代表上臺發表討論結果?【教師】總結學生的討論結果1.2開發工具1.2.1編輯器編輯器是進行Web前端開發必不可少的工具，一款優秀的編輯器能夠大幅提高開發者的工作效率。目前比較流行的Web前端開發編輯器有SublimeText、VisualStudioCode和WebStorm。接下來將分別對它們進行簡單介紹。1．SublimeTextSublimeText（簡稱Sublime）是一款輕量級的代碼編輯器，它具有簡潔清爽的用戶界面，支持多行編輯、編程語言語法高亮、快速文件切換等功能。與此同時，它擁有較為豐富的插件，可以根據需要加強編輯器本身的功能。另外，Sublime是一款跨平臺的編輯器，支持Windows、MacOS、Linux等主流操作系統。2．VisualStudioCodeVisualStudioCode（簡稱VSCode）是一款由微軟開發，同時支持Windows、MacOS、Linux等操作系統且開源的代碼編輯器。它具有Git版本控制功能，同時也具有代碼補全、代碼片段和代碼重構等功能。另外，該編輯器支持用戶個性化配置（如改變主題顏色），同時還內置了豐富的插件管理功能。?【教師】組織學生閱讀“Git版本控制系統”的內容（詳見教材），并提出問題：使用Git版本控制系統的優點有哪些？?【學生】閱讀、思考、舉手回答?【教師】總結學生的回答3．WebStormWebStorm是由JetBrains軟件公司開發的商業付費版Web開發工具，同時支持Windows、MacOS、Linux等操作系統。它內置了非常強大的代碼提示功能和各種豐富的插件，方便用戶使用。同時WebStorm集成了對Vue、React等框架的支持，并內置了強大的Git管理工具。?【教師】利用多媒體展示“常用編輯器”表格和“SublimeText編輯器”圖片（詳見教材），并進行講解除前面介紹的3種編輯器外，比較常用的還有由GitHub開發的Atom和由DCloud開發的HBuilderX。“常用編輯器”表格中展示了5種編輯器的相關信息，讀者可根據需要選擇應用。在上述5種編輯器中，SublimeText最為小巧、簡潔，同時資源占用較少，非常適合JavaScript初學者使用。1.2.2瀏覽器?【教師】利用多媒體展示“目前常見瀏覽器及其特點”表格（詳見教材），并進行講解瀏覽器是用戶訪問互聯網上各種網頁的必備工具。和編輯器類似，目前市面上也有多種多樣的瀏覽器，而且大部分瀏覽器同時存在桌面版和移動版。不同類型和版本的瀏覽器對網頁功能的支持也有所不同。作為JavaScript程序開發者，需要解決各種各樣的瀏覽器兼容性問題，以確保開發的網頁能在各種瀏覽器上運行。“目前常見瀏覽器及其特點”表格中列出了目前常見的幾種瀏覽器及其特點。【課堂問答】?【教師】隨機邀請學生回答以下問題在實際的JavaScript開發中，應如何根據項目需求來挑選最合適的編輯器和瀏覽器組合呢？?【學生】聆聽、思考、回答?【教師】總結學生的回答“目前常見瀏覽器及其特點”表格中所展示的瀏覽器，都存在多個版本，如IE瀏覽器常見的版本有8、9、10等。在一些老版本的Windows電腦中還會有IE6版本的瀏覽器，如果要讓這部分用戶正常使用網頁功能，可能還需要做一些兼容性處理。本書將采用目前市場占有率最高的Chrome瀏覽器運行和調試程序。……（詳見教材）1．渲染引擎（1）WebKit。WebKit是一個開源的渲染引擎，其前身是KDE小組的KHTML引擎。WebKit主要應用于Apple的Safari瀏覽器。另外老版本的安卓系統瀏覽器也是應用的WebKit。（2）Gecko。Gecko是一套用C++編寫的開源渲染引擎，其特點是代碼完全公開，可開發程度很高。Gecko因其開源的特點受到許多人的青睞，支持Gecko渲染引擎的瀏覽器很多，Firefox便是其中之一。（3）Trident。Trident是Microsoft著名的IE瀏覽器使用的渲染引擎，從IE4開始一直使用到IE11。IE本身的“壟斷性”使得Trident長期一家獨大，并且微軟很長時間都沒有更新Trident，這導致Trident引擎與瀏覽器標準脫離較遠，以及存在許多未修復的bug。（4）Blink。Blink是由Google主導開發的開源瀏覽器渲染引擎。它是開源引擎WebKit中WebCore組件的一個分支，并且在Chrome（28及其之后的版本）等瀏覽器中使用。目前眾多國產瀏覽器都在使用Blink渲染引擎，如360、QQ、搜狗瀏覽器等。2．JavaScript引擎（1）JavaScriptCore。JavaScriptCore是WebKit的一部分，主要應用于safari瀏覽器。（2）V8。V8是由Google開發的開源JavaScript引擎，主要應用于Chrome瀏覽器。值得一提的是，Node.js也集成了V8引擎。（3）Chakra。Chakra是由微軟開發的JavaScript引擎，主要應用于IE9～IE11瀏覽器。（4）SpiderMonkey。SpiderMonkey是世界上第一款JavaScript引擎，由NetScape公司的BrendanEich設計，之后由Mozilla維護，主要應用于Firefox瀏覽器。【課堂問答】?【教師】隨機邀請學生回答以下問題請同學們根據上述瀏覽器內核的渲染引擎和JavaScript引擎的講解，試舉例說明不同的渲染引擎和JavaScript引擎在性能和功能上有哪些主要差異？?【學生】聆聽、思考、回答?【教師】總結學生的回答?【教師】提出問題：互聯網信息良莠不齊，我們如何才能合理利用網絡、參與網絡生活呢？?【學生】聆聽、思考、回答?【教師】總結學生的回答我們要提高媒介素養，積極利用互聯網獲取新知、促進溝通、完善自我。互聯網是傳播人類優秀文化、弘揚正能量的重要載體。我們應該合理利用網絡，理性參與網絡生活，傳播網絡正能量。1.2.3【示例】HelloWorld?【教師】掃碼播放“【示例】HelloWorld”微課，幫助學生了解編寫及運行JavaScript程序的基本步驟和方法在簡單了解了JavaScript的來歷和開發工具后，相信大家已經躍躍欲試，想要親自動手編寫網頁程序了。本節帶領大家動手編寫第一個JavaScript程序。（實例位置：example/ch1/example1.2.3.html）1．創建網頁文件首先在本地磁盤創建一個文件夾code，然后在該文件夾中右鍵新建一個文本文檔，并設置文件名為index.html，最后使用Sublime編輯器將index.html文件打開。2．編寫網頁代碼在打開的index.html中編寫簡單的網頁程序，其中包括<html>、<head>、<body>等標簽元素，代碼如下：……（詳見教材）上述代碼中設置了網頁語言為en（英語），網頁編碼方式為UTF-8，以幫助瀏覽器正確識別網頁編碼。3．在網頁中插入JavaScript代碼如果在網頁中直接編寫JavaScript代碼，會被瀏覽器識別為普通文本。為此需要在網頁中插入一個<script></script>標簽對，然后在該標簽對中編寫對應的JavaScript代碼。一般將<script></script>標簽對放在<head>標簽或者<body>標簽中，代碼如下：……（詳見教材）?拓展閱讀<script>標簽放在<head>標簽和<body>標簽中，瀏覽器的執行順序會有所不同。放在<head>標簽中時，瀏覽器會先執行<script>標簽代碼，再渲染<body>標簽中的內容；放在<body>標簽中時，瀏覽器會先渲染<body>標簽中的內容，再執行<script>標簽代碼。4．運行網頁程序使用Chrome瀏覽器打開index.html文件，將會看到網頁運行效果（詳見教材）。單擊提示框中的“確定”按鈕，可看到網頁內容。?提示在編寫JavaScript代碼時，需要注意基本的語法規則，避免程序出錯。（1）JavaScript區分大小寫，如果將上述代碼中的alert寫為Alert，JavaScript程序將無法運行。（2）JavaScript對空格、換行、縮進不敏感，一條語句可以分成多行書寫。（3）JavaScript中雙引號和單引號都可以表示字符串。1.3快速上手1.3.1在HTML中引入JavaScript?【教師】掃碼播放“在HTML中引入JavaScript”微課，幫助學生了解使用內聯式、外鏈式、行內式三種方式引入JavaScript的方法在HTML中可以使用內聯式、外鏈式、行內式三種方式引入JavaScript。不同的方式對應不同的使用情況，下面分別介紹這三種方式。1．內聯式內聯式是將JavaScript代碼包裹在<script>標簽中直接編寫到HTML文件中。1.2.3節的案例就是通過內聯方式引入JavaScript代碼的。使用內聯方式引入JavaScript的形式如下：<scripttype="text/javascript"> JavaScript代碼;</script>上述代碼中，<script>標簽的屬性type用于告訴瀏覽器該段JavaScript代碼的類型。在HTML5標準中，<script>標簽的type屬性默認為“text/javascript”，在不考慮老版本瀏覽器兼容性的情況下，可以不寫type屬性。type屬性除可以為“text/javascript”外，還可以為其他類型，感興趣的讀者可以自行查閱學習。2．外鏈式外鏈式是指創建一個擴展名為js的文件，將JavaScript代碼編寫在該文件里，然后通過<script>標簽的src屬性將文件引入到網頁中。下面通過實例進行說明。【課堂練習】?【教師】利用多媒體展示【例1-1】，并進行講解，幫助學生掌握使用外鏈方式在網頁中引入JavaScript代碼，實現網頁彈窗效果的方法使用外鏈方式在網頁中引入JavaScript代碼，實現網頁彈窗效果。（實例位置：example/ch1/1-1.html）。……（詳見教材）?【學生】聆聽、思考、理解?高手點撥由上述示例代碼可以看出，<script>標簽的src屬性值是一個文件路徑。src屬性值除了可以是文件路徑（包括相對路徑和絕對路徑）外，還可以是URL地址。（1）相對路徑……（詳見教材）（2）絕對路徑……（詳見教材）（3）URL地址……（詳見教材）?拓展閱讀在網頁加載時，用戶都會希望盡快加載出網頁內容和樣式。當將<script>標簽放在<head>標簽中時，瀏覽器執行到<script>標簽時會進行JavaScript代碼的下載和執行，這樣會阻止瀏覽器對HTML內容的解析和顯示。所以通常會將<script>標簽放在</body>標簽前的位置，即所有網頁內容之后，這樣可以減少<script>標簽對網頁內容顯示的影響。……（詳見教材）3．行內式行內式是指將JavaScript代碼作為HTML標簽的屬性值使用。例如，單擊網頁上的按鈕彈出提示框，可通過以下代碼實現。<buttononclick="alert('點擊按鈕')">我是個按鈕</button>除按鈕單擊事件之外，為<a>標簽的href屬性賦值JavaScript代碼后，單擊鏈接標簽也能彈出提示框，代碼如下：<ahref="javascript:alert('點擊鏈接');">我是個鏈接</a>現代網頁開發提倡使用HTML、CSS、JavaScript分離的方式，即CSS和JavaScript都通過外鏈的方式引入。這樣既能減少HTML文件的大小，也能通過defer等屬性提升網頁加載速度，還能增加代碼的可讀性和可維護性。另外，通過外鏈方式引入的JavaScript代碼可以使用CDN（contentdeliverynetwork，內容分發網絡），進一步加快文件下載速度，提升網頁性能。建議今后在網頁開發中盡量使用外鏈方式引入JavaScript。【課堂問答】?【教師】隨機邀請學生回答以下問題在HTML中引入JavaScript的內聯式、外鏈式和行內式各有什么優缺點？在實際開發中應如何選擇合適的引入方式？?【學生】聆聽、思考、回答?【教師】總結學生的回答1.3.2常用輸出語句利用輸出語句可以輸出一段代碼的執行結果，在學習JavaScript時經常會用到輸出語句。下面介紹3個常用的輸出語句。1．console.log()console.log()主要用于在瀏覽器控制臺輸出相關內容，代碼如下：console.log('這是一個log'); //輸出結果“這是一個log”?【教師】利用多媒體展示“console.log()控制臺輸出”圖片（詳見教材），并進行講解在code文件夾下創建console.html文件，并在<script>標簽中編寫上述代碼，再使用瀏覽器打開console.html文件，在網頁空白處單擊鼠標右鍵，在彈出的快捷菜單中選擇“檢查”項可打開調試工具，切換到“Console”選項卡，可看到輸出結果，如圖所示。……（詳見教材）2．alert()使用alert()方法可以在瀏覽器中彈出一個警示框，確保用戶可以看到某些重要信息。alert()方法在之前的案例中已經多次用到過，此處不再對其用法做過多介紹。除上述用處外，alert()方法還常用于測試程序。3．prompt()prompt()方法用于顯示提示用戶輸入信息的對話框，代碼如下：prompt('請輸入密碼'); //提示用戶“請輸入密碼”?【教師】利用多媒體展示“prompt()彈窗”圖片（詳見教材），并進行講解代碼運行結果如圖所示。?提示當網頁彈窗運行時，彈窗之后的JavaScript代碼將會停止執行，只有在彈窗消失后，后續JavaScript代碼才會繼續執行。【課堂問答】?【教師】隨機邀請學生回答以下問題常用輸出語句console.log()、alert()和prompt()在功能上有哪些不同？分別適用于哪些場景？?【學生】聆聽、思考、回答?【教師】總結學生的回答1.3.3基礎表達式1．變量聲明與賦值變量可以理解為一個容器，每個容器都有一個獨一無二的名稱，這個名稱就是變量名。當需要多次使用同一個數據時，可以定義一個變量來保存該數據。一般采用以下方法聲明和賦值變量。varapple; //聲明變量applevarnum=1; //聲明變量num，并賦值為1console.log(num); //輸出結果12．算術運算JavaScript支持+（加）、-（減）、*（乘）、/（除）四則運算，示例如下：console.log(1+1); //輸出結果2console.log(1+5*2); //輸出結果11console.log((4-2)/2); //輸出結果1……（詳見教材）3．比較數字大小使用JavaScript中的比較運算符可以比較兩個數字的大小，示例如下：console.log(10>2); //輸出結果trueconsole.log(5<2); //輸出結果falseconsole.log(3==5); //輸出結果falseconsole.log(8==8); //輸出結果true……（詳見教材）4．字符串輸出JavaScript中的字符串是指使用單引號或雙引號包裹的數據，示例如下：console.log('hello'); //輸出結果helloconsole.log("world"); //輸出結果world5．字符串拼接字符串拼接是指將兩個或兩個以上字符串組合成一個字符串，通常使用“+”運算符進行字符串拼接操作，示例如下：console.log('hello'+'world'); //輸出結果helloworldconsole.log('abc'+'123'); //輸出結果abc1236．比較字符串是否相同使用“==”操作符可以比較兩個字符串是否相同，示例如下：console.log('doc'=='doc'); //輸出結果trueconsole.log('a'=='b'); //輸出結果false7．根據比較結果執行不同的代碼在JavaScript程序中，有時需要根據比較結果執行不同的代碼，這就用到了if…else語句，示例如下：if('doc'=='cod'){ console.log('equal'); //比較結果為true時執行}else{ console.log('unequal'); //比較結果為false時執行}上述代碼的執行結果為unequal，因為doc并不等于cod。【課堂討論】?【教師】組織學生以小組為單位討論以下問題：請同學們結合上述基礎表達式中的各種操作（變量聲明與賦值、算術運算、比較大小、字符串操作等）的講解，討論其在實際網頁開發中有哪些具體應用。?【學生】聆聽、思考、小組討論，由小組代表上臺發表討論結果?【教師】總結學生的討論結果1.3.4函數在軟件開發領域，有一個專有名詞叫封裝。封裝簡單來講就是使用函數將一段代碼或者一個功能模塊單獨抽離出來，然后通過調用一個個函數來完成任務。這樣不僅可以減少代碼的重復編寫，還能使代碼整體結構更加清晰。我們頻繁使用的console.log()就是一個系統自帶的函數。一般使用關鍵字function定義函數，函數的詳細內容見第4章。【課堂問答】?【教師】隨機邀請學生回答以下問題函數在JavaScript開發中的作用是什么？請結合具體例子說明如何進行函數的封裝以及調用函數帶來的好處。?【學生】聆聽、思考、回答?【教師】總結學生的回答1.3.5事件事件是指可以被JavaScript偵測到的行為，如在網頁中移動或單擊鼠標，敲擊鍵盤等。可以通過觸發事件執行特定的JavaScript代碼，從而實現網頁的交互效果。例如，用戶單擊頁面上的某個按鈕，就觸發了單擊事件，此時瀏覽器會打開一個提示框。【課堂練習】?【教師】利用多媒體展示【例1-2】，并進行講解，幫助學生掌握編寫JavaScript代碼實現單擊按鈕觸發事件的方法編寫JavaScript代碼實現單擊按鈕觸發事件。（實例位置：example/ch1/1-2.html）。……（詳見教材）?【學生】聆聽、思考、理解……（詳見教材）1.3.6【示例】改變網頁文字顏色本節通過編寫一個簡單的JavaScript程序，實現單擊按鈕讓網頁中文字變色的效果。（實例位置：example/ch1/example1.3.6.html）示例代碼如下：（詳見教材）上述代碼第8行是1個“我會變色”的<h1>標簽，9～13行編寫了5個對應不同顏色的按鈕，單擊每個按鈕都會調用setColor()方法，并傳入對應的顏色作為函數參數。setColor()方法使用document.getElementsByTagName('h1')獲取頁面上的<h1>標簽，然后通過該標簽的style對象的color屬性設置顏色。style表示對應元素的樣式，color對應CSS中的color屬性。使用瀏覽器打開網頁文件。單擊“變為藍色”按鈕，可以看到“我會變色”4個字變為藍色。有些同學可能現在還看不太懂案例中的個別語句，這沒關系，學完后面的內容自然就會懂了。【學生】聆聽、思考、理解、記錄課堂實訓【教師】講述“用戶登錄驗證”實現的功能，介紹設計思路，演示任務步驟，并組織學生以小組為單位完成任務網站一般都有用戶登錄注冊模塊，本案例將制作一個用戶登錄頁面。該頁面使用JavaScript程序獲取用戶輸入的用戶名和密碼，如果輸入的用戶名和密碼正確，提示用戶登錄成功；如果用戶名或密碼不正確，則提示用戶輸入的用戶名或密碼錯誤。（實例位置：example/ch1/login.html）新建網頁文檔“login.html”，在其中輸入以下代碼并保存文檔。1 <!DOCTYPEhtml>2 <htmllang="en">3 <head>4 <metacharset="UTF-8">5 <title>用戶登錄校驗</title>6 </head>7 <body>8 <script>9 varusername=prompt('請輸入用戶名'); //提示輸入用戶名 //如果用戶名為“tom”，則提示輸入密碼10 if(username=='tom'){11 varpassword=prompt('請輸入密碼');……（詳見教材）上述第10行代碼，將用戶輸入的用戶名與“tom”對比，如果匹配則讓用戶繼續輸入密碼，如果不匹配則提示“用戶名輸入錯誤”。第12行代碼將用戶輸入的密碼與“123456”對比，如果用戶輸入的密碼與“123456”匹配，則提示用戶“登錄成功”，否則提示用戶“密碼輸入錯誤”。使用瀏覽器打開網頁文檔，將彈出“請輸入用戶名”提示框。當輸入正確的用戶名“tom”并單擊“確定”按鈕后，會提示用戶“請輸入密碼”。當輸入正確的密碼“123456”后單擊“確定”按鈕，會提示“登錄成功”。【學生】觀看、聆聽、思考、按要求完成任務，先完成的學生幫助本組其他學生完成任務，如遇問題可詢問教師【教師】巡堂指導，及時解決學生問題課堂小結【教師】簡要總結本課的要點本課首先講了JavaScript的起源；然后講了JavaScript的應用、特點，以及JavaScript和ECMAScript的關系；接下來介紹了JavaScript開發工具，并通過一個小示例講解了如何利用編輯器和瀏覽器編輯和展示網頁；最后簡單介紹了在網頁中引入JavaScript的方式、常用輸出語句等基礎知識，并通過一個綜合案例向讀者展示了JS在實際網頁中的應用。通過本課的學習，學生應重點掌握SublimeText編輯器和Chrome瀏覽器在JavaScript開發和運行中的應用，以及在網頁中引入JavaScript的方式，并簡單了解常用輸出語句、基礎表達式、函數和事件的基礎知識。【學生】總結回顧知識點作業布置【教師】布置課后作業請根據本課所學知識，完成課后習題中的相關習題。【學生】完成課后任務教學反思

課題基本語法課時6課時（270min）教學目標知識目標：（1） 了解標識符的概念及其定義規則（2） 掌握變量的聲明和賦值方法（3） 熟悉常用數據類型（4） 掌握常用運算符的應用（5） 掌握流程控制語句的應用能力目標：（1）熟悉各種數據類型的特點和使用場景，能夠準確地進行數據類型轉換（2）能夠運用條件語句和循環語句編寫具有邏輯結構的程序，實現不同的功能（3）通過計算立方體體積、打印菱形圖形、計算銀行存款等案例，能夠學會分析問題、解決問題的方法，提高自己的編程能力（4）在遇到實際問題時，能夠運用所學的知識和技能，選擇合適的語法和算法來解決問題素質目標：（1） 在學習和工作中培養刻苦努力、精益求精的態度（2） 增強遵守規則的意識，養成按規矩行事的習慣（3） 加強基礎知識的學習，從而實現從量變到質變的轉化，為個人的長遠發展打下堅實的基礎教學重難點教學重點：JavaScript的基本語法，包括標識符命名規則、變量聲明與賦值、數據類型理解、運算符使用及其優先級，以及流程控制語句的應用教學難點：位運算符的運算規則及實際應用；復雜條件下的運算符優先級判斷；運用流程控制語句；合理選擇數據類型和運算符進行高效編程教學方法問答法、討論法、講授法教學用具電腦、投影儀、多媒體課件、教材教學過程主要教學內容及步驟課前任務【教師】布置課前任務，和學生負責人取得聯系，讓其提醒同學通過APP或其他學習軟件，完成課前任務請同學們使用JavaScript編寫代碼，輸出一些簡單的語句、進行基本的數學運算，然后在APP上發表遇到的問題，瀏覽其他同學遇到的問題，并提出解決辦法。【學生】完成課前任務考勤【教師】使用APP進行簽到【學生】班干部報請假人員及原因問題導入【教師】提出以下問題：當我們在使用手機或電腦上的應用程序時，有沒有想過這些程序是如何實現各種功能的呢？比如，一個簡單的計算器應用，它是如何進行數字計算和邏輯判斷的呢？傳授新知【教師】通過學生的回答，引入新知，講解JavaScript中的基本概念，以及變量、數據類型、運算符、流程控制語句的相關知識2.1基本概念2.1.1標識符標識符是指開發者自定義的變量、函數、屬性等的名稱。例如，單詞apple可以作為標識符使用。當然，并不是所有字符都能用作標識符，每種編程語言都有自己的標識符定義規則，下面介紹一下JavaScript中標識符的定義規則。①標識符由字母、下劃線（_）、美元符號（$）和數字構成，如car，_book1，$money。②第一個字符不能為數字，如123str就屬于非法標識符。③在定義標識符時，最好能做到見名知義，如name表示名稱，sex表示性別等。④不能使用JavaScript中的關鍵字命名標識符，如char就屬于非法標識符。【課堂問答】?【教師】隨機邀請學生回答以下問題：JavaScript中，標識符對字母大小是否敏感，即是否區分大小寫？?【學生】聆聽、思考、回答?【教師】總結學生的回答……（詳見教材）2.1.2關鍵字和保留字關鍵字是指JavaScript中預先定義好的單詞，它們被賦予了各種不同的含義。例如，var關鍵字表示變量聲明。關鍵字不能用于標識符的命名，如果用關鍵字命名標識符，在程序運行時會出現錯誤提示。?【教師】利用多媒體展示“ES5中的所有關鍵字”和“所有保留字”表格（詳見教材），并進行講解ES5中一共有26個關鍵字，它們有著不同的意義。例如，var用于變量聲明，function用于函數聲明，typeof用于變量類型判斷，if用于條件判斷。在之后的章節中，我們將會陸續講解這些關鍵字的含義和用法，目前暫作了解。除上述關鍵字之外，JavaScript中還有一些保留關鍵字，簡稱保留字。保留字是指將來可能會用作JavaScript關鍵字的一些單詞，是為JavaScript的發展預留的一些詞語。雖然保留字可以作為標識符，但不建議這么使用，因為隨著語言的發展，可能會導致一些無法預測的錯誤。2.1.3注釋幾乎所有的編程語言都有注釋功能。注釋主要用于描述當前代碼，它可以讓別人更好地理解你編寫的代碼，在多人合作開發時尤其有用。在程序解析時，注釋會被JavaScript解釋器忽略。JavaScript中的注釋主要有兩種，單行注釋和多行注釋。1．單行注釋單行注釋以兩個斜杠“//”開始，后面都是注釋內容，代碼如下：//聲明變量name，并為其賦值varname='tom';2．多行注釋多行注釋以斜杠和星號“/*”開始，星號和斜杠“*/”結束，代碼如下：/**聲明變量teacher*為變量teacher賦值*/varteacher='math';上述示例，中間的星號不是必需的，增加星號是為了增加注釋的可讀性。多行注釋中可以嵌套單行注釋，但不能嵌套多行注釋。?【教師】提出問題：孟子云：“不以規矩，不能成方圓”，我們在書寫程序和生活中要遵守哪些規則呢？?【學生】聆聽、思考、回答?【教師】總結學生的回答程序中的每一條語句都要符合語法規則。現實生活中人們也要遵守各種各樣的規則，如法律法規、道德規范等。正因為有這些規則的存在，社會才能有序運轉，我們才能有序生活。2.2變量?【教師】掃碼播放“變量”微課，幫助學生了解使用變量時的變量聲明和變量賦值2.2.1變量聲明JavaScript中一般使用var來聲明變量，下面通過實例介紹具體方法。【課堂練習】?【教師】利用多媒體展示【例2-1】，并進行講解，幫助學生掌握聲明變量的方法聲明變量。（實例位置：example/ch2/2-1.html）。……（詳見教材）?【學生】聆聽、思考、理解例2-1使用var聲明了cat、blueShoes、boy和girl四個變量，其中boy和girl使用了同一個var。使用var可以一次聲明一個變量，以“;”結束；也可以一次聲明多個變量，各變量之間使用“,”分隔。下面運行例2-1創建的頁面，并在控制臺輸出剛聲明的變量，效果如圖所示（詳見教材）。……（詳見教材）?拓展閱讀ES6中新增了let和const兩個全新的變量聲明關鍵字。let可以代替var使用，區別在于，其所聲明的變量只在let命令所在的代碼塊內有效。const定義的變量值不可修改，也可以說const定義的是常量。……（詳見教材）【課堂討論】?【教師】組織學生以小組為單位討論以下問題：在JavaScript中，有多種變量聲明方式，如使用var、let和const，也可以不使用關鍵字直接賦值。討論不同聲明方式的優缺點及在實際開發中應如何選擇。?【學生】聆聽、思考、小組討論，由小組代表上臺發表討論結果?【教師】總結學生的討論結果2.2.2變量賦值在聲明變量之后，需要為變量賦值。變量賦值的方式一般有兩種，一種是聲明的同時進行賦值，另一種是先聲明后賦值。下面通過實例介紹具體方式。【課堂練習】?【教師】利用多媒體展示【例2-2】，并進行講解，幫助學生掌握聲明賦值的方法為變量賦值。（實例位置：example/ch2/2-2.html）。……（詳見教材）?【學生】聆聽、思考、理解下面運行頁面，并在控制臺輸出剛聲明并賦值的變量。在聲明變量的同時賦值，能直接打印出變量book所對應的值“JavaScript”；先進行變量聲明的car，打印的結果為undefined；當為變量car賦值后，打印變量car所對應的值，結果為“bens”。?拓展閱讀除了使用關鍵字進行變量聲明和賦值外，也可以不使用關鍵字進行變量聲明和賦值，如dogColor='yellow'。使用這種方式定義的變量等價于window.dogColor='yellow'，后續的章節會對這樣的變量定義進行介紹。建議在程序編寫過程中都通過關鍵字進行變量聲明，否則可能會出現不符合預期的錯誤。2.3數據類型2.3.1Undefined類型Undefined類型是JavaScript中特有的數據類型，它僅有一個對應值undefined。可以定義一個變量值為undefined，代碼如下：varweather=undefined;console.log(weather); //undefined上述示例定義一個值為undefined的變量weather，在控制臺輸出weather的值為undefined。在2.2.1小節提到過，定義一個變量且未賦值的情況下，它的值為undefined，所以在定義變量時，未進行賦值和賦值為undefined的變量其實是等價的。一般來說不需要將變量顯式定義為undefined。2.3.2Null類型Null類型是JavaScript中另外一個僅有一個值的數據類型，它的對應值為null。null表示一個空的對象指針，它和undefined其實很像，使用等于運算符（==）將null和undefined進行對比時，它們是相等的。與undefined不同的是，null表示變量（對象或地址）不存在或者無效，而undefined表示變量沒有被賦值。【課堂討論】?【教師】對學生進行分組，每組選出一名組長，然后組織學生以小組為單位討論以下問題：請同學們討論null和undefined與空字符串（''）和0四者是否存在相等的情況？?【學生】聆聽、思考、小組討論，由小組代表上臺發表討論結果?【教師】總結學生的討論結果2.3.3Boolean類型Boolean類型是JavaScript中比較常用的數據類型之一，它一共有兩個值，分別為true和false。布爾型數據主要用于邏輯判斷，true為真，false為假。代碼如下：varappleIsFruit=true; //蘋果是一種水果是真實的，即變量為真varappleIsMeat=false; //蘋果是一塊肉是不真實的，即變量為假?提示值得注意的是，因為JavaScript是區分大小寫的，所以僅有true和false為Boolean類型的值，True、False等都不是Boolean類型的值。另外，其他類型的數據也可以轉換為Boolean類型，可以通過Boolean()函數將Undefined類型和Null類型數據轉換為Boolean類型。【課堂練習】?【教師】利用多媒體展示【例2-3】，并進行講解，幫助學生掌握Boolean()函數的用法和作用使用Boolean()函數將其他類型數據轉換為Boolean類型（實例位置：example/ch2/2-3.html）。……（詳見教材）?【學生】聆聽、思考、理解……（詳見教材）2.3.4Number類型和其他語言不同的是，JavaScript的Number（數值）類型不區分整數和浮點數（小數，在某些語言里稱為雙精度值），所有數值都為Number類型。Number類型默認為正數，也可以在數值前加上“+”號表示正數，數值前加上“-”號表示負數。代碼如下：vara=10; //定義a為正整數10vara=+10; //和上一行代碼一致……（詳見教材）由上述示例可以看出，數值類型還可以使用科學計數法表示，以0開始的數值表示八進制數，以0x開始的數值表示十六進制數。由于計算機內存的限制，數值大小都有一個范圍限制。在JavaScript中有Number.MIN_VALUE和Number.MAX_VALUE兩個值，它們分別代表數值的最小值和最大值。在大部分瀏覽器中，Number.MIN_VALUE為5e-324，Number.MAX_VALUE為1.7976931348623157e+308。如果定義了一個大于最大值的數值，則該數值會被轉換為特殊值Infinity（無窮大）；同理，如果定義了一個小于最小值的數值，則該數值會被轉換為特殊值-Infinity（負無窮大）。其他類型的數據也可以轉換為Number類型，如使用Number()函數可將Undefined類型、Null類型及Boolean類型數據轉換為Number類型。【課堂練習】?【教師】利用多媒體展示【例2-4】，并進行講解，幫助學生掌握Number()函數的用法和作用使用Number()函數將其他類型數據轉換為Number類型。（實例位置：example/ch2/2-4.html）。……（詳見教材）?【學生】聆聽、思考、理解?知識庫NaN是JavaScript中的一個特殊全局對象屬性，全稱為NotaNumber（不是一個數字），但它本身卻是一個Number類型的值。當其他語言的一個數值除以0時一般會有報錯提示，但在JavaScript中會返回一個NaN，這樣可以避免數值計算的錯誤。……（詳見教材）2.3.5String類型String類型是由零個或多個Unicode字符組成的字符序列，這個字符序列又稱為字符串，是開發過程中最常用的數據類型。和部分語言不同，JavaScript中的字符串可以由單引號（''）或者雙引號（""）包裹。需要注意的是，以單引號開始的字符串需要以單引號結尾，以雙引號開始的字符串需要以雙引號結尾，否則會報錯。代碼如下（詳見教材）。由以上代碼可以看出，字符串中雙引號和單引號可以相互嵌套，但必須成對出現。某些情況下可能需要在單引號中增加單引號，或在雙引號中增加雙引號，此時可以使用轉義字符“\”處理。代碼如下：varstr1='this\'saboy'; //輸出this'saboyvarstr2="\"English\"" //輸出"English"轉義字符除了可以在字符串中輸出引號之外，還有換行、輸出反斜杠等功能。?【教師】利用多媒體展示“轉義字符常見應用及其含義”表格（詳見教材），并進行講解其他類型數據同樣可以轉換為String類型，使用String()函數可將Undefined類型、Null類型、Boolean類型和Number類型數據轉換為String類型。【課堂練習】?【教師】利用多媒體展示【例2-5】，并進行講解，幫助學生掌握String()函數的用法和作用使用String()函數將其他類型數據轉換為String類型。（實例位置：example/ch2/2-5.html）。……（詳見教材）?【學生】聆聽、思考、理解?知識鏈接ES6引入了模板字符串。模板字符串是普通字符串的加強版，普通字符串使用單引號（''）和雙引號（""）進行標識，而模板字符串使用反引號（``，位于鍵盤左上角Esc鍵下方）進行標識。模板字符串可以作為普通字符串使用，也可用于定義多行字符串或在字符串中嵌入變量。……（詳見教材）【課堂問答】?【教師】隨機邀請學生回答以下問題JavaScript中的模板字符串有什么特點？?【學生】聆聽、思考、回答?【教師】總結學生的回答2.4運算符2.4.1算術運算符算術運算符主要用于數值之間的計算。它的功能和數學中的加減乘除類似，并在其基礎上增加了自增自減等操作。?【教師】利用多媒體展示“常用算術運算符及其含義”表格（詳見教材），并進行講解由“常用算術運算符及其含義”表格可以看出，算術運算符和數學中的運算符有許多相似之處，理解起來也比較容易，其主要新增了“++”和“--”兩種運算符。自增和自減運算符可以放在變量前或變量后。“常用算術運算符及其含義”表格展示了常用的算術運算符及其含義。【課堂練習】?【教師】利用多媒體展示【例2-6】，并進行講解，幫助學生掌握自增和自減運算自增和自減運算符的應用。（實例位置：example/ch2/2-6.html）。……（詳見教材）?【學生】聆聽、思考、理解由例2-6可以看出，自增和自減運算符放在變量前和變量后結果是不同的，放在變量前表示變量先自增減，然后再進行其他操作；放在變量后表示變量先進行其他操作，再自增減。“+”運算符不僅能用于數學上的加法運算，還可用于字符串拼接操作。【課堂練習】?【教師】利用多媒體展示【例2-7】，并進行講解，幫助學生掌握“+”運算在不同場景下的作用“+”運算符的應用。（實例位置：example/ch2/2-7.html）。……（詳見教材）?【學生】聆聽、思考、理解由例2-7可以看出，“+”號可以拼接字符串。值得注意的是，當字符串和數值進行加法操作時，會進行字符串拼接，而不會進行加法操作。算術運算符除了自增自減外還有一些其他特點，具體包括以下幾點。①在進行普通的四則運算時，和數學中的運算順序一致“先乘除后加減”。與此同時，小括號可以改變運算的順序，如(1+2)*3，先進行括號中的加法運算，再進行乘法運算。②“+”和“-”和數學中一樣，可以代表正數和負數，如(+2)+(-5)的結果為-3。③需要注意的是，由于JavaScript的數值類型采用了IEEE754浮點數計算，在進行小數的運算時，會出現精度丟失的問題。例如，0.1+0.5的結果理論上是0.6，但由于精度問題，導致最終結果為0.060000000000000005，所以在進行小數的運算時需要特別注意。④數值中還存在+0和-0兩種，(+0)+(-0)結果為+0，(+0)+(+0)結果為+0，(-0)+(-0)結果為-0。【課堂問答】?【教師】隨機邀請學生回答以下問題請同學們根據上述講解，思考自增自減運算符放在變量前和變量后的區別，并舉例說明？?【學生】聆聽、思考、回答?【教師】總結學生的回答2.4.2賦值運算符賦值運算符是最常用的運算符，其作用是將運算符右側的計算結果賦值給左側的變量。最基本的賦值運算符之前已使用多次，那就是“=”運算符。賦值運算符的“=”不等同于數學中的等于號，數學中的等于號與比較運算符“==”和“===”類似（2.4.3節會介紹）。?【教師】利用多媒體展示“常用算術運算符及其含義”表格（詳見教材），并進行講解在常用算術運算符及其含義”表格中，除“=”運算符以外，其他賦值運算符都是簡寫形式。例如：varnum=1;num+=5;它可以等價于以下代碼：varnum=1;num=num+5;?提示表中各運算符的使用此處先簡單了解即可，關于位運算符具體如何運算，2.4.6節將會詳細介紹。2.4.3比較運算符比較運算符主要用于變量與變量、變量與其他基本類型數據的比較，比較結果為Boolean類型的值，即true或者false。?【教師】利用多媒體展示“常用比較運算符及其含義”表格（詳見教材），并進行講解“==”和“===”都表示等于，“!=”和“!==”都表示不等于，它們的主要區別是，“==”和“!=”會對比較的數據進行類型轉換（常稱為隱式類型轉換），再進行值比較；而“===”和“!==”不會進行數據類型轉換，直接比較兩個值是否相等。代碼如下：……（詳見教材）【課堂問答】?【教師】隨機邀請學生回答以下問題在比較運算符中，“==”、“!=”與“===”、“!==”在數據比較中有什么區別？?【學生】聆聽、思考、回答?【教師】總結學生的回答2.4.4條件運算符條件運算符也稱為三元運算符，主要由條件表達式和結果表達式構成，是一種非常靈活的運算符。條件運算符結構如下：條件表達式?結果1:結果2“?”左邊為條件