動態(tài)網(wǎng)頁腳本語言JavaScript(課件PPT).ppt

1、1,動態(tài)網(wǎng)頁腳本語言JavaScript,主要內(nèi)容 概述 編程基礎 面向?qū)ο蟮幕靖拍?內(nèi)置對象 瀏覽器窗口對象,2,JavaScript是由Netscape公司開發(fā)的一種跨平臺，面向?qū)ο?object-oriented)的網(wǎng)頁腳本語言(Web Script Language)，是目前流行的網(wǎng)頁特效設計語言。 JavaScript代碼可直接嵌入HTML文件中，隨網(wǎng)頁一起傳送到客戶端瀏覽器，然后通過瀏覽器來解釋執(zhí)行。,JavaScript概述,3,什么是JavaScript腳本語言？ (1) 腳本語言(Scripting Language)？ 由ASCII碼構(gòu)成，可直接用任何的文本編輯器開發(fā)完成

2、。是一種不必事先編譯，只要利用適當?shù)慕忉屍?Interpreter)就可以執(zhí)行的簡單的解釋式程序。 (2) JavaScript？ JavaScript是由Netscape公司開發(fā)的一種跨平臺，純面向?qū)ο?object-oriented)式的網(wǎng)頁式腳本語言(Web Script Language)。JavaScript代碼可直接嵌入HTML文件中，隨網(wǎng)頁一起傳送到客戶端瀏覽器，然后通過瀏覽器的解釋器來解釋執(zhí)行。,JavaScript概述,4,腳本編寫語言 基于對象的語言 簡單性 動態(tài)性 跨平臺,2. JavaScript的特點,JavaScript概述,5,制作網(wǎng)頁特效 提供表單前端驗證 窗口

3、動態(tài)操作 提高系統(tǒng)工作效率,3. JavaScript的功能,JavaScript概述,6,在HTML標記中直接寫入JavaScript代碼 例： 鼠標移過來 運行,4. 在HTML文檔中嵌入JavaScript代碼,JavaScript概述,7,將JavaScript代碼放入標記符中 例如： document.write(歡迎您學習JavaScript!); 運行 ,4. 在HTML文檔中嵌入JavaScript代碼,JavaScript概述,8,將代碼獨立存儲為以 .js 為擴展名的文件，利用SRC屬性將該文件調(diào)入 例如： welcome.js文件內(nèi)容如下： document.write(

4、歡迎您學習JavaScript!);,4. 在HTML文檔中嵌入JavaScript代碼,JavaScript概述,舉例,9,document.write( ); var A=Uppercase A; document.write(A); document.write( Uppercase A ); document.write(); document.write(gv= + A + );,10,為避免某些瀏覽器不完全支持JavaScript，而造成錯誤，可將JavaScript代碼用注釋語句括起來 例如： ,4. 在HTML文檔中嵌入JavaScript代碼,JavaScript概述,11,

5、數(shù)值型(Number)：包含整數(shù)或浮點數(shù)。 布爾型(Logical)：取值為true或false。1,0 字符型(String)：用單引號或雙引號括起來的零個或多個的字符或數(shù)字所組成。 空類型(null)：表示沒有值，取唯一值”null”，大小寫敏感。 注：null不能寫成Null或NULL。 null既不等于“0”，也不等于“空字符串”。因為“0” 是數(shù)值，“空字符串”是字符串。,1. 數(shù)據(jù)類型,JavaScript編程基礎,12,自動數(shù)據(jù)類型轉(zhuǎn)換 如果表達式中用（+）運算符，且其中一個操作數(shù)為字符串，另一個操作數(shù)為數(shù)值時，JavaScript自動將數(shù)值轉(zhuǎn)成字符串。 例如：var x=”我今

6、年”+18; 結(jié)果：x=“我今年18” var x=”15”+8 結(jié)果：x=158 var y=15+8; 結(jié)果：y=23 如果表達式中用了其它運算符，JavaScript自動將字符串轉(zhuǎn)成數(shù)值。 例如：var x=”30”/5; 結(jié)果：x=6 var y=”15”-“8”; 結(jié)果：y=7 舉例,2. 數(shù)據(jù)類型轉(zhuǎn)換,JavaScript編程基礎,13,數(shù)據(jù)類型轉(zhuǎn)換函數(shù) eval(字符串)：將字符串參數(shù)轉(zhuǎn)換成相應的數(shù)值，例如： y=eval(“15”)+8; 結(jié)果：y=23 parseInt(字符串，底數(shù))：將字符串轉(zhuǎn)換成指定底數(shù)的數(shù)值。 parseFloat(字符串)：將字符串轉(zhuǎn)換成浮點數(shù)值。

