Web前端開發入門不得不看

　　引
　　現在，各類互聯網的Web應用程序層出不窮，那麼如何快速入門，成長爲一個優秀的Web開發工做者呢？
　　這個問題不容易回答，幾乎全部的培訓機構都不能清晰地解答。
　　因此對於Web開發剛剛入門的菜鳥們，我以爲只有經過去作，去實驗，學會Web開發，多是學着學着，實驗着實驗着就會了。
　　沒有人告訴你如何去作。我學習的時候，個人導師只是給了我一堆視頻，一堆文檔。咱們從明確一個目標開始：「哦，這個階段，我要獨立完成一個簡單的Web應用程序，例如新聞發佈系統」。
　　或許學會如何開發Web應用程序只是在完成這個Web應用程序過程當中產生的副產品而已。你能夠管它叫項目驅動，也能夠認爲這只是學習任何語言的一個很是有效的方法。

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

若是你在學習前端的過程當中遇到什麼問題或者想獲取學習資源的話，歡迎加入前端學習交流QQ羣：328058344 咱們一塊兒學前端！