版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
《網(wǎng)站前端技術(shù)》簽到掃碼下載文旌課堂APP掃碼簽到（2022.3.2515:00至2022.3.2515:10）簽到方式教師通過“文旌課堂APP”生成簽到二維碼，并設(shè)置簽到時(shí)間，學(xué)生通過“文旌課堂APP”掃描“簽到二維碼”進(jìn)行簽到。。全課導(dǎo)航第1章網(wǎng)站建設(shè)概述第2章HTML與HTML5第3章CSS與CSS3第4章JavaScript基礎(chǔ)第5章JQuery常用函數(shù)第6章開發(fā)者商務(wù)網(wǎng)站建設(shè)04PARTFOUR
第4章JavaScript基礎(chǔ)01*12掌握J(rèn)avaScript的作用和語法。掌握常量、變量、數(shù)據(jù)類型、運(yùn)算符的使用方法。掌握常用的流程控制語句、函數(shù)和數(shù)組的使用方法。理解對象的使用方法，掌握常用的內(nèi)置對象。理解正則表達(dá)式，掌握常見的正則表達(dá)式和相關(guān)方法。掌握DOM和BOM常用的方法。掌握J(rèn)avaScript的相關(guān)知識，增加學(xué)生的知識儲(chǔ)備。制作美麗的時(shí)鐘，鞏固所學(xué)理論知識，提升學(xué)生的實(shí)踐能力。學(xué)習(xí)目標(biāo)素質(zhì)目標(biāo)學(xué)習(xí)目標(biāo)13瀏覽器對象模型BOM目錄CONTNETS本章導(dǎo)航14綜合案例——美麗的時(shí)鐘07函數(shù)JavaScript常量與變量0305JavaScript運(yùn)算符08數(shù)組10JavaScript內(nèi)置對象11正則表達(dá)式12文檔對象模型DOMJavaScript概述0109對象JavaScript語法02JavaScript數(shù)據(jù)類型04流程控制語句0601*01JavaScript概述01*4.1.1認(rèn)識JavaScriptJavaScript是一種腳本編程語言，也是一種通用的、跨平臺(tái)的、基于對象和事件驅(qū)動(dòng)并具有安全性的腳本語言，使用它可以開發(fā)Internet客戶端的應(yīng)用程序。它的解釋器稱為JavaScript引擎，是瀏覽器的一部分。JavaScript在HTML網(wǎng)頁中以語句的形式出現(xiàn)，并執(zhí)行相應(yīng)操作，主要用于給HTML網(wǎng)頁增加動(dòng)態(tài)功能。不同于服務(wù)器端腳本語言，JavaScript作為可以直接在客戶端瀏覽器上運(yùn)行的腳本語言，有著其自身獨(dú)特的功能和特點(diǎn)，具體如下。（1）簡單性。JavaScript采用小程序段的方式實(shí)現(xiàn)編程，并提供了一個(gè)簡易的開發(fā)過程。它的基本結(jié)構(gòu)形式與C、C++、VB和Delphi十分類似，但它不像這些語言一樣需要先編譯，而是在程序運(yùn)行過程中被逐行地解釋。JavaScript與HTML標(biāo)簽結(jié)合在一起，從而方便用戶使用和操作。（2）基于對象。JavaScript是一種基于對象的腳本語言，它不僅可以創(chuàng)建對象，也能使用現(xiàn)有的對象。01*4.1.1認(rèn)識JavaScript（3）動(dòng)態(tài)性。JavaScript是動(dòng)態(tài)的，它可以直接對用戶輸入做出響應(yīng)，無須經(jīng)過Web服務(wù)程序。它對用戶的響應(yīng)，是采用以事件驅(qū)動(dòng)的方式進(jìn)行的。所謂事件驅(qū)動(dòng)，就是指在網(wǎng)頁中執(zhí)行了某種操作所產(chǎn)生的動(dòng)作，這些操作稱為“事件”（Event）。例如，按下鼠標(biāo)、移動(dòng)窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會(huì)引起相應(yīng)的事件響應(yīng)。（4）跨平臺(tái)性。JavaScript是依賴于瀏覽器本身，與操作環(huán)境無關(guān)的腳本語言。也就是說，無論計(jì)算機(jī)是Windows操作系統(tǒng)還是其他操作系統(tǒng)，只要它能運(yùn)行瀏覽器，且瀏覽器支持JavaScript，計(jì)算機(jī)就可以正確執(zhí)行JavaScript腳本語言。（5）安全性。JavaScript是一種安全性語言，它不允許訪問本地硬盤，且不能將數(shù)據(jù)存入服務(wù)器上，不允許對網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互。01*4.1.2JavaScript的作用JavaScript最廣泛的應(yīng)用毫無疑問是在web前端。目前，使用JavaScript實(shí)現(xiàn)的動(dòng)態(tài)網(wǎng)頁在Web前端隨處可見。在網(wǎng)頁制作過程中，JavaScript的作用如下。（1）將動(dòng)態(tài)文本嵌入HTML頁面。（2）對瀏覽器事件做出響應(yīng)。（3）讀寫HTML元素。（4）在數(shù)據(jù)提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。（5）檢測訪客的瀏覽器信息?？刂芻ookies，包括創(chuàng)建和修改等。（6）基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。01*4.1.3JavaScript代碼嵌入HTML中的方法將JavaScript代碼嵌入HTML文檔中需要使用<script></script>標(biāo)簽，該標(biāo)簽可以放在HTML文檔中的任意位置。但是，為了使頁面代碼結(jié)構(gòu)清晰，設(shè)計(jì)者經(jīng)常把含有JavaScript代碼的<script></script>標(biāo)簽放置在HTML文檔的<head></head>標(biāo)簽內(nèi)。因?yàn)闉g覽器按照自上而下的順序解析HTML文檔，設(shè)計(jì)者需要確保JavaScript代碼可以被優(yōu)先解析。通常情況下，將JavaScript代碼嵌入到HTML文檔中的方法有三種，包括在HTML文檔中直接嵌入JavaScript代碼；連接外部JavaScript文件；作為特定標(biāo)簽的屬性值使用。1．在HTML文檔中直接嵌入JavaScript代碼：在HTML文檔中，將JavaScript代碼直接放在<script></script>標(biāo)簽內(nèi)，基本格式如下：<scriptlanguage="javascript"> JavaScript程序代碼</script>01*4.1.3JavaScript代碼嵌入HTML中的方法language屬性用于設(shè)置所使用的腳本語言及版本。但是，在Web標(biāo)準(zhǔn)中，建議使用type屬性代替language屬性?！臼纠?-1-1】在HTML文檔<head>標(biāo)簽內(nèi)輸入<script>標(biāo)簽，代碼如下：<scriptlanguage="javascript"> alert("歡迎您的到來！");</script>【效果】頁面加載后，彈出對話框，顯示“歡迎您的到來！”，如圖4-1-1所示。圖4-1-1對話框顯示效果01*4.1.3JavaScript代碼嵌入HTML中的方法2．連接外部JavaScript文件：編寫外部JavaScript文件（文件后綴名為.js），并通過<script>標(biāo)簽的src屬性將該文件導(dǎo)入HTML文檔中，基本格式如下：<scriptlanguage="javascript"src="JavaScript文件路徑"></script>【示例4-1-2】新建ex40102.js文件并保存在網(wǎng)站的js目錄中，接著在該文件中輸入以下代碼：alert("歡迎您的到來！");將ex40102.js文件導(dǎo)入HTML文檔中，即在HTML文檔<head>標(biāo)簽內(nèi)輸入<script>標(biāo)簽，代碼如下：<scriptlanguage="javascript"src="js/ex40102.js"></script>【效果】頁面加載后，同樣彈出對話框，且顯示“歡迎您的到來！”，如圖4-1-1所示。01*4.1.3JavaScript代碼嵌入HTML中的方法3．作為特定標(biāo)簽的屬性值使用在<script></script>標(biāo)簽內(nèi)或在外部JavaScript文件內(nèi)定義函數(shù)，然后在某標(biāo)簽的某事件屬性中引入函數(shù)名?！臼纠?-1-3】在HTML文檔<head>標(biāo)簽內(nèi)輸入<script>標(biāo)簽，代碼如下：<scriptlanguage="javascript"> functionfun(){alert("歡迎您的到來！"); }</script>在HTML文檔<body>標(biāo)簽內(nèi)輸入<input>標(biāo)簽，代碼如下：<inputtype="button"value="彈出信息"onClick="fun()"/>【效果】頁面加載后，顯示“彈出信息”按鈕，如圖4-1-2所示。單擊該按鈕后彈出對話框，且顯示“歡迎您的到來！”，如圖4-1-1所示。圖4-1-2頁面顯示的“彈出信息”按鈕02*02JavaScript語法02*4.2.1
JavaScript代碼格式每條JavaScript代碼語句以英文分號“;”作為結(jié)束標(biāo)志。有時(shí)候也可以省略英文分號，以換行符作為語句結(jié)束的標(biāo)志。JavaScript代碼的編寫比較自由，它一般會(huì)忽略分隔符，如空格符、制表符和換行符等。在保證不引起歧義的情況下，用戶可以利用分隔符對腳本進(jìn)行排版。為了增強(qiáng)程序可讀性，方便進(jìn)一步編輯和修改，排版建議一行只寫一條語句，并在運(yùn)算符前后各加一個(gè)空格。JavaScript代碼的編寫格式如下：vara1=20;varh=40;varsum;sum=a1+h;在書寫JavaScript代碼時(shí)，還應(yīng)該注意以下幾點(diǎn)。（1）在函數(shù)名、變量名等標(biāo)識符中，不可以加入空白字符。（2）字符串和正則表達(dá)式的空白字符是其組成部分，JavaScript解釋器將會(huì)保留。（3）編寫代碼時(shí)應(yīng)根據(jù)結(jié)構(gòu)進(jìn)行縮進(jìn)，提高程序的可讀性。02*4.2.2
大小寫規(guī)范JavaScript對字母的大小寫是敏感的，它嚴(yán)格區(qū)分字母大小寫，即在輸入語言的關(guān)鍵字、函數(shù)名、變量和其他標(biāo)識符時(shí)，必須采用正確的大小寫形式。例如，定義變量時(shí)，China和china是兩個(gè)不同的變量，在使用時(shí)一定要注意，防止出錯(cuò)，尤其是要保持變量定義和使用的一致性。02*4.2.3
注釋JavaScript代碼也有注釋標(biāo)記，可以對某一段代碼進(jìn)行注釋，JavaScript解釋器將忽略注釋部分。和其他的程序語言相同，JavaScript的注釋可以分為單行注釋和多行注釋。1．單行注釋以“//”開頭，其后的同一行內(nèi)容為注釋內(nèi)容。2．多行注釋以“/*”開頭，以“*/”結(jié)尾，包含在該符號內(nèi)的部分為注釋內(nèi)容?！臼纠?-2-1】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varx=30;//單行注釋：定義名為x的變量，其初值為30vartext="網(wǎng)頁設(shè)計(jì)";/*多行注釋：定義名為text的變量，
并且其值為字符串“網(wǎng)頁設(shè)計(jì)”*/代碼第2行為單行注釋行，代碼第4、5行為多行注釋行。小提示02*4.2.4
JavaScript中的保留字編程語言都有屬于自己的保留字，一般在一些特殊場合使用這些單詞。保留字都含有特定的含義，它們都不可以用作變量、標(biāo)簽或函數(shù)名。JavaScript中的保留字如表4-2-1所示。表4-2-1JavaScript中的保留字abstractbooleanbreakbyteCasecatchcharclassconstcontinuedefaultDeletedodoubleelseextendsfalsefinalFinallyfloatforfunctiongotoifimplementsImportininstanceofintinterfacelongnativeNewnullpackageprivateprotectedpublicreturnshortstaticsuperswitchsynchronizedthisthrowThrowstransientturetrytypeofvarvoidvolatilewhilewith02*4.2.5
輸出方法JavaScript的輸出方式有三種，即頁面輸出、控制臺(tái)輸出、彈窗輸出。1．頁面輸出頁面輸出是根據(jù)用戶動(dòng)作觸發(fā)事件將元素加載到頁面上的。該輸出方法采用函數(shù)document.write("要輸出的內(nèi)容")實(shí)現(xiàn)，其中“要輸出的內(nèi)容”中可以含有標(biāo)簽。【示例4-2-2】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：document.write("<div>頁面輸出函數(shù)<div>");【效果】在頁面添加<div>元素，內(nèi)容為“頁面輸出函數(shù)”。2．控制臺(tái)輸出控制臺(tái)輸出是在控制臺(tái)輸出內(nèi)容，應(yīng)用于調(diào)試。它的代碼實(shí)現(xiàn)格式為console.log("要輸出的內(nèi)容")，開發(fā)者常使用該函數(shù)設(shè)置斷點(diǎn)測試程序?！臼纠?-2-3】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：console.log("控制臺(tái)消息");【效果】頁面加載后，沒有任何東西。單擊F12，打開開發(fā)人員工具視圖，選擇“Console”（控制臺(tái)）選項(xiàng)卡，便可以看到控制臺(tái)中的輸出內(nèi)容“控制臺(tái)消息”。02*4.2.5
輸出方法3．彈窗輸出彈窗輸出是指在瀏覽器中彈出一個(gè)對話框，然后把要輸出的內(nèi)容展示出來。根據(jù)作用的不同，彈窗可分為警告框、確認(rèn)框、提示框。（1）警告框alert("要輸出的內(nèi)容")可以彈出窗口，顯示信息，并測試程序運(yùn)行效果?！臼纠?-2-4】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：alert("彈出框消息");【效果】當(dāng)相關(guān)聯(lián)的HTML頁面加載或觸發(fā)相關(guān)事件時(shí)，彈出警告框，內(nèi)容為“彈出框消息”。不同的瀏覽器打開開發(fā)人員工具視圖的方式略有不同。小提示（2）確認(rèn)框confirm("要輸出的內(nèi)容")用于用戶確認(rèn)某項(xiàng)信息。確認(rèn)框必須做出“確定”或“取消”操作后，才能讓程序繼續(xù)運(yùn)行。當(dāng)選擇“確定”按鈕則返回true，當(dāng)選擇“取消”按鈕則返回false。02*4.2.5
輸出方法【示例4-2-5】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：vara=confirm("您是大學(xué)生嗎？");if(a){ alert("歡迎您，您將是大學(xué)生俱樂部的一員！");}else{ alert("對不起，大學(xué)生俱樂部只接受大學(xué)生！")}【效果】頁面加載后，彈出確認(rèn)框“您是大學(xué)生嗎？”，如圖4-2-1（a）所示。當(dāng)選擇“確定”按鈕，則彈出“歡迎您，您將是大學(xué)生俱樂部的一員！”，如圖4-2-1（b）所示；當(dāng)選擇“取消”按鈕，則彈出“對不起，大學(xué)生俱樂部只接受大學(xué)生！”，如圖4-2-1（c）所示。圖4-2-1確認(rèn)框運(yùn)行效果（a）（b）
（c）02*4.2.5
輸出方法（3）提示框prompt("要輸出的內(nèi)容")用于彈出輸入信息框，提示用戶輸入某種類型的數(shù)據(jù)，可以接收用戶輸入數(shù)據(jù)，并返回輸入的信息。【示例4-2-6】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varname=prompt("請輸入您的姓名");alert("您的姓名是"+name);【效果】頁面加載后，彈出提示框，提示內(nèi)容為“請輸入您的姓名”，輸入姓名“閆妮”，如圖4-2-2（a）所示。此時(shí)，如果單擊“確定”按鈕，彈出“您的姓名是閆妮”，如圖4-2-2（b）所示；如果單擊“取消”按鈕，彈出“您的姓名是null”，如圖4-2-2（c）所示。（a）（b）
（c）圖4-2-2提示框運(yùn)行效果03*03JavaScript常量與變量03*4.3.1
常量每一種計(jì)算機(jī)語言都有自己的數(shù)據(jù)結(jié)構(gòu)。在JavaScript中，常量和變量是數(shù)據(jù)結(jié)構(gòu)的重要組成部分。常量是指在程序運(yùn)行的過程中值不發(fā)生改變的數(shù)據(jù)。例如，“123”是數(shù)值型常量，“JavaScript腳本”是字符串型常量，“ture”或“false”是布爾型常量等。常量主要用于為程序提供固定的值或精確的值，使用const進(jìn)行聲明，其語法格式如下：const常量名稱=常量值；03*4.3.2
變量變量是指程序中一個(gè)已經(jīng)命名的存儲(chǔ)單元，它的主要作用是為數(shù)據(jù)操作提供存放信息的容器。使用變量之前，首先需要了解變量的命名規(guī)則、聲明方法及引用方法。1．變量的命名規(guī)則在JavaScript中，變量的命名規(guī)則如下。（1）變量名必須以字母或下劃線（_）開頭，不能以數(shù)字開頭。（2）變量名可以包含字母、數(shù)字或下劃線（_），不能包含空格、加號或減號等符號。（3）變量名不能使用JavaScript中的關(guān)鍵字或保留字。（4）變量名嚴(yán)格區(qū)分大小寫。（5）見名知意，即變量名最好能夠描述出變量中存儲(chǔ)的信息含義。（6）可以依據(jù)個(gè)人習(xí)慣采用駝峰式命名法對變量命名。03*4.3.2
變量2．變量的聲明方法在JavaScript語言規(guī)范里，要求變量在使用之前進(jìn)行聲明，聲明變量的方法可以分為三種。（1）單變量聲明。聲明的變量只有一個(gè)，關(guān)鍵字為var或者let，它們的語法格式如下：var變量名稱;或者let變量名稱;駝峰式命名法是指混合使用大小寫字母來構(gòu)成變量和類的名字。分為小駝峰命名法和大駝峰命名法。（1）小駝峰命名法是指除第一個(gè)單詞之外，其他單詞首字母均大寫，常用于定義變量名。（2）大駝峰命名法與小駝峰命名法類似，只是它把第一個(gè)單詞的首字母也大寫了，常用于定義類名。03*高手點(diǎn)撥
var聲明的變量為全局變量并且可以重復(fù)聲明；let聲明的變量為局部變量且不可以重復(fù)聲明。變量的數(shù)據(jù)類型由賦給變量的值決定03*4.3.2
變量（2）多變量聲明。使用一個(gè)關(guān)鍵字var聲明多個(gè)變量，其語法格式如下：var變量名稱1,變量名稱2,…,變量名稱n;【示例4-3-1】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varName;【效果】該代碼聲明了一個(gè)變量Name?！臼纠?-3-2】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varname,gender;【效果】該代碼聲明了兩個(gè)變量name和gender，變量名稱之間用英文逗號“,”隔開。（3）邊聲明邊賦值。在聲明變量的同時(shí)對其賦值，即初始化，其語法格式如下：var變量名稱=變量值;var變量名稱1=變量值1,變量名稱2=變量值2,…,變量名稱n=變量值n;【示例4-3-3】
在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varName="張三";varname="李四",gender="男";【效果】該代碼聲明了三個(gè)變量Name、name和gender，并分別對它們賦了初值。03*4.3.2
變量【示例4-3-4】
在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varName="張三";varname="李四",gender="男";varstr="姓名："+name+"；性別："+gender;【效果】該代碼聲明了四個(gè)變量Name、name、gender和str。其中，變量str的值為字符串“姓名：李四；性別：男”。3．變量的引用方法在JavaScript語言規(guī)范里，變量在參與運(yùn)算時(shí)直接引用變量名稱即可。03*高手點(diǎn)撥
上述語句中變量name和gender參與了字符串運(yùn)算。04*04JavaScript數(shù)據(jù)類型04*4.4JavaScript數(shù)據(jù)類型在JavaScript語言規(guī)范里，數(shù)據(jù)類型分為基本數(shù)據(jù)類型和復(fù)合數(shù)據(jù)類型兩大類。基本數(shù)據(jù)類型包括數(shù)值型、字符串型、布爾型、未定義型和Null型；復(fù)合數(shù)據(jù)類型包括數(shù)組、對象和函數(shù)等。本節(jié)詳細(xì)介紹JavaScript的基本數(shù)據(jù)類型，復(fù)合數(shù)據(jù)類型會(huì)在后面的章節(jié)詳細(xì)介紹。JavaScript數(shù)據(jù)類型04*4.4.1數(shù)值型數(shù)值型是JavaScript中最基本的數(shù)據(jù)類型。在JavaScript中，所有的數(shù)值不區(qū)分整型和浮點(diǎn)型，全部都是由浮點(diǎn)型表示的。當(dāng)一個(gè)數(shù)字直接出現(xiàn)在JavaScript程序中時(shí)，稱它為數(shù)值直接量。JavaScript支持的數(shù)值直接量的形式有整型、浮點(diǎn)型。在任何數(shù)值直接量前面加負(fù)號（?）可以構(gòu)成負(fù)數(shù)，但是負(fù)號是一元求反運(yùn)算符，不是數(shù)值直接量語法的一部分。小提示1．整型整型數(shù)據(jù)有十進(jìn)制、八進(jìn)制和十六進(jìn)制。十進(jìn)制數(shù)據(jù)是一個(gè)由0～9組成的數(shù)字序列，如2、60、100等。JavaScript能夠處理十進(jìn)制的整型數(shù)據(jù)。04*4.4.1數(shù)值型雖然某些JavaScript實(shí)現(xiàn)允許采用八進(jìn)制格式的整型數(shù)據(jù)，但是有些實(shí)現(xiàn)不支持，所以在實(shí)際的應(yīng)用中最好不要使用八進(jìn)制格式的整型數(shù)據(jù)。小提示十六進(jìn)制數(shù)據(jù)是以“0X”或“0x”開頭，其后跟一個(gè)十六進(jìn)制的數(shù)字序列。該數(shù)字序列可以是0～9的某些數(shù)字，也可以是a（A）～f（F）的某些字母，還可以是數(shù)字和字母的組合，如0X123、0xfa、0X12ab等。這些數(shù)字和字母用來表示0～15的某個(gè)值。JavaScript能夠識別十六進(jìn)制的整型數(shù)據(jù)?！臼纠?-4-1】
在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varnumber1=32,number2=-36,number3=010,number4=0x10;alert(typeof32);alert(typeof-32);alert(typeof(number3));alert(typeof(number4));04*4.4.1數(shù)值型在JavaScript語言規(guī)范里，表達(dá)式的數(shù)據(jù)類型可以通過typeof方法判斷，其語法格式如下：typeof表達(dá)式或者typeof(表達(dá)式)小提示【效果】
頁面中出現(xiàn)彈窗，內(nèi)容為“number”，如圖4-4-1所示。單擊“確定”按鈕，接著出現(xiàn)同樣的彈窗（共出現(xiàn)4個(gè)）。測試變量的數(shù)據(jù)類型均為number類型。圖4-4-1含有“number”的彈窗04*4.4.1數(shù)值型2．浮點(diǎn)型浮點(diǎn)型數(shù)據(jù)可以帶有小數(shù)點(diǎn)，它的表示方法有兩種。（1）傳統(tǒng)計(jì)數(shù)法，將浮點(diǎn)數(shù)分為整數(shù)部分、小數(shù)點(diǎn)和小數(shù)部分，如1.5、2.445等。若整數(shù)部分為0，則可以省略整數(shù)部分，如.3、.456等。（2）科學(xué)計(jì)數(shù)法，即實(shí)數(shù)后跟字母e或E，后面加上一個(gè)帶正號或負(fù)號的整數(shù)指數(shù)，其中正號可以省略，如4e+3、3.2e45、1.12E?11等?！臼纠?-4-2】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varfloat1=32.12,float2=-38.00;alert(typeof32.12);alert(typeof(float2));【效果】頁面中出現(xiàn)彈窗，內(nèi)容為“number”，單擊“確定”按鈕，接著出現(xiàn)一個(gè)彈窗，內(nèi)容也為“number”，如圖4-4-1所示。測試變量的數(shù)據(jù)類型均為number類型。04*4.4.2
字符串型字符串是由0個(gè)或多個(gè)字符組成的序列，它可以包含大小寫字母、漢字、數(shù)字、標(biāo)點(diǎn)符號或其他字符。字符串是JavaScript用來表示文本的數(shù)據(jù)類型。程序中，字符串?dāng)?shù)據(jù)包含在單引號或雙引號中。如果字符串?dāng)?shù)據(jù)本身含有單引號或雙引號，則用來包含該數(shù)據(jù)的符號應(yīng)使用不同的引號。即如果字符串?dāng)?shù)據(jù)本身含有單引號，則使用雙引號包含該數(shù)據(jù)；如果字符串?dāng)?shù)據(jù)本身含有雙引號，則使用單引號包含該數(shù)據(jù)。簡單地理解，就是外雙內(nèi)單或外單內(nèi)雙。有時(shí)，字符串?dāng)?shù)據(jù)中使用的引號會(huì)導(dǎo)致匹配混亂，如字符串"字符串包含在單引號'或雙引號"中"。對于這種情況，必須使用轉(zhuǎn)義字符。轉(zhuǎn)義字符由“\”開始。使用轉(zhuǎn)義字符不僅可以避免引號匹配混亂問題的出現(xiàn)，還可以在字符串中添加不可顯示的特殊字符。常用的轉(zhuǎn)義字符如表4-4-1所示。04*4.4.2
字符串型轉(zhuǎn)義字符含
義轉(zhuǎn)義字符含
義轉(zhuǎn)義字符含
義\'英文單引號\b退格字符\n換行字符\tTab字符\\反斜杠字符\f換頁字符\r回車字符\"英文雙引號\eEsc字符表4-4-1常用轉(zhuǎn)移字符表多個(gè)字符串可以使用加號（+）進(jìn)行拼接，字符串和任何數(shù)據(jù)類型拼接的結(jié)果都是字符串型。04*4.4.2
字符串型【示例4-4-3】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varstring1="Thisisa'car'.",string2='Thatisa"boat".\n';varstring3="Thisisa'student'.";varstring4="Sheis"+18;alert(string1+string2+string3+string4);【效果】頁面中出現(xiàn)彈窗，內(nèi)容為字符串，如圖4-4-2所示。圖4-4-2含有字符串的彈窗04*【示例4-4-4】
在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varbool1=true,bool2=false;alert(bool1);【效果】頁面中出現(xiàn)彈窗，內(nèi)容為“true”，如圖4-4-3所示。4.4.3
布爾型布爾數(shù)據(jù)的類型只有兩個(gè)值，即true（真）和false（假），用于說明每個(gè)事物是真還是假。圖4-4-3含有“true”的彈窗04*【示例4-4-5】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：vardefine;alert(define);【效果】頁面中出現(xiàn)彈窗，內(nèi)容為“undefined”，如圖4-4-4所示。4.4.4
未定義型在變量只定義未賦值之前，變量均為未定義（undefined）型。
圖4-4-4含有“undefined”的彈窗未定義數(shù)據(jù)和字符串?dāng)?shù)據(jù)拼接的結(jié)果為字符串型，未定義數(shù)據(jù)和數(shù)值數(shù)據(jù)相加的結(jié)果為NaN，即NotaNumber。小提示04*【示例4-4-6】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varv=null;alert("Thisisa"+v);alert(18+v);【效果】頁面中出現(xiàn)彈窗，內(nèi)容為“Thisisanull”，單擊“確定”按鈕后，接著出現(xiàn)彈窗，內(nèi)容為“18”，如圖4-4-5所示。4.4.5
null型null是一個(gè)特殊的值，表示空值，用于定義空的或不存在的引用。null不等同于空的字符串（""）或0。
null和字符串?dāng)?shù)據(jù)拼接的結(jié)果為字符串型，null和數(shù)字相加的結(jié)果為數(shù)字本身。null的數(shù)據(jù)類型為object，學(xué)習(xí)了對象后再研究。小提示（a）
（b）圖4-4-5頁面依次彈出的兩個(gè)彈窗05*05JavaScript運(yùn)算符05*4.5JavaScript運(yùn)算符程序最基本的功能就是運(yùn)算。運(yùn)算符也稱操作符，是完成一系列操作的符號。運(yùn)算符用于將一個(gè)或幾個(gè)值進(jìn)行計(jì)算，然后生成一個(gè)新的值，這些參與計(jì)算的值稱為操作數(shù)。操作數(shù)可以是常量，也可以是變量。運(yùn)算符和操作數(shù)組成的式子稱為表達(dá)式。表達(dá)式的運(yùn)算規(guī)則基本是先運(yùn)算括號，再按照運(yùn)算符的優(yōu)先級從左到右依次進(jìn)行。表達(dá)式的值就是對操作數(shù)進(jìn)行運(yùn)算后的結(jié)果。根據(jù)操作數(shù)個(gè)數(shù)的不同，運(yùn)算符可以分為單目運(yùn)算符、雙目運(yùn)算符、三目運(yùn)算符。根據(jù)功能的不同，運(yùn)算符可以分為算術(shù)運(yùn)算符、關(guān)系運(yùn)算符、賦值運(yùn)算符、邏輯運(yùn)算符、條件運(yùn)算符。05*4.5.1
算術(shù)運(yùn)算符1．加減乘除（+?*/）加減乘除運(yùn)算符都屬于雙目運(yùn)算符，它們的運(yùn)算規(guī)則如同數(shù)學(xué)中的規(guī)則，即乘除的優(yōu)先級高于加減。算術(shù)運(yùn)算符包括加（+）、減（?）、乘（*）、除（/）、自加（++）、自減（??）、取余（%）運(yùn)算符?！臼纠?-5-1】
在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varnumber1=2.2;varnumber2=3;varnumber3=number1*2+number2/3;alert(number3);【效果】頁面中出現(xiàn)彈窗，內(nèi)容為運(yùn)算結(jié)果“5.4”。05*4.5.1
算術(shù)運(yùn)算符2．自加（++）自加運(yùn)算符屬于單目運(yùn)算符，它可以使變量的值自動(dòng)加1。該運(yùn)算符有兩種情況：（1）i++，表示在使用i之后，使i的值加1。（2）++i，表示在使用i之前，先使i的值加1?！臼纠?-5-2】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：vari=2.12;i++;alert(i);【效果】頁面中出現(xiàn)彈窗，內(nèi)容為運(yùn)算結(jié)果“3.12”。05*4.5.1
算術(shù)運(yùn)算符3．自減（??）自減運(yùn)算符屬于單目運(yùn)算符，它可以使變量的值自動(dòng)減1。該運(yùn)算符有兩種情況：（1）i??，表示在使用i之后，使i的值減1。（2）??i，表示在使用i之前，先使i的值減1。【示例4-5-3】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：vari=8;i--;alert(i);【效果】頁面中出現(xiàn)彈窗，內(nèi)容為運(yùn)算結(jié)果“7”。自減運(yùn)算一般不用于浮點(diǎn)數(shù)，因?yàn)橛糜诟↑c(diǎn)數(shù)時(shí)運(yùn)算結(jié)果不能被開發(fā)者控制。如果將【示例4-5-3】中的8修改為8.12，則彈出的運(yùn)算結(jié)果為7.119999999999999。小提示05*4.5.1
算術(shù)運(yùn)算符4．取余（%）取余運(yùn)算符屬于雙目運(yùn)算符，它是指整數(shù)a對整數(shù)b求余?！臼纠?-5-4】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varnumber1=38;varnumber2=number1%3;alert(number2);【效果】面中出現(xiàn)彈窗，內(nèi)容為運(yùn)算結(jié)果“2”。取余運(yùn)算的兩個(gè)操作數(shù)的數(shù)據(jù)類型都要求為整型。小提示05*4.5.2
關(guān)系運(yùn)算符1．小于（<）小于運(yùn)算符屬于雙目運(yùn)算符，用于比較操作數(shù)的關(guān)系。如果左邊的操作數(shù)小于右邊的操作數(shù)，則返回true；否則返回false。它主要應(yīng)用于數(shù)字型數(shù)據(jù)之間，也可以用于字符型和布爾型數(shù)據(jù)之間?！臼纠?-5-5】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varnumber=39;alert(18<number);【效果】面中出現(xiàn)彈窗，內(nèi)容為運(yùn)算結(jié)果“true”。關(guān)系運(yùn)算符主要用于測試操作數(shù)之間的關(guān)系，包括小于（<）、大于（>）、小于等于（<=）、大于等于（>=）、等于（==）、全等于（===）、不等于（!=）、非全等于（!==）。根據(jù)這些關(guān)系存在與否返回一個(gè)布爾型數(shù)值，即true或false。05*4.5.2
關(guān)系運(yùn)算符2．大于（>）大于運(yùn)算符屬于雙目運(yùn)算符，用于比較操作數(shù)的關(guān)系。如果左邊的操作數(shù)大于右邊的操作數(shù)，則返回true；否則返回false。它主要應(yīng)用于數(shù)字型數(shù)據(jù)之間，也可以用于字符型和布爾型數(shù)據(jù)之間?！臼纠?-5-6】
在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varnumber=39;alert(18>number);【效果】面中出現(xiàn)彈窗，內(nèi)容為運(yùn)算結(jié)果“false”。3．小于等于（<=）小于等于運(yùn)算符屬于雙目運(yùn)算符，用于比較操作數(shù)的關(guān)系。如果左邊的操作數(shù)小于或等于右邊的操作數(shù)，則返回true；否則返回false。它主要應(yīng)用于數(shù)字型數(shù)據(jù)之間，也可以用于字符型和布爾型數(shù)據(jù)之間。05*4.5.2
關(guān)系運(yùn)算符【示例4-5-7】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varnumber=39;alert(18
<=
number);【效果】面中出現(xiàn)彈窗，內(nèi)容為運(yùn)算結(jié)果“true”。4．大于等于（>=）大于等于運(yùn)算符屬于雙目運(yùn)算符，用于比較操作數(shù)的關(guān)系。如果左邊的操作數(shù)大于或等于右邊的操作數(shù)，則返回true；否則返回false。它主要應(yīng)用于數(shù)字型數(shù)據(jù)之間，也可以用于字符型和布爾型數(shù)據(jù)之間?！臼纠?-5-8】
在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varnumber=39;alert(18>=number);【效果】面中出現(xiàn)彈窗，內(nèi)容為運(yùn)算結(jié)果“false”。05*4.5.2
關(guān)系運(yùn)算符5．等于（==）等于運(yùn)算符屬于雙目運(yùn)算符，用于比較操作數(shù)的關(guān)系。如果左邊的操作數(shù)等于右邊的操作數(shù)，即模糊比較相等，則返回true；否則返回false。它主要應(yīng)用于數(shù)字型數(shù)據(jù)之間，也可以用于字符型和布爾型數(shù)據(jù)之間?！臼纠?-5-9】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varx=5;alert(x=="5");【效果】面中出現(xiàn)彈窗，內(nèi)容為運(yùn)算結(jié)果“true”。等于運(yùn)算符是兩個(gè)等于號，不同于賦值運(yùn)算符（=）。小提示05*4.5.2
關(guān)系運(yùn)算符6．全等于（===）
全等于運(yùn)算符屬于雙目運(yùn)算符，用于比較操作數(shù)的關(guān)系。如果左邊的操作數(shù)值與類型都等于右邊的操作數(shù)，即精準(zhǔn)比較相等，則返回true；否則返回false。它可以應(yīng)用于數(shù)字型、字符型和布爾型數(shù)據(jù)之間?！臼纠?-5-10】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varx=5;alert(x==="5");【效果】面中出現(xiàn)彈窗，內(nèi)容為運(yùn)算結(jié)果“false”。x變量為數(shù)字5，而右側(cè)是字符5。全等于運(yùn)算符是三個(gè)等于號，不同于賦值運(yùn)算符（=）。小提示05*4.5.2
關(guān)系運(yùn)算符7．不等于（!=）
不等于運(yùn)算符屬于雙目運(yùn)算符，用于比較操作數(shù)的關(guān)系。如果模糊比較左邊的操作數(shù)值不等于右邊的操作數(shù)，則返回true；否則返回false。它主要應(yīng)用于數(shù)字型數(shù)據(jù)之間，也可以用于字符型和布爾型數(shù)據(jù)之間。【示例4-5-11】
在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varx=5;alert(x!="5");【效果】面中出現(xiàn)彈窗，內(nèi)容為運(yùn)算結(jié)果“false”。05*4.5.2
關(guān)系運(yùn)算符8．不全等于（!==）
不全等于運(yùn)算符屬于雙目運(yùn)算符，用于比較操作數(shù)的關(guān)系。如果精準(zhǔn)比較左邊的操作數(shù)值或類型不等于右邊的操作數(shù)，則返回true；否則返回false。它可以應(yīng)用于數(shù)字型、字符型和布爾型數(shù)據(jù)之間?！臼纠?-5-12】
在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varx=5;alert(x!=="5");【效果】面中出現(xiàn)彈窗，內(nèi)容為運(yùn)算結(jié)果“true”。05*4.5.3
賦值運(yùn)算符賦值運(yùn)算可以分為簡單賦值運(yùn)算和復(fù)合賦值運(yùn)算。簡單賦值運(yùn)算是將賦值運(yùn)算符（=）右邊表達(dá)式的值保存到左邊的變量中。復(fù)合賦值運(yùn)算混合了其他運(yùn)算符（如算術(shù)運(yùn)算符）和賦值運(yùn)算符，如+=、?=、*=、/=等，表示將運(yùn)算符左邊的變量與右邊的變量或常量進(jìn)行運(yùn)算，然后將運(yùn)算結(jié)果賦值給左邊的變量?！臼纠?-5-13】
在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：vara=16,b=10;a+=b;//表示a=a+b=16+10=26alert(a);【效果】頁面中出現(xiàn)彈窗，內(nèi)容為運(yùn)算結(jié)果“26”。05*4.5.4
邏輯運(yùn)算符邏輯運(yùn)算符一般用于布爾型數(shù)據(jù)，通常邏輯運(yùn)算符與關(guān)系表達(dá)式配合使用。邏輯運(yùn)算符的返回值是true或false。邏輯運(yùn)算符包含與（&&）、或（||）、非（!）。1．邏輯與（&&）
邏輯與運(yùn)算符屬于雙目運(yùn)算符，其運(yùn)算對象均為真時(shí)，結(jié)果為真；運(yùn)算對象只要有一個(gè)為假，結(jié)果為假?！臼纠?-5-14】
在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：vara=12,b=16,c=23.89;alert(a>b&&b<c);alert(a<b&&b<c);【效果】頁面中依次彈出“false”和“true”。因?yàn)閍>b的結(jié)果是false，b<c的結(jié)果是true，真與假得假；a<b的結(jié)果是true，真與真得真。05*4.5.4
邏輯運(yùn)算符2．邏輯或（||）
邏輯與運(yùn)算符屬于雙目運(yùn)算符，其運(yùn)算對象均為真時(shí)，結(jié)果為真；運(yùn)算對象只要有一個(gè)為假，結(jié)果為假。【示例4-5-15】
在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：vara=12,b=16,c=23.89;alert(a>b||b<c);alert(a<b||b<c);【效果】頁面中依次彈出“true”和“true”。因?yàn)閍>b的結(jié)果是false，b<c的結(jié)果是true，真或假得真；a<b的結(jié)果是true，真或真得真。05*4.5.4
邏輯運(yùn)算符3．邏輯非（!）
邏輯非運(yùn)算符屬于單目運(yùn)算符，其運(yùn)算對象為真時(shí)，結(jié)果為假；運(yùn)算對象為假時(shí)，結(jié)果為真?！臼纠?-5-16】
在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：vara=12,b=16,c=23.89;alert(!(a>b));alert(!(b<c));【效果】頁面中依次彈出“true”和“false”。因?yàn)閍>b的結(jié)果是false，非假即真；b<c的結(jié)果是true，非真即假。05*4.5.5
條件運(yùn)算符在JavaScript語言規(guī)范里，提供了條件運(yùn)算符“?:”，它屬于三目運(yùn)算符，其語法格式如下：表達(dá)式1?表達(dá)式2:表達(dá)式3當(dāng)表達(dá)式1的值為真或非0時(shí)，結(jié)果為表達(dá)式2的值，否則結(jié)果為表達(dá)式3的值?！臼纠?-5-17】
在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：vara=12,b=16;varmax=a>b?a:b;alert(max);【效果】頁面中彈出“16”。因?yàn)閍=12，b=16，a>b不成立，結(jié)果為false，所以max的值為b的值16。06*06流程控制語句06*4.6.1
if語句1．if語句的基本結(jié)構(gòu)if語句的基本結(jié)構(gòu)如下：if(條件表達(dá)式){ 程序代碼段1;}else{ 程序代碼段2;}程序執(zhí)行的過程中，首先判斷括號中條件表達(dá)式的值，若條件表達(dá)式的值為true，則程序?qū)?zhí)行程序代碼段1；否則執(zhí)行程序代碼段2。JavaScript提供了多種流程控制語句，可以分為條件語句和循環(huán)語句。其中，條件語句包括if語句和switch語句，循環(huán)語句包括for語句、while語句和do…while語句。if語句是最基本、最常用的流程控制語句，它通過判斷條件表達(dá)式的值來選擇不同的執(zhí)行路線。06*4.6.1
if語句【示例4-6-1】隨機(jī)輸入兩個(gè)數(shù)，并判斷它們的最大值。在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：vara,b;a=prompt("請您輸入第1個(gè)數(shù)","");b=prompt("請您輸入第2個(gè)數(shù)","");varmax;if(a>b){ max=a;}else{ max=b;}alert("兩個(gè)數(shù)中的最大值是："+max);【效果】頁面中分別彈出兩個(gè)提示框，若在這兩個(gè)提示框中分別輸入數(shù)12和42，最終彈窗中顯示“兩個(gè)數(shù)中的最大值是：42”。06*4.6.1
if語句2．if語句的簡略形式當(dāng)if語句結(jié)構(gòu)中的一個(gè)程序代碼段為空時(shí)，其結(jié)構(gòu)相對簡略，如下所示：if(條件表達(dá)式){ 程序代碼段;}程序執(zhí)行的過程中，首先判斷括號中條件表達(dá)式的值，若條件表達(dá)式的值為true，則程序?qū)?zhí)行程序代碼段；否則直接跳過，執(zhí)行if條件語句之后的程序代碼?！臼纠?-6-2】判斷輸入的年份是否為閏年。在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：vara;a=prompt("請您輸入一個(gè)年份","");if((a%4==0&&a%100!=0)||(a%400==0)){ alert(a+"年是閏年");}【效果】頁面中彈出提示框，若輸入的年份為“2004”，則彈出“2004年是閏年”；若輸入的年份為“1900”，則不彈出任何信息。06*4.6.1
if語句3．if語句的嵌套和變形if語句不僅可以單獨(dú)使用，還可以嵌套使用，即在if語句結(jié)構(gòu)中的一個(gè)程序代碼段或兩個(gè)程序代碼段中嵌套其他的if語句，其語法格式如下：if(條件表達(dá)式1){ if(條件表達(dá)式2){ 程序代碼段1 }else{ 程序代碼段2 }}else{ if(條件表達(dá)式3){ 程序代碼段3 }else{ 程序代碼段4 }}if語句結(jié)構(gòu)根據(jù)每個(gè)程序代碼段是否為空又有很多變形，這里不再贅述。06*4.6.1
if語句【示例4-6-3】求輸入的三個(gè)數(shù)的最大值。在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：vara,b,c,max;a=prompt("請您輸入第1個(gè)數(shù)","");b=prompt("請您輸入第2個(gè)數(shù)","");c=prompt("請您輸入第3個(gè)數(shù)","");if(a>b){ if(a>c){ max=a; }else{ max=c; }}else{ if(b>c){ max=b; }else{ max=c; }}alert(a+"、"+b+"、"+c+"三個(gè)數(shù)中的最大值為"+max);【效果】頁面中依次彈出三個(gè)提示框，若依次輸入的數(shù)為28、12、49，則彈出“28、12、49三個(gè)數(shù)中的最大值為49”。06*4.6.2
switch語句switch語句是典型的多路分支語句，其作用與if語句基本相同，但是它比if語句更工整和清晰，且在編寫代碼的過程中也不容易出錯(cuò)。switch語句可以根據(jù)一個(gè)表達(dá)式的值，選擇執(zhí)行不同的分支，其語法格式如下：switch(表達(dá)式){ case常量表達(dá)式1: 程序代碼段1 break; case常量表達(dá)式2: 程序代碼段2 break; … case常量表達(dá)式n: 程序代碼段n break; default: 程序代碼段n+1}06*4.6.2
switch語句程序執(zhí)行的過程中，若表達(dá)式的值與常量表達(dá)式的值相等，則執(zhí)行此case分支后面的程序代碼段，接著跳出switch語句。若表達(dá)式的值與常量表達(dá)式的值都不相等，則執(zhí)行default后面的程序代碼段?！臼纠?/p>
4-6-4】
求一個(gè)百分制成績對應(yīng)的等級。在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varchengJi,b,dengJi; chengJi=prompt("請您輸入一個(gè)百分制成績",""); b=Math.floor(chengJi/10); switch(b){ case10: case9: dengJi="A"; break; case8: dengJi="B"; break; case7: dengJi="C"; break;
06*4.6.2
switch語句 dengJi="D"; break; default: dengJi="E"; } alert(chengJi+"對應(yīng)的等級為"+dengJi);【效果】頁面中彈出一個(gè)提示框，若輸入的百分制成績?yōu)椤?8”，則彈出“98對應(yīng)的等級為A”。switch語句結(jié)構(gòu)中，每一個(gè)case分支中的程序代碼段后必須添加break語句。若【示例4-6-4】中每個(gè)break語句均漏寫，則無論輸入的成績?yōu)楹沃担绦蜃罱K都會(huì)執(zhí)行default后面的程序代碼段。小提示06*4.6.3
for語句for語句又稱計(jì)次循環(huán)語句，一般用于已知循環(huán)次數(shù)的情況，在JavaScript中應(yīng)用比較廣泛。for語句的語法格式如下：for(初始化循環(huán)變量;終止循環(huán)條件表達(dá)式;循環(huán)變量自加1或自減1){ 循環(huán)體}程序從循環(huán)變量初值開始運(yùn)行循環(huán)體，每執(zhí)行完一次循環(huán)體，循環(huán)變量就增加1或減去1，直到循環(huán)變量不符合終止循環(huán)條件表達(dá)式?！臼纠?-6-5】求一個(gè)自然數(shù)的階乘。在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varn,jieCheng=1;n=prompt("請輸入一個(gè)自然數(shù)"
,
"");for(vari=1;i<=n;i
++){ jieCheng=jieCheng*i;}alert(n+"!"+"="+jieCheng);06*4.6.3
for語句【效果】頁面中彈出提示框，若輸入的自然數(shù)為“6”，則彈出“6!=720”。此外，for語句還有一個(gè)特殊的形式，如下所示：for(聲明變量in集合類變量){ 循環(huán)體}該形式的for語句用于遍歷集合類變量，每次循環(huán)將集合類變量中的每一個(gè)元素依次賦值給聲明變量，并執(zhí)行循環(huán)體，遍歷完集合類變量的所有元素后，循環(huán)結(jié)束?！臼纠?-6-6】
求一個(gè)數(shù)字?jǐn)?shù)組的元素之和。在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varnumbers=[98,87,73,94],sum=0;for(variinnumbers){ sum=sum+numbers[i];}alert("總分為："+sum);06*4.6.3
for語句【效果】頁面中彈出“總分為：352”?！臼纠?-6-6】中的代碼“numbers=[98,87,73,94]”表示數(shù)組，頁面中彈出的總分352是該數(shù)組中四個(gè)元素的和。數(shù)組的內(nèi)容將在后面的章節(jié)詳細(xì)介紹。小提示06*4.6.4
while語句while語句又稱前測試循環(huán)語句，它在執(zhí)行循環(huán)體前測試條件。若條件成立則進(jìn)入循環(huán)，執(zhí)行循環(huán)體；否則，跳出循環(huán)，執(zhí)行while語句后面的第一個(gè)語句。while語句的語法格式如下：while(條件表達(dá)式){ 循環(huán)體}【示例4-6-7】
在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varnumbers=
[98,87,73,94],sum
=
0,i
=
0;while(i<4){ sum=numbers[i]+sum;
i++;}alert("總分為："+sum);【效果】實(shí)現(xiàn)效果與【示例4-6-6】一樣，頁面中彈出“總分為：352”。06*4.6.5
do…while語句do…while語句又稱后測試循環(huán)語句，它先執(zhí)行循環(huán)體再測試條件。若條件成立則進(jìn)入循環(huán)，執(zhí)行循環(huán)體；否則，跳出循環(huán)，執(zhí)行do…while語句后面的第一個(gè)語句。do…while語句的語法格式如下：do{ 循環(huán)體}while(條件表達(dá)式)【示例4-6-8】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varnumbers=[98,87,73,94],sum=0,i=0;do{ sum=numbers[i]+sum; i++;}while(i<4)alert("總分為："+sum);【效果】實(shí)現(xiàn)效果與【示例4-6-6】一樣，頁面中彈出“總分為：352”。do…while語句與while語句的不同是do…while語句至少會(huì)執(zhí)行一次循環(huán)體，而while語句不一定會(huì)執(zhí)行循環(huán)體。小提示07*07函數(shù)07*4.7
函
數(shù)在JavaScript中，函數(shù)就是實(shí)現(xiàn)某特定功能的一組代碼，是實(shí)現(xiàn)模塊化程序設(shè)計(jì)的基礎(chǔ)。使用函數(shù)不僅可以提高代碼重復(fù)使用的頻率，還可以讓代碼更簡潔，從而大大提高工作效率。在JavaScript程序中，如果一段具有特定功能的程序代碼需要多次使用，就可以先將這段代碼定義為函數(shù)，然后在需要這個(gè)功能的地方調(diào)用函數(shù)即可。函數(shù)07*4.7.1
函數(shù)的定義及函數(shù)的形參
函數(shù)的定義其實(shí)就是將完成某一特定功能的代碼段劃分在一起，為其整體命名，并定義好入口參數(shù)。在JavaScript中，函數(shù)的定義方式比較靈活，每個(gè)函數(shù)都是作為一個(gè)對象被維護(hù)和運(yùn)行的。定義函數(shù)的常用方法有以下幾種。（1）使用function語句直接定義函數(shù)，其語法格式如下：function函數(shù)名(參數(shù)1,參數(shù)2,…){函數(shù)體return返回值;}01（2）將一匿名函數(shù)值賦給一個(gè)變量，其語法格式如下：var函數(shù)名=function(參數(shù)1,參數(shù)2,…){函數(shù)體return返回值;}0207*4.7.1
函數(shù)的定義及函數(shù)的形參（3）將函數(shù)“函數(shù)名2”的返回值賦給變量“函數(shù)名1”，其語法格式如下：var函數(shù)名1=function函數(shù)名2(參數(shù)1,參數(shù)2,…){函數(shù)體return返回值;}0304（4）聲明“函數(shù)名”為一個(gè)對象，其語法格式如下：var函數(shù)名=newFunction();通過函數(shù)對象的性質(zhì)，可以方便地將函數(shù)的值賦給變量，也可將函數(shù)的值作為參數(shù)進(jìn)行傳遞。小提示
形參
：定義函數(shù)時(shí)，指定的參數(shù)（如“參數(shù)1,參數(shù)2,…”）稱為形式參數(shù)。它們可以直接使用，不需要定義。形參可以是一個(gè)或多個(gè)（多個(gè)參數(shù)之間用英文逗號“,”隔開），其作用是調(diào)用函數(shù)時(shí)，可以為被調(diào)用的函數(shù)傳遞一個(gè)或多個(gè)值。函數(shù)不一定有返回值，即函數(shù)定義中不一定含有語句“return返回值;”。07*4.7.2
函數(shù)的調(diào)用及函數(shù)的實(shí)參函數(shù)定義之后并不會(huì)自動(dòng)執(zhí)行，要執(zhí)行函數(shù)，就需要在特定的位置調(diào)用函數(shù)。調(diào)用函數(shù)就像啟動(dòng)機(jī)器一樣，機(jī)器本身不會(huì)自行工作，只有啟動(dòng)機(jī)器，機(jī)器才能執(zhí)行相應(yīng)的操作。
調(diào)用函數(shù)需要?jiǎng)?chuàng)建調(diào)用語句，其語法格式如下：函數(shù)名(傳遞給函數(shù)的參數(shù)1,傳遞給函數(shù)的參數(shù)2,…)
實(shí)參：調(diào)用函數(shù)時(shí)，實(shí)際傳遞給函數(shù)的參數(shù)（如“傳遞給函數(shù)的參數(shù)1,傳遞給函數(shù)的參數(shù)2,…”）稱為實(shí)際參數(shù)。通常，在定義函數(shù)時(shí)使用了多少個(gè)形參，在調(diào)用函數(shù)時(shí)也必須給出多少個(gè)實(shí)參，且多個(gè)實(shí)參之間用英文逗號“,”隔開。在程序執(zhí)行的過程中，函數(shù)的調(diào)用其實(shí)就是將實(shí)參傳遞給函數(shù)的形參，然后將函數(shù)體運(yùn)行一次，直到函數(shù)體結(jié)束。如果有返回值，則將值返回；如果沒有返回值，則直接執(zhí)行調(diào)用函數(shù)語句之后的語句。07*4.7.2
函數(shù)的調(diào)用及函數(shù)的實(shí)參【示例4-7-1】定義并調(diào)用一個(gè)求三個(gè)數(shù)中最大值的函數(shù)。在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：functionmaxS(a,b,c){ //定義函數(shù)maxS varmax; if(a>b){ if(a>c){ max=a; }else{ max=c; } }else{ if(b>c){ max=b; }else{ max=c; } } returnmax;}alert(maxS(12,34,9)); //調(diào)用函數(shù)maxS【效果】頁面中彈出12、34、9三個(gè)數(shù)中的最大值“34”。07*4.7.2
函數(shù)的調(diào)用及函數(shù)的實(shí)參【示例4-7-2】
定義并調(diào)用一個(gè)求三個(gè)數(shù)中最小值的函數(shù)。在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varminS=function(a,b,c){ //定義函數(shù)minS varmin; if(a<b){ if(a<c){ min=a; }else{ min=c; } }else{ if(b<c){ min=b; }else{ min=c; } } returnmin;}alert(minS(12,34,9)); //調(diào)用函數(shù)minS【效果】頁面中彈出12、34、9三個(gè)數(shù)中的最小值“9”。07*4.7.2
函數(shù)的調(diào)用及函數(shù)的實(shí)參【示例4-7-3】定義并調(diào)用一個(gè)求自然數(shù)階乘的函數(shù)。在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varjieCheng=functionjieCheng1(n){ //定義函數(shù)jieCheng varjieCheng=1; for(vari=1;i<=n;i++){ jieCheng=jieCheng*i; } returnjieCheng;}alert(jieCheng(6)); //調(diào)用函數(shù)jieCheng【效果】頁面中彈出6的階乘結(jié)果“720”。07*4.7.2
函數(shù)的調(diào)用及函數(shù)的實(shí)參【示例4-7-4】
定義并調(diào)用一個(gè)求余函數(shù)。在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varmod=newFunction("n","k","return(n%k)"); //定義函數(shù)modalert(mod(12,5)); //調(diào)用函數(shù)mod【效果】頁面中彈出12對5求余的結(jié)果“2”?！臼纠?-7-4】中，“n”和“k”表示函數(shù)的參數(shù)（形參），“n%k”表示函數(shù)體，“return(n%k)”表示函數(shù)的返回值。小提示07*4.7.3
變量的作用域在JavaScript中，變量根據(jù)作用域的不同可分為全局變量和局部變量。全局變量是定義在函數(shù)外部的變量，其作用范圍為整個(gè)HTML文檔；局部變量是定義在函數(shù)體內(nèi)部的變量，其作用范圍僅限于函數(shù)體內(nèi)部。例如，下面程序代碼中的變量a為全局變量，變量b為局部變量。vara="我是全局變量";functiontest(m,n){ varb="我是局部變量"; …07*高手點(diǎn)撥
【示例4-7-1】中的變量max、【示例4-7-2】中的變量min、【示例4-7-3】中的變量jieCheng均為局部變量。07*4.7.4
函數(shù)的嵌套在JavaScript中，允許函數(shù)進(jìn)行嵌套，也就是說在一個(gè)函數(shù)的函數(shù)體中可以使用其他函數(shù)。使用嵌套函數(shù)可以在函數(shù)體內(nèi)部定義函數(shù)或調(diào)用函數(shù)。（1）在函數(shù)體內(nèi)部定義函數(shù)的語法格式如下：function函數(shù)名1(){ function函數(shù)名2(){ //函數(shù)體內(nèi)部定義函數(shù)名2 代碼段 } 代碼段}在函數(shù)體內(nèi)部定義的函數(shù)只能作用于函數(shù)體自身，對函數(shù)體外部沒有任何作用。小提示（2）在函數(shù)體內(nèi)部調(diào)用函數(shù)的語法格式如下：function
函數(shù)名1(){
代碼段}function函數(shù)名2(){
函數(shù)名1(); //函數(shù)體內(nèi)部調(diào)用函數(shù)名1}07*4.7.5
時(shí)間函數(shù)在JavaScript中，除了自定義函數(shù)，還有內(nèi)置函數(shù)。JavaScript的內(nèi)置時(shí)間函數(shù)可以支持時(shí)間延遲和時(shí)間間隔，詳細(xì)介紹如下所示。（1）時(shí)間延遲函數(shù)setTimeout()，表示延遲一定時(shí)間后開始執(zhí)行延時(shí)行為，其語法格式如下：var變量名稱=setTimeout(function(){延時(shí)行為},延時(shí)時(shí)間);（2）清除時(shí)間延遲函數(shù)clearTimeout()，用于清除延時(shí)函數(shù)變量，其語法格式如下：clearTimeout(延時(shí)函數(shù)變量);（3）時(shí)間間隔函數(shù)setInterval()，表示每間隔一定的時(shí)間運(yùn)行一次間隔行為，且將該對象賦值給指定變量，所得變量數(shù)據(jù)類型為對象（Object），其語法格式如下：var變量名稱=setInterval(function(){間隔行為},間隔時(shí)間);（4）清除時(shí)間間隔函數(shù)clearInterval()，用于清除時(shí)間間隔函數(shù)賦值的對象，其語法格式如下：clearInterval(間隔時(shí)間函數(shù)對象名稱)08*08數(shù)組08*4.8
CSS盒子模型數(shù)組是一組數(shù)據(jù)的集合，是JavaScript中用來存儲(chǔ)和操作有序數(shù)據(jù)集的數(shù)據(jù)結(jié)構(gòu)。一個(gè)數(shù)組中可以包含多個(gè)元素，每個(gè)元素的類型可以是不同的。數(shù)組中元素的類型可以是數(shù)值型、字符串型、布爾型、數(shù)組型、對象型等。數(shù)組08*4.8.1
數(shù)組的聲明聲明數(shù)組可以采用賦值法、構(gòu)造法，也可以直接將捕獲的對象數(shù)組賦值給變量。（1）采用賦值法聲明數(shù)組的語法格式如下：var
數(shù)組變量名=[值1,值2,…,值n];【示例4-8-1】
聲明數(shù)組charS，代碼如下：varcharS=["a","b","c","d","e","f","g","h","i","j"];（2）采用構(gòu)造法聲明數(shù)組的語法格式如下：var
數(shù)組變量名=newArray();【示例4-8-2】
聲明數(shù)組persons，代碼如下：varpersons=newArray();（3）直接將捕獲的對象數(shù)組賦值給變量，其語法格式如下：var
數(shù)組變量名=document.類或標(biāo)簽選擇器方法名();【示例4-8-3】
將捕獲的對象數(shù)組賦值給變量text，代碼如下：vartext=document.getElementsByClassName("text");08*4.8.2
數(shù)組元素的引用每個(gè)數(shù)組元素都有一個(gè)索引號（數(shù)組的下標(biāo)），通過索引號可以方便地引用數(shù)組元素。數(shù)組的下標(biāo)從0開始編號。例如，第一個(gè)數(shù)組元素的下標(biāo)是0，第二個(gè)數(shù)組元素的下標(biāo)是1，以此類推。引用數(shù)組元素的語法格式如下：數(shù)組名稱[下標(biāo)值]【示例4-8-4】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varcharS=["a","b","c","d","e","f","g","h","i","j"];alert(charS[2]);【效果】頁面中彈出charS數(shù)組中的第3個(gè)元素的值“c”。08*4.8.3
數(shù)組的屬性和方法數(shù)組的屬性和方法有很多，常用的屬性是length，它表示數(shù)組元素的個(gè)數(shù)，其語法格式如下：數(shù)組名稱.length常用的方法是sort()，用于對數(shù)組元素進(jìn)行排序，其語法格式如下：數(shù)組名稱.sort()【示例4-8-5】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varnums=[68,79,32,17,90];alert(nums.sort());【效果】頁面中彈出nums數(shù)組元素排序后的結(jié)果“17,32,68,79,90”。08*4.8.4
數(shù)組的遍歷在JavaScript中，通常使用for語句遍歷數(shù)組元素，語法格式如下：for(vari=0;i<數(shù)組名稱.length;i++){數(shù)組名稱[i]相關(guān)表達(dá)式}【示例4-8-6】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下：window.onload=function(){ vartext=document.getElementsByClassName("text"); varstringS=["衣服","帽子","褲子","鞋","圍巾","手套","頭飾"]; for(vari=0;i<stringS.length;i++){ text[i].innerHTML=stringS[i]; }}08*4.8.4
數(shù)組的遍歷在HTML文檔<body>標(biāo)簽內(nèi)輸入以下7個(gè)相同的<div>標(biāo)簽，代碼如下：<divclass="text"></div>…<divclass="text"></div>【效果】頁面加載后，程序獲取類名為“text”的7個(gè)div盒子，通過for語句遍歷text數(shù)組和字符串?dāng)?shù)組stringS，并將stringS中的元素值一一賦給text數(shù)組，最終7個(gè)div盒子在頁面上的顯示效果如圖4-8-1所示。圖4-8-1頁面顯示效果小提示若想要對頁面元素進(jìn)行操作，必須要在窗口加載事件中完成。【示例4-8-6】中的for語句還可以寫成以下形式：for(iintext){ text[i].innerHTML=stringS[i];}09*09對象09*4.9
對象對象的概念來自對客觀世界的認(rèn)識，用于描
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年生物質(zhì)能發(fā)電項(xiàng)目設(shè)計(jì)與施工合同
- 2024年股權(quán)轉(zhuǎn)讓細(xì)化協(xié)議
- 2024年耐磨輸送帶購銷合作合同版B版
- 2024年股權(quán)質(zhì)押協(xié)議范本一
- 2024年研發(fā)外包保密協(xié)議
- 2024明星代言協(xié)議書：年度明星代言服裝品牌合作協(xié)議3篇
- 2024年科幻微電影拍攝制作與特效研發(fā)合同3篇
- 2024正規(guī)蘋果產(chǎn)品包裝與運(yùn)輸服務(wù)合同范本3篇
- 2024年牲畜屠宰企業(yè)收購合同書樣本3篇
- 2024某餐飲企業(yè)與某食品加工廠關(guān)于食品加工的長期合同
- 江西省贛州市2023-2024學(xué)年高一上學(xué)期期末考試化學(xué)試題 附答案
- 消化道出血護(hù)理常規(guī)課件
- 2024年物流運(yùn)輸公司全年安全生產(chǎn)工作計(jì)劃例文（4篇）
- 貴州省銅仁市2023-2024學(xué)年高二上學(xué)期期末質(zhì)量監(jiān)測試題 地理 含答案
- 2024-2025學(xué)年二年級語文上冊期末非紙筆試卷二（統(tǒng)編版）
- 糖尿病老年患者健康指導(dǎo)
- 2024年城市更新項(xiàng)目回遷安置合同
- 期末卷（一）-2023-2024學(xué)年高一年級地理上學(xué)期高頻考題期末測試卷（江蘇專用）（原卷版）
- 外研版（三起）（2024）小學(xué)三年級上冊英語全冊教案
- 初一《皇帝的新裝》課本劇劇本
- 幼兒園意識形態(tài)風(fēng)險(xiǎn)點(diǎn)排查報(bào)告
評論
0/150
提交評論