前端開發(fā)實用技術(shù)教程.doc

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