JavaScript基本語(yǔ)法.ppt

《JavaScript基本語(yǔ)法.ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《JavaScript基本語(yǔ)法.ppt（43頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、JavaScript,JavaScript基本語(yǔ)法,,2,本章目標(biāo),什么是 JavaScript 如何將 JavaScript 嵌入到 HTML 中 理解變量、數(shù)據(jù)類型和運(yùn)算符 分支結(jié)構(gòu) 數(shù)組 循環(huán)結(jié)構(gòu),,3,什么是JavaScript,JavaScript 是一種腳本語(yǔ)言 提供用戶交互 動(dòng)態(tài)更改內(nèi)容 數(shù)據(jù)驗(yàn)證,,4,如何將JavaScript嵌入網(wǎng)頁(yè),可以將 JavaScript 語(yǔ)句插入 HTML 文檔，方式如下： 使用 標(biāo)簽將語(yǔ)句嵌入文檔 將 JavaScript 源文件鏈接到 HTML 文檔中,,5,使用 Script 標(biāo)簽, // JavaScript Appears he

2、re. alert(這是第一個(gè)JavaScript例子!); alert(歡迎你進(jìn)入JavaScript世界!); alert(今后我們將共同學(xué)習(xí)JavaScript知識(shí)！); ,,腳本代碼,設(shè)置語(yǔ)言,,script標(biāo)簽,,,6,使用外部 JS 文件,外部 JavaScript 文件可以鏈接到 HTML 文檔中 script標(biāo)簽的 src（源文件）屬性可用于鏈接外部js文件, ,,7,使用外部 JS 文件, 使用外部文件 以上文本是通過(guò)訪問(wèn)外部 JavaScript 文件顯示的 ,document.write(喂！你好嗎? );,,JavaScript 代碼 (test.

3、htm),JavaScript 代碼 (test.js),,,8,變量,變量名必須以字母或下劃線（_）開(kāi)頭 變量可以包含數(shù)字、從 A 至 Z 的大小寫(xiě)字母 JavaScript 區(qū)分大小寫(xiě)，即變量 myVar、 myVAR 和 myvar 是不同的變量,回顧：變量的主要作用是存取數(shù)據(jù)、提供存放信息的容器。對(duì)于變量必須明確變量的命名、變量的類型、變量的聲明及其變量的作用域。,,9,聲明變量,var a;,var x, y, z = 10;,var a= 10;,a = 10;,聲明變量,聲明多個(gè)變量,賦值,同時(shí)聲明和初始化變量,var 用于聲明變量的關(guān)鍵字 a 變量名,,10,聲明變量, 使用

4、變量 var x; x=prompt(淘寶網(wǎng)竟拍，請(qǐng)出一口價(jià),1) ; // +用來(lái)連接多個(gè)字符串 document.write(拍賣價(jià)格+x+); document.write(恭喜您，您以最高價(jià)拍賣成功！); alert(歡迎下次光臨！); ,定義變量,變量賦值,,11,可由函數(shù) 1、函數(shù) 2 和函數(shù) 3 訪問(wèn),變量 a、b 和 c 只能 在其各自的函數(shù)中 被訪問(wèn),,,變量的作用域,函數(shù)function1 局部變量a,函數(shù)function2 局部變量b,腳本,函數(shù)function3 局部變量c,全局變量 gg,,,,,全局變量不需要以 var 關(guān)鍵字進(jìn)行聲明，但局部變量則必須 以此關(guān)鍵字來(lái)

5、聲明。,Script區(qū)域,,12,浮點(diǎn)型浮點(diǎn)型字面量至少必須含有一個(gè)數(shù)字。此數(shù)字可包含小數(shù)點(diǎn)或 采用科學(xué)記數(shù)法表示的數(shù)字?？茖W(xué)記數(shù)法中的整數(shù)可以是正整數(shù)(+) 或負(fù)整 數(shù)(-)，指數(shù)(e) 表示十次冪。例如 10.24、1.20e+22、4E-8、.1815 等。,常量,整型 浮點(diǎn)型 字符串型,和C語(yǔ)言一樣，js也有轉(zhuǎn)義字符，常用的就是： n ,,13,常量,,14,數(shù)據(jù)類型,,15, var x=100; var y; var z; document.write(競(jìng)拍SONY數(shù)碼相機(jī) 600萬(wàn)像素 +x+$起價(jià)); y=prompt(加多少銀子？,1); z=x+y; alert(您最終的

6、出價(jià)n+z+$); //n用于換行顯示 ,Prompt函數(shù)返回輸入的字符串,+號(hào)的用法-1,+字符串相連：100+200,整數(shù)和字符串的連接操作,,16, var x=100; var y; var z; document.write(競(jìng)拍SONY數(shù)碼相機(jī) 600萬(wàn)像素 +x+$起價(jià)); y=prompt(加多少銀子？,1); z=x+parseFloat( y ); alert(您最終的出價(jià)n+z+$); //n用于換行顯示 ,parseFloat( )函數(shù)將字符串轉(zhuǎn)換為float數(shù)據(jù) parseInt( )函數(shù)將字符串轉(zhuǎn)換為int數(shù)據(jù) 如果轉(zhuǎn)換失敗，返回NaN值(not a numbe

