第七講（下）DHTML介紹 計算機網絡安全與防護的PPT 互聯網軟件開發(fā)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

21、值倒序；將數組值倒序；sort( )sort( ) 將對數組值進行排序將對數組值進行排序; ;舉例：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( )+;二維數組： 7.3.3 JavaScript內置對象字符串對象字符串對象字符串對

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

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

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

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

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

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