第1章 Web前端開發技術概述一、選擇題1C 2B 3A 4C 5C6D 二、填空題1HTML2HTTP（Hypertext Transfer Protocol，超文本傳輸協議）3HTML，CSS，JavaScript4background5img三、簡答題1答：圖1-1 C/S架構應用程序的工作原理在Web應用程序出現之前，“客戶機/服務器”（C/S）是應用程序的主流架構。C/S架構應用程序的工作原理如圖1-1所示。C/S架構應用程序的特點是客戶機通過發送一條消息或一個操作來啟動與服務器之間的交互，而服務器通過返回消息進行響應。客戶端程序為用戶提供管理和操作界面，而數據通常保存在服務器端。在部署C/S架構的應用程序時，需要為每個用戶安裝客戶端程序，升級應用程序是也同樣需要升級客戶端程序。這無疑增加了維護成本。典型的客戶機/服務器網絡模型就是支持多用戶的數據庫管理系統。2答：隨著互聯網的應用和推廣，瀏覽器/服務器（B/S）網絡模型誕生了，其工作原理如圖1-3所示。圖1-3 瀏覽器/服務器（B/S）網絡模型B/S結構的應用程序只需要部署在Web服務器上即可，應用程序可以是HTML（HTM）文件或ASP、PHP等腳本文件。用戶只需要安裝Web瀏覽器就可以瀏覽所有網站的內容。這無疑比C/S結構應用程序要方便得多。3答：Web服務器通常需要有固定的IP地址和永久域名，其主要功能如下：l 存放Web應用程序。l 接受用戶申請的服務。如果用戶申請瀏覽ASP、PHP等腳本文件，則Web服務器會對腳本進行解析，生成對應的臨時HTML（HTM）文件。l 如果腳本中需要訪問數據庫，則將SQL語句傳送到數據庫服務器，并接收查詢結果。l 將HTML（HTM）文件傳送到Web瀏覽器。4答：Web瀏覽器的主要功能如下：l 由用戶向指定的Web服務器（網站）申請服務。申請服務時需要指定Web服務器的域名或地址以及要瀏覽的HTML（HTM）文件或ASP、PHP等腳本文件。l 從Web服務器下載申請的HTML（HTM）文件。l 解析并顯示HTML（HTM）文件，用戶可以通過Web瀏覽器申請指定的Web服務器l Web瀏覽器和Web服務器使用HTTP協議進行通信。5答：在完成需求分析和總體設計的情況下，開發Web應用程序的基本流程如圖1-4所示。圖1-4 開發Web應用程序的基本流程1設計Web應用程序中包含的模塊和頁面在開始開發Web應用程序之前，應由項目組長或系統分析員將Web應用程序劃分成若干模塊，并定義每個模塊包含的頁面以及模塊間的接口。這是項目組成員分工合作的前提。2配置Web服務器運行Web應用程序需要一個載體，即Web服務器。一個Web服務器可以放置多個Web應用程序，也可以把Web服務器稱為Web站點。通常服務器有兩層含義，一方面它代表計算機硬件設備，用來安裝操作系統和其他應用軟件；另一方面它又代表安裝在硬件服務器上的相關軟件。要配置Web應用程序，首先需要準備一臺硬件服務器，如果沒有特殊需要，選擇普通的PC服務器即可。PC服務器的組件與普通計算機相似，只是PC服務器比普通計算機擁有更高的性能和更好的穩定性。在開發和測試階段，或者比較小的網絡環境下，也可以使用普通計算機作為Web服務器。Web服務器應用程序可以響應用戶通過瀏覽器提交的請求。常用的Web服務器應用程序包括IIS和Apache等。數據庫服務器用來存儲網站中的數據，例如注冊用戶的信息、用戶發貼的信息等。常用的數據庫產品包括SQL Server、Access、Oracle和MySQL等。3前端開發通常需要根據總體設計文檔將每個功能模塊劃分成若干個網頁文件；前端開發的主要任務是設計網頁的架構、顯示風格、特效和一些客戶端功能。通常由美工設計網頁中需要使用的圖片和flash等資源，再使用DreamWeaver設計網頁的界面，包括網頁的基本框架和網頁中的靜態元素，例如表格、靜態圖像和靜態文本等，然后使用JavaScript程序實現網頁特效和客戶端功能。關于Web前端開發實用技術的具體情況將在1.2小節介紹。4后端開發在完成需求分析和總體設計后，程序員（通常項目組里有專門負責數據庫管理和編程的人員）需要根據總體設計的要求設計具體的數據庫結構，包括創建數據庫、決定數據庫中包含哪些表和視圖、設計表和視圖結構等。在設計數據庫結構后，可以通過編寫數據庫腳本來創建這些數據庫對象。在安裝應用程序時就可以執行這些數據庫腳本來創建數據庫對象了。后端開發的重點還在于程序員在網頁中添加ASP、PHP或ASP.NET代碼，訪問數據庫、完成網頁的具體功能。5集成在很多情況下，前端開發和后端開發是由一個人完成的。此時就不存在前端和后端的集成問題了。如果有專門的前端開發人員，則需要在開發前期約定好網頁的框架和數據接口，然后分別開發，最后將前端開發和后端開發的成果集成在一起。完成集成工作的程序員需要同時熟悉前端開發技術和后端開發技術。通常可以由前端開發人員在實現了后端開發功能的網頁中添加前端開發的代碼，實現網頁特效。后端開發的主要職責是準備數據，前端開發的主要職責是豐富行為。6測試Web應用程序，通過測試后上線運行在Web應用程序開發完成后，需要測試其具體功能的實現情況。在通過測試達到實際應用的需求后，可以將Web應用程序布署到Web服務器上。通常需要準備一個備份Web服務器，以便實現數據備份，并且在增加新功能時提供測試環境。第2章 JavaScript語言基礎一、選擇題1B 2A 3A二、填空題1js2=3continue4break三、簡答題1答：類型具體描述Undefined當聲明的變量未初始化時，該變量的默認值是 undefinedNull空值，如果引用一個沒有定義的變量，則返回空值Boolean布爾類型，包含true和falseString字符串類型，由單引號或雙引號括起來的字符Number數值類型，可以是32位、64位整數或浮點數2答：3答:for(表達式1; 表達式2; 表達式3) 循環體程序在開始循環時計算表達式1的值，通常對循環計數器變量進行初始化設置；每次循環開始之前，計算表達式2的值，如果為True，則繼續執行循環，否則退出循環；每次循環結束之后，對表達式3進行求值，通常改變循環計數器變量的值，使表達式2在某次循環結束后等于False，從而退出循環。第3章 javaScript函數一、選擇題1B 2B 3D二、填空題1confirm()2escape()3return4. js三、簡答題1. 答：可以使用function關鍵字來創建自定義函數，其基本語法結構如下：function 函數名 (參數列表) 函數體參數列表可以為空，即沒有參數；也可以包含多個參數，參數之間使用逗號（,）分隔。函數體可以是一條語句，也可以由一組語句組成。2. 答：1在JavaScript中使用函數名來調用函數2在HTML中使用javascript:方式調用JavaScript函數3與事件結合調用JavaScript函數3. 答：在函數中也可以定義變量，在函數中定義的變量被稱為局部變量。局部變量只在定義它的函數內部有效，在函數體之外，即使使用同名的變量，也會被看作是另一個變量。相應地，在函數體之外定義的變量是全局變量。全局變量在定義后的代碼中都有效，包括它后面定義的函數體內。如果局部變量和全局變量同名，則在定義局部變量的函數中，只有局部變量是有效的。4. 答：在HTML文件中引用函數庫js文件的方法如下：/ 引用js文件中的函數第4章 操作HTML元素一、選擇題1A 2B 3B 4A 5B二、填空題1document.getElementById()2. attr()3has()三、簡答題面向對象程序設計思想可以將一組數據和與這組數據有關操作組裝在一起，形成一個實體，這個實體就是對象。具有相同或相似性質的對象的抽象就是類。因此，對象的抽象是類，類的具體化就是對象。例如，如果人類是一個類，則一個具體的人就是一個對象。第5章 jQuery插件一、選擇題1A 2C 3A 4D二、填空題1jquery.插件名.js2jQuery. expr3jQuery對象.封裝的jQuery對象方法4jQuery.全局函數名()5waypoint()三、簡答題1答:jQuery插件可以分為下面3種類型。（1）封裝jQuery對象方法：把一些常用功能定義為函數，綁定到jQuery對象上，從而擴展了jQuery對象。（2）全局函數：把自定義函數附加到jQuery命名空間下，從而作為一個公共的全局函數使用。（3）自定義選擇器：編寫一個自定義函數，返回滿足指定條件的HTML元素對應的jQuery對象。2答：(function($) / 這里放插件代碼 )(jQuery);第6章 表單編程一、選擇題1C 2B 3A 4B 5A二、填空題1提交按鈕（submit）；重置按鈕（reset）；普通按鈕（button）2type3textarea4submit；reset；button5blur三、簡答題1答1使用document.getElementById()方法獲取表單對象2使用document.getElementsByName()方法獲取表單對象3使用document. getElementsByTagName ()方法獲取表單對象4使用document.forms數組獲取表單對象2答：使用document.getElementById()方法、document.getElementsByName()方法和document. getElementsByTagName ()方法獲取表單元素對象。除此之外，還可以使用下面的方法獲取表單元素對象。1使用表單的elements數組屬性獲取表單元素對象2以表單元素名作為表單對象的屬性獲取表單元素對象第7章 JavaScript編輯和調試工具一、填空題1工作區2工作臺（workbench）3開發人員工具4Console二、練習題略第8章 設置CSS樣式一、選擇題1C 2A 3D 4B二、填空題1Cascading Style Sheet（層疊樣式表）2border-radius3box-shadow4document.styleSheets三、簡答題1答：CSS是Cascading Style Sheet（層疊樣式表）的縮寫，它可以擴展HTML的功能，重新定義HTML元素的顯示方式。CSS所能改變的屬性包括字體、文字間的空間、列表、顏色、背景、頁邊距和位置等。使用CSS的好處在于用戶只需要一次性定義文字的顯示樣式，就可以在各個網頁中統一使用了，這樣既避免了用戶的重復勞動，也可以使系統的界面風格統一。CSS是一種能使網頁格式化的標準，使用CSS可以使網頁格式（由CSS定義）與內容（由HTML定義）分開，先決定文本的格式是什么樣的，然后再確定文檔的內容。2答：在CSS3中，設置邊框顏色的屬性如下。l border-bottom-colors：定義底邊框的顏色；l border-top-colors:：定義頂邊框的顏色；l border-left-colors:：定義左邊框的顏色；l border-right-colors:：定義右邊框的顏色。第9章 Ajax編程一、選擇題1A 2B 3B 4A二、填空題1XMLHttpRequest2onreadystatechange3getResponseHeader()4timeout三、簡答題1答使用XMLHttpRequest對象可以實現下面的功能：l 在不重新加載頁面的情況下更新網頁；l 在頁面已加載后從服務器請求數據；l 在頁面已加載后從服務器接收數據；l 在后臺向服務器發送數據。2答l method：用于請求的 HTTP 方法。值包括GET、POST和HEAD。l url：所調用的服務器資源的URL。l async：布爾值，指示這個調用使用異步還是同步，默認為true（即異步）。l username：可選參數，為url所需的授權提供認證用戶。l password：可選參數，為url所需的授權提供認證密碼。第10章 JavaScript HTML5編程一、選擇題1A 2C 3D 4C 5A6A 二、填空題1拖拽（drag）；放開（drop）2dataTransfer3Geolocation API4Audio5Loop617source三、問答題1答：標 簽具 體 描 述mark用于定義帶有記號的文本time用于定義公歷的時間（24小時制）或日期，時間和時區meter用于定義度量衡。僅用于已知最大和最小值的度量。瀏覽器會使用圖形方式表現 meter標簽，例如，在Google Chrome中meter標簽的表現如圖10-2所示progress用于定義一個進度條，例如，在Google Chrome中progress標簽的表現如圖10-3所示2答：在HTML5中可以通過下面的方法進行繪圖：l 使用Canvas API動態地繪制各種效果精美的圖形；l 繪制可伸縮矢量圖形（SVG）。3答：位置信息的通常來源包括。l GPS（全球定位系統）：這種方式可以提供很精確的定位，但需要專門的硬件設備，定位效率也不高。l IP地址：多用于計算機設備，定位并不準確。l RFID（Radio Frequency Identification，無線射頻標簽）：可以通過讀卡器的信號、報文到達時間或定位器等等數據確定標簽的位置。lWiFi：無線上網時，可以通過WiFi熱點（AP或無線路由器）來定位客戶端設備。l GSM/CDMA小區標識碼：可以根據手機用戶的基站數據定位手機設備。l 用戶輸入：除了以上方法外，還可以允許用戶自定義位置信息。第11章 最流行的JavaScript腳本庫jQuery一、選擇題1D 2C 3D 4B二、填空題1src2$(*)3:first4attr()5Animate()6fx三、簡答題1答（1）ancestor descendant（祖先 后代）選擇器ancestor descendant選擇器可以選取指定祖先元素的所有指定類型的后代元素。例如，使用$(form input)可以選擇表單中的所有input元素。（2）parent child（父 子）選擇器parent child選擇器可以選取指定父元素的所有子元素，子元素必須包含在父元素中。例如，使用$(form input)可以選擇表單中的所有input元素。（3）prev + next（前 + 后）選擇器prev + next選擇器可以選取緊接在指定的prev元素后面的next元素。例如，使用$(labe