怎样系统性从入门到熟练的学习JavaScript?

1 为什么要学习JavsScript (JS)?

JavaScript是的一个重要的前端编程语言,通常简称为JS。程序员(或开发者)来说,在业界也是个枪手的能力(开发/编程语言能力),也很可能是最稀缺的技能之一。JavaScript不仅可以为网站添加视觉上和功能上优质而专业的交互,还是很多常用库(比如jQuery)和框架(例如Angular JS、React JS、Node JS)的基础库。

2 谁需要学习JavaScript语言?

一般来说,专门负责开发前端的程序员,JS是一门必须的技术。不过陆续你会发现情况并不仅如此,就算对于并非纯前端的开发者来说,这门JS语言是一门必须去了解并熟悉的技能。

3 为什么JavaScript是个性价比高的编程语言?

学习JavaScript的前提必须条件是先学习HTML、CSS。HTML、CSS入门都很容易。至于JavaScript,在语言特性方面,只要理解C语言风格的基本写法,基本上不是障碍。当然持续的话,必须要学以致用。最繁琐的DOM方法和浏览器兼容性问题,都有API十分易用的jQuery帮忙解决,对于实现具体的效果,网上各种插件更是数不胜数。它性价比高,是因为前端开发这件事要达到一个可以拿来应聘一份可以糊口的工作的程度是并不困难的。

由于浏览器对HTML5的支持渐渐在完善,浏览器的功能在逐渐增强,再加上云计算的流行与智能手机的普及,从某种角度上来说,也许以后JS的应用都会存在于互联网中,我们需要通过任何设备来访问应用或数据,这就是未来的趋势。

前端技术不断发展创新的活力,也是其他语言所不能比拟的。HTML5,Node.js,移动应用开发,随便一项都很前卫。简单举个例子,因为有了node.js,所以JS可以用作后端语言。

4 JavaScript需要学习什么基础知识?

HTML和 CSS是基础中的基础,这两部分可以在 W3schools在线教程上自行直接学习,边学边练边敲键盘,还可以尝试测试自己学习过的知识(每章后还有小测试)。 接下来找一些网页,去模仿一些网站做些网页,这样你可以体验在学习JS过程中,真正去开发网站大概会碰到什么问题。在实践中积累了一些经验后,可以系统的读一两本书,推荐《Head First HTML 与 CSS 中文版》,这本书的内容每一块都讲的很细,读起来应该蛮简单。另外在W3schools的学习过程中,可以接着读《Javascript语言精粹》。其实说白了,JS是一门很混乱的语言,这本书能够帮助你区分哪些是语言的精华,哪些是可以马马虎虎过去的。对于语言精华,应该深入学习。


w3school

Head First HTML 与 CSS 中文版

Javascript语言精粹

单单学习一门JS是不可能开发出很好用或效果很棒的网页的,必须也需要懂CSS。既然学习了JavaScript的一些基础,就应该就可以进行一般的静态网页设计,对于复杂的网页是需要进一步学习比如CSS。这时候必看《精通CSS》,看完这本书你会对几个有用的概念更深刻,比如:盒子模型,流动,Block,inline,层叠,样式优先级,等。接着再读《CSS艺门之匠》。这本书对标题,背景,圆角,导航条,table,表单等主题都有详细的介绍。

精通CSS

CSS艺门之匠

JavaScript里头有几件事情必须弄明白的,接下来我们说说。

5 JS框架

框架的选择(严格来说,可能是常用库),推荐jQuery,因为它简单易用,在W3school简单学习JavaScript后,直接上手jQuery即可完成一些简单的新网页开发项目。

jQuery的学习方法也很简单,照着产品文档做几个页面就OK了,不用面面俱到的。

使用jQuery的时候,遇到问题查文档、查Stackoverflow,基本上都能搞定。框架可以帮你屏蔽浏览器的差异性,让你能更专注与Web开发学习的精髓部分。

stackoverflow

另外关于jQuery的学习,你可以直接上 Codecademy 学习 Javascript和jQuery两者 – 直接在这平台上边学习边敲代码,肯定会是个很不错的体验。

Codecademy

6 JS语言范式

这里的意思是两个概念,概念包括了:“面向对象”,“函数式”。

Javascript并不完全是一个面向对象的语言,它的很多设计理念都有函数编程语言的影子,甚至如果你不用面向对象,完全可以把它理解成一门函数式编程语言。

Javascript的很多语言特性,都是因为它具有函数式语言的特点才存在的。对于这部分,需要先学习面向对象的基本理论,封装,继承,多态等概念要理解。可以读:《Object Oriented Javascript》。

Object Oriented Javascript

7 Javascript 语言内部机制

必须弄清如下概念:

  • JS 中变量的作用域
  • 变量传递方式
  • 函数的定义环境与执行环境
  • 闭包,函数的四种调用方式(一般函数,对象的方法,apply,call)

还有四种调用方式下,‘this’指向的是谁也是非常重要的。

建议读的书:《Javascript语言精粹》

Javascript语言精粹

这里头,你必须理解 json。

8 DOM编程

DOM编程是每个Web前端工程师的核心技能之一。

必读的书有《Dom编程艺术》,另外也需要参考《高性能 Javascript》,这本书中关于DOM编程的部分讲得不错的。

Dom编程艺术

高性能 Javascript

9 Ajax编程

虽然Ajax不是什么新概念,但依然是另一核心技术。

Ajax的学习部分,建议在网上查些资料,了解这个概念的来龙去脉,Google,百度百科,维基百科上的内容就足够了。Ajax编程是很容易的,因为现在几乎所有框架都对Ajax有良好的封装,所以实行起来并不复杂。

10 了解浏览器差异性

浏览器差异性的部分其实包括了CSS和JS两个主要部分。浏览器差异内容很多,通常只能在实践中尽量多积累。

对于浏览器的渲染模式,DOCTYPE等内容要系统学习。

11 HTML5和CSS3

HTML5和CSS3两个必须要讲到,也需要放在一起讲。其实HTML5的规范早已经于2014年发布了,移动端HTML5和CSS3已经得到了非常广泛的使用。