JavaScript程序設(shè)計基礎(chǔ)與實戰(zhàn)- 課件 模塊1　JavaScript知識入門及應(yīng)用

JavaScript知識入門及應(yīng)用JavaScript程序設(shè)計基礎(chǔ)與實戰(zhàn)Learning

andpractice時間:演講人：目錄/DIRECTORY1.JavaScript簡介2.初識ECMAScript6.03.JavaScript常用的開發(fā)工具和框架4.ECMAScript的基本語法規(guī)則5.JavaScript的注釋6.在HTML文檔中嵌入JavaScript代碼的方法7.JavaScript的功能展示8.JavaScript的輸出9.JavaScript的消息框10.JavaScript庫11.jQuery簡介12.JavaScript和jQuery的使用比較13.jQuery的選擇器14.jQuery的鏈式操作15.實戰(zhàn)演練1.JavaScript簡介JavaScript由布蘭登·艾奇（BrendanEich）首創(chuàng)，于1995年出現(xiàn)在Netscape（該瀏覽器已停止更新）中，并于1997年被ECMA（EuropeanComputerManufacturersAssociation，歐洲計算機制造商協(xié)會）采納，形成了JavaScript標準，稱為ECMAScript，ECMA-262是JavaScript標準的官方名稱。因為JavaScript具有復(fù)雜的DOM（DocumentObjectModel，文檔對象模型），其在不同瀏覽器上的實現(xiàn)方式不一樣，以及缺乏便捷的開發(fā)、調(diào)試工具，所以JavaScript的應(yīng)用并未真正推廣。正當JavaScript從開發(fā)者的視線中漸漸隱去時，一種新型的基于JavaScript的Web技術(shù)——AJAX（AsynchronousJavaScriptAndXML，異步JavaScript和XML）誕生了，它使互聯(lián)網(wǎng)中基于JavaScript的應(yīng)用越來越多，從而使JavaScript不再是一種僅用于制作Web頁的腳本語言，JavaScript越來越受到重視，互聯(lián)網(wǎng)領(lǐng)域由此掀起一場“JavaScript風暴”。1.JavaScript簡介JavaScript語言有如下一些特點。（1）JavaScript是解釋型語言，而非編譯型語言。JavaScript的基本語法與C語言的類似，JavaScript代碼在運行過程中不需要單獨編譯，而是逐行解釋執(zhí)行，運行速度快。（2）JavaScript具有跨平臺性。JavaScript程序的運行與操作環(huán)境無關(guān)，只依賴于瀏覽器本身。只要瀏覽器支持JavaScript，JavaScript程序就能正確執(zhí)行。（3）JavaScript是一種動態(tài)類型、弱類型、輕量級、基于原型的編程語言。JavaScript是一種廣泛用于瀏覽器的腳本語言，用來給HTML網(wǎng)頁增加動態(tài)功能，它的解釋器被稱為JavaScript引擎，是瀏覽器的一部分。（4）JavaScript是一種基于對象和事件驅(qū)動的腳本語言。JavaScript代碼插入HTML頁面后，所有的現(xiàn)代瀏覽器都可以執(zhí)行。網(wǎng)頁通過在標準的HTML代碼中嵌入或調(diào)用JavaScript代碼實現(xiàn)其功能。2.初識ECMAScript6.0ECMAScript6.0（以下簡稱ES6）是JavaScript語言的下一代標準，發(fā)布于2015年6月，其目標是使JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言。ECMAScript是由ECMA參與進行標準化的語法規(guī)范。

ES6標準增加了JavaScript語言層面的模塊體系定義，ES6中所引入的語言新特性更具規(guī)范性、易讀性，可方便用戶操作，降低大型項目開發(fā)的復(fù)雜程度，降低出錯概率，提升開發(fā)效率。ES6模塊的設(shè)計理念是盡量靜態(tài)化，使得編譯時就能確定模塊之間的依賴關(guān)系，以及輸入和輸出的變量。而CommonJS和AMD模塊都只能在運行時確定這些。2.初識ECMAScript6.01．ES6和JavaScript的關(guān)系 1996年11月，Netscape公司決定將JavaScript提交給ECMA，希望這種語言能夠成為國際標準語言。1997年，ECMA發(fā)布262號標準文件（ECMA-262）的第一版，其中規(guī)定了瀏覽器腳本語言的標準，并將這種標準稱為ECMAScript。該標準從一開始就是針對JavaScript語言制定的，其名稱之所以不叫JavaScript是出于以下兩個原因。一是商標，Java是Sun公司的商標，根據(jù)授權(quán)協(xié)議，只有Netscape公司可以合法地使用JavaScript這個名稱，且JavaScript本身也已經(jīng)被Netscape公司注冊為商標。二是想體現(xiàn)這種語言的標準制定者是ECMA，而不是Netscape公司，這樣有利于保證這種語言的開放性和中立性。因此，ECMAScript和JavaScript的關(guān)系如下：前者是后者的標準，后者是前者的一種實現(xiàn)。

