交互式web前端開(kāi)發(fā)實(shí)踐

《交互式Web前端開(kāi)發(fā)實(shí)踐》軟件學(xué)院軟件工程專(zhuān)業(yè)2023/5/3《交互式Web前端開(kāi)發(fā)實(shí)踐》重慶工程學(xué)院第1章Web前端開(kāi)發(fā)概述1.1Web概述1.2Web新技術(shù)發(fā)展及應(yīng)用1.3Web前端開(kāi)發(fā)1.4Web前端開(kāi)發(fā)工具1.1Web概述Web是Internet中最受歡迎的一種多媒體信息服務(wù)系統(tǒng)。整個(gè)系統(tǒng)由Web服務(wù)器、瀏覽器和通信協(xié)議組成。用戶(hù)可通過(guò)Internet從全世界任何地方調(diào)來(lái)所希望得到的文本、圖像（包括活動(dòng)影像）和聲音等信息。另外，Web還可提供其他的Internet服務(wù)如TELNET、FTP、Gopher和USERNET等。1.1Web概述(1)HTTP協(xié)議HTTP是對(duì)TCP/IP協(xié)議集的擴(kuò)展，作為瀏覽器與服務(wù)器間的通信協(xié)議，處于TCP/IP層次中的應(yīng)用層。HTTP是一種無(wú)狀態(tài)協(xié)議，即服務(wù)器不保留與客戶(hù)交易時(shí)的任何狀態(tài)。這可以大大減輕服務(wù)器的存儲(chǔ)負(fù)擔(dān)，從而保持較快的響應(yīng)速度。(2)Web服務(wù)的基本過(guò)程（B/S）1.1Web概述1.1.1Web的發(fā)展(1)最早的網(wǎng)絡(luò)構(gòu)想可以追溯到遙遠(yuǎn)的1980年蒂姆·伯納斯-李構(gòu)建的ENQUIRE項(xiàng)目。….(2)1994年10月在麻省理工學(xué)院計(jì)算機(jī)科學(xué)實(shí)驗(yàn)室成立，建立者是萬(wàn)維網(wǎng)的發(fā)明者蒂姆·伯納斯-李。1.1.2Web特點(diǎn)及架構(gòu)1.Web的形式及特點(diǎn)易于導(dǎo)航的圖形化Web與平臺(tái)無(wú)關(guān)的Web分布式的Web交互式的動(dòng)態(tài)Web(動(dòng)態(tài)網(wǎng)頁(yè))1.1.2Web特點(diǎn)及架構(gòu)1C/S架構(gòu)C/S（Client/Server）又稱(chēng)客戶(hù)/服務(wù)器模式?？蛻?hù)端和服務(wù)器端的程序不同，用戶(hù)的程序主要在客戶(hù)端，客戶(hù)端程序主要完成用戶(hù)的具體的業(yè)務(wù)。服務(wù)器端主要提供數(shù)據(jù)管理、數(shù)據(jù)共享、數(shù)據(jù)及系統(tǒng)維護(hù)和并發(fā)控制等。服務(wù)器通常采用高性能的PC、工作站或小型機(jī)，并采用大型數(shù)據(jù)庫(kù)系統(tǒng)，如Oracle、Sybase、Informix或SQLServer?？蛻?hù)端需要安裝專(zhuān)用的客戶(hù)端軟件。C/S的優(yōu)點(diǎn)：能充分發(fā)揮客戶(hù)端PC的處理能力，很多工作可以在客戶(hù)端處理后再提交給服務(wù)器。對(duì)應(yīng)的優(yōu)點(diǎn)就是客戶(hù)端響應(yīng)速度快。C/S的缺點(diǎn)：客戶(hù)端需要安裝專(zhuān)用的客戶(hù)端軟件。首先涉及到安裝的工作量；客戶(hù)端的操作系統(tǒng)一般也會(huì)有限制。1.1.2Web特點(diǎn)及架構(gòu)2B/S架構(gòu)B/S（Browser/Server）結(jié)構(gòu)即瀏覽器和服務(wù)器結(jié)構(gòu)。優(yōu)點(diǎn)：客戶(hù)端（Browse）基本上沒(méi)有專(zhuān)門(mén)的應(yīng)用程序，應(yīng)用程序基本上都在服務(wù)器端（Server）。由于客戶(hù)端沒(méi)有程序，應(yīng)用程序的升級(jí)和維護(hù)都可以在服務(wù)器端完成，升級(jí)維護(hù)方便。缺點(diǎn)：由于客戶(hù)端使用瀏覽器，使得用戶(hù)界面“豐富多彩”，但數(shù)據(jù)的打印輸出等功能受到了限制；數(shù)據(jù)實(shí)時(shí)性差、大數(shù)據(jù)運(yùn)算速度和性能不佳等。1.1.2Web特點(diǎn)及架構(gòu)3.C/S與B/S區(qū)別硬件環(huán)境不同對(duì)安全要求不同對(duì)程序架構(gòu)不同軟件重用不同系統(tǒng)維護(hù)不同用戶(hù)接口不同信息流不同1.2Web新技術(shù)發(fā)展及應(yīng)用1.2.1Web3.01.2.2Web新技術(shù)的應(yīng)用1.2Web新技術(shù)發(fā)展及應(yīng)用Web2.0指的是一個(gè)由用戶(hù)主導(dǎo)來(lái)創(chuàng)造、協(xié)同合作、分享各種資訊與內(nèi)容的開(kāi)放平臺(tái)。Web2.0是網(wǎng)絡(luò)運(yùn)用的新階段；Web2.0階段以Blog，Wiki，SNS等社交軟件的應(yīng)用為核心。1.2.1Web3.01.認(rèn)識(shí)Web3.0Web3.0只是由業(yè)內(nèi)人員制造出來(lái)的概念詞語(yǔ)，最常見(jiàn)的解釋是，網(wǎng)站內(nèi)的信息可以直接和其他網(wǎng)站相關(guān)信息進(jìn)行交互，能通過(guò)第三方信息平臺(tái)同時(shí)對(duì)多家網(wǎng)站的信息進(jìn)行整合使用；用戶(hù)在互聯(lián)網(wǎng)上擁有自己的數(shù)據(jù)，并能在不同網(wǎng)站上使用；完全基于Web，用瀏覽器即可實(shí)現(xiàn)復(fù)雜系統(tǒng)程序才能實(shí)現(xiàn)的系統(tǒng)功能。2.

