Web開發(fā)技術及其應用(轉換)

1、WebWeb開發(fā)技術及其應用開發(fā)技術及其應用蔡章利蔡章利博博 士士副副 教教 授授碩士生導師碩士生導師參考教材參考教材王成良王成良. Web. Web開發(fā)技術及其應用開發(fā)技術及其應用M.M.北京：清華大學北京：清華大學出版社，出版社，201220122第一部分第一部分 基礎知識基礎知識知識知識1 1： 什么是什么是C/SC/S結構？什么是結構？什么是B/SB/S結構？結構？B/S是英文Browser/Server的縮寫，翻譯成中文是瀏覽器/服務器。C/S是英文Client/Server的縮寫，翻譯成中文是客戶機/服務器。3第一部分第一部分 基礎知識基礎知識C/S結構如下圖所示：特點特點：客戶端

2、負責完成與用戶交互；事務處理任務主要由客戶端完成，服務器端主要負責數(shù)據(jù)的存儲、查詢管理。優(yōu)點優(yōu)點：分布式管理，可充分發(fā)揮客戶端PC的處理能力，安全、穩(wěn)定、速度快。不足不足：客戶端PC需安裝專用軟件，系統(tǒng)的維護、升級比較困難。4第一部分第一部分 基礎知識基礎知識B/S結構如下圖所示：特點特點：客戶端負責完成與用戶交互；事務處理任務主要由Web服務器端完成，數(shù)據(jù)服務器端主要負責數(shù)據(jù)的存儲、查詢管理。優(yōu)點優(yōu)點：用戶可跨平臺以相同的瀏覽器界面訪問系統(tǒng)，系統(tǒng)安裝在Web服務器上，易于集中管理和升級、維護。不足不足：相對C/S結構來講，系統(tǒng)的安全性、穩(wěn)定性較差，速度慢些。5第一部分第一部分 基礎知識基礎知

3、識知識知識2 2： Web Web訪問原理訪問原理6第一部分第一部分 基礎知識基礎知識知識知識3 3： Web Web頁面頁面 指用超文本置標語言（Hyper Text Markup Language ，HTML）將相關信息組織在一起的文本文件。 又稱超鏈接文件、網(wǎng)頁文件或Web頁面文件，文件擴展名通常為htm或html。7第一部分第一部分 基礎知識基礎知識知識知識4 4： Web Web瀏覽器瀏覽器 是一個安裝在客戶端PC機上，可與Web服務器建立連接進行通信的標準化軟件。 與Web服務器之間使用超文本傳送協(xié)議（Hyper Text Transfer Protocol , HTTP）進行通信

4、。 通過解析Web頁面中的超文本標記，可將相關信息以特定形式呈現(xiàn)給用戶。 常用的瀏覽器軟件如IE、Firefox、Chrome等。8第一部分第一部分 基礎知識基礎知識知識知識5 5： Web Web服務器服務器 指能以Web頁面方式為用戶提供信息資源檢索及瀏覽服務的軟件系統(tǒng)。 與Web頁面的關系如下圖所示。9第一部分第一部分 基礎知識基礎知識知識知識6 6：統(tǒng)一資源定位符（：統(tǒng)一資源定位符（Uniform Resource LocatorsUniform Resource Locators，URLURL） 俗稱網(wǎng)址。用于標識信息資源在WWW網(wǎng)絡中的存放位置，以便用戶訪問。 每個URL字串通常包

5、含協(xié)議名稱、主機名及端口號、文件路徑及文件名三個部分。例如：2:8080/web/a.htmhttp:/ 基礎知識基礎知識知識知識7 7：超文本傳輸協(xié)議：超文本傳輸協(xié)議HTTPHTTPHTTP（HyperText Transfer Protocol，超文本傳輸協(xié)議）是用于從WWW服務器傳輸超文本到本地瀏覽器的傳送協(xié)議。11HTTP不僅保證計算機正確快速地傳輸超文本文檔，還確定傳輸文檔中的哪一部分，以及哪部分內容首先顯示(如文本先于圖形)，等等。第一部分第一部分 基礎知識基礎知識知識知識8 8：什么是：什么是Web 1.0Web 1.0、Web 2.0Web

6、2.0、Web 3.0Web 3.0、？p Web 1.0第一代互聯(lián)網(wǎng)技術及應用的統(tǒng)稱。其主要特征是用戶通過瀏覽器獲取網(wǎng)絡信息，用戶只是網(wǎng)絡信息的消費者。12p Web 2.0第二代互聯(lián)網(wǎng)技術及應用的統(tǒng)稱。其主要特征是Ajax、RSS、Blog(博客)、Tag等技術廣泛應用，網(wǎng)絡交互功能增強，用戶既是網(wǎng)絡信息的消費者，也是網(wǎng)絡信息的制造者。p Web 3.0第三代互聯(lián)網(wǎng)技術及應用的統(tǒng)稱。其主要特征目前還有爭議，尚未完全形成。第一部分第一部分 基礎知識基礎知識知識知識9 9：內容聚合：內容聚合RSSRSS（Really Simple SyndicationReally Simple Syndic

7、ation）13 RSS使用XML作為彼此共享內容的標準方式； RSS是站點用來和其他站點之間共享內容的簡易方式； RSS對信息閱讀者來講，是一種方便的信息獲取工具；通過一個RSS閱讀器（比如新浪點點通），用戶可以同時閱讀來自不同站點的新聞； RSS對信息發(fā)布者來講，提供了一個信息迅速傳播技術平臺；第二部分第二部分 開發(fā)技術開發(fā)技術目前，用于目前，用于WebWeb應用系統(tǒng)開發(fā)的技術主要有：應用系統(tǒng)開發(fā)的技術主要有： HTML、XHTML、XML、CSS、XSL JavaScript C#、ASP/ASP.NET、ADO/ADO.NET ActiveX、Ajax ActionScript14 C

