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

在此編寫JavaScript代碼

//--></script>通過標簽<script></script>指明其間是JavaScript源代碼。雖然<script>標簽有多個屬性，但是這些屬性都不常用，或者都有著默認值，而這些默認值通常都無須更改。使用<script>標簽時，一般使用language屬性說明使用何種語言，使用type屬性標識腳本程序的類型，也可以只使用其中一種，以適應不同的瀏覽器。如果需要，則可以在language屬性中標明JavaScript的版本號，那么，所使用的JavaScript代碼就可以應用該版本的功能和特性，如“l(fā)anguage=JavaScript1.2”。老式的瀏覽器可能會在<script>標簽中使用type="text/javascript"，現在已經不必這樣做了，JavaScript是所有現代瀏覽器及HTML5中的默認腳本語言。在HTML文檔中嵌入JavaScript代碼的方法并非所有的瀏覽器都支持JavaScript，且瀏覽器版本和JavaScript程序之間存在兼容性問題，這可能會導致某些JavaScript程序在某些版本的瀏覽器中無法正確執(zhí)行。如果瀏覽器不能識別<script>標簽，則會將<script>與</script>標簽之間的JavaScript程序當作普通的HTML字符顯示在瀏覽器中。針對此類問題，可以將JavaScript程序置于HTML注釋符之間，這樣不支持JavaScript的瀏覽器就不會把代碼內容當作文本顯示在頁面上，而是把它們當作注釋，不會做任何操作。“<!--”是HTML注釋符的起始標記，“//-->”是HTML注釋符的結束標記。對于不支持JavaScript的瀏覽器，標記“<!--”和“//-->”之間的內容被當作注釋內容，對于支持JavaScript的瀏覽器，這對標記將不起任何作用。另外，需要注意的是，HTML注釋符的結束標記之前有兩個斜杠“//”，這兩個斜杠是JavaScript中的注釋符號，如果沒有這兩個斜杠，則JavaScript解釋器試圖將HTML注釋的結束標記作為JavaScript代碼來解釋，從而有可能導致出錯。在HTML文檔中嵌入JavaScript代碼的方法2．鏈接JavaScript外部腳本文件先將JavaScript代碼寫入外部的js文件中，再通過引用外部腳本文件來加載外部腳本，即使用<script>標簽的src屬性來指定外部腳本文件的URL（UniformResourceLocator，統(tǒng)一資源定位符）。這里也可以使用type屬性，但不是必需的。代碼如下。<scriptsrc="外部JavaScript文件的路徑與名稱"></script>外部JavaScript文件可以通過完整的URL或相對于當前網頁的路徑來引用，外部JavaScript文件的路徑有以下多種情形。（1）鏈接的腳本文件的存放位置與存放當前頁面的文件夾相同代碼如下。<scriptsrc="jsDemo.js"></script>（2）鏈接的腳本文件位于當前網站所在位置的指定文件夾js中代碼如下。<scriptsrc="/js/jsDemo.js"></script>（3）使用完整的URL來鏈接至外部腳本文件，代碼如下。<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">一個段落。</p><inputtype="button"onclick="myFunction()"value="試一試"></body></html>外部文件myScript.js中myFunction()函數的代碼如下。functionmyFunction(){document.getElementById("demo").innerHTML="段落已被更改。";}注意，外部腳本不能包含<script>標簽。在HTML文檔中嵌入JavaScript代碼的方法JavaScript外部文件的擴展名是.js，可以在網頁的<head>或<body>中放置外部腳本引用，該腳本的作用與它被置于<script>標簽中的作用是一樣的。這種方式可以使腳本得到重復利用，即相同的腳本可被用于多個不同的網頁，從而降低維護的工作量。如果一個頁面需要添加多個腳本文件，則可以使用多個<script>標簽，代碼如下。<scriptsrc="js01.js"></script><scriptsrc="js02.js"></script>外部JavaScript文件是最常見的包含JavaScript代碼的方式，其優(yōu)勢有以下幾種。①HTML頁面中代碼越少，搜索引擎能夠以越快的速度來抓取網站內容并建立索引。②保持JavaScript代碼和HTML代碼的分離，這樣代碼顯得更清晰，且更易于管理。③因為可以在HTML代碼中引用多個JavaScript文件，所以可以把JavaScript文件分開放在Web服務器上不同的文件目錄中，這是一種更容易管理代碼的做法。④使HTML代碼和JavaScript代碼更易于閱讀及維護。⑤已緩存的JavaScript文件可加速進行頁面加載。在HTML文檔中嵌入JavaScript代碼的方法1．JavaScript使用innerHTML屬性改變HTML內容JavaScript如需訪問HTML元素，可以使用document.getElementById(id)方法，以下代碼使用該方法來“查找”id="demo"的HTML元素，并把元素內容（innerHTML）更改為"HelloJavaScript"。document.getElementById("demo").innerHTML="HelloJavaScript";上述代碼中的id屬性用于指定HTML元素，innerHTML屬性用于設置HTML內容。JavaScript的功能展示2．JavaScript改變HTML屬性【編程訓練】【示例1-6】demo0106.html以下代碼通過改變<img>標簽的src（source）屬性來更換HTML頁面中的圖片。<!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="開燈"><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="關燈"></body></html>JavaScript的功能展示3．JavaScript改變HTML元素的樣式（CSS）JavaScript改變HTML元素的樣式是JavaScript改變HTML屬性的一種變種，例如：document.getElementById("demo").style.fontSize="25px";4．JavaScript隱藏HTML元素JavaScript可以通過改變display樣式來隱藏HTML元素，例如：document.getElementById("demo").style.display="none";5．JavaScript顯示HTML元素JavaScript可以通過改變display樣式來顯示隱藏的HTML元素，例如：document.getElementById("demo").style.display="block";JavaScript的功能展示JavaScript有以下多種方式來“顯示”數據。1．寫入HTML元素使用innerHTML屬性寫入HTML元素。更改HTML元素的innerHTML屬性是在HTML頁面中顯示數據的常用方法。例如：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．寫入HTML輸出使用document.write()方法寫入HTML輸出，例如：document.write(9+14);在HTML文檔完全加載后，使用document.write()方法將刪除所有已有的HTML內容。3．寫入窗口警告框使用window.alert()方法寫入窗口警告框，例如：window.alert(9+4．寫入瀏覽器控制臺在瀏覽器中，可以使用console.log()方法來顯示數據，也可以使用console.log()方法將數據寫入瀏覽器控制臺。JavaScript的輸出【示例1-8】demo0108.html代碼如下。<!doctypehtml><html><head><metacharset="utf-8"><title>JavaScript將數據寫入瀏覽器控制臺</title></head><body><script>console.log(9+14);</script></body></html>在瀏覽器中瀏覽網頁demo0108.html，按快捷鍵【F12】激活瀏覽器的控制臺，并在菜單欄中選擇“控制臺”選項，瀏覽器控制臺中的輸出結果如圖1-1所示。JavaScript的輸出JavaScript有3種類型的消息框：警告框、確認框和提示框。1．警告框警告框是一個帶有提示信息和“確定”按鈕的對話框，經常用于輸出提示信息。當警告框出現后，用戶需要單擊“確定”按鈕才能繼續(xù)進行操作。語法格式如下。window.alert("文本內容")window.alert()方法可以不帶window前綴來調用。例如：alert("感謝你光臨本網站");如果警告框中輸出的提示信息要分為多行，則使用“\n”分行。2．確認框確認框是一個帶有提示信息以及“確定”和“取消”按鈕的對話框，用于使用戶驗證或者接收某些信息。當確認框出現后，用戶只有單擊“確定”或者“取消”按鈕才能繼續(xù)進行操作。語法格式如下。window.confirm("文本內容")window.confirm()方法可以不帶window前綴來調用。JavaScript的消息框例如：varr=confirm("請單擊按鈕");if(r==true){x="單擊了'確定'按鈕！";}else{x="單擊了'取消'按鈕！";}當彈出確認框后，如果用戶單擊“確定”按鈕，那么其返回值為true，即r的值為true；如果用戶單擊“取消”按鈕，那么其返回值為false，即r的值為false。JavaScript的消息框3．提示框提示框是一個提示用戶輸入的對話框，經常用于提示用戶在進入HTML頁面前輸入某個值。當提示框出現后，用戶需要輸入某個值，然后單擊“確定”按鈕或“取消”按鈕才能繼續(xù)操作。語法格式如下。mpt("文本內容","默認值")mpt()方法可以不帶window前綴來調用。例如：varstrName=prompt("請輸入您的姓名","李義");if(strName!=null){document.getElementById("demo").innerHTML="你好"+strName;}以上代碼運行時，如果用戶單擊“確定”按鈕，那么返回值為輸入的值；如果用戶單擊“取消”按鈕，那么返回值為null。如果需要在提示框中顯示折行，則使用“\n”即可。例如：alert("Hello\nHowareyou?");JavaScript的消息框JavaScript高級程序設計（特別是對不同瀏覽器差異的復雜處理）通常很困難也很耗時，為了簡化JavaScript程序的開發(fā)，許多JavaScript庫應運而生。這些JavaScript庫常被稱為JavaScript框架。這些庫封裝了很多預定義的對象和實用函數，能幫助使用者輕松建立有高難度交互功能的富客戶端頁面，并且兼容各大瀏覽器。廣受歡迎的JavaScript框架有jQuery、Prototype、MooTools，這些框架都可提供針對常見JavaScript任務的函數，涉及動畫、DOM操作以及AJAX處理。1．jQueryjQuery是一種優(yōu)秀的JavaScript庫，是一個由約翰·雷西格（JohnResig）創(chuàng)建于2006年1月的開源項目。jQuery是目前最受歡迎的JavaScript庫之一，它使用CSS選擇器來訪問和操作網頁上的HTML元素（DOM對象），jQuery同時可提供companionUI（UserInterface，用戶界面）和插件。目前谷歌、微軟、IBM、奈飛等大公司在其網站上都使用了jQuery。2．PrototypePrototype是一種JavaScript庫，可提供用于執(zhí)行常見Web任務的簡單API。API包含屬性和方法，用于操作HTMLDOM。Prototype通過提供類和繼承，實現對JavaScript功能的增強。3．MooToolsMooTools也是一個JavaScript庫，提供了可使常見的JavaScript編程更為簡單的API，也包含一些輕量級的效果和動畫函數。JavaScript庫感謝觀看ＴＨＡＮＫＳTHANKYOUVERYMUCHFORWATCHINGJavaScript編程基礎及應用時間：匯報人：JavaScript+Vue.js前端開發(fā)任務驅動式教程1.ECMAScript的關鍵字與保留字2.JavaScript的常量及常量聲明3.JavaScript的變量4.JavaScript的數據類型5.typeof運算符與數據類型的檢測6.JavaScript數據類型的轉換7.字符串的基本操作8.JavaScript的運算符與表達式9.JSON及其使用10.實戰(zhàn)演練目錄ECMAScript的關鍵字JavaScript語句通常通過某個關鍵字來標識需要執(zhí)行的JavaScript操作，例如，關鍵字var表示聲明變量，function表示聲明函數。ECMA-262定義了ECMAScript支持的一套關鍵字（keyword），根據規(guī)定，關鍵字不能用作變量名或函數名等標識符。ECMAScript的關鍵字與保留字breakcasecatchcontinuedebugger*defaultdeletedoelsefinallyforfunctionifininstanceofnewreturnswitchthisthrowtrytypeofvarvoidwhilewith