Web3.0介紹Web3.0是目前所能想象的未來(lái)互聯(lián)網(wǎng)應(yīng)用的框架。Web3.0是三廣+三跨（廣域的、廣語(yǔ)的、廣博的、跨區(qū)域、跨語(yǔ)種、跨行業(yè)）。Web3.0階段將是一個(gè)個(gè)性智能化的時(shí)代，無(wú)論使用者使用任何終端，只要打開(kāi)瀏覽器就能進(jìn)入自己的世界1.2.1Web3.03.Web3.0特征Web3.0的網(wǎng)絡(luò)模式將實(shí)現(xiàn)不同終端的兼容。良好的人性化用戶(hù)體驗(yàn)、以及基礎(chǔ)性的個(gè)性化配置Web3.0同樣以人為本，將用戶(hù)的偏好作為設(shè)計(jì)的主要考慮因素。個(gè)性化搜索引擎以有效的用戶(hù)偏好信息處理為基礎(chǔ)，對(duì)用戶(hù)進(jìn)行的各種操作以及用戶(hù)提出的各種要求為依據(jù)，來(lái)分析用戶(hù)的偏好。Web3.0將建立可信的SNS（社會(huì)網(wǎng)絡(luò)服務(wù)系統(tǒng)），可管理的VoIP（VoiceoverInternetProtocol，模擬信號(hào)）與IM（Imay，電子競(jìng)技俱樂(lè)部），可控的Blog/Vlog/Wiki，實(shí)現(xiàn)數(shù)字通信與信息處理、網(wǎng)絡(luò)與計(jì)算、媒體內(nèi)容與業(yè)務(wù)智能、傳播與管理、藝術(shù)與人文的有序有效結(jié)合和融會(huì)貫通。1.2.2Web新技術(shù)發(fā)展及應(yīng)用移動(dòng)終端桌面應(yīng)用互聯(lián)網(wǎng)電視跨平臺(tái)的Web應(yīng)用網(wǎng)絡(luò)游戲1.3Web前端開(kāi)發(fā)1.3.1什么是Web前端開(kāi)發(fā)技術(shù)1.3.2Web前端開(kāi)發(fā)工程師1.3.1什么是Web前端開(kāi)發(fā)技術(shù)Web前端技術(shù)包括三個(gè)主要的因素：HTTL、CSS、JavaScript。隨著RIA（RichInternetApplications，豐富互聯(lián)網(wǎng)程序）的流行和普及，F(xiàn)lash/Flex、Silverlight、XML和服務(wù)器端語(yǔ)言也成了前端開(kāi)發(fā)的重要語(yǔ)言。隨著時(shí)代的發(fā)展，前端開(kāi)發(fā)技術(shù)的三要素也演變成為現(xiàn)今的：HTML5，CSS3和JQuery。1.3.2Web前端開(kāi)發(fā)工程師Web前端開(kāi)發(fā)工程師是一個(gè)很新的職業(yè)，在國(guó)內(nèi)乃至國(guó)際上真正開(kāi)始受到重視的時(shí)間不超過(guò)10年。Web前端開(kāi)發(fā)是從網(wǎng)頁(yè)制作演變而來(lái)的，名稱(chēng)上有很明顯的時(shí)代特征。（1）Web前端開(kāi)發(fā)工程師需求現(xiàn)狀（2）Web前端開(kāi)發(fā)工程師職業(yè)要求一名優(yōu)秀的前端開(kāi)發(fā)工程師，不單單需要掌握前端必須的各種技術(shù)，同時(shí)還要掌握其它技術(shù)，需要掌握一點(diǎn)后臺(tái)的知識(shí)，同時(shí)也要對(duì)網(wǎng)站構(gòu)架有一定的了解，同時(shí)還要掌握一定的SEO網(wǎng)站優(yōu)化技術(shù)，這樣才可以稱(chēng)之為一個(gè)“優(yōu)秀的web前端開(kāi)發(fā)工程師”。1.3.2Web前端開(kāi)發(fā)工程師如何才能做得更好呢？第一，必須掌握基本的Web前端開(kāi)發(fā)技術(shù)，其中包括：CSS、HTML、SEO、DOM、BOM、Ajax、JavaScript等，在掌握這些技術(shù)的同時(shí)，還要清楚地了解它們?cè)诓煌瑸g覽器上的兼容情況、渲染原理和存在的Bug。第二，在一名合格的前端工程師的知識(shí)結(jié)構(gòu)中，網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端的基礎(chǔ)知識(shí)也是必須掌握的。第三，必須學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開(kāi)發(fā)。第四，除了要掌握技術(shù)層面的知識(shí)，還要掌握理論層面的知識(shí)，包括代碼的可維護(hù)性、組件的易用性、分層語(yǔ)義模板和瀏覽器分級(jí)支持，等等。1.4Web前端開(kāi)發(fā)工具1.4.1CSS工具1.4.2JavaScript工具1.4.3圖像優(yōu)化工具1.4.4開(kāi)發(fā)及調(diào)試工具1.4.1CSS工具優(yōu)秀的工具，可以使開(kāi)發(fā)者的開(kāi)發(fā)工作事半功倍，創(chuàng)建出高品質(zhì)的Web應(yīng)用程序。本節(jié)講介紹8款重要的Web開(kāi)發(fā)工具，涵蓋CSS、JavaScript、圖像優(yōu)化及調(diào)試的Web開(kāi)發(fā)工作。（1）LayerStyles（2）BearCSS1.4.2JavaScript工具（1）Bookmarkleter（2）JSLint