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

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