表2-1所示為ECMAScript的關鍵字如果把關鍵字用作變量名或函數名，則可能得到諸如“IdentifierExpected”（應為標識符）這樣的錯誤提示消息。ECMAScript的保留字ECMA-262定義了ECMAScript支持的一套保留字（ReservedWord）。保留字在某種意義上是為將來的關鍵字而保留的單詞，因此保留字也不能被用作變量名或函數名等標識符。ECMAScript的關鍵字與保留字表2-2所示為ECMA-262第三版中的保留字abstractbooleanbytecharclassconstdebuggerdoubleenumexportextendsfinalfloatgotoimplementsimportintinterfacelongnativepackageprivateprotectedpublicshortstaticsupersynchronizedthrowstransientvolatile

ECMAScript的保留字ECMA-262第五版在非嚴格模式下減少了一些保留字，非嚴格模式下的保留字有class、const、enum、extends、export、import、super。嚴格模式下有些變化，保留字有implements、interface、package、public、private、protected、static、yield、let，其中yield和let是ECMA-262第五版新增的。對于ECMA-262第三版，如果使用關鍵字和保留字作為標識符，則會拋出錯誤。在ECMA-262第五版中，對關鍵字和保留字的使用規(guī)則進行了一點兒修改。雖然同樣不可以使用關鍵字和保留字作為變量名、函數名，但是對于第五版，它們可以作為函數的屬性名使用。最好不要用關鍵字和保留字作為屬性名、變量名、函數名，避免以后版本升級時產生沖突現象。除此之外，ECMA-262第五版對eval和arguments還施加了限制，在嚴格模式下，這兩個單詞也不能作為變量名、函數名或屬性名，否則將會拋出錯誤。ECMAScript的關鍵字與保留字JavaScript的常量JavaScript語句包括兩種類型的值，即字面值和變量值，字面值也稱為常量。JavaScript中的常量主要包括字符串型常量、數字型常量、布爾常量、全局常量和Infinity等。（1）字符串型常量例如：lettxt="";//值是""，類型是字符串型（2）數字型常量例如：varx=3.14; //帶小數點的數值vary=3; //不帶小數點的數值例如：varx=123e4; //1230000vary=123e-4; //0.0123字符串型常量是使用單引號（''）或雙引號（""）括起來的一個或幾個字符。空字符串不是undefined，它既有合法值又有類型。JavaScript只有一種數值類型，即數字型。數字型常量（值不能改變的數據）在賦值時可以帶小數點，也可以不帶。數字型常量不帶小數點時為整型常量，可以使用十進制、十六進制、八進制表示；帶小數點時為實型常量，由整數部分加小數部分表示。數字型常量也可以使用科學記數法表示。與許多其他編程語言不同，JavaScript不會定義不同類型（如整型、短整型、長整型、浮點型等）的數。JavaScript的常量（3）布爾常量布爾常量只有兩種值，即true或false，主要用來說明或代表一種狀態(tài)或標志。JavaScript提供了一種布爾型，它只接收值true或false。JavaScript表達式的布爾值是比較運算和條件判斷的基礎。①布爾值true。JavaScript中所有“真實”值的布爾值均為true，如100、3.14、-15、"Hello""false"、7+1+

