Web前端开发入门不得不看

如今，各种互联网的web应用程序层出不穷，那么如何快速入门，成长为一个优秀的web开发工作者呢？
　　这个问题不容易回答，几乎所有的培训机构都不能清晰地解答。
　　所以对于web开发刚刚入门的菜鸟们，我觉得只有通过去做，去实验，学会web开发，可能是学着学着，实验着实验着就会了。
　　没有人告诉你如何去做。我学习的时候，我的导师只是给了我一堆视频，一堆文档。我们从明确一个目标开始：“哦，这个阶段，我要独立完成一个简单的web应用程序，例如新闻发布系统”。
　　或许学会如何开发web应用程序只是在完成这个web应用程序过程中产生的副产品而已。你可以管它叫项目驱动，也可以认为这只是学习任何语言的一个非常有效的方法。

我还是要推荐下我自己创建的web前端资料分享群606721798，这是web前端学习交流的地方，不管你是小白还是大牛，小编都欢迎，不定期分享干货，包括我整理的一份适合零基础学习web前端的资料和入门教程。

一、分析与设计

　　无论做一个传统的桌面应用程序，还是做一个web应用程序，前期的分析与设计是不可避免的。

　　分析：需求分析，你必须了解你要做的是什么，你的客户到底想要的是什么，在做新闻发布系统的时候，我就必须问我自己这样的问题：我的新闻发布系统能干什么，我想他是什么样子的等等。

　　当搞明白了，我到底要做什么的时候，就要开始设计了。设计是很繁琐的，记得以前做机房收费系统，设计几乎是改了又改，细化了又细化，这里也是一样。

　　对于刚刚入门的你，我想应该简单地画画页面流程图，选择什么样的工具？不重要，可以用word，可以用visio，即使用纸也无所谓，因为铅笔和橡皮能让你快速应变，只是如果要保存和传播，就不要选择纸了。这个时候，页面画出来，就是一堆框框的罗列，很简单，只要能让自己知道，这个应用最后大概会是什么样就可以了。当然点击某个按钮能完成什么等，可以用程序流程图表示出来，流程图还是推荐大家画的，因为这样你对系统的整个脉络会有更加清晰的认识。

二、网页实体模型

　　呵呵，理论上说，草图整完了，应该做实体模型了，仍然可以看做是页面的细化，不过这次看起来应该像最后web应用程序成品的一个截图了。当然，如果你的客户就是你自己，只要你自己看着满意就可以了。

　　如果你是在不信任自己的ps技术，或者，你实在没有审美细胞，又或者你不想成为大牛的网页设计师，你也可以偷懒，直接奔向网页原型的开发。当时，我就偷懒了，给自己的理由是：我是没有审美的程序员。事实证明，如果你没有实体模型，做起网页原型来肯定是要花费更多时间的，有句话说得好，“出来混，早晚要还的”。

三、网页原型开发

　　网页原型是用html开发出来的，肯定是要使用css渲染的。一般，我们的html文档都会利用外部样式来定义文档中使用的样式。javascript也放在外部文档中，这个文档只包含了javascript代码。

　　按照这样方式进行分离，网站将包含三种文本文件：html，包含页面的内容和结果；css：控制页面的外观和表示；javascript，控制页面的行为。

　　html, javascript, css文件必须是纯文本格式的，这样浏览器才能理解他们，推荐几款不错的编码工具：notepad++（小巧，免费），editplus（功能全面的文本、html、程序源代码编辑器），vim（速度，用它你可以把鼠标扔掉了）。

　　这个时候，在我的网页原型上做一些可用性测试，防止以后出现大面积的失误。在这个步骤的最后，我基本上就知道了我的web应用是如何组织到一起的了，前台页面有什么，各个页面是怎么跳转的等等。

　　这就好比，我做好了一个车模，剩下的就是让车跑起来了，又或者，我是造人，我已经把人的皮囊做好了，接下来就是做它的五脏六腑了，哈哈，貌似人不是这么造的，不太贴切。

四、选择框架

　　现在你已经知道了要去开发什么东西了，接下来的工作依然很多，我想，这个时候，你就该选择，要采用什么语言，什么框架了。

　　有选择自然就有痛苦。我至今没有看到，有人大胆宣称，哪个框架最好，哪种语言最好。

　　其实，它们都各有不同，每个都有自己的长处。最重要的是你要知道它们任何一个都能让你开发出好用的web应用。

　　选择合适自己的，真是不容易，还好，如果你并不想花时间去研究所有框架，那么建议你选择比较容易上手的http://asp.net 框架吧，语言自然就选择java了。

　　如果不是开发很小的系统，我想，你应该会用到数据库，如果你不知道如何选择，那就先从access或者sql server开始吧。

五、开发进行时

　　好像蓄势待发了，那就挽起袖子开干吧，标准的编程工作嘛。在后台，你要创建类，对象，服务，过程，以及数据持久层来把这些对象保存到数据库中。

