首页 > 网站 > WEB开发 > 正文

「译」如何正确学习JavaScript

2024-04-27 14:10:06
字体:
来源:转载
供稿:网友

「译」如何正确学习javaScript

原文:How to Learn Javascript PRoperly

目录

  • 不要这样学习JavaScript
  • 本课程资源
  • 1~2周(简介,数据类型,表达式和操作符)
  • 3~4周(对象,数组,函数,DOM,jQuery)
  • JavaScript终极编辑器:WebStorm
  • 第一个项目-动态问答应用
  • 5~6周(正则表达式,Window对象,事件,jQuery)
  • 7周,可延长到8周(类,继承,HTML5)
  • 继续提升
  • 一些鼓励的话

上面的课程大纲提供了一个结构化和富有启发性的学习线路,从初学者到有所建树,把JavaScript学对学透。

既然你找到这篇文章来,说明你是真心想学好JavaScript的。你没有想错,当今如果要开发现代网站或web应用(包括互联网创业),都要学会JavaScript。而面对泛滥的JavaScript在线学习资源,却是很难找到一份高效而实用的方法去学习这个“web时代的语言”。

有一点需要注意,几年前我们需要知道一个真正的服务器端语言(比如php,Rails,Java,Python 或者 Perl)去开发可扩展,动态的,数据库驱动的web应用,而现在只用JavaScript就可以实现了。

不要这样学习JavaScript

不要一开始就埋头在成堆的JavaScript在线教程里 ,这是最糟糕的学习方法。或许在看过无数个教程后会有点成效,但这样不分层次结构地学习一个东西实在是十分低效,在实际用JavaScript建立网站或web应用时你还是会频繁的卡住。总的来说,这种学习方法会让人不知道如何将语言当做工具来使用——当做个人工具来用。

另外,也许有人会建议从尊敬的JavaScript教父Douglas Crockford写的《JavaScript语言精粹》开始学习JavaScript。然而,虽然Crockford先生对JavaScript无所不知,被誉为JavaScript世界的爱因斯坦,但他的《JavaScript语言精粹》并不适合初学者学习。这本书没有通透、清晰、明了的阐述JavaScript的核心概念。但对于更高级的学习路线,我倒会建议你看看Crockford先生的视频。

还有,不要只从Codecademy等网站学习JavaScript,因为即使知道怎么编写一大堆JavaScript代码小片段,还是不能学会怎么建立一个web应用程序。即便如此,在后面我还是会建议把Codecademy当做补充的学习资源。

本课程资源

更新:Reddit用户d0gsbody4月8号在Reddit上建立了一个学习小组。他和其他组员都非常积极和乐于助人。我建议你加入这个小组,他们会让你保持积极性且帮助你更好的学习JavaScript。毕竟独自折腾JavaScript还是有点难度的。链接:Learning JS Properly – Study Group on Reddit

  • 请在以下两本书中选一本,第一本比较适合有编程经验的人,而另一本则适合完全没有编程经验的初学者。

    我个人推荐第一本书,因为作者对各个知识点都阐述得非常好且涵盖了一些高级JavaScript知识点。但是,要看懂这本书你至少要对web开发有一定的基本了解。所以,如果你有一点点编程经验或者web开发经验(不一定是JavaScript),那就买这本书吧。

    • 纸质版(英文) :Professional JavaScript for Web Developers
    • 纸质版(中文) :JavaScript高级程序设计(第3版)
    • Kindle版(英文):Professional JavaScript for Web Developers
    • Kindle版(中文):JavaScript高级程序设计(第3版)

    如果你没有编程经验,可以买这本:

    • 纸质版(英文) :JavaScript: The Definitive Guide
    • 纸质版(中文) :JavaScript权威指南(第6版)
    • Kindle版(英文):JavaScript: The Definitive Guide
    • Kindle版(中文):JavaScript权威指南(原书第6版)
  • 免费注册Stack Overflow,这是一个编程领域的问答论坛。在这里提问题得到的回答比Codecademy要好,哪怕你的问题非常基础,看起来很傻(记住,从来没有愚蠢的问题)。

  • 免费注册Codecademy,这是一个在线学习平台,你可以直接在浏览器里面写代码。

  • JavaScriptIsSexy上的一些博文,包括对象,闭包,变量的作用域和提升,函数等等。

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. 完成CodecademyJavaScript Track上的Introduction to JavaScript部分。

  5. 阅读《JavaScript权威指南》第3~4章。

    或者阅读《JavaScript高级程序设计》第3~4章。你可以跳过位操作部分,在你的JavaScript生涯中一般不会用上这个。

    再次说明,记得要不时停下来把书本的代码敲到浏览器控制台里(或者JSFiddle)做各种测试,可以改变几个变量或者把代码结构修改一番。

  6. 阅读《JavaScript权威指南》第5章。至于《JavaScript高级程序设计》则暂时没有阅读任务,因为前面已经把相关知识覆盖了。

  7. 完成CodecademyJavaScript Track上的2~5部分。

3~4周(对象,数组,函数,DOM,jQuery)

  1. 以下三选一:

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

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

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

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

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

  3. 此时,你应该花大量时间在浏览器控制台上写代码,测试if-else语句,for循环,数组,函数,对象等等。更重要的是,你要锻炼和掌握独立写代码,不用借助Codecademy。在Codecademy上做题时,每个任务对你来说应该都很简单,不需要点帮助和提示。

    如果你还卡在Codecademy上,继续回到浏览器上练习,这是最好的学习方法。就像詹姆斯年轻时在邻居的篮球场上练球,比尔盖茨在地下室里学习编程。

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

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

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

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

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

  6. 阅读《JavaScript权威指南》第13,15,16和19章。

    或者阅读《JavaScript高级程序设计》第8,9,10,11,13和14章。这本书没有涉及到jQuery,而Codecademy上的jQuery知识也覆盖得不够。可以看看jQuery的官方教程,免费的:http://try.jquery.com/

    你也可以在《JavaScript权威指南》第19章了解更多的jQuery知识。

  7. 完成全部的jQuery教程http://try.jquery.com/。

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)

  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代码了。我们的问

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表