引
　　如今，各種互聯(lián)網(wǎng)的Web應(yīng)用程序?qū)映霾桓F，那么如何快速入門，成長(zhǎng)為一個(gè)優(yōu)秀的Web開(kāi)發(fā)工作者呢？
　　這個(gè)問(wèn)題不容易回答，幾乎所有的培訓(xùn)機(jī)構(gòu)都不能清晰地解答。
　　所以對(duì)于Web開(kāi)發(fā)剛剛?cè)腴T的菜鳥們，我覺(jué)得只有通過(guò)去做，去實(shí)驗(yàn)，學(xué)會(huì)Web開(kāi)發(fā)，可能是學(xué)著學(xué)著，實(shí)驗(yàn)著實(shí)驗(yàn)著就會(huì)了。
　　沒(méi)有人告訴你如何去做。我學(xué)習(xí)的時(shí)候，我的導(dǎo)師只是給了我一堆視頻，一堆文檔。我們從明確一個(gè)目標(biāo)開(kāi)始：“哦，這個(gè)階段，我要獨(dú)立完成一個(gè)簡(jiǎn)單的Web應(yīng)用程序，例如新聞發(fā)布系統(tǒng)”。
　　或許學(xué)會(huì)如何開(kāi)發(fā)Web應(yīng)用程序只是在完成這個(gè)Web應(yīng)用程序過(guò)程中產(chǎn)生的副產(chǎn)品而已。你可以管它叫項(xiàng)目驅(qū)動(dòng)，也可以認(rèn)為這只是學(xué)習(xí)任何語(yǔ)言的一個(gè)非常有效的方法。