7、舉例,2. 數(shù)據(jù)類型轉(zhuǎn)換,JavaScript編程基礎,14,3. 變量,JavaScript編程基礎,變量命名 以字母或下劃線開頭（不能以數(shù)字開頭），后面接數(shù)字、 字母或下劃線。 變量名區(qū)分大小寫。 不能用系統(tǒng)保留字和特殊符號作為變量 例： var A=Uppercase A; var a=Lowercase a; document.write(A); document.write(); document.write(a); ,15,3. 變量,JavaScript編程基礎,變量的聲明 變量聲明時，不必定義類型，所有類型均由小寫的 var聲明。 例如： var name; （JavaScri

8、pt自動給出一個未定義值） var name, sex; （JavaScript自動給出一個未定義值） var name=”張永”，sex=”女生”； (二變量均為 字符串),16,3. 變量,JavaScript編程基礎,變量的作用域： 全局變量(Global variable) 局部變量(Local variable) var gv = JavaScript; / gv是全局變量 function test() var lv = VBScript; / lv是局部變量 document.write(gv= + gv + ); document.write(lv= + lv + + ); t

9、est(); document.write(document的輸出：); document.write(gv= + gv + ); document.write(lv= + lv + ); 舉例,17,4. 常量,JavaScript編程基礎,字符串常量：（String Literals） 一般字符串常量： ， “ ” 特殊字符的字符串常量 布爾常量：（Boolean Literals）：true或false 1,0 數(shù)值型：整數(shù)常量（Integers Literals） 浮點常量（Floating-Point Literals）,18,5. 運算符與表達式,JavaScript編程基礎,賦值

10、運算符,x+=y 等價于 x=x+y x%=y 等價于 x=x%y,19,5. 運算符與表達式,JavaScript編程基礎,比較運算符 舉例,20,5. 運算符與表達式,JavaScript編程基礎,算術運算符 舉例,21,5. 運算符與表達式,JavaScript編程基礎,邏輯運算符 a max = ab? a : b,舉例,23,5. 運算符與表達式,JavaScript編程基礎,g) typeof：用來判斷操作數(shù)的類型 格式：typeof 操作數(shù) 或 typeof(操作數(shù)) 舉例,24,屬性 對象類型： 方法 對象實例 對象實例名.屬性 對象實例名.方法 如：窗口 p102,JavaS

11、cript編程基礎,25,5. 運算符與表達式,JavaScript編程基礎,h) new：定義對象實例。 語法：對象實例名= new 對象類型(參數(shù)) 例如：myArray=new Array(3) this：代表當前對象，因此用在不同的地方， 就有不同的結(jié)果。 this.屬性 this.方法 舉例,26,6. 程序控制流程,JavaScript編程基礎,選擇結(jié)構(gòu),if 語句 else 語句,if 語句組 else 語句組,if 語句組 else if 語句組 else 語句組 ,舉例,27,6. 程序控制流程,JavaScript編程基礎,b) Switch結(jié)構(gòu),switch ( ) ca

12、se ：； break; case ：； break; default：； ,28,6. 程序控制流程,JavaScript編程基礎,循環(huán)結(jié)構(gòu),while () 語句組, var i = 5; while ( i 0 ) document.write(i = i); i-; 例,29,6. 程序控制流程,JavaScript編程基礎,循環(huán)結(jié)構(gòu), var i = 5; do document.write(i = ,i ,); i-; while ( i 0 ) 例,do 語句或語句組 while (),30,6. 程序控制流程,JavaScript編程基礎,循環(huán)結(jié)構(gòu),for ( 初始值；條件；增

13、量 ) , for ( var i = 5; i 0; i- ) document.write(i = ,i ,); ,31,6. 程序控制流程,JavaScript編程基礎,循環(huán)結(jié)構(gòu),for ( i in ar ) document.write(, ari, ); 例1,for ( 變量 in 對象 ) ,32,6. 程序控制流程,JavaScript編程基礎,C) With語句,with ( ) , document.write (限時搶購物品：); document.write (ViewSonic 17 顯示器。); document.write (EPSON 打印機。); , wit

14、h (document) write (限時搶購物品：); write (ViewSonic 17 顯示器。); write (EPSON 打印機。); 例1,33,6. 程序控制流程,JavaScript編程基礎,注釋語句,/ /* */ ,34,JavaScript包含兩類函數(shù)： 系統(tǒng)函數(shù) 用戶自定義函數(shù),7. JavaScript函數(shù),JavaScript編程基礎,35,1) 編碼函數(shù) 功能：將字符串中非文字、數(shù)字字符（如 document.write(x 不是數(shù)值嗎？, isNaN(x); document.write(y 不是數(shù)值嗎？, isNaN(y); 執(zhí)行結(jié)果： x 不是數(shù)值嗎

15、？false y 不是數(shù)值嗎？True,JavaScript編程基礎,舉例,37,5) 轉(zhuǎn)成整數(shù)函數(shù) 功能：將字符串轉(zhuǎn)換成指定底數(shù)的數(shù)值。 格式：parseInt(字符串，底數(shù)) 舉例： x=parseInt(“27”,8),JavaScript編程基礎,38,6) 轉(zhuǎn)成浮點函數(shù) 功能：將字符串轉(zhuǎn)成浮點數(shù)值。 格式： parseFloat(字符串) 舉例： document.write(parseFloat(3.123456), ); ,JavaScript編程基礎,舉例,39,7) 用戶自定義函數(shù),function 函數(shù)名( 參數(shù)1，參數(shù)2， ) return ,定義函數(shù)的注意事項： 易于識

