本書系統介紹了Web程序設計的基本思想、原理、技術和開發實踐,反映了Web開發技術的*新進展,涵蓋了Web程序設計的基本理論、基本知識、基本技術和技術內核,體現了理論和實踐相統一的理念。內核分析及技術介紹深入淺出,易于理解和掌握,與實戰相結合,具有很強的實用性。
本書共分10章,第1章介紹Web開發技術基礎,第2章介紹網站設計與開發,第3章介紹客戶端設計與開發,第4章介紹HTML5技術,第5章介紹CSS技術,第6章介紹服務器端設計與開發,第7章介紹Servlet技術,第8章介紹JavaBean技術,第9章介紹JDBC技術,第10章是案例分析。
本書可作為高等院校計算機及信息類相關專業本科生、研究生教材及參考用書,也可作為高校教師、科研單位研究人員的參考書。
本書可滿足現階段和今后一段時間內在校本科生、研究生及Web技術開發愛好者的需求。本書針對性強,內容廣泛。技術及內核介紹深入淺出,易于理解和掌握,并且與實戰相結合,具有很強的實用性。
第3章客戶端設計與開發
本章主要介紹客戶端技術開發的相關知識。本章分11節,3.1節和3.2節是DHTML和JavaScript的概述; 3.3節介紹JavaScript的基本語法; 3.4節介紹JavaScript的事件驅動機制; 3.5節~3.7節介紹JavaScript的內部對象、瀏覽器對象和文檔對象模型; 3.8節和3.9節介紹JavaScript的客戶端驗證和開發實例; 3.10節介紹jQuery框架; 3.11節介紹AJAX技術。
3.1DHTML簡介
單純地用XHTML和CSS技術設計的靜態頁面缺少動態的效果。當Microsoft和Netscape發布其各自瀏覽器的第4版時,Web開發人員有了一個新的選擇——動態HTML(Dynamic HTML,DHTML)。
DHTML不是一個W3C標準,而更像是一種營銷手段。DHTML結合了(X)HTML、CSS、JavaScript和DOM,使開發人員可以動態地修改Web頁面的內容和結構。
實現DHTML,就是以(X)HTML為基礎,運用DOM將頁面元素對象化,利用JavaScript控制這些對象的CSS屬性以達到網頁的動態視覺效果。
下面通過訪問微軟中國體驗DHTML帶來的神奇效果。
如圖31所示,當用戶將鼠標指針移動到頁面導航條上時會動態地彈出一個菜單。在該菜單中移動鼠標,所指向的菜單項的顏色改變; 如果將鼠標指針移出菜單所在的范圍,則菜單自動隱藏; 如果將鼠標指針移動到導航條上的另外一個區域,則會彈出另外一個菜單。
圖31DHTML示例
這種特性類似于Windows應用程序的特性,即通過圖形化的界面為用戶提供盡可能多的功能。實際上,采用這種方式可以使同一個頁面上包含更多的信息,對于微軟中國這樣龐大的站點來說十分有用。
3.2JavaScript簡介
頁面動態效果分為以下兩種。
(1) 客戶端的動態效果: 稱為DHTML網頁,Web頁面可以處理各種事件,例如鼠標移動時圖片會有翻轉效果等。
(2) 客戶端與服務器端交互產生的動態效果: 稱為動態網頁,指根據訪問者的請求由服務器端腳本程序動態生成的Web頁。
客戶端腳本語言是實現DHTML網頁的合適工具,主要的客戶端腳本語言有JavaScript、JScript和VBScript。JavaScript是最早的客戶端腳本語言,也是瀏覽器默認的客戶端腳本語言。JavaScript的出現使得信息和用戶之間不僅只是一種顯示和瀏覽的關系,而是實現了一種實時的、動態的、可交換式的表達能力。
JavaScript常見的應用有客戶端驗證、動畫效果、文字特效、動態窗口等。
3.2.1JavaScript的發展歷史
JavaScript語言早期是Netscape的開發者們稱之為“Mocha”的語言,開始在網上進行β測試(由軟件的多個用戶在其實際使用環境下進行的測試叫β測試)時,將名字改為“LiveScript”。
Sun公司推出Java之后Netscape引入了Sun的概念,在其發行Netscape 2.0β測試版時才稱“JavaScript”。它不僅支持Applet小程序,同時向Web頁的制作者提供一種嵌入HTML文檔進行編程的、基于對象的Script(腳本)程序語言,采用的許多結構與Java相似。
隨后JavaScript語言規范不斷發展,從1.1、1.2、1.3版本發展到現在的1.5版本,不斷完善JavaScript數據表現和控制的能力。最初創建JavaScript是為了幫助開發人員動態地修改頁面上的標記,以便為客戶提供更豐富的體驗。后來人們認識到頁面也可以當作對象,隨即文檔對象模型(Document Object Model,DOM)就應運而生了。DOM剛剛誕生,JavaScript就和DOM緊密地交織在一起,但不久它們就“分道揚鑣”,并各自發展。