JavaScript知識(shí)入門(mén)及應(yīng)用時(shí)間：匯報(bào)人：JavaScript+Vue.js前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程1.JavaScript簡(jiǎn)介2.初識(shí)ECMAScript6.03.JavaScript常用的開(kāi)發(fā)工具4.ECMAScript的基本語(yǔ)法規(guī)則5.JavaScript的注釋6.在HTML文檔中嵌入JavaScript代碼的方法7.JavaScript的功能展示8.JavaScript的輸出目錄JavaScript由布蘭登·艾奇（BrendanEich）首創(chuàng)，于1995年出現(xiàn)在Netscape（該瀏覽器已停止更新）中，并于1997年被ECMA（EuropeanComputerManufacturersAssociation，歐洲計(jì)算機(jī)制造商協(xié)會(huì)）采納，形成了JavaScript標(biāo)準(zhǔn)，稱(chēng)為ECMAScript，ECMA-262是JavaScript標(biāo)準(zhǔn)的官方名稱(chēng)。因?yàn)镴avaScript具有復(fù)雜的DOM（DocumentObjectModel，文檔對(duì)象模型），不同瀏覽器實(shí)現(xiàn)JavaScript的方式不一樣，以及缺乏便捷的開(kāi)發(fā)、調(diào)試工具，所以JavaScript的應(yīng)用并未真正推廣。正當(dāng)JavaScript從開(kāi)發(fā)人員的視線(xiàn)中漸漸隱去時(shí)，一種新型的基于JavaScript的Web技術(shù)——AJAX（AsynchronousJavaScriptAndXML，異步JavaScript和XML）誕生了，使互聯(lián)網(wǎng)中基于JavaScript的應(yīng)用越來(lái)越多，從而使JavaScript不再是一種僅僅用于制作Web頁(yè)面的腳本語(yǔ)言，JavaScript越來(lái)越受到重視，互聯(lián)網(wǎng)領(lǐng)域正在掀起一場(chǎng)“JavaScript風(fēng)暴”。JavaScript簡(jiǎn)介JavaScript語(yǔ)言具有如下特點(diǎn)。（1）JavaScript是解釋型語(yǔ)言，而非編譯型語(yǔ)言JavaScript的基本語(yǔ)法與C語(yǔ)言的類(lèi)似，JavaScript代碼在運(yùn)行過(guò)程中不需要單獨(dú)編譯，而是逐行解釋執(zhí)行，運(yùn)行速度快。（2）JavaScript具有跨平臺(tái)性JavaScript程序的運(yùn)行與操作環(huán)境無(wú)關(guān)，只依賴(lài)于瀏覽器本身。只要瀏覽器支持JavaScript，JavaScript程序就能正確執(zhí)行。（3）JavaScript是一種動(dòng)態(tài)類(lèi)型、弱類(lèi)型、輕量級(jí)、基于原型的編程語(yǔ)言JavaScript是一種廣泛用于客戶(hù)端的腳本語(yǔ)言，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能，它的解釋器被稱(chēng)為JavaScript引擎，是瀏覽器的一部分。（4）JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)的腳本語(yǔ)言JavaScript代碼插入HTML頁(yè)面后，所有的現(xiàn)代瀏覽器都可以執(zhí)行。網(wǎng)頁(yè)通過(guò)在標(biāo)準(zhǔn)的HTML代碼中嵌入或調(diào)用JavaScript代碼實(shí)現(xiàn)其功能。JavaScript簡(jiǎn)介ECMAScript6.0（以下簡(jiǎn)稱(chēng)ES6）是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)，發(fā)布于2015年6月，其目標(biāo)是使得JavaScript語(yǔ)言可以用來(lái)編寫(xiě)復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開(kāi)發(fā)語(yǔ)言。ECMAScript是由ECMA參與進(jìn)行標(biāo)準(zhǔn)化的語(yǔ)法規(guī)范。ES6標(biāo)準(zhǔn)增加了JavaScript語(yǔ)言層面的模塊體系定義，ES6中所引入的語(yǔ)言新特性，更具規(guī)范性、易讀性，可方便用戶(hù)操作、降低大型項(xiàng)目開(kāi)發(fā)的復(fù)雜程度、降低出錯(cuò)概率，從而提升開(kāi)發(fā)效率。ES6模塊的設(shè)計(jì)理念是盡量靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴(lài)關(guān)系，以及輸入和輸出的變量。而CommonJS和AMD模塊都只能在運(yùn)行時(shí)確定這些。初識(shí)ECMAScript6.0（1）ES6和JavaScript的關(guān)系1996年11月，Netscape公司決定將JavaScript提交給ECMA，希望這種語(yǔ)言能夠成為國(guó)際標(biāo)準(zhǔn)語(yǔ)言。1997年，ECMA發(fā)布262號(hào)標(biāo)準(zhǔn)文件（ECMA-262）的第一版，規(guī)定了瀏覽器腳本語(yǔ)言的標(biāo)準(zhǔn)，并將這門(mén)語(yǔ)言稱(chēng)為ECMAScript，這個(gè)版本就是1.0版。該標(biāo)準(zhǔn)從一開(kāi)始就是針對(duì)JavaScript語(yǔ)言制定的，其名稱(chēng)不為JavaScript的原因有兩個(gè)：一是商標(biāo)，Java是Sun公司的商標(biāo)，根據(jù)授權(quán)協(xié)議，只有Netscape公司可以合法地使用JavaScript這個(gè)名稱(chēng)，且JavaScript本身已經(jīng)被Netscape公司注冊(cè)為商標(biāo)；二是想體現(xiàn)這門(mén)語(yǔ)言的制定者是ECMA，而不是Netscape，這樣有利于保證這門(mén)語(yǔ)言的開(kāi)放性和中立性。因此，ECMAScript和JavaScript的關(guān)系如下：前者是后者的規(guī)范，后者是前者的一種實(shí)現(xiàn)。（2）ES6與ECMAScript2015的關(guān)系2011年，ECMAScript5.1發(fā)布后，ECMA就開(kāi)始制定其6.0版了。因此，ES6這個(gè)詞的原意就是指JavaScript語(yǔ)言的下一個(gè)版本。因?yàn)镋S6的第一個(gè)版本是在2015年發(fā)布的，所以又稱(chēng)為ECMAScript2015，簡(jiǎn)稱(chēng)ES2015。ES6既是一個(gè)歷史名詞，又是一個(gè)泛指，含義是5.1版以后的JavaScript標(biāo)準(zhǔn)，涵蓋ES2015、ES2016、ES2017等版本。初識(shí)ECMAScript6.0編寫(xiě)與調(diào)試JavaScript程序的工具有多種，目前常用的工具有Dreamweaver、WebStorm等。1．DreamweaverDreamweaver是一款集網(wǎng)頁(yè)制作和網(wǎng)站管理于一身的所見(jiàn)即所得的網(wǎng)頁(yè)編輯器，用于幫助網(wǎng)頁(yè)設(shè)計(jì)師提高網(wǎng)頁(yè)制作效率，降低網(wǎng)頁(yè)開(kāi)發(fā)的難度和學(xué)習(xí)HTML、CSS（CascadingStyleSheets，串聯(lián)樣式表）、JavaScript的門(mén)檻。它支持以代碼、拆分、設(shè)計(jì)、實(shí)時(shí)視圖等多種方式來(lái)創(chuàng)作、編寫(xiě)和修改網(wǎng)頁(yè)。2．WebStormWebStorm是JetBrains公司推出的一款Web前端開(kāi)發(fā)工具，JavaScript、HTML程序開(kāi)發(fā)是其強(qiáng)項(xiàng)，其支持許多流行的前端技術(shù)，如jQuery、Prototype、Less、Sass、AngularJS、ESLint、webpack等。3．VisualStudioCodeVisualStudioCode（簡(jiǎn)稱(chēng)VSCode）是一款功能十分強(qiáng)大的輕量級(jí)編輯器，曾被評(píng)為JavaScript開(kāi)發(fā)的最佳工具或IDE（IntegratedDevelopmentEnvironment，集成開(kāi)發(fā)環(huán)境）。該編輯器提供了豐富的快捷鍵，集成了語(yǔ)法高亮、可定制熱鍵綁定、括號(hào)匹配及代碼片段收集等特性，并且支持多種語(yǔ)法和文件格式。VisualStudioCode與Windows、Linux和macOS兼容，可以添加數(shù)百個(gè)插件，內(nèi)置調(diào)試器，可以使用IntelliSense進(jìn)行代碼重構(gòu)和代碼完成，并集成CLI（CommandLineInterface，命令行界面）。JavaScript常用的開(kāi)發(fā)工具4．SublimeTextSublimeText是一款輕量級(jí)的JavaScript代碼編輯器，具有友好的用戶(hù)界面，支持拼寫(xiě)檢查、書(shū)簽、自定義按鍵綁定等功能，還可以通過(guò)靈活的插件機(jī)制擴(kuò)展編輯器的功能，其插件可以利用Python語(yǔ)言開(kāi)發(fā)。SublimeText也是一款跨平臺(tái)的編輯器，支持Windows、Linux、macOS等操作系統(tǒng)，支持多種語(yǔ)言。5．Vue.jsVue.js是JavaScript的一個(gè)開(kāi)源前端UI框架，也適用于跨平臺(tái)開(kāi)發(fā)。Vue.js支持所有瀏覽器，兼容Windows、Linux和macOS。Vue.js有一個(gè)Web頁(yè)面來(lái)可視化應(yīng)用程序的不同部分，并且支持片段和門(mén)戶(hù)，提供了創(chuàng)建高端單頁(yè)應(yīng)用程序的雙重集成模式。使用Vue.js處理任何規(guī)模的應(yīng)用程序都非常容易，它涵蓋大型和小型應(yīng)用程序。其插件系統(tǒng)具有允許用戶(hù)添加網(wǎng)絡(luò)、提供后端支持和狀態(tài)管理等功能。6．ExpressExpress是Node.js的開(kāi)源后端框架。它為構(gòu)建單頁(yè)、多頁(yè)和混合Web應(yīng)用程序提供了服務(wù)器端邏輯，它運(yùn)行快速、穩(wěn)定，并且可以非常輕松地構(gòu)建API。使用Express可以輕松配置和自定義應(yīng)用程序。JavaScript常用的開(kāi)發(fā)工具ECMAScript的基本語(yǔ)法規(guī)則如下。1．ECMAScript標(biāo)識(shí)符的命名標(biāo)識(shí)符就是所說(shuō)的變量名、函數(shù)名、屬性名等，ECMAScript有著一套標(biāo)識(shí)符的規(guī)范。編寫(xiě)JavaScript程序時(shí)，應(yīng)始終對(duì)所有的代碼使用一致的命名規(guī)則。JavaScript程序標(biāo)識(shí)符的常見(jiàn)命名規(guī)則如下。（1）第一個(gè)字符必須是一個(gè)字母或下畫(huà)線(xiàn)（_），不要以美元符號(hào)（$）開(kāi)頭，以$開(kāi)頭可能會(huì)引起JavaScript庫(kù)名稱(chēng)沖突。（2）其他字符可以是字母、下畫(huà)線(xiàn)、美元符號(hào)（$）或數(shù)字。（3）其他字符還可以是一些特殊的字符，但是不推薦使用。（4）數(shù)值不可以作為標(biāo)識(shí)符的首字符。這樣，JavaScript就能輕松區(qū)分標(biāo)識(shí)符和數(shù)值。（5）JavaScript的標(biāo)識(shí)符中不能使用連字符，它是為減法預(yù)留的。ECMAScript的基本語(yǔ)法規(guī)則（6）一般ECMAScript標(biāo)識(shí)符采用駝峰格式編寫(xiě)，標(biāo)識(shí)符的駝峰格式是沒(méi)有強(qiáng)制要求的，只是這樣寫(xiě)顯得更加規(guī)范。標(biāo)識(shí)符的常見(jiàn)格式有如下兩種。①小駝峰格式：第一個(gè)單詞的首寫(xiě)字母小寫(xiě)，后續(xù)單詞首寫(xiě)字母都大寫(xiě)，如idCard。②大駝峰格式：第一個(gè)單詞的首寫(xiě)字母大寫(xiě)，后續(xù)單詞首寫(xiě)字母也都大寫(xiě)，如IdCard。由于程序中的類(lèi)名稱(chēng)、全局變量名稱(chēng)、常量名稱(chēng)一般以大寫(xiě)字母開(kāi)頭，通常程序員更傾向于使用以小寫(xiě)字母開(kāi)頭的小駝峰格式，如變量名、函數(shù)名一般以小寫(xiě)字母開(kāi)頭。ECMAScript的基本語(yǔ)法規(guī)則2．不能把關(guān)鍵字作為變量名、函數(shù)名等標(biāo)識(shí)符在ECMAScript中，不能把關(guān)鍵字作為變量名、函數(shù)名、屬性名等標(biāo)識(shí)符。例如，var是關(guān)鍵字，是不可以作為變量名的，但是把var變?yōu)閂ar就可以使用了，因?yàn)閂ar不是關(guān)鍵字。例如：//var是一個(gè)關(guān)鍵字letvar=2;console.log(var);//Unexpectedtoken'var'letVar=3;console.log(Var);ECMAScript的基本語(yǔ)法規(guī)則3．區(qū)分字母大小寫(xiě)ECMAScript的標(biāo)識(shí)符都是區(qū)分字母大小寫(xiě)的，包括變量名、函數(shù)名和屬性名等，即JavaScript語(yǔ)言對(duì)大小寫(xiě)是敏感的。例如，變量test與變量TEST是不同的變量，函數(shù)getElementById()與getElementbyID()也是不同的。JavaScript也不會(huì)把VAR或Var當(dāng)作關(guān)鍵字var。4．變量是弱類(lèi)型的ECMAScript中的變量無(wú)特定的類(lèi)型，定義變量時(shí)可用var關(guān)鍵字將它初始化為任意值。因此，可以隨時(shí)改變變量所存數(shù)據(jù)的類(lèi)型，但應(yīng)盡量避免這樣做。例如：varcolor="red";varnum=25;varvisible=true;ECMAScript的基本語(yǔ)法規(guī)則5．JavaScript會(huì)忽略多余的空格編寫(xiě)JavaScript程序時(shí)，可以在語(yǔ)句中添加多個(gè)空格，例如，在運(yùn)算符（=、+、-、*、/）前后位置以及逗號(hào)之后添加空格，代碼塊使用4個(gè)空格（注意不是制表符）進(jìn)行縮進(jìn)，以增強(qiáng)可讀性，但JavaScript會(huì)忽略多余的空格。例如，以下兩條語(yǔ)句是等價(jià)的。varnum=25;varnum=25;建議在=、+、-、*、/等運(yùn)算符兩側(cè)添加空格，以增強(qiáng)可讀性，例如：varx=2+3;ECMAScript的基本語(yǔ)法規(guī)則6．正確使用分號(hào)分號(hào)用于分隔JavaScript語(yǔ)句，通常在每條可執(zhí)行的語(yǔ)句結(jié)尾添加分號(hào)。在JavaScript中，每條語(yǔ)句結(jié)尾的分號(hào)是可選的，因?yàn)镋CMAScript允許開(kāi)發(fā)人員自行決定是否以分號(hào)結(jié)束一行代碼。如果沒(méi)有分號(hào)，ECMAScript就把折行代碼的結(jié)尾看作該語(yǔ)句的結(jié)尾（與VisualBasic和VBScript相似），但其前提是沒(méi)有破壞代碼的語(yǔ)義。根據(jù)ECMAScript標(biāo)準(zhǔn)，下面兩行代碼都是正確的。vartest1="red"vartest2="blue";好的代碼編寫(xiě)習(xí)慣是在單條語(yǔ)句結(jié)尾處統(tǒng)一加上分號(hào)，因?yàn)闆](méi)有分號(hào)，有些瀏覽器就不能正確運(yùn)行代碼。加上分號(hào)可以避免許多錯(cuò)誤，也可以更好地將代碼壓縮。在某些情況下添加分號(hào)，可以讓代碼運(yùn)行得更快，因?yàn)榻忉屍鞑恍枰袛嗄睦镄枰蛘卟恍枰痔?hào)。另外，使用分號(hào)還可以實(shí)現(xiàn)在一行中編寫(xiě)多條語(yǔ)句。ECMAScript的基本語(yǔ)法規(guī)則7．JavaScript語(yǔ)句計(jì)算機(jī)程序是由計(jì)算機(jī)“執(zhí)行”的一系列“指令”，在編程語(yǔ)言中，這些編程指令被稱(chēng)為語(yǔ)句。JavaScript程序就是一系列的編程語(yǔ)句，在HTML中，JavaScript程序由Web瀏覽器執(zhí)行。JavaScript程序以及JavaScript語(yǔ)句常被稱(chēng)為JavaScript代碼。大多數(shù)JavaScript程序包含多條JavaScript語(yǔ)句，這些語(yǔ)句會(huì)按照它們被編寫(xiě)的順序逐一執(zhí)行。JavaScript語(yǔ)句向?yàn)g覽器發(fā)出命令，告訴瀏覽器該做什么。JavaScript程序的語(yǔ)句以半角分號(hào)“;”結(jié)尾。例如：letx=2;lety=3;換行符也相當(dāng)于語(yǔ)句結(jié)尾。例如：leta=1letb=2在語(yǔ)句結(jié)尾處加半角分號(hào)與不加半角分號(hào)的代碼都可以執(zhí)行。ECMAScript的基本語(yǔ)法規(guī)則8．JavaScript代碼塊多條語(yǔ)句必須寫(xiě)在一對(duì)花括號(hào)之中，這樣的多條語(yǔ)句稱(chēng)為代碼塊。代碼塊表示一系列應(yīng)該按順序執(zhí)行的語(yǔ)句，代碼塊由左花括號(hào)“{”開(kāi)始，由右花括號(hào)“}”結(jié)束，代碼塊的多條語(yǔ)句被封裝在左花括號(hào)“{”和右花括號(hào)“}”之間?！揪幊逃?xùn)練】【示例1-1】demo0101.html代碼如下。letcolor1="red";if(color1=="red"){color1="blue";alert(color1);}代碼塊的作用是使語(yǔ)句按其被編寫(xiě)的順序執(zhí)行，JavaScript函數(shù)是將語(yǔ)句組合在塊中的典型示例。ECMAScript的基本語(yǔ)法規(guī)則JavaScript代碼塊通常有以下編寫(xiě)規(guī)則。①在第一行的結(jié)尾處寫(xiě)左花括號(hào)“{”。②在左花括號(hào)“{”前面添加一個(gè)空格。③在代碼塊結(jié)束位置的新行上寫(xiě)右花括號(hào)“}”，并且不加前導(dǎo)空格。④代碼塊不要以分號(hào)來(lái)結(jié)束，即右花括號(hào)“}”后面不加分號(hào)。例如：for(i=0;i<5;i++){x+=i;}lettime=12;letgreeting="";if(time<20){greeting="Goodday";}else{greeting="Goodevening";}ECMAScript的基本語(yǔ)法規(guī)則9．對(duì)代碼行進(jìn)行折行為了獲得最佳的可讀性，建議把代碼行控制在80個(gè)字符以?xún)?nèi)，如果JavaScript語(yǔ)句太長(zhǎng)，則應(yīng)對(duì)其進(jìn)行折行，折行的最佳位置是某個(gè)運(yùn)算符或者逗號(hào)之后。例如：document.getElementById("demo").innerHTML='HelloJavaScript';也可以在文本字符串中使用反斜杠“\”對(duì)代碼行進(jìn)行折行。以下代碼能夠正確運(yùn)行。document.getElementById("demo").innerHTML='Hello\JavaScript';使用“\”折行的方法并不符合ECMAScript標(biāo)準(zhǔn)，某些瀏覽器不允許“\”字符之后出現(xiàn)空格。對(duì)長(zhǎng)字符串折行的最安全做法是使用字符串連接運(yùn)算符“+”，例如：document.getElementById("demo").innerHTML='Hello+JavaScript';對(duì)于非文本字符串，一般不能通過(guò)反斜杠“\”對(duì)代碼行進(jìn)行折行，以下的折行是不允許的。document.write\("HelloJavaScript!");ECMAScript的基本語(yǔ)法規(guī)則并非所有JavaScript語(yǔ)句都會(huì)被“執(zhí)行”，雙斜杠“//”后或“/*”與“*/”之間的代碼被視為注釋?zhuān)⑨寱?huì)被忽略，不會(huì)被執(zhí)行。JavaScript的注釋用于對(duì)JavaScript代碼進(jìn)行解釋?zhuān)蕴岣叱绦虻目勺x性。調(diào)試JavaScript程序時(shí)，還可以使用注釋阻止代碼塊的執(zhí)行。JavaScript有兩種類(lèi)型的注釋。（1）單行注釋以雙斜杠（//）開(kāi)頭。任何位于“//”與行末之間的文本都會(huì)被JavaScript忽略（不會(huì)被執(zhí)行）。單行注釋可以用于每個(gè)代碼行之前，例如：//聲明x，為其賦值5varx=5;也可以在每行代碼的結(jié)尾處使用單行注釋來(lái)解釋代碼，例如：vary=6;//聲明y，為其賦值6在代碼行之前添加“//”會(huì)把可執(zhí)行的代碼行更改為注釋?zhuān)纾?/x=x+1;JavaScript的注釋?zhuān)?）多行注釋以單斜杠和星號(hào)（/*）開(kāi)頭，以星號(hào)和單斜杠（*/）結(jié)尾。任何位于“/*”和“*/”之間的文本都會(huì)被JavaScript忽略，例如：/*這是一條多行注釋*/多行注釋也稱(chēng)塊級(jí)注釋。為多行代碼添加多行注釋符，可把可執(zhí)行的代碼行更改為注釋?zhuān)纾?*x=x+1;y=x;*/JavaScript的注釋HTML頁(yè)面中的JavaScript代碼必須位于<script>與</script>標(biāo)簽之間，可被放置在HTML頁(yè)面的<body>或<head>部分中，或者同時(shí)存在于這兩部分中。通常的做法是把函數(shù)放入<head>部分中，或者放在頁(yè)面底部，這樣不會(huì)打亂頁(yè)面的內(nèi)容。將JavaScript代碼嵌入HTML文檔的形式有以下幾種。1．在HTML文檔中直接嵌入JavaScript代碼在頁(yè)面中使用代碼“<script>JavaScript代碼</script>”直接嵌入JavaScript代碼，JavaScript代碼主要有以下兩種嵌入位置。（1）在<head>部分添加JavaScript代碼。將JavaScript代碼置于<head>部分，使之在其余代碼之前裝載，快速實(shí)現(xiàn)其功能，并且容易維護(hù)。有時(shí)在<head>部分定義JavaScript代碼，在<body>部分調(diào)用JavaScript代碼。在HTML文檔中嵌入JavaScript代碼的方法【示例1-2】demo0102.html代碼如下。<!doctypehtml><html><head><metacharset="utf-8"><title>在HTML文檔中嵌入JavaScript代碼</title><script>functionmyFunction(){document.getElementById("demo").innerHTML="段落已被更改。";}</script></head><body><pid="demo">一個(gè)段落。</p><inputtype="button"onclick="myFunction()"value="試一試"></body></html>在HTML文檔中嵌入JavaScript代碼的方法（2）直接在<body>部分添加JavaScript代碼。由于某些腳本程序在網(wǎng)頁(yè)中的特定部分顯示其效果，此時(shí)代碼會(huì)位于<body>中的特定位置。把腳本程序置于<body>標(biāo)簽中內(nèi)容的底部，可加快顯示速度，因?yàn)槟_本程序編譯會(huì)拖慢顯示速度。也可以直接在HTML表單的<input>標(biāo)簽內(nèi)添加JavaScript代碼，以響應(yīng)輸入元素的事件?！臼纠?-3】代碼如下。<!doctypehtml><html><head><metacharset="utf-8"><title>在HTML文檔中嵌入JavaScript代碼</title></head><body><pid="demo">一個(gè)段落。</p><inputtype="button"onclick="myFunction()"value="試一試"><script>functionmyFunction(){document.getElementById("demo").innerHTML="段落已被更改。";}</script></body></html>在HTML文檔中嵌入JavaScript代碼的方法在HTML中，插入腳本程序的方式是使用<script>標(biāo)簽，即令JavaScript代碼必須位于<script>與</script>標(biāo)簽之間，把腳本標(biāo)簽<script></script>置于網(wǎng)頁(yè)的<head>部分或<body>部分，并在其中加入腳本程序。其一般語(yǔ)法格式如下。<script><!--

