《Web編程基礎(chǔ)》課件第5章 JavaScript基礎(chǔ)

目標(biāo)-1-了解JavaScript的歷史及特點(diǎn)掌握J(rèn)avaScript常用的數(shù)據(jù)類型掌握J(rèn)avaScript變量的定義掌握J(rèn)avaScript中的操作符及表達(dá)式掌握J(rèn)avaScript中的分支、迭代結(jié)構(gòu)掌握J(rèn)avaScript中內(nèi)置函數(shù)的使用掌握J(rèn)avaScript的函數(shù)的定義及使用JavaScript簡(jiǎn)介JavaScript是一種基于對(duì)象（Object）和事件驅(qū)動(dòng)（EventDriven）的腳本語(yǔ)言，使用它的主要目的是增強(qiáng)HTML頁(yè)面的動(dòng)態(tài)交互性，其特點(diǎn)如下：嵌套在HTML中環(huán)境支持解釋執(zhí)行弱類型語(yǔ)言基于對(duì)象事件驅(qū)動(dòng)跨平臺(tái)性-2-JavaScript是SunMicroSystems和NetScape共同開(kāi)發(fā)的一種重要的腳本語(yǔ)言，用于創(chuàng)建動(dòng)態(tài)效果的、人機(jī)交互的網(wǎng)頁(yè)。JavaScript基本結(jié)構(gòu)JavaScript基本結(jié)構(gòu)JavaScript代碼是通過(guò)<script>標(biāo)簽嵌入HTML文檔中的。可以將多個(gè)<script>腳本嵌入到一個(gè)文檔中。

基本結(jié)構(gòu)如下：編寫(xiě)JavaScript步驟利用任何編輯器（如Dreamweaver或記事本）創(chuàng)建HTML文檔。在HTML文檔中通過(guò)<script>標(biāo)簽嵌入JavaScript代碼。將HTML文檔保存為擴(kuò)展名是“.html”或“.htm”的文件，并查看結(jié)果。示例：5.1FirstJSEG.html-3-<scriptlanguage="javascript"> JavaScript語(yǔ)句</script>引用JavaScript文件引用JS文件

當(dāng)JavaScript腳本比較復(fù)雜或代碼過(guò)多時(shí)，可將JavaScript代碼保存以“.js”為后綴的文件，并通過(guò)<script>標(biāo)簽把“.js”文件導(dǎo)入到HTML文檔中。語(yǔ)法格式如下：示例：5.2FirstImportJSEG.html-4-<scripttype="text/javascript"src="url"></script>JavaScript數(shù)據(jù)類型數(shù)據(jù)類型

JavaScript中的數(shù)據(jù)類型：數(shù)據(jù)類型說(shuō)明數(shù)值型JavaScript語(yǔ)言本身并不區(qū)分整型和浮點(diǎn)型數(shù)值，所有的數(shù)值在內(nèi)部都由浮點(diǎn)型表示字符串類型使用單引號(hào)或雙引號(hào)括起來(lái)的0個(gè)或多個(gè)字符布爾型布爾型常量只有兩種值，即true或false函數(shù)JavaScript函數(shù)是一種特殊的對(duì)象數(shù)據(jù)類型，因此函數(shù)可以被存儲(chǔ)在變量、數(shù)組或?qū)ο笾?。此外，函?shù)還可以作為參數(shù)傳遞給其他函數(shù)。對(duì)象型已命名數(shù)據(jù)的集合，這些已命名的數(shù)據(jù)通常被作為對(duì)象的屬性引用。常用的對(duì)象有String、Date、Math、Array等null是JavaScript中的一個(gè)特殊值，它表示“無(wú)值”，它和0不同undefined表示該變量尚未被聲明或未被賦值，或者使用了一個(gè)并不存在的對(duì)象屬性-5-常量常量是指在程序中值不能改變的數(shù)據(jù)，分為以下幾類：數(shù)值型常量 如123、-0xAF、072、-123.456字符串型常量 如"JavaScript"、"100"、'JavaScript'

布爾型常量 可取值true和false-6-JavaScript中字符串可以用雙引號(hào)和單引號(hào)兩種方式聲明變量變量變量是指程序中一個(gè)已經(jīng)命名的存儲(chǔ)單元命名規(guī)則變量名必須以字母或下劃線開(kāi)頭，其后可以跟數(shù)字、字母或下劃線等；變量名不能包含空格、加號(hào)、減號(hào)等特殊符號(hào)；JavaScript的變量名嚴(yán)格區(qū)分大小寫(xiě)；變量名不能使用JavaScript中的保留關(guān)鍵字。字符串型常量聲明變量變量用關(guān)鍵字var進(jìn)行聲明示例如下：-7-var變量1[,變量2,...];varv1,v2;在JavaScript中，可以使用分號(hào)代表一個(gè)語(yǔ)句的結(jié)束，如果每個(gè)語(yǔ)句都在不同的行中，那么分號(hào)可以省略；如果多個(gè)語(yǔ)句在同一行中，那么分號(hào)就不能省略變量類型變量的類型JavaScript是一種弱類型的語(yǔ)言，變量的類型不像其它語(yǔ)言一樣在聲明時(shí)直接指定，對(duì)于同一變量可以賦不同類型的值。示例代碼如下：-8-<scriptlanguage="javascript"> varx=100; x="javascript";</script>全局變量變量的作用域變量的作用域是指變量的有效范圍在JavaScript中根據(jù)變量的作用域可以分為全局變量和局部變量全局變量在函數(shù)之外聲明的變量叫做全局變量。示例代碼如下：-9-<script> varx=5//定義全局變量

