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

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

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

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

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

布爾型常量 可取值true和false-6-JavaScript中字符串可以用雙引號和單引號兩種方式聲明變量變量變量是指程序中一個已經(jīng)命名的存儲單元命名規(guī)則變量名必須以字母或下劃線開頭，其后可以跟數(shù)字、字母或下劃線等；變量名不能包含空格、加號、減號等特殊符號；JavaScript的變量名嚴格區(qū)分大小寫；變量名不能使用JavaScript中的保留關(guān)鍵字。字符串型常量聲明變量變量用關(guān)鍵字var進行聲明示例如下：-7-var變量1[,變量2,...];varv1,v2;在JavaScript中，可以使用分號代表一個語句的結(jié)束，如果每個語句都在不同的行中，那么分號可以省略；如果多個語句在同一行中，那么分號就不能省略變量類型變量的類型JavaScript是一種弱類型的語言，變量的類型不像其它語言一樣在聲明時直接指定，對于同一變量可以賦不同類型的值。示例代碼如下：-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>注釋注釋可分為單行注釋和多行注釋單行注釋單行注釋使用“//”符號進行標識，其后的文字都不被程序解釋執(zhí)行。語法格式如下：多行注釋多行注釋使用“/*…*/”進行標識，其中的文字同樣不被程序解釋執(zhí)行。語法格式如下：-11-//這是單行程序代碼的注釋/*這是多行程序注釋*/算術(shù)運算符JavaScript中運算符主要分為：算術(shù)運算符、比較運算符和邏輯運算符算術(shù)運算符算術(shù)運算符是用于完成加法、減法、乘法、除法、遞增、遞減等運算的運算符。算術(shù)運算符如下表所示：示例：5.4MathEG.html運算符說明+用于兩個數(shù)相加-用于兩個數(shù)相減*用于兩個數(shù)相乘/用于兩個數(shù)相除%除法運算中的取余數(shù)++遞增值（即給原來的值加1）--遞減值（即給原來的值減1）-12-比較運算符比較運算符比較運算符用于比較數(shù)值、字符串或邏輯變量等，并將比較結(jié)果以邏輯值（true或false）的形式返回。比較運算符如下表所示：示例：5.5CompareEG.html運算符說明==比較兩邊的值是否相等!=比較兩邊的值是否不相等>比較左邊的值是否大于右邊的值<比較左邊的值是否小于右邊的值>=比較左邊的值是否大于等于右邊的值<=比較左邊的值是否小于等于右邊的值===比較兩邊的值是否嚴格相等!==比較兩邊的值是否嚴格不相等-13-邏輯運算符邏輯運算符邏輯運算符主要用于條件表達式中，采用邏輯值作為操作數(shù)，其返回值也是邏輯值。邏輯運算符如下表所示：示例：5.6LogicEG.html運算符說明&&邏輯與，當左右兩邊的操作數(shù)都為true時，返回true，否則返回false||邏輯或，當左右兩邊的操作數(shù)都為false時，返回false，否則返回true!邏輯非，當操作數(shù)為true時返回false，反之返回true?:三目運算符：操作數(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)移語句：break、continue、return分支結(jié)構(gòu)分支結(jié)構(gòu)是根據(jù)假設(shè)的條件成立與否，再決定執(zhí)行什么樣語句的結(jié)構(gòu)，它的作用是讓程序更具有選擇性分支結(jié)構(gòu)包括if語句和switch語句-15-if語句if-else示例：5.7MaxEG.html嵌套if示例：5.8YearEG.html-16-if(condition)statement1;[elsestatement2;]if(condition){statement1;}elseif(condition){statement2;}else{statement;}switch語句switch一個switch語句由一個控制表達式和一個由case標記表述的語句塊組成。語法結(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語句do-while語句for語句for-in語句-18-while和do-while語句

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

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

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