JavaScript基本語法.ppt

《JavaScript基本語法.ppt》由會員分享，可在線閱讀，更多相關《JavaScript基本語法.ppt（43頁珍藏版）》請在裝配圖網(wǎng)上搜索。

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

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

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

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

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

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

7、r),+號的用法-2,整數(shù)間的算數(shù)運算,,17,運算符,運算符對一個或多個變量或值（操作數(shù)）進行運算，并返 回一個新值 根據(jù)所執(zhí)行的運算，運算符可分為以下類別： 算術運算符 比較運算符 邏輯運算符,,18,算術運算符,,19,算術運算符,實現(xiàn)步驟： 1.編寫html頁面代碼 2.指定各個文本框的名稱 3.編寫腳本代碼 4.瀏覽并調試,,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; ,計算總價并顯示, ,添加單擊事件，單擊按鈕時調用calcu() 函數(shù),算術運算符,獲取表單中輸入的數(shù)據(jù)： document.表單名.表單元素名.value,,定義calcu( )計算函數(shù),實現(xiàn)兩個數(shù)相乘的功能.定義函數(shù)的語法： function 函數(shù)名(參數(shù)列表) //JavaScript語句； ,,,,21,比較運算符,,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(購買總價超過500n支付時將贈送超級Q幣2枚！); .其他代碼略，同上例,,比較運算符,條件成立時執(zhí)行,,23,邏輯運算符,邏輯運算符,,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) .其他代碼略，同上例,,邏輯運算符,5001000 之間，贈送超級Q幣兩枚； 10002000之間，贈送IBM智能鼠標一只； 2000以上，直接與貴賓臺聯(lián)系。,,25,,條件語句用于測試條件。,if(條件) JavaScript代碼; ,語法：,if 語句 2-1,如果要執(zhí)行多個語句，必須將這些語句放在一對大括號 ( ) 內。但如果只要執(zhí)行一個語句，則可以省略大括號,,26, function calcu() var numb1= document

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

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

13、JavaScript語句; break; ... default : JavaScript語句; ,語法：,,32,switch語句 2-2,..... var f=document.calc.pay.value; //支付方式代號 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(請重新選擇支付方式！); return; var money=total*grade; //根據(jù)折扣率，計算實際總價 document.calc.result.value=money; alert(您享受了+grade*10+折優(yōu)惠！); ..,銀行轉帳 打6折 電話支付 打7折 郵政匯款 打8折 Q幣支付 打9折,,33,數(shù)組（array對象）,array提供對創(chuàng)建任何數(shù)據(jù)類型的數(shù)組的支持 arrayObj = new Array()arrayObj = new Array(size)arrayObj = new Array(element0, elem

15、ent1, ..., elementN) arrayObj : 必選項。要賦值為 Array 對象的變量名。 Size : 可選項。數(shù)組的大小。由于數(shù)組的下標是從零開始， 創(chuàng)建的元素的下標將從零到 size -1。 element0,...,elementN : 可選項。要放到數(shù)組中的元素。這將創(chuàng)建 具有n + 1 個元素的長度為 n + 1 的數(shù)組。使用該語法時 必須有一個以上元素。,,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 ：返回數(shù)組中元素的個數(shù) 常用方法,,37, va

17、r emp = new Array(3); emp0 = Ryan Dias; emp1 = Graham Browne; emp2 = David Greene; emp.sort( ); document.write(排序結果是：); 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) 語法結構 for (表達式;表達式;表達式) // 語句; 示例： var i; for (i=0; i<10; i++

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

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