16、別 功能模塊化 放置在程序開始部分 例1 例2,JavaScript編程基礎,40,函數(shù)定義的一般形式,定義無參函數(shù)的一般形式為: 類型標識符函數(shù)名( ) 聲明部分 語句部分 函數(shù)名( );,41,定義有參函數(shù)的一般形式為: 類型標識符 函數(shù)名(形式參數(shù)表列) 聲明部分 語句部分 函數(shù)名(實際參數(shù)表列);,42,函數(shù)參數(shù)和函數(shù)的值,形式參數(shù)和實際參數(shù),形式參數(shù)：函數(shù)名后面括號中的變量名稱為“形式參數(shù)”（簡稱“形參”）。 實際參數(shù)：主調(diào)函數(shù)中調(diào)用一個函數(shù)時，函數(shù)名后面括號中的參數(shù)(可以是一個表達式)稱為“實際參數(shù)”（簡稱“實參”）。 函數(shù)返回值：return后面的括號中的值作為函數(shù)帶回的值（稱函

17、數(shù)返回值）。,43,主調(diào)函數(shù)和被調(diào)用函數(shù)之間有數(shù)據(jù)傳遞的關系。在不同的函數(shù)之間傳遞數(shù)據(jù)，可以使用的方法有： 參數(shù)：通過形式參數(shù)和實際參數(shù) 返回值：用return語句返回計算結(jié)果 全局變量：外部變量,44,對象.屬性 對象.方法 new：定義對象實例。 語法：對象實例名稱 = new 對象類型(參數(shù)) this：代表當前對象, 用在不同的地方, 有不同的結(jié)果。 this.屬性 this.方法,面向?qū)ο蟮幕靖拍?45,JavaScript的事件處理,主要內(nèi)容 1、事件 (Event)：是指用戶在某對象上所作的動作。 2、事件驅(qū)動(Event Driver)：由事件引發(fā)的一連串程序的動作，稱為事件

18、驅(qū)動。 3、事件處理程序(Event Handler)：對事件進行處理的程序或函數(shù)。 4、事件處理程序語法 : 如：onClick,46,JavaScript的事件處理,1、常見事件,47,JavaScript的事件處理,2、事件處理程序語法 1) 直接嵌入HTML標記符中 瀏覽 直接寫在對象后面 .= document.onLoad=alert(這是事件處理程序); * 瀏覽,48,JavaScript的事件處理,3、應用舉例 例1： 網(wǎng)絡技術學習網(wǎng) 瀏覽,49,JavaScript的事件處理,3、應用舉例 例2 請輸入基本資料： 姓名： 瀏覽 p58 *,例1 例2,50,JavaScri

19、pt提供了一些非常有用的常用內(nèi)部對象和方法。用戶不需要用腳本來實現(xiàn)這些功能。這正是基于對象編程的真正目的。本節(jié)主要介紹JavaScript提供的內(nèi)置對象: Array(): 數(shù)組 String(): 字符串 Math(): 數(shù)值計算 Date(): 日期,JavaScript內(nèi)置對象,51,JavaScript內(nèi)置對象,1. 數(shù)組(Array)對象 格式：對象名 = new Array(元素個數(shù)) 對象名 = new Array(值1,值2,) 例如: fruit=new Array( ) fruit=new Array(2) /聲明了有2個元素的數(shù)組 fruit=new Array(“蘋果”

20、,”橘子”) /聲明了有 /2個數(shù)組元素的數(shù)組，并賦值 屬性：index： 數(shù)組元素的索引值。* length：數(shù)組長度(數(shù)組元素個數(shù))。 方法：join()：將數(shù)組內(nèi)的所有值組合成一個字符串 并用特定符號分開。 reverse()：將數(shù)組內(nèi)元素的索引次序翻轉(zhuǎn)過來,52,JavaScript內(nèi)置對象,1. 數(shù)組(Array)對象 舉例： 例1：一維數(shù)組應用 例2：二維數(shù)組應用,53,JavaScript內(nèi)置對象,2. 字符串(String)對象 格式：字符串變量名 = new String(“字符串常數(shù)”) 例如：var str1= new String(”JavaScript”) 屬性： l

