版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
JavaScript+jQuery前端開(kāi)發(fā)基礎(chǔ)教程微課版全套可編輯PPT課件第1章JavaScript基礎(chǔ)
本章主要內(nèi)容：JavaScript簡(jiǎn)介JavaScript編程工具在HTML中使用JavaScriptJavaScript基本語(yǔ)法1.1JavaScript簡(jiǎn)介JavaScript是一種輕量的解釋型編程語(yǔ)言，具有面向?qū)ο蟮奶攸c(diǎn)，在Web應(yīng)用中得到廣泛使用。所有現(xiàn)代Web瀏覽器（如Edge、Firefox、Chrome等，后文統(tǒng)稱為瀏覽器）都包含了JavaScript解釋器，所以都支持JavaScript腳本。嵌入HTML文檔的JavaScript稱為客戶端的JavaScript，通常簡(jiǎn)稱為JavaScript。當(dāng)然，JavaScript并不局限于瀏覽器客戶端腳本編寫(xiě)，也可用于服務(wù)器、PC客戶端和移動(dòng)客戶端等的應(yīng)用編寫(xiě)。1.1.1JavaScript版本JavaScript最初由Netscape（網(wǎng)景通信）公司的BrendanEich（布倫丹
?
艾希）研發(fā)。起初，該語(yǔ)言被稱為Mocha，但在1995年9月更名為L(zhǎng)iveScript，最后在12月，Netscape公司與SunMicrosystems（太陽(yáng)微系統(tǒng)）公司聯(lián)合發(fā)布的聲明中，它被命名為JavaScript，也就是JavaScript1.0。實(shí)現(xiàn)了JavaScript1.0的NetscapeNavigator瀏覽器2.0版幾乎壟斷了當(dāng)時(shí)的瀏覽器市場(chǎng)。因?yàn)镴avaScript1.0的巨大成功，Netscape公司在NetscapeNavigator瀏覽器3.0版中實(shí)現(xiàn)了JavaScript1.1。Microsoft公司在進(jìn)軍瀏覽器市場(chǎng)后，在InternetExplorer（簡(jiǎn)稱IE）3.0中實(shí)現(xiàn)了一個(gè)JavaScript的克隆版本，并命名為JScript。在Microsoft加入后，有3種不同的JavaScript版本同時(shí)存在：NetscapeNavigator中的JavaScript、IE中的JScript以及CEnvi中的ScriptEase。這3種JavaScript的語(yǔ)法和特性并沒(méi)有統(tǒng)一。1997年，JavaScript1.1作為一個(gè)草案提交給歐洲計(jì)算機(jī)制造商協(xié)會(huì)（EuropeanComputerManufacturesAssociation，ECMA）。之后，由來(lái)自Netscape、SunMicrosystems、Microsoft、Borland公司和其他一些對(duì)腳本語(yǔ)言感興趣的程序員組成的TC39團(tuán)體推出了JavaScript的“ECMA-262”標(biāo)準(zhǔn)，該標(biāo)準(zhǔn)將腳本語(yǔ)言名稱定義為ECMAScript。該標(biāo)準(zhǔn)也被國(guó)際標(biāo)準(zhǔn)化組織（InternationalOrganizationforStandardization，ISO）及國(guó)際電工委員會(huì)（InternationalElectrotechnicaCommission，IEC）采納，作為各種瀏覽器的JavaScript語(yǔ)言標(biāo)準(zhǔn)。因此，JavaScript成了事實(shí)上的名稱，ECMAScript代表了其語(yǔ)言標(biāo)準(zhǔn)。1.1.2JavaScript特點(diǎn)JavaScript具有下列主要特點(diǎn)。解釋性：瀏覽器內(nèi)置了JavaScript解釋器。在瀏覽器中打開(kāi)HTML文檔時(shí)，其中的JavaScript代碼直接被解釋執(zhí)行。支持對(duì)象：可自定義對(duì)象，也可使用各種內(nèi)置對(duì)象。事件驅(qū)動(dòng)：事件驅(qū)動(dòng)使JavaScript能夠響應(yīng)用戶操作，而不需要Web服務(wù)器端處理。例如，當(dāng)用戶輸入E-mail地址時(shí)，可在輸入事件處理函數(shù)中檢查輸入的合法性。1.1.2JavaScript特點(diǎn)跨平臺(tái)：JavaScript腳本運(yùn)行于JavaScript解釋器，配置了JavaScript解釋器的平臺(tái)均能執(zhí)行JavaScript腳本。安全性：客戶端JavaScript腳本不允許訪問(wèn)本地磁盤(pán)，不能將數(shù)據(jù)寫(xiě)入服務(wù)器，也不能對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過(guò)瀏覽器實(shí)現(xiàn)信息的瀏覽和動(dòng)態(tài)展示。Node.js作為一個(gè)服務(wù)器端JavaScript運(yùn)行環(huán)境，可讓JavaScript成為類似于PHP、Python、Ruby等的服務(wù)器端腳本語(yǔ)言，可讓JavaScript程序?qū)崿F(xiàn)讀寫(xiě)文件、執(zhí)行子進(jìn)程以及網(wǎng)絡(luò)通信等功能。1.2JavaScript編程工具JavaScript腳本需要嵌入HTML文檔，可使用各種工具來(lái)編寫(xiě)JavaScript腳本。最簡(jiǎn)單的工具是Windows的記事本。常用的Web集成開(kāi)發(fā)工具有VisualStudioCode（簡(jiǎn)稱VSCode）、AdobeDreamweaver、Eclipse和IntelliJIDEA等。集成開(kāi)發(fā)工具通常具有語(yǔ)法高亮、自動(dòng)完成、錯(cuò)誤檢測(cè)等功能。本書(shū)使用的VSCode是Microsoft推出的免費(fèi)集成開(kāi)發(fā)工具。1.2.1安裝VSCode演示過(guò)程1.2.2使用VSCode演示：在VSCode中創(chuàng)建HTML文檔1.2.3使用瀏覽器開(kāi)發(fā)人員工具演示1.3.1嵌入式JavaScript腳本嵌入式JavaScript腳本指直接在HTML文檔中包含JavaScript腳本，可使用下面的3種方法實(shí)現(xiàn)嵌入式JavaScript腳本。使用<script>標(biāo)記。作為事件處理程序。作為URL。在HTML中使用JavaScript在HTML文檔中，可通過(guò)兩種方式使用JavaScript腳本：嵌入鏈接1．使用<script>標(biāo)記嵌入JavaScript腳本HTML文檔中的JavaScript腳本放在<script>和</script>標(biāo)記之間。<script>標(biāo)記放在
HTML
文檔的<head>或<body>部分，當(dāng)然也可放在其他位置。<script>標(biāo)記內(nèi)可包括任意多條JavaScript語(yǔ)句，語(yǔ)句按照先后順序依次執(zhí)行，語(yǔ)句的執(zhí)行過(guò)程也是瀏覽器加載HTML文檔過(guò)程的一部分。除了函數(shù)內(nèi)部的代碼外，瀏覽器在掃描到JavaScript語(yǔ)句時(shí)就會(huì)立即執(zhí)行該語(yǔ)句。函數(shù)內(nèi)部的代碼在調(diào)用函數(shù)時(shí)執(zhí)行。一個(gè)HTML文檔可以包含任意多個(gè)<script>標(biāo)記，<script>不能嵌套和交叉。不管有多少個(gè)<script>標(biāo)記，對(duì)HTML文檔而言，它們包含的JavaScript語(yǔ)句組成一個(gè)JavaScript程序。在一個(gè)<script>標(biāo)記中定義的變量和函數(shù)，可在后續(xù)的<script>標(biāo)記中使用。language和type屬性<script>標(biāo)記的language和type屬性（前者已被后者取代）可用于指定腳本使用的編程語(yǔ)言及其版本。<script
language="javascript"></script><script
language="javascript
1.5"></script><script
type="text/vbscript"></script>腳本語(yǔ)言及其版本被指定后，如果瀏覽器不支持，則會(huì)忽略<script>標(biāo)記內(nèi)的腳本代碼。早期的腳本語(yǔ)言除了JavaScript外，還有VBScript。目前，絕大多數(shù)新的瀏覽器不再支持VBScript。JavaScript已成為事實(shí)上的唯一客戶端HTML腳本編程語(yǔ)言。所以，可不在<script>標(biāo)記中指定腳本語(yǔ)言。</script>標(biāo)記</script>標(biāo)記表示一段腳本的結(jié)束。不管</script>標(biāo)記出現(xiàn)在何處，瀏覽器均將其視為腳本的結(jié)束標(biāo)記。<script>
document.write("<script>")
document.write("document.write('頁(yè)面中輸出腳本')")
document.write("</script>")
</script>defer屬性在<script>標(biāo)記中使用defer屬性時(shí)，文檔加載完成后瀏覽器才執(zhí)行腳本。<script
defer></script>當(dāng)然，如果在腳本中有內(nèi)容輸出到頁(yè)面，defer屬性會(huì)被忽略，腳本立即執(zhí)行。2．作為事件處理程序JavaScript腳本代碼可直接作為事件處理程序代碼。例如：<input
type="button"
value="請(qǐng)單擊按鈕"
onclick="a
=
1;
b
=
2;alert('單擊按鈕執(zhí)行JavaScript語(yǔ)句彈出對(duì)話框\na+b='+(a+b))"/>3．作為URL在HTML文檔中，使用“javascript”作為協(xié)議名稱時(shí)，可將JavaScript語(yǔ)句作為URL使用。在訪問(wèn)該URL時(shí)，JavaScript語(yǔ)句被執(zhí)行。例如：<a
href="javascript:a
=
1;
b
=
2;alert('單擊鏈接執(zhí)行JavaScript語(yǔ)句彈出對(duì)話框\na+b='+(a+b))">
請(qǐng)單擊此鏈接
</a>1.3.2鏈接JavaScript腳本<script>標(biāo)記的src屬性用于指定鏈接的外部腳本文件。通常，基于下列原因?qū)avaScript腳本放在外部文件中。腳本代碼較長(zhǎng)，移出HTML文檔后，可簡(jiǎn)化HTML文檔。腳本中的代碼和函數(shù)需要在多個(gè)HTML文檔間共享。將共享代碼放在單個(gè)腳本文件中可節(jié)約磁盤(pán)空間，利于代碼維護(hù)。多個(gè)HTML文檔共享的函數(shù)在第1次被調(diào)用時(shí)，該函數(shù)被緩存，后續(xù)HTML文檔可直接使用緩存中的函數(shù)，加快網(wǎng)頁(yè)加載速度。<script>標(biāo)記的src屬性值可以是任意的URL。這意味著可使用來(lái)自Web服務(wù)器的JavaScript腳本文件，或者是由服務(wù)器腳本動(dòng)態(tài)輸出的腳本。獨(dú)立的JavaScript腳本文件擴(kuò)展名通常為“.js”，“.js”文件只包含JavaScript代碼，沒(méi)有<script>和HTML標(biāo)記。瀏覽器會(huì)將文件中的代碼插入<script>和</script>標(biāo)記之間。
<script
src="test1-5.js"></script>1.4JavaScript基本語(yǔ)法1.4.1區(qū)分大小寫(xiě)JavaScript對(duì)大小寫(xiě)敏感，使用過(guò)程中需要嚴(yán)格區(qū)分關(guān)鍵字、變量、函數(shù)以及其他標(biāo)識(shí)符的大小寫(xiě)。
<script>
a
=
100
A
=
200
document.write(a)
document.write("<br>")
document.write(A
)
</script>1.4.2可忽略空格、換行符和制表符JavaScript會(huì)忽略代碼中不屬于字符串的空格、換行符和制表符。通常，空格、換行符和制表符用于幫助代碼排版，方便閱讀程序。
<script>
a
=
100
document.
write(a)
</script>1.4.3不強(qiáng)制使用語(yǔ)句結(jié)束符號(hào)JavaScript并不強(qiáng)制要求語(yǔ)句末尾使用分號(hào)“;”來(lái)作為語(yǔ)句結(jié)束符號(hào)。JavaScript解釋器可自動(dòng)識(shí)別語(yǔ)句結(jié)束。在某些時(shí)候，可使用分號(hào)將多條語(yǔ)句寫(xiě)在同一行。<script>
a
=100;
document.write(a)</script>1.4.4注釋注釋是程序中的說(shuō)明信息，幫助理解代碼。腳本執(zhí)行時(shí)，注釋內(nèi)容會(huì)被忽略。JavaScript提供兩種注釋。//：?jiǎn)涡凶⑨尅?/之后的內(nèi)容為注釋。/*……*/：多行注釋。在“/*”和“*/”之間的內(nèi)容為注釋，可以占據(jù)多個(gè)語(yǔ)句行。
<script>
/*
【例1-8】
在JavaScript腳本中使用注釋
下面的代碼用于說(shuō)明JavaScript對(duì)大小寫(xiě)敏感
*/
a
=
100
//變量賦值
A
=
200
//變量賦值
document.write(a)
//將變量值輸出到頁(yè)面
document.write("<br>")
//在頁(yè)面中輸出一個(gè)換行標(biāo)記，將兩個(gè)變量值分開(kāi)
document.write(A)
//將變量值輸出到頁(yè)面
</script>1.4.5標(biāo)識(shí)符命名規(guī)則標(biāo)識(shí)符用于命名JavaScript中的變量、函數(shù)或其他對(duì)象。JavaScript標(biāo)識(shí)符命名規(guī)則與Java相同：第1個(gè)字符必須是字母、下劃線、美元符號(hào)或者漢字，后面的字符可以是字母、數(shù)字、下劃線或者漢字。JavaScript使用Unicode字符串，所以允許使用包含中文在內(nèi)的各國(guó)語(yǔ)言字符。例如，下面都是合法的標(biāo)識(shí)符。A_data$pricevar1價(jià)格1.4.6輸入和輸出語(yǔ)句JavaScript常用的輸入和輸出語(yǔ)句如下。document.write(msg)：將參數(shù)msg輸出到Web頁(yè)面的當(dāng)前位置。console.log(msg)：將參數(shù)msg輸出到瀏覽器控制臺(tái)。alert(msg)：在瀏覽器中彈出警告對(duì)話框，參數(shù)msg作為警告信息顯示。prompt(msg)：在瀏覽器中彈出輸入對(duì)話框，參數(shù)msg作為輸入提示信息顯示。1.5編程實(shí)踐：在頁(yè)面中輸出唐詩(shī)本節(jié)綜合應(yīng)用本章所學(xué)知識(shí)，使用JavaScript腳本在Web頁(yè)面中輸出唐詩(shī)《靜夜思》，如圖1-29所示。JavaScript+jQuery前端開(kāi)發(fā)基礎(chǔ)教程微課版第2章JavaScript核心語(yǔ)法基礎(chǔ)本章主要內(nèi)容：數(shù)據(jù)類型變量運(yùn)算符和表達(dá)式流程控制語(yǔ)句2.1數(shù)據(jù)類型和變量程序中最基礎(chǔ)的元素是數(shù)據(jù)和變量。數(shù)據(jù)類型決定了程序如何存儲(chǔ)和處理數(shù)據(jù)，變量則是數(shù)據(jù)的“存儲(chǔ)倉(cāng)庫(kù)”。2.1.1數(shù)據(jù)類型JavaScript數(shù)據(jù)類型可分為兩類：基本類型和引用類型?；绢愋鸵卜Q原始數(shù)據(jù)類型，包括：number（數(shù)值）string（字符串）boolean（布爾值）null（空值）undefined（未定義）symbol（符號(hào)）引用類型也稱復(fù)雜數(shù)據(jù)類型，包括object(對(duì)象）和function（函數(shù)）。函數(shù)實(shí)質(zhì)上是對(duì)象的子類型。1．?dāng)?shù)值常量在程序中直接使用的值稱為字面量或常量。數(shù)值常量支持十進(jìn)制數(shù)、二進(jìn)制數(shù)、八進(jìn)制數(shù)和十六進(jìn)制等記數(shù)形式。十進(jìn)制：人們常用的記數(shù)進(jìn)制，使用0～9的數(shù)碼表示數(shù)值。二進(jìn)制：以0b開(kāi)頭，使用0、1表示數(shù)值，例如：0b110、0b1001。八進(jìn)制：以數(shù)字0或0o開(kāi)頭，使用0～7等數(shù)碼表示數(shù)值，例如05、0o10、017。十六進(jìn)制：以0x或0X開(kāi)頭，使用0～9、a～f、A～F等數(shù)碼表示數(shù)值，例如0x5、0x1F。在Edge瀏覽器控制臺(tái)中輸入各種進(jìn)制數(shù)據(jù)，輸出為對(duì)應(yīng)的十進(jìn)制數(shù)ES2020（即ECMAScript2020）為JavaScript定義了一種新的數(shù)值類型bigint，用于表示64位整數(shù)。數(shù)值末尾的小寫(xiě)字母n表示這是一個(gè)bigint值。例如：10n、0b110n、0x1Fn。數(shù)值常量包含小數(shù)，例如2.25、1.7。如果整數(shù)部分為0，JavaScript允許省略小數(shù)點(diǎn)前面的0，如0.25可表示為.25。數(shù)值常量可用科學(xué)記數(shù)法表示，如1.25e-3、2.5E2。JavaScript的特殊數(shù)值Infinity：Infinity表示正無(wú)窮大，-Infinity表示負(fù)無(wú)窮大。在非零數(shù)值除以0時(shí)就會(huì)出現(xiàn)無(wú)窮大。當(dāng)一個(gè)正值超出JavaScript的表示范圍時(shí)，其結(jié)果就是正無(wú)窮大。NaN：意思為“非數(shù)字”——NotaNumber，表示數(shù)值運(yùn)算時(shí)出現(xiàn)了錯(cuò)誤或者未知結(jié)果。例如，0除以0的結(jié)果為NaN。Number.MAX_VALUE：最大數(shù)值。Number.MIN_VALUE：最小數(shù)值。Number.NaN：NaN。Number.POSITIVE_INFINITY：Infinity。Number.NEGATIVE_INFINITY：-Infinity。2．字符串常量JavaScript使用Unicode字符集。字符串常量指用英文的雙引號(hào)（"）或單引號(hào)（'）括起來(lái)的一串Unicode字符，如"Java"或'15246'。只能成對(duì)使用單引號(hào)或雙引號(hào)作為字符串定界符，不能使用一個(gè)單引號(hào)和一個(gè)雙引號(hào)。如果需要在字符串中包含單引號(hào)或雙引號(hào)，則應(yīng)用另一個(gè)作為字符串定界符或者使用轉(zhuǎn)義字符。例如，"Ilike'JavaScript'"。字符串中可以使用轉(zhuǎn)義字符，轉(zhuǎn)義字符以“\”開(kāi)始。例如，“\n”表示換行符，“\r”表示回車(chē)符。表2-1列出了JavaScript的轉(zhuǎn)義字符。3．布爾型常量布爾型常量只有兩個(gè)：true和false（注意必須小寫(xiě)）。4．nullnull在JavaScript中表示空值。5．undefined用var聲明一個(gè)變量后，其默認(rèn)值為undefined。var
adocument.write(a)
//輸出結(jié)果為undefined6．類型測(cè)試typeof運(yùn)算符可測(cè)試數(shù)據(jù)的類型。typeof(123)
//結(jié)果為number需要特別說(shuō)明的是：typeof(null)結(jié)果為object，正確的結(jié)果應(yīng)該是null。這是JavaScript由來(lái)已久的一個(gè)bug，修復(fù)這個(gè)bug可能會(huì)產(chǎn)生更多的bug，導(dǎo)致現(xiàn)有的很多Web系統(tǒng)無(wú)法使用。所以，JavaScript一直未修復(fù)這個(gè)bug。2.1.2數(shù)據(jù)類型轉(zhuǎn)換JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換包括隱式類型轉(zhuǎn)換和顯式類型轉(zhuǎn)換。1．隱式類型轉(zhuǎn)換當(dāng)JavaScript執(zhí)行代碼需要特定類型的數(shù)據(jù)，而提供的不是該類型的數(shù)據(jù)時(shí)，JavaScript就會(huì)根據(jù)需要轉(zhuǎn)換數(shù)據(jù)的類型，這就是隱式類型轉(zhuǎn)換。5
+
'x'
//結(jié)果為'5x'：數(shù)值5轉(zhuǎn)換為字符串5
-
'3'
//結(jié)果為2：字符串'3'轉(zhuǎn)換為數(shù)值true
+
'Abc'
//結(jié)果為'trueAbc'，布爾值true轉(zhuǎn)換為字符串2．顯式類型轉(zhuǎn)換顯式類型轉(zhuǎn)換指使用Number()、String()和Boolean()等函數(shù)轉(zhuǎn)換類型。Number('2.5')
//轉(zhuǎn)化為數(shù)值，結(jié)果為2.5String(-5)
//轉(zhuǎn)換為字符串，結(jié)果為'-5'Boolean(-5)
//轉(zhuǎn)換為布爾值，結(jié)果為true2.1.3變量
1．變量聲明JavaScript要求變量在使用之前必須進(jìn)行聲明，可使用var、let和const聲明變量。var
a,blet
xconst
PI=3.14const聲明的變量可稱為自定義常量，必須賦初始值，不能更改const所聲明變量的值。var聲明的全局變量是Window對(duì)象的一個(gè)屬性，let和const聲明的變量不是。變量和變量值之間為引用關(guān)系，變量引用變量值。const聲明的變量和變量值之間為常量引用，即不能改變這種引用關(guān)系；如果引用的是對(duì)象，對(duì)象本身是允許改變的。const
PI=3.14
//聲明PI引用常量3.14PI=3.14156
//錯(cuò)誤，試圖令PI引用另一個(gè)常量const
a=[1,2,3]
//聲明a引用數(shù)組[1,2,3]a[0]='abc'
//正確，修改數(shù)組的第一個(gè)元素值，數(shù)組變?yōu)閇'abc',
2,
3]，引用關(guān)系不變a=[2,3]
//錯(cuò)誤，試圖令a引用另一個(gè)數(shù)組可以在聲明的同時(shí)給變量賦值。var
a=100,b=200“=”表示賦值。一種特殊情況是直接給一個(gè)未聲明的變量賦值。ab
=
100此時(shí)，JavaScript會(huì)隱式地對(duì)變量ab進(jìn)行聲明。JavaScript允許重復(fù)聲明變量。var
a
=
100var
a
=
"abc"重復(fù)聲明時(shí)，如果沒(méi)有為變量賦值，則變量的值不變。var
a
=
100var
a
//a的值還是1002．變量的數(shù)據(jù)類型JavaScript是一種弱類型語(yǔ)言，即不強(qiáng)制規(guī)定變量的數(shù)據(jù)類型。存入變量的數(shù)據(jù)決定其數(shù)據(jù)類型?？梢越o一個(gè)變量賦不同類型的值。3．變量的作用范圍作用范圍（也稱作用域）是變量可使用的代碼區(qū)域，可分為全局作用域和局部作用域。根據(jù)作用范圍可將變量分為兩種：全局變量和局部變量。在JavaScript中，類、函數(shù)體、if語(yǔ)句體、switch語(yǔ)句體、for和while循環(huán)的循環(huán)體等可稱為代碼塊。粗略地講，代碼塊就是一對(duì)花括號(hào)“{}”內(nèi)的代碼。在代碼塊內(nèi)部使用let和const聲明的變量為局部變量，其作用范圍是當(dāng)前代碼塊——當(dāng)前代碼塊即為局部作用域。在所有代碼塊外部使用let和const聲明的變量為全局變量，其作用范圍是當(dāng)前文檔的所有代碼——當(dāng)前文檔為全局作用域。在函數(shù)體內(nèi)用var聲明的變量為局部變量，其作用范圍為當(dāng)前函數(shù)，可稱其為函數(shù)作用域；在函數(shù)體外部（即使在一對(duì)花括號(hào)內(nèi)）用var聲明的變量為全局變量。如果一個(gè)局部變量和全局變量同名，則局部變量將屏蔽全局變量。給未聲明的變量賦值時(shí)，JavaScript默認(rèn)將其聲明為全局變量。即使變量在函數(shù)內(nèi)部使用，只要沒(méi)有聲明，JavaScript就會(huì)將其聲明為全局變量。2.2運(yùn)算符與表達(dá)式運(yùn)算符用于完成運(yùn)算，參與運(yùn)算的數(shù)據(jù)稱為操作數(shù)。由操作數(shù)和運(yùn)算符組成的式子稱為表達(dá)式。JavaScript中的運(yùn)算可分為算術(shù)運(yùn)算、字符串運(yùn)算、關(guān)系運(yùn)算、邏輯運(yùn)算、位運(yùn)算和賦值運(yùn)算等。2.2.1算術(shù)運(yùn)算符算術(shù)運(yùn)算符用于執(zhí)行加法、減法、乘法、除法和求余等算術(shù)運(yùn)算。表2-3列出了JavaScript的算術(shù)運(yùn)算符。2.2.2字符串運(yùn)算符在JavaScript中，可使用加號(hào)（+）將兩個(gè)字符串連接成一個(gè)字符串。x="I
like
"
+
"JavaScript"
//x的值為"I
like
JavaScript"加號(hào)既可表示加法，也可表示字符串連接，所以在使用時(shí)應(yīng)注意。x=2+3+"abc"在上述語(yǔ)句中，按照從左到右的順序，先計(jì)算2+3（結(jié)果為5），再計(jì)算5+"abc"，結(jié)果為"5abc"。x="abc"+2+3在上述語(yǔ)句中，按照從左到右的順序，先計(jì)算"abc"+2（結(jié)果為"abc2"），再計(jì)算"abc2"+3，結(jié)果為"abc23"。所以，當(dāng)加號(hào)兩側(cè)都是數(shù)值時(shí)執(zhí)行算術(shù)加法運(yùn)算；如果有一個(gè)操作數(shù)為字符串，加號(hào)執(zhí)行字符串連接。2.2.3關(guān)系運(yùn)算符關(guān)系運(yùn)算符用于比較操作數(shù)的大小關(guān)系，運(yùn)算結(jié)果為布爾值true或false。由算術(shù)運(yùn)算符和關(guān)系運(yùn)算符（至少包含關(guān)系運(yùn)算符）構(gòu)成的表達(dá)式稱為關(guān)系表達(dá)式。相等運(yùn)算符用于判斷兩個(gè)表達(dá)式的值是否相等。例如，3==5結(jié)果為false。一種特殊情況是，數(shù)字字符串和對(duì)應(yīng)數(shù)值會(huì)被認(rèn)為相等。例如，"5"==5結(jié)果為true。如果使用絕對(duì)相等運(yùn)算符，只有在兩個(gè)數(shù)據(jù)的數(shù)據(jù)類型和值都相同時(shí)結(jié)果才為true。例如，"5"=
=
=5結(jié)果為false。關(guān)系運(yùn)算符也可用于字符串比較。當(dāng)兩個(gè)字符串進(jìn)行比較時(shí)，JavaScript首先比較兩個(gè)字符串的第1個(gè)字符的Unicode編碼。若Unicode編碼相同，則繼續(xù)比較下一個(gè)字符，否則根據(jù)Unicode編碼大小得出兩個(gè)字符串的大小關(guān)系。若兩個(gè)字符串的字符完全相同，則兩個(gè)字符串相等。若一個(gè)字符串中的字符已經(jīng)比較完，則另一個(gè)還有未比較字符的字符串更大。2.2.4邏輯運(yùn)算符邏輯運(yùn)算符用于對(duì)布爾型值執(zhí)行邏輯運(yùn)算。2.2.5位運(yùn)算符位運(yùn)算符用于對(duì)操作數(shù)按二進(jìn)制執(zhí)行位運(yùn)算。2.2.6賦值運(yùn)算符“=”是JavaScript的賦值運(yùn)算符，用于將其右側(cè)表達(dá)式的值賦給左側(cè)的變量。x=5;y=x*x+2;賦值運(yùn)算符可以和其他的各種運(yùn)算符組成復(fù)合賦值運(yùn)算符，例如*=、/=、%=、+=、-=、<<=、>>=、>>>=、&=、|=和^=等。復(fù)合賦值運(yùn)算符首先計(jì)算變量和右側(cè)表達(dá)式，然后將結(jié)果賦給變量。x+=5;
//等價(jià)于x=x+5賦值運(yùn)算表達(dá)式可出現(xiàn)在表達(dá)式的任何位置。x=(y=5)+3;
//等價(jià)于y=5;x=y+3;2.2.7特殊運(yùn)算符JavaScript還提供了一些特殊的運(yùn)算符，包括:條件運(yùn)算符逗號(hào)運(yùn)算符數(shù)據(jù)類型運(yùn)算符new運(yùn)算符1．條件運(yùn)算符條件運(yùn)算符基本格式如下。表達(dá)式1
?
表達(dá)式2
:
表達(dá)式3若表達(dá)式1的值為true，則條件運(yùn)算結(jié)果為表達(dá)式2的值，否則為表達(dá)式3的值。例如，下面的代碼輸出兩個(gè)數(shù)中較大的值。var
a
=2,
b
=
3,
cc
=
a
>
b
?
a
:
bdocument.write(c)
//輸出32．逗號(hào)運(yùn)算符利用逗號(hào)可以將多個(gè)表達(dá)式放到一起，其中最后一個(gè)表達(dá)式的值為整個(gè)表達(dá)式的值。c
=
(a
=
5,
b
=
6,
a
+
b)document.write(c)
//輸出113．?dāng)?shù)據(jù)類型運(yùn)算符typeof運(yùn)算符可返回操作數(shù)的數(shù)據(jù)類型，其基本格式如下。typeof
操作數(shù)typeof(操作數(shù))例如，返回變量a的數(shù)據(jù)類型。a
=
100document.write(typeof
a)
//輸出number4．new運(yùn)算符new用于創(chuàng)建對(duì)象實(shí)例。a
=
new
Array()
//創(chuàng)建一個(gè)數(shù)組對(duì)象2.2.8運(yùn)算符的優(yōu)先級(jí)例如，表達(dá)式x%4==0&&x%100!=0||x%400==0（當(dāng)x值為700時(shí)）按從左到右的順序進(jìn)行計(jì)算，過(guò)程如下。（1）%優(yōu)先級(jí)高于==，所以先計(jì)算x%4，結(jié)果為0。表達(dá)式變?yōu)?==0&&x%100!=0||x%400==0。（2）==優(yōu)先級(jí)高于&&，所以先計(jì)算0==0，結(jié)果為true。表達(dá)式變?yōu)閠rue&&x%100!=0||x%400==0。（3）&&、%和!=中，%優(yōu)先級(jí)最高，所以先計(jì)算x%100，結(jié)果為0。表達(dá)式變?yōu)閠rue&&0!=0||x%400==0。（4）&&、!=和||中，!=優(yōu)先級(jí)最高，所以先計(jì)算0!=0，結(jié)果為false。表達(dá)式變?yōu)閠rue&&false||x%400==0。（5）&&比||優(yōu)先級(jí)高，所以先計(jì)算true&&false，結(jié)果為false。表達(dá)式變?yōu)閒alse||x%400==0。（6）||、%和==中，%優(yōu)先級(jí)最高，所以先計(jì)算x%400，結(jié)果為300。表達(dá)式變?yōu)閒alse||300==0。（7）||比==優(yōu)先級(jí)低，所以先計(jì)算300==0，結(jié)果為false。表達(dá)式變?yōu)閒alse||false。（8）計(jì)算false||false，結(jié)果為false。2.2.9表達(dá)式中的數(shù)據(jù)類型轉(zhuǎn)換運(yùn)算符要求操作數(shù)具有相應(yīng)的數(shù)據(jù)類型。算術(shù)運(yùn)算符要求操作數(shù)都是數(shù)值類型字符串運(yùn)算符要求操作數(shù)都是字符串邏輯運(yùn)算符要求操作數(shù)都是邏輯值。JavaScript在計(jì)算表達(dá)式時(shí)，會(huì)根據(jù)運(yùn)算符自動(dòng)轉(zhuǎn)換不匹配的數(shù)據(jù)類型。JavaScript的常見(jiàn)類型轉(zhuǎn)換如表2-2所示。2.3流程控制語(yǔ)句JavaScript流程控制語(yǔ)句包括:if語(yǔ)句switch語(yǔ)句for循環(huán)while循環(huán)do/while循環(huán)continue語(yǔ)句和break語(yǔ)句2.3.1if語(yǔ)句if語(yǔ)句用于實(shí)現(xiàn)分支結(jié)構(gòu)，根據(jù)條件成立與否，執(zhí)行不同的代碼塊。if語(yǔ)句有3種格式。1．if語(yǔ)句格式一1．格式一if(條件表達(dá)式){
代碼塊}如果條件表達(dá)式計(jì)算結(jié)果為true，則執(zhí)行花括號(hào)中的代碼塊，否則跳過(guò)if語(yǔ)句，執(zhí)行后續(xù)代碼。如果代碼塊中只有一條語(yǔ)句，可省略花括號(hào)。if
(x%2==0)
document.write(x+"是偶數(shù)");2．if語(yǔ)句格式二if(條件表達(dá)式){
代碼塊1}else{
代碼塊2}如果條件表達(dá)式計(jì)算結(jié)果為true，則執(zhí)行代碼塊1中的語(yǔ)句，否則執(zhí)行代碼塊2中的語(yǔ)句。if(x%2==0)
document.write(x+"是偶數(shù)");else
document.write(x+"是奇數(shù)");3．if語(yǔ)句格式三if(條件1){
代碼塊1}else
if(條件2)
{
代碼塊2}…else
if(條件n)
{
代碼塊n}
else
{
代碼塊n+1}JavaScript依次判斷各個(gè)條件，只有在前一個(gè)條件表達(dá)式計(jì)算結(jié)果為false時(shí)，才計(jì)算下一個(gè)條件。當(dāng)某個(gè)條件表達(dá)式計(jì)算結(jié)果為true時(shí)，執(zhí)行對(duì)應(yīng)的代碼塊。對(duì)應(yīng)代碼塊中的語(yǔ)句執(zhí)行完后，if語(yǔ)句結(jié)束。只有在所有條件表達(dá)式的計(jì)算結(jié)果均為false時(shí)，才會(huì)執(zhí)行else部分的代碼塊。else部分可以省略。if(x<60)
document.write(x+"分，不及格！");else
if(x<70)
document.write(x+"分，及格！");else
if(x<90)
document.write(x+"分，中等！");else
document.write(x+"分，優(yōu)秀！");2.3.2switch語(yǔ)句
switch語(yǔ)句用于實(shí)現(xiàn)多分支結(jié)構(gòu)，其基本格式如下。switch(n){
case
標(biāo)號(hào)1:
代碼塊1
break;...
case
標(biāo)號(hào)n:
代碼塊n
break;default:
代碼塊n+1}每個(gè)case關(guān)鍵字定義一個(gè)標(biāo)號(hào)，標(biāo)號(hào)不區(qū)分大小。default部分可以省略。switch語(yǔ)句執(zhí)行時(shí)，首先計(jì)算n的值，然后依次測(cè)試case標(biāo)號(hào)是否與n值匹配，如果匹配則執(zhí)行對(duì)應(yīng)的代碼塊中的語(yǔ)句，否則測(cè)試下一個(gè)case標(biāo)號(hào)是否匹配。如果所有標(biāo)號(hào)均不匹配，則執(zhí)行default部分的代碼塊（如果有的話）。每個(gè)case塊末尾的break用于跳出switch語(yǔ)句。break不是必需的。如果沒(méi)有break，JavaScript會(huì)在該case塊中的語(yǔ)句執(zhí)行結(jié)束后，繼續(xù)執(zhí)行后面的case塊，直到遇到break或switch語(yǔ)句結(jié)束。switch語(yǔ)句的case標(biāo)號(hào)除了可以用數(shù)值外，也可使用字符串。2.3.3for循環(huán)for循環(huán)基本語(yǔ)法格式如下。for(初始化;條件;增量){
循環(huán)體}for循環(huán)執(zhí)行步驟如下。（1）執(zhí)行初始化。（2）計(jì)算條件，若結(jié)果為true，則執(zhí)行第（3）步，否則結(jié)束循環(huán)。（3）執(zhí)行循環(huán)體。（4）執(zhí)行增量操作，轉(zhuǎn)到第（2）步。初始化操作可以放在for循環(huán)前面完成，增量部分可放在循環(huán)體內(nèi)完成。條件表達(dá)式應(yīng)有計(jì)算結(jié)果為false的機(jī)會(huì)，否則會(huì)構(gòu)成“死循環(huán)”?！纠?-16】使用for循環(huán)計(jì)算1+2+3+…+1002.3.4while循環(huán)while循環(huán)基本語(yǔ)法格式如下。while(條件){
循環(huán)體}while循環(huán)執(zhí)行時(shí)首先計(jì)算條件，若結(jié)果為true，則執(zhí)行循環(huán)體，否則結(jié)束循環(huán)。每次執(zhí)行完循環(huán)體后，重新計(jì)算條件。2.3.5do/while循環(huán)do/while循環(huán)是while循環(huán)的變體，其基本格式如下。do{
循環(huán)體}while(條件);do/while循環(huán)與while循環(huán)類似，都是在條件為true時(shí)執(zhí)行循環(huán)體。區(qū)別是，while循環(huán)在一開(kāi)始就測(cè)試條件，如果條件不為true，則一次也不執(zhí)行循環(huán)。do/while循環(huán)在執(zhí)行一次循環(huán)后才測(cè)試條件，所以至少執(zhí)行一次循環(huán)。2.3.6continue語(yǔ)句continue語(yǔ)句用于終止本次循環(huán)，開(kāi)始下一次循環(huán)。continue語(yǔ)句只能放在循環(huán)內(nèi)部，在其他位置使用會(huì)出錯(cuò)。continue語(yǔ)句語(yǔ)法格式如下。continuecontinue
標(biāo)號(hào)不帶標(biāo)號(hào)的continue只作用于當(dāng)前所在的循環(huán)，帶標(biāo)號(hào)時(shí)作用于標(biāo)號(hào)處的循環(huán)。當(dāng)continue用在while或do/while循環(huán)中時(shí)會(huì)轉(zhuǎn)移到條件計(jì)算，然后在條件為true時(shí)開(kāi)始下一次循環(huán)，否則結(jié)束循環(huán)。for循環(huán)中的continue會(huì)轉(zhuǎn)移到增量部分，執(zhí)行增量操作后再計(jì)算循環(huán)條件。2.3.7break語(yǔ)句break語(yǔ)句的第一種格式如下。break這種格式的break語(yǔ)句用于跳出循環(huán)或switch語(yǔ)句，并且必須放在循環(huán)或switch語(yǔ)句內(nèi)部，否則會(huì)出錯(cuò)。break語(yǔ)句的第二種格式如下。break
標(biāo)號(hào)這種格式中的標(biāo)號(hào)標(biāo)示的必須是一個(gè)封閉語(yǔ)句或代碼塊，例如循環(huán)、if語(yǔ)句或花括號(hào)括起來(lái)的代碼塊等。帶標(biāo)號(hào)的break語(yǔ)句用于跳出封閉語(yǔ)句或代碼塊，讓程序流程轉(zhuǎn)移到標(biāo)號(hào)標(biāo)示的語(yǔ)句。編程實(shí)踐：根據(jù)用戶選擇顯示名著作者本節(jié)綜合應(yīng)用本章所學(xué)知識(shí)，創(chuàng)建一個(gè)HTML文檔，根據(jù)用戶選擇的四大名著作品名稱顯示作者信息，如圖2-24所示。JavaScript+jQuery前端開(kāi)發(fā)基礎(chǔ)教程微課版第3章
數(shù)組和函數(shù)本章主要內(nèi)容：數(shù)組函數(shù)內(nèi)置函數(shù)3.1數(shù)組數(shù)組是一組相關(guān)數(shù)據(jù)的有序集合，其中的數(shù)據(jù)項(xiàng)被稱為數(shù)組元素。數(shù)組元素在數(shù)組中的位置稱為索引或者下標(biāo)，索引最小值為0。數(shù)組元素用數(shù)組名和下標(biāo)來(lái)表示，例如，假設(shè)a數(shù)組中有3個(gè)數(shù)組元素，這3個(gè)元素可表示為a[0]、a[1]和a[2]。JavaScript是弱類型的，所以數(shù)組中的各個(gè)數(shù)組元素可存放不同類型的數(shù)據(jù)，甚至可以是對(duì)象或數(shù)組。JavaScript不支持多維數(shù)組，但可通過(guò)在數(shù)組元素中保存數(shù)組來(lái)模擬多維數(shù)組。JavaScript的數(shù)組本質(zhì)上也是一種對(duì)象，數(shù)組的類型為object。3.1.1創(chuàng)建數(shù)組可用下面的幾種方式創(chuàng)建數(shù)組。使用數(shù)組常量。使用...擴(kuò)展操作符。使用Array()函數(shù)。使用Array.of()方法。使用Array.from()方法。1．使用數(shù)組常量創(chuàng)建數(shù)組數(shù)組常量是用“[”和“]”符號(hào)括起來(lái)的一組數(shù)據(jù)，用逗號(hào)分隔?？蓪?shù)組常量賦給變量。var
a
=
[]
//創(chuàng)建一個(gè)空數(shù)組var
b
=
[
1
,
2
,
3
]
//b[0]=1、b[1]=2、b[2]=3var
c
=
[
"abc"
,
true
,
100
]
//c[0]="abc"、c[1]=true、c[2]=100數(shù)組元素也可以是數(shù)組。var
a
=
[
[
1
,
2
]
,
[
3
,
4
,
5
]
]
//a[0][0]=1、a[0][1]=2、a[1][0]=3、a[1][1]=4、a[1][2]=52．使用...擴(kuò)展操作符創(chuàng)建數(shù)組...擴(kuò)展操作符將可迭代對(duì)象解析為數(shù)組元素。var
a
=
[
1
,
2
,
3
]
var
b
=
["a"
,
...a
,
"b"]
//b=["a"
,
1
,
2
,
3
,
"b"]var
b
=
[..."abc"]
//b=["a"
,
"b"
,
"c"]3．使用Array()函數(shù)創(chuàng)建數(shù)組Array()函數(shù)是數(shù)組對(duì)象的構(gòu)造函數(shù)，可用它來(lái)創(chuàng)建數(shù)組。不提供參數(shù)時(shí)，Array()函數(shù)創(chuàng)建一個(gè)空數(shù)組（空數(shù)組長(zhǎng)度為0）。var
a=new
Array()
//創(chuàng)建一個(gè)空數(shù)組參數(shù)為一個(gè)數(shù)值時(shí)，Array()函數(shù)將其作為數(shù)組長(zhǎng)度來(lái)創(chuàng)建指定長(zhǎng)度的數(shù)組。var
a=new
Array(5)
//創(chuàng)建有5個(gè)元素的數(shù)組，元素初始值為undefined參數(shù)為多個(gè)值時(shí)，Array()函數(shù)將這些值作為數(shù)組元素來(lái)創(chuàng)建數(shù)組。var
b=new
Array(1,true,"abc")
//b[0]=1、b[1]=true、b[2]=
"abc"4．使用Array.of()方法創(chuàng)建數(shù)組Array.of()方法將參數(shù)作為數(shù)組元素來(lái)創(chuàng)建數(shù)組。var
a
=
Array.of(
)
//創(chuàng)建一個(gè)空數(shù)組var
b
=
Array.of(
5
)
//創(chuàng)建數(shù)組為[5]var
c
=
Array.of(
1
,
2
,
3
)
//c
=
[
1
,
2
,
3
]5．使用Array.from()方法創(chuàng)建數(shù)組Array.from()方法使用可迭代對(duì)象或者類數(shù)組對(duì)象來(lái)創(chuàng)建數(shù)組。var
a
=
Array.from(
[
1
,
2
,
3
]
)
//復(fù)制數(shù)組，a
=
[
1
,
2
,
3
]var
b
=
Array.from("abc")
//b=["a"
,
"b"
,
"c"]3.1.2使用數(shù)組1．使用數(shù)組元素?cái)?shù)組元素通過(guò)數(shù)組名和下標(biāo)進(jìn)行引用。一個(gè)數(shù)組元素等同于一個(gè)變量，可以為數(shù)組元素賦值，或?qū)⑵溆糜诟鞣N運(yùn)算。var
a
=
new
Array(3)
//創(chuàng)建數(shù)組a[0]
=
1
//為數(shù)組元素賦值a[1]
=
2a[2]
=
a[1]
+
a[0]
//將數(shù)組元素用于計(jì)算在將數(shù)組用于字符串操作時(shí)，JavaScript會(huì)調(diào)用數(shù)組對(duì)象的toString()方法將其轉(zhuǎn)為字符串。JavaScript的大多數(shù)內(nèi)置對(duì)象均有toString()方法，用于將對(duì)象轉(zhuǎn)換為字符串。2．使用多維數(shù)組JavaScript沒(méi)有多維數(shù)組的概念，但可在數(shù)組元素中保存數(shù)組，從而實(shí)現(xiàn)多維數(shù)組。var
a
=
new
Array(3)
a[0]
=
1
a[1]
=
new
Array(1,2)
//將數(shù)組存入數(shù)組元素a[2]
=
new
Array('ab',
'cd',
'ef')3．?dāng)?shù)組下標(biāo)范圍在JavaScript中，數(shù)組下標(biāo)最小值為0，最大值為數(shù)組長(zhǎng)度減1。JavaScript沒(méi)有數(shù)組下標(biāo)超出范圍的概念。當(dāng)使用了超出范圍的下標(biāo)時(shí)，JavaScript不會(huì)報(bào)錯(cuò)，引用的數(shù)組元素相當(dāng)于未聲明的變量，其值為undefined。對(duì)超出范圍的下標(biāo)引用的數(shù)組元素賦值時(shí)，會(huì)為數(shù)組添加數(shù)組元素。4．使用數(shù)組賦值JavaScript允許將數(shù)組賦給變量。將引用數(shù)組的變量賦給另一個(gè)變量時(shí)，使得兩個(gè)變量引用同一個(gè)數(shù)組。將另一個(gè)數(shù)組賦給變量意味著改變了變量的引用，使其引用新的數(shù)組。5．添加、刪除數(shù)組元素JavaScript中的數(shù)組長(zhǎng)度是不固定的，對(duì)不存在的數(shù)組元素賦值時(shí)，會(huì)將其添加到數(shù)組中。var
a
=
new
Array()
//創(chuàng)建一個(gè)空數(shù)組a[0]
=
1
//添加數(shù)組元素a[1]
=
2delete關(guān)鍵字可用于刪除數(shù)組元素。delete
a[1]
//刪除a[1]需注意的是，delete的實(shí)質(zhì)是刪除變量所引用的內(nèi)存單元。使用delete刪除一個(gè)數(shù)組元素后，數(shù)組的大小不會(huì)改變。引用一個(gè)被刪除的數(shù)組元素，得到的值為undefined。6．?dāng)?shù)組迭代數(shù)組通常結(jié)合循環(huán)實(shí)現(xiàn)數(shù)組迭代（或者叫數(shù)組元素遍歷）。數(shù)組下標(biāo)最小值為0，最大值為數(shù)組長(zhǎng)度減1對(duì)數(shù)組a用for循環(huán)“for(vari=0;i<a.length;i++)”即可實(shí)現(xiàn)數(shù)組迭代。如果數(shù)組元素已經(jīng)使用delete刪除，或者通過(guò)賦值語(yǔ)句給一個(gè)下標(biāo)較大的不存在的數(shù)組元素賦值，就會(huì)導(dǎo)致數(shù)組包含一些不存在的元素。使用for/in循環(huán)可忽略不存在的元素。3.1.3數(shù)組的屬性1．length屬性數(shù)組的length屬性用于獲得數(shù)組長(zhǎng)度，例如，a.length獲得數(shù)組a的長(zhǎng)度。JavaScript數(shù)組的長(zhǎng)度是可變的，通過(guò)為不存在的數(shù)組元素賦值的方式添加數(shù)組元素時(shí)，數(shù)組的長(zhǎng)度也隨之變化。var
a
=
new
Array(1,
2,
3)
//創(chuàng)建數(shù)組，數(shù)組長(zhǎng)度為3a[5]
=
10
//添加一個(gè)數(shù)組元素，數(shù)組長(zhǎng)度變?yōu)?數(shù)組長(zhǎng)度為數(shù)組中元素的個(gè)數(shù)。因?yàn)閿?shù)組元素下標(biāo)從0開(kāi)始，所以數(shù)組下標(biāo)范圍為0到數(shù)組長(zhǎng)度減1。JavaScript允許修改length屬性。a.length=5上面的語(yǔ)句將數(shù)組a的長(zhǎng)度修改為5。如果修改后的長(zhǎng)度小于原來(lái)長(zhǎng)度，超出新長(zhǎng)度的數(shù)組元素將丟失。如果新長(zhǎng)度超出原長(zhǎng)度，增加的數(shù)組元素初始值為undefined。2．prototype屬性對(duì)象的prototype屬性用于為對(duì)象添加自定義的屬性或方法。為數(shù)組添加自定義屬性或方法的基本語(yǔ)法格式如下。A
=
value其中，name為自定義的屬性或方法名稱，value為表達(dá)式或者函數(shù)。自定義屬性和方法對(duì)當(dāng)前HTML文檔中的所有數(shù)組有效。3.1.4操作數(shù)組的方法1．連接數(shù)組join()方法用于將數(shù)組中的所有元素連接成一個(gè)字符串，字符串中的各個(gè)數(shù)據(jù)默認(rèn)用逗號(hào)分隔。也可為join()方法指定一個(gè)字符串作為分隔符?；菊Z(yǔ)法格式為如下。a.join()
//將數(shù)組a中的數(shù)據(jù)連接成逗號(hào)分隔的字符串a(chǎn).join(x)
//將數(shù)組a中的數(shù)據(jù)連接成變量x中的字符串分隔的字符串2．逆轉(zhuǎn)元素順序reverse()方法將數(shù)組元素以相反的順序存放?；菊Z(yǔ)法格式如下。a.reverse()3．?dāng)?shù)組排序sort()方法用于對(duì)數(shù)組排序。默認(rèn)情況下，數(shù)組元素按字母順序排列，數(shù)值會(huì)轉(zhuǎn)換為字符串進(jìn)行排序。如果要對(duì)數(shù)字?jǐn)?shù)組進(jìn)行排序，可以為sort()方法提供一個(gè)排序函數(shù)作為參數(shù)，排序函數(shù)定義數(shù)組中兩個(gè)相鄰元素的相對(duì)順序。排序函數(shù)有兩個(gè)參數(shù)，假設(shè)為x和y。若需x排在y之前，則排序函數(shù)應(yīng)返回一個(gè)小于0的值。若需x排在y之后，則排序函數(shù)應(yīng)返回一個(gè)大于0的值。若兩個(gè)參數(shù)的位置無(wú)關(guān)緊要，排序函數(shù)返回0。使用排序函數(shù)時(shí)，sort方法將兩個(gè)數(shù)組元素作為排序函數(shù)的參數(shù)，根據(jù)排序函數(shù)的返回值決定數(shù)組元素的先后順序。4．取子數(shù)組
slice()方法用于從數(shù)組中取子數(shù)組，其基本語(yǔ)法格式如下。數(shù)組名.slice(x,y)從數(shù)組中返回下標(biāo)范圍為x～y-1的子數(shù)組。如果省略y，則返回從x開(kāi)始到最后的全部數(shù)組元素。如果x或y為負(fù)數(shù)，則作為最后一個(gè)元素的相對(duì)位置，如-1為倒數(shù)第1個(gè)元素位置。5．splice()方法splice()方法用于添加或刪除數(shù)組元素，其基本語(yǔ)法格式如下。數(shù)組名.splice(m,n,x1,x2,...)其中，m為開(kāi)始元素下標(biāo)，n為從數(shù)組中刪除的元素個(gè)數(shù)。x1、x2等是要添加到數(shù)組中的數(shù)據(jù)，可以省略。splice()方法同時(shí)會(huì)返回刪除的數(shù)組元素。6．push()和pop()方法push()和pop()方法用于實(shí)現(xiàn)數(shù)組的堆棧操作（先進(jìn)后出）。push()方法將數(shù)據(jù)添加到數(shù)組末尾，返回?cái)?shù)組長(zhǎng)度。pop()方法返回?cái)?shù)組中的最后一個(gè)元素，數(shù)組長(zhǎng)度減1。7．unshift()和shift()方法unshift()和shift()方法用于實(shí)現(xiàn)數(shù)組的隊(duì)列操作（先進(jìn)先出）。unshift()方法將數(shù)據(jù)添加到數(shù)組開(kāi)頭，并返回新的數(shù)組長(zhǎng)度。shift()方法返回?cái)?shù)組中的第一個(gè)元素，所有數(shù)組元素依次前移一位，數(shù)組長(zhǎng)度減1。8．concat()方法concat()方法用于將提供的數(shù)據(jù)合并成一個(gè)新的數(shù)組，其基本語(yǔ)法格式如下。b
=
a.concat(x1,x2,x3,…)其中，x1、x2、x3等是單個(gè)的數(shù)據(jù)或者數(shù)組變量。如果是數(shù)組變量，則將其中的數(shù)據(jù)合并到新數(shù)組中。變量b保存合并后的新數(shù)組。3.2函數(shù)當(dāng)某一段代碼需要重復(fù)使用，或者需要對(duì)批量數(shù)據(jù)執(zhí)行相同操作時(shí)，就可使用函數(shù)來(lái)完成。3.2.1定義函數(shù)1．使用function關(guān)鍵字定義函數(shù)用function關(guān)鍵字定義函數(shù)的基本語(yǔ)法格式如下。function
函數(shù)名([參數(shù)1
,
參數(shù)2
,
...]){
代碼塊
[return
返回值]}在當(dāng)前作用域內(nèi)，函數(shù)名應(yīng)該是唯一的。函數(shù)參數(shù)是可選的，多個(gè)參數(shù)之間用逗號(hào)分隔?；ɡㄌ?hào)中的代碼塊稱為函數(shù)體。在函數(shù)體中或在函數(shù)末尾，可使用return語(yǔ)句指定函數(shù)返回值。返回值可以是任意的常量、變量或者表達(dá)式。沒(méi)有return語(yǔ)句時(shí)，函數(shù)沒(méi)有返回值。例如，下面的函數(shù)用于計(jì)算兩個(gè)數(shù)的和。function
sum(a,
b)
{
return
a
+
b}2．在表達(dá)式中定義函數(shù)JavaScript允許在表達(dá)式中定義函數(shù)。在表達(dá)式中定義求和函數(shù)如下。var
sum2
=
function
(a,
b)
{
return
a
+
b}這里的function關(guān)鍵字定義了一個(gè)匿名函數(shù)（也可稱未命名函數(shù)），JavaScript將其賦值給變量sum2。通過(guò)sum2可調(diào)用對(duì)應(yīng)的匿名函數(shù)。3．使用Function()構(gòu)造函數(shù)在JavaScript中，函數(shù)也是一種對(duì)象。函數(shù)對(duì)象的構(gòu)造函數(shù)為Function()，可用它來(lái)定義函數(shù)，其基本語(yǔ)法格式如下。var
變量
=
new
Function(
"參數(shù)1"
,
"參數(shù)2"
,……,
"函數(shù)體")例如，下面為用構(gòu)造函數(shù)定義求和函數(shù)。var
sum3
=
new
Function("a"
,
"b"
,
"return
a+b")4．箭頭函數(shù)JavaScript允許使用箭頭“=>”來(lái)定義函數(shù)表達(dá)式——箭頭函數(shù)。箭頭左側(cè)為參數(shù)，右側(cè)為函數(shù)體。var
sum
=
(x,
y)
=>
{
return
x
+
y
}
//定義函數(shù)sum(2,
5)
//函數(shù)返回值為7箭頭函數(shù)的函數(shù)體通常為一個(gè)return語(yǔ)句。如果要返回對(duì)象常量，可將對(duì)象常量放在return語(yǔ)句或者一對(duì)圓括號(hào)中。var
fruit
=
(x,
y)
=>
{
return
{
type:
x,
price:
y
}
}
//返回對(duì)象常量，標(biāo)準(zhǔn)定義var
fruit2
=
(x,
y)
=>
({
type:
x,
price:
y
})
//返回對(duì)象常量，簡(jiǎn)略定義a
=
fruit('apple',
5)
//a={
type:
'apple',
price:
5
}b
=
fruit2('pear',
4)
//b={
type:
'pear',
price:
4
}在上述4種方法定義的函數(shù)中，箭頭函數(shù)沒(méi)有prototype屬性，所以箭頭函數(shù)不能作為類的構(gòu)造函數(shù)使用。3.2.2調(diào)用函數(shù)函數(shù)調(diào)用的基本語(yǔ)法格式如下。函數(shù)名(參數(shù))函數(shù)名是function關(guān)鍵字定義的函數(shù)名稱，或者是引用函數(shù)對(duì)象的變量名稱。使用function關(guān)鍵字定義函數(shù)時(shí)，函數(shù)定義可以放在當(dāng)前HTML文檔中的任意位置，即允許函數(shù)的調(diào)用出現(xiàn)在函數(shù)定義之前。使用Function()構(gòu)造函數(shù)定義函數(shù)時(shí)，只能在定義之后通過(guò)變量名來(lái)調(diào)用函數(shù)。函數(shù)可以在腳本中調(diào)用，也可以作為HTML的事件處理程序或URL。3.2.3帶參數(shù)的函數(shù)定義函數(shù)時(shí)指定的參數(shù)稱為形式參數(shù)，簡(jiǎn)稱形參。調(diào)用函數(shù)時(shí)指定的參數(shù)稱為實(shí)際參數(shù)，簡(jiǎn)稱實(shí)參。在調(diào)用函數(shù)時(shí)，實(shí)參按先后順序一一對(duì)應(yīng)地傳遞給形參。JavaScript是弱類型的，形參不需要指定數(shù)據(jù)類型。JavaScript不會(huì)檢查形參和實(shí)參的數(shù)據(jù)類型，也不會(huì)檢查形參和實(shí)參的個(gè)數(shù)。1．函數(shù)參數(shù)的個(gè)數(shù)函數(shù)的length屬性返回形參的個(gè)數(shù)。在函數(shù)內(nèi)部，arguments數(shù)組保存調(diào)用函數(shù)時(shí)傳遞的實(shí)參。
function
getMax(a,
b)
{
var
max
=
Number.MIN_VALUE
var
len
=
arguments.length
//獲得實(shí)際參數(shù)個(gè)數(shù)2．使用數(shù)組作為參數(shù)在使用表達(dá)式作為實(shí)參時(shí)，形參接收實(shí)參的值，所以形參值的改變不會(huì)影響到實(shí)參。在使用數(shù)組作為實(shí)參時(shí)，形參接收的是數(shù)組的引用，即形參和實(shí)參引用了同一個(gè)數(shù)組。這種情況下，通過(guò)形參改變數(shù)組元素的值后，在函數(shù)外通過(guò)實(shí)參獲得的也是改變后的數(shù)組元素值。3．使用對(duì)象作為參數(shù)對(duì)象也可作為函數(shù)參數(shù)。與數(shù)組類似，形參和實(shí)參引用的是同一個(gè)對(duì)象。如果在函數(shù)中通過(guò)形參修改了對(duì)象屬性值，通過(guò)實(shí)參獲得的也是修改后的對(duì)象屬性值。3.2.4嵌套函數(shù)在函數(shù)內(nèi)部定義的函數(shù)稱為嵌套函數(shù)，嵌套函數(shù)只能在當(dāng)前函數(shù)內(nèi)部使用。function
addArray(a,
b)
{
function
getMax(x,
y)
{
return
x
>
y
?
0
:
1
}
//返回長(zhǎng)度較大的數(shù)組的序號(hào)
var
alen
=
a.length
var
blen
=
b.length……3.2.5遞歸函數(shù)遞歸函數(shù)是指在函數(shù)的內(nèi)部調(diào)用函數(shù)自身，形成遞歸調(diào)用。使用遞歸函數(shù)必須注意遞歸調(diào)用的結(jié)束條件，若遞歸調(diào)用無(wú)法停止，則會(huì)導(dǎo)致運(yùn)行腳本的瀏覽器崩潰。function
fact(n)
{
//計(jì)算階乘
if
(n
<=
1)
return
1
//遞歸調(diào)用結(jié)束
return
n
*
fact(n
-
1)
}3.3內(nèi)置函數(shù)1．a(chǎn)lert()函數(shù)alert()函數(shù)用于顯示警告對(duì)話框，對(duì)話框包括一個(gè)“確定”按鈕。2．confirm()函數(shù)confirm()函數(shù)用于顯示確認(rèn)對(duì)話框，對(duì)話框包括“確定”和“取消”按鈕。單擊“確定”按鈕可關(guān)閉對(duì)話框，函數(shù)返回值為true。使用其他方式關(guān)閉對(duì)話框時(shí)，函數(shù)返回值為false。3．prompt()函數(shù)prompt()函數(shù)用于顯示輸入對(duì)話框。函數(shù)的第1個(gè)參數(shù)為提示字符串，第2個(gè)參數(shù)會(huì)顯示在輸入框中。輸入數(shù)據(jù)后，單擊“確定”按鈕，函數(shù)返回值為輸入的數(shù)據(jù)。使用其他方式關(guān)閉對(duì)話框時(shí)，函數(shù)返回值為null。4．escape()函數(shù)和unescape()函數(shù)escape()函數(shù)將字符串中的特殊字符轉(zhuǎn)換成“%××”格式的字符串，××為特殊字符ASCII的兩位十六進(jìn)制編碼。unescape()函數(shù)用于解碼由escape()函數(shù)編碼的字符。5．eval()函數(shù)eval()函數(shù)用于計(jì)算表達(dá)式的結(jié)果。6．isNaN()函數(shù)isNaN()函數(shù)在參數(shù)是NaN值時(shí)，返回true，否則返回false。7．parseFloat()函數(shù)parseFloat()函數(shù)將字符串轉(zhuǎn)換成小數(shù)形式。8．parseInt()函數(shù)parseInt()函數(shù)將字符串轉(zhuǎn)換成指定進(jìn)制的整數(shù)。編程實(shí)踐：模擬漢諾塔移動(dòng)本節(jié)綜合應(yīng)用本章所學(xué)知識(shí)，在網(wǎng)頁(yè)中顯示模擬的漢諾塔移動(dòng)過(guò)程，圖3-29顯示了3層漢諾塔的移動(dòng)過(guò)程。漢諾塔問(wèn)題描述如下：有3根木柱，在第1根柱子套了n個(gè)盤(pán)子，上面的盤(pán)子總是比下面的盤(pán)子小。借助第2根柱子，將所有盤(pán)子移動(dòng)到第3根柱子上。在移動(dòng)的過(guò)程中，必須保持上面的盤(pán)子總是比下面的盤(pán)子小。漢諾塔問(wèn)題用遞歸模型可描述為如下過(guò)程。第1步：將第1根柱子上的上面n-1個(gè)盤(pán)子借助第3根柱子移動(dòng)到第2根柱子上。第2步：將第1根柱子上的剩下的1個(gè)盤(pán)子移動(dòng)到第3根柱子上。第3步：將第2根柱子上的n-1個(gè)盤(pán)子借助第1根柱子移動(dòng)到第3根柱子上。用長(zhǎng)度為n的數(shù)組data表示要移動(dòng)的盤(pán)子，3根柱子分別用變量from、by、to表示，漢諾塔問(wèn)題用遞歸函數(shù)表示如下。在JavaScript中，可用遞歸函數(shù)來(lái)實(shí)現(xiàn)上面的漢諾塔問(wèn)題求解。可用字符串?dāng)?shù)組表示當(dāng)前要移動(dòng)的盤(pán)子和3根柱子的狀態(tài)，例如：對(duì)于4層漢諾塔，['D','C','B','A']表示盤(pán)子，二維數(shù)組[['D','C','B','A'],[],[]]則可表示柱子的初始狀態(tài)。移動(dòng)盤(pán)子時(shí)用pop()函數(shù)刪除對(duì)應(yīng)一維數(shù)組末尾的數(shù)組元素，然后用push()函數(shù)將移出的數(shù)組元素添加到對(duì)應(yīng)的一維數(shù)組末尾。JavaScript+jQuery前端開(kāi)發(fā)基礎(chǔ)教程微課版第4章異常和事件處理本章主要內(nèi)容：異常處理事件處理4.1異常處理當(dāng)腳本運(yùn)行發(fā)生錯(cuò)誤時(shí)，瀏覽器通常會(huì)停止腳本的運(yùn)行，嚴(yán)重的錯(cuò)誤甚至有可能會(huì)導(dǎo)致瀏覽器崩潰。JavaScript利用異常處理來(lái)捕獲腳本中發(fā)生的錯(cuò)誤，以便給用戶及時(shí)、友好的提示。4.1.1捕獲和處理異常JavaScript使用try/catch/finally語(yǔ)句來(lái)捕獲和處理異常，其基本語(yǔ)法格式如下。try
{
...//可能發(fā)生異常的代碼塊}
catch
(err)
{
...//發(fā)生異常后，執(zhí)行此處的處理代碼塊}
finally
{
...//不管是否發(fā)生異常，均會(huì)執(zhí)行的代碼塊}
try部分的花括號(hào)中為可能發(fā)生異常的代碼塊。如果發(fā)生了異常，catch語(yǔ)句捕捉到該異常，局部變量err包含了異常信息。finally部分的花括號(hào)中為不管是否發(fā)生異常始終都會(huì)執(zhí)行的代碼。catch和finally均可省略，但必須有其中的一個(gè)才能和try構(gòu)成一個(gè)完整的語(yǔ)句finally子句一般很少使用，但其特殊性在于，只要執(zhí)行了try子句，不管完成了多少，finally子句總會(huì)執(zhí)行。如果try子句中有break、continue或者return語(yǔ)句，會(huì)導(dǎo)致程序流程轉(zhuǎn)移，但會(huì)在轉(zhuǎn)移前執(zhí)行finally子句。如果try子句發(fā)生了異常，而且同時(shí)有捕捉該異常的catch子句，則程序流程轉(zhuǎn)移到catch子句，catch子句執(zhí)行完后再執(zhí)行finally子句。如果finally子句中有break、continue、return或者throw語(yǔ)句，這些語(yǔ)句會(huì)導(dǎo)致程序流程轉(zhuǎn)移。4.1.2拋出異常除了腳本自身發(fā)生的異常外，還可使用throw語(yǔ)句來(lái)拋出異常，其語(yǔ)法格式如下。throw
表達(dá)式表達(dá)式的值可以是任意類型，也可以是Error對(duì)象或Error子類對(duì)象。throw
new
Error('出錯(cuò)了！')Error()構(gòu)造函數(shù)的參數(shù)將作為拋出的Error對(duì)象的message屬性值。4.2事件處理事件驅(qū)動(dòng)是JavaScript的重要特點(diǎn)。當(dāng)用戶在瀏覽器中執(zhí)行操作時(shí)，產(chǎn)生事件，執(zhí)行相應(yīng)的事件處理程序來(lái)完成交互——這就是事件驅(qū)動(dòng)。4.2.1理解事件JavaScript腳本在瀏覽器中的執(zhí)行分兩個(gè)階段：文檔載入階段和事件驅(qū)動(dòng)階段。文檔載入階段指瀏覽器打開(kāi)一個(gè)Web文檔的過(guò)程。在這一過(guò)程中，非事件處理程序代碼被執(zhí)行。文檔載入完成后，JavaScript腳本進(jìn)入事件驅(qū)動(dòng)階段。例如，瀏覽器加載完成時(shí)，會(huì)產(chǎn)生load事件，此時(shí)load事件處理程序就會(huì)執(zhí)行。當(dāng)用戶單擊了某個(gè)按鈕，產(chǎn)生click事件，按鈕的click事件處理程序就會(huì)被執(zhí)行。JavaScript事件處理的主要概念包括：事件類型、事件目標(biāo)、事件處理程序、事件對(duì)象和事件傳播。1．事件類型事件類型也稱事件名稱，是JavaScript對(duì)各類事件的命名，不同事件有其內(nèi)在的處理機(jī)制。例如，click表示鼠標(biāo)單擊，mousemove表示移動(dòng)鼠標(biāo)。2．事件目標(biāo)事件目標(biāo)指發(fā)生事件的對(duì)象。例如，單擊<button>標(biāo)記產(chǎn)生click事件，則<button>標(biāo)記為click事件的目標(biāo)。3．事件處理程序事件處理程序也稱事件監(jiān)聽(tīng)程序或者事件回調(diào)函數(shù)，它是腳本中用于處理事件的函數(shù)。為了響應(yīng)特定目標(biāo)的事件，首先需要定義事件處理程序，然后進(jìn)行注冊(cè)。特定目標(biāo)發(fā)生事件時(shí)，瀏覽器調(diào)用事件處理程序。當(dāng)對(duì)象上注冊(cè)的事件處理程序被調(diào)用時(shí)，我們稱瀏覽器“觸發(fā)”或者“分派”了事件。4．事件對(duì)象事件對(duì)象是與特定事件相關(guān)的對(duì)象，它包含了事件的詳細(xì)信息。事件被觸發(fā)時(shí)，事件對(duì)象作為參數(shù)傳遞給事件處理程序。全局對(duì)象event用于引用事件對(duì)象。5．事件傳播事件傳播是瀏覽器決定由哪個(gè)對(duì)象來(lái)響應(yīng)事件的過(guò)程。如果是專屬于某個(gè)特定對(duì)象的事件，則不需要傳播。例如，load事件專屬于Window對(duì)象，所以不需要傳播；而click事件適用于多數(shù)標(biāo)記，則會(huì)在HTML文檔的DOM樹(shù)中傳播。事件傳播可分為事件捕獲和事件冒泡兩個(gè)過(guò)程事件捕獲事件冒泡clickclickclickclickclickclickclickclickclickclick4.2.2注冊(cè)事件處理程序事件處理程序的注冊(cè)就是建立函數(shù)和對(duì)象事件的關(guān)聯(lián)關(guān)系。JavaScript允許通過(guò)下列方法來(lái)注冊(cè)事件處理程序。設(shè)置HTML標(biāo)記屬性。設(shè)置JavaScript對(duì)象屬性。調(diào)用addEventListener()方法。1．設(shè)置HTML標(biāo)記屬性注冊(cè)事件處理程序早期的Web設(shè)計(jì)都通過(guò)設(shè)置HTML標(biāo)記屬性來(lái)注冊(cè)事件處理程序。例4-4中的HTML文檔中的相關(guān)代碼如下。<div><button
onclick="test()">按鈕</button></div>在<button>標(biāo)記的onclick屬性中設(shè)置的函數(shù)，就是為<button>標(biāo)記注冊(cè)click事件處理程序。2．設(shè)置JavaScript對(duì)象屬性注冊(cè)事件處理程序?qū)⒑瘮?shù)設(shè)置為事件目標(biāo)對(duì)象的事件屬性值，也可完成事件處理程序的注冊(cè)。3．使用addEventListener()方法注冊(cè)事件處理程序事件目標(biāo)對(duì)象的addEventListener()方法用于注冊(cè)事件處理程序。該方法可為事件目標(biāo)對(duì)象的同一個(gè)事件注冊(cè)多個(gè)事件處理程序。當(dāng)事件發(fā)生時(shí)，為事件注冊(cè)的所有處理程序均可執(zhí)行。既然是同一個(gè)事件的處理程序，為何要注冊(cè)多個(gè)事件處理程序，不合并為一個(gè)呢？這主要是基于模塊化的程序設(shè)計(jì)思想的考慮。當(dāng)發(fā)生事件后，需要處理兩種或多種不太相關(guān)的邏輯時(shí)，將其分別用不同的函數(shù)來(lái)實(shí)現(xiàn)，也利于模塊的獨(dú)立性和程序的可維護(hù)性。addEventListener()方法基本語(yǔ)法格式如下。事件目標(biāo)對(duì)象.addEventListener('事件名稱',
函數(shù)名稱,
true|false)方法的第1個(gè)參數(shù)為事件名稱。第2個(gè)參數(shù)為函數(shù)名稱，函數(shù)名稱直接使用，不需要放在字符串中。第3個(gè)參數(shù)如果為true，事件處理程序的調(diào)用發(fā)生在事件的捕獲階段，即事件目標(biāo)對(duì)象接收到事件時(shí)調(diào)用事件處理程序。第3個(gè)參數(shù)如果為false，事件直接發(fā)生在事件目標(biāo)對(duì)象上，或者發(fā)生在其子對(duì)象上，事件冒泡到該對(duì)象時(shí)，調(diào)用事件處理程序。4.2.3事件處理程序的調(diào)用1．事件處理程序的調(diào)用方式事件處理程序的調(diào)用和函數(shù)的調(diào)用方式一致，只是時(shí)機(jī)不同。事件處理程序通常在目標(biāo)對(duì)象發(fā)生事件時(shí)被調(diào)用，調(diào)用時(shí)間是不確定的。也可直接調(diào)用事件處理程序。例如，在例4-5中，完成事件處理程序注冊(cè)后，可用下面的語(yǔ)句直接調(diào)用事件處理程序。btTest.onclick()
//直接調(diào)用事件處理程序直接調(diào)用事件處理程序僅等同于調(diào)用函數(shù)，不能和通過(guò)事件觸發(fā)事件處理程序等同。2．事件處理程序的參數(shù)事件處理程序被觸發(fā)時(shí)，事件對(duì)象作為第1個(gè)參數(shù)傳遞給事件處理程序。event變量用于在事件處理程序中引用事件對(duì)象。直接調(diào)用事件處理程序時(shí)，沒(méi)有發(fā)生事件，所以沒(méi)有事件對(duì)象作為參數(shù)。事件對(duì)象的主要屬性和方法type屬性：事件類型的名稱，如click、submit等。target屬性：發(fā)生事件的HTML標(biāo)記對(duì)象。可能與currentTarget不同。currentTarget屬性：正在執(zhí)行事件處理程序的HTML標(biāo)記對(duì)象。如果在事件傳播（捕獲或冒泡）過(guò)程中事件被觸發(fā)，currentTarget屬性與target屬性不同。timeStamp屬性：時(shí)間戳，表示發(fā)生事件的時(shí)間。bubbles屬性：邏輯值，表示事件是否冒泡。cancelable屬性：邏輯值，表示是否能用preventDefault()方法取消對(duì)象的默認(rèn)動(dòng)作。preventDefault()方法：阻止對(duì)象的默認(rèn)動(dòng)作。例如，單擊表單的提交按鈕時(shí)，首先會(huì)執(zhí)行表單的submit事件處理程序，然后執(zhí)行默認(rèn)動(dòng)作——將表單提交給服務(wù)器。如果在submit事件處理程序中調(diào)用了事件對(duì)象的preventDefault()方法，則會(huì)阻止表單提交給服務(wù)器，這與submit事件處理程序返回false的效果一樣。stopPropagation()方法：調(diào)用該方法可阻止事件傳播過(guò)程，事件傳播路徑中的后繼節(jié)點(diǎn)不會(huì)再接收到該事件。3．事件處理程序的返回值事件處理程序的返回值具有特殊意義。通常，事件處理程序返回false時(shí)，會(huì)阻止瀏覽器執(zhí)行這個(gè)事件的默認(rèn)動(dòng)作。例如，表單的submit事件處理程序返回false時(shí)，會(huì)阻止提交表單；單擊鏈接<a>時(shí)，會(huì)跳轉(zhuǎn)到鏈接的URL，若在其click事件處理程序中返回false，則會(huì)阻止跳轉(zhuǎn)。通過(guò)HTML標(biāo)記的屬性注冊(cè)事件處理程序時(shí)，如果要利用事件處理程序返回false以阻止默認(rèn)動(dòng)作，首先應(yīng)在事件處理程序中使用“returnfalse”語(yǔ)句返回false，然后使用“return事件處理程序名()”的格式設(shè)置屬性來(lái)注冊(cè)事件處理程序。如果使用“事件處理程序名()”，即使在事件處理程序中使用了“returnfalse”，也不會(huì)起到阻止作用。不管是通過(guò)設(shè)置屬性，還是通過(guò)調(diào)用addEventListener()方法注冊(cè)的事件處理程序，在處理程序中調(diào)用preventDefault()方法均可阻止事件默認(rèn)動(dòng)作。在事件處理程序中，也可通過(guò)將event.returnValue屬性設(shè)置為false來(lái)阻止事件默認(rèn)動(dòng)作。4.2.4阻止事件傳播調(diào)用事件對(duì)象的stopPropagation()方法可阻止事件的傳播。4.2.5頁(yè)面加載與卸載事件瀏覽器在加載完一個(gè)頁(yè)面時(shí)，觸發(fā)load事件。在load事件處理程序中，可對(duì)頁(yè)面內(nèi)容設(shè)置樣式或執(zhí)行其他操作。在關(guān)閉當(dāng)前頁(yè)面或跳轉(zhuǎn)到其他頁(yè)面時(shí)，首先會(huì)觸發(fā)beforeunload事件，可使用對(duì)話框確認(rèn)用戶是否跳轉(zhuǎn)。在beforeunload事件處理程序中確認(rèn)了跳轉(zhuǎn)，或者沒(méi)有注冊(cè)beforeunload事件處理程序，都會(huì)進(jìn)一步觸發(fā)unload事件。beforeunload和unload事件處理過(guò)程會(huì)屏蔽所有用戶交互，window.open、alert、confirm等都無(wú)效，不能阻止unload事件。一般在unload事件處理程序中執(zhí)行一些必要的清理操作，事實(shí)上只有極少的這種需求。4.2.6鼠標(biāo)事件鼠標(biāo)事件對(duì)象除了擁有事件對(duì)象的主要屬性外，還有下列常用屬性。button：數(shù)字，在mousedown、mouseup和click等事件中用于表示按下的鼠標(biāo)按鍵，屬性值為0表示左鍵，1表示中鍵（滾輪按鈕），2表示右鍵。altKey、ctrlKey和shiftKey：邏輯值，表示在鼠標(biāo)事件發(fā)生時(shí)，是否按下了【Alt】鍵、【Ctrl】鍵或【Shift】鍵。clientX、clientY：表示鼠標(biāo)指針在瀏覽器中當(dāng)前位置的x坐標(biāo)和y坐標(biāo)。screenX、screenY：表示鼠標(biāo)指針在屏幕中當(dāng)前位置的x坐標(biāo)和y坐標(biāo)。relatedTarget：對(duì)于mouseover事件，表示鼠標(biāo)
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 軍事行業(yè)安全工作總結(jié)
- 構(gòu)建良好班級(jí)氛圍的培訓(xùn)總結(jié)
- 《新腦血管病的預(yù)防》課件
- 2024年江蘇省泰州市公開(kāi)招聘警務(wù)輔助人員輔警筆試自考題2卷含答案
- 2022年江西省景德鎮(zhèn)市公開(kāi)招聘警務(wù)輔助人員輔警筆試自考題1卷含答案
- 2021年青海省西寧市公開(kāi)招聘警務(wù)輔助人員輔警筆試自考題2卷含答案
- 2023年湖北省宜昌市公開(kāi)招聘警務(wù)輔助人員輔警筆試自考題2卷含答案
- 2022年河南省洛陽(yáng)市公開(kāi)招聘警務(wù)輔助人員輔警筆試自考題1卷含答案
- 2024年云南省麗江市公開(kāi)招聘警務(wù)輔助人員輔警筆試自考題1卷含答案
- 《危險(xiǎn)貨物運(yùn)輸包裝》課件
- 沙糖桔互聯(lián)網(wǎng)創(chuàng)業(yè)計(jì)劃書(shū)
- 胃結(jié)石演示課件
- 書(shū)法知識(shí)之章法布局
- 2023乙型肝炎病毒標(biāo)志物臨床應(yīng)用專家共識(shí)（完整版）
- 23J916-1：住宅排氣道（一）
- 儲(chǔ)能項(xiàng)目用戶側(cè)投資測(cè)算表
- 【解析】教科版（廣州）2023-2023學(xué)年小學(xué)英語(yǔ)五年級(jí)上冊(cè)分類專項(xiàng)復(fù)習(xí)卷：閱讀
- 月日上午王一凡把問(wèn)題當(dāng)做教育的資源 優(yōu)秀獎(jiǎng)
- 脊柱四肢及肛門(mén)直腸檢查
- 高中政治期末綜合檢測(cè)部編版選修1
- 鑄造基礎(chǔ)知識(shí)及常見(jiàn)鑄造缺陷簡(jiǎn)介課件
評(píng)論
0/150
提交評(píng)論