3.14、5<6。②布爾值false。JavaScript中所有“不真實”值的布爾值均為false。a．0（零）的布爾值為false。varx=0;Boolean(x); //返回falseb．-0（負零）的布爾值為false。varx=-0;Boolean(x); //返回falseJavaScript的常量注意：建議不要創(chuàng)建布爾對象（Boolean對象），因為它會拖慢代碼的執(zhí)行速度。需要注意的是，new關鍵字會使代碼復雜化，還會產生某些意想不到的結果。d．undefined的布爾值是false。varx;Boolean(x); //返回falsef．NaN的布爾值是false。例6：varx=10/"H";Boolean(x); //返回falsee．null的布爾值是false。例5：varx=null;Boolean(x); //返回falseg．false的布爾值是false。varx=false;Boolean(x); //返回falseh．布爾值也可以通過關鍵字new作為對象來定義。varx=false; //typeofx返回booleanvary=newBoolean(false); //typeofy返回objectc．""（空字符串）的布爾值為false。varx="";Boolean(x); //返回falseJavaScript的常量（4）全局常量

NaN是JavaScript的全局常量，表示非數字值（Not-a-Number），其表示某個值不是合法數值，但其本身的數據類型卻是數字型，typeofNaN返回number。例如：alert(typeofNaN);//顯示為numberNaN不等于其自身，例如：alert(NaN==NaN);//顯示為false實際上NaN不等于任何東西，要確認是不是NaN只能使用isNaN()。例如：alert(isNaN(NaN));//顯示為true若嘗試用一個非數字字符串進行除法運算，則會得到NaN。例如：varx=100/"len";//