8、GI、PHP、JSP、等等。第二部分第二部分 開發(fā)技術開發(fā)技術HTML、XHTML及及XML1.1. HTMLHTML、XHTMLXHTML、XMLXML概念及相互關系概念及相互關系 HTML（HyperText Markup Language，超文本置標語言）是一種可用特定標記（近120種）來描述文檔結構的語言。HTMLHTML文檔示例文檔示例 HTML是標準通用置標語言(SGML)的一個子集，目前用得最多的版本是HTML4.0,最新版本是HTML5.0。15第二部分第二部分 開發(fā)技術開發(fā)技術HTML、XHTML及及XML1.1. HTMLHTML、XHTMLXHTML、XMLXML概念及相

9、互關系概念及相互關系 XML（EXtensible Markup Language，可擴展置標語言）是一種標準，其提供的規(guī)則可用來構造其它標記語言（如XHTML），不能直接用來寫網(wǎng)頁文件。未轉換未轉換XMLXML文檔示例文檔示例 XML以標準通用置標語言(SGML)為基礎，是對SGML的簡化，而非其子集。 符合XML標準要求文檔稱為XML文檔，XML文檔只有轉換成HTML格式才能在瀏覽器上正確顯示。已轉換已轉換XMLXML文檔示例文檔示例16第二部分第二部分 開發(fā)技術開發(fā)技術HTML、XHTML及及XML1.1. HTMLHTML、XHTMLXHTML、XMLXML概念及相互關系概念及相互關系

10、 XHTML（EXtensible HyperText Markup Language，可擴展超文本置標語言）是一個基于XML的置標語言，能直接用來寫網(wǎng)頁文件。對應的對應的HTMLHTML文檔示例文檔示例 XHTML是網(wǎng)頁由HTML描述向XML描述發(fā)展的一種過渡技術，當前版本主要是XHTML1.0，是一種在HTML4.0基礎上優(yōu)化和改進的新語言。 XHTML與HTML比較相似，區(qū)別在于其符合XML規(guī)范要求，所有標記必須配對，標記的屬性必須放在引號中。XHTMLXHTML文檔示例文檔示例17第二部分第二部分 開發(fā)技術開發(fā)技術HTML、XHTML及及XML1.1. HTMLHTML、XHTMLXH

11、TML、XMLXML概念及相互關系概念及相互關系網(wǎng)頁之所以由采用HTML描述向采用XML描述發(fā)展，主要在于： HTML的標記固定，不具有擴展性，用戶不能自定義標記來滿足新的數(shù)據(jù)格式展示需求，比如數(shù)學公式、科技符號、矢量圖形等。 HTML是專為描述頁面表現(xiàn)形式而設計的，不能揭示所標記的信息含義，難以滿足信息檢索與存檔要求。18第二部分第二部分 開發(fā)技術開發(fā)技術HTML、XHTML及及XML2.2. HTMLHTML文檔基本結構文檔基本結構( (示例示例) )序號 標記類型 說 明 1文檔類型標記“DOCTYPE”用于指定文檔中使用了哪個版本的用于指定文檔中使用了哪個版本的HTML，并可以和哪個驗

12、證工，并可以和哪個驗證工具一起使用，以保證此具一起使用，以保證此HTML文檔與文檔與HTML推薦標準的一致。例如推薦標準的一致。例如:表明此文檔應符合表明此文檔應符合W3C制定的制定的HTML4.01規(guī)范。又如在規(guī)范。又如在VS 2005中新建的中新建的HTML文檔中第一行為：文檔中第一行為：表明此文檔應符合表明此文檔應符合W3C制定的制定的XHTML1.0規(guī)范，也就是要求此文檔應按照規(guī)范，也就是要求此文檔應按照XML文檔規(guī)范來配對所有標記。文檔規(guī)范來配對所有標記。文檔類型是每個文檔類型是每個HTML文檔必需的，如果文檔必需的，如果HTML文檔中沒有文檔類型標記，瀏覽文檔中沒有文檔類型標記，瀏

13、覽器會采用默認的方式即器會采用默認的方式即W3C推薦推薦HTML 4.0來處理此來處理此HTML文檔。文檔。 2HTML標記在編寫在編寫HTML語言源代碼時以語言源代碼時以來標記一個來標記一個HTML文檔的開始，以文檔的開始，以標記整個文檔的結束。標記整個文檔的結束。 19第二部分第二部分 開發(fā)技術開發(fā)技術HTML、XHTML及及XML序號 標記類型 說 明 3頭元素標記 每個每個HTML文檔都包含一個頭元素。頭元素中的內容一般不會在文檔都包含一個頭元素。頭元素中的內容一般不會在窗口中顯示。頭元素是以窗口中顯示。頭元素是以開頭，以開頭，以結束。結束。 4網(wǎng)頁標題標記 標題是頭元素的一部分，標記

14、標題是頭元素的一部分，標記必須包含在必須包含在 之內。標題會出現(xiàn)在瀏覽器窗口標題欄上。之內。標題會出現(xiàn)在瀏覽器窗口標題欄上。用戶將該網(wǎng)頁添加到收藏夾或書簽時，其名稱默認為網(wǎng)頁標題；用戶將該網(wǎng)頁添加到收藏夾或書簽時，其名稱默認為網(wǎng)頁標題；另外搜索引擎在進行分類搜索時也會按網(wǎng)頁標題搜索。另外搜索引擎在進行分類搜索時也會按網(wǎng)頁標題搜索。 5主體元素標記 HTML文檔的主體部分用來放置文本、圖像等內容。主體以文檔的主體部分用來放置文本、圖像等內容。主體以開始，以開始，以結束。頁面背景顏色與圖像在該標記中設結束。頁面背景顏色與圖像在該標記中設置方法是：（置方法是：（1）用圖像填充背景）用圖像填充背景其中