21、ength：字符串長度 * 舉例： 例1：屬性length測試,54,JavaScript內(nèi)置對象,方法： 1) indexOf(“子字符串”). * 0 2) replace(“字符串a(chǎn)”，“字符串b”） 3) substr(索引值i ,長度值) 4) substring(索引值i, 索引值j) i, j-1 5) toLowerCase() 6) toUpperCase() 注意：大小寫！,indexOf()函數(shù)應用 大、小寫轉(zhuǎn)換 substring(),55,JavaScript內(nèi)置對象,3. 數(shù)學(Math)對象 屬性： E： 歐拉常量,自然對數(shù)的底 (約等于2.718) LN2： 2

22、的自然對數(shù) (約等于0.693) LN10 ： 10的自然對數(shù) (約等于2.302) LOG2E： 以2為底的e的對數(shù) (約等于1.442) LOG10E： 以10為底的e的對數(shù) (約等于0.434) PI： 的值 (約等于3.14159) SQRT1_2：0.5的平方根 (約等于0.707) SQRT2： 2的平方根 (約等于1.414),56,JavaScript內(nèi)置對象,3. 數(shù)學(Math)對象 方法： abs(x) 返回x的絕對值 acos(x) 返回x的反余弦值(以弧度為單位) asin(x) 返回x的反正弦值(以弧度為單位) atan(x) 返回x的反正切值(以弧度為單位) ce

23、il(x) 返回大于或等于x的最小整數(shù) floor(x) 與ceil相反 max(a,b) 返回兩數(shù)間的較大值 min(a,b) 返回兩數(shù)問的較小值 pow(m,n) 返回m的n次方(其中m為底, n為指數(shù)) random( ) 返回0和1之間的一個偽隨機數(shù) round(x) 返回X四舍五入之后的整數(shù),57,Math.PI Math.max(a,b) Math.round(x) Math.randow(),舉例,var m= new Math(); m.max(a,b);,58,JavaScript內(nèi)置對象,4. 日期時間(Date)對象 格式： 對象實例名 = new Date ( 日期參數(shù)

24、 ) 舉例： today = new Date () / 當日時間為對象初值。 today = new Date (“October 1,2002 12:00:00”) / 英文表示月份,其余以數(shù)值表示: 即【”月日,年時:分:秒”】。 today = new Date (2002, 08, 07, 0, 0, 0) / 一律以數(shù)字表示: 即【年,月,日,時,分,秒】。,59,JavaScript內(nèi)置對象,4. 日期時間(Date)對象 方法: getYear() 返回年份值 getMonth() 返回月份值 getDate() 并返回日期 getHours() 返回小時數(shù) getMinute

25、s() 返回分鐘數(shù) getSeconds() 返回秒數(shù) getDay() 返回星期幾 getTime() 返回完整的時間,60,JavaScript內(nèi)置對象,4. 日期時間(Date)對象 方法: setYear() 設置年份 setMonth() 設置月份 setDate() 設置日期 setHours() 設置小時數(shù) setMinutes() 設置分鐘數(shù) setSeconds() 設置秒數(shù) setDay() 設置返回星期幾 setTime() 設置完整的時間 注意： setDay(),61,JavaScript內(nèi)置對象,4. 日期時間(Date)對象 提示： 月份數(shù)為（0-11） 日期數(shù)為

26、（1-31） 星期數(shù)為（0-6） 小時數(shù)為（0-23） 分鐘數(shù)為（0-59） 秒數(shù)為 （0-59） 毫秒數(shù)為（0-999）,62,JavaScript內(nèi)置對象,5. 舉例 例1：Date對象常用方法測試 例2：顯示當天的時間 例3：顯示用戶的進站時間 例4：時間設置 例5：倒計時,63,對象實例名稱.屬性 對象實例名稱.方法 new：定義對象實例 語法：對象實例名稱 = new 對象類型(參數(shù)) 引用：對象實例名稱.屬性 對象實例名稱.方法 this：代表當前對象, 用在不同的地方, 有不同的結(jié)果。 this.屬性 this.方法,面向?qū)ο蟮幕靖拍?64,Math. *可以直接使用不需要先定

27、義 String(字符串) Array(數(shù)組) *必須先定義new后引用 Date(日期),JavaScript內(nèi)置對象,舉例,65,JavaScript內(nèi)置對象,5. 用戶自定義對象 在實際應用應用中，JavaScript提供的內(nèi)置對象往往不能滿足用戶的需求，因此，常常需要建立用戶自定義對象。對象(Object)是一組經(jīng)過組織的數(shù)據(jù)，在JavaScript中的每一個對象都有兩個相關的成員：屬性(Property)和方法(Method)。建立自定義對象就是為對象定義：屬性和方法。,66,JavaScript內(nèi)置對象,5. 用戶自定義對象 其步驟是: 1) 寫一個構(gòu)造函數(shù)來定義: 對象類 a)

