从啥也不会到可以胜任最基本的JavaWeb工作，推荐给新人的学习路线（一）

本人从事JavaWeb开发，应别人要求，思考再三，终决定专门开一贴来总结一下我个人目前推荐的学习路线。从啥也不会到能够从事JavaWeb开发，究竟要学习哪些东西？很多人都会迷茫这个地方。所以我打算随便谈谈我的看法。

我之前一直不想写，因为我知道一旦写了就要承担压力。必然会有一大波人来指责我，说什么什么你这样讲是毒鸡汤，怎能不管算法，不管计算机原理！你这样是误导新人！然后举出一大堆例子，说基础怎么怎么重要，你这样速成将来会有大问题！你这是在瞎扯，一看就知道你不懂得Java的精髓！

我大概能预见这些情况，但我无所谓，因为我所说的，不代表就是正确的，错了又如何呢？我毕竟只是普通人。

我只能说，到目前为止，我所看到的情况即是如此。也许的确是我目光短浅吧，没有达到网上大神说的那种境界。很多人给我的感觉就是，敲一个HelloWorld，都需要把计算机的二进制编码，以及计算机怎么诞生的这些完全搞明白才可以。否则我就不配敲HelloWorld，因为我不懂得原理。

所以，这些东西我一直不想写，反正总归会被骂，还不如清闲点算了。

可是随着群里问我这个问题的人越来越多，而且这个事情也不是我随随便便就能讲清楚的。最终，思量再三，我还是决定专门写几篇文章，就我个人的看法来简单说说，从啥也不会到能够从事JavaWeb开发的一个最直接的学习路线。

因为现在大部分公司还是没有明确的前后端之分，比如我经历的几个公司都是如此，前后台都是一个人包了。稍微小一点的项目，一个人抖擞抖擞精神，也就直接扛下来了。

所以，在我的推荐路线中，前端肯定也是要包括的。如果你只学Java，在目前的大趋势中，还是比较悬的。除非你找到那种前后端完全分开的公司。

那么，开始吧。

1.第一阶段 - JavaScript

为什么我推荐先从JavaScript学起来，原因有两个。其一，JavaScript不需要你搭建什么环境，比如Java你就得先安装JVM，配置环境变量。可能对已经工作的你而言，这真的没什么，因为太简单了。可是，对于一个完全没有编程经验的人而言，往往就会被卡死在第一步。连环境都不会搭建，后续的学习也就无从谈起了。JavaScript就完全没有这一顾虑，你随便网上下载一个IDE（比如Sublime，HBuilder，Editplus），就可以开始写代码了。然后，你的电脑上总该有浏览器吧，那么，你写的代码就能立即看到效果。俗话说，兴趣是最好的老师，当你看到自己编写的网页栩栩如生地展现在你的眼前的时候，那种喜悦的感觉会给你带来继续学下去的勇气。

第二个原因，JavaScript是一门比较优秀的语言，一般来说，其他面向对象的语言特点，它也有。要谈算法，JavaScript也能够锻炼你的算法水平。有兴趣的可以去学习一下canvas，也就是画布，自己尝试着做一些特效，里面会大量用到三角函数，物理上的摩擦力，以及数学的几何模型等等。

很多东西，都可以用JavaScript模拟出来。

总的来说，从JavaScript入手，免去了环境搭建的麻烦，你还能从中获得很多学习的乐趣，你一定想不到，当我第一次封装了一个原生态的弹窗组件，和Grid组件的时候，我兴奋得一晚上睡不着觉吧。

当我第一次用纯粹的JavaScript做出轮播图，雪花飘落，瀑布流，等等的特效，我看着自己的作品，一种无与伦比的喜悦充斥着我的内心。

正是JavaScript，给了我学习编程的乐趣！

可以说，当你真正精通了JavaScript这门语言，也就学会了一切的编程语言（面向过程的除外）。因为都差不多的，比如我后来重新学习Java，每看到一个地方，脑子里立马就联想到：“咦，这和JavaScript中的XXX不是一个意思吗？”

记得清华大学的华成英教授曾经说过，最好的学习方法就是类比。就是说，当你遇到一个陌生的技术，如果能将它和你已经熟悉的东西类比起来，比较他们的异同点，那么，你学习的效率会像坐火箭一样蹭蹭蹭上涨！

好了，说了这么多，现在我给出我推荐的学习列表：

预备知识：

1.html + css （了解一下基本的标签即可，最起码要知道div，类选择器是什么，怎么引入css文件？还有那些常用的css属性，background，width,height等等）

推荐方法：这个阶段，有一个很好的办法能迅速培养起来自己在该方面的编程意识，就是你随便找一个生活中的东西，比如桌子，然后，强迫自己在一天之内想出它的50个属性。

比如，一张桌子，什么颜色、材质是啥、高度多少、宽度多少？等等。

