《JavaScript程序設(shè)計(jì)基礎(chǔ)與實(shí)戰(zhàn)》全套教學(xué)課件

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

andpractice時(shí)間:全套可編輯PPT課件

目錄/DIRECTORY1.JavaScript簡(jiǎn)介2.初識(shí)ECMAScript6.03.JavaScript常用的開(kāi)發(fā)工具和框架4.ECMAScript的基本語(yǔ)法規(guī)則5.JavaScript的注釋6.在HTML文檔中嵌入JavaScript代碼的方法7.JavaScript的功能展示8.JavaScript的輸出9.JavaScript的消息框10.JavaScript庫(kù)11.jQuery簡(jiǎn)介12.JavaScript和jQuery的使用比較13.jQuery的選擇器14.jQuery的鏈?zhǔn)讲僮?5.實(shí)戰(zhàn)演練1.JavaScript簡(jiǎn)介JavaScript由布蘭登·艾奇（BrendanEich）首創(chuàng)，于1995年出現(xiàn)在Netscape（該瀏覽器已停止更新）中，并于1997年被ECMA（EuropeanComputerManufacturersAssociation，歐洲計(jì)算機(jī)制造商協(xié)會(huì)）采納，形成了JavaScript標(biāo)準(zhǔn)，稱為ECMAScript，ECMA-262是JavaScript標(biāo)準(zhǔn)的官方名稱。因?yàn)镴avaScript具有復(fù)雜的DOM（DocumentObjectModel，文檔對(duì)象模型），其在不同瀏覽器上的實(shí)現(xiàn)方式不一樣，以及缺乏便捷的開(kāi)發(fā)、調(diào)試工具，所以JavaScript的應(yīng)用并未真正推廣。正當(dāng)JavaScript從開(kāi)發(fā)者的視線中漸漸隱去時(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)暴”。全套可編輯PPT課件

1.JavaScript簡(jiǎn)介JavaScript語(yǔ)言有如下一些特點(diǎn)。（1）JavaScript是解釋型語(yǔ)言，而非編譯型語(yǔ)言。JavaScript的基本語(yǔ)法與C語(yǔ)言的類似，JavaScript代碼在運(yùn)行過(guò)程中不需要單獨(dú)編譯，而是逐行解釋執(zhí)行，運(yùn)行速度快。（2）JavaScript具有跨平臺(tái)性。JavaScript程序的運(yùn)行與操作環(huán)境無(wú)關(guān)，只依賴于瀏覽器本身。只要瀏覽器支持JavaScript，JavaScript程序就能正確執(zhí)行。（3）JavaScript是一種動(dòng)態(tài)類型、弱類型、輕量級(jí)、基于原型的編程語(yǔ)言。JavaScript是一種廣泛用于瀏覽器的腳本語(yǔ)言，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能，它的解釋器被稱為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)其功能。2.初識(shí)ECMAScript6.0ECMAScript6.0（以下簡(jiǎn)稱ES6）是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)，發(fā)布于2015年6月，其目標(biāo)是使JavaScript語(yǔ)言可以用來(lái)編寫復(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ī)范性、易讀性，可方便用戶操作，降低大型項(xiàng)目開(kāi)發(fā)的復(fù)雜程度，降低出錯(cuò)概率，提升開(kāi)發(fā)效率。ES6模塊的設(shè)計(jì)理念是盡量靜態(tài)化，使得編譯時(shí)就能確定模塊之間的依賴關(guān)系，以及輸入和輸出的變量。而CommonJS和AMD模塊都只能在運(yùn)行時(shí)確定這些。2.初識(shí)ECMAScript6.01．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)，并將這種標(biāo)準(zhǔn)稱為ECMAScript。該標(biāo)準(zhǔn)從一開(kāi)始就是針對(duì)JavaScript語(yǔ)言制定的，其名稱之所以不叫JavaScript是出于以下兩個(gè)原因。一是商標(biāo)，Java是Sun公司的商標(biāo)，根據(jù)授權(quán)協(xié)議，只有Netscape公司可以合法地使用JavaScript這個(gè)名稱，且JavaScript本身也已經(jīng)被Netscape公司注冊(cè)為商標(biāo)。二是想體現(xiàn)這種語(yǔ)言的標(biāo)準(zhǔn)制定者是ECMA，而不是Netscape公司，這樣有利于保證這種語(yǔ)言的開(kāi)放性和中立性。因此，ECMAScript和JavaScript的關(guān)系如下：前者是后者的標(biāo)準(zhǔn)，后者是前者的一種實(shí)現(xiàn)。

