第七講（下）DHTML介紹 計(jì)算機(jī)網(wǎng)絡(luò)安全與防護(hù)的PPT 互聯(lián)網(wǎng)軟件開發(fā)

1、第七講下第七講下DHTMLDHTML介紹介紹 計(jì)算機(jī)網(wǎng)絡(luò)計(jì)算機(jī)網(wǎng)絡(luò)平安與防護(hù)的平安與防護(hù)的PPT PPT 互聯(lián)網(wǎng)軟件開發(fā)互聯(lián)網(wǎng)軟件開發(fā)第七章：第七章：DHTML介紹介紹內(nèi)容提綱內(nèi)容提綱1、DHTML概述概述2、文檔對象模型、文檔對象模型3、JavaScript介紹介紹7.3.1 JavaScript概述什么是什么是JavaScriptJavaScript是一種基于對象的腳本語言，用于開發(fā)是一種基于對象的腳本語言，用于開發(fā)基于客戶端和基于效勞器的基于客戶端和基于效勞器的Internet應(yīng)用程序應(yīng)用程序 腳本腳本Script實(shí)際上就是一段程序，用來完成某實(shí)際上就是一段程序，用來完成某些特殊的功能。

2、腳本程序既可以在效勞器端運(yùn)行些特殊的功能。腳本程序既可以在效勞器端運(yùn)行稱為效勞器端腳本，例如稱為效勞器端腳本，例如ASP腳本、腳本、PHP腳本腳本等，也可以直接在瀏覽器端運(yùn)行稱為客戶端等，也可以直接在瀏覽器端運(yùn)行稱為客戶端腳本。腳本。 JavaScript是平臺無關(guān)的語言，幾乎被所有瀏覽器是平臺無關(guān)的語言，幾乎被所有瀏覽器支持，所以已經(jīng)成為客戶端腳本的標(biāo)準(zhǔn)。支持，所以已經(jīng)成為客戶端腳本的標(biāo)準(zhǔn)。 7.3.1 JavaScript概述JavaScript歷史歷史Javascript是一種由是一種由Netscape的的LiveScript開展而來開展而來的。的。Netscape將這種腳本語言命名為將

3、這種腳本語言命名為LiveScript，它的整個(gè)語法以它的整個(gè)語法以Java為根底，但比為根底，但比Java要簡單，要簡單，同時(shí)，由于它是一種腳本語言，所以無需編譯，同時(shí)，由于它是一種腳本語言，所以無需編譯，可由瀏覽器直接解釋運(yùn)行，而不象可由瀏覽器直接解釋運(yùn)行，而不象Java那樣需要那樣需要經(jīng)過編譯。經(jīng)過編譯。Netscape見見LiveScript大有開展前途，而大有開展前途，而SUN也覺得也覺得可以利用可以利用Livescript為為Java的普及做鋪墊，于是兩的普及做鋪墊，于是兩家簽訂協(xié)議，將家簽訂協(xié)議，將LiveScript改為改為JavaScript，造就，造就了這個(gè)強(qiáng)力的了這個(gè)強(qiáng)力

4、的WEB頁開發(fā)工具。頁開發(fā)工具。7.3.1 JavaScript概述JavaScript的特點(diǎn)的特點(diǎn)11.JavaScript是一種腳本語言是一種腳本語言語法和規(guī)那么沒有可編譯的編程語言那樣嚴(yán)格和復(fù)語法和規(guī)那么沒有可編譯的編程語言那樣嚴(yán)格和復(fù)雜，主要用于格式化文本和使用可編程語言編寫雜，主要用于格式化文本和使用可編程語言編寫的已編譯好的組件。的已編譯好的組件。2.JavaScript是基于對象的語言是基于對象的語言 面向?qū)ο蟪绦蛟O(shè)計(jì)力圖將程序設(shè)計(jì)為一些可以完成面向?qū)ο蟪绦蛟O(shè)計(jì)力圖將程序設(shè)計(jì)為一些可以完成不同功能的獨(dú)立局部不同功能的獨(dú)立局部(即對象即對象)的組合體?；趯Φ慕M合體?；趯ο蟮恼Z言