7、r),+號(hào)的用法-2,整數(shù)間的算數(shù)運(yùn)算,,17,運(yùn)算符,運(yùn)算符對(duì)一個(gè)或多個(gè)變量或值（操作數(shù)）進(jìn)行運(yùn)算，并返 回一個(gè)新值 根據(jù)所執(zhí)行的運(yùn)算，運(yùn)算符可分為以下類別： 算術(shù)運(yùn)算符 比較運(yùn)算符 邏輯運(yùn)算符,,18,算術(shù)運(yùn)算符,,19,算術(shù)運(yùn)算符,實(shí)現(xiàn)步驟： 1.編寫(xiě)html頁(yè)面代碼 2.指定各個(gè)文本框的名稱 3.編寫(xiě)腳本代碼 4.瀏覽并調(diào)試,,20, function calcu( ) var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; var total=parseFloat(numb1)*parseFl

8、oat(numb2); document.calc.result.value=total; ,計(jì)算總價(jià)并顯示, ,添加單擊事件，單擊按鈕時(shí)調(diào)用calcu() 函數(shù),算術(shù)運(yùn)算符,獲取表單中輸入的數(shù)據(jù)： document.表單名.表單元素名.value,,定義calcu( )計(jì)算函數(shù),實(shí)現(xiàn)兩個(gè)數(shù)相乘的功能.定義函數(shù)的語(yǔ)法： function 函數(shù)名(參數(shù)列表) //JavaScript語(yǔ)句； ,,,,21,比較運(yùn)算符,,22, function calcu() var numb1= document.calc.num1.value; var numb2= document.calc.num

9、2.value; var total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; if (total500) alert(購(gòu)買(mǎi)總價(jià)超過(guò)500n支付時(shí)將贈(zèng)送超級(jí)Q幣2枚！); .其他代碼略，同上例,,比較運(yùn)算符,條件成立時(shí)執(zhí)行,,23,邏輯運(yùn)算符,邏輯運(yùn)算符,,24, function calcu() var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; var total= parseFloat(nu

10、mb1)*parseFloat(numb2); document.calc.result.value=total; if ((total500) .其他代碼略，同上例,,邏輯運(yùn)算符,5001000 之間，贈(zèng)送超級(jí)Q幣兩枚； 10002000之間，贈(zèng)送IBM智能鼠標(biāo)一只； 2000以上，直接與貴賓臺(tái)聯(lián)系。,,25,,條件語(yǔ)句用于測(cè)試條件。,if(條件) JavaScript代碼; ,語(yǔ)法：,if 語(yǔ)句 2-1,如果要執(zhí)行多個(gè)語(yǔ)句，必須將這些語(yǔ)句放在一對(duì)大括號(hào) ( ) 內(nèi)。但如果只要執(zhí)行一個(gè)語(yǔ)句，則可以省略大括號(hào),,26, function calcu() var numb1= document

11、.calc.num1.value; var numb2= document.calc.num2.value; if ((numb1!=) .其他代碼略，同上例,If語(yǔ)句 2-2,如果輸入框中的數(shù)據(jù)用戶漏填了， 出現(xiàn)NaN的 bug 為什么呢?,,27,if else 語(yǔ)句 2-1,if(條件) //JavaScript代碼; else //JavaScript代碼; ,語(yǔ)法：,,28, function calcu() var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; if ((numb1!=

12、) ,If-else語(yǔ)句 2-2,,29,if (條件1) if (條件2) //JavaScript代碼; ,語(yǔ)法：,嵌套 if 語(yǔ)句 2-1,,30, function calcu() var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; if ((numb1!=) ..,,嵌套If語(yǔ)句 2-2,購(gòu)買(mǎi)數(shù)量無(wú)意中輸入負(fù)數(shù)，出現(xiàn) bug 怎么辦?,,31,switch 語(yǔ)句 2-1,switch (表達(dá)式) case 常量1 : JavaScript語(yǔ)句; break; case 常量2 :

13、JavaScript語(yǔ)句; break; ... default : JavaScript語(yǔ)句; ,語(yǔ)法：,,32,switch語(yǔ)句 2-2,..... var f=document.calc.pay.value; //支付方式代號(hào) var grade; //折扣率 var total= parseFloat(numb1)*parseFloat(numb2); switch(parseInt(f)) case 1: grade=0.6 ; //打6折優(yōu)惠 break; case 2: .同理其他方式打7折、八折 case 4: grade=0.9 ; //打9折優(yōu)惠 break

14、; default:alert(請(qǐng)重新選擇支付方式！); return; var money=total*grade; //根據(jù)折扣率，計(jì)算實(shí)際總價(jià) document.calc.result.value=money; alert(您享受了+grade*10+折優(yōu)惠！); ..,銀行轉(zhuǎn)帳 打6折 電話支付 打7折 郵政匯款 打8折 Q幣支付 打9折,,33,數(shù)組（array對(duì)象）,array提供對(duì)創(chuàng)建任何數(shù)據(jù)類型的數(shù)組的支持 arrayObj = new Array()arrayObj = new Array(size)arrayObj = new Array(element0, elem

15、ent1, ..., elementN) arrayObj : 必選項(xiàng)。要賦值為 Array 對(duì)象的變量名。 Size : 可選項(xiàng)。數(shù)組的大小。由于數(shù)組的下標(biāo)是從零開(kāi)始， 創(chuàng)建的元素的下標(biāo)將從零到 size -1。 element0,...,elementN : 可選項(xiàng)。要放到數(shù)組中的元素。這將創(chuàng)建 具有n + 1 個(gè)元素的長(zhǎng)度為 n + 1 的數(shù)組。使用該語(yǔ)法時(shí) 必須有一個(gè)以上元素。,,34,數(shù)組,聲明數(shù)組 var 數(shù)組名 = new Array(數(shù)組大小); 例： var emp = new Array(3) 添加元素 emp0 = AA; emp1 = BB;