15、其中background表示背景圖像文件所在的表示背景圖像文件所在的URL地址。例如：地址。例如：（2）用某種顏色）用某種顏色填充背景填充背景 其中其中Bgcolor表示背景顏色。例表示背景顏色。例如：如：顏色可用顏色名稱如顏色可用顏色名稱如green、1616進制進制表示表示#RRGGBB#RRGGBB如如#00FFEE、函數(shù)、函數(shù)rgb(r,g,b)如如rgb(20,20,50)、函、函數(shù)數(shù)rgb(r%,g%,b%)如如 rgb(20%,20%,50%)來表示。紅綠藍顏色來表示。紅綠藍顏色分量取值為分量取值為0255。顏色分量百分數(shù)是相對。顏色分量百分數(shù)是相對255而言。例如而言。例如:2

16、0第二部分第二部分 開發(fā)技術開發(fā)技術HTML、XHTML及及XML序號 標記類型 說 明 6標記的屬性HTML標記中，可用屬性來描述標記的外觀和行為方式以及內標記中，可用屬性來描述標記的外觀和行為方式以及內在表現(xiàn)。上面主體元素中在表現(xiàn)。上面主體元素中bgcolor就是就是body的屬性?？筛鶕?jù)實的屬性。可根據(jù)實際情況給標記設置屬性。例如：際情況給標記設置屬性。例如：我是超我是超鏈接鏈接上述超鏈接標記中，上述超鏈接標記中，id為超鏈接定義了一個標識，因為為超鏈接定義了一個標識，因為HTML頁面文檔中可能有很多個超鏈接，通過頁面文檔中可能有很多個超鏈接，通過ID可以確定是哪個超鏈可以確定是哪個超鏈

17、接，也可通過接，也可通過name屬性來指定。屬性來指定。Title屬性實現(xiàn)了將鼠標指針屬性實現(xiàn)了將鼠標指針放在該超鏈接標記上時，會顯示一個動態(tài)文本提示框放在該超鏈接標記上時，會顯示一個動態(tài)文本提示框“Its me”。Title屬性是為大多數(shù)標記所具有的屬性。每個標記有很多屬性，屬性是為大多數(shù)標記所具有的屬性。每個標記有很多屬性，但有許多是共同屬性。但有許多是共同屬性。7注釋標記 HTML中的注釋始終以中的注釋始終以“”結尾。注釋可以結尾。注釋可以幫助人們理解代碼。瀏覽器會忽略注釋內部的所有文本和標記。幫助人們理解代碼。瀏覽器會忽略注釋內部的所有文本和標記。 21第二部分第二部分 開發(fā)技術開發(fā)技

18、術HTML、XHTML及及XML3.3. HTMLHTML常用標記簡介常用標記簡介 文本和文本和格式標記標記 超鏈接標記和表格標記 圖像、視頻與動畫、聲音處理標記 控件標記 幀標記和IFRAME標記22第二部分第二部分 開發(fā)技術開發(fā)技術CSS及及XSL1.1. 層疊樣式單層疊樣式單CSSCSS 由于HTML注重的是文檔內容本身，而非顯示方式；因此顯示語義不明確，存在同一HTML文檔在不同瀏覽器可能會出現(xiàn)不同顯示效果的問題。 CSS（Cascading Style Sheets，層疊樣式單）是W3C協(xié)會為彌補HTML在顯示語義上存在的不足而制定的一套擴展樣式標準。 網(wǎng)頁用CSS文件來控制其顯示格

19、式至少有兩個好處：一是可以簡化網(wǎng)頁代碼，CSS文件被瀏覽器保存在緩存中可加快網(wǎng)頁的下載、顯示速度；二是只要修改保存著網(wǎng)站格式的CSS文件就可以改變整個站點的風格特色，這對修改頁面數(shù)量龐大的站點格外有用，可避免逐個修改網(wǎng)頁，以減少工作量。23第二部分第二部分 開發(fā)技術開發(fā)技術CSS及及XSL2.2. CSSCSS用于用于HTMLHTML文檔的樣式定義文檔的樣式定義選擇符選擇符 屬性屬性1 1：值：值1 1；屬性；屬性2 2：值：值2 2； CSS有六種選擇符：HTML標記、具有上下文關系的HTML標記、用戶自定義類選擇符、用戶定義的ID選擇符、虛類、虛元素。CSSCSS文件示例文件示例 一個CS

20、S文件通常包含多個樣式規(guī)則，CSS用這些樣式規(guī)則來告訴瀏覽器如何顯示網(wǎng)頁元素，其規(guī)則的形式如下：24第二部分第二部分 開發(fā)技術開發(fā)技術CSS及及XSL3.3. CSSCSS在在HTMLHTML文檔中的使用方式文檔中的使用方式鏈入外部樣式表。即把樣式表保存為一個CSS文件，在HTML文檔的頭標記之間添加標記連接到該CSS文件。導入外部樣式表。即把樣式表保存為一個CSS文件，在HTML文檔的頭部的標記之間利用import “xxx.css”聲明導入該CSS文件。使用示例使用示例25第二部分第二部分 開發(fā)技術開發(fā)技術CSS及及XSL3.3. CSSCSS在在HTMLHTML文檔中的使用方式文檔中的使

21、用方式聯(lián)入樣式表。即利用標記將樣式表聯(lián)入到HTML文件的頭部。內聯(lián)樣式。即直接在HTML標記里加入style參數(shù)。Style參數(shù)的內容就是CSS的屬性和值。多重樣式表疊加。即前述四種方式的混合使用。依照后定義優(yōu)先原則，優(yōu)先級最高的是內聯(lián)樣式，聯(lián)入樣式表高于導入外部樣式表，鏈入的外部樣式表和聯(lián)入樣式表之間是最后定義的優(yōu)先級高。26第二部分第二部分 開發(fā)技術開發(fā)技術CSS及及XSL4.4. CSSCSS用于用于XMLXML文檔的樣式定義文檔的樣式定義元素名稱選擇符。用戶自定義類選擇符。用戶定義的ID選擇符。成組選擇符。27第二部分第二部分 開發(fā)技術開發(fā)技術CSS及及XSL5.5. CSSCSS在在