50个属性有点夸张，但是你一定要去努力尝试，想出来多少是多少？就算想不出50个也无所谓，有多少算多少。然后，把这些属性用笔记下来。好好思考一下，这样做的目的是什么。

当你真的去这么做以后，你就会发现，哦，原来css就是在做这个事情。

再提示一下，这张桌子在房间的什么位置？它的旁边是什么？等等，这些都可以算作它的属性。

话不多少，自己体会一下就行了。

这个阶段，可以网上找点基础的视频来看看，不需要掌握太多，因为css往深了研究还是相当复杂的。我相信，谁也不敢拍着胸脯说自己完全精通css的，大部分人还是处于能够运用的阶段。我也只是略懂。初学者不建议去看那些特别深奥的内容，大概了解一下即可。

至于什么css3，响应式，bootstrap，暂时没必要去学。

时间：3天

毕业标准：能够用 html + css 做一个网站的登录界面。

1.JavaScript基本语法

这个阶段，主要去看下JavaScript的概念，基础数据类型，for循环。（while循环我都不推荐去看，用得很少，工作中基本都是for循环）

注：这个阶段尽量去网上看视频，不要去各种百度。经常你会发现，你明明把代码原封不动得抄过来了，可为什么就是没效果呢？怎么就是和网上说的不一样呢？

不管你看的是什么代码，基本上就是两种可能。第一种，代码本身的问题。比如别人随便在自己项目里复制了一段代码，放到网上，然后说明这个代码是用于解决XX问题的。

这个时候，你根本就没有对方项目的环境，代码当然用不了啦！

另一种可能，就是代码没问题，但是有些地方要修改一下，可是你还不会用浏览器的调试工具来调试，所以效果出不来。

不管怎么样，你这样东找找西找找，除了在浪费时间，根本就达不到学习的目的。因为根本就不系统啊！为什么现在培训机构这么多，就是因为很多人都不知道怎么去系统学习，就算想要自学，也不知道从何入手。尤其是初学者，根本不知道怎么回事，可能就是脑袋一热，劳资要转行了，于是就网上到处乱学。

这个阶段，你要买书也可以，但是前提你要有那个耐心看下去。其实我是不推荐买书的，因为现在这个阶段的你能力还不够，而且，咱大天朝出的技术书籍你也懂的，都不知道哪里拼凑来的。

当然，不排除好书，可是毕竟太少了。

即便是我，有的时候翻翻当年凭着一腔热血买来的Java书籍，偶尔都要皱一下眉头，心想，这个作者到底想表达什么？这些案例到底想要说明什么？

什么时候该买书，我觉得是你已经可以从事开发了，而且对编程有了一些自己的心得，觉得自己在某方面需要再提高一下，那么，这个时候你可以去买书，因为，这个阶段，你买的书，基本上自己都可以看懂了。

新手买书，真的会无语的，除了让你怀疑人生之外，并没有太大的益处。

看视频，敲代码！

看视频，敲代码！

看视频，敲代码！

重要的事情说三遍，这个阶段还是比较重要的。对于一个完全不懂编程的人来说，可能写一个一层for循环，就要花去10分钟的时间，然后对着代码看来看去，看来看去，反复推敲。这是好现象，这说明你正在开始慢慢培养自己的编程思维。不要着急，要循序渐进。

这个阶段，主要是学习JavaScript的语法，看视频，一遍看不懂看两遍，直到你看懂了位为止。

重点：

for循环、if语句。

数组，字符串，function（包括传参和return），闭包的含义，JavaScript内置函数。

数组的常用方法，push，slice啥的尽量都要会，如果不会的话，就照着例子写，多写几遍就会了。

时间：3天。

毕业标准：能够自己写一个function，知道function是什么意思，会用alert，conole.log调试程序，最好能直接通过浏览器的F12查看控制台，在里面练习和调试。数组要多看看，了解数组的增删改查怎么用的，条件允许的话，你可以通过数组来模拟一下Java中的ArrayList。

2.JSON

在JavaScript中，我感觉json是重中之重！

一般来说，js创建对象有两种方式，一种是通过构造函数，也就是function的方式，另一种就是直接创建一个json。

这个阶段一定要好好理解一下json的概念，然后用json去做一些事情。比如，你写一个注册页面，里面有用户名，密码，年龄，邮箱等等的input框。你可以尝试一下，用json的方式，把这些数据装起来。

体会一下这样有什么好处？

最好能够体会到，json的作用，其实就是为了中转数据的。那么多数据，怎么才能够以一种较好的方式装起来呢？

你用数组自然可以，但是不够语义化，用json的话就恰到好处。它这个主要是用于描述一个对象的，而数组更多用来充当一个容器。

时间：1 ~ 2 天