16、 emp2 = CC;,也可以聲明數(shù)組并賦初值： 例： var emp = new Array(AA，BB，CC)；,,35, 使用數(shù)組 var emp = new Array(3); emp0 = Ryan Dias; emp1 = Graham Browne; emp2 = David Greene; document.write(數(shù)組emp中的數(shù)據(jù)為:); document.write(emp0+); document.write(emp1+); document.write(emp2+); ,數(shù)組,,36,數(shù)組,常用屬性 length ：返回?cái)?shù)組中元素的個(gè)數(shù) 常用方法,,37, va

17、r emp = new Array(3); emp0 = Ryan Dias; emp1 = Graham Browne; emp2 = David Greene; emp.sort( ); document.write(排序結(jié)果是：); document.write(emp0+); document.write(emp1+); document.write(emp2+); ,數(shù)組排序,,,38,循環(huán),for循環(huán) do-while while,,39,For循環(huán),for循環(huán) 語(yǔ)法結(jié)構(gòu) for (表達(dá)式;表達(dá)式;表達(dá)式) // 語(yǔ)句; 示例： var i; for (i=0; i<10; i++

18、) // 語(yǔ)句; ,,40, For 循環(huán)演示 document.write(打印金字塔直線); for (var i= 0; i); ,for 循環(huán) 示例,,當(dāng)i=5 時(shí)，,,41,While和do-while,while循環(huán) 語(yǔ)法結(jié)構(gòu) while(循環(huán)條件) //語(yǔ)句； dowhile循環(huán) 語(yǔ)法結(jié)構(gòu) do //語(yǔ)句； while(循環(huán)條件);,,42, .myfont font-size:150; color:#c99c96; font-family:Webdings; //產(chǎn)生埃及圖像的特殊字體 document.write(每個(gè)字符都對(duì)應(yīng)一個(gè)漂亮的埃及圖像); do

19、 var c = prompt(輸入一個(gè)字符，輸入N 或n停止,A) ; document.write (+c+); while (c !=N ,while和dowhile循環(huán),,43,總結(jié),什么是 JavaScript 如何將 JavaScript 嵌入到 HTML 中 網(wǎng)頁(yè)中嵌入腳本有兩種方式：使用標(biāo)簽或外部 *. js文件 理解變量、數(shù)據(jù)類型和運(yùn)算符 JavaScript 中聲明變量：var 變量名 +可以用于兩個(gè)數(shù)相加，還可以用于連接字符串 parseInt() 和 parseFloat() 函數(shù)將字符串分別轉(zhuǎn)換為整型和小數(shù) 運(yùn)算符號(hào)分為算術(shù)運(yùn)算符、比較運(yùn)算符、邏輯運(yùn)算符 分支結(jié)構(gòu) 條件語(yǔ)句分為if語(yǔ)句，if-else語(yǔ)句、if的嵌套 多分支語(yǔ)句switch根據(jù)表達(dá)式的值，進(jìn)入不同的分支執(zhí)行 多分支語(yǔ)句switch根據(jù)表達(dá)式的值，進(jìn)入不同的分支執(zhí)行 數(shù)組 Array對(duì)象常用的屬性是length，排序方法：sort 循環(huán)結(jié)構(gòu)：for 循環(huán)、while循環(huán)、do-while循環(huán),