学习JavaScript的最佳方法分享
创新互联建站专注于牙克石网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供牙克石营销型网站建设，牙克石网站制作、牙克石网页设计、牙克石网站官网定制、小程序开发服务，打造牙克石网络公司原创品牌,更为您提供牙克石网站排名全网营销落地服务。
学习新的东西是件可怕的事。对我来说，掌握一项新技能最大的问题是，我不知道自己懂什么。鉴于此，定个计划，学习你感兴趣的东西应该会有用。这篇文章的主旨就是：你为学习JavaScript 制定的蓝图、路线、行动计划!你不必担心找不到最好的资源，先整理些好的资源，再确定下一步该学什么。遵循它，一步一步来。
任务0：了解什么是JavaScript
在你真正开始学习JavaScript 之前，花一分钟了解一下什么是JavaScript，它有哪些功能。 JavaScript不是jQuery、Flash或Java。与它们不同，它是一种独立的编程语言。 JavaScript 是浏览器语言(尽管现在不完全是)。主要目的是给静态页面增加交互性。在浏览器里，它不会为你更换PHP或Ruby，也不会更改你的HTML或CSS;你可以把它们串在一起使用。另外，它没有你想的那么难学。 补充说明：你应该听过jQuery，它可能是被使用最广泛的JavaScript 库。也许你还听说过其他比较流行的JavaScript 框架，比如Mootools,，YUI，Dojo 等等。可以将它们统一看做JavaScript辅助工具集;当你使用它们的时候，你还在写JavaScript，但都是些很抽象的JavaScript。它会让你事半功倍。 “你甚至可能听到有人说，你应该先学jQuery(或其他库)再学JavaScript。我很尊重他们但完全不同意这种说法。先把JavaScript 学好再用其他库，你会发现你会做的更好;结果就是，你会编写更好的JavaScript。”
任务1：通过Codecademy.com站点的课程来学习
Codecademy是一个相对较新的网站，其广告语是“最易学的编码方法”。目前，该网站仅有两个课程，“初级编程”和“JavaScript快速入门指南”。沉浸在JavaScript 中是种不错的体验。跟 Try Ruby 练习非常相似，你会学到简短的课程、在浏览器里编码，然后看结果。得到全部分数、打开成就徽章。(Ruby，一种为简单快捷的面向对象编程(面向对象程序设计)而创的脚本语言。) 如果你已熟悉了另一种编程语言，你也许可以先学“JavaScript快速入门指南”;如果这是您第一次编程(HTML和CSS除外)，你会发现“初级编程”课程相当有用。Codecademy是一家免费网站，但需要注册。
任务2：appendTo 截屏方法
appendTo 视频有一套特别适合初学者的截屏方法。 如果你想用正确(容易)的方法学习JavaScript，学习这些课程绝对管用。视觉训练总是有效的! “用我们提供的点播内容、务实的训练解决方案来提升自己的技能。无需注册、无需绑定、绝不忽悠。”
任务3：阅读一本好的关于JavaScript 的说明书
一旦你通过Codecademy上的课程来学习，你就会想搞到一本关于JavaScript的详细说明书–介绍所有的类型、运算符、控件架构等等。 如果可以的话，我来介绍几个好的说明书： 《再说JavaScript》 – 这本说明书可在Mozilla开发者网络上找到，语言公正。这本书内容很丰富，有很多代码实例和文段介绍。 《Eloquent JavaScript》 – 该书由Marijn Haverbeke 编写，可免费在线阅读，如果你想弄个硬拷贝可以上亚马逊网站购买。它比MDN说明更详细，因为它不仅涵盖了JavaScript 语言，而且包括编码风格以及在浏览器里使用JavaScript。当然，“eloquent”并非言过其实。(eloquent - 雄辩的、口若悬河的) 《Getting Good with JavaScript》 – 没错，这本书是我写的，但是我介绍这本书是另有原因的。它跟我在前面介绍的两本说明不同;在这本书里我只介绍了编程人员快速掌握编程技巧所需要的部分。此外，它还附带超过6个小时的截屏视频，因此，想要就去看看吧。(当然，这本不是免费的。)
任务4：安装、学习Firebug(或开发人员工具)
一旦你开始在浏览器里使用JavaScript，就需要安装Firebug并熟悉它的性能。Firebug是一款用于Firefox的插件，它能帮你创建和调试网页：对网页开发者来说，它就像外科医生的‘手术刀'。如果你不用Firefox?喜欢Safari 或者Chrome怎么办?没问题：可以查找类似Firebug的内置开发人员工具。 “你可以在Mac地址栏里按选项+命令+I 或者按快捷键Control + Shift + I ，来打开设计工具面板。” 通过打开你选的工具，只需在你喜欢的其中一个网站上点击点击，你就会学到很多东西。这里有一些能加速你学习的资源：FirebugFirebug网站和维基百科Firebug的CSS-技巧说明你应该在Nettuts+上使用Firebug的10大理由。Firebug：从白带到黑带，Tuts+ Marketplace 网站()设计工具设计工具网站Google I/O 2011：由Paul Irish重组的浏览器设计工具Google 浏览器设计工具：Paul Irish 的快速开发12技巧
任务5：读一本有关JavaScript的书籍
现在你已经熟悉了些基础知识，但是还有很多东西要学。尽管我推荐的一些书可能会让你‘破产'，但你会发现任何时候我都会推荐4本高质量的书：
前两本是一般的、较深入的JavaScript 资源，它们会让你从简介到较深层次逐步理解;当然，简介里会有一些重叠的说明，但不多：刚好让你看起来很舒服。(注：虽然这些书在亚马逊网站能买到，我已经链接了出版商的网站，因此，你能看看范例章节。) 《JavaScript高级程序设计》- Nicolas C. Zakas 编写，这本书涵盖了它能涵盖的所有内容。如果你以前看过Zakas的任何作品，你会发现他是个不折不扣的天才。除了涵盖了JavaScript语言，这本书还能让您在浏览器里很好的使用JavaScript。 《JavaScript 24-hour Trainer 》由Jeremy McPeak 编撰，该作者也写过Nettuts+。它不仅仅是一本书：还附带了一张长达四小时的教学光碟。全书共43节课，涉及编码句法指导和代码优化。 虽然这些书非常适合编程人员学习JavaScript语言以及如何在浏览器中使用这些语言，但是学无止境。虽然这些书的确进入了一些模式和实练中，我再推荐两本我认为有用的书。1)《JavaScript Patterns 》- Stoyan Stefanov著。我也是刚刚读完这本书，我真希望能尽快读完它。在读过上面的资源之后，你可以学到如何编写JavaScript，但是这本书会教你如何对资源进行重组，这项技能很重要，并非如你想象般简单。2)《JavaScript：The Good Parts 》- Douglas Crockford 著。该书介绍了JavaScript的优缺点。
任务6：做些事情!
在学习完上述资源后，你应该已经尝试了一些代码样本：修改代码、整合代码看看会怎么样。但是是时候让自己休息一下，做点东西出来了。 你能做什么呢?你能做很多东西。这里有一些意见。1) 图片库：显示一套图片缩略图和主图。当用户点击缩略图的时候，要用较大的缩略图(不是原缩略图)替代当前的主图。如果你能覆盖缩略图alt 标记的标题就奖励积分，或是在用户一分钟内未点击的时候进行图片循环。2) 待办列表：听起来有点难，我也不打算推荐你制作一个完整的待办列表。只需要做一个文本框并在其旁放上按钮;点击按钮的时候，已输入的文字会在一个无序列表下面变成一个项目。点击列表项目便可移除。这听起来很容易，但有几个陷阱，对初学者来说仔细想想还是很有好处的。3) 动画框：动画其实是小把戏而已，并不需要弄得太复杂。做一个包含了少许文本的div，其上要有若干按钮。一个按钮用来调整宽度，一个用来调整高度;还有一个用来调整背景颜色。关键是不要让更改发生得太快，但在一秒钟之内。记住，Google 是你的朋友，特别是如果迄今为止你还未用JavaScript做任何动画的话。 我相信你能想到其他的很好的练习的计划。当然，学习的唯一方法是把自己从安乐窝里拽出来。“此外，在所有的技能水平上，确保JavaScript 类别在Nettuts+上有大量教程列表。”(Nettuts是一个专注于提供网络开发教程的网站。)
任务7：开始学习如何使用JavaScript库
如果你学到了这个地步，就会意识到有些JavaScript 编写任务很难(或根本不能)通过跨浏览器的方式实现。最可能违规的便是过量的DOM操作，AJAX和动画。这也就是为什么我们需要JavaScript 库的原因。 正如我前面提到的，一个JavaScript 库的详细内容犹如减轻痛苦的蜜糖。因此，现在有必要来看一下。这里有大量库供你选择，我会让你自己决定从哪个开始。无论是jQuery 还是Mootools，YUI 还是Dojo，它们各自的网站会为你提供开始学习时你所需要的一切信息。如果你觉得用得着就来试试吧。 最流行的库： 虽然很容易得到大量的库，你还是应该选一个受欢迎的– 至少排名第一。 jQuery Dojo YUI MooTools Prototype
任务8：紧随大师的步伐
有很多令人难以置信的JavaScript 天才，他们一直在做些很酷的东西，你一定不想错过。值得庆幸的是，我们的工作狂Siddharth 副主编已经搞到一份33名设计人员列表，要想成为一名JavaScript 发烧友你就必须订阅它。扔下手头的工作，订阅/跟随这些设计人员。这是必须要做的。 但是，你还能做更多事情。这个公平网站经常发布关于JavaScript 的信息，所以不要走开。此外，关注JavaScript Show ，一档全世界关于JavaScript最新最大的播客。你可能还想注册JavaScript电子周刊简讯。 还想要更多吗?关注Tuts+Marketplace 的JavaScript 类。
js并不难学。
Js给人那种感觉的原因多半是因为它如下的特点：
A：本身知识很抽象、晦涩难懂，如：闭包、内置对象、DOM。
B：本身内容很多，如函数库、对象库就一大堆。
C：混合多种编程思想。它里面不但牵涉面向过程编程思想，又有面向对象编程思想，同时，它的面向对象还和别的编程语言（如：C++，JAVA，PHP）不大一样。就好像又是新的一样，让你对曾经学的面向对象产生了怀疑......
D：辛苦学习后又看似和实际应用脱节。通常学了很久的js基础之后，变量、函数、对象你也都略知一二，但一到公司开发项目的时候，却又难以下手。因为公司在开发实际项目的时候通常都是直接用它的衍生库，如：jquery，angular，boostrap，amaze，layui，ueditor等，而这些库又多如牛毛，同时还有自己的难点。让你都不知道该学哪个好，甚至都怀疑自己学的是不是js了，好像有多个版本的js一样，总是学不完......
那么，怎么才能在js领域内学的轻松甚至游刃有余呢？我总结了一些实战意义的js学习经验：
1.首先要紧紧抓住它的地位
时刻都不能忘记，否则很容易犯“一叶障目不见泰山”的错误。不要学了很久就知道js是编程语言，就是写代码，而且特点就是乱七八糟就完了，那样是学不好js的。要时时抓住它的地位，确切的说是它在整个Web中的地位：它属于前端的核心，主要用来操控和重新调整DOM，通过修改DOM结构，从而来达到修改页面效果的目的。要用这个中心思想去指导后续的一切js的学习，并且形成条件反射。
2.要有一条清晰的学习路线
这个只能是过来人给你提供参考了。我的学习路线如下：
A：js基础部分，如：定义变量、函数、数组、字符串等的处理，内置函数、内置对象等；
B：js面向过程编程思想，封装出各个函数，试着用这些去做一些常见的小功能，如：选项卡、自定义多选按钮、自定义播放器、3D幻灯片；
C：js面向对象编程思想，试着去封装一些你自己的对象，提供出有意义的接口出来；
D：学了上述的内容，然后学常用的库，这里必须学jquery；
E：学基于jquery之上的常见插件，如：bootstrap，Layer，富文本编辑器等；
F：综合应用上面的多种库写实际项目的模板，多写几套。
3.从多角度去学习和领悟
充分调动你所学的东西，从多角度去做某一功能，如：以前你是从面向过程角度做的，现在改为从面向对象的角度再来做，或者继续做成可以直接使用的插件，提供属性、方法等出来。争取让你做的这个功能逐渐能使用到实际项目中来。这样的好处：既综合应用了你的所学，又能有实际意义。
4.注意培养信心
此时的你，不适合一来就看很复杂很炫的网页效果的源代码，也不适合一来就学jquery，angular，vue，bootstrap这些东西。这些内容包含了很多深奥的知识在里面，在没有任何基础的情况下直接学这些，会严重打击你的自信心。而此时你是弱小的，你需要的是培养信心，而不是反过来，否则结局很可能是“夭折”，离学有所成也就遥遥无期了。
5. 多写总结
这种总结不但包括源代码、显示效果截图，还应该很容易犯的错误和对应的解决方法以及最后一两句精简的结论性语句。对自己写的总结不是写完了就了事了，要多回顾、多改进、多精简。到做项目的时候，应该是看里面的一两句话就知道是讲什么了，而不要再去看长篇大论了。
6.构建知识导图
这个可以让你越学越清晰，你可以按你喜欢的任何形式去做，只要自己印象深刻就行。
注意：知识导图也应该是经常修改、修正，让它更合理、更清晰。
学习编程知识，就来北京尚学堂，优秀的师资和多年的编程教育经验，会让你在学习的道路上快人一步。
javascript是用在网页中的，所以会设计到一些网页代码——也就是HTML语言，
另外，JavaScript本身还有自己的语法，也就是和一般编程语言的基本语法差不多。JavaScript的语法应该是java语言的简化。另外java写出的代码和C语言写出的代码也是挺像的。
js的作用主要有这么几个：
表单验证：网页上，用户输入的信息需要进行验证，在客户端验证，可以减少对服务器端的压力。所以，应该把握正则表达式方面的知识。
网页特效：页面上很多特效是非常好的，能产生很好的用户体验，所以需要把握好dom方面的知识。
数据传输：客户端与服务器端的数据交互，这个就是Ajax技术。
javascript本身也是一门比较有难度的语言，类C的一种语言，但是，作为一名程序员，只需要把握一些常用的技术，就是上面列举的那些方面。围绕这些方面，结合当今开发的常用技术学习就可以了。
今天小编要跟大家分享的文章是关于零基础学Web前端的学习路线总结，准备学习web前端知识的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。
第一个阶段：
1、HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发。
2、JavaScript基础：Js基础教程、js内置对象常用方法、常见DOM操作、ECMAscript、DOM、BOM、定时器和焦点图。
3、JS基本特效：常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。
4、JS高级特征：正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础。
5、JQuery：悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。
第二个阶段：
1、HTML5：HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket、Canvas。
2、CSS3:CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。
3、Bootstrap:响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。
4、移动Web开发：跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。
第三个阶段：
1、WEB服务器基础：服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。
2、PHP基础：PHP基础语法、使用PHP处理简单的GET或者POST请求。
3、AJAX：Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。
第四个阶段：
面向对象：从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。
第五个阶段：
1、框架封装基础：事件流、冒泡、捕获、事件对象、事件框架、选择框架。
2、框架封装中级：运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。
3、框架封装高级和补充：JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。
第六个阶段：
1、Web开发工作流：GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。
2、MVC/MVVM/MVW框架Angular.js、Backbone.js、Knockout/Ember。
3、常用库：React.js、Vue.js、Zepto.js。
第七个阶段：
Node.js全栈开发
以上就是小编今天为大家分享的关于零基础学Web前端的学习路线总结的文章，希望本篇文章能够对正在学web前端知识的新手有所帮助，想要了解更多web前端知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们学习成功，成为一名优秀的web前端工程师。
文章来源：原创前端资源库前端资源库