在此編寫(xiě)JavaScript代碼

//--></script>通過(guò)標(biāo)簽<script></script>指明其間是JavaScript源代碼。雖然<script>標(biāo)簽有多個(gè)屬性，但是這些屬性都不常用，或者都有著默認(rèn)值，而這些默認(rèn)值通常都無(wú)須更改。使用<script>標(biāo)簽時(shí)，一般使用language屬性說(shuō)明使用何種語(yǔ)言，使用type屬性標(biāo)識(shí)腳本程序的類(lèi)型，也可以只使用其中一種，以適應(yīng)不同的瀏覽器。如果需要，則可以在language屬性中標(biāo)明JavaScript的版本號(hào)，那么，所使用的JavaScript代碼就可以應(yīng)用該版本的功能和特性，如“l(fā)anguage=JavaScript1.2”。老式的瀏覽器可能會(huì)在<script>標(biāo)簽中使用type="text/javascript"，現(xiàn)在已經(jīng)不必這樣做了，JavaScript是所有現(xiàn)代瀏覽器及HTML5中的默認(rèn)腳本語(yǔ)言。在HTML文檔中嵌入JavaScript代碼的方法并非所有的瀏覽器都支持JavaScript，且瀏覽器版本和JavaScript程序之間存在兼容性問(wèn)題，這可能會(huì)導(dǎo)致某些JavaScript程序在某些版本的瀏覽器中無(wú)法正確執(zhí)行。如果瀏覽器不能識(shí)別<script>標(biāo)簽，則會(huì)將<script>與</script>標(biāo)簽之間的JavaScript程序當(dāng)作普通的HTML字符顯示在瀏覽器中。針對(duì)此類(lèi)問(wèn)題，可以將JavaScript程序置于HTML注釋符之間，這樣不支持JavaScript的瀏覽器就不會(huì)把代碼內(nèi)容當(dāng)作文本顯示在頁(yè)面上，而是把它們當(dāng)作注釋?zhuān)粫?huì)做任何操作。“<!--”是HTML注釋符的起始標(biāo)記，“//-->”是HTML注釋符的結(jié)束標(biāo)記。對(duì)于不支持JavaScript的瀏覽器，標(biāo)記“<!--”和“//-->”之間的內(nèi)容被當(dāng)作注釋內(nèi)容，對(duì)于支持JavaScript的瀏覽器，這對(duì)標(biāo)記將不起任何作用。另外，需要注意的是，HTML注釋符的結(jié)束標(biāo)記之前有兩個(gè)斜杠“//”，這兩個(gè)斜杠是JavaScript中的注釋符號(hào)，如果沒(méi)有這兩個(gè)斜杠，則JavaScript解釋器試圖將HTML注釋的結(jié)束標(biāo)記作為JavaScript代碼來(lái)解釋?zhuān)瑥亩锌赡軐?dǎo)致出錯(cuò)。在HTML文檔中嵌入JavaScript代碼的方法2．鏈接JavaScript外部腳本文件先將JavaScript代碼寫(xiě)入外部的js文件中，再通過(guò)引用外部腳本文件來(lái)加載外部腳本，即使用<script>標(biāo)簽的src屬性來(lái)指定外部腳本文件的URL（UniformResourceLocator，統(tǒng)一資源定位符）。這里也可以使用type屬性，但不是必需的。代碼如下。<scriptsrc="外部JavaScript文件的路徑與名稱(chēng)"></script>外部JavaScript文件可以通過(guò)完整的URL或相對(duì)于當(dāng)前網(wǎng)頁(yè)的路徑來(lái)引用，外部JavaScript文件的路徑有以下多種情形。（1）鏈接的腳本文件的存放位置與存放當(dāng)前頁(yè)面的文件夾相同代碼如下。<scriptsrc="jsDemo.js"></script>（2）鏈接的腳本文件位于當(dāng)前網(wǎng)站所在位置的指定文件夾js中代碼如下。<scriptsrc="/js/jsDemo.js"></script>（3）使用完整的URL來(lái)鏈接至外部腳本文件，代碼如下。<scriptsrc="https://www.myD/js/jsDemo.js"></script>在HTML文檔中嵌入JavaScript代碼的方法【示例1-4】demo0104.html代碼如下。<!doctypehtml><html><head><metacharset="utf-8"><title>在HTML文檔中嵌入JavaScript代碼</title><scriptsrc="demo0104.js"></script></head><body><pid="demo">一個(gè)段落。</p><inputtype="button"onclick="myFunction()"value="試一試"></body></html>外部文件myScript.js中myFunction()函數(shù)的代碼如下。functionmyFunction(){document.getElementById("demo").innerHTML="段落已被更改。";}注意，外部腳本不能包含<script>標(biāo)簽。在HTML文檔中嵌入JavaScript代碼的方法JavaScript外部文件的擴(kuò)展名是.js，可以在網(wǎng)頁(yè)的<head>或<body>中放置外部腳本引用，該腳本的作用與它被置于<script>標(biāo)簽中的作用是一樣的。這種方式可以使腳本得到重復(fù)利用，即相同的腳本可被用于多個(gè)不同的網(wǎng)頁(yè)，從而降低維護(hù)的工作量。如果一個(gè)頁(yè)面需要添加多個(gè)腳本文件，則可以使用多個(gè)<script>標(biāo)簽，代碼如下。<scriptsrc="js01.js"></script><scriptsrc="js02.js"></script>外部JavaScript文件是最常見(jiàn)的包含JavaScript代碼的方式，其優(yōu)勢(shì)有以下幾種。①HTML頁(yè)面中代碼越少，搜索引擎能夠以越快的速度來(lái)抓取網(wǎng)站內(nèi)容并建立索引。②保持JavaScript代碼和HTML代碼的分離，這樣代碼顯得更清晰，且更易于管理。③因?yàn)榭梢栽贖TML代碼中引用多個(gè)JavaScript文件，所以可以把JavaScript文件分開(kāi)放在Web服務(wù)器上不同的文件目錄中，這是一種更容易管理代碼的做法。④使HTML代碼和JavaScript代碼更易于閱讀及維護(hù)。⑤已緩存的JavaScript文件可加速進(jìn)行頁(yè)面加載。在HTML文檔中嵌入JavaScript代碼的方法1．JavaScript使用innerHTML屬性改變HTML內(nèi)容JavaScript如需訪(fǎng)問(wèn)HTML元素，可以使用document.getElementById(id)方法，以下代碼使用該方法來(lái)“查找”id="demo"的HTML元素，并把元素內(nèi)容（innerHTML）更改為"HelloJavaScript"。document.getElementById("demo").innerHTML="HelloJavaScript";上述代碼中的id屬性用于指定HTML元素，innerHTML屬性用于設(shè)置HTML內(nèi)容。JavaScript的功能展示2．JavaScript改變HTML屬性【編程訓(xùn)練】【示例1-6】demo0106.html以下代碼通過(guò)改變<img>標(biāo)簽的src（source）屬性來(lái)更換HTML頁(yè)面中的圖片。<!doctypehtml><html><head><metacharset="utf-8"><title>JavaScript的功能展示</title></head><body><pid="demo">JavaScript改變圖片的src屬性值。</p><inputtype="button"onclick="document.getElementById('myImage').src='image/eg_bulbon.gif'"value="開(kāi)燈"><imgid="myImage"border="0"src="image/eg_bulboff.gif"style="text-align:center;"alt=""><inputtype="button"onclick="document.getElementById('myImage').src='image/eg_bulboff.gif'"value="關(guān)燈"></body></html>JavaScript的功能展示3．JavaScript改變HTML元素的樣式（CSS）JavaScript改變HTML元素的樣式是JavaScript改變HTML屬性的一種變種，例如：document.getElementById("demo").style.fontSize="25px";4．JavaScript隱藏HTML元素JavaScript可以通過(guò)改變display樣式來(lái)隱藏HTML元素，例如：document.getElementById("demo").style.display="none";5．JavaScript顯示HTML元素JavaScript可以通過(guò)改變display樣式來(lái)顯示隱藏的HTML元素，例如：document.getElementById("demo").style.display="block";JavaScript的功能展示JavaScript有以下多種方式來(lái)“顯示”數(shù)據(jù)。1．寫(xiě)入HTML元素使用innerHTML屬性寫(xiě)入HTML元素。更改HTML元素的innerHTML屬性是在HTML頁(yè)面中顯示數(shù)據(jù)的常用方法。例如：document.getElementById("demo").innerHTML=23;【示例1-7】代碼如下。<!doctypehtml><html><head><metacharset="utf-8"><title>JavaScript的輸出</title></head><body><pid="demo"></p><script>document.getElementById("demo").innerHTML=9+14;</script></body></html>JavaScript的輸出2．寫(xiě)入HTML輸出使用document.write()方法寫(xiě)入HTML輸出，例如：document.write(9+14);在HTML文檔完全加載后，使用document.write()方法將刪除所有已有的HTML內(nèi)容。3．寫(xiě)入窗口警告框使用window.alert()方法寫(xiě)入窗口警告框，例如：window.alert(9+4．寫(xiě)入瀏覽器控制臺(tái)在瀏覽器中，可以使用console.log()方法來(lái)顯示數(shù)據(jù)，也可以使用console.log()方法將數(shù)據(jù)寫(xiě)入瀏覽器控制臺(tái)。JavaScript的輸出【示例1-8】demo0108.html代碼如下。<!doctypehtml><html><head><metacharset="utf-8"><title>JavaScript將數(shù)據(jù)寫(xiě)入瀏覽器控制臺(tái)</title></head><body><script>console.log(9+14);</script></body></html>在瀏覽器中瀏覽網(wǎng)頁(yè)demo0108.html，按快捷鍵【F12】激活瀏覽器的控制臺(tái)，并在菜單欄中選擇“控制臺(tái)”選項(xiàng)，瀏覽器控制臺(tái)中的輸出結(jié)果如圖1-1所示。JavaScript的輸出JavaScript有3種類(lèi)型的消息框：警告框、確認(rèn)框和提示框。1．警告框警告框是一個(gè)帶有提示信息和“確定”按鈕的對(duì)話(huà)框，經(jīng)常用于輸出提示信息。當(dāng)警告框出現(xiàn)后，用戶(hù)需要單擊“確定”按鈕才能繼續(xù)進(jìn)行操作。語(yǔ)法格式如下。window.alert("文本內(nèi)容")window.alert()方法可以不帶window前綴來(lái)調(diào)用。例如：alert("感謝你光臨本網(wǎng)站");如果警告框中輸出的提示信息要分為多行，則使用“\