functionmyFunction(){ //函數(shù)體

}</script>局部變量局部變量在函數(shù)體內(nèi)聲明的變量叫做局部變量。示例代碼如下：示例：5.D.2VariableEG.html-10-<script> functionmyFunction(){ varx=5//定義局部變量

......省略

}</script>注釋注釋可分為單行注釋和多行注釋單行注釋單行注釋使用“//”符號(hào)進(jìn)行標(biāo)識(shí)，其后的文字都不被程序解釋執(zhí)行。語(yǔ)法格式如下：多行注釋多行注釋使用“/*…*/”進(jìn)行標(biāo)識(shí)，其中的文字同樣不被程序解釋執(zhí)行。語(yǔ)法格式如下：-11-//這是單行程序代碼的注釋/*這是多行程序注釋*/算術(shù)運(yùn)算符JavaScript中運(yùn)算符主要分為：算術(shù)運(yùn)算符、比較運(yùn)算符和邏輯運(yùn)算符算術(shù)運(yùn)算符算術(shù)運(yùn)算符是用于完成加法、減法、乘法、除法、遞增、遞減等運(yùn)算的運(yùn)算符。算術(shù)運(yùn)算符如下表所示：示例：5.4MathEG.html運(yùn)算符說(shuō)明+用于兩個(gè)數(shù)相加-用于兩個(gè)數(shù)相減*用于兩個(gè)數(shù)相乘/用于兩個(gè)數(shù)相除%除法運(yùn)算中的取余數(shù)++遞增值（即給原來(lái)的值加1）--遞減值（即給原來(lái)的值減1）-12-比較運(yùn)算符比較運(yùn)算符比較運(yùn)算符用于比較數(shù)值、字符串或邏輯變量等，并將比較結(jié)果以邏輯值（true或false）的形式返回。比較運(yùn)算符如下表所示：示例：5.5CompareEG.html運(yùn)算符說(shuō)明==比較兩邊的值是否相等!=比較兩邊的值是否不相等>比較左邊的值是否大于右邊的值<比較左邊的值是否小于右邊的值>=比較左邊的值是否大于等于右邊的值<=比較左邊的值是否小于等于右邊的值===比較兩邊的值是否嚴(yán)格相等!==比較兩邊的值是否嚴(yán)格不相等-13-邏輯運(yùn)算符邏輯運(yùn)算符邏輯運(yùn)算符主要用于條件表達(dá)式中，采用邏輯值作為操作數(shù)，其返回值也是邏輯值。邏輯運(yùn)算符如下表所示：示例：5.6LogicEG.html運(yùn)算符說(shuō)明&&邏輯與，當(dāng)左右兩邊的操作數(shù)都為true時(shí)，返回true，否則返回false||邏輯或，當(dāng)左右兩邊的操作數(shù)都為false時(shí)，返回false，否則返回true!邏輯非，當(dāng)操作數(shù)為true時(shí)返回false，反之返回true?:三目運(yùn)算符：操作數(shù)?結(jié)果1:結(jié)果2，若操作數(shù)為true則返回結(jié)果1，反之返回結(jié)果2-14-流程控制-分支結(jié)構(gòu)JavaScript中的流程控制有：分支結(jié)構(gòu)：if-else、switch迭代結(jié)構(gòu)：while、do-while、for轉(zhuǎn)移語(yǔ)句：break、continue、return分支結(jié)構(gòu)分支結(jié)構(gòu)是根據(jù)假設(shè)的條件成立與否，再?zèng)Q定執(zhí)行什么樣語(yǔ)句的結(jié)構(gòu)，它的作用是讓程序更具有選擇性分支結(jié)構(gòu)包括if語(yǔ)句和switch語(yǔ)句-15-if語(yǔ)句if-else示例：5.7MaxEG.html嵌套if示例：5.8YearEG.html-16-if(condition)statement1;[elsestatement2;]if(condition){statement1;}elseif(condition){statement2;}else{statement;}switch語(yǔ)句switch一個(gè)switch語(yǔ)句由一個(gè)控制表達(dá)式和一個(gè)由case標(biāo)記表述的語(yǔ)句塊組成。語(yǔ)法結(jié)構(gòu)如下：示例：5.9SwitchCaseEG.html-17-switch(expression){casevalue1: statement1; break;casevalue2: statement2; break;......casevalueN: statemendN; break;[default:defaultStatement;]}流程控制-迭代結(jié)構(gòu)迭代結(jié)構(gòu)迭代結(jié)構(gòu)的作用是反復(fù)執(zhí)行一段代碼，直到滿足終止循環(huán)的條件為止JavaScript中迭代結(jié)構(gòu)包括while語(yǔ)句do-while語(yǔ)句for語(yǔ)句for-in語(yǔ)句-18-while和do-while語(yǔ)句