22、XMLXML文檔中的使用方式文檔中的使用方式將定義的CSS樣式表置于XML文檔中。在XML文檔聲明部分聲明引用CSS文件。前兩種方式混合使用。28第二部分第二部分 開發(fā)技術開發(fā)技術CSS及及XSL6.6. 可擴展樣式單語言可擴展樣式單語言XSLXSL XSL（eXtensible Stylesheet Language，可擴展樣式單語言）是一種遵循XML文檔格式規(guī)范的標識語言。其功能之一就是將XML文檔轉換為HTML文檔以便瀏覽器顯示。 XSL最初由格式化引擎和格式化符號集（又稱格式化符號對象FO）兩部分組成。目前所說XSL實際上是指XSLT（XSL Transformations），其主要就

23、是將一個沒有表現(xiàn)形式的XML文檔作為源樹，將其轉換為一個有樣式信息的結果樹。29第二部分第二部分 開發(fā)技術開發(fā)技術CSS及及XSL7.7. XSLXSL文檔的基本結構文檔的基本結構30第二部分第二部分 開發(fā)技術開發(fā)技術CSS及及XSL8.8. XSLXSL的主要元素的主要元素 模板元素xsl:template。 選擇元素xsl:value-of和xsl:for-each 測試元素xsl:if和xsl:choose31第二部分第二部分 開發(fā)技術開發(fā)技術CSS及及XSL9.9. XSLXSL常用運算符常用運算符32第二部分第二部分 開發(fā)技術開發(fā)技術CSS及及XSL10.10. XSLXSL的內置函

24、數(shù)的內置函數(shù)XSL提供了100多個內置函數(shù)，以方便用戶開發(fā)使用。部分常用內置函數(shù)如： position()、last()用于節(jié)點元素定位 count()滿足條件的節(jié)點級數(shù) number()將屬性值中的文本轉換為數(shù)值 substring()截取字符串 string-length()獲取字符串的長度 concat()、string-join()字符串連接 sum()、max（）、min()、avg()33第二部分第二部分 開發(fā)技術開發(fā)技術DHTML1.1. 什么是什么是DHTMLDHTML DHTML（Dynamic HTML，動態(tài)的HTML）不是一門新的語言，而是HTML、CSS、CSSL、DO

25、M等相關技術、標準或規(guī)范的一種集成。 CSSL(Client-Side Scripting Language，客戶端腳本語言)目前主要有JavaScript、VBScript、Jscript三種。 DOM(Document Object Model，文檔對象模型)將文檔中的所有HTML或XML標記抽象成對象，以便CSSL對其屬性(Properties)、方法(Method)和事件(Events)進行控制。34第二部分第二部分 開發(fā)技術開發(fā)技術DHTML之之JavaScript1.1. JavaScriptJavaScript編程基礎編程基礎 JavaScript程序嵌入HTML文檔的方法 數(shù)據(jù)

26、類型 常量和變量 運算符和表達式 函數(shù) 事件驅動及事件處理 流程控制35第二部分第二部分 開發(fā)技術開發(fā)技術DHTML之之JavaScript2.2. JavaScriptJavaScript對象編程技術對象編程技術內置對象內置對象 Array對象 String對象 Date對象 Math對象 Number對象36第二部分第二部分 開發(fā)技術開發(fā)技術DHTML之之JavaScript3.3. JavaScriptJavaScript對象編程技術對象編程技術預定義函數(shù)預定義函數(shù)它提供了與任何對象無關的系統(tǒng)函數(shù)，使用這些函數(shù)不需創(chuàng)建任何實例,可直接用。例如：返回字符串表達式中的值。eval（字符串表達

27、式），例：test=eval(8+9+5/2) 返回字符的編碼。 escape(string) /用%xx 16進制形式編碼返回字符串ASCI碼。 unescape(string) /將用escape編碼過的字串復原 返回實數(shù)。 parseFloat(floatstring) /字符數(shù)字變成實數(shù) 返回不同進制的數(shù)。parseInt(numbestring,radix) /radix是數(shù)的進制， /numbestring字符串數(shù)。 /字符數(shù)字按進制變成整數(shù)37第二部分第二部分 開發(fā)技術開發(fā)技術DHTML之之JavaScript4.4. JavaScriptJavaScript對象編程技術對象編程

28、技術用戶自定義對象用戶自定義對象使用JavaScript可以創(chuàng)建自己的對象。方法是為其定義一個構造函數(shù)，賦予對象屬性和方法。其基本格式如下： function ObjectName（屬性表）this. property 1=property1; /屬性的定義perty2=property2; /屬性的定義.this.method1=FunctionName1; /方法的定義this.method2=FunctionName2; /方法的定義. 38第二部分第二部分 開發(fā)技術開發(fā)技術DHTML之之JavaScript5.5. JavaScript ActiveXJavaScrip

29、t ActiveX編程技術編程技術 ActiveX是微軟公司提出的一種軟件技術，其目的是實現(xiàn)軟件可重用。符合ActiveX技術要求的控件可用于拓展Web頁面的功能，能為用戶創(chuàng)建豐富的Internet應用程序 JavaScript提供了ActiveXObject方法實現(xiàn)對ActiveX控件的訪問。文件系統(tǒng)操作示例文件系統(tǒng)操作示例ExcelExcel調用示例調用示例WordWord調用示例調用示例39第二部分第二部分 開發(fā)技術開發(fā)技術DHTML之之DOM1.1. HTMLHTML文檔對象模型文檔對象模型 HTML文檔對象模型（HTML DOM）是一個能夠讓程序和腳本動態(tài)訪問和更新HTML文檔內容、