5、本身已具有創(chuàng)立完成的對象。例如，象的語言本身已具有創(chuàng)立完成的對象。例如，“日日期對象。期對象。3.JavaScript是事件驅(qū)動的語言是事件驅(qū)動的語言JavaScript是事件驅(qū)動的，當(dāng)事件發(fā)生時(shí)，它可對是事件驅(qū)動的，當(dāng)事件發(fā)生時(shí)，它可對之作出響應(yīng)。具體如何響應(yīng)某個(gè)事件取決于你的之作出響應(yīng)。具體如何響應(yīng)某個(gè)事件取決于你的事件響應(yīng)處理程序。事件響應(yīng)處理程序。7.3.1 JavaScript概述JavaScript的特點(diǎn)的特點(diǎn)24.JavaScript較高的平安性較高的平安性JavaScript不能將數(shù)據(jù)存儲在不能將數(shù)據(jù)存儲在Web效勞器或用戶的效勞器或用戶的計(jì)算機(jī)上，更不能對用戶文件進(jìn)行修改或刪

6、除操計(jì)算機(jī)上，更不能對用戶文件進(jìn)行修改或刪除操作。作。5.JavaScript是平臺無關(guān)的語言是平臺無關(guān)的語言JavaScript那么并不依賴于具體的計(jì)算機(jī)平臺雖那么并不依賴于具體的計(jì)算機(jī)平臺雖然有一些限制，它只與解釋它的瀏覽器有關(guān)。然有一些限制，它只與解釋它的瀏覽器有關(guān)。不管使用不管使用Macintosh還是還是Windows，或是，或是UNIX版版本的本的NetscapeNavigator，JavaScript都可正常運(yùn)都可正常運(yùn)行。行。7.3.1 JavaScript概述JavaScript的功能的功能JavaScript的功能總體可以歸結(jié)為兩類：的功能總體可以歸結(jié)為兩類：交互性交互性使

7、用使用JavaScript可以大大加強(qiáng)可以大大加強(qiáng)WEB頁的交互頁的交互性，如輕松的在你的性，如輕松的在你的WEB頁中參加按鈕，顯示帶頁中參加按鈕，顯示帶有控制的文本，建立交互式表格等。有控制的文本，建立交互式表格等。動態(tài)性動態(tài)性JavaScript可以使可以使WEB頁上顯示的文本信息頁上顯示的文本信息動起來或是參加一些動畫，從而使動起來或是參加一些動畫，從而使WEB頁看上去頁看上去活潑誘人?；顫娬T人。7.3.1 JavaScript概述JavaScript不是不是JavaJava是由是由Sun公司開發(fā)公司開發(fā),與平臺無關(guān)的、面向?qū)ο蟮呐c平臺無關(guān)的、面向?qū)ο蟮某绦蛟O(shè)計(jì)語言。程序設(shè)計(jì)語言。Jav

8、a可以用來設(shè)計(jì)獨(dú)立的應(yīng)用程序，也可以用來創(chuàng)可以用來設(shè)計(jì)獨(dú)立的應(yīng)用程序，也可以用來創(chuàng)立一種稱為立一種稱為Applets的小應(yīng)用程序。的小應(yīng)用程序。經(jīng)過編譯后，經(jīng)過編譯后，Applets成為一種平臺無關(guān)的字節(jié)代碼成為一種平臺無關(guān)的字節(jié)代碼，這種，這種Applets可以運(yùn)行在任何平臺上，只要該平可以運(yùn)行在任何平臺上，只要該平臺具備能夠操作臺具備能夠操作Applets的的Java虛擬機(jī)即可。虛擬機(jī)即可。7.3.1 JavaScript概述JavaScript與與Java語言的比較語言的比較Java程序被編譯成為字節(jié)代碼文件；程序被編譯成為字節(jié)代碼文件；JavaScript那那么是將字符正文傳遞給客戶方