28、為對象類定義 屬性 b) 為對象類定義 方法 先將方法的名稱放到對象的構(gòu)造函數(shù)中 寫一個函數(shù)來描述該對象方法的內(nèi)容 2) 利用new創(chuàng)建: 對象實例,67,對象類型：member 屬性： name sex 方法： display(),68,1) 定義對象類型function member(name, sex) = name; this.sex = sex; this.display = display; ,2) 描述對象的方法 function display() var str = + 是 + this.sex; document.write( + s

29、tr); ,69,3) 創(chuàng)建對象實例 var papa = new member(楊宏文, 男生); var mama = new member(黃雅玲, 女生); papa.display(); mama.display();,舉例,70,JavaScript內(nèi)置對象,作業(yè)題 1、利用日期對象，對不同的進站時間，顯示不同的提示信息。比如，上午六點到下午六點，顯示“將有限的時間用在作最有意義的事”；其他時間顯示“現(xiàn)在是休息時間”。（答案） 2、檢測用戶輸入的郵件格式是否正確。 （答案） 3、用戶進入時，顯示“歡迎您進入本網(wǎng)站！”；離開時，顯示“謝謝您，歡迎下次再來！”。 答案： ,71,Jav

30、aScript對象及其層次關系,Window,Frame,Document,Location,History,Plugin,Anchor,Applet,Area,Form,Image,Link,Layer,CheckBox,Radio,Submit,Hidden,Passward,FileUpload,Text,Textarea,Select,Reset,Button,Option,72,1.功能：頂層對象, 用來表示瀏覽器所打開的窗口。 2.格式 指定窗口： 窗口名.屬性 窗口名.方法（參數(shù)群） 打開當前窗口的窗口：opener.屬性 opener.方法（參數(shù)群） 框架中的頂級窗口：top.

31、屬性 top.方法（參數(shù)群） 當前活動窗口：self.屬性 self.方法（參數(shù)群） 例如：win1.document.title=“廣告窗口” self.close() opener.document.forms0.user.value=“張永”,窗口對象(WINDOW),73,3.屬性 name 窗口的名字。 closed 判斷窗口是否已經(jīng)被關閉，返回布爾值。 document 包含當前文檔的信息，(該屬性本身是對象) history 當前窗口最近瀏覽過的網(wǎng)頁(該屬性本身是對象)。 location 窗口所顯示文檔的完整URL(該屬性本身是對象) frames 窗口的框架對象數(shù)組, 以數(shù)組

32、索引值表示， (該屬性本身也是一個對象)。 length 窗口內(nèi)的框架個數(shù)。 opener 代表使用open打開當前窗口的腳本所在的窗口。 self 代表當前窗口。 top 代表當前框架的最頂層窗口。,窗口對象(WINDOW),74,4.方法 open( URL, 窗口名稱, ,窗口規(guī)格 ) 打開一個新窗口 URL：1,2,3 窗口名稱: name _top / _blank 窗口規(guī)格: *P112 表4-4 例： NewWin=open( , _blank, height=100,width=300);,注意：引用時不需聲稱 new,75,3.屬性 (規(guī)格參數(shù)) defaultStatus

33、缺省的狀態(tài)欄信息。 status 狀態(tài)欄中的信息。 scrollbars 瀏覽器的滾動條（包括水平和垂直滾動條）。 toolbar 瀏覽器的工具欄。 menubar 瀏覽器的菜單欄。 locationbar 瀏覽器的地址欄。 innerHeight 窗口內(nèi)容區(qū)的高度（以像素表示）。 innerWidth 窗口內(nèi)容區(qū)的寬度（以像素表示）。 outerHeight 窗口邊界的高度（以像素表示）。 outerWidth 窗口邊界的寬度（以像素表示）。 pageXOffset 網(wǎng)頁x-position的位置（以像素表示）。 pageYOffset 網(wǎng)頁y-position的位置（以像素表示）。,窗口對

34、象(WINDOW),p112,76,window document.write(網(wǎng)絡技術學習網(wǎng)); window.document.write(網(wǎng)絡技術學習網(wǎng)); var NewWin=open(WINDOW21.htm,MyWindow, height=100,width=300); var NewWin=window.open(WINDOW21.htm,MyWindow, height=100,width=300); NewWin.document.write(Open Window Name is: + NewW + );,open(URL, 窗口名稱, ,窗口規(guī)格),舉例

35、,77,4.方法 open(URL, 窗口名稱, ,窗口規(guī)格) 打開一個新窗口。 close() 關閉窗口。 MoveBy(水平點數(shù)，垂直點數(shù)) MoveTo(x，y) 將窗口移動至(x,y)坐標處，參數(shù) 取絕對值。 ResizeBy(水平點數(shù)，垂直點數(shù)) 調(diào)整窗口大小，參數(shù) 取相對值。負值為減小。 ResizeTo(寬度，高度) setTimeout(，毫秒數(shù)) 等待一段 指定的毫秒數(shù)時間, 然后運行指令。 clearTimeout(定時器對象) 清除 setTimeout定義的 計時程序。,窗口對象(WINDOW),78,4.方法 setInterval( ，毫秒數(shù)) 設置一個定時程序。