30、結構和樣式的語言平臺，定義了一種訪問并操作HTML文檔的標準方法。 HTML DOM將網(wǎng)頁中的每個HTML元素看做一個個對象，我們可以通過腳本程序來獲取/設置每個對象的屬性，調用每個對象的方法，為每個對象的事件綁定處理方法來動態(tài)改變網(wǎng)頁的顯示效果。 因為DOM規(guī)范在不斷發(fā)展，使得目前不同瀏覽器對DOM的支持存在差異。40第二部分第二部分 開發(fā)技術開發(fā)技術DHTML之之DOM1.1. HTMLHTML文檔對象模型文檔對象模型 微軟IE瀏覽器支持的DOM如下所示。41第二部分第二部分 開發(fā)技術開發(fā)技術DHTML之之DOM2.2. 通過通過DOMDOM操作操作HTMLHTML元素的方法元素的方法為便

31、于對某個HTML元素進行操作，創(chuàng)建HTML文檔時，必須為其設置ID或Name屬性以唯一標識該元素。建議全部用ID屬性，而不用Name屬性，Name屬性只是為了兼容低版本瀏覽器。例如：指定指定IDID屬性：屬性： 指定指定NameName屬性：屬性： 42第二部分第二部分 開發(fā)技術開發(fā)技術DHTML之之DOM2.2. 通過通過DOMDOM操作操作HTMLHTML元素的方法元素的方法利用DOM操作HTML元素的六種方法：window.document.all.item(HTMLwindow.document.all.item(HTML元素的元素的ID)ID) 例如：例如：window.docume

32、nt.all.item(myColor) window.document.all.item(myColor) document.all.HTMLdocument.all.HTML元素的元素的ID ID 例如：例如：window.document.all.myColor window.document.all.myColor window.document.getElementById(HTMLwindow.document.getElementById(HTML元素的元素的ID) ID) 例如：例如：window.document.getElementById(myColor) window.

33、document.getElementById(myColor) window.document.getElementsByName(HTMLwindow.document.getElementsByName(HTML元素的元素的NameName屬性值屬性值 ) ) 例如：例如：window.document.getElementsByName(firstName) window.document.getElementsByName(firstName) dItem(HTMLdItem(HTML元素

34、的元素的IdId或或NameName屬性值屬性值) ) 例如：例如：dItem (myColor) dItem (myColor) window.document. getElementsByTagName(div) (HTMLwindow.document. getElementsByTagName(div) (HTML標記名標記名稱稱) ) 例如：例如：window.document. getElementsByTagName(div) window.document. getElementsB

35、yTagName(div) 操作示例43第二部分第二部分 開發(fā)技術開發(fā)技術DHTML之之DOM3.3. HTML DOMHTML DOM的主要對象的主要對象 窗口對象（window） 瀏覽器對象（navigator） 位置對象（location） 歷史對象（history） 事件對象（event） 文檔對象（document）44第二部分第二部分 開發(fā)技術開發(fā)技術DHTML之之DOM3.3. HTML DOMHTML DOM的主要對象的主要對象窗口對象窗口對象(window)(window) Window對象處于對象層次的最頂端，每個對象代表一個瀏覽器窗口，封裝了窗口的方法和屬性。Window

36、對象所包含的屬性、方法、事件、對象如圖所示。應用示例45第二部分第二部分 開發(fā)技術開發(fā)技術DHTML之之DOM3.3. HTML DOMHTML DOM的主要對象的主要對象文檔對象文檔對象(document)(document)document文檔對象是瀏覽器對象的核心，主要作用就是把這些基本的元素（如links,anchor等）包裝起來，提供給編程人員使用。編程人員利用這些對象，可以對WWW瀏覽器環(huán)境中的事件進行控制并作出處理。document對象對于實現(xiàn)Web頁面信息交互起關鍵作用。在JavaScript中提供了非常豐富的內部方法和屬性，從而減輕了編程人員的工作，提高了編程效率46第二部分

37、第二部分 開發(fā)技術開發(fā)技術DHTML之之DOM3.3. HTML DOMHTML DOM的主要對象的主要對象文檔對象文檔對象(document)(document)document對象所包含的屬性、方法、事件、對象如圖所示。應用示例47第二部分第二部分 開發(fā)技術開發(fā)技術DHTML之之DOM4.4. HTML DOMHTML DOM樹簡介樹簡介HTML DOM是一種結構化的對象模型，采用DOM技術訪問和更新HTML頁面內容時，首先依據(jù)HTML源代碼，建立頁面的樹形結構模型，然后按照樹形結構的層次關系來操縱Web頁面，一個Web頁文件可看成對應了一棵DOM節(jié)點樹，如下圖所示： 48第二部分第二部分

38、 開發(fā)技術開發(fā)技術DHTML之之DOM4.4. HTML DOMHTML DOM樹簡介樹簡介49第二部分第二部分 開發(fā)技術開發(fā)技術DHTML之之DOM4.4. HTML DOMHTML DOM樹簡介樹簡介在DOM樹形結構中，每個節(jié)點都是一個對象，各節(jié)點對象都有屬性和方法。 DOM有兩個對象集合：attributes和chileNodes。attributes是節(jié)點屬性的對象集合。chileNodes是子節(jié)點的對象集合，使用從0開始的索引值進行訪問。DOM樹形結構節(jié)點有只讀屬性和讀寫屬性兩類。通過只讀屬性可以瀏覽節(jié)點，并可獲得節(jié)點的類型及名稱等信息；通過讀寫屬性可以訪問文字節(jié)點的內容。50第二部

