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

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

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

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

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

5、”，也不等于“空字符串”。因為“0”是數(shù)值，“空字符串”是字符串。,1. 數(shù)據(jù)類型,JavaScript編程基礎(chǔ),自動數(shù)據(jù)類型轉(zhuǎn)換 如果表達(dá)式中用（+）運算符，且其中一個操作數(shù)為字符串，另一個操作數(shù)為數(shù)值時，JavaScript自動將數(shù)值轉(zhuǎn)成字符串。 例如：var x=”我今年”+18; 結(jié)果：x=“我今年18” var x=”15”+8 結(jié)果：x=158 var y=15+8; 結(jié)果：y=23 如果表達(dá)式中用了其它運算符，JavaScript自動將字符串轉(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)換成浮點數(shù)值。 舉例,2. 數(shù)據(jù)類型轉(zhuǎn)換,JavaScript編程基礎(chǔ),3. 變量,JavaScript編程基礎(chǔ),變量命名 以字母或下劃線開頭（不能以數(shù)字開頭），后面接數(shù)字或其它字母。 變量名區(qū)分大小寫。 例： var A=Uppercase A; var a=Lowercase a; document.write(

7、A); document.write(); document.write(a); ,3. 變量,JavaScript編程基礎(chǔ),變量的聲明 變量聲明時，不必定義類型，所有類型均由小寫的var聲明。 例如： var name; （JavaScript自動給出一個未定義值） var name,sex; （JavaScript自動給出一個未定義值） 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） 浮點常量（Floating-Point Literals） 數(shù)組常量（Array Literals）,5. 運算符與表達(dá)式,JavaScript編程基礎(chǔ),賦值運算符,5. 運算符與表達(dá)式,JavaScript編程基礎(chǔ),比較運算符 舉例,5. 運算符與表達(dá)式,JavaScript編程基礎(chǔ),算術(shù)運算符 舉例,5. 運算符與表達(dá)式,JavaScript編程基礎(chǔ),邏輯運算符 a while ( i 0 ) document.wri

10、te(i = ,i ,); i-; ,6. 程序控制流程,JavaScript編程基礎(chǔ),循環(huán)結(jié)構(gòu),do 語句或語句組 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 對象 ) 例1 例2,6. 程序控制流程,JavaScr

11、ipt編程基礎(chǔ),循環(huán)結(jié)構(gòu),with ( ) , document.write (限時搶購物品：); document.write (ViewSonic 17 顯示器。); document.write (EPSON 打印機。); , with (document) write (限時搶購物品：); write (ViewSonic 17 顯示器。); write (EPSON 打印機。); ,6. 程序控制流程,JavaScript編程基礎(chǔ),注釋語句,/ /* */,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)成浮點函數(shù) 功能：將字符串轉(zhuǎn)成浮點數(shù)值。 格式： parseFloat(字符串)