【我來解惑】.Net應該學什麼怎麼學（三）

接上篇【我來解惑】.Net應該學什麼怎麼學（二）

7、HTML、JavaScript、Dom

       HTML是對網頁長什麼樣子的一個描述，也就是「這裏顯示一個超連接、那裏顯示一個按鈕」都是經過HTML來進行描述的。HTML作出來的頁面是靜態、不變化，若是要實現「點擊【計算】按鈕的時候讓表格放大顯示」這樣的動態效果，則要經過程序操做Dom，通常使用JavaScript這種腳本語言來操做Dom。

 

       若是不想成爲只會拖控件的開發人員的話，須要在學習ASP.Net以前把HTML、JavaScript、Dom這些好好學習。提到這一點有同窗可能會提出異議「不是這樣的呀，ASP.Net已經封裝的很好了，拖幾個控件上來就能夠了，ASP.Net都幫咱們生成HTML了，也不用學JavaScript，動態效果寫C#代碼就能夠了」。

       ASP.Net中這種拖ASP.Net控件的開發技術就叫作WebForm，微軟的WebForm封裝是很是偉大的技術，可以將複雜的Web開發簡化到能夠像開發WinForm程序同樣點擊，不得不佩服微軟技術的強悍。使用WebForm咱們就能夠進行傻瓜化的開發，要是天天的工做、作每一個項目的時候都能一直這樣「傻瓜」下去也是很美好的，可是很不幸有一些場合中是不能使用這種傻瓜化的開發方式的，舉幾個例子：

 

例子1：在網站的註冊頁面中讓用戶所在的省、市，提供兩個下拉列表框（DropDownList），一個爲省的列表框，一個爲市的列表框，當用戶選擇不一樣的省的時候，市列表框中就列出這個省下的全部市供用戶選擇。

對於這樣一個功能點，若是隻會拖控件的人極可能會這麼寫（假設省列表框id爲ddlProvince，市列表框id爲ddlCity），在Page_Load中加載省列表到ddlProvince，而後在ddlProvince的SelectedIndexChanged事件中響應ddlProvince的選擇變化，當ddlProvince選擇變化後根據選中項來填充ddlCity。用這種方法實現最大的缺點就是頁面會頻繁的刷新，每次選擇省之後頁面都會唰一下的刷新一次，這在網速比較慢或者服務器壓力比較大的時候是很慢的，並且用戶體驗不好。這種狀況用JavaScript操做Dom的方法來操做纔會比較好。

 