2．ES6與ECMAScript2015的關(guān)系 2011年，ECMAScript5.1發(fā)布后，ECMA就開始制定6.0版了。因此，ES6這個詞的原意指的是5.1版的下一個版本。因為ES6的第一個版本是在2015年發(fā)布的，所以又稱為ECMAScript2015，簡稱ES2015。ES6是一種泛指，即5.1版以后的JavaScript標準，涵蓋了ES2015、ES2016、ES2017等版本。3.JavaScript常用的開發(fā)工具和框架編寫與調(diào)試JavaScript程序的工具和框架有多種，目前常用的工具有Dreamweaver、WebStorm等，常用的框架有Vue.js、Express等。1．DreamweaverDreamweaver是一款集網(wǎng)頁制作和網(wǎng)站管理于一身的所見即所得的網(wǎng)頁編輯器，用于幫助網(wǎng)頁設(shè)計師提高網(wǎng)頁制作效率，降低網(wǎng)頁開發(fā)的難度和學(xué)習HTML、CSS（CascadingStyleSheets，串聯(lián)樣式表）、JavaScript的門檻，它支持以代碼、拆分、設(shè)計、實時視圖等多種方式來創(chuàng)作、編寫和修改網(wǎng)頁。2．WebStormWebStorm是JetBrains公司推出的一款Web前端開發(fā)工具，JavaScript、HTML程序開發(fā)是其強項，其支持許多流行的前端技術(shù)，如jQuery、Prototype、Less、Sass、AngularJS、ESLint、Webpack等。3.JavaScript常用的開發(fā)工具和框架3．VisualStudioCodeVisualStudioCode（簡稱VSCode）是一款功能十分強大的輕量級編輯器，曾被評為JavaScript開發(fā)的最佳工具或IDE（IntegratedDevelopmentEnvironment，集成開發(fā)環(huán)境）之一。該編輯器提供了豐富的快捷鍵，集成了語法高亮、可定制熱鍵綁定、括號匹配以及代碼片段收集等特性，并且支持多種語法和文件格式。VisualStudioCode與Windows、Linux和macOS兼容，可以添加數(shù)百個插件，內(nèi)置調(diào)試器，可以使用IntelliSense進行代碼重構(gòu)和代碼編寫，并集成了CLI（CommandLineInterface，命令行界面）。4．SublimeTextSublimeText是一款輕量級的JavaScript代碼編輯器，具有友好的UI（UserInterface，用戶界面），支持拼寫檢查、書簽、自定義按鍵綁定等功能，還可以通過靈活的插件機制擴展編輯器的功能，其插件可以利用Python語言開發(fā)。SublimeText是一款跨平臺的編輯器，支持Windows、Linux、macOS等操作系統(tǒng)，支持多種語言。3.JavaScript常用的開發(fā)工具和框架5．Vue.jsVue.js是JavaScript的一個開源前端框架，適用于跨平臺開發(fā)。Vue.js支持所有瀏覽器，兼容Windows、macOS和Linux。使用Vue.js處理任何規(guī)模的應(yīng)用程序都非常容易，無論是大規(guī)模應(yīng)用程序還是小規(guī)模應(yīng)用程序。其插件系統(tǒng)具有允許用戶添加網(wǎng)絡(luò)、提供后端支持和狀態(tài)管理等功能。

6．ExpressExpress是開源后端框架。它為構(gòu)建單頁、多頁和混合Web應(yīng)用程序提供了服務(wù)器邏輯，它運行快速、穩(wěn)定，并且可以非常輕松地構(gòu)建API（ApplicationProgramInterface，應(yīng)用程序接口）。使用Express可以輕松配置和自定義應(yīng)用程序。4.ECMAScript的基本語法規(guī)則ECMAScript有以下基本語法規(guī)則。