39、分第二部分 開發(fā)技術開發(fā)技術DHTML之之DOM4.4. HTML DOMHTML DOM樹簡介樹簡介DOM樹節(jié)點屬性如下表： 51第二部分第二部分 開發(fā)技術開發(fā)技術DHTML之之DOM4.4. HTML DOMHTML DOM樹簡介樹簡介DOM樹的常用方法如下表： 52第二部分第二部分 開發(fā)技術開發(fā)技術Web開發(fā)平臺簡介53在.NET平臺下開發(fā)的應用程序運行于.NET Framework之上。 .NET Framework目前已從最初的1.0版本發(fā)展到4.0版本。微軟公司推出的一種軟件開發(fā)平臺，支持多種語言編程，允許開發(fā)人員分別用自己最精通的.NET語言來編寫代碼協(xié)作完成同一軟件項目。.NE

40、T平臺支持的編程語言主要有C#、VB.Net、C+.Net和J#。與Web應用程序開發(fā)相關的技術主要有ASP.NET和ADO.NET。最著名的開發(fā)工具是Visual Studio .NET。1.NET1.NET開發(fā)平臺開發(fā)平臺第二部分第二部分 開發(fā)技術開發(fā)技術Web開發(fā)平臺簡介2.2. Java EEJava EE開發(fā)平臺開發(fā)平臺 Java EE的三大核心技術室是Servlet、JSP和EJB。Java EE(Java Enterprise Edition)是SUN公司推出的一種純粹基于Java的軟件開發(fā)解決方案，其最初簡稱是J2EE。相比.NET平臺而言，在Java EE平臺下開發(fā)的軟件具有

41、更好的跨平臺運行能力，而且有許多開源的免費軟件支撐；但學習難度比.NET平臺大。54第二部分第二部分 開發(fā)技術開發(fā)技術C#語言語言55C#是由C和C+發(fā)展而來的面向對象和類型安全的編程語言。C#讀作C Sharp。一個簡單C#程序如下例所示：1.1. C#C#程序基本結構程序基本結構 using System;using System;namespace ExampleAppnamespace ExampleApp class Hello class Hello static void Main() static void Main() Console.WriteLine(Hello, wor

42、ld); Console.WriteLine(Hello, world); 第二部分第二部分 開發(fā)技術開發(fā)技術C#語言語言56下面對這個程序進行一些說明：1) C#程序的源代存儲在擴展名為.cs的文件中；2）using System 申明引用的名稱空間。名稱空間由Microsoft.NET類庫提供。使用using命令后，就可以直接調用名稱空間中的各種類成員。3）Main方法是類Hello中的一個成員，它有static的說明符，所以它是類Hello中的一個方法而不是此類中的實例。 Main方法是應用程序的主入口點，也稱作開始執(zhí)行應用程序的方法。1.1. C#C#程序基本結構程序基本結構 第二部分

43、第二部分 開發(fā)技術開發(fā)技術C#語言語言574）C#語言編譯器CSC.EXE只是將程序員編寫的代碼編譯成 MSIL(Microsoft Intermediate Language)中間語言。中間語言在安裝時被運行庫編譯成本機代碼或者首次運行時被實時編譯。1.1. C#C#程序基本結構程序基本結構 第二部分第二部分 開發(fā)技術開發(fā)技術C#語言語言58C#支持兩種數(shù)據(jù)類型：值類型（如char、int、float等）和引用類型（如interface、delegate、object等）。值類型和引用類型的區(qū)別在于，值類型變量直接包含它們的數(shù)據(jù)，而引用類型變量是存儲對于對象的引用。對于引用類型，有可能兩個變

44、量引用相同的對象，因而可能出現(xiàn)對一個變量的操作影響到其他變量所引用對象的情況。對于值類型，每個變量都有它們自己對數(shù)據(jù)的拷貝，所以不太可能因為對一個進行操作而影響到其他變量。2.2. C#C#的數(shù)據(jù)類型的數(shù)據(jù)類型 第二部分第二部分 開發(fā)技術開發(fā)技術C#語言語言59C#有7種變量類型，如下表所示：3.3. C#C#的變量類型的變量類型 變量類型變量類型說明說明靜態(tài)變量 用static修飾符聲明的變量，如static double=1.0。當靜態(tài)變量所屬的類被加載后，靜態(tài)變量就一直存在，并且所有屬于這個類的實例都共用同一個變量。 實例變量 未用static修飾的變量。它們屬于類的實例。當創(chuàng)建該類的新

45、實例時，實例變量開始存在；當所有對該實力的引用結束后，該實例變量終止。引用參數(shù) 用ref修飾符聲明的參數(shù)。引用參數(shù)的值與被引用的基礎變量相同，所以引用參數(shù)不占用、不創(chuàng)建新的存儲位置。 輸出參數(shù) 用out修飾符聲明的參數(shù)。它表示函數(shù)調用中的基礎變量，不創(chuàng)建新的存儲位置。 值參數(shù) 未用ref或out修飾符聲明的參數(shù)。在調用參數(shù)所屬的函數(shù)成員時開始存在，當返回該函數(shù)成員時值參數(shù)終止。 局部變量 在某個獨立的程序塊中聲明的變量。作用域僅限于此程序塊。如for、switch語句等。 第二部分第二部分 開發(fā)技術開發(fā)技術C#語言語言60C#的表達式大致分為算術表達式、賦值表達式、關系表達式和邏輯表達式。4.

46、4. C#C#的表達式的表達式 （1）算術表達式 用算術操作符把數(shù)值連接在一起的、符合C#語法的表達式稱為算術表達式。算術操作符包括+、-、*、/、%、+、-第二部分第二部分 開發(fā)技術開發(fā)技術C#語言語言614.4. C#C#的表達式的表達式 (2)賦值表達式 用賦值操作符為變量、屬性等賦新值。賦值操作符的運算規(guī)則如下表所示：操作符操作符 名稱名稱 運算對象運算對象 運算結果運算結果 = 賦值 任意類型 任意類型+=、-=、*=、/= 加、減、乘、除賦值 數(shù)值型(整型、實型等) 數(shù)值型(整型、實型等) %= 模賦值 整型 整型 &=、!=、 =、=、= 位與、位或、右移、左移、異或賦值 整型或