2．ES6與ECMAScript2015的關(guān)系 2011年，ECMAScript5.1發(fā)布后，ECMA就開(kāi)始制定6.0版了。因此，ES6這個(gè)詞的原意指的是5.1版的下一個(gè)版本。因?yàn)镋S6的第一個(gè)版本是在2015年發(fā)布的，所以又稱為ECMAScript2015，簡(jiǎn)稱ES2015。ES6是一種泛指，即5.1版以后的JavaScript標(biāo)準(zhǔn)，涵蓋了ES2015、ES2016、ES2017等版本。3.JavaScript常用的開(kāi)發(fā)工具和框架編寫與調(diào)試JavaScript程序的工具和框架有多種，目前常用的工具有Dreamweaver、WebStorm等，常用的框架有Vue.js、Express等。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的門檻，它支持以代碼、拆分、設(shè)計(jì)、實(shí)時(shí)視圖等多種方式來(lái)創(chuàng)作、編寫和修改網(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.JavaScript常用的開(kāi)發(fā)工具和框架3．VisualStudioCodeVisualStudioCode（簡(jiǎn)稱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，命令行界面）。4．SublimeTextSublimeText是一款輕量級(jí)的JavaScript代碼編輯器，具有友好的UI（UserInterface，用戶界面），支持拼寫檢查、書簽、自定義按鍵綁定等功能，還可以通過(guò)靈活的插件機(jī)制擴(kuò)展編輯器的功能，其插件可以利用Python語(yǔ)言開(kāi)發(fā)。SublimeText是一款跨平臺(tái)的編輯器，支持Windows、Linux、macOS等操作系統(tǒng)，支持多種語(yǔ)言。3.JavaScript常用的開(kāi)發(fā)工具和框架5．Vue.jsVue.js是JavaScript的一個(gè)開(kāi)源前端框架，適用于跨平臺(tái)開(kāi)發(fā)。Vue.js支持所有瀏覽器，兼容Windows、macOS和Linux。使用Vue.js處理任何規(guī)模的應(yīng)用程序都非常容易，無(wú)論是大規(guī)模應(yīng)用程序還是小規(guī)模應(yīng)用程序。其插件系統(tǒng)具有允許用戶添加網(wǎng)絡(luò)、提供后端支持和狀態(tài)管理等功能。

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

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

//--></script>6.在HTML文檔中嵌入JavaScript代碼的方法通過(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í)腳本程序的類型，也可以只使用其中一種，以適應(yīng)不同的瀏覽器。如果需要，還可以在language屬性中標(biāo)明JavaScript的版本號(hào)，這樣，所使用的JavaScript代碼就可以應(yīng)用該版本的功能和特性，如“l(fā)anguage=JavaScript1.2”。以前的瀏覽器可能會(huì)在<script>標(biāo)簽中設(shè)置type="text/javascript"，現(xiàn)在已經(jīng)不必這樣做了。如果瀏覽器版本和JavaScript代碼之間存在兼容性問(wèn)題，則可能會(huì)導(dǎo)致某些JavaScript代碼在某些版本的瀏覽器中無(wú)法正確執(zhí)行。如果瀏覽器不能識(shí)別<script>標(biāo)簽，則會(huì)將<script>與</script>標(biāo)簽之間的JavaScript代碼當(dāng)作普通的HTML字符顯示在瀏覽器中。針對(duì)此類問(wèn)題，可以將JavaScript代碼置于HTML注釋符之間，這樣不支持JavaScript的瀏覽器就不會(huì)把代碼內(nèi)容當(dāng)作文本顯示在頁(yè)面上，而是把它們當(dāng)作注釋，不會(huì)做任何操作。“<!--”是HTML注釋符的起始標(biāo)記，“//-->”是HTML注釋符的結(jié)束標(biāo)記。在不支持JavaScript的瀏覽器中，標(biāo)記<!--和//-->之間的內(nèi)容被當(dāng)作注釋。在支持JavaScript的瀏覽器中，這對(duì)標(biāo)記將不起任何作用。另外，需要注意的是，HTML注釋符的結(jié)束標(biāo)記之前有兩個(gè)斜杠“//”，這兩個(gè)斜杠是JavaScript語(yǔ)言中的注釋符號(hào)，如果沒(méi)有這兩個(gè)斜杠，則JavaScript解釋器會(huì)試圖將HTML注釋的結(jié)束標(biāo)記作為JavaScript代碼來(lái)解釋，從而可能導(dǎo)致出錯(cuò)。6.在HTML文檔中嵌入JavaScript代碼的方法2．鏈接JavaScript外部腳本文件先將JavaScript代碼寫入外部的JS文件中，然后通過(guò)引用外部腳本文件來(lái)加載外部腳本，即使用<script>標(biāo)簽的src屬性來(lái)指定外部腳本文件的URL（UniformResourceLocator，統(tǒng)一資源定位符）。這里也可以使用type屬性，但不是必需的。代碼如下：<scriptsrc="外部JavaScript文件的路徑與名稱"></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>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">一個(gè)段落。</p><inputtype="button"onclick="myFunction()"value="試一試"></body></html>外部文件demo0104.js中myFunction()函數(shù)的代碼如下：functionmyFunction(){document.getElementById("demo").innerHTML="段落已被更改。";}6.在HTML文檔中嵌入JavaScript代碼的方法注意，外部腳本不能包含<script>標(biāo)簽。外部JavaScript文件的擴(kuò)展名是.js，可以在網(wǎng)頁(yè)的<head>或<body>中放置外部腳本引用，此時(shí)該腳本的作用與它被置于<script>標(biāo)簽中的作用是一樣的。這種方式可以使腳本得到重復(fù)利用，即相同的腳本可被用于多個(gè)不同的網(wǎng)頁(yè)，從而降低維護(hù)的工作量。如果同一頁(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文件可加快頁(yè)面加載速度。7.JavaScript的功能展示1．JavaScript使用innerHTML屬性改變HTML內(nèi)容JavaScript如需訪問(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)容?！臼纠?-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="請(qǐng)單擊"></body></html>7.JavaScript的功能展示JavaScript同時(shí)接受雙引號(hào)和單引號(hào)，例如：document.getElementById("demo").innerHTML='HelloJavaScript';2．JavaScript改變HTML屬性【示例1-6】demo0106.html以下代碼通過(guò)改變<img>標(biāo)簽的src（Source縮寫）屬性值來(lái)更換網(wǎng)頁(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="">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可以通過(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";8.JavaScript的輸出JavaScript允許通過(guò)以下多種方式“顯示”數(shù)據(jù)。1．寫入HTML元素使用innerHTML屬性將數(shù)據(jù)寫入HTML元素。更改HTML元素的innerHTML屬性值是在HTML頁(yè)面中顯示數(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．寫入瀏覽器控制臺(tái)在瀏覽器中，可以使用console.log()方法來(lái)顯示數(shù)據(jù)，即使用console.log()方法將數(shù)據(jù)寫入瀏覽器控制臺(tái)。

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

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

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

});以上3種形式的功能相同，用戶可以根據(jù)喜好進(jìn)行選擇。12.JavaScript和jQuery使用比較假設(shè)網(wǎng)頁(yè)中有HTML代碼<divid="demo"></div>，分別使用JavaScript方式和jQuery方式實(shí)現(xiàn)在該標(biāo)簽位置輸出文本信息。（1）使用JavaScript方式實(shí)現(xiàn)。JavaScript允許通過(guò)id查找HTML元素，然后改變HTML元素的內(nèi)容。例如：functiondisplayInfo(){varobj=document.getElementById("demo");obj.innerHTML="JavaScript";}displayInfo();（2）使用jQuery方式實(shí)現(xiàn)。jQuery允許通過(guò)CSS選擇器來(lái)選取元素，然后設(shè)置HTML元素的內(nèi)容。例如：functiondisplayInfo(){$("#demo").html("jQuery");}$(document).ready(displayInfo);jQuery的主要函數(shù)是$()函數(shù)。如果向該函數(shù)傳遞DOM對(duì)象，則它會(huì)返回jQuery對(duì)象。jQuery使用$("#id")代替document.getElementById(id)，即通過(guò)id獲取元素。使用$("tagName")代替document.getElementsByTagName("tagName")，即通過(guò)標(biāo)簽名獲取HTML元素。12.JavaScript和jQuery使用比較$(document).ready(displayInfo);jQuery的主要函數(shù)是$()函數(shù)。如果向該函數(shù)傳遞DOM對(duì)象，則它會(huì)返回jQuery對(duì)象。jQuery使用$("#id")代替document.getElementById(id)，即通過(guò)id獲取元素。使用$("tagName")代替document.getElementsByTagName("tagName")，即通過(guò)標(biāo)簽名獲取HTML元素。上述代碼的最后一行中，DOM對(duì)象被傳遞到j(luò)Query函數(shù)$(document)，該jQuery函數(shù)會(huì)返回jQuery對(duì)象。ready()是jQuery對(duì)象的一個(gè)方法，由于在JavaScript中函數(shù)就是對(duì)象，因此可以把displayInfo作為變量傳遞給jQuery的ready()方法。13.jQuery的選擇器jQuery的選擇器的作用就是“選擇某個(gè)網(wǎng)頁(yè)元素，然后對(duì)其進(jìn)行某種操作”。使用jQuery的第一步，往往是將一個(gè)選擇表達(dá)式放入構(gòu)造方法jQuery()（簡(jiǎn)寫為$），然后得到被選中的元素。jQuery的選擇器允許對(duì)多個(gè)元素或單個(gè)元素進(jìn)行操作。jQuery元素選擇器和屬性選擇器通過(guò)標(biāo)簽名、屬性名或內(nèi)容對(duì)HTML元素進(jìn)行選擇。jQuery可以使用CSS選擇器來(lái)選取HTML元素，也可以使用表達(dá)式來(lái)選擇帶有指定屬性的元素。選擇表達(dá)式可以是CSS選擇器，例如：$(document)//選擇整個(gè)DOM對(duì)象$('#myId')//選擇id為myId的網(wǎng)頁(yè)元素$('div.myClass')//選擇class為myClass的<div>元素$('input[name=first]')//選擇name屬性等于first的<input>元素選擇表達(dá)式也可以是jQuery特有的表達(dá)式，例如：$('a:first')//選擇網(wǎng)頁(yè)中的第一個(gè)<a>元素$('tr:odd')//選擇表格的奇數(shù)行$('#myForm:input')//選擇表單中的<input>元素$('div:visible')//選擇可見(jiàn)的<div>元素$('div:gt(2)')//選擇除了前3個(gè)元素的所有<div>元素$('div:animated')//選擇當(dāng)前處于動(dòng)畫狀態(tài)的<div>元素13.jQuery的選擇器如果選中多個(gè)元素，則使用jQuery提供的過(guò)濾器可以縮小結(jié)果集，例如：$('div').has('p')//選擇包含<p>元素的<div>元素$('div').not('.myClass')//選擇class不等于myClass的<div>元素$('div').filter('.myClass')//選擇class等于myClass的<div>元素$('div').first()//選擇第1個(gè)<div>元素$('div').eq(5)//選擇第6個(gè)<div>元素14.jQuery的鏈?zhǔn)讲僮鱦Query有一種名為鏈接（Chaining）的技術(shù)，允許用戶在相同的元素上運(yùn)行多條jQuery命令，并且允許將所有操作連接在一起，以鏈條的形式寫出來(lái)。jQuery會(huì)拋掉多余的空格，并按照一行長(zhǎng)代碼來(lái)執(zhí)行。這樣，瀏覽器就不必多次查找相同的元素。例如，當(dāng)需鏈接一個(gè)操作時(shí)，只需簡(jiǎn)單地把該操作追加到之前的操作上。下面的代碼用于把css()、slideUp()、slideDown()鏈接在一起。此后，“demo”元素會(huì)先變?yōu)榧t色，然后向上滑動(dòng)，再向下滑動(dòng)。$("#demo").css("color","red").slideUp(2000).slideDown(2000);如果需要，則可以添加多個(gè)方法對(duì)其進(jìn)行調(diào)用。實(shí)戰(zhàn)演練【任務(wù)1-1】使用JavaScript實(shí)現(xiàn)具有手風(fēng)琴效果的橫向焦點(diǎn)圖片輪換【任務(wù)描述】創(chuàng)建網(wǎng)頁(yè)0101.html，在該網(wǎng)頁(yè)中實(shí)現(xiàn)具有手風(fēng)琴效果的橫向焦點(diǎn)圖片輪換，其外觀效果如圖1-2所示。實(shí)戰(zhàn)演練【任務(wù)1-2】使用jQuery實(shí)現(xiàn)動(dòng)態(tài)改變購(gòu)買數(shù)量【任務(wù)描述】人們經(jīng)常需要在購(gòu)物網(wǎng)站的購(gòu)物車頁(yè)面中改變購(gòu)買數(shù)量，如圖1-3所示，單擊按鈕時(shí)動(dòng)態(tài)增加購(gòu)買數(shù)量，單擊按鈕時(shí)動(dòng)態(tài)減少購(gòu)買數(shù)量。創(chuàng)建網(wǎng)頁(yè)0102.html，編寫程序?qū)崿F(xiàn)在購(gòu)物車頁(yè)面中動(dòng)態(tài)改變購(gòu)買數(shù)量的功能。謝謝!THANKYOUJavaScript時(shí)間:JavaScript編程基礎(chǔ)及應(yīng)用JavaScript程序設(shè)計(jì)基礎(chǔ)與實(shí)戰(zhàn)Learning

