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 咱们一块儿学前端！