1．ECMAScript標識符的命名標識符即變量名、函數(shù)名、屬性名等，ECMAScript有一套標識符的命名規(guī)則。編寫JavaScript程序時，應(yīng)始終對所有的代碼使用一致的命名規(guī)則。JavaScript程序標識符的常見命名規(guī)則如下。（1）第一個字符必須是字母、下畫線（_），不要以$符號開頭，以$符號開頭可能會與JavaScript庫名沖突。（2）除第一個字符的其他字符可以是字母、下畫線、符號或數(shù)字。（3）除第一個字符的其他字符還可以是一些特殊的字符，但是不推薦使用特殊字符。（4）數(shù)字不可以作為標識符的首字符。這樣，JavaScript就能輕松區(qū)分標識符和數(shù)字。（5）JavaScript的標識符中不能使用連字符（-），它是為減法預(yù)留的。（6）一般JavaScript標識符采用駝峰格式編寫，采用標識符的駝峰格式是沒有強制要求的，只是這樣寫顯得更加規(guī)范。標識符的常見格式有如下兩種。①小駝峰格式：第一個單詞的首字母小寫，后面接著的單詞首字母都大寫，如idCard。②大駝峰格式：第一個單詞的首字母大寫，后面接著的單詞首字母也都大寫，如IdCard。程序中的類名、全局變量名、常量名一般以大寫字母開頭，通常開發(fā)者更傾向于使用以小寫字母開頭的小駝峰格式，如定義變量名、函數(shù)名時，一般以小寫字母開頭。4.ECMAScript的基本語法規(guī)則2．不能把關(guān)鍵字作為變量名、函數(shù)名等標識符在ECMAScript中，不能把關(guān)鍵字作為變量名、函數(shù)名、屬性名等標識符。例如，var是關(guān)鍵字，是不可以作為變量名的，但是把var變?yōu)閂ar就可以使用了，因為Var不是關(guān)鍵字。例如：//var是一個關(guān)鍵字letvar=2;console.log(var);//此時會報錯，顯示“Unexpectedtoken'var'”letVar=3;console.log(Var);3．區(qū)分字母大小寫ECMAScript的標識符都是區(qū)分字母大小寫的，包括變量名、函數(shù)名等，即JavaScript語言對字母大小寫是敏感的。例如，變量test與變量TEST是不同的變量，函數(shù)getElementById()與getElementbyID()也是不同的。JavaScript也不會把VAR或Var當作關(guān)鍵字var。4.ECMAScript的基本語法規(guī)則4．變量是弱類型的ECMAScript中的變量無特定的類型，定義變量時可用var將其初始化為任意值。因此，可以隨時改變變量所存數(shù)據(jù)的類型，但應(yīng)盡量避免這樣做。例如：varcolor="red";varnum=25;varvisible=true;5．JavaScript會忽略多余的空格編寫JavaScript程序時，可以在語句中添加多個空格，例如，在運算符（=、+、-、*、/）前后位置以及逗號之后添加空格，對代碼塊使用4個空格（注意不是制表符）進行縮進，以增強可讀性，但JavaScript會忽略多余的空格。例如，以下兩條語句是等價的。varnum=25;varnum=25;建議在=、+、-、*、/等運算符兩側(cè)添加空格，以增強可讀性。例如：varx=2+3;4.ECMAScript的基本語法規(guī)則6．正確使用分號分號用于分隔JavaScript語句，通常在每條可執(zhí)行的語句結(jié)尾添加分號。在JavaScript中，每條語句結(jié)尾的分號是可選的，因為ECMAScript允許開發(fā)者自行決定是否以分號結(jié)束一行代碼。如果沒有分號，ECMAScript就把折行代碼的結(jié)尾看作該語句的結(jié)尾（與VisualBasic和VBScript相似），但其前提是沒有破壞代碼的語意。根據(jù)ECMAScript標準，下面兩行代碼都是正確的。vartest1="red"vartest2="blue";最好的代碼編寫習慣是在單條語句結(jié)尾統(tǒng)一加上分號，因為沒有分號，有些瀏覽器無法正確執(zhí)行代碼。加上分號可以避免許多錯誤，也可以更好地將代碼壓縮。在某些情況下，添加分號可以讓代碼執(zhí)行得更快，因為解釋器不需要判斷哪里需要或者不需要分號。另外，使用分號還可以實現(xiàn)在一行中編寫多條語句。7．JavaScript語句計算機程序是由計算機“執(zhí)行”的一系列“指令”，在編程語言中，這些編程指令被稱為語句。4.ECMAScript的基本語法規(guī)則JavaScript程序就是一系列的編程語句。在Web開發(fā)中，JavaScript程序由Web瀏覽器執(zhí)行。JavaScript程序以及JavaScript語句常被稱為JavaScript代碼。大多數(shù)JavaScript程序包含多條JavaScript語句，這些語句會按照它們被編寫的順序逐一執(zhí)行。JavaScript語句向瀏覽器發(fā)出命令，告訴瀏覽器該做什么。JavaScript語句通常以半角分號“;”結(jié)尾。例如：letx=2;lety=3;換行符也相當于語句結(jié)尾。例如：leta=1letb=2在語句結(jié)尾處加半角分號與不加半角分號的代碼都是可以正確執(zhí)行的。4.ECMAScript的基本語法規(guī)則8．JavaScript代碼塊多條語句必須寫在一對花括號之中，這樣的多條語句稱為代碼塊。代碼塊表示一系列應(yīng)該按順序執(zhí)行的語句，代碼塊由左花括號“{”開始，到右花括號“}”結(jié)束，代碼塊的多條語句被封裝在左花括號“{”和右花括號“}”之間?！臼纠?-1】demo0101.html代碼如下：letcolor1="red";if(color1=="red"){color1="blue";alert(color1);}代碼塊的作用是使語句按其被編寫的順序執(zhí)行，JavaScript函數(shù)是將語句組合在代碼塊中的典型示例。JavaScript代碼塊通常有以下編寫規(guī)則。①在第一行的結(jié)尾處寫左花括號“{”。②在左花括號“{”前面添加一個空格。③在代碼塊結(jié)束位置的新行上寫右花括號“}”，并且不加前導(dǎo)空格。④代碼塊不要以分號結(jié)束，即右花括號“}”后面不加分號。4.ECMAScript的基本語法規(guī)則for(i=0;i<5;i++){x+=i;}lettime=12;letgreeting="";if(time<20){greeting="Goodday";}else{greeting="Goodevening";}9．對代碼行進行折行為了得到最佳的可讀性，建議把代碼行控制在80個字符以內(nèi)，如果JavaScript語句太長，則應(yīng)對其進行折行，折行的最佳位置是某個運算符或者逗號之后。例如：document.getElementById("demo").innerHTML='HelloJavaScript';4.ECMAScript的基本語法規(guī)則也可以在文本字符串中使用反斜杠“\”對代碼行進行折行。以下代碼在某些瀏覽器中能夠正確運行：document.getElementById("demo").innerHTML='Hello\JavaScript';使用“\”折行的方法并不符合ECMAScript標準，某些瀏覽器不允許“\”字符之后出現(xiàn)空格。對長字符串進行折行的最安全的做法是使用字符串連接運算符“+”。例如：document.getElementById("demo").innerHTML='Hello+JavaScript';對于非文本字符串，一般不能通過反斜杠“\”對代碼行進行折行，以下的折行是不允許的。document.write\("HelloJavaScript!");5.JavaScript的注釋并非所有JavaScript語句都會被執(zhí)行，雙斜杠“//”或“/*”與“*/”之間的代碼被視為注釋，注釋會被忽略，不會被執(zhí)行。JavaScript的注釋用于對JavaScript代碼進行解釋，以提高程序的可讀性。調(diào)試JavaScript程序時，還可以使用注釋阻止代碼塊的執(zhí)行。JavaScript有兩種類型的注釋。（1）單行注釋以雙斜杠（//）開頭。任何位于“//”與行末之間的文本都會被JavaScript忽略（不會被執(zhí)行）。單行注釋可以用于代碼行之前，例如：//聲明x，為其賦值5varx=5;也可以在每行代碼的結(jié)尾處使用單行注釋來解釋代碼，例如：vary=6;//聲明y，為其賦值6在代碼行之前添加“//”會把可執(zhí)行的代碼行更改為注釋，例如：//x=x+1;（2）多行注釋以單斜杠和星號（/*）開頭，以星號和單斜杠（*/）結(jié)尾。任何位于“/*”和“*/”之間的文本都會被JavaScript忽略，例如：/*thisisamulti-linecomment*/多行注釋也稱塊級注釋。對多行代碼添加多行注釋符，會把可執(zhí)行的代碼行更改為注釋，例如：/*x=x+1;y=x;*/5.JavaScript的注釋（2）多行注釋以單斜杠和星號（/*）開頭，以星號和單斜杠（*/）結(jié)尾。任何位于“/*”和“*/”之間的文本都會被JavaScript忽略，例如：/*thisisamulti-linecomment*/多行注釋也稱塊級注釋。對多行代碼添加多行注釋符，會把可執(zhí)行的代碼行更改為注釋，例如：/*x=x+1;y=x;*/6.在HTML文檔中嵌入JavaScript代碼的方法HTML文檔中的JavaScript代碼必須位于<script>與</script>標簽之間，腳本可被放置在HTML文檔的<body>或<head>部分中，或者同時存在于這兩個部分中。通常的做法是把函數(shù)放入<head>部分中，或者放在文檔底部，這樣不會打亂頁面的內(nèi)容。將JavaScript代碼嵌入HTML文檔的形式有以下幾種。1．在HTML文檔中直接嵌入JavaScript代碼在頁面中使用代碼“<script>JavaScript代碼</script>”可直接嵌入JavaScript代碼，JavaScript代碼主要有以下兩種嵌入位置。（1）在<head>部分中添加JavaScript代碼。將JavaScript代碼置于<head>部分，使之在其余代碼之前加載，快速實現(xiàn)其功能，并且容易維護。有時在<head>部分定義JavaScript代碼，在<body>部分調(diào)用JavaScript代碼。6.在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>6.在HTML文檔中嵌入JavaScript代碼的方法（2）直接在<body>部分中添加JavaScript代碼。某些腳本程序在網(wǎng)頁中的特定部分顯示其效果，此時腳本程序就會位于<body>中的特定位置。把腳本程序置于<body>標簽中內(nèi)容的底部，可加快顯示速度，因為編譯腳本程序會拖慢顯示速度。也可以直接在HTML表單的<input>標簽內(nèi)添加腳本，以響應(yīng)輸入元素的事件?！臼纠?-3】demo0103.html<!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="段落已被更改。";6.在HTML文檔中嵌入JavaScript代碼的方法}</script></body></html>在HTML中，插入腳本程序的方式是使用<script>標簽，即JavaScript代碼必須位于<script>與</script>標簽之間，并且把腳本標簽<script></script>置于網(wǎng)頁的head部分或body部分，然后在其中加入腳本程序。其一般語法格式如下。<script><!--在此編寫JavaScript代碼