andpractice時(shí)間:目錄/DIRECTORY1.ECMAScript的關(guān)鍵字與保留字2.JavaScript的常量3.JavaScript的變量4.JavaScript的數(shù)據(jù)類型5.typeof運(yùn)算符與數(shù)據(jù)類型的檢測(cè)6.JavaScript數(shù)據(jù)類型的轉(zhuǎn)換7.字符串的基本操作8.JavaScript的運(yùn)算符與表達(dá)式9.

實(shí)戰(zhàn)演練ECMAScript的關(guān)鍵字與保留字1．ECMAScript的關(guān)鍵字JavaScript語(yǔ)句通常通過(guò)某個(gè)關(guān)鍵字來(lái)標(biāo)識(shí)需要執(zhí)行的JavaScript操作，如關(guān)鍵字var標(biāo)識(shí)變量聲明，function標(biāo)識(shí)函數(shù)聲明。ECMA-262定義了ECMAScript支持的一套關(guān)鍵字（Keyword），根據(jù)規(guī)定，關(guān)鍵字不能用作變量名或函數(shù)名等標(biāo)識(shí)符。表2-1所示為ECMAScript的關(guān)鍵字。如果把關(guān)鍵字用作變量名或函數(shù)名，則可能得到諸如“IdentifierExpected”（應(yīng)為標(biāo)識(shí)符）這樣的錯(cuò)誤提示消息。ECMAScript的關(guān)鍵字與保留字2．ECMAScript的保留字ECMA-262定義了ECMAScript支持的一套保留字（ReservedWord）。保留字在某種意義上是為將來(lái)的關(guān)鍵字而保留的單詞，因此保留字也不能被用作變量名或函數(shù)名等標(biāo)識(shí)符。ECMA-262第三版中的保留字如表2-2所示。ECMAScript的關(guān)鍵字與保留字ECMA-262第五版在非嚴(yán)格模式下減少了一些保留字，非嚴(yán)格模式下的保留字有class、const、enum、extends、export、import、super；嚴(yán)格模式下的保留字有implements、interface、package、public、private、protected、static、yield、let，其中l(wèi)et和yield是ECMA-262第五版新增的。對(duì)于ECMA-262第三版，如果使用關(guān)鍵字和保留字作為標(biāo)識(shí)符，則會(huì)拋出錯(cuò)誤。在ECMA-262第五版中，對(duì)關(guān)鍵字和保留字的使用規(guī)則進(jìn)行了一點(diǎn)兒修改，雖然同樣不可以將關(guān)鍵字和保留字作為變量名、函數(shù)名，但是它們可以作為函數(shù)的屬性名使用。但最好不要用關(guān)鍵字和保留字作為屬性名、變量名、函數(shù)名，避免以后對(duì)使用規(guī)則再做改動(dòng)時(shí)代碼中產(chǎn)生沖突。除此之外，ECMA-262第五版對(duì)eval和arguments施加了限制，在嚴(yán)格模式下，這兩個(gè)單詞也不能作為變量名、函數(shù)名或?qū)傩悦?，否則將會(huì)出錯(cuò)。JavaScript的常量JavaScript包括兩種類型的值，即字面值和變量值，字面值也稱為常量。JavaScript中的常量主要包括字符串型常量、數(shù)字型常量、布爾常量、全局常量和Infinity等。1．字符串型常量字符串（String）型常量是使用單引號(hào)（''）或雙引號(hào)（""）標(biāo)識(shí)的一個(gè)或幾個(gè)字符?？兆址皇莡ndefined，它既有合法值又有類型。例如：lettxt="";//值是""，類型是字符串型2．?dāng)?shù)字型常量JavaScript只有一種數(shù)值類型，即數(shù)字（Number）型。數(shù)字型常量是其值不能改變的數(shù)據(jù)，賦值時(shí)可以帶小數(shù)點(diǎn)，也可以不帶小數(shù)點(diǎn)。數(shù)字型常量不帶小數(shù)點(diǎn)時(shí)為整型常量，可以使用十進(jìn)制、十六進(jìn)制、八進(jìn)制表示其值；帶小數(shù)點(diǎn)時(shí)為實(shí)型常量，由整數(shù)部分加小數(shù)部分表示。例如：varx=3.14;//帶小數(shù)點(diǎn)的數(shù)字vary=3;//不帶小數(shù)點(diǎn)的數(shù)字?jǐn)?shù)字型常量也可以使用科學(xué)記數(shù)法表示。例如：varx=123e4;//1230000vary=123e-4;//0.0123與許多編程語(yǔ)言不同，JavaScript不會(huì)定義不同類型（如整型、短整型、長(zhǎng)整型、浮點(diǎn)型等）的數(shù)字。JavaScript的數(shù)字始終以雙精度浮點(diǎn)數(shù)（64位）來(lái)存儲(chǔ)，其中第1～52位用于存儲(chǔ)數(shù)字（底數(shù)），第53～63位用于存儲(chǔ)指數(shù)，第64位用于存儲(chǔ)符號(hào)。3．布爾常量布爾（Boolean）常量只有兩種值，即true或false，主要用來(lái)說(shuō)明或代表一種狀態(tài)或標(biāo)志。JavaScript提供了一種布爾型常量，它只接受值true或false。JavaScript表達(dá)式的布爾值是比較運(yùn)算和條件判斷的基礎(chǔ)。（1）布爾值trueJavaScript中所有“真實(shí)”值的布爾值為true。例如：100、3.14、-15、"Hello"、"false"、7+1、3.14、5<6。（2）布爾值falseJavaScript中所有“不真實(shí)”值的布爾值為false。1.0（零）的布爾值為false示例代碼：varx=-0;2.-0（負(fù)零）的布爾值為false示例代碼：varx=-0;Boolean(x);//返回falseJavaScript的常量3.""（空字符串）的布爾值為false示例代碼：varx="";Boolean(x);//返回false4.undefined