36、clearInterval(定時器對象) 清除 setInterval定義的計時器 focus() 將焦點移到此窗口。 blur() 把焦點從指定窗口移開。 home() 進入客戶端在瀏覽器上設置的主頁。 stop() 停止加載網(wǎng)頁內(nèi)容。 back() 返回歷史記錄的上一個網(wǎng)頁。 forward() 加載歷史記錄的下一個網(wǎng)頁。,窗口對象(WINDOW),79,4.方法 alert(字符串) 傳送警告信息對話框。 confirm(字符串) 打開一個Confirm對話框,用戶可以選擇 OK或Cancel，如果用戶單擊OK,該方法返回 true，單擊Cancel返回false。 prompt(“字符

37、串”，默認值) 打開一個Prompt對話框, 用戶可向該框鍵入文本,并把鍵入的文本返回 到腳本。,窗口對象(WINDOW),80,5.事件 onFocus onBlur onError onLoad onUnload onDragDrop onMove onResize,窗口對象(WINDOW),81,6.舉例 例1：改變窗口的大小實例 例2：打開窗口 例3：頁面下落效果 例4：Prompt方法實例 例5：setInterval實例 例6：setTimeout實例 例7：WINDOW對象綜合實例,窗口對象(WINDOW),82,單擊“來者何人”，打開一200*100的窗口。 打開網(wǎng)頁時，自動打

38、開一300*100的窗口。,83,1.功能 它為window對象的一個屬性, 用來存儲客戶端最近訪問過的網(wǎng)頁清單。 2.格式 history.屬性 history.方法(參數(shù)) 3.屬性 length 存儲在記錄清單中的網(wǎng)頁數(shù)目。 current 當前的網(wǎng)頁地址。 next 下一個歷史記錄的網(wǎng)頁地址。 previous 上一個歷史記錄的網(wǎng)頁地址。,歷史對象(HISTORY),84,4.方法 Back() 回到客戶端查看過的上一頁。 Forward() 回到客戶端查看過的下一頁。 Go(整數(shù)或URL字符串) 前往歷史記錄中的某個網(wǎng)頁 5.舉例 例：history對象實例,歷史對象(HISTORY

39、),繼續(xù),85,歷史對象(HISTORY),history.back(),history.forward(),history.go(),86,1.功能 代表特定窗口的URL信息。 一個完整的URL格式如下： protocol / host：port / path # hash ? search protocol： 通信協(xié)議 http host：主機名稱 port： 通信端口 path：文件路徑 hash：定位錨點 search：查詢信息,位置對象(LOCATION),87,2.語法 location.屬性 location.方法（參數(shù)） 3.屬性 hash URL中定位錨點名稱。 host U

40、RL中主機名部分。 hostname URL中host：port部分。 href 完整的URL字符串。 pathname URL中path部分。 port URL的端口port部分。 protocol URL的通信協(xié)議。 search 以問號(?)開始的URL中的一部分,用于 指定搜索信息。,位置對象(LOCATION),88,4.方法 reload() 重新加載(刷新)當前的網(wǎng)頁。 replace(網(wǎng)址) 用特定的網(wǎng)頁取代當前的網(wǎng)頁。 5.舉例 (用普通文字實現(xiàn)超鏈接) (用A標記字實現(xiàn)超鏈接),位置對象(LOCATION),例1：用普通文字實現(xiàn)超鏈接的范例,89, document.tit

41、le = 自動打開網(wǎng)頁范例; var sec = 5; function countDown() if (sec 0) num.innerHTML = sec-; else location.href = “”; ,例2：自動打開網(wǎng)頁范例,90, 五秒鐘后自動帶你前往 中山大學網(wǎng)頁 5 ,例2：自動打開網(wǎng)頁范例,91,每一個框架對象相當于窗口(WINDOW)對象，因此框架對象可以使用窗口對象的所有屬性和方法。,框架對象(FRAME),1.框架組的結(jié)構(gòu),2.框架組的層次,92,3.框架的引用 top.leftFrame top.upFrame top.downFrame 或 top.frames

42、0 top.frames1 top.frames2 4.舉例,框架對象(FRAME),93,文件對象(Document)代表當前的HTML對象，是由標記組構(gòu)成的，JavaScript自動為每一個HTML文件建立一個document對象，用來顯示HTML文件。,文檔對象(DOCUMENT),94,1.語法 document.屬性 document.方法 2.屬性 title 文檔的標題()。 links 文件中的所有鏈接，以數(shù)組索引值表示。 linkColor 文檔的鏈接的顏色,即標記中 的LINK屬性。 alinkColor 活動鏈接的顏色(ALINK)。 vlinkColor 指向已點擊過的