毕业标准：能够熟练使用json来装载数据。自己想一个恰当的比喻，来形容一下json像什么东西？最好自己想，通过这个比喻来更加牢固得记忆 JSON 以及它的用法。别人举得例子再好，也比不上你自己的例子。

3.dom

所谓的dom，简单来说就是通过JavaScript来获取页面上的一些元素。比如你写一个div，它的id叫做box，那么就可以通过document.getElementById('box')的方式获取这个dom元素。

接下来，你可以给他添加样式，设置点击事件等等。

具体的话，随便网上找点资料或者视频来看就行了。这一块相对来说还是比较简单的。

注意：dom和css不是一回事，css是样式表，而dom是你用JavaScript取到的类似于div一样的东西，你可以用JavaScript代码去操作页面上的div元素。比如给他加一个样式。

那些css属性，不需要去背，只需要记住常用的就好了。用多了你自然会。

重点：

document.getElementById

document.getElementsByTagName

innerHTML，appendChild，

。。。

这个阶段，你一定要把浏览器的F12用得出神入化，反复使用，反复练习。

时间：2天

4.事件

了解一下基本的JavaScript事件模型，明白事件冒泡是怎么回事，什么时候要阻止冒泡。（事件捕获几乎用不到，不要去学了）还有，onclick和addEventListener的区别的是什么？我能不能自己封装一个通用的绑定事件函数？

时间：1天

毕业标准：能够模拟jQuery的on函数，封装一个自己的方法，达到和jQuery一样的效果，最好能兼容所有浏览器。

5.jQuery

学完上面的这些内容，不要犹豫，不要慌张，立马钻入jQuery的学习中。这段时间，可以开始自己写一点小东西了。当然，要是心里没底的话， 还是以看视频为主，最起码，把jQuery的常用方法都过一遍。过一遍就行了，不要去多看。

然后，第二步，学习常用的jQuery方法，并且自己可以开始尝试着写写看，如何用纯粹的JavaScript来达到相同的效果。一些简单的方法，比如jQuery的css，height，width，addClass，removeClass，这些方法，你完全可以自己用js来模拟一下。

在今后的工作中，你开发前端页面的绝大多数时间，就是和jQuery打交道。所以，这一块必须要好好掌握一下。这个时候，可以去买书，也可以不买。但是最好有个自己的知识库，把常用的方法，和一些你觉得画得比较好的页面，特效等等，都保存下来。

或者，你也完全可以去网上写一写自己的博客，博客园，简书，csdn啥的，都可以。通过写博客，一来可以自己总结，二来也能帮助别人。

6.案例

这个阶段，正常情况下，js水平应该已经达到一定层次了。在接下来的日子，可以考虑来买一点书来看，当然，千万不要从第一页看到最后一页。有选择性的去看，并且，一定要带着批判的精神去看书，亲自去验证一下书中所说。为什么到这个时候，我才推荐去买书来看呢？很简单，因为到了这个阶段，你才能看得懂。如果是一个完全不懂编程的新人，直接去买书，看懂的概率很小，除非你真的是天纵奇才，具有极高的天赋。

尽量去买外文翻译过来的书，国产的书籍不太建议购买（当然，如果你是英语大牛的话，直接看原版，最好！）。至于为什么，大家都懂的。

我也看过很多很多的书，最后发现，国内的很多书，大都本着一种哪怕你再聪明，我也要把你说糊涂了的宗旨。这也是你为什么往往看书看不进去的原因。

而国外的书，美国的就挺好，不过我感觉写的最认真的还是日本的技术书籍。看起来感觉就不一样，写的通俗易懂不说，而且我甚至能看到作者为了出这本书，真的是耗费了巨大的精力！这是事实。颇有种哪怕你再笨，我也要把你教会的感觉。

我并不哈日，但说句实在话，人家写的书真的是一种奉献精神、值得敬佩。而不像我们国内的技术书籍，一大抄，真正能看看的好书不多。

这个阶段，一边看书，一边自己动手敲代码，写案例。比如说，你看到一个网站，觉得他的布局都挺好看的，你就可以思考下，我能不能来仿一个呢？

好了，前台页面有了，开始思考，这些数据哪来的？

肯定不可能页面里面全部写死吧，想想也不可能。那么毫无疑问，肯定是后台传过来的。

接下来，就开始思考怎么传过来的呢？于是乎，ajax技术又来了，马上再去学习ajax，带着疑问去学。

后台语言，比如说Java，自然而然的，会驱动你去学习。

以上的这些路线，只作为一个参考。当然，这些都还只是JavaScript学习的初步阶段，但是学习这个事情，本来就需要在工作中慢慢体会，自己主动去学的。难以通过一篇文章就说得清。最后，希望本文对诸位有所帮助，谢谢。

文／剽悍一小兔（简书作者）
原文链接：http://www.jianshu.com/p/186dda919e6d
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。