JS編程基礎(chǔ)01.ppt

1、動(dòng)態(tài)網(wǎng)頁(yè)腳本語(yǔ)言JavaScript,主要內(nèi)容 概述 編程基礎(chǔ) 事件驅(qū)動(dòng) 內(nèi)置對(duì)象 瀏覽器對(duì)象,JavaScript是由網(wǎng)景公司開(kāi)發(fā)的一種跨平臺(tái)，面向?qū)ο?object-oriented)的網(wǎng)頁(yè)腳本語(yǔ)言(Web Script Language)，是目前流行的網(wǎng)頁(yè)特效設(shè)計(jì)語(yǔ)言。 JavaScript代碼可直接嵌入HTML文件中，隨網(wǎng)頁(yè)一起傳送到客戶端瀏覽器，然后通過(guò)瀏覽器來(lái)解釋執(zhí)行。,JavaScript概述,什么是JavaScript腳本語(yǔ)言？ (1) 腳本語(yǔ)言(Scripting Language)？ 由ASCII碼構(gòu)成，可直接用任何的文本編輯器開(kāi)發(fā)完成。是一種不必事先編譯，只要利用適當(dāng)?shù)慕?/p>

2、釋器(Interpreter)就可以執(zhí)行的簡(jiǎn)單的解釋式程序。 (2) JavaScript？ JavaScript是由網(wǎng)景公司開(kāi)發(fā)的一種跨平臺(tái)，純面向?qū)ο?object-oriented)式的網(wǎng)頁(yè)式腳本語(yǔ)言(Web Script Language)。JavaScript代碼可直接嵌入HTML文件中，隨網(wǎng)頁(yè)一起傳送到客戶端瀏覽器，然后通過(guò)瀏覽器的解釋器來(lái)解釋執(zhí)行。,JavaScript概述,腳本編寫語(yǔ)言 基于對(duì)象的語(yǔ)言 簡(jiǎn)單性 安全性 動(dòng)態(tài)性 跨平臺(tái),2. JavaScript的特點(diǎn),JavaScript概述,制作網(wǎng)頁(yè)特效 提供表單前端驗(yàn)證 窗口動(dòng)態(tài)操作 提高系統(tǒng)工作效率,3. JavaScri

3、pt的功能,JavaScript概述,在HTML標(biāo)記中直接寫入JavaScript代碼 例： 鼠標(biāo)移過(guò)來(lái) 運(yùn)行,4. 在HTML文檔中嵌入JavaScript代碼,JavaScript概述,將JavaScript代碼放入標(biāo)記符中 例如： document.write(歡迎您學(xué)習(xí)JavaScript!); 運(yùn)行,4. 在HTML文檔中嵌入JavaScript代碼,JavaScript概述,將代碼獨(dú)立存儲(chǔ)為以 .js 為擴(kuò)展名的文件，利用SRC屬性將該文件調(diào)入 例如： welcome.js文件內(nèi)容如下： document.write(歡迎您學(xué)習(xí)JavaScript!);,4. 在HTML文檔中嵌入

4、JavaScript代碼,JavaScript概述,為避免某些瀏覽器不完全支持JavaScript，而造成錯(cuò)誤，可將JavaScript代碼用注釋語(yǔ)句括起來(lái) 例如： ,4. 在HTML文檔中嵌入JavaScript代碼,JavaScript概述,數(shù)值(Number)：包含整數(shù)或浮點(diǎn)數(shù)。 邏輯值(Logical)：取值為true或false。 字符串(String)：用單引號(hào)或雙引號(hào)括起來(lái)的零個(gè)或多個(gè)單一的字符所組成。 空值(null)：表示沒(méi)有值，取唯一值”null”，大小寫敏感。 未定義值(undefined)：表示尚未定義值。 注：null不能寫成Null或NULL。 null既不等于“0

5、”，也不等于“空字符串”。因?yàn)椤?”是數(shù)值，“空字符串”是字符串。,1. 數(shù)據(jù)類型,JavaScript編程基礎(chǔ),自動(dòng)數(shù)據(jù)類型轉(zhuǎn)換 如果表達(dá)式中用（+）運(yùn)算符，且其中一個(gè)操作數(shù)為字符串，另一個(gè)操作數(shù)為數(shù)值時(shí)，JavaScript自動(dòng)將數(shù)值轉(zhuǎn)成字符串。 例如：var x=”我今年”+18; 結(jié)果：x=“我今年18” var x=”15”+8 結(jié)果：x=158 var y=15+8; 結(jié)果：y=23 如果表達(dá)式中用了其它運(yùn)算符，JavaScript自動(dòng)將字符串轉(zhuǎn)成數(shù)值。 例如：var x=”30”/5; 結(jié)果：x=6 var y=”15”-“8”; 結(jié)果：y=7 舉例,2. 數(shù)據(jù)類型轉(zhuǎn)換,Java

