.Net應該學什麼怎麼學（三）

七、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.οnclick=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》。