模塊1開發(fā)環(huán)境及JavaScript準(zhǔn)備本模塊從整體上介紹了HTML5相關(guān)的技術(shù)，指導(dǎo)如何安裝、配置和使用VisualStudioCode及相關(guān)插件，并初步講解如何使用瀏覽器進(jìn)行調(diào)試觀察。另外，還重點(diǎn)講解了學(xué)習(xí)本書所需的JavaScript知識(shí)，為后續(xù)章節(jié)做準(zhǔn)備。HTML5移動(dòng)前端開發(fā)基礎(chǔ)與實(shí)戰(zhàn)（微課版）了解HTML5前端開發(fā)相關(guān)技術(shù)。掌握前端開發(fā)必備的JavaScript知識(shí)。知識(shí)目標(biāo)1掌握VisualStudioCode的安裝、使用方法。2學(xué)會(huì)安裝和使用VisualStudioCode擴(kuò)展。職業(yè)目標(biāo)3掌握使用VisualStudioCode創(chuàng)建一個(gè)包含HTML

+

CSS

+

JavaScript架構(gòu)的HTML文件的方法。4初步掌握使用瀏覽器調(diào)試和觀察HTML頁(yè)面的方法。培養(yǎng)團(tuán)隊(duì)合作、協(xié)同工作能力。培育腳踏實(shí)地、專注做事、精益求精的工匠精神。素質(zhì)目標(biāo)HTML5是最新的HTML標(biāo)準(zhǔn)。HTML負(fù)責(zé)描述網(wǎng)頁(yè)的骨架，簡(jiǎn)單來(lái)說(shuō)就是把網(wǎng)頁(yè)分割成一個(gè)個(gè)的矩形，然后把這些矩形嵌套起來(lái)，形成層級(jí)關(guān)系。2007年互聯(lián)網(wǎng)組織便著手設(shè)計(jì)最新的HTML標(biāo)準(zhǔn)，經(jīng)過(guò)將近8年的修訂，終于在2014年定稿，推出最新的標(biāo)準(zhǔn)HTML5，主要是加入了一些新標(biāo)簽，推廣語(yǔ)義化的描述。1.1HTML5相關(guān)技術(shù)簡(jiǎn)介1.1.1HTMLHTML（HyperTextMarkupLanguage）：超文本標(biāo)記語(yǔ)言，是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。HTML運(yùn)行在瀏覽器上，由瀏覽器解釋執(zhí)行。HTML5中的主要新特性如下。用于媒介回放的video和audio元素。用于繪畫的canvas元素。對(duì)本地離線存儲(chǔ)有更好的支持。新的表單控件，如calendar、date、time、email、url、search。1.1.2CSS-÷×+定義如何顯示HTML元素。把樣式添加到HTML中，是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)題。外部樣式表通常存儲(chǔ)在CSS文件中。重用較多時(shí)，外部樣式表可以極大提高工作效率。CSS指層疊樣式表(CascadingStyleSheets)，主要用途如下。312JavaScript是一種輕量級(jí)的編程語(yǔ)言。JavaScript是可插入HTML頁(yè)面的編程代碼。JavaScript由瀏覽器解釋執(zhí)行。1.1.3JavaScriptJavaScript是互聯(lián)網(wǎng)上最流行的腳本語(yǔ)言，可廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機(jī)等設(shè)備。VisualStudioCode簡(jiǎn)稱VSCode，是一款由微軟開發(fā)的跨平臺(tái)的免費(fèi)源代碼編輯器。該軟件支持語(yǔ)法高亮、代碼自動(dòng)補(bǔ)全、代碼重構(gòu)、查看定義等功能，并且內(nèi)置了命令行工具和Git版本控制系統(tǒng)。用戶可更改主題等個(gè)性化設(shè)置，最為方便的是，用戶可以很方便地安裝各種插件以拓展軟件功能。1.2VisualStudioCode及常用插件的安裝、使用1.2.1VisualStudioCode安裝下載并安裝VisualStudioCode。演練1.11.2.2使用VisualStudioCode熟悉VisualStudioCode的常用編輯技巧，并通過(guò)第一個(gè)程序，熟悉HTML+CSS+JavaScript的基本架構(gòu)。使用VisualStudioCode編輯一個(gè)HTML

+

CSS

+