9、并由客戶方解釋執(zhí)么是將字符正文傳遞給客戶方并由客戶方解釋執(zhí)行。行。JavaScript是基于對象的，它自身具有已創(chuàng)立完畢是基于對象的，它自身具有已創(chuàng)立完畢的對象而的對象而Java那么是面向?qū)ο蟮?，對象必須從類那么是面向?qū)ο蟮?，對象必須從類中?chuàng)立。中創(chuàng)立。JavaScript的代碼以字符的形式嵌入在的代碼以字符的形式嵌入在HTML文檔文檔中；中；Javaapplets那么是由文檔引用，其代碼以字那么是由文檔引用，其代碼以字節(jié)代碼的形式保存在另一個(gè)獨(dú)立的文件中。節(jié)代碼的形式保存在另一個(gè)獨(dú)立的文件中。7.3.1 JavaScript概述JavaScript與與Java語言的比較語言的比較2在在HTM

10、L文檔中，用標(biāo)識文檔中，用標(biāo)識標(biāo)明標(biāo)明JavaScript腳本；而腳本；而Javaapplets那么用標(biāo)識那么用標(biāo)識來標(biāo)來標(biāo)明。明。JavaScript采用弱類型；而采用弱類型；而Java那么采用強(qiáng)類型。那么采用強(qiáng)類型。JavaScript采用動態(tài)聯(lián)編；而采用動態(tài)聯(lián)編；而Java，那么采用靜態(tài)，那么采用靜態(tài)聯(lián)編。聯(lián)編。7.3.1 JavaScript概述JavaScript的作用和根本語法規(guī)那么的作用和根本語法規(guī)那么使用使用 JavaScript 的各種功能，可增強(qiáng)站點(diǎn)動態(tài)性和的各種功能，可增強(qiáng)站點(diǎn)動態(tài)性和交互性交互性提供用戶交互提供用戶交互動態(tài)更改內(nèi)容動態(tài)更改內(nèi)容驗(yàn)證數(shù)據(jù)驗(yàn)證數(shù)據(jù)與其他任何語

11、言一樣，與其他任何語言一樣，JavaScript 也遵循一些根本也遵循一些根本的語法規(guī)那么，如：的語法規(guī)那么，如：區(qū)分大小寫區(qū)分大小寫使用成對的符號使用成對的符號 使用空格使用空格使用注釋使用注釋7.2.2 JavaScript的使用JavaScript的使用的使用JavaScript作為客戶端程序嵌入網(wǎng)頁的方法：作為客戶端程序嵌入網(wǎng)頁的方法：方式一：直接在方式一：直接在HTML中添加中添加JavaScript代碼代碼(HTML頁面任意位置頁面任意位置) JavaScript代碼；代碼；方式二：導(dǎo)入方式二：導(dǎo)入JavaScript文件文件(寫在寫在標(biāo)記中標(biāo)記中)方式三方式三:在程序處理中直接使

12、用在程序處理中直接使用javascript相關(guān)函數(shù)相關(guān)函數(shù) onclick= 7.2.2 JavaScript的使用使用使用Script標(biāo)記標(biāo)記 document.write(歡送使用歡送使用JavaScript); 祝學(xué)有所成祝學(xué)有所成! 7.2.2 JavaScript的使用使用外部文件使用外部文件 祝學(xué)有所成! document.write(嗨！你好嗎？)7.2.2 JavaScript的使用在事件處理程序中使用在事件處理程序中使用JavaScriptJavaScript JavaScript JavaScript例如例如 INPUT TYPE=button VALUE= !); 7.2

13、.3 JavaScript根本語法l根本數(shù)據(jù)結(jié)構(gòu)l根本數(shù)據(jù)類型：數(shù)值型、字符串型、布爾型、和空值l數(shù)據(jù)類型可以是常量，也可以變量l表達(dá)式：對變量和常量進(jìn)行賦值、改變、計(jì)算等一系列操作l程序構(gòu)成l整個(gè)JavaScript腳本語言根本是由控制語句、函數(shù)、對象、方法、屬性構(gòu)成，用于實(shí)現(xiàn)特定的功能。l對象使用lJavaScript可以創(chuàng)立自己的對象。通過對象，JavaScript能完成許多復(fù)雜的工作。7.2.3 JavaScript根本語法JavaScript變量變量1JavaScript支持以下幾種數(shù)據(jù)類型支持以下幾種數(shù)據(jù)類型數(shù)據(jù)類型描述數(shù)字型 (Number)整數(shù)或?qū)崝?shù)邏輯型或布爾型 (Boole

14、an)True或False字符串型(String)如“Hello World”，“123.4”空型 (null)表示空值的特殊關(guān)鍵字 創(chuàng)立變量例如: var anumber = 137;/變量的值是一個(gè)數(shù) var result=true; var astring = “1; / 變量的值也可以是一個(gè)字符串 var astring1=“hello; 7.2.3 JavaScript根本語法JavaScript變量變量2變量的作用域變量的作用域Function1、Function2和Function3都可以訪問腳本全局變量Function1局部變量aFunction2局部變量bFunction3局