6、Script編程基礎(chǔ),數(shù)據(jù)類型轉(zhuǎn)換函數(shù) eval(字符串)：將傳入的字符串參數(shù)內(nèi)容，轉(zhuǎn)換成相應(yīng)的數(shù)值，例如： y=eval(“15”)+8; 結(jié)果：y=23 parseInt(字符串，底數(shù))：將傳入的字符串，轉(zhuǎn)換成指定底數(shù)的數(shù)值。 parseFloat(字符串)：將傳入的字符串，轉(zhuǎn)換成浮點(diǎn)數(shù)值。 舉例,2. 數(shù)據(jù)類型轉(zhuǎn)換,JavaScript編程基礎(chǔ),3. 變量,JavaScript編程基礎(chǔ),變量命名 以字母或下劃線開(kāi)頭（不能以數(shù)字開(kāi)頭），后面接數(shù)字或其它字母。 變量名區(qū)分大小寫。 例： var A=Uppercase A; var a=Lowercase a; document.write(

7、A); document.write(); document.write(a); ,3. 變量,JavaScript編程基礎(chǔ),變量的聲明 變量聲明時(shí)，不必定義類型，所有類型均由小寫的var聲明。 例如： var name; （JavaScript自動(dòng)給出一個(gè)未定義值） var name,sex; （JavaScript自動(dòng)給出一個(gè)未定義值） var name=”張永”，sex=”女生”； (二變量均為字符串),3. 變量,JavaScript編程基礎(chǔ),變量的作用域：全局變量(Global variable)和局部變量(Local variable)。 document.title = 變量的作

8、用域?qū)嵗? var gv = JavaScript; /gv是全局變量 document.write(test函數(shù)的輸出：); test(); function test() var lv = VBScript; /lv是局部變量 document.write(gv= + gv + ); document.write(lv= + lv + + ); document.write(document的輸出：); document.write(gv= + gv + ); document.write(lv= + lv + ); ,4. 常量,JavaScript編程基礎(chǔ),字符串常量（String L

9、iterals） 一般字符串常量 特殊字符的字符串常量 布爾常量（Boolean Literals）：true或false。 整數(shù)常量（Integers Literals） 浮點(diǎn)常量（Floating-Point Literals） 數(shù)組常量（Array Literals）,5. 運(yùn)算符與表達(dá)式,JavaScript編程基礎(chǔ),賦值運(yùn)算符,5. 運(yùn)算符與表達(dá)式,JavaScript編程基礎(chǔ),比較運(yùn)算符 舉例,5. 運(yùn)算符與表達(dá)式,JavaScript編程基礎(chǔ),算術(shù)運(yùn)算符 舉例,5. 運(yùn)算符與表達(dá)式,JavaScript編程基礎(chǔ),邏輯運(yùn)算符 a while ( i 0 ) document.wri

10、te(i = ,i ,); i-; ,6. 程序控制流程,JavaScript編程基礎(chǔ),循環(huán)結(jié)構(gòu),do 語(yǔ)句或語(yǔ)句組 while () var i = 5; do document.write(i = ,i ,); i-; while( i 0 ) ,6. 程序控制流程,JavaScript編程基礎(chǔ),循環(huán)結(jié)構(gòu),for ( 初始值；條件；增量 ) , for ( var i = 5; i 0; i- ) document.write(i = ,i ,); ,6. 程序控制流程,JavaScript編程基礎(chǔ),循環(huán)結(jié)構(gòu),for ( 變量 in 對(duì)象 ) 例1 例2,6. 程序控制流程,JavaScr

11、ipt編程基礎(chǔ),循環(huán)結(jié)構(gòu),with ( ) , document.write (限時(shí)搶購(gòu)物品：); document.write (ViewSonic 17 顯示器。); document.write (EPSON 打印機(jī)。); , with (document) write (限時(shí)搶購(gòu)物品：); write (ViewSonic 17 顯示器。); write (EPSON 打印機(jī)。); ,6. 程序控制流程,JavaScript編程基礎(chǔ),注釋語(yǔ)句,/ /* */,JavaScript包含兩類函數(shù)： 系統(tǒng)函數(shù) 用戶自定義函數(shù),7. JavaScript函數(shù),JavaScript編程基礎(chǔ),1)

12、 編碼函數(shù) 功能：將字符串中非文字、數(shù)字字符（如 document.write(x 不是數(shù)值嗎？,isNaN(x); document.write(y 不是數(shù)值嗎？,isNaN(y); 執(zhí)行結(jié)果： x 不是數(shù)值嗎？false y 不是數(shù)值嗎？true,JavaScript編程基礎(chǔ),5) 轉(zhuǎn)成整數(shù)函數(shù) 功能：將各種進(jìn)制的數(shù)值轉(zhuǎn)成十進(jìn)制整數(shù)值。 格式：parseInt(字符串，底數(shù)) 舉例： / 二進(jìn)位轉(zhuǎn)成十進(jìn)位 document.write(11012 = ,parseInt(1101, 2),10); / 十六進(jìn)位轉(zhuǎn)成十進(jìn)位 document.write(BFFF16 = ,parseInt(BFFF, 16),10); ,JavaScript編程基礎(chǔ),6) 轉(zhuǎn)成浮點(diǎn)函數(shù) 功能：將字符串轉(zhuǎn)成浮點(diǎn)數(shù)值。 格式： parseFloat(字符串)