43、超鏈接文本顏色, 即 標記的VLINK特性 bgColor 文檔的背景顏色(BGCOLOR)。 fgColor 文檔中文本顏色(中的TEXT特性),文檔對象(DOCUMENT),95,2.屬性 forms 文件中的所有表單，以數(shù)組索引值表示。 images 文檔中所有image，以數(shù)組索引值表示。 lastModified 文檔最后的修改日期。 anchors 文檔中所有錨點，以數(shù)組索引值表示。 cookie 存儲于cookie.txt文件內(nèi)的一段信息, 它是該 文檔對象的一個屬性 URL 表示該文件的網(wǎng)址。,文檔對象(DOCUMENT),96,3.方法 write(“字符串”) 將字符串或數(shù)

44、值寫到文件中。 4.事件 onClick、onDblClick、onKeyDown、onKeyPress、onKeyUp、onMouseOver、onMouseUp 5.舉例 例1：測試文件對象的顏色屬性 例2：網(wǎng)頁修改日期時間,文檔對象(DOCUMENT),97,當文檔中包含標記時，JavaScript自動建立相對應的錨點對象。這些對象可以用document的anchors屬性，搭配數(shù)組的索引方式來進行訪問控制。 例如： 第一個錨點對象: document. anchors 0 第二個錨點對象: document. anchors 1,錨點對象(ANCHORS),98,1.語法 docume

45、nt.錨點名.屬性 document.錨點名.方法 或 document.anchors.屬性 document.anchors.方法 2.屬性 name 表示錨點的名稱。,錨點對象(ANCHORS),99,無論是文字、圖形或圖像映射，只要是用來作為超級鏈接用的對象，JavaScript自動建立相對應的鏈接對象。這些對象可以用document的links屬性，搭配數(shù)組的索引方式來進行訪問控制。 例如： 第一個鏈接對象: document.links0 第二個鏈接對象: document.links1 ,鏈接對象(LINKS),100,1.語法 document.鏈接名.屬性 document.

46、鏈接名.方法 或 document.links.屬性 document.links.方法 2.屬性 hash 表示URL字符串中錨點的名稱。 host 表示主機域名或IP地址。 hostname 表示URL當中的host與port的部分。 href 完整的URL字符串。 pathname 表示URL當中的目錄路徑(path)部分。,鏈接對象(LINKS),101,2.屬性 port 表示URL當中的通信端口(port)部分。 protocol 表示URL當中的通信協(xié)議部分 search 表示URL當中的查詢字符串部分。 target 代表目標的窗口，即HTML中的TARGET屬性 text 表

47、示A標記中的文字。 Length 其返回值為當前文檔中超級鏈接的數(shù)目 3.事件 onClick、onDblClick、onKeyDown、onKeyPress、onKeyUp、onMouseOver、onMouseUp、onMouseOut、onMouseDown 4.舉例,鏈接對象(LINKS),102,當文件中包含標記時，JavaScript自動建立相對應的圖像對象。這些對象可以用document的images屬性，搭配數(shù)組的索引方式來進行訪問控制。 例如： 第一個圖像對象: document. images 0 第二個圖像對象: document. images 1 ,圖像對象(IMAG

48、ES),103,2.屬性 src 圖像的URL，SRC屬性。 border 圖像的邊框，標記的BORDER屬性。 width 圖像的寬度，WIDTH屬性。 height 圖像的高度，HEIGHT屬性。 hspace 圖像水平空白，HSPACE屬性。 vspace 圖像垂直空白，VSPACE屬性。 lowsrc 圖像的第分辨率版本，LOWSRC屬性。 complete 表示瀏覽器是否完成了圖像的加載， 一個布爾值。 3.事件:onAbort、onError、onLoad、onKeyDown、onKeyPress、onKeyUp,圖像對象(IMAGES),104,表單對象(Form)提供一個讓客戶

49、端輸入文字或進行選擇的功能，例如：單選按鈕、復選框、選擇列表等。由標記組構(gòu)成，JavaScript自動建立一個表單對象，并將用戶端的信息送至服務器進行處理。表單對象是文件對象(document)的子對象，同時，它也包含許多子對象。,表單對象(FORM),105,1.表單對象的使用格式 document.forms索引值.屬性 document.forms索引值.方法(參數(shù)群) 或 document.表單名稱.屬性 document.表單名稱.方法(參數(shù)群) 2.常用屬性 name：表單名，相當于標記的name屬性 action：相當于標記的ACTION屬性。 method：輸入窗體的數(shù)據(jù)傳送到