15、部變量c7.2.3 JavaScript根本語法JavaScript運(yùn)算符運(yùn)算符賦值操作符：賦值操作符： =、+=、-=、*=、 /=、%=、=、=、&=、=、|=；條件運(yùn)算符：條件運(yùn)算符： status = (age = 18) ? “true : “false； 算術(shù)運(yùn)算符：算術(shù)運(yùn)算符： +、- 、* 、/ 、% 、+和和-，y = +x； 位邏輯運(yùn)算符：位邏輯運(yùn)算符： &、|、; 、 邏輯運(yùn)算符：邏輯運(yùn)算符： &、|、!條件運(yùn)算符：條件運(yùn)算符： =、=、=、!=； 連接操作符連接操作符 + 用于連接兩個(gè)字符串字符串運(yùn)算符用于連接兩個(gè)字符串字符串運(yùn)算符： x= He

16、llo ; y= World!; x + y 為為 Hello World! 7.2.3 JavaScript根本語法表達(dá)式表達(dá)式l表達(dá)式用于在不同上下文中操作和計(jì)算變量。l表達(dá)式是任意一組有效的文字、變量和運(yùn)算符，其計(jì)算結(jié)果為一個(gè)值。l表達(dá)式類型u算術(shù)：計(jì)算結(jié)果為一個(gè)數(shù)字u邏輯：計(jì)算結(jié)果為一個(gè)布爾值u字符串：計(jì)算結(jié)果為一個(gè)字符串l表達(dá)式通過運(yùn)算符組合變量和文字。7.2.3 JavaScript根本語法JavaScript語句語句l條件語句uif else語句uswitch語句l循環(huán)語句uwhile循環(huán)語句udo while循環(huán)語句ubreak和continue語句進(jìn)一步控制循環(huán)break語句

17、提供無條件跳出當(dāng)前出循環(huán)結(jié)構(gòu)的功能。continue語句的作用是終止當(dāng)次循環(huán)，跳轉(zhuǎn)到循環(huán)的開始處繼續(xù)執(zhí)行下一次的循環(huán)。7.2.3 JavaScript根本語法JavaScript函數(shù)函數(shù)定義函數(shù)定義函數(shù)定義函數(shù)的格式如下：定義函數(shù)的格式如下：function functionName(parameter1,parameter2,.) statements函數(shù)的返回值函數(shù)的返回值 如果需要函數(shù)返回值，那么可以使用如果需要函數(shù)返回值，那么可以使用return語句語句,需需要返回的值應(yīng)放在要返回的值應(yīng)放在return之后。之后。如果如果return后沒有指明數(shù)值或沒有后沒有指明數(shù)值或沒有return

18、語句，那語句，那么函數(shù)返回值為不確定值。么函數(shù)返回值為不確定值。 函數(shù)返回值可以直接賦予給變量或用于表達(dá)式中。函數(shù)返回值可以直接賦予給變量或用于表達(dá)式中。7.3.3 JavaScript內(nèi)置對象lJavaScript被稱為是“基于對象的 語言.lJavaScript程序中可操作的對象有三種：l 1JavaScript提供的內(nèi)置對象array、date、math、screenl 2瀏覽器對象(window、document、form)l 3程序中自定義的對象(new)。 l一個(gè)對象包含兩個(gè)元素： l 1屬性property 變量l 2方法method 函數(shù)l要訪問對象屬性，必須指定對象名及屬性：