x將是NaNisNaN(x);//返回true，因為x不是數值若字符串包含數值，則除法運算的結果將是數值，例如：varx=100/"10"; //x將是10假如在數學表達式中使用了NaN，則運算結果也將是NaN。例如：varx=NaN;vary=5;vars=x+y; //s將是NaNJavaScript的常量（5）InfinityInfinity（或-Infinity）是JavaScript在計算數值且結果超出最大可能數值范圍時返回的值。Infinity的數據類型是數字型，typeofInfinity返回number。除以0（零）也會生成Infinity，例如：varx=2/0; //x將是Infinityvary=-2/0; //y將是-Infinity感謝觀看ＴＨＡＮＫＳTHANKYOUVERYMUCHFORWATCHINGJavaScript流程控制及應用時間：匯報人：JavaScript+Vue.js前端開發(fā)任務驅動式教程3.1JavaScript的條件語句3.2JavaScript的循環(huán)語句目錄JavaScript的條件語句用于基于不同的條件執(zhí)行不同的語句。編寫程序代碼時，經常需要為不同的決定執(zhí)行不同的動作，可以在代碼中使用條件語句來完成該任務。在JavaScript中，可以使用以下條件語句。（1）if語句：只有當指定條件為true時，才執(zhí)行指定的代碼。（2）if…else…語句：當條件為true時執(zhí)行指定的代碼，當條件為false時執(zhí)行其他代碼。（3）if…elseif…else…語句：使用該語句選擇多個代碼塊中的一個來執(zhí)行。（4）switch語句：使用該語句選擇多個代碼塊中的一個來執(zhí)行。JavaScript的條件語句JavaScript的條件語句1．if語句只有當指定條件為true時，該語句才會執(zhí)行指定的代碼。語法格式如下。if(條件){//當條件為true時執(zhí)行的代碼}這里的關鍵字為小寫的if，如果使用大寫字母（IF），則會產生JavaScript錯誤。JavaScript的條件語句例：以下代碼實現的功能如下：當時間早于20:00時，問候語顯示為Goodday。lettime=12;if(time<20){x="Goodday";}document.write(x);//輸出結果為Goodday該語句不包含else，只有在指定條件為true時才會執(zhí)行指定的代碼。JavaScript的條件語句2．if…else…語句使用if…else…語句在條件為true時執(zhí)行指定的代碼，在條件為false時執(zhí)行其他代碼。語法格式如下。if(條件){//當條件為true時執(zhí)行的代碼}else{//當條件為false時執(zhí)行的代碼}JavaScript的條件語句例：以下代碼實現的功能如下：當時間早于20:00時，顯示問候語Goodday，否則顯示問候語Goodevening。lettime=21;if(time<20){x="Goodday";}else{x="Goodevening";}document.write(x);//輸出結果為GoodeveningJavaScript的條件語句3．if…elseif…else…語句使用if…elseif…else…語句選擇多個代碼塊中的一個來執(zhí)行。語法格式如下。if(條件1){//當條件1為true時執(zhí)行的代碼}elseif(條件2){//當條件2為true時執(zhí)行的代碼}else{//當條件1和條件2都不為true時執(zhí)行的代碼}JavaScript的條件語句例：以下代碼實現的功能如下：當時間早于10:00時，顯示問候語Goodmorning；當時間在10:00至20:00內時，顯示問候語Goodday；否則，顯示問候語Goodevening。lettime=8;if(time<10){x="Goodmorning";}elseif(time<20){x="Goodday";}else{x="Goodevening";}document.write(x);//輸出結果為GoodmorningJavaScript的條件語句4.switch語句switch語句用于基于不同條件執(zhí)行不同動作。使用switch語句可選擇要執(zhí)行的多個代碼塊中的一個來執(zhí)行。語法格式如下。switch(表達式){casem://執(zhí)行代碼塊1break;casen://執(zhí)行代碼塊2break;default://表達式的值與m、n不同時執(zhí)行的代碼}JavaScript的條件語句首先計算一次switch對應表達式（通常為一個變量）的值，隨后表達式的值會與結構中每個case后面的值進行比較。如果存在匹配項，則與該case關聯(lián)的代碼塊會被執(zhí)行。使用break來阻止代碼自動向下一個case運行，跳出switch語句。switch語句中的表達式不一定是條件表達式，可以是普通的表達式，其值可以是數值、字符串或布爾值。執(zhí)行switch語句時，首先將表達式的值與一個數據進行比較，當表達式的值與所列數據相等時，執(zhí)行相應的語句；如果表達式的值與所有列出的數據都不相等，則執(zhí)行default后的語句；如果沒有default關鍵字，則跳出switch語句并執(zhí)行switch語句后面的語句。JavaScript的條件語句例：以下代碼實現的功能如下：顯示今日為星期幾。varday=newDate().getDay();switch(day){case0:x="星期日";break;case1:x="星期一";break;case2:x="星期二";break;case3:x="星期三";break;case4:x="星期四";break;case5:x="星期五";break;case6:x="星期六";break;}document.write("今天是："+x);有時需要通過不同的case語句來使用相同的代碼。JavaScript的條件語句例：switch(newDate().getDay()){case4:case5:info="周末快到了。";break;case0:case6:info="今天是周末。";break;default:info="期待周末！";}document.write(info);switch語句使用全等（===），即對于已匹配的表達式的值和case后面的值，它們的值和類型都必須相同，全等的結果才能為true。JavaScript的條件語句【示例3-6】demo0306.html代碼如下。varx="0";switch(x){case0:text="Off";break;case1:text="On";break;default:text="Novaluefound";}document.write(text);//輸出的值為Novaluefound以上代碼中，x與每個case后面的值都不匹配。JavaScript的條件語句5．break關鍵字在switch語句中，如果JavaScript遇到break關鍵字，則會跳出switch代碼塊，此舉將中斷代碼塊中更多代碼的執(zhí)行及case匹配。break能夠節(jié)省大量代碼執(zhí)行時間，因為它會“忽略”switch代碼塊中其他代碼的執(zhí)行。switch語句中的最后一個case語句不必中斷，該語句執(zhí)行完畢后，switch語句會自然結束。JavaScript的條件語句6．default關鍵字使用default關鍵字指定switch語句中不存在case匹配項時所執(zhí)行的代碼。default在switch語句中是可選的，并非必不可少，但通常會把它放在switch語句的最后來執(zhí)行兜底操作。例：以下代碼實現的功能如下：如果今天不是周六或周日，則會輸出默認的消息。varday=newDate().getDay();switch(day){case6:x="今天是星期六";break;case0:x="今天是星期日";break;default:x="期待周末！";}document.write(x);JavaScript的循環(huán)語句如果需要多次運行相同的代碼，并且每次需要的參數值都不同，那么使用循環(huán)是很方便的，循環(huán)可以將代碼塊反復執(zhí)行指定的次數。數組num的定義如下。varnum=[0,1,2,3,4,5];以下代碼可以輸出數組中元素的值。document.write(num[0]+"<br>");document.write(num[1]+"<br>");document.write(num[2]+"<br>");document.write(num[3]+"<br>");document.write(num[4]+"<br>");document.write(num[5]+"<br>");但以上代碼通常寫為如下形式。for(vari=0;i<num.length;i++){document.write(num[i]+"<br>");}JavaScript的循環(huán)語句JavaScript支持不同類型的循環(huán)。（1）while循環(huán)：當指定的條件為true時執(zhí)行指定的代碼塊。（2）do…while循環(huán)：當指定的條件為true時執(zhí)行指定的代碼塊。（3）for循環(huán)：多次遍歷代碼塊，并且循環(huán)的次數固定。（4）for…in循環(huán)：循環(huán)遍歷對象的屬性。（5）for…of循環(huán)：循環(huán)遍歷可迭代對象的值。JavaScript的循環(huán)語句1．while循環(huán)While循環(huán)會在指定條件為true時循環(huán)執(zhí)行代碼塊，只要指定條件為true，while循環(huán)就可以一直執(zhí)行代碼塊。語法格式如下。while(條件){//要執(zhí)行的代碼

}JavaScript的循環(huán)語句例：只要變量i小于5，本例中的循環(huán)就繼續(xù)運行。代碼如下。varx="";vari=0;while(i<5){x=x+"Thenumberis"+i+"<br>";i++;}如果忘記增加條件中所用變量的值，即沒有i++語句，則該循環(huán)永遠不會結束（即死循環(huán)）。這可能會導致瀏覽器崩潰。JavaScript的循環(huán)語句2．do…while循環(huán)do…while循環(huán)是while循環(huán)的變體，該循環(huán)在檢查條件是否為true之前會執(zhí)行一次代碼塊，此后如果條件為true，則重復這個循環(huán)。語法格式如下。do{//要執(zhí)行的代碼

}while(條件);JavaScript的循環(huán)語句例：代碼如下。varx="";vari=0;do{x=x+"Thenumberis"+i+"<br>";i++;}while(i<5);以上示例代碼使用do…while循環(huán)，即使條件為false，該循環(huán)也至少會執(zhí)行一次。別忘記增加條件中所用變量的值，否則循環(huán)永遠不會結束！JavaScript的循環(huán)語句3.for循環(huán)語法格式如下。for(表達式1;表達式2;表達式3){//要執(zhí)行的代碼塊}表達式1：在循環(huán)（代碼塊）開始前執(zhí)行。表達式2：執(zhí)行循環(huán)（代碼塊）的條件。表達式3：在循環(huán)（代碼塊）被執(zhí)行之后執(zhí)行。先執(zhí)行表達式1，完成初始化；再判斷表達式2的值是否為true，如果為true，則執(zhí)行循環(huán)代碼塊，否則退出循環(huán)；執(zhí)行循環(huán)代碼塊之后，執(zhí)行表達式3；接著重新判斷表達式2的值，若其值為true，則再次重復執(zhí)行循環(huán)代碼塊，如此循環(huán)執(zhí)行。JavaScript的循環(huán)語句例：varx="";for(vari=0;i<5;i++){x=x+"Thenumberis"+i+"<br>";}從上述代碼可以看出以下信息。表達式1在循環(huán)開始之前定義變量：vari=0。表達式2定義了循環(huán)運行的條件：i必須小于5。表達式3在代碼塊已被執(zhí)行一次后使i增加1：i++。JavaScript的條件語句（1）表達式1通常使用表達式1來初始化for循環(huán)中所用的變量（vari=0），也可以在表達式1中初始化由逗號分隔的多個值。例如：varnum=[0,1,2,3,4,5];for(vari=0,len=num.length,info="";i<len;i++){info+=num[i]+"<br>";}document.write(info);表達式1是可選的，也就是說，可以省略表達式1，而在循環(huán)開始前設置變量的值。例如：vari=2;varlen=num.length;for(;i<len;i++){document.write(num[i]+"<br>");}JavaScript的條件語句（2）表達式2通常表達式2用于判斷條件是否成立，表達式2同樣是可選的。如果表達式2返回true，則循環(huán)再次開始；如果返回false，則循環(huán)將結束。如果省略了表達式2，那么必須在循環(huán)內提供break，否則循環(huán)會無法停止，這有可能令瀏覽器崩潰。（3）表達式3表達式3通常用于增加初始變量的值，表達式3有多種用法，增量可以是負數（i--），或者更大的數（i=i+15）。表達式3也是可選的，當循環(huán)體內部有相應的代碼時，表達式3可以省略。例如：vari=0;varlen=num.length;for(;i<len;){document.write(num[i]+