javascript学习路线图
史上最全的javascript学习路线图
JavaSctipt学习路线
完成整个课程⼤纲需要花上6~8周的时间，将学会完整的JavaScript语⾔（包括jQuery和⼀些HTML5）。如果你没有时间在6个星期⾥完成所有的课程（确实⽐较有挑战性），尽量不要超过8个星期。花的时间越长，掌握和记忆各种知识点的难度就越⼤。
1～2周(简介，数据类型，表达式和操作符)
1. 如果你还不是很了解HTML和CSS，完成Codecademy上的web基础任务。
2. 阅读《JavaScript权威指南》或者《JavaScript⾼级程序设计》的前⾔和第1~2章。
3. ⼗分重要：在书中遇到的每个样例代码都要动⼿敲出来并且在⽕狐或Chrome浏览器控制台中跑起来、尽量蹂躏它（做各种试验）。
也可以⽤jsfiddle，但不要⽤Safari浏览器。我建议⽤⽕狐搭配Firebug插件去测试和调试代码。浏览器控制台就是可以让你编写和运⾏JavaScript代码的地⽅。
4. 完成Codecademy JavaScript
Track上的Introduction to JavaScript部分。
5. 阅读《JavaScript权威指南》第3~4章。或者阅读《JavaScript⾼级程序设计》第3~4章。你可以跳过位操作部分，在你的
JavaScript⽣涯中⼀般不会⽤上这个。
再次说明，记得要不时停下来把书本的代码敲到浏览器控制台⾥（或者JSFiddle）做各种测试，可以改变⼏个变量或者把代码结构修改⼀番。
6. 阅读《JavaScript权威指南》第5章。⾄于《JavaScript⾼级程序设计》则暂时没有阅读任务，因为前⾯已经把相关知识覆盖了。
7. 完成Codecademy JavaScript
Track上的2~5部分。
8. JavaScript变量学习路线图，点击图⽚收藏⼤图
9.
0. JavaScript数据类型学习路线图，点击图⽚收藏⼤图
1.
2. JavaScript函数学习路线图，点击图⽚收藏⼤图
3.
4. JavaScript运算符学习路线图，点击图⽚收藏⼤图
5.
3~4周(对象，数组，函数，DOM，JQuery)
1. JavaScript数组学习路线图，点击图⽚收藏⼤图
2.
3. JavaScript流程控制学习路线图，点击图⽚收藏⼤图
4.
5. JavaScript字符串函数学习路线图，点击图⽚收藏⼤图
6.
7. JavaScriptDOM学习路线图，点击图⽚收藏⼤图
8.
9. 以下三选⼀：
两本书会涉及更多的⼀些细节，但只要看完我的博⽂，你可以完全放⼼地跳过这些细节。
1. 阅读我的博⽂JavaScript
对象详解.
2. 阅读《JavaScript权威指南》第6章。
3. 阅读《JavaScript⾼级程序设计》第6章。注意：只需要看“理解对象”（Understanding
Objects）部分。
0. 阅读《JavaScript权威指南》第7~8章或者《JavaScript⾼级程序设计》第5和7章。
1. 此时，你应该花⼤量时间在浏览器控制台上写代码，测试if-else语句，for循环，数组，函数，对象等等。更重要的是，你要锻炼和掌
握独⽴写代码，不⽤借助Codecademy。在Codecademy上做题时，每个任务对你来说应该都很简单，不需要点帮助和提⽰。如果你还卡在Codecademy上，继续回到浏览器上练习，这是最好的学习⽅法。就像詹姆斯年轻时在邻居的篮球场上练球，⽐尔盖茨在地下室⾥学习编程。
持续地练习，这⼀点点的进步积累起来效果会⾮常惊⼈。你要看到这个策略的价值，相信它是可⾏的，全⼼投⼊进去。
Codecademy会造成已掌握的错觉。
使⽤Codecademy最⼤的问题是，它的提⽰和代码⼩⽚段会让⼈很容易就把答案做出来，造成⼀种已经掌握这个知识点的错觉。你可能⼀时看不出来，但这样做你的代码就不是独⽴完成的了。
但⽬前为⽌，Codecademy依然是学习编程的好帮⼿。特别是从⼀些基本的代码结构如if语句，for循环，函数和变量去指导你了解⼩项⽬和⼩应⽤的开发过程。
2. 回到Codecademy完成JavaScript路线。做完6~8部分（数据结构做到Object
2）。
3. 实现Codecademy上Projects路线的5个基础⼩项⽬（Basic
Projects）。做完之后，你已不再需要Codecademy了。这是⼀件好事，因为⾃⼰做的越多，学得就越快，就能更好准备开始独⽴编程。
4. 阅读《JavaScript权威指南》第13，15，16和19章。或者阅读《JavaScript⾼级程序设计》第8，9，10，11，13和14章。这本
书没有涉及到jQuery，⽽Codecademy上的jQuery知识也覆盖得不够。可以看看jQuery的官⽅教程，免费的：
你也可以在《JavaScript权威指南》第19章了解更多的jQuery知识。完成全部的jQuery教程。
JavaScript终极编辑器：WebStorm
在你实现第⼀个项⽬之前，如果打算以后做JavaScript开发者或者经常⽤到JavaScript，最好现在就去
下载WebStorm的试⽤版。这⾥可以学习怎么使⽤WebStorm（专门为这个课程写的）。⽏庸置疑，WebStorm是JavaScript编程最好的编辑器（或IDE）。30天试⽤后要付$49.00，但作为JavaScript开发者，这应该是除了买书以外最明智的投资了。
确保在WebStorm中启⽤JSHint。JSHint是⼀个检查JavaScript代码错误和潜在问题的⼯具，强制你的团队按照规范写代码。⽤WebStorm最爽的地⽅是JSHint会⾃动在错误的代码下显⽰红线，就像⽂字处理程序中的拼写检查。JSHint会显⽰⼀切的代码错误（包括HTML），促使你养成良好的习惯，成为更好的JavaScript程序员。这很重要，当你真正意识到WebStrom和JSHint对你的巨⼤帮助时，你会回来感谢我的。
此外，WebStorm是⼀个世界级，专业⼈员使⽤的IDE，⽤来编写专业的JavaScript
web应⽤，所以你以后会经常⽤到它。它还结合了Node.js，Git和其它JavaScript框架，所以即使你成为了明星级的JavaScript开发者，你还是会⽤到它的。除⾮以后出现了更多的JavaScript
IDE。
公平起见，我在这⾥提⼀下Sublime
Text
2，这是仅次于WebStorm的JavaScript编辑器。它的功能不及WebStorm丰富和完整（即使添加了⼀堆插件）。做⼩修改的时候我会⽤到Sublime
Text 2，它⽀持很多语⾔，包括JavaScript，但我不会⽤它来构建完整的JavaScript Web应⽤。
第⼀个项⽬-动态问答应⽤
此时，你已经掌握了⾜够的知识去建⽴⼀个稳固的，可维护的web应⽤。在做完我为你设计的这个应⽤之前不要看后⾯的章节。如果你卡住了，去Stack Overflow提问并且把书上相关的内容重新看⼀遍直到完全理解这些概念。
接下来开始建⽴⼀个JavaScript问答应⽤（还会⽤到HTML和CSS），功能如下：
这是⼀套单选测试题，完成之后会显⽰⽤户的成绩。
问答应⽤可以产⽣任意多的问题，每个问题可以有任意多的选项。
在最后的页⾯显⽰⽤户的成绩。这个页⾯只显⽰成绩，所以要把最后⼀个问题去掉。
⽤数组存所有的问题。每个问题包括它的选项和正确答案，都封装成⼀个对象。问题数组看起来应该是这样：
// 这⾥只演⽰⼀个问题，你要把所有问题都添加进
去 var allQuestions = [ { question: "Who is Prime Minister of the United Kingdom?", choices: [ "David Cameron", "Gordon Brown", "Winston Churchill", "T ony Blair"], correctAnswer: 0 } ];
当⽤户点击“Next”时，使⽤ElementById或jQuery动态的添加下⼀个问题，并且移去当前问题。在这个版本⾥“Next”是唯⼀的导航按钮。
你可以在本⽂下⽅评论求助，最好是去Stack
Overflow提问，在那⾥会有及时⽽准确的回答。
5～6周(正则表达式，Window对象，事件，JQuery)
JavaScript正则表达式学习路线图，点击图⽚收藏⼤图
JavaScriptwindow对象学习路线图，点击图⽚收藏⼤图
1. 阅读《JavaScript权威指南》第10，14，17，20章。或者阅读《JavaScript⾼级程序设计》第20，23章。
2. 记得要把样例代码敲到浏览器控制台上，尽可能蹂躏它，做各种测试，直到完全理解它是怎么⼯作，它能⼲些什么。
3. 此时，你⽤起JavaScript来应该很顺⼿，有点像武林⾼⼿要出⼭了。但你还不能成为⾼⼿，你要把新学到的知识反复使⽤，不停的学
习和提升。
4. 升级之前做的问答应⽤
1. 添加客户端数据验证：保证⽤户回答了当前问题才能进⼊下个问题。
2. 添加“Back”按钮，允许⽤户返回修改答案。最多可以返回到第⼀个问题。注意对于⽤户回答过的问题，选择按钮要显⽰被选
中。这样⽤户就⽆需重新回答已经答过的问题。
3. ⽤jQuery添加动画（淡出当前问题，淡⼊下个问题）
4. 在IE8和IE9下测试，修改bug，这⾥应该会有得你忙了。
;
D
5. 把问题导出JSON⽂件
6. 添加⽤户认证，允许⽤户登陆，把⽤户认证信息保存在本地存储（local
storage，HTML5浏览器存储）。
7. 使⽤cookies记住⽤户，当⽤户再次登陆时显⽰“欢迎⽤户名回来”。
7周，可延长到8周(类，继承，HTML5)
1. 阅读《JavaScript权威指南》第9，18，21，22章。
或者阅读我的博⽂JavaScript⾯向对象必知必会
或者阅读《JavaScript⾼级程序设计》第6，16，22，24章，第6章只读“创建对象”（Object
Creation）和“继承”（Inheritance）部分。注意：这部分是本课程中技术性强度最⼤的阅读，要根据⾃⾝的状况考虑要不要全部读完。你⾄少要知道原型模式（Prototype
Pattern），⼯⼚模式（Factory Pattern）和原型继承（Prototypal Inheritance），其它的不作要求。
2. 继续升级你的问答应⽤：
1. 页⾯布局使⽤Twitter
Bootstrap，把问答的元素弄得看起来专业⼀些。⽽作为额外奖励，⽤Twitter
Bootstrap的标签控件（译者注：原⽂地址失效，已改）显⽰问题，每个标签显⽰⼀个问题。
2. 学习Handlebars.js，将Handlebars.js模板⽤在问答应⽤上。你的JavaScript代码中不应该再出现HTML代码了。我们的问答
应⽤现在越来越⾼级啦。
3. 记录参加问答的⽤户成绩，展⽰⽤户在问答应⽤中与其他⽤户的排名⽐较。
3. 在学完Backbone.js和Node.js后，你会⽤这两种最新的JavaScript框架重构问答应⽤的代码，使之变成复杂的单页⾯现代web应⽤。
你还要把⽤户的认证信息和成绩保存在MongoDB数据库上。
4. 接下来：构思⼀个项⽬，趁热打铁迅速的去开发。卡住的时候参考《JavaScript权威指南》或者《J
avaScript⾼级程序设计》。当
然，还要成为Stack
Overflow的活跃⽤户，多问问题，也要尽量回答其它⼈的提问。
继续提升
如何启用javascript功能1. 精通backbone.js
2. 中⾼级JavaScript进阶
3. 不侧漏精通Node.js
4. Meteor.js⼊门（即将出炉）
5. 三个最好的JavaScript前端框架（即将出炉）
⼀些⿎励的话
祝你学习顺利，永不放弃！当你做不下去觉得⾃⼰很蠢的时候（你会时不时这么想的），请记住，世
界各地的其他初学者，甚⾄是有经验的程序员，也会不时产⽣这种想法的。当你学有所成的时候，放⼼的将你的成果分享给我们吧，哪怕是个微不⾜道的，⼩到显微镜都看不到的⼩项⽬。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。