史上最全的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. JavaScript数据类型学习路线图，点击图片收藏大图

10. JavaScript函数学习路线图，点击图片收藏大图

11. JavaScript运算符学习路线图，点击图片收藏大图

3~4周(对象，数组，函数，DOM，JQuery)

1. JavaScript数组学习路线图，点击图片收藏大图

2. JavaScript流程控制学习路线图，点击图片收藏大图

3. JavaScript字符串函数学习路线图，点击图片收藏大图

4. JavaScriptDOM学习路线图，点击图片收藏大图

5. 以下三选一：

   两本书会涉及更多的一些细节，但只要看完我的博文，你可以完全放心地跳过这些细节。

   • 阅读我的博文JavaScript
     对象详解.

   • 阅读《JavaScript权威指南》第6章。

   • 阅读《JavaScript高级程序设计》第6章。注意：只需要看“理解对象”（Understanding
     Objects）部分。

6. 阅读《JavaScript权威指南》第7~8章或者《JavaScript高级程序设计》第5和7章。

7. 此时，你应该花大量时间在浏览器控制台上写代码，测试if-else语句，for循环，数组，函数，对象等等。更重要的是，你要锻炼和掌握独立写代码，不用借助Codecademy。在Codecademy上做题时，每个任务对你来说应该都很简单，不需要点帮助和提示。如果你还卡在Codecademy上，继续回到浏览器上练习，这是最好的学习方法。就像詹姆斯年轻时在邻居的篮球场上练球，比尔盖茨在地下室里学习编程。

   持续地练习，这一点点的进步积累起来效果会非常惊人。你要看到这个策略的价值，相信它是可行的，全心投入进去。

   Codecademy会造成已掌握的错觉。
   使用Codecademy最大的问题是，它的提示和代码小片段会让人很容易就把答案做出来，造成一种已经掌握这个知识点的错觉。你可能一时看不出来，但这样做你的代码就不是独立完成的了。

   但目前为止，Codecademy依然是学习编程的好帮手。特别是从一些基本的代码结构如if语句，for循环，函数和变量去指导你了解小项目和小应用的开发过程。

8. 回到Codecademy完成JavaScript路线。做完6~8部分（数据结构做到Object
   2）。

9. 实现Codecademy上Projects路线的5个基础小项目（Basic
   Projects）。做完之后，你已不再需要Codecademy了。这是一件好事，因为自己做的越多，学得就越快，就能更好准备开始独立编程。

10. 阅读《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", "Tony Blair"], correctAnswer: 0 } ];

• 当用户点击“Next”时，使用document.getElementById或jQuery动态的添加下一个问题，并且移去当前问题。在这个版本里“Next”是唯一的导航按钮。

• 你可以在本文下方评论求助，最好是去Stack
  Overflow提问，在那里会有及时而准确的回答。

5～6周(正则表达式，Window对象，事件，JQuery)

JavaScript正则表达式学习路线图，点击图片收藏大图

JavaScriptwindow对象学习路线图，点击图片收藏大图

1. 阅读《JavaScript权威指南》第10，14，17，20章。或者阅读《JavaScript高级程序设计》第20，23章。

2. 记得要把样例代码敲到浏览器控制台上，尽可能蹂躏它，做各种测试，直到完全理解它是怎么工作，它能干些什么。

3. 此时，你用起JavaScript来应该很顺手，有点像武林高手要出山了。但你还不能成为高手，你要把新学到的知识反复使用，不停的学习和提升。

4. 升级之前做的问答应用

   • 添加客户端数据验证：保证用户回答了当前问题才能进入下个问题。

   • 添加“Back”按钮，允许用户返回修改答案。最多可以返回到第一个问题。注意对于用户回答过的问题，选择按钮要显示被选中。这样用户就无需重新回答已经答过的问题。

   • 用jQuery添加动画（淡出当前问题，淡入下个问题）

   • 在IE8和IE9下测试，修改bug，这里应该会有得你忙了。
     ;D

   • 把问题导出JSON文件

   • 添加用户认证，允许用户登陆，把用户认证信息保存在本地存储（local
     storage，HTML5浏览器存储）。

   • 使用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. 继续升级你的问答应用：

   • 页面布局使用Twitter
     Bootstrap，把问答的元素弄得看起来专业一些。而作为额外奖励，用Twitter
     Bootstrap的标签控件（译者注：原文地址失效，已改）显示问题，每个标签显示一个问题。

   • 学习Handlebars.js，将Handlebars.js模板用在问答应用上。你的JavaScript代码中不应该再出现HTML代码了。我们的问答应用现在越来越高级啦。

   • 记录参加问答的用户成绩，展示用户在问答应用中与其他用户的排名比较。

3. 在学完Backbone.js和Node.js后，你会用这两种最新的JavaScript框架重构问答应用的代码，使之变成复杂的单页面现代web应用。你还要把用户的认证信息和成绩保存在MongoDB数据库上。

4. 接下来：构思一个项目，趁热打铁迅速的去开发。卡住的时候参考《JavaScript权威指南》或者《JavaScript高级程序设计》。当然，还要成为Stack
   Overflow的活跃用户，多问问题，也要尽量回答其它人的提问。

继续提升

1. 精通backbone.js

2. 中高级JavaScript进阶

3. 不侧漏精通Node.js

4. Meteor.js入门（即将出炉）

5. 三个最好的JavaScript前端框架（即将出炉）

一些鼓励的话

祝你学习顺利，永不放弃！当你做不下去觉得自己很蠢的时候（你会时不时这么想的），请记住，世界各地的其他初学者，甚至是有经验的程序员，也会不时产生这种想法的。当你学有所成的时候，放心的将你的成果分享给我们吧，哪怕是个微不足道的，小到显微镜都看不到的小项目。

微信扫一扫或者微信公众号直接搜索‘javascript教程’开启javascript学习之旅