while語(yǔ)句while語(yǔ)句是常用的迭代語(yǔ)句，語(yǔ)法結(jié)構(gòu)如下:示例：5.10SumEG.htmldo-while語(yǔ)句do-while用于循環(huán)至少執(zhí)行一次的情形，語(yǔ)法結(jié)構(gòu)如下:示例：5.11SumEG1.html-19-while(condition){statement;}do{statement;}while(condition);for和for-in語(yǔ)句for語(yǔ)句for語(yǔ)句是最常見(jiàn)的迭代語(yǔ)句，一般用在循環(huán)次數(shù)已知的情形，結(jié)構(gòu)如下:示例：5.12PrintTriangle.htmlfor-in語(yǔ)句for-in是JavaScript提供的一種特殊的循環(huán)方式，它來(lái)遍歷一個(gè)對(duì)象的所有用戶定義的屬性或者一個(gè)數(shù)組的所有元素。示例：5.13RankEG.html-20-for(initialization;condition;update){statements;}for(propertyinObject){statements;}流程控制-轉(zhuǎn)移語(yǔ)句轉(zhuǎn)移語(yǔ)句用在選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)中，可以控制程序執(zhí)行的順序break語(yǔ)句在switch語(yǔ)句中，用于終止case語(yǔ)句序列，跳出switch語(yǔ)句。在循環(huán)結(jié)構(gòu)中，用于終止循環(huán)語(yǔ)句序列，跳出循環(huán)結(jié)構(gòu)。示例：5.14BreakEG.html

continue語(yǔ)句continue語(yǔ)句用于for、while、do-while和for-in等循環(huán)體中時(shí)，常與if條件語(yǔ)句一起使用，用來(lái)加速循環(huán)。滿足條件時(shí)，跳過(guò)本次循環(huán)剩余的語(yǔ)句，強(qiáng)行檢測(cè)判定條件以決定是否進(jìn)行下一次循環(huán)。示例：5.15ContinueEG.htmlreturn語(yǔ)句returnreturn表達(dá)式示例：5.16ReturnEG.html-21-內(nèi)置函數(shù)內(nèi)置函數(shù)JavaScript常用的內(nèi)置函數(shù)如下表所示：函數(shù)名說(shuō)明alert顯示一個(gè)警告對(duì)話框，包括一個(gè)OK按鈕confirm顯示一個(gè)確認(rèn)對(duì)話框，包括OK、Cancel按鈕prompt顯示一個(gè)輸入對(duì)話框，提示等待用戶輸入escape將字符轉(zhuǎn)換成Unicode碼eval計(jì)算表達(dá)式的結(jié)果parseFloat將字符串轉(zhuǎn)換成符點(diǎn)型parseInt將字符串轉(zhuǎn)換成整型isNaN測(cè)試是否不是一個(gè)數(shù)字unescape返回對(duì)一個(gè)字符串編碼后的結(jié)果字符串，其中，所有空格、標(biāo)點(diǎn)以及其他非ASCII碼字符都用“%xx”（xx等于該字符對(duì)應(yīng)的Unicode編碼的十六進(jìn)制數(shù)）格式的編碼替換-22-函數(shù)是完成特定功能的一段程序代碼，JavaScript中有兩種函數(shù)即內(nèi)置的系統(tǒng)函數(shù)和用戶自定義函數(shù)上表中的alert()、confirm()、prompt()函數(shù)實(shí)際上是window對(duì)象的方法，window對(duì)象會(huì)在第7章講述，表中的其他方法則稱為全局函數(shù)常用內(nèi)置函數(shù)alertalert函數(shù)用于彈出對(duì)話框，語(yǔ)法如下：parseFloat用于把字符串類型的數(shù)值轉(zhuǎn)換成float型，語(yǔ)法格式如下：parseInt用于把字符串類型的數(shù)值轉(zhuǎn)換成Int型，語(yǔ)法格式如下：isNaN用于判斷參數(shù)是否是非數(shù)值型，語(yǔ)法格式如下：示例：5.17FunEG.html

-23-parseFloat(string)parseInt(string)isNaN(x)alert(value)