19、objectNpertyName l要訪問對象方法，必須指定對象名及方法：objectName.method()7.3.3 JavaScript內(nèi)置對象JavaScriptJavaScript內(nèi)置對象例子內(nèi)置對象例子-document-documentdocument document 是對應(yīng)一個(gè)是對應(yīng)一個(gè) .html .html文檔的對象，瀏覽器文檔的對象，瀏覽器讀進(jìn)文檔后生成；讀進(jìn)文檔后生成； document.writeln(“hellodocument.writeln(“hello) ) 是這個(gè)對象的一個(gè)是這個(gè)對象的一個(gè)方法，輸出帶換行的字符串；方法，輸出帶換行的字符串；

20、 document.location document.location 是該對象的一個(gè)屬性，含有它是該對象的一個(gè)屬性，含有它的的URLURL。 7.3.3 JavaScript內(nèi)置對象數(shù)組對象數(shù)組對象 Array Array 格式：格式： var variable=new Array(n1,n2, ) var variable=new Array(n1,n2, ) 屬性：屬性：lengthlength，它指明了數(shù)組的長度。，它指明了數(shù)組的長度。 方法：方法：join( )join( ) 將數(shù)組值連接變?yōu)橐粋€(gè)字符串；將數(shù)組值連接變?yōu)橐粋€(gè)字符串；reverse( ) reverse( ) 將數(shù)組

21、值倒序；將數(shù)組值倒序；sort( )sort( ) 將對數(shù)組值進(jìn)行排序?qū)?shù)組值進(jìn)行排序; ;舉例：emp = new Array(3);emp0 = Ryan Dias;emp1 = Graham Browne;emp2 = David Greene;document.write(emp.length+);document.write(emp.join( )+);document.write(emp.reverse( ).join( )+);document.write(emp.sort( ).join( )+;二維數(shù)組： 7.3.3 JavaScript內(nèi)置對象字符串對象字符串對象字符串對

22、象用于操縱和處理文本字符串。字符串對象用于操縱和處理文本字符串。用法用法stringName.methodName()stringName.methodName()創(chuàng)立字符串的方法創(chuàng)立字符串的方法使用使用varvar語句，并對為其賦值可選語句，并對為其賦值可選使用賦值運(yùn)算符使用賦值運(yùn)算符 (=) (=) 及變量名及變量名使用使用string ( ) string ( ) 構(gòu)造函數(shù)構(gòu)造函數(shù)屬性ulength方法ubigublink-此方法不能用于IE中.uboldufontcoloruitalicsusmallu大小寫字母轉(zhuǎn)換等7.3.3 JavaScript內(nèi)置對象日期對象日期對象l用法：Da

23、teObject = new Date (parameters)l常用方法：ua、設(shè)定日期setDay() setMonth() setYear()；setTime()設(shè)定時(shí)間，開始用毫秒數(shù)來計(jì)時(shí)ub、日期格式轉(zhuǎn)換.Date.UTC()返回一個(gè)通用時(shí)間，距1970年1月1日午夜的毫秒。uc、獲取日期 .Date.getDay() .Date.getMonth() .Date.getYear() ud、處理時(shí)區(qū).tolocaleString()將日期時(shí)間值轉(zhuǎn)換為的字符串(當(dāng)?shù)貢r(shí)間); .toGMTString()將日期時(shí)間值轉(zhuǎn)換為的字符串(GMT時(shí)間)7.3.3 JavaScript內(nèi)置對象Ma

24、th對象對象Math對象包含用來進(jìn)行數(shù)學(xué)計(jì)算的屬性和方法，其對象包含用來進(jìn)行數(shù)學(xué)計(jì)算的屬性和方法，其屬性也就是標(biāo)準(zhǔn)數(shù)學(xué)常量，其方法那么構(gòu)成了數(shù)屬性也就是標(biāo)準(zhǔn)數(shù)學(xué)常量，其方法那么構(gòu)成了數(shù)學(xué)函數(shù)庫。學(xué)函數(shù)庫。屬性：屬性： Math.E：為自然對數(shù)的底：為自然對數(shù)的底(約為約為2.718)；Math.PI：為圓周率：為圓周率(約為約為3.14159)；Math.LN10：方法：方法：Math.abs()絕對值計(jì)算；絕對值計(jì)算；Math.pow()數(shù)的冪；數(shù)的冪；Math.sqrt()計(jì)算平方根；計(jì)算平方根；.cos()、.sin()、.tan() 、.acos、.asin()、.atan()、max

