接上篇【我来解惑】.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.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》。