　　后台是整个应用的核心，对任何应用来说，它跟普通的编程没有什么区别，才用面向对象的方式，应用设计模式，等等，可以把c/s开发的经验应用过来。

　　然后，把后台的程序和原型界面集成到一起，把系统各部分集成到一起。集成的过程依然是可以用javascript精雕细琢滴，采用jquey，采用ajax等等。

六、测试，调试。

　　这个时候，你的web应用程序开发已经接近尾声了，只是开发。再回头看看自己的需求和设计是否被实现，你同时还要确保你的程序能够在各种浏览器里都能正确的运行（如果是ie6，我想你还是会纠结一下的，至于为什么？真正做的时候，你就知道了）。

　　在各个浏览器中调试的时候，推荐你安装一些插件，例如firefox浏览器中的firebug，ie下可以用webdevelopmenthelper等。

　　自己测试没有问题了，最好找一个身边的人简单测试一下，你也不希望，发布了后，你的应用被一些“愚蠢的网友”莫名其妙的操作搞死吧。

　　如果你是一个追求完美客户体验的人，那么接下来就要花些心思去改变你的web应用程序去给用户创造更美好的体验了，这个时候依然会用到一些刚才提过的技术，jquery和ajax等，如果你选择http://asp.net框架，你可以试着了解一下http://asp.net ajax。

七、发布和后续工作

　　这最后一步是发布你的应用，如果你愿意，先发布一个beta版，因为肯定会有bug，这样只有一小部分用户能够发现你的应用里的大问题。

　　他们会帮助你改进程序的质量。切记，不要忙着增加功能，要专注于把你目前的程序变的稳固。

　　经过了beta阶段，就要发布正式版了，这里会牵扯到一个推广的问题，像我这种小人物，我还是喜欢用微博，这是个好东西，如果你不懂，可以去了解一下这方面的动态。

　　或许直到你彻底完成自己的第一个web应用程序才明白我开头说的那句话："或许学会如何开发web应用程序只是在完成这个web应用程序过程中产生的副产品而已"。

那么，上述内容一到七中提到的那些英文单词就是我们开发过程中学到的东西，让我们一起来大概地看一看，在上述开发过程到底学到了什么：

1、html

　　html 超文本标记语言 (hyper text markup language) ，是用来描述网页的一种语言。 不是一种编程语言，而是一种标记语言(markup language) ，html 使用一套标记标签(markup tag) 来描述网页 。

　　网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

　　html之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。所谓超级链接，就是一种url指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是html获得广泛应用的最重要的原因之一。

2、xml

　　xml可扩展标记语言 (extensible markuplanguage, xml) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 xml是标准通用标记语言 (sgml) 的子集，非常适合 web 传输。xml 提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。

　　xml与html的设计区别是：xml是用来存储数据的，重在数据本身。而html是用来定义数据的，重在数据的显示模式。

3、css

　　在web开发早期，网页设计人员经常抱怨他们对网页的外观缺乏控制力，他们无法精确地控制对象在网页上的位置，而且对页面上的字体的外观也没有什么控制力，因为网页不比实际纸张，针对多大的纸做什么样的设计，而网页的大小是不固定的。

　　css（cascading style sheet，层叠样式表）规范是由w3c制定的，由于允许同时控制多重页面的样式和布局，css可以称得上 web 设计领域的一个突破，它使得内容与表现分离 。作为网站开发者，你能够为每个 html元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。这样，即设计人员能够将更多的时间用在设计方面，而不是费力克服html的限制。

4、javascript

　　首先，javascript和java无关，javascript 是属于网络的脚本语言！那么为什么名字如此相似?这是典型的市场营销方面的成功，它的推广成功，也是借了java的东风。当微软开始意识到javascript在web开发人员中流行起来时，微软还是一贯风格，建立了自己的脚本语言，jscript。

　　javascript可以使网页更具交互性，给用户提供更令人兴奋的体验，当用户在页面间导航时向他们提供反馈。例如他可以设置鼠标悬停效果，在客户端验证表单，创建定制的html页面，显示警告框，设置cookie等等。

5、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等等。

6、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 文档的对象。

7、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（写更少的代码,做更多的事情）。

8、http://asp.net。这个就不用我罗嗦了，你懂得……

9、整个开发过程你还会学习到一些工具的使用：

　　visio，dreamweaver，vistual studio，sql server或access，(vim, editplus, notpad++)，各种浏览器以及firebug的插件，ie下的webdevelopmenthelper等。

10、当然，如果你足够用心，你还发掘出很多不错的资源，例如msdn，w3cschool，一些前辈的博客，一些技术论坛等等，这都是你未来前进道路上的财富。

　　综上，如果你真的完成了自己的web应用程序，并通过做这个程序学习了以上这些技术和工具的基础内容，那么恭喜你，你已经成为一个初级web应用程序开发者了。