47、字符型 整型或字符型 第二部分第二部分 開發(fā)技術開發(fā)技術C#語言語言624.4. C#C#的表達式的表達式 (3)關系表達式 =、!=、=等操作符稱為關系操作符。用關系操作符把運算對象連接起來并符合C#語法的式子稱為關系表達式。關系表達式要么返回true要么返回false。 (4)邏輯表達式 &（and）、|(or)和!(not)操作符稱為邏輯操作符。用邏輯操作符把運算對象連接起來并符合C#語法的式子稱為邏輯表達式。第二部分第二部分 開發(fā)技術開發(fā)技術C#語言語言631）三元運算符，例如: a=(b5)?100:10表示b5時a=100,否則a=10；5.5. C#C#的控制語句的控制語句 2）

48、if、switch、for、while、foreach、do while語句，其語法規(guī)則如下表所示3）try-catch-finally語句，可用來捕捉異常。第二部分第二部分 開發(fā)技術開發(fā)技術C#語言語言645.5. C#C#的控制語句的控制語句 If Switch For while foreach do while if() else switch(控制表達式) case 測試值1:語句1break;case測試值2:語句2break;default: 默認語句break; for(int i=0;i10;i+) int i=0;while(i10) i+; char person=new

49、 char0,1,2,3;foreach(char i in person) if(i=1) else if(i=2) else do 內嵌語句 while(循環(huán)控制條件) 第二部分第二部分 開發(fā)技術開發(fā)技術C#語言語言656.6. C#C#的類聲明的類聲明 類是一種將數(shù)據(jù)成員、函數(shù)成員和嵌套類型等進行封裝的數(shù)據(jù)結構。數(shù)據(jù)成員可以是常量或域，函數(shù)成員可以是方法、屬性、索引、事件、操作符或靜態(tài)構造函數(shù)和析構函數(shù)。構造函數(shù)在創(chuàng)建對象時被自動調用，用來執(zhí)行對象的初始化操作，其函數(shù)名總是與類名相同。析構函數(shù)在釋放對象時被調用，用來刪除對象前做一些清理工作。第二部分第二部分 開發(fā)技術開發(fā)技術C#語言語言

50、666.6. C#C#的類聲明的類聲明 在C#中，類有五種訪問修飾符，如下表所示：序號序號 形式形式 直觀意義直觀意義 1public 訪問不受限制 2protected 訪問只限于此程序或類中包含的類型 3internal 訪問只限于此程序 4protected internal 訪問只限于此程序或類中包含的類型 5private 訪問只限于所包含的類型 第二部分第二部分 開發(fā)技術開發(fā)技術ASP.NET67ASP.NET既不是一種程序語言，也不是一種開發(fā)工具，而是微軟推出的一種實現(xiàn)動態(tài)Web服務器頁面的技術框架。ASP.NET提供基于組件、事件驅動的可編程Web窗體。利用其內置的服務器端控件

51、，用戶可快速開發(fā)實現(xiàn)具有動態(tài)交互功能的Web頁面。1.1. ASP.NETASP.NET概念概念 Web頁面中的控件分為客戶端控件和服務器端控件兩大類。服務器端控件都需由Web服務器轉換為客戶端控件后，才傳送到客戶端瀏覽器對其進行處理。第二部分第二部分 開發(fā)技術開發(fā)技術ASP.NET68APS.NET提供的控件主要有8類，如下表所示：1.1. ASP.NETASP.NET是什么是什么 序號 控件分類 功能描述 1Web標準控件 和界面設計制作有關的控件 2數(shù)據(jù)控件 數(shù)據(jù)訪問、操作以及數(shù)據(jù)可視化方面控件 3驗證控件 對用戶輸入的內容進行驗證的控件4導航控件提供站點導航、動態(tài)菜單、樹型菜單的控件5

52、登錄控件用戶登錄界面的設計制作控件6Web PARTS控件Web門戶定制控件。用戶可以拖動某一區(qū)域在屏幕上重新布局7HTML控件HTML中的常規(guī)控件8CRYSTALREPORTS控件提供Web頁面上的報表處理第二部分第二部分 開發(fā)技術開發(fā)技術ASP.NET692.2. WebWeb標準控件標準控件 (1) Label(1) Label和和LiteralLiteral控件控件 Label控件用于在網(wǎng)頁的設置位置上顯示文本，可以通過 Text屬性自定義顯示文本。Text屬性中可以包含其他HTML元素。 Literal 控件和Label控件類似，但它不向文本中添加任何HTML元素。因此，Litera

53、l 控件不支持包括位置屬性在內的任何樣式屬性。轉換成客戶端HTML代碼后，Literal則是什么標記都不帶，但Literal 控件允許指定是否對內容進行編碼。通常情況下，當希望文本和控件直接呈現(xiàn)在頁面中而不使用任何附加標記時，可使用Literal 控件。(2) TextBox(2) TextBox文本框控件文本框控件 該控件用于獲取用戶輸入的文本或顯示文本。第二部分第二部分 開發(fā)技術開發(fā)技術ASP.NET702.2. WebWeb標準控件標準控件 (3)Image(3)Image控件控件 該控件是用來插入圖片。(4)BUTTON(4)BUTTON、LINKBUTTONLINKBUTTON、IM

