javascript技術(shù)詳解.ppt

1、目錄,JavaScript概述 JavaScript基礎(chǔ)語法 JavaScript常用內(nèi)置對象 JavaScript常用DHTML對象,2,主題內(nèi)容,JavaScript概述 JavaScript基礎(chǔ)語法 JavaScript常用內(nèi)置對象 JavaScript常用DHTML對象,3,JavaScript概述,JavaScript是一種網(wǎng)頁編程技術(shù)，大部分使用者將它用于創(chuàng)建動態(tài)交互網(wǎng)頁 JavaScript是一種基于對象和事件驅(qū)動的解釋性腳本語言，具有與Java和C語言類似的語法 JavaScript是一種使用簡單，功能強大的編程語言,4,JavaScript概述特點,簡單易用 簡潔易用，與Ja

2、va有類似的語法 可以使用任何文本編輯工具編寫 只需要瀏覽器就可以執(zhí)行程序 解釋執(zhí)行 事先不編譯 逐行執(zhí)行 無需進行嚴格的變量聲明 基于對象 內(nèi)置大量現(xiàn)成對象，編寫少量程序可以完成目標,5,JavaScript概述使用范圍,適合做哪些事情 客戶端數(shù)據(jù)計算 客戶端表單合法性驗證 瀏覽器對象的調(diào)用 瀏覽器事件的觸發(fā) 網(wǎng)頁特殊顯示效果制作 不適合做哪些事情 大型應(yīng)用程序 圖像、多媒體處理 網(wǎng)絡(luò)實時通訊應(yīng)用,6,JavaScript與Java的區(qū)別,JavaScript與Java運行方式不一樣 JavaScript是解釋執(zhí)行 Java是編譯執(zhí)行 JavaScript不是Java的簡化版本 邏輯運算符、

3、語句結(jié)構(gòu)類似 變量申明、對象調(diào)用等不同 JavaScript和Java功能實現(xiàn)不一樣 JavaScript通過瀏覽器實現(xiàn)程序功能 Java通過Java虛擬機實現(xiàn)程序功能,7,主題內(nèi)容,JavaScript概述 JavaScript基礎(chǔ)語法 JavaScript常用內(nèi)置對象 JavaScript常用DHTML對象,8,JavaScript基礎(chǔ)語法大小寫敏感性,在HTML中大小寫是不敏感的，但是在JavaScript程序中大小寫是敏感的 HTML都是大小寫不敏感的 標準的JavaScript語法定義中是區(qū)分大小寫, function myclick() HelloBtn.value=pause;

4、,大小寫須一致,9,JavaScript基礎(chǔ)語法常量與標識符,常量 直接在程序中出現(xiàn)的數(shù)據(jù)值 標識符 由不以數(shù)字開頭的字母、數(shù)字、下劃線(_)、美元符號($)組成 常用于表示函數(shù)、變量等的名稱 例如：_abc,$abc,abc,abc123是標識符，而1abc不是 JavaScript語言中代表特定含義的詞稱為保留字，不允許程序再定義為標識符,10,JavaScript基礎(chǔ)語法常量與標識符,ECMA v3標準保留的JavaScript的關(guān)鍵字,11,數(shù)據(jù)類型分類,JavaScript數(shù)據(jù)類型,組合類型,Number：數(shù)字 String：字符串 Boolean：布爾,Null：空 Undefin

5、ed：未定義,Array：數(shù)組 Object：對象,基本類型,特殊類型,12,String數(shù)據(jù)類型,簡介 是由Unicode字符、數(shù)字、標點符號組成的序列 字符串常量首尾由單引號或雙引號括起 JavaScript中沒有字符類型 常用特殊字符在字符串中的表達 字符串中部分特殊字符必須加上右劃線 常用的轉(zhuǎn)義字符,13,String數(shù)據(jù)類型,String數(shù)據(jù)類型的使用 特殊字符的使用方法和效果 Unicode的插入方法,/測試特殊字符的書寫 var aa=u4f60u597dn歡迎來到JavaScript世界 ; alert(aa);,你,好,換行,14,Boolean數(shù)據(jù)類型,簡介 Boolean