//--></script>6.在HTML文檔中嵌入JavaScript代碼的方法通過標簽<script></script>指明其間是JavaScript代碼。雖然<script>標簽有多個屬性，但是這些屬性不常用或者有默認值，而這些默認值通常無須更改。使用<script>標簽時，一般使用language屬性說明使用何種編程語言，使用type屬性標識腳本程序的類型，也可以只使用其中一種，以適應(yīng)不同的瀏覽器。如果需要，還可以在language屬性中標明JavaScript的版本號，這樣，所使用的JavaScript代碼就可以應(yīng)用該版本的功能和特性，如“l(fā)anguage=JavaScript1.2”。以前的瀏覽器可能會在<script>標簽中設(shè)置type="text/javascript"，現(xiàn)在已經(jīng)不必這樣做了。如果瀏覽器版本和JavaScript代碼之間存在兼容性問題，則可能會導(dǎo)致某些JavaScript代碼在某些版本的瀏覽器中無法正確執(zhí)行。如果瀏覽器不能識別<script>標簽，則會將<script>與</script>標簽之間的JavaScript代碼當作普通的HTML字符顯示在瀏覽器中。針對此類問題，可以將JavaScript代碼置于HTML注釋符之間，這樣不支持JavaScript的瀏覽器就不會把代碼內(nèi)容當作文本顯示在頁面上，而是把它們當作注釋，不會做任何操作。“<!--”是HTML注釋符的起始標記，“//-->”是HTML注釋符的結(jié)束標記。在不支持JavaScript的瀏覽器中，標記<!--和//-->之間的內(nèi)容被當作注釋。在支持JavaScript的瀏覽器中，這對標記將不起任何作用。另外，需要注意的是，HTML注釋符的結(jié)束標記之前有兩個斜杠“//”，這兩個斜杠是JavaScript語言中的注釋符號，如果沒有這兩個斜杠，則JavaScript解釋器會試圖將HTML注釋的結(jié)束標記作為JavaScript代碼來解釋，從而可能導(dǎo)致出錯。6.在HTML文檔中嵌入JavaScript代碼的方法2．鏈接JavaScript外部腳本文件先將JavaScript代碼寫入外部的JS文件中，然后通過引用外部腳本文件來加載外部腳本，即使用<script>標簽的src屬性來指定外部腳本文件的URL（UniformResourceLocator，統(tǒng)一資源定位符）。這里也可以使用type屬性，但不是必需的。代碼如下：<scriptsrc="外部JavaScript文件的路徑與名稱"></script>外部JavaScript文件可以通過完整的URL或相對于當前網(wǎng)頁的路徑來引用，外部JavaScript文件的路徑有以下多種情形。（1）存放鏈接的腳本文件的文件夾與存放當前頁面的文件夾相同。代碼如下：<scriptsrc="jsDemo.js"></script>（2）鏈接的腳本文件位于當前網(wǎng)站所在位置的指定文件夾（如js）中。代碼如下：<scriptsrc="/js/jsDemo.js"></script>（3）使用完整的URL來鏈接外部腳本文件。代碼如下：<scriptsrc="https://www.myD/js/jsDemo.js"></script>6.在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>外部文件demo0104.js中myFunction()函數(shù)的代碼如下：functionmyFunction(){document.getElementById("demo").innerHTML="段落已被更改。";}6.在HTML文檔中嵌入JavaScript代碼的方法注意，外部腳本不能包含<script>標簽。外部JavaScript文件的擴展名是.js，可以在網(wǎng)頁的<head>或<body>中放置外部腳本引用，此時該腳本的作用與它被置于<script>標簽中的作用是一樣的。這種方式可以使腳本得到重復(fù)利用，即相同的腳本可被用于多個不同的網(wǎng)頁，從而降低維護的工作量。如果同一頁面需要鏈接多個腳本文件，則可以使用多個<script>標簽。例如：<scriptsrc="js01.js"></script><scriptsrc="js02.js"></script>外部JavaScript文件是最常見的包含JavaScript代碼的方式之一，其優(yōu)勢有以下幾種。①HTML頁面中代碼越少，搜索引擎就能夠以越快的速度來抓取網(wǎng)站內(nèi)容并建立索引。②保持JavaScript代碼和HTML代碼的分離，這樣代碼顯得更清晰，且更易于管理。③因為可以在HTML代碼中鏈接多個JavaScript文件，所以可以把JavaScript文件分開放在Web服務(wù)器上不同的文件夾中，這是一種更容易管理代碼的做法。④使HTML代碼和JavaScript代碼更易于閱讀及維護。⑤已緩存的JavaScript文件可加快頁面加載速度。7.JavaScript的功能展示1．JavaScript使用innerHTML屬性改變HTML內(nèi)容JavaScript如需訪問HTML元素，則可以使用document.getElementById(id)方法，以下代碼使用該方法來“查找”id="demo"的HTML元素，并把元素內(nèi)容（innerHTML）更改為"HelloJavaScript"。document.getElementById("demo").innerHTML="HelloJavaScript";上述代碼中的id屬性用于指定HTML元素，innerHTML屬性用于設(shè)置HTML內(nèi)容?！臼纠?-5】demo0105.html代碼如下：<!doctypehtml><html><head><metacharset="utf-8"><title>JavaScript的功能展示</title></head><body><pid="demo">JavaScript改變HTML內(nèi)容。</p><inputtype="button"onclick="document.getElementById('demo').innerHTML='HelloJavaScript!'"value="請單擊"></body></html>7.JavaScript的功能展示JavaScript同時接受雙引號和單引號，例如：document.getElementById("demo").innerHTML='HelloJavaScript';2．JavaScript改變HTML屬性【示例1-6】demo0106.html以下代碼通過改變<img>標簽的src（Source縮寫）屬性值來更換網(wǎng)頁中的圖像。<!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="">7.JavaScript的功能展示<inputtype="button"onclick="document.getElementById('myImage').src='image/eg_bulboff.gif'"value="關(guān)燈"></body></html>3．JavaScript改變HTML元素的樣式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";8.JavaScript的輸出JavaScript允許通過以下多種方式“顯示”數(shù)據(jù)。1．寫入HTML元素使用innerHTML屬性將數(shù)據(jù)寫入HTML元素。更改HTML元素的innerHTML屬性值是在HTML頁面中顯示數(shù)據(jù)的常用方法。例如：document.getElementById("demo").innerHTML=23;【示例1-7】demo0107.html代碼如下：<!doctypehtml><html><head><metacharset="utf-8"><title>JavaScript的輸出</title></head><body><pid="demo"></p><script>document.getElementById("demo").innerHTML=9+14;</script></body></html>8.JavaScript的輸出2．寫入HTML輸出使用document.write()方法將數(shù)據(jù)寫入HTML輸出，例如：document.write(9+14);3．寫入警告框使用window.alert()方法將數(shù)據(jù)寫入警告框，例如：window.alert(9+14);4．寫入瀏覽器控制臺在瀏覽器中，可以使用console.log()方法來顯示數(shù)據(jù)，即使用console.log()方法將數(shù)據(jù)寫入瀏覽器控制臺。