25、();7.3.4 JavaScript中的事件l事件是瀏覽器響應(yīng)用戶交互操作的一種機(jī)制，瀏覽器為事件是瀏覽器響應(yīng)用戶交互操作的一種機(jī)制，瀏覽器為了響應(yīng)某個(gè)事件而進(jìn)行的處理過程，叫做事件處理。了響應(yīng)某個(gè)事件而進(jìn)行的處理過程，叫做事件處理。l事件定義了用戶與頁面交互時(shí)產(chǎn)生的各種操作，例如單事件定義了用戶與頁面交互時(shí)產(chǎn)生的各種操作，例如單擊超級連接或按鈕時(shí)，就產(chǎn)生一個(gè)單擊擊超級連接或按鈕時(shí)，就產(chǎn)生一個(gè)單擊(click)操作事件。操作事件。l瀏覽器在程序運(yùn)行的大局部時(shí)間都等待事件的發(fā)生，并瀏覽器在程序運(yùn)行的大局部時(shí)間都等待事件的發(fā)生，并在事件發(fā)生時(shí)，自動調(diào)用事件處理函數(shù)，完成事件處理在事件發(fā)生時(shí)，自動

26、調(diào)用事件處理函數(shù)，完成事件處理過程。過程。l事件不僅可以在用戶交互過程中產(chǎn)生，而且瀏覽器自己事件不僅可以在用戶交互過程中產(chǎn)生，而且瀏覽器自己的一些動作也可以產(chǎn)生事件，例：當(dāng)載入一個(gè)頁面時(shí)，的一些動作也可以產(chǎn)生事件，例：當(dāng)載入一個(gè)頁面時(shí)，就會發(fā)生就會發(fā)生load事件，卸載一個(gè)頁面時(shí)，就會發(fā)生事件，卸載一個(gè)頁面時(shí)，就會發(fā)生unload事事件等。件等。 7.3.4 JavaScript中的事件事件對象的概念事件對象的概念事件可以由用戶生成，也可以由系統(tǒng)生成每個(gè)事件事件可以由用戶生成，也可以由系統(tǒng)生成每個(gè)事件都有與之相關(guān)聯(lián)的都有與之相關(guān)聯(lián)的EventEvent對象對象Event Event 對象提供以

27、下信息：對象提供以下信息：事件類型事件類型事件發(fā)生時(shí)光標(biāo)的位置事件發(fā)生時(shí)光標(biāo)的位置Event Event 對象可以用作事件處理程序的一局部對象可以用作事件處理程序的一局部7.3.4 JavaScript中的事件事件的生命周期事件的生命周期事件的生命周期通常包含以下階段：事件的生命周期通常包含以下階段：與發(fā)生的事件相關(guān)聯(lián)的用戶操作或條件與發(fā)生的事件相關(guān)聯(lián)的用戶操作或條件立即更新立即更新 Event Event 對象以反映事件的狀態(tài)對象以反映事件的狀態(tài)觸發(fā)事件觸發(fā)事件調(diào)用相關(guān)聯(lián)的事件處理程序調(diào)用相關(guān)聯(lián)的事件處理程序事件處理程序執(zhí)行其操作并返回事件處理程序執(zhí)行其操作并返回7.3.4 JavaScript中的事件事件處理程序事件處理程序事件處理程序有兩種表現(xiàn)形式：事件處理程序有兩種表現(xiàn)形式：1 1在在HTMLHTML標(biāo)記中執(zhí)行事件處理程序標(biāo)記中執(zhí)行事件處理程序 TAG eventhandler=JavaScript Code 如：如： 2 2以屬性的形式出現(xiàn)的事件處理程序以屬性的形式出現(xiàn)的事件處理程序 object.event