6、類型僅有兩個值：true和false，也代表1和0，實際運算中true=1,false=0 布爾值也可以看作on/off、yes/no、1/0對應(yīng)true/false Boolean值主要用于JavaScript的控制語句，例如：,if (x=1) y=y+1; else y=y-1; ,15,Null、Undefined,簡介 Null在程序中代表變量沒有值或者不是一個對象 Undefined代表變量的值尚未指定或者對象屬性根本不存在,16,數(shù)據(jù)類型轉(zhuǎn)換,JavaScript屬于松散類型的程序語言 變量在聲明的時候并不需要指定數(shù)據(jù)類型 變量只有在賦值的時候才會確定數(shù)據(jù)類型 表達式中包含不同類

7、型數(shù)據(jù)則在計算過程中會強制進行類別轉(zhuǎn)換,數(shù)字 + 字符串：數(shù)字轉(zhuǎn)換為字符串 數(shù)字 + 布爾值：true轉(zhuǎn)換為1，false轉(zhuǎn)換為0 字符串 + 布爾值：布爾值轉(zhuǎn)換為字符串true或false,17,數(shù)據(jù)類型轉(zhuǎn)換,強制類型轉(zhuǎn)換函數(shù) 函數(shù)parseInt：強制轉(zhuǎn)換成整數(shù) 例如parseInt(6.12)=6 函數(shù)parseFloat： 強制轉(zhuǎn)換成浮點數(shù) 例如parseFloat(6.12)=6.12 函數(shù)eval：將字符串強制轉(zhuǎn)換為表達式并返回結(jié)果 例如eval(1+1)=2,eval(12)=true,18,數(shù)據(jù)類型轉(zhuǎn)換,類型查詢函數(shù) 函數(shù)typeof ：查詢數(shù)值當前類型 (string / n

8、umber / boolean / object ) 例如typeof(test+3)=string,typeof(null)=object,19,算術(shù)運算符,加()、 減()、 乘(*) 、除(/) 、余數(shù)(% ) 加、減、乘、除、余數(shù)和數(shù)學(xué)中的運算方法一樣 例如：9/2=4.5，4*5=20，9%2=1 -除了可以表示減號還可以表示負號 例如：x=-y +除了可以表示加法運算還可以用于字符串的連接 例如：abc+def=abcdef,20,算術(shù)運算符,遞增() 、遞減() 假如x=2，那么x+表達式執(zhí)行后的值為3，x-表達式執(zhí)行后的值為1 i+相當于i=i+1，i-相當于i=i-1 遞增和