【示例1-8】demo0108.html代碼如下：<!doctypehtml><html><head><metacharset="utf-8"><title>使用JavaScript將數(shù)據(jù)寫入瀏覽器控制臺</title></head><body><script>8.JavaScript的輸出console.log(9+14);</script></body></html>在瀏覽器中瀏覽網(wǎng)頁demo0108.html，按快捷鍵【F12】激活瀏覽器的開發(fā)人員工具，并在其菜單欄中選擇“控制臺”選項，在瀏覽器控制臺中進行寫入，如圖1-1所示。9.JavaScript的消息框JavaScript有3種類型的消息框：警告框、確認框和提示框。1．警告框警告框是一個帶有提示信息和“確定”按鈕的對話框，經(jīng)常用于輸出提示信息。當警告框出現(xiàn)后，用戶需要單擊“確定”按鈕才能繼續(xù)進行操作。其語法格式如下。window.alert("文本內(nèi)容")window.alert()方法可以不帶window前綴來調(diào)用。例如：alert("感謝你光臨本網(wǎng)站");如果警告框中輸出的提示信息要分為多行，則使用“\n”分行。例如：alert("Hello\nHowareyou?");2．確認框確認框是一個帶有提示信息以及“確定”和“取消”按鈕的對話框，用于使用戶可以驗證或者接收某些信息。當確認框出現(xiàn)后，用戶只有單擊“確定”或者“取消”按鈕才能繼續(xù)進行操作。其語法格式如下。window.confirm("文本內(nèi)容")window.confirm()方法可以不帶window前綴來調(diào)用。9.JavaScript的消息框例如：varr=confirm("請單擊按鈕");if(r==true){x="單擊了'確定'按鈕！";}else{x="單擊了'取消'按鈕！";}當彈出確認框后，如果用戶單擊“確定”按鈕，那么confirm()方法的返回值為true，即r的值為true；如果用戶單擊“取消”按鈕，那么confirm()方法的返回值為false，即r的值為false。3．提示框提示框是一個提示用戶輸入的對話框，經(jīng)常用于提示用戶在進入頁面前輸入某個值。當提示框出現(xiàn)后，用戶需要輸入某個值，然后單擊“確定”按鈕或“取消”按鈕才能繼續(xù)操作。其語法格式如下。mpt("文本內(nèi)容","默認值")mpt()方法可以不帶window前綴來調(diào)用。9.JavaScript的消息框例如：varstrName=prompt("請輸入您的姓名","李義");if(strName!=null){document.getElementById("demo").innerHTML="你好"+strName;}以上代碼運行時，如果用戶單擊“確定”按鈕，那么prompt()方法的返回值為輸入的值；如果用戶單擊“取消”按鈕，那么prompt()方法的返回值為null。如果需要在提示框中顯示折行，則使用“\n”即可。10.JavaScript庫JavaScript高級程序設(shè)計（特別是對不同瀏覽器差異的復(fù)雜處理）通常很困難也很耗時，為了簡化JavaScript程序的開發(fā)，許多JavaScript庫應(yīng)運而生。這些JavaScript庫常被稱為JavaScript框架。這些庫封裝了很多預(yù)定義的對象和實用函數(shù)，能幫助使用者輕松建立有高難度交互功能的富客戶端頁面，并且兼容各大瀏覽器。廣受歡迎的JavaScript框架有jQuery、Prototype、MooTools，這些框架都可提供針對常見JavaScript任務(wù)的函數(shù)，涉及動畫、DOM操作及AJAX處理。1．jQueryjQuery是繼Prototype之后的又一個優(yōu)秀的JavaScript庫，是一個由約翰·雷西格（JohnResig）創(chuàng)建于2006年1月的開源項目。jQuery是目前最受歡迎的JavaScript庫之一，它使用CSS選擇器來訪問和操作網(wǎng)頁上的HTML元素（DOM對象），jQuery同時提供companionUI和插件。目前，微軟、IBM、奈飛等大型公司在其網(wǎng)站上都使用了jQuery。2．PrototypePrototype是一個JavaScript庫，提供用于執(zhí)行常見Web任務(wù)的簡單API。API包含屬性和方法，用于操作HTML元素。Prototype通過提供類和繼承，實現(xiàn)對JavaScript功能的增強。3．MooToolsMooTools是一個JavaScript庫，提供了可使常見的JavaScript編程更為簡單的API，也包含一些輕量級的效果和動畫函數(shù)。10.jQuery簡介jQuery是一個“寫得更少，但做得更多”的輕量級JavaScript庫，它極大地簡化了JavaScript編程。jQuery實現(xiàn)了操作行為（JavaScript代碼）和網(wǎng)頁內(nèi)容（HTML代碼）的分離，憑借簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發(fā)人員遍歷HTML文檔、操作DOM、處理事件、執(zhí)行動畫和開發(fā)AJAX的操作。jQuery擁有強大的選擇器、出色的DOM操作、可靠的事件處理機制、完善的兼容性、獨創(chuàng)的鏈式操作方式等，其獨特而優(yōu)雅的代碼風格改變了JavaScript開發(fā)者的設(shè)計思路和編程方式，因而受到越來越多人的追捧，吸引了一大批JavaScript開發(fā)者去學(xué)習和研究。1．jQuery的引用方法如需使用jQuery，需要先下載jQuery庫，然后使用HTML的<script>標簽引用它。<scripttype="text/javascript"src="jquery.js"></script>在HTML5中，<script>標簽中的type="text/javascript"可以省略不寫，因為JavaScript是HTML5以及所有現(xiàn)代瀏覽器的默認腳本語言。10.jQuery簡介2．jQuery函數(shù)的類別jQuery庫是一個JavaScript文件，其中包含所有的jQuery函數(shù)。jQuery庫中包含以下類別的函數(shù)。①HTML元素選取函數(shù)。②HTML元素操作函數(shù)。③CSS操作函數(shù)。④HTML事件函數(shù)。⑤JavaScript特效和動畫函數(shù)。⑥HTMLDOM遍歷和修改函數(shù)。⑦AJAX函數(shù)。⑧Utilities函數(shù)。3．jQuery的基本語法通過jQuery，可以選?。床樵?，Query）HTML元素，并對它們執(zhí)行“操作”（Action）。jQuery語法是為HTML元素的選取而編制的，選取元素后可以對元素執(zhí)行某些操作。其基本語法格式如下。$(selector).action()（1）美元符號“$”用于定義jQuery，jQuery庫只建立一個名為jQuery的對象，其所有函數(shù)都在該對象之下，其別名為$。（2）選擇符（selector）用于“選取”或“查詢”HTML元素。10.jQuery簡介（3）jQuery的action()用于執(zhí)行對元素的操作。例如：$(this).hide()//隱藏當前元素4．文檔就緒方法ready()jQuery使用$(document).ready()方法代替?zhèn)鹘y(tǒng)JavaScript的window.onload事件，通過使用該方法，可以在DOM完全就緒時對其進行操作并調(diào)用執(zhí)行它所綁定的函數(shù)。$(document).ready()方法和window.onload事件有相似的功能，但是在執(zhí)行時機方面有細微區(qū)別。window.onload事件是在網(wǎng)頁中所有的元素（包括元素的所有關(guān)聯(lián)文件）完全加載到瀏覽器后才執(zhí)行，即JavaScript此時才可以訪問網(wǎng)頁中的任何元素。而通過jQuery中的$(document).ready()方法注冊的事件處理程序，在DOM完全就緒時就可以被調(diào)用。此時，網(wǎng)頁中的所有元素對jQuery而言都是可以訪問的，但是這并不意味著這些元素關(guān)聯(lián)的文件都已經(jīng)下載完畢。jQuery函數(shù)應(yīng)位于ready()方法中。例如：$(document).ready(function(){//函數(shù)代碼

});。10.jQuery簡介這是為了防止在DOM完全加載（就緒）之前執(zhí)行jQuery代碼。如果在DOM完全加載之前就執(zhí)行函數(shù)，則操作可能會失敗。例如，試圖隱藏一個不存在的元素或者獲得未完全加載的圖像的大小。以上代碼可以簡寫為以下形式$(function(){//函數(shù)代碼

});另外，$(document)也可以簡寫為$()。當$()不帶參數(shù)時，默認參數(shù)就是“document”，因此也可以簡寫為以下形式。$().ready(function(){//函數(shù)代碼

});以上3種形式的功能相同，用戶可以根據(jù)喜好進行選擇。12.JavaScript和jQuery使用比較假設(shè)網(wǎng)頁中有HTML代碼<divid="demo"></div>，分別使用JavaScript方式和jQuery方式實現(xiàn)在該標簽位置輸出文本信息。（1）使用JavaScript方式實現(xiàn)。JavaScript允許通過id查找HTML元素，然后改變HTML元素的內(nèi)容。例如：functiondisplayInfo(){varobj=document.getElementById("demo");obj.innerHTML="JavaScript";}displayInfo();（2）使用jQuery方式實現(xiàn)。jQuery允許通過CSS選擇器來選取元素，然后設(shè)置HTML元素的內(nèi)容。例如：functiondisplayInfo(){$("#demo").html("jQuery");}$(document).ready(displayInfo);jQuery的主要函數(shù)是$()函數(shù)。如果向該函數(shù)傳遞DOM對象，則它會返回jQuery對象。jQuery使用$("#id")代替document.getElementById(id)，即通過id獲取元素。使用$("tagName")代替document.getElementsByTagName("tagName")，即通過標簽名獲取HTM