新手入门,如何快速理解JavaScript

记得我刚刚学习前端的时候,对HTML和CSS学习得是很快的,一个月的时间从零到仿各种静态页面,从PC到移动端的页面都写过,然后信誓旦旦去找工作——不出意外,都被拒绝了。连续几家公司或直接或间接给出的回复都很明确,JavaScript是一个前端必须要会的语言。

既然如此重要,那么究竟如何快速的理解JavaScript呢?

想要快速的理解一门语言,看视频或许是一个不错的选择。但连基础知识和概念都没有掌握,看视频也是如同嚼蜡,索然无味。** 难道要先看书? **首先,看书对于掌握一门语言或技术都是必不可少的环节,有助于全盘梳理,系统性的掌握,但对于快速上手(使用)来讲,还是没那么多的时间去整本通读的。

所以你想怎样?

顺序很重要,可以这样来做:
首先,概念要先理解,比如变量和基本运算,逻辑语句等,接触了一些基本的之后,动手做几个练习题,此步骤很快
其次,可以进入看视频的环节,这里也分几点,第一要看基础概念讲解,看看老师们有什么建议;第二,作为一个前端工程师,直接上手DOM操作吧,看看这方面相关的知识,这里理论和实践都很重要。
最后,看书,前面说过书是系统性的介绍一门语言,想要在这个行业混下去,看书必不可少,前面的步骤可以让你不太理解的情况下也能出招,但想要内力大增还是需要看书的。

该怎么做?

无论看书还是看视频,到最后不实践一下就没法掌握这些知识,那么,有什么好的方法可以用在实践环节?我认为最好的实践方法是使用F12打开你的JavaScript控制台,切换到console,在你每一个JavaScript代码中加入调试语句,在你每一个不明白的地方加入调试语句,终极方案是看看你的JavaScript代码是怎么在浏览器运行的。

关于JavaScript调试方法

早期的前端工程师们没有统一的调试方法(很久以前的事儿),所以一般用alert()语句来输出关键信息,但这样做有很多不方便的地方,比如该语句会直接打断浏览器的运行,后来工程师们又想了一个新的办法,在页面中直接创建一个专门用于调试的<div>块,把所有的调试信息都输出到该块中,这样做的缺点是每次调试都要去创建这个块,工程发布时要删除,不然会有非常不好的体验。那么到了现在,调试有专门的JavaScript对象来负责,就是console对象。

console对象

这个对象是今天的重点,想要快速的理解JavaScript语言,就必须得利用这个工具,console对象。常见的调试语句如下:

console.info()  //输出调试信息
console.log()   //输出调试信息,可接受多个参数,以逗号隔开
console.error()   //输出错误信息,控制台为红色信息
console.warn()   //输出警告信息,控制台为黄色信息

其实初期帮助我们理解JavaScript只要console.log()console.info()就够了,在我们的代码中不明白不理解的地方插入调试语句,然后运行在浏览器,查看控制台上输出的信息,直观地理解,无论是this还是argument
经常在书中或视频中看到一些代码块,其中的一些用到了this等对新手不太友好的关键词,不理解?一些DOM操作中其实是在操作什么,不理解?看下面的例子:

var date = new Date();
console.info(date);  //?
var div = document.getElementById('divID');
console.info(div);  //?
console.info(document);   //?
console.info(window);   //?
console.info(this);  //?

想知道控制台会输出什么?运行一下,看一下呗

可参考以下学习资源

  1. 慕课网-程序员的梦工厂
  2. JavaScript DOM编程艺术
  3. JavaScript高级程序设计(第3版)
  4. 自己去搜索一下console的详细信息吧
    原文作者:单调先生
    原文地址: https://www.jianshu.com/p/13e8c3837907
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