9、遞減可以放在變量前也可以放在變量后,21,邏輯運算符,等于 ( = ) 、不等于( != ) 、 大于( ) 、 小于( =) 、小于等于(=) 與 ( . else 語句; . 功能說明 如果表達式的值為true則執(zhí)行語句1，否則執(zhí)行語句2,表達式,語句1,true,false,語句2,27,if選擇控制語句,if語句嵌套格式 if (表達式1) 語句1; else if (表達式2) 語句2; else if (表達式3) 語句3; else 語句4; 功能說明 執(zhí)行順序參見右圖,表達式1,表達式2,表達式3,語句1,語句2,語句3,語句4,true,true,true,false,fal

10、se,false,28,switch選擇控制語句,switch基本格式 switch (表達式) case 值1:語句1;break; case 值2:語句2;break; case 值3:語句3;break; default:語句4; 功能說明 詳細的計算過程參考右圖,case 值1,case 值2,語句1,語句2,true,true,false,表達式,case 值2,語句3,true,false,語句4,false,29,switch選擇控制語句,程序范例 對變量x的值進行判斷，采用switch轉(zhuǎn)換成相應(yīng)的星期名稱,switch(x) case 1:y=星期一;break; case 2

11、:y=星期二;break; case 3:y=星期三;break; case 4:y=星期四;break; case 5:y=星期五;break; case 6:y=星期六;break; case 7:y=星期日;break; default: y=未定義; ,swith比else if結(jié)構(gòu)更加簡潔清晰,30,for循環(huán)控制語句,for循環(huán)基本格式 for (初始化;條件;增量) 語句1; . 功能說明 實現(xiàn)條件循環(huán)，當條件成立時，執(zhí)行語句1，否則跳出循環(huán)體,條件,語句1,false,true,初始化,增量,31,for循環(huán)控制語句,程序范例,for (var i=1;ihello ); do

12、cument.write(); /循環(huán)輸出H1到H7的字體大小,32,while循環(huán)控制語句,while循環(huán)基本格式 while (條件) 語句1； . 功能說明 運行功能和for類似，當條件成立循環(huán)執(zhí)行語句花括號內(nèi)的語句，否則跳出循環(huán),條件,語句1,false,true,初始化,33,while循環(huán)控制語句,程序范例,var i=1; while (ihello ); document.write(); i+; /循環(huán)輸出H1到H7的字體大小,采用while和for的輸出效果一樣,34,變量的聲明與使用,變量申明語句 var a; var x,y; 變量賦值語句 a=1; x=hello,h

13、ow are you!; y=x; 變量的調(diào)用 alert(a); document.write(Tom,+x); ,允許一次定義多個變量,不需要指定變量類型,賦值為數(shù)值,賦值為字符串,賦值為另一個變量,35,函數(shù)的聲明與使用,函數(shù)的定義 function 函數(shù)名 (參數(shù))函數(shù)體; return 返回值; 功能說明 可以使用變量、常量或表達式作為函數(shù)調(diào)用的參數(shù) 函數(shù)由關(guān)鍵字function定義 函數(shù)名的定義規(guī)則與標識符一致，大小寫是敏感的 返回值必須使用return,36,函數(shù)的聲明與使用,使用范例, /* Sayhello是定義的函數(shù)名，前面必須加上function和空格*/ functio

14、n SayHello() var hellostr; var myname=prompt(請問您貴姓？,陳); hellostr=您好，+myname+先生，歡迎進入探索之旅！; alert(hellostr); document.write(hellostr); /這里是對前面定義的函數(shù)進行調(diào)用 SayHello(); ,在調(diào)用函數(shù)的時候要注意函數(shù)的大小寫，如果寫成sayhello或sayHello都會出錯,37,對象,對象的概念與分類： 對象由屬性和方法封裝而成 JavaScript是一種基于對象語言，對象是JavaScript中最重要的元素 JavaScript包含四種對象 內(nèi)置對象 自

15、定義對象 瀏覽器對象 ActiveX對象,38,對象,11種內(nèi)置對象 包括 Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp , Object 簡介 在JavaScript中除了null和undefined以外其他的數(shù)據(jù)類型都被定義成了對象 也可以用創(chuàng)建對象的方法定義變量 String、Math、Array、Date、RegExp都是JavaScript中重要的內(nèi)置對象,39,主題內(nèi)容,JavaScript概述 JavaScript基礎(chǔ)語法 JavaScript常用內(nèi)置對象 JavaScrip

16、t常用DHTML對象,40,內(nèi)置對象的分類.,11種內(nèi)置對象 包括 Array, Boolean, Date, Math, Number , String Error, Function, Global , Object, RegExp 簡介 在JavaScript中除了null和undefined以外其他的數(shù)據(jù)類型都被定義成了對象 可以用創(chuàng)建對象的方法定義變量 String、Math、Array、Date是JavaScript中常用的對象,41,.內(nèi)置對象的分類,42,創(chuàng)建String對象,自動創(chuàng)建字符串對象 手工創(chuàng)建字符串對象,var str1=hello world; alert(str

17、1.length); alert(str1.substr(1,5);,var str1= new String(hello word); alert(str1.length); alert(str1.substr(1,3);,調(diào)用字符串的對象屬性或方法時自動創(chuàng)建對象，用完就丟棄,采用new創(chuàng)建字符串對象str1，全局有效,43,String對象的屬性,獲取字符串長度 length,44,String對象的方法,String對象的方法分類,String對象方法,格式編排方法,大小寫轉(zhuǎn)換,獲取指定字符,查詢字符串,子字符串處理,截取,替換,分割,連接,45,String對象的方法(2) ,46,S

18、tring對象的方法(2) - 大小寫轉(zhuǎn)換.,書寫格式 x.toLowerCase() x.toUpperCase() 使用注解 x代表字符串對象 返回轉(zhuǎn)換后的字符串,var str1=AbcdEfgh; var str2=str1.toLowerCase(); var str3=str1.toUpperCase(); alert(str2); /結(jié)果為abcdefgh alert(str3); /結(jié)果為ABCDEFGH,47,String對象的方法(2) - 獲取指定字符.,書寫格式 x.charAt(index) x.charCodeAt(index) 使用注解 x代表字符串對象 inde

19、x代表字符位置 index從0開始編號 charAt返回index位置的字符 charCodeAt返回index位置的Unicode編碼,var str1=JavaScript網(wǎng)頁教程; var str2=str1.charAt(12); var str3=str1.charCodeAt(12); alert(str2); /結(jié)果為教 alert(str3); /結(jié)果為25945,48,. String對象的方法(2) - 查詢字符串.,書寫格式 x.match(regexp) x.search(regexp) 使用注解 x代表字符串對象 regexp代表正則表達式或字符串 match返回匹配

20、字符串的數(shù)組，如果沒有匹配則返回null search返回匹配字符串的首字符位置索引,var str1=JavaScript網(wǎng)頁教程; var str2=str1.match(Script); var str3=str1.search(Script); alert(str20); /結(jié)果為Script alert(str3); /結(jié)果為4,49,String對象的方法(3),50,String對象的方法(3) - 獲取子字符串.,書寫格式 x.substr(start, length) x.substring(start, end) 使用注解 x代表字符串對象 start表示開始位置 leng

21、th表示截取長度 end是結(jié)束位置加1 第一個字符位置為0,var str1=abcdefgh; var str2=str1.substr(2,4); var str3=str1.substring(2,4); alert(str2); /結(jié)果為cdefg alert(str3); /結(jié)果為cd,51,String對象的方法(3) - 替換子字符串.,書寫格式 x.replace(findstr,tostr) 使用注解 x代表字符串對象 findstr要找的子字符串 tostr替換為的字符串 返回替換后的字符串,var str1=abcdefgh; var str2=str1.replace(

22、cd,aaa); alert(str2); /結(jié)果為abaaaefgh,52,String對象的方法(3) - 分割字符串.,書寫格式 x.split(bystr) 使用注解 x代表字符串對象 bystr作為分割字符串 返回分割后的字符串數(shù)組,var str1=一,二,三,四,五,六,日; var strArray=str1.split(,); alert(strArray1); /結(jié)果為二,53,String對象的方法(3) - 連接字符串.,書寫格式 y=x.concat(addstr) 使用注解 x代表字符串對象 addstr為添加字符串 返回x+addstr字符串,var str1=a

23、bcd; var str2=str1.concat(efgh); alert(str2); /結(jié)果為abcdefgh,54,創(chuàng)建Array對象.,創(chuàng)建數(shù)組對象 初始化數(shù)組對象,var cnweek=new Array(7); var books=new Array();,創(chuàng)建數(shù)組時允許指定元素個數(shù)也可以不指定元素個數(shù),也可以直接在建立對象時初始化數(shù)組元素，元素類型允許不同,var cnweek=new Array(7); cnweek0=星期日; cnweek1=星期一; . cnweek6=星期六;,var test=new Array(100,a,true);,55,Array對象的屬性,

24、獲取數(shù)組元素的個數(shù) length,56,獲取數(shù)組元素的個數(shù),書寫格式 x.length 使用注解 x代表數(shù)組對象 length必須小寫 中間用點操作符調(diào)用 返回大于或等于0整數(shù),var cnweek=new Array(7); cnweek0=星期日; cnweek1=星期一; cnweek2=星期二; cnweek3=星期三; cnweek4=星期四; cnweek5=星期五; cnweek6=星期六; for (var i=0;icnweek.length;i+) document.write(cnweeki+ | ); ,57,Array對象的方法,58,連接數(shù)組.,書寫格式 x.joi

25、n(bystr) x.toString() 使用注解 x代表數(shù)組對象 bystr作為連接數(shù)組中元素的字符串 返回連接后的字符串 與字符串的split功能剛好相反,var arr1=1, 2, 3,4,5,6,7; var str1=arr1.join(-); alert(str1); /結(jié)果為1-2-3-4-5-6-7,59,.連接數(shù)組.,書寫格式 x.concat(value,.) 使用注解 x代表數(shù)組對象 value作為數(shù)組元素連接到數(shù)組的末尾 返回連接后的數(shù)組 concat方法并不改變x自身的值,var a = 1,2,3; var b=a.concat(4, 5) ; alert(a.

26、toString(); /返回結(jié)果為1,2,3 alert(b.toString(); /返回結(jié)果為1,2,3,4,5,60,數(shù)組排序.,書寫格式 x.reverse() x.sort() 使用注解 x代表數(shù)組對象 返回排序后的數(shù)組 排序后x會發(fā)生改變,var arr1=32, 12, 111, 444; arr1.reverse(); /顛倒數(shù)組元素 alert(arr1.toString(); /結(jié)果為444,111,12,32 arr1.sort();/排序數(shù)組元素 alert(arr1.toString(); /結(jié)果為111,12,32,444,61,Array對象的方法,62,獲取子

27、數(shù)組.,書寫格式 x.slice(start, end) 使用注解 x代表數(shù)組對象 start表示開始位置索引 end是結(jié)束位置下一數(shù)組元素索引編號 第一個數(shù)組元素索引為0 start、end可為負數(shù)，-1代表最后一個數(shù)組元素 end省略則相當于從start位置截取以后所有數(shù)組元素,63,var arr1=a,b,c,d,e,f,g,h; var arr2=arr1.slice(2,4); var arr3=arr1.slice(4); var arr4=arr1.slice(2,-1); alert(arr2.toString(); /結(jié)果為c,d alert(arr3.toString()

28、; /結(jié)果為e,f,g,h alert(arr4.toString(); /結(jié)果為c,d,e,f,g,.獲取子數(shù)組.,程序圖解,slice(2,4),slice(4),slice(2,-1),64,.獲取子數(shù)組.,書寫格式 x. splice(start, deleteCount, value, .) 使用注解 x代表數(shù)組對象 splice的主要用途是對數(shù)組指定位置進行刪除和插入 start表示開始位置索引 deleteCount刪除數(shù)組元素的個數(shù) value表示在刪除位置插入的數(shù)組元素 value參數(shù)可以省略,65,進出棧操作.,書寫格式 x.push(value, .) x.pop() 使

29、用注解 x代表數(shù)組對象 value可以為字符串、數(shù)字、數(shù)組等任何值 push是將value值添加到數(shù)組x的結(jié)尾 pop是將數(shù)組x的最后一個元素刪除,66,var arr1=1,2,3; arr1.push(4,5); alert(arr1); /結(jié)果為1,2,3,4,5 arr1.push(6,7); alert(arr1) /結(jié)果為1,2,3,4,5,6,7 arr1.pop(); alert(arr1); /結(jié)果為1,2,3,4,5,.進出棧操作.,程序圖解,push(4,5),push(6,7),pop(),67,Math對象的屬性.,Math對象的屬性都是數(shù)學(xué)常數(shù) Math.E （自然

30、數(shù)） Math.LN2 （ln2） Math.LN10 （ln10） Math.LOG2E （log 2e） Math.LOG10E （log e） Math.PI （圓周率） Math.SQRT1_2 （根號1/2） Math.SQRT2 （根號2）,68,Math對象的方法.,69,.Math對象的方法.,70,. Math對象的方法.,程序示范,function writeln(mystr) document.write(mystr+); var x=0.5; var y=0.8; writeln(sin(+x+)=+Math.sin(x); writeln(cos(+x+)=+ Mat

31、h.cos(x); writeln(tan(+x+)=+ Math.tan(x); writeln(asin(+x+)=+ Math.asin(x); writeln(acos(+x+)=+ Math.acos(x); writeln(atan(+x+)=+ Math.atan(x); writeln(atan2(+y+,+x+)=+ Math.atan2(y,x);,71,.Math對象的方法.,72,.Math對象的方法.,73,. Math對象的方法,程序示范,function writeln(mystr) document.write(mystr+); var x=-1.1; var

32、y=2.6; writeln(abs(+x+)=+Math.abs(x); writeln(max(+x+,+y+)=+ Math.max(x,y); writeln(min(+x+,+y+)=+ Math.min(x,y); writeln(random()=+ Math.random(); writeln(round(+x+)=+ Math.round(x); writeln(floor(+x+)=+ Math.floor(x); writeln(ceil(+x+)=+ Math.ceil(x);,74,創(chuàng)建Date對象.,創(chuàng)建日期對象,/方法1：不指定參數(shù) var nowd1=new D

33、ate(); alert(nowd1.toLocaleString( ); /方法2：參數(shù)為日期字符串 var nowd2=new Date(2004/3/20 11:12); alert(nowd2.toLocaleString( ); var nowd3=new Date(04/03/20 11:12); alert(nowd3.toLocaleString( );,75,Date對象的方法.,獲取日期和時間 getDate() 獲取日 getDay () 獲取星期 getMonth () 獲取月 getFullYear () 獲取完整年份 getYear () 獲取年 getHours

34、() 獲取小時 getMinutes () 獲取分鐘 getSeconds () 獲取秒 getMilliseconds () 獲取毫秒 getTime () 返回累計毫秒數(shù)(從1970/1/1午夜),76,.Date對象的方法.,程序示范,function writeln(mystr) document.write(mystr+); var x=new Date(1997,7,1,12,23,54,230) /1997年8月1日12點23分54秒230毫秒 writeln(x.getFullYear ();/返回年1997 writeln(x.getYear();/返回年97 writeln

35、(x.getMonth();/返回月7 writeln(x.getDate();/返回日1 writeln(x.getDay();/返回星期5 writeln(x.getHours();/返回小時12 writeln(x.getMinutes();/返回分鐘23 writeln(x.getSeconds();/返回秒54 writeln(x. getMilliseconds();/返回毫秒230 writeln(x.getTime(); /返回累計870409434230,77,.Date對象的方法.,設(shè)置日期和時間 setDate(day_of_month)設(shè)置日 setMonth (mon

36、th)設(shè)置月 setFullYear (year)設(shè)置年 setHours (hour)設(shè)置小時 setMinutes (minute)設(shè)置分鐘 setSeconds (second)設(shè)置秒 setMillliseconds (ms)設(shè)置毫秒(0-999) setTime (allms)設(shè)置累計毫秒(從1970/1/1午夜),78,.Date對象的方法.,程序示范,var x=new Date(); x.setFullYear (1997);/設(shè)置年1997 x.setMonth(7);/設(shè)置月7 x.setDate(1);/設(shè)置日1 x.setHours(5);/設(shè)置小時5 x.setMin

37、utes(12);/設(shè)置分鐘12 x.setSeconds(54);/設(shè)置秒54 x.setMilliseconds(230);/設(shè)置毫秒230 document.write(x.toLocaleString( )+); /返回1997年8月1日5點12分54秒 x.setTime(870409430000); /設(shè)置累計毫秒數(shù) document.write(x.toLocaleString( )+); /返回1997年8月1日12點23分50秒,79,.Date對象的方法.,日期和時間的轉(zhuǎn)換 getTimezoneOffset() 返回本地時間與GMT的時間差，以分鐘為單位 toUTCStr

38、ing() 返回國際標準時間字符串 toLocalString() 返回本地格式時間字符串 Date.parse(x) 返回累計毫秒數(shù)(從1970/1/1午夜到本地時間) Date.UTC(x) 返回累計毫秒數(shù)(從1970/1/1午夜到國際時間),80,.Date對象的方法,程序示范,function writeln(mystr) document.write(mystr+); var x=new Date(); writeln(x.getTimezonOffset()=); writeln(x. getTimezoneOffset();/時間差 writeln(x. toUTCString(

39、)=); writeln(x. toUTCString();/國際時間 writeln(x.toLocaleString()=); writeln(x.toLocaleString();/本地時間 writeln(Date.parse(x)=); writeln(Date.parse(x);/本地時間毫秒數(shù) writeln(Date.UTC(x)=); writeln(Date.UTC(x);/UTC毫秒數(shù),81,主題內(nèi)容,JavaScript概述 JavaScript基礎(chǔ)語法 JavaScript常用內(nèi)置對象 JavaScript常用DHTML對象,82,DHTML介紹.,DHTML的定義

40、使用JavaScript和CSS級聯(lián)樣式表操作HTML創(chuàng)造出各種動態(tài)視覺效果統(tǒng)稱為DHTML DHTML是一種瀏覽器端的動態(tài)網(wǎng)頁技術(shù),83,. DHTML介紹,DHTML的功能 動態(tài)改變字體大小和字體顏色 動態(tài)設(shè)定文檔元素的位置、內(nèi)容，甚至隱藏和顯示元素 可以通過事件響應(yīng)機制制作動態(tài)折疊的樹形結(jié)構(gòu)和菜單 可以通過定時器制作時鐘、日歷 可以彈出對話框與用戶進行交互 可以通過表單提交用戶填寫的信息 通過動態(tài)樣式表可以設(shè)定更多的顯示效果 .,84,DHTML對象模型.,DHTML對象模型 將HTML標記、屬性和CSS樣式都對象化 可以動態(tài)存取HTML文檔中的所有元素 可以使用屬性name或id來存取

41、或標記對象 改變元素內(nèi)容或樣式后瀏覽器中顯示效果即時更新 DHTML對象模型包括瀏覽器對象模型和Document對象模型,85,.DHTML對象模型.,Window,Frames,History,Navigator,Document,Location,Event,Form,Table,Anchor,Image,Iframe,.,86,Window對象.,常用屬性,87,.Window對象.,常用屬性,88,.Window對象.,常用方法,89,.Window對象,主要功能 窗口的打開和關(guān)閉 對話框 狀態(tài)欄 定時器 內(nèi)容滾動 調(diào)整窗口大小和位置 Screen對象 History對象 Naviga

42、tor對象 Location對象,90,窗口的打開和關(guān)閉.,91,.窗口的打開和關(guān)閉.,config 參數(shù)具體元素 menubar 菜單條 toolbar 工具條 location 地址欄 directories 鏈接 status 狀態(tài)欄 scrollbars 滾動條 resizeable 可調(diào)整大小 width 窗口寬，以像素為單位 height 窗口高，以像素為單位,參數(shù)值為yes或no,參數(shù)值為數(shù)字 值,92,. 窗口的打開和關(guān)閉,程序示范：打開google搜索窗口,var config= menubar=yes,toolbar=no,location=no, ; config +=

43、directories=no,status=yes, ; config += scrollbars=yes,resizable=yes,; config += width=500,height=300; var openurl= ; window.open(openurl,popwin,config); /僅僅打開窗口,var mywin=window.open(openurl,popwin,config); mywin.close(); /關(guān)閉打開的窗口,93,對話框,分類,對話框,簡單對話框,窗口對話框,alert提示框,confirm確認框,prompt輸入框,showModalDialog(IE4.0),showModelessDialog(IE5.0),94,簡單對話框.,95,.簡單對話框.,顯示效果比較：,alert(您好！); confirm(您好嗎？); prompt(您貴姓？,陳);,96,.簡單對話框,返回值比較：,var firstname=prompt(您貴姓？,陳); if (confirm(您確定？)=true) alert(firstname+先生，您好！); ,不返回值,97,窗口對話框.,參數(shù)說明 url 打開鏈接 arguments 傳入?yún)?shù)