例子2：ASP.Net WebForm中可使用UpdatePanel控件很輕鬆的實現AJAX效果，不用懂JavaScript、Dom、Json，把控件用UpdatePanel包裹起來AJAX效果就出來了。可是用UpdatePanel實現AJAX只能在對性能要求不高的場合使用，若是要開發互聯網應用等對性能要求很是高的場合，UpdatePanel控件是無法使用的。這時候就須要手寫實現AJAX，而手寫AJAX則須要對JavaScript、Dom很是熟悉。

 

       即便所有使用ASP.Net WebForm控件實現，也是須要對HTML熟悉才能夠的，好比不可能項目中使用ListView控件默認生成的代碼，都須要手動調整ListView的模板，而調整模板就須要手寫HTML，不是什麼都「拖一拖」就行的。微軟如今還推出了一個WebForm的兄弟產品：ASP.Net MVC，ASP.Net MVC並非替代WebForm的，各有所長，可是由於ASP.Net MVC的優勢，之後確定會有愈來愈多的項目使用ASP.Net MVC。在ASP.Net MVC中就沒有WebForm中這麼傻瓜化了，不少地方須要手寫HTML代碼，這就對HTML等要求更高。

 

       上面講了HTML、JavaScript、Dom的重要性，下面來說一下具體要學哪些東西、怎麼學。須要提早說明：Web開發中一個很是麻煩的一點就是HTML、Dom在不一樣瀏覽器有少許的差別性，也就是一段代碼可能在IE中和FireFox中的效果不同，對於初學者來講暫時不須要管那些差別性，下降學習中沒必要要的難度，學習的時候以一個瀏覽器爲主就能夠了。

       剛接觸HTML的人可能感受比較難，可是一旦熟悉了這種標籤式的用法，HTML就變得很是簡單了，HTML中標籤比較多，標籤的可用屬性更多，作爲一個初學者不必把全部標籤、屬性都學習了，並且也不可能都掌握，把最經常使用的標籤以及它們的經常使用屬性掌握了便可，主要的標籤有：p、br、div、font、a、input、img、li、table、select、textarea、span。學習HTML的時候必定要堅持手寫HTML，千萬不要用VisualStudio、Dreamweaver等中的可視化的拖放方式來編寫HTML頁面，若是隻會在設計器可視化拖出HTML頁面的話，後面的學習會困難重重。HTML學習的一個目標就是可以徹底手寫一個不少網站都有的那種靜態註冊頁面出來。

       HTML中還有一個知識點：CSS，CSS是用來對頁面進行美化的描述語言，經過CSS咱們可以將按鈕設置爲紅色或者給一個圖片加上金色邊框。CSS中有很是多的樣式名，不須要掌握這麼多樣式名，學習的時候只要過一遍，大概知道每一個樣式名是作什麼的就能夠；也不須要學習怎麼將頁面作的看好，不須要研究那些好看的CSS效果究竟是什麼作出來的，由於那些工做是美工作的事情，即便是沒有美工的小公司開發人員只要學會怎麼「偷」別的網站作好的特效就能夠了。初學者只要掌握幾種CSS選擇器和Div+CSS佈局就能夠。

       和ASP.Net後臺用C#寫代碼不同，對於Web前臺頁面的動態效果通常使用JavaScript（不用學已經在Web前端中被淘汰的VBScript）來編寫，所以須要首先掌握JavaScript語言，JavaScript和C#的語法同樣都是C語言發展過來，不少語法都和C#差很少，所以不用再從頭學JavaScript語法，只要學習JavaScript和C#相比特有的語法就能夠。JavaScript語言也有不少能夠很深刻研究的東西，好比閉包、面向對象的實現等，可是除非作Web遊戲開發、開發JavaScript庫等對JavaScript要求很是高的領域，若是是開發互聯網站、業務系統等（這佔到公司項目中的大部分）對JavaScript並無過高的要求，只要熟悉一下JavaScript的語法就能夠，而後在後面的Dom中經過練習逐步熟悉JavaScript。對於初學者來講JavaScript到底學到什麼程度是夠用了是很難界定了，你們能夠參考《【傳智播客.Net視頻】第7季JavaScript》這套視頻教程，而後學Dom的時候參考《【傳智播客.Net視頻】第8季Dom》進一步練習就能夠。

       不少初學者剛接觸Dom的時候老是想弄明白「到底什麼是Dom」，勸你們不必糾結於這些概念，只要知道它是幹什麼的就能夠，「經過JavaScript調用Dom中的屬性、方法就能夠動態的操做HTML頁面」、「getElementById就是Dom、btn1.value=’abc’就是dom、btn1.onclick=myclick就是dom」，經過練習你就會明白這一點就能夠了，我們不是編教科書的，不用搞那些無聊的概念定義。

       Dom的東西很是多，仍是那個原則，不用什麼都記住，主要掌握下面幾點：事件、動態設置事件、setInterval定時器、event對象、getElementById、動態建立Dom元素（createElement、innerHTML、innerText）。掌握這些東西仍是要經過大量的練習來掌握的，只要能把第8季Dom這套視頻中的練習熟練寫出來這幾個階段的目標就達到了。

       JQuery目前是最火的一個JavaScript的庫，千萬不要覺得是一個新的語言，聽到過不少「Jquery是JavaScript的終結者，Jquery取代了JavaScript」的說法，卻不知，Jquery只是個JavaScript的一個封裝庫，儘快Jquery語法看起來很是奇怪，可是Jquery確實是徹底符合JavaScript語法的一個封裝庫。Jquery只是對Dom操做的一個封裝，學以前須要Dom基礎，不然學起來會很暈。我不建議初學者學完了Dom之後當即學Jquery，仍是用Dom多寫一些程序之後再來學Jquery纔會掌握的又牢靠又快速，我講課的時候就在講完了Dom之後隔了8天的.Net高級技術纔講Jquery也是基於這個考慮。學習Jquery時的推薦看《【傳智播客.Net視頻】第9季JQuery》這套視頻，而後參考書能夠看《鋒利的JQuery》。