54、AGEBUTTONIMAGEBUTTON控件控件 這三個控件分別表示普通按鈕、超鏈接形式的按鈕和圖像按鈕。每當用戶單擊按鈕時，即調用CLICK事件處理程序。(5)HyperLink(5)HyperLink控件控件 該控件用于制作文本或圖片超級鏈接。(6)RadioButton(6)RadioButton單選按鈕單選按鈕 該控件為用戶提供由兩個或多個互斥選項組成的選項集。當用戶選擇某單選按鈕時，同一組中的其他單選按鈕不能同時被選定。當單擊RadionButton按鈕時，其Checked屬性設置為true，并且調用Click事件處理程序。當Checked屬性的值更改時，將引發(fā)CheckedChan

55、ged事件。用戶可以通過用Text屬性設置控件內顯示的文本。第二部分第二部分 開發(fā)技術開發(fā)技術ASP.NET712.2. WebWeb標準控件標準控件 (7)CheckBox(7)CheckBox復選框復選框 該控件通常是成組使用來完成多重選項的目的(8)DropDownList(8)DropDownList控件控件 該控件使用戶可以從下拉列表框中進行選擇。(9)ListBox(9)ListBox列表框列表框 該控件通過顯示多個選項供用戶選擇達到與用戶對話的目的。(10)FileUpload(10)FileUpload文件上載控件文件上載控件 該控件可實現(xiàn)讓用戶在客戶端選擇一個文件,然后放到W

56、eb服務器的某個指定的文件夾下。第二部分第二部分 開發(fā)技術開發(fā)技術ASP.NET722.2. WebWeb標準控件標準控件 (11) Panel(11) Panel和和PlaceholderPlaceholder控件控件 Panel和Placeholder控件都屬于容器控件。容器控件是指該控件可以動態(tài)容納其他控件或HTML元素。要在運行時刻向Web頁面中動態(tài)添加內容，利用容器控件即可實現(xiàn)動態(tài)添加內容到Web頁中。 Panel 和 Placeholder控件(占位控件)轉換成客戶端HTML代碼后，呈現(xiàn)為 div 元素。 Placeholder控件可以將空的容器控件放置到頁內，然后在運行時動態(tài)添加

57、、刪除子元素等。該控件只呈現(xiàn)其子元素，不具有自己的基于 HTML的輸出。 Panel控件最終在客戶端呈現(xiàn)為div元素，但在Web開發(fā)時允許用戶在該控件中添加其他控件，而且在運行過程中也允許動態(tài)添加控件。第二部分第二部分 開發(fā)技術開發(fā)技術ASP.NET733.3. 數(shù)據(jù)控件數(shù)據(jù)控件 數(shù)據(jù)控件根據(jù)所實現(xiàn)的功能分為兩大類：數(shù)據(jù)源控件和數(shù)據(jù)綁定控件。數(shù)據(jù)源控件可實現(xiàn)對不同數(shù)據(jù)源的數(shù)據(jù)訪問，數(shù)據(jù)綁定控件主要用于以 多種方式顯示數(shù)據(jù)?？丶Q控件名稱說明說明數(shù)據(jù)源控件 SqlDataSource用于連接SQL數(shù)據(jù)庫，可以用來從任何OLEDB 或者符合ODBC的數(shù)據(jù)源中檢索數(shù)據(jù)，能夠訪問目前主流的數(shù)據(jù)庫系統(tǒng)

58、。AccessDataSource用于連接Access數(shù)據(jù)庫，允許以聲明方式將Access數(shù)據(jù)庫中的數(shù)據(jù)綁定到指定對象中。ObjectDataSource用于連接自定義對象，允許以聲明方式將對象綁定到自定義對象公開的數(shù)據(jù)，以用于多層Web應用結構。XmlDataSource該控件可裝載XML文件作為數(shù)據(jù)源，并將其綁定到指定的對象中。SiteMapDataSource該控件裝載一個預先定義好的站點布局文件作為數(shù)據(jù)源，Web服務器控件和其他控件可通過該控件綁定到分層站點地圖數(shù)據(jù)，以便制作站點的頁面導航功能。第二部分第二部分 開發(fā)技術開發(fā)技術ASP.NET743.3. 數(shù)據(jù)控件數(shù)據(jù)控件 數(shù)據(jù)綁定控件

59、 Repeater自由地控制數(shù)據(jù)的顯示。即可以使用非表格的形式來顯示數(shù)據(jù)，從而能夠更靈活地定義其顯示的風格。GridView中強大功能的數(shù)據(jù)控件，不需要編寫代碼就可實現(xiàn)數(shù)據(jù)的連接、綁定、編輯、刪除、增加等功能。DataList通過定義模板或樣式來靈活地顯示數(shù)據(jù)。DetailsView用于顯示表中數(shù)據(jù)源的單個記錄，其中每個數(shù)據(jù)行表示記錄中的一個字段。該控件通常與 GridView 控件組合使用，構成主-從方案。FormView用于顯示表中數(shù)據(jù)源的單個記錄。使用 FormView 控件時，由您指定模板以顯示和編輯綁定值。模板中包含用于創(chuàng)建窗體的格式、控件和綁定表達式。FormView 控件通常與

60、GridView 控件一起用于主控/詳細信息方案。ReportViewer用于顯示報表、工具欄和文檔結構圖的視圖區(qū)域。工具欄是可配置的，它提供了運行時功能以支持多頁報表中的導航、縮放、搜索、打印和導出功能。提供編程接口，以便可以自定義控件、配置控件，以及通過代碼與控件進行交互，包括更改在運行時 ReportViewer 使用的數(shù)據(jù)源。第二部分第二部分 開發(fā)技術開發(fā)技術ADO.NET75ADO.NET是一種基于消息機制的數(shù)據(jù)訪問方式。它支持客戶端應用程序通過ODBC、OLEDB、SQLClient三種方式來訪問和操作數(shù)據(jù)庫服務器中的數(shù)據(jù)。1.1. ADO.NETADO.NET概念概念 ADO.N