　　一、分析與設(shè)計(jì)
　　無(wú)論做一個(gè)傳統(tǒng)的桌面應(yīng)用程序，還是做一個(gè)Web應(yīng)用程序，前期的分析與設(shè)計(jì)是不可避免的。
　　分析：需求分析，你必須了解你要做的是什么，你的客戶到底想要的是什么，在做新聞發(fā)布系統(tǒng)的時(shí)候，我就必須問(wèn)我自己這樣的問(wèn)題：我的新聞發(fā)布系統(tǒng)能干什么，我想他是什么樣子的等等。
　　當(dāng)搞明白了，我到底要做什么的時(shí)候，就要開(kāi)始設(shè)計(jì)了。設(shè)計(jì)是很繁瑣的，記得以前做機(jī)房收費(fèi)系統(tǒng)，設(shè)計(jì)幾乎是改了又改，細(xì)化了又細(xì)化，這里也是一樣。
　　對(duì)于剛剛?cè)腴T的你，我想應(yīng)該簡(jiǎn)單地畫畫頁(yè)面流程圖，選擇什么樣的工具？不重要，可以用Word，可以用Visio，即使用紙也無(wú)所謂，因?yàn)殂U筆和橡皮能讓你快速應(yīng)變，只是如果要保存和傳播，就不要選擇紙了。這個(gè)時(shí)候，頁(yè)面畫出來(lái)，就是一堆框框的羅列，很簡(jiǎn)單，只要能讓自己知道，這個(gè)應(yīng)用最后大概會(huì)是什么樣就可以了。當(dāng)然點(diǎn)擊某個(gè)按鈕能完成什么等，可以用程序流程圖表示出來(lái)，流程圖還是推薦大家畫的，因?yàn)檫@樣你對(duì)系統(tǒng)的整個(gè)脈絡(luò)會(huì)有更加清晰的認(rèn)識(shí)。
　　二、網(wǎng)頁(yè)實(shí)體模型
　　呵呵，理論上說(shuō)，草圖整完了，應(yīng)該做實(shí)體模型了，仍然可以看做是頁(yè)面的細(xì)化，不過(guò)這次看起來(lái)應(yīng)該像最后Web應(yīng)用程序成品的一個(gè)截圖了。當(dāng)然，如果你的客戶就是你自己，只要你自己看著滿意就可以了。
　　如果你是在不信任自己的Ps技術(shù)，或者，你實(shí)在沒(méi)有審美細(xì)胞，又或者你不想成為大牛的網(wǎng)頁(yè)設(shè)計(jì)師，你也可以偷懶，直接奔向網(wǎng)頁(yè)原型的開(kāi)發(fā)。當(dāng)時(shí)，我就偷懶了，給自己的理由是：我是沒(méi)有審美的程序員。事實(shí)證明，如果你沒(méi)有實(shí)體模型，做起網(wǎng)頁(yè)原型來(lái)肯定是要花費(fèi)更多時(shí)間的，有句話說(shuō)得好，“出來(lái)混，早晚要還的”。
　　三、網(wǎng)頁(yè)原型開(kāi)發(fā)
　　網(wǎng)頁(yè)原型是用HTML開(kāi)發(fā)出來(lái)的，肯定是要使用CSS渲染的。一般，我們的HTML文檔都會(huì)利用外部樣式來(lái)定義文檔中使用的樣式。Javascript也放在外部文檔中，這個(gè)文檔只包含了Javascript代碼。
　　按照這樣方式進(jìn)行分離，網(wǎng)站將包含三種文本文件：HTML，包含頁(yè)面的內(nèi)容和結(jié)果；CSS：控制頁(yè)面的外觀和表示；Javascript，控制頁(yè)面的行為。
　　HTML, Javascript, CSS文件必須是純文本格式的，這樣瀏覽器才能理解他們，推薦幾款不錯(cuò)的編碼工具：NotePad++（小巧，免費(fèi)），EditPlus（功能全面的文本、HTML、程序源代碼編輯器），VIM（速度，用它你可以把鼠標(biāo)扔掉了）。
　　這個(gè)時(shí)候，在我的網(wǎng)頁(yè)原型上做一些可用性測(cè)試，防止以后出現(xiàn)大面積的失誤。在這個(gè)步驟的最后，我基本上就知道了我的web應(yīng)用是如何組織到一起的了，前臺(tái)頁(yè)面有什么，各個(gè)頁(yè)面是怎么跳轉(zhuǎn)的等等。
　　這就好比，我做好了一個(gè)車模，剩下的就是讓車跑起來(lái)了，又或者，我是造人，我已經(jīng)把人的皮囊做好了，接下來(lái)就是做它的五臟六腑了，哈哈，貌似人不是這么造的，不太貼切。
　　四、選擇框架
　　現(xiàn)在你已經(jīng)知道了要去開(kāi)發(fā)什么東西了，接下來(lái)的工作依然很多，我想，這個(gè)時(shí)候，你就該選擇，要采用什么語(yǔ)言，什么框架了。
　　有選擇自然就有痛苦。我至今沒(méi)有看到，有人大膽宣稱，哪個(gè)框架最好，哪種語(yǔ)言最好。
　　其實(shí)，它們都各有不同，每個(gè)都有自己的長(zhǎng)處。最重要的是你要知道它們?nèi)魏我粋€(gè)都能讓你開(kāi)發(fā)出好用的web應(yīng)用。
　　選擇合適自己的，真是不容易，還好，如果你并不想花時(shí)間去研究所有框架，那么建議你選擇比較容易上手的ASP.NET 框架吧，語(yǔ)言自然就選擇C#了。
　　如果不是開(kāi)發(fā)很小的系統(tǒng)，我想，你應(yīng)該會(huì)用到數(shù)據(jù)庫(kù)，如果你不知道如何選擇，那就先從Access或者Sql Server開(kāi)始吧。
　　五、開(kāi)發(fā)進(jìn)行時(shí)
　　好像蓄勢(shì)待發(fā)了，那就挽起袖子開(kāi)干吧，標(biāo)準(zhǔn)的編程工作嘛。在后臺(tái)，你要?jiǎng)?chuàng)建類，對(duì)象，服務(wù)，過(guò)程，以及數(shù)據(jù)持久層來(lái)把這些對(duì)象保存到數(shù)據(jù)庫(kù)中。
　　后臺(tái)是整個(gè)應(yīng)用的核心，對(duì)任何應(yīng)用來(lái)說(shuō)，它跟普通的編程沒(méi)有什么區(qū)別，才用面向?qū)ο蟮姆绞?，?yīng)用設(shè)計(jì)模式，等等，可以把C/S開(kāi)發(fā)的經(jīng)驗(yàn)應(yīng)用過(guò)來(lái)。
　　然后，把后臺(tái)的程序和原型界面集成到一起，把系統(tǒng)各部分集成到一起。集成的過(guò)程依然是可以用Javascript精雕細(xì)琢滴，采用jQuey，采用Ajax等等。
　　六、測(cè)試，調(diào)試。
　　這個(gè)時(shí)候，你的web應(yīng)用程序開(kāi)發(fā)已經(jīng)接近尾聲了，只是開(kāi)發(fā)。再回頭看看自己的需求和設(shè)計(jì)是否被實(shí)現(xiàn)，你同時(shí)還要確保你的程序能夠在各種瀏覽器里都能正確的運(yùn)行（如果是IE6，我想你還是會(huì)糾結(jié)一下的，至于為什么？真正做的時(shí)候，你就知道了）。
　　在各個(gè)瀏覽器中調(diào)試的時(shí)候，推薦你安裝一些插件，例如FireFox瀏覽器中的Firebug，IE下可以用WebDevelopmentHelper等。
　　自己測(cè)試沒(méi)有問(wèn)題了，最好找一個(gè)身邊的人簡(jiǎn)單測(cè)試一下，你也不希望，發(fā)布了后，你的應(yīng)用被一些“愚蠢的網(wǎng)友”莫名其妙的操作搞死吧。
　　如果你是一個(gè)追求完美客戶體驗(yàn)的人，那么接下來(lái)就要花些心思去改變你的Web應(yīng)用程序去給用戶創(chuàng)造更美好的體驗(yàn)了，這個(gè)時(shí)候依然會(huì)用到一些剛才提過(guò)的技術(shù)，jQuery和Ajax等，如果你選擇Asp.NET框架，你可以試著了解一下Asp.Net Ajax。
　　七、發(fā)布和后續(xù)工作
　　這最后一步是發(fā)布你的應(yīng)用，如果你愿意，先發(fā)布一個(gè)Beta版，因?yàn)榭隙〞?huì)有bug，這樣只有一小部分用戶能夠發(fā)現(xiàn)你的應(yīng)用里的大問(wèn)題。
　　他們會(huì)幫助你改進(jìn)程序的質(zhì)量。切記，不要忙著增加功能，要專注于把你目前的程序變的穩(wěn)固。
　　經(jīng)過(guò)了beta階段，就要發(fā)布正式版了，這里會(huì)牽扯到一個(gè)推廣的問(wèn)題，像我這種小人物，我還是喜歡用微博，這是個(gè)好東西，如果你不懂，可以去了解一下這方面的動(dòng)態(tài)。
　　或許直到你徹底完成自己的第一個(gè)Web應(yīng)用程序才明白我開(kāi)頭說(shuō)的那句話："或許學(xué)會(huì)如何開(kāi)發(fā)Web應(yīng)用程序只是在完成這個(gè)Web應(yīng)用程序過(guò)程中產(chǎn)生的副產(chǎn)品而已"。
　　那么，上述內(nèi)容一到七中提到的那些英文單詞就是我們開(kāi)發(fā)過(guò)程中學(xué)到的東西，讓我們一起來(lái)大概地看一看，在上述開(kāi)發(fā)過(guò)程到底學(xué)到了什么：
　　1、Html
　　HTML 超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language) ，是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言(markup language) ，HTML 使用一套標(biāo)記標(biāo)簽(markup tag) 來(lái)描述網(wǎng)頁(yè) 。
　　網(wǎng)頁(yè)文件本身是一種文本文件，通過(guò)在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁(yè)文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對(duì)書寫出錯(cuò)的標(biāo)記將不指出其錯(cuò)誤，且不停止其解釋執(zhí)行過(guò)程，編制者只能通過(guò)顯示效果來(lái)分析出錯(cuò)原因和出錯(cuò)部位。但需要注意的是，對(duì)于不同的瀏覽器，對(duì)同一標(biāo)記符可能會(huì)有不完全相同的解釋，因而可能會(huì)有不同的顯示效果。
　　HTML之所以稱為超文本標(biāo)記語(yǔ)言，是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。所謂超級(jí)鏈接，就是一種URL指針，通過(guò)激活（點(diǎn)擊）它，可使瀏覽器方便地獲取新的網(wǎng)頁(yè)。這也是HTML獲得廣泛應(yīng)用的最重要的原因之一。
　　2、Xml
　　Xml可擴(kuò)展標(biāo)記語(yǔ)言 (Extensible MarkupLanguage, XML) ，用于標(biāo)記電子文件使其具有結(jié)構(gòu)性的標(biāo)記語(yǔ)言，可以用來(lái)標(biāo)記數(shù)據(jù)、定義數(shù)據(jù)類型，是一種允許用戶對(duì)自己的標(biāo)記語(yǔ)言進(jìn)行定義的源語(yǔ)言。 XML是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言 (SGML) 的子集，非常適合 Web 傳輸。XML 提供統(tǒng)一的方法來(lái)描述和交換獨(dú)立于應(yīng)用程序或供應(yīng)商的結(jié)構(gòu)化數(shù)據(jù)。
　　XML與HTML的設(shè)計(jì)區(qū)別是：XML是用來(lái)存儲(chǔ)數(shù)據(jù)的，重在數(shù)據(jù)本身。而HTML是用來(lái)定義數(shù)據(jù)的，重在數(shù)據(jù)的顯示模式。
　　3、CSS
　　在Web開(kāi)發(fā)早期，網(wǎng)頁(yè)設(shè)計(jì)人員經(jīng)常抱怨他們對(duì)網(wǎng)頁(yè)的外觀缺乏控制力，他們無(wú)法精確地控制對(duì)象在網(wǎng)頁(yè)上的位置，而且對(duì)頁(yè)面上的字體的外觀也沒(méi)有什么控制力，因?yàn)榫W(wǎng)頁(yè)不比實(shí)際紙張，針對(duì)多大的紙做什么樣的設(shè)計(jì)，而網(wǎng)頁(yè)的大小是不固定的。
　　CSS（Cascading Style Sheet，層疊樣式表）規(guī)范是由W3C制定的，由于允許同時(shí)控制多重頁(yè)面的樣式和布局，CSS可以稱得上 WEB 設(shè)計(jì)領(lǐng)域的一個(gè)突破，它使得內(nèi)容與表現(xiàn)分離 。作為網(wǎng)站開(kāi)發(fā)者，你能夠?yàn)槊總€(gè) HTML元素定義樣式，并將之應(yīng)用于你希望的任意多的頁(yè)面中。如需進(jìn)行全局的更新，只需簡(jiǎn)單地改變樣式，然后網(wǎng)站中的所有元素均會(huì)自動(dòng)地更新。這樣，即設(shè)計(jì)人員能夠?qū)⒏嗟臅r(shí)間用在設(shè)計(jì)方面，而不是費(fèi)力克服HTML的限制。
　　4、JavaScript
　　首先，JavaScript和Java無(wú)關(guān)，JavaScript 是屬于網(wǎng)絡(luò)的腳本語(yǔ)言！那么為什么名字如此相似?這是典型的市場(chǎng)營(yíng)銷方面的成功，它的推廣成功，也是借了Java的東風(fēng)。當(dāng)微軟開(kāi)始意識(shí)到JavaScript在Web開(kāi)發(fā)人員中流行起來(lái)時(shí)，微軟還是一貫風(fēng)格，建立了自己的腳本語(yǔ)言，JScript。
　　JavaScript可以使網(wǎng)頁(yè)更具交互性，給用戶提供更令人興奮的體驗(yàn)，當(dāng)用戶在頁(yè)面間導(dǎo)航時(shí)向他們提供反饋。例如他可以設(shè)置鼠標(biāo)懸停效果，在客戶端驗(yàn)證表單，創(chuàng)建定制的HTML頁(yè)面，顯示警告框，設(shè)置cookie等等。
　　5、Ajax
　　Ajax是Asynchronous JavaScript and XML(異步 JavaScript 和 XML)的縮寫。嚴(yán)格意義上Ajax是Javascript的一小部分。但隨著頻繁地使用，這個(gè)詞不再指某種技術(shù)本身，而是以下這些技術(shù)的組合：
　　XHTML；CSS；JavaScript訪問(wèn)DOM；XML，在服務(wù)器和客戶之間傳輸?shù)臄?shù)據(jù)的格式；XMLHttpRequest，用來(lái)從服務(wù)器獲取數(shù)據(jù)。
　　Ajax是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)，大多數(shù)處理在用戶的瀏覽器中發(fā)生，往往在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，時(shí)間很短，而且AJAX可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新，這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新（傳統(tǒng)的網(wǎng)頁(yè)，即不使用AJAX的網(wǎng)頁(yè)，如果需要更新內(nèi)容，必需重載整個(gè)網(wǎng)頁(yè)面）?；谝陨线@些，可以使用Ajax建立功能豐富的應(yīng)用程序。
　　有很多使用 Ajax的應(yīng)用程序案例：Google 地圖，Google日歷，Gmail，My Yahool！門戶，騰訊微博，新浪微博、開(kāi)心網(wǎng)等等。
　　不錯(cuò)的ajax工具包有：AjaxControlToolkit，Yahool！UserInterfaceLibrary等等。
　　6、DOM
　　在網(wǎng)頁(yè)上，組成頁(yè)面的對(duì)象被組織在一個(gè)樹(shù)形結(jié)構(gòu)中，頁(yè)面的頂級(jí)包含在標(biāo)簽中，在其中會(huì)找到和標(biāo)簽，而其他標(biāo)簽包含在這兩個(gè)標(biāo)簽中，依此類推。
　　Javascript將文檔樹(shù)中的每個(gè)項(xiàng)目當(dāng)作對(duì)象，通過(guò) Javascript，您可以重構(gòu)整個(gè) HTML 文檔。您可以添加、移除、改變或重排頁(yè)面上的對(duì)象，要改變頁(yè)面的某個(gè)東西，Javascript就需要獲得對(duì) HTML 文檔中所有元素進(jìn)行訪問(wèn)的入口。這個(gè)入口，連同對(duì) HTML元素進(jìn)行添加、移動(dòng)、改變或移除的方法和屬性，都是通過(guò)文檔對(duì)象模型來(lái)獲得的，也就是說(shuō)，文檔中對(duì)象的表示稱為文檔對(duì)象模型，即Document Object Model，簡(jiǎn)稱DOM。
　　在1998年，W3C 發(fā)布了第一級(jí)的 DOM 規(guī)范。這個(gè)規(guī)范允許訪問(wèn)和操作 HTML 頁(yè)面中的每一個(gè)多帶帶的元素。所有的瀏覽器都執(zhí)行了這個(gè)標(biāo)準(zhǔn)，因此，DOM的兼容性問(wèn)題也幾乎難覓蹤影了。DOM 可被 Javascript 用來(lái)讀取、改變 HTML、XHTML 以及 XML 文檔。
　　DOM被分為不同的部分（核心、XML及HTML）和級(jí)別（DOM Level 1/2/3）：
　　Core DOM，定義了一套標(biāo)準(zhǔn)的針對(duì)任何結(jié)構(gòu)化文檔的對(duì)象
　　XML DOM，定義了一套標(biāo)準(zhǔn)的針對(duì) XML 文檔的對(duì)象
　　HTML DOM，定義了一套標(biāo)準(zhǔn)的針對(duì) HTML 文檔的對(duì)象。
　　7、jQuery
　　jQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascrīpt框架。它是輕量級(jí)的js庫(kù)(壓縮后只有21k)，它兼容CSS3，還兼容各種瀏覽器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera9.0+）。jQuery使用戶能更方便地處理HTML documents、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說(shuō)明很全，而且各種應(yīng)用也說(shuō)得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁(yè)保持代碼和html內(nèi)容分離，也就是說(shuō)，不用再在html里面插入一堆js來(lái)調(diào)用命令了，只需定義id即可。
　　其宗旨是——WRITE LESS, DO MORE（寫更少的代碼,做更多的事情）。
　　8、ASP.NET。這個(gè)就不用我羅嗦了，你懂得……
　　9、整個(gè)開(kāi)發(fā)過(guò)程你還會(huì)學(xué)習(xí)到一些工具的使用：
　　Visio，Dreamweaver，Vistual Studio，Sql Server或Access，(Vim, EditPlus, Notpad++)，各種瀏覽器以及FireBug的插件，IE下的WebDevelopmentHelper等。
　　10、當(dāng)然，如果你足夠用心，你還發(fā)掘出很多不錯(cuò)的資源，例如MSDN，W3cSchool，一些前輩的博客，一些技術(shù)論壇等等，這都是你未來(lái)前進(jìn)道路上的財(cái)富。
　　綜上，如果你真的完成了自己的Web應(yīng)用程序，并通過(guò)做這個(gè)程序?qū)W習(xí)了以上這些技術(shù)和工具的基礎(chǔ)內(nèi)容，那么恭喜你，你已經(jīng)成為一個(gè)初級(jí)Web應(yīng)用程序開(kāi)發(fā)者了。

如果你在學(xué)習(xí)前端的過(guò)程中遇到什么問(wèn)題或者想獲取學(xué)習(xí)資源的話，歡迎加入前端學(xué)習(xí)交流QQ群：328058344  我們一起學(xué)前端！