JavaScript基本架構(gòu)的HTML文件。演練1.21.2.3瀏覽器調(diào)試入門熟悉瀏覽器調(diào)試界面。演練1.3【注意】使用Console是經(jīng)常用來(lái)觀察調(diào)試結(jié)果的方法之一，請(qǐng)牢記。1.2.4VisualStudioCode常用技巧改變主題顏色。演練1.4關(guān)閉文件夾。演練1.5JavaScript是一種輕量級(jí)的編程語(yǔ)言，由瀏覽器解釋執(zhí)行。本書并不大篇幅介紹JavaScript，只介紹一些常用的語(yǔ)法，為讀者完成后續(xù)學(xué)習(xí)做必要的準(zhǔn)備。1.3JavaScript常用語(yǔ)法1.3.1數(shù)據(jù)類型JavaScript中的數(shù)據(jù)類型有number、string、boolean、undefined、object。熟悉常用數(shù)據(jù)類型。演練1.61.3.2流控語(yǔ)句熟悉if語(yǔ)句。演練1.7熟悉for循環(huán)。演練1.8熟悉while循環(huán)。演練1.91.3.3數(shù)組數(shù)組對(duì)象是使用單獨(dú)的變量名來(lái)存儲(chǔ)一系列的值?？梢酝ㄟ^(guò)指定數(shù)組名及其索引號(hào)訪問(wèn)某個(gè)特定的元素。熟悉使用數(shù)組。演練1.101.3.4document對(duì)象document對(duì)象是HTML文檔的根節(jié)點(diǎn)?？赏ㄟ^(guò)document訪問(wèn)HTML頁(yè)面中的所有元素。document對(duì)象是window對(duì)象的一部分，也可通過(guò)window.document訪問(wèn)（當(dāng)然這樣寫出來(lái)比較長(zhǎng)，通常也沒(méi)必要這么做）。使用getElementById和getElementsByClassName操作document對(duì)象。演練1.11使用querySelector和querySelectorAll操作document對(duì)象象。演練1.121.3.5函數(shù)和事件熟悉函數(shù)、事件的寫法。演練1.131.3.6定時(shí)相關(guān)函數(shù)定時(shí)相關(guān)函數(shù)有：setTimeout()、clearTimeout()、setInterval()、clearInterval()。setTimeout()：用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。clearTimeout()：取消由setTimeout()方法設(shè)置的定時(shí)操作。方法的參數(shù)是由setTimeout()返回的變量。setInterval()：可按照指定的周期來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。clearInterval()：取消由setInterval()函數(shù)設(shè)定的定時(shí)執(zhí)行操作。方法的參數(shù)是由setInterval()返回的變量。打開一個(gè)新窗口，3秒后自動(dòng)將該窗口關(guān)閉。演練1.14使用setInterval()每秒一次顯示當(dāng)前時(shí)間，可使用clearInterval()停止執(zhí)行。演練1.15ECMAScript6.0簡(jiǎn)稱ES6，是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)，目標(biāo)是使JavaScript語(yǔ)言可以用來(lái)編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開發(fā)語(yǔ)言。ECMAScript和JavaScript的關(guān)系是，前者是后者的標(biāo)準(zhǔn)，后者是前者的一種實(shí)現(xiàn)（另外的實(shí)現(xiàn)還有JScript和ActionScript）。在日常場(chǎng)合中，這兩個(gè)詞是可以互換的。測(cè)試時(shí)為避免前后示例變量的影響，可為每一個(gè)演練在瀏覽器上打開一個(gè)新的標(biāo)簽頁(yè)進(jìn)行測(cè)試，新標(biāo)簽頁(yè)的地址欄中輸入“about:blank”。1.4ES61.4.1let和constlet命令用來(lái)聲明變量。它的用法類似于var，但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。熟悉let和const命令。演練1.161.4.2解構(gòu)賦值ES6允許按照一定模式從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這個(gè)過(guò)程稱為解構(gòu)（Destructuring）賦值。熟悉解構(gòu)賦值。演練1.17應(yīng)用解構(gòu)賦值。演練1.181.4.3數(shù)組擴(kuò)展熟悉數(shù)組擴(kuò)展。演練1.191.4.4剩余運(yùn)算符和擴(kuò)展運(yùn)算符熟悉剩余運(yùn)算符和擴(kuò)展運(yùn)算符。演練1.20在JS中，剩余運(yùn)算符（rest）是三個(gè)點(diǎn)（...），擴(kuò)展運(yùn)算符（spread）也是三個(gè)點(diǎn)（...）。剩余運(yùn)算符基本功能：把逗號(hào)隔開的值序列組合成一個(gè)數(shù)組。擴(kuò)展運(yùn)算符基本功能：把數(shù)組或類數(shù)組對(duì)象展開成一系列用逗號(hào)隔開的值。1.4.5class定義和使用類。演練1.21ES6提供了更接近傳統(tǒng)語(yǔ)言的寫法，引入了Class（類）這個(gè)概念，將其作為對(duì)象的模板。class關(guān)鍵字可以定義類?；旧希珽S6的類可以看作一個(gè)語(yǔ)法糖，ES5已經(jīng)實(shí)現(xiàn)了它的絕大部分功能，類的新寫法只是讓對(duì)象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法而已。思考【說(shuō)明】本章思考以難點(diǎn)、重點(diǎn)為目標(biāo)，掌握這些后基本知識(shí)點(diǎn)應(yīng)該也沒(méi)問(wèn)題了。并建議自學(xué)一些本書未介紹、但又經(jīng)常用到的知識(shí)點(diǎn)。技術(shù)不斷更新?lián)Q代，自學(xué)能力才是核心能力。會(huì)使用調(diào)試觀察程序了嗎？JavaSc