50、服務器上的方式， 即(FORM)標記中的METHOD屬性。,表單對象(FORM),106,2.常用屬性 elements：表單中的所有控件，以數(shù)組索引值 表示。 length：表單中的控件的個數(shù)。 例： document.forms索引值.elements索引值.屬性 3.常用方法 submit() 提交表單(與submit按鈕的作用相同)。 reset() 重寫表單(與使用reset按鈕的作用相同)。,表單對象(FORM),107,2.常用屬性 Text： 單行文本。 Password: 密碼對象。 Checkbox: 復選框。 Radio：單選按鈕。 Submit：提交按鈕。 Reset：

51、復位按鈕。 Button：按鈕。 Textarea: 多行文本。 Select: 選擇框。 Option：選項對象。 注意：表單域?qū)傩酝瑫r也是對象,表單域?qū)ο?FORM),108,當JavaScript讀到標記中的type屬性值為text時，自動建立一個文本按鈕對象，并將該對象放到表單對象的elements數(shù)組當中，讓程序員可以通過一定的方法來控制這一對象。 1.使用文本對象的格式 document.forms索引值.elements索引值.屬性 document.forms索引值.elements索引值.方法(參數(shù)群) 或 document.表單名稱.文本對象名稱.屬性 document.表

52、單名稱.文本對象名稱.方法(參數(shù)群),單行文本對象(text),109,2.常用屬性 name: text對象的名字 defaultValue: text對象的缺省值 type: text對象的類型(NAME屬性) value: text的當前值(VALUE屬性值)。 3.常用方法 Blur() 把焦點從文本框移開。 Focus() 把焦點移到文本框。 Select() 將該對象設置成選取狀態(tài)。,單行文本對象(text),110,4.事件 onBlur、onFocus、onChange、onSelect、onClick、onDblClick、onKeyDown、onKeyPress、onKey

53、Up、onMouseOver、onMouseUp、onMouseOut、onMouseDown、onMouseMove 5.舉例 單行文本范例 姓名： 運行,單行文本對象(text),111,當JavaScript讀到標記中的type屬性值為password時，自動建立一個密碼對象，并將該對象放到表單對象的elements數(shù)組當中，讓程序員可以通過一定的方法來控制這一對象。 注： 其引用方法與單行文本相同。,密碼對象(password),112,2.常用屬性 name: password對象的名字 defaultValue: text對象的缺省值 type: password對象的類型(NAM

54、E屬性) value: password的當前值(VALUE屬性值) 3.常用方法 Blur() 把焦點從文本框移開。 Focus() 把焦點移到文本框。 Select() 將該對象設置成選取狀態(tài)。,113,當JavaScript讀到標記中的type屬性值為button時，自動建立一個按鈕對象，并將該對象放到表單對象的elements數(shù)組當中。 按鈕對象包括：普通按鈕(button) 提交按鈕(submit) 重置按鈕(reset) 1.使用按鈕對象的格式 document.forms索引值.elements索引值.屬性 document.forms索引值.elements索引值.方法(參數(shù)群

55、) 或 document.表單名稱.按鈕對象名稱.屬性 document.表單名稱.按鈕對象名稱.方法（參數(shù)群）,按鈕對象(button),114,2.常用屬性 name: 按鈕對象的名字。 value: 按鈕上顯示的值。 type: 按鈕類型。(button、submit、reset) 3.常用方法 blur() 把焦點從該對象上移開。 focus() 把焦點移到該對象上。 click() 再該對象上單擊鼠標左鍵。 4.事件 onBlur、onFocus、onClick、onDblClick、onKeyDown、onKeyPress、onKeyUp、onMouseOver、onMouseUp

56、、onMouseOut、onMouseDown、onMouseMove,按鈕對象(buttom),115,例1：用戶登錄界面 例2：輸入信用卡號 例3：輸入四位密碼,舉 例,116,當JavaScript讀到標記時，自動建立一個文本區(qū)域?qū)ο螅⒃搶ο蠓诺奖韱螌ο蟮膃lements數(shù)組當中。 1.使用文本對象的格式 document.forms索引值.elements索引值.屬性 document.forms索引值.elements索引值.方法(參數(shù)群) 或 document.表單名稱.文本區(qū)域?qū)ο竺Q.屬性 document.表單名稱.文本區(qū)域?qū)ο竺Q.方法(參數(shù)群),多行文本對象(TEXTAREA),117,2.屬性 name: 該對象的名字(NAME屬性) defaultValue: 該對象的缺省值(VALUE屬性初值)。 value: 該對象的當前值(VALUE屬性值)。 rows: 設置文本域?qū)ο蟮淖畲罂梢曅袛?shù)。 cols: 設置文本域?qū)ο蟮淖畲罂梢暳袛?shù)。 3.方法 blur() 把焦點從文本框移開。 focus() 把焦點移到文本框。 select() 將該對象設置成選取狀態(tài)。 4.事