的布爾值為false示例代碼：varx;Boolean(x);//返回false5.null

的布爾值為false示例代碼：varx=null;Boolean(x);//返回false6.NaN

的布爾值為false示例代碼：varx=10/"H";Boolean(x);//返回false7.false

的布爾值為false示例代碼：varx=false;Boolean(x);//返回false注意：建議不要?jiǎng)?chuàng)建Boolean對(duì)象，因?yàn)樗鼤?huì)拖慢代碼的執(zhí)行速度。此外，new關(guān)鍵字會(huì)使代碼復(fù)雜化，可能會(huì)產(chǎn)生某些意想不到的結(jié)果。JavaScript的常量4.全局常量NaN?NaN

是JavaScript的全局常量，表示非數(shù)字（NotaNumber），其本身的數(shù)據(jù)類型是數(shù)字類型。?typeofNaN返回“number”。示例代碼：alert(typeofNaN);//顯示為numberalert(NaN==NaN);//顯示為false?NaN不等于其自身：實(shí)際上，NaN不等于任何東西。要確認(rèn)是否是NaN只能使用isNaN()。示例代碼：alert(isNaN(NaN));//顯示為true?使用非法數(shù)字字符串進(jìn)行除法運(yùn)算，會(huì)得到NaN：示例代碼：varx=100/"len";//x將是NaNisNaN(x);//返回true，因?yàn)閤不是數(shù)字?若字符串中包含數(shù)字，則數(shù)學(xué)運(yùn)算的結(jié)果將是數(shù)字：示例代碼：varx=100/"10";//x將是10?若在數(shù)字表達(dá)式中使用了NaN，則運(yùn)算結(jié)果也將是NaN：示例代碼：varx=NaN;vary=5;vars=x+y;//s將是NaNJavaScript的常量5.Infinity?Infinity（或-Infinity）是JavaScript在計(jì)算數(shù)值且結(jié)果超出最大（或最?。┛赡軘?shù)值范圍時(shí)返回的值。?Infinity的數(shù)據(jù)類型是數(shù)字類型，typeofInfinity返回“number”。?除以0（零）也會(huì)生成Infinity。示例代碼：varx=2/0;//x將是Infinityvary=-2/0;//y將是–InfinityJavaScript的常量3.JavaScript的變量1．變量的概念與命名變量是內(nèi)存中存取數(shù)據(jù)值的容器。例如：varname="李明";//創(chuàng)建名為name的變量，并為其賦值“李明”varx=2;vary=3;varz=x+y;在JavaScript中，可以用字母或單詞表示變量名。JavaScript中的變量可用于存放常量的值（如x=2）和表達(dá)式的值（如z=x+y）。變量可以使用短名稱（如x和y），也可以使用描述性更好的名稱（如name、age、sum、total、volume）。變量的命名規(guī)則如下。（1）變量名必須以字母開(kāi)頭，后面的字符可以為字母、數(shù)字、下畫線（_）和美元符號(hào)（$），變量名稱不能有空格、+、-等字符。JavaScript變量的名稱允許以美元符號(hào)和下畫線開(kāi)頭，但不推薦這樣做。（2）變量名對(duì)字母大小寫敏感（如num和Num是不同的變量名），JavaScript語(yǔ)句和JavaScript變量都對(duì)字母大小寫敏感。（3）JavaScript的關(guān)鍵字、保留字都不能用作變量名。3.JavaScript的變量2．JavaScript變量的聲明與賦值（1）單個(gè)變量的聲明與賦值。在JavaScript中創(chuàng)建變量通常稱為“聲明”變量?？梢允褂胿ar關(guān)鍵字來(lái)聲明變量。例如：varname;變量聲明之后，變量是空的，此時(shí)它沒(méi)有值。使用賦值運(yùn)算符（=）可以為變量賦值。例如：name="李明"