JavaScript学习路线

程序员桔子
463 阅读5分钟

JS 是一种具有函数优先特性的轻量级、解释型的编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新——交互式的地图、2D/3D 动画、滚动播放的视频等等。作为前端三件套中的一员，其地位在前端开发中无疑是举足轻重的。如果把前端三件套比作蟹老板的美味蟹堡的话，html 就是面包，css 是蔬菜、奶酪和肉饼，那么 JS 就是痞老板心心念念的美味蟹堡秘方了~

图片

图片

以简单的点击按钮数字加一的效果为例，先通过 HTML 构建结构:

<button id='myBtn'>
  点击加一: <span id="count">0</span>
</button>

图片

然后我们可以为它加一点 CSS 样式，让它变得更好看：

#myBtn {
    background-color:#407cee;
    color:white ;
    width:100px;
    height:50px;
    border-radius:10px;
    border:none;
    font-size:16px;
    margin-top:20px
}

图片

最后我们可以再加上一些 JavaScript 来实现动态行为，点击按纽后数字加一：

const btn = document.getElementById("myBtn");
const countElement = document.getElementById('count');
let count = 0;

btn.addEventListener("click", function(){
  countElement.textContent = count++
});

图片

所以说，只有打好 JS 基础，才能在前端开发过程中得心应手，做出自己的美味蟹堡。

1.学习路线

学习 JS 前，你不需要预先了解任何 JavaScript 知识，但你应当对 HTML 和 CSS 有所熟悉。相比于其他两者，JS 需要更多的主观能动性去实现功能和效果，与 css 不同的是，它更加注重逻辑过程，毕竟 JS 与前两者相比已经不是在同一个层次了。对于 JS 小白来说，官方 MDN 文档也许不是那么的适合，因为官方文档写的很细致规范，在学习的初期可能导致适得其反的效果，这里推荐几个适合新手小白的学习参考资料。

文字资料：

  1. 阮一峰 JS 教程：wangdoc.com/javascript 。文章写的通俗易懂，非常适合新手学习。

  2. 后盾人文档：文档网页很清爽，整体的结构目录清晰，内容丰富且有条理，适合在学习后查漏补缺。

  3. MDN 官方文档：包含前端三件套的所有细致文档，可以在开发过程中查找指令或者了解某个接口的特性等。不太推荐小白一上来直接看这个，也许会因为内容太过细致而导致放弃学习JS。

  4. 菜鸟教程：www.runoob.com/css/css-tut… 。该网站集合了不同开发方向的不同语言以及好用的开发工具，可以成体系的学习感兴趣的开发方向的系统知识。其中的 JS 文档大纲划分很清晰，适合小白循序渐进地学习，而且可以在该网站上看看与前端相关的工具或者感兴趣的技术。

  5. 稀土掘金社区：在学习之余逛逛社区，看看其他人是怎样学习的，参考他人解决问题的思路与方法，积累自身开发经验。有利于加速理论知识到具体成果和实际功能的转化。这对于学习一门语言并真正地掌握它是非常重要的，在不断学习的过程中瓶颈是不可避免的。所以多看多学他人的优秀经验，与其他伙伴进行交流，才能提升技术运用水平，突破自身瓶颈。

视频资料：

B站JS相关视频很多，大家主要挑免费且系统的课程看就可以。

以下是大致的JS学习路线图：

图片

2.学习建议

JS 更加注重逻辑思维，这就要求我们要持之以恒的练习，保持逻辑的清活络，同时对各类 api 或者类型的特性了如指掌，这样才能在实际开发中使用合适的技术路径快速高效的解决和处理问题，完成功能的落地。对于学习有以下几点建议：

  1. 寻找合适的技术社区以解决问题：会问问题，会去正确的地方寻找问题的答案也是一种必备的能力，这对于前期学习的同学来说是非常重要的。这会节约你大量的学习成本，并且会给你更多的正向激励以推动你继续将这门技术学下去。可以选择上文提到的稀土掘金社区或者是国外的 Stack Overflow（stackoverflow.com） 。该社区是国外的程序员提交问题的社区，对于初学者来说在上面肯定能找到你想要的答案，同时也可以锻炼你提问题的水平。
  2. 定期地汇总问题，形成自己的学习/开发笔记：要积累自己在学习或者开发中遇到的各种问题及瓶颈，以及自己是如何克服或者解决的。这对自身的长期发展来说很重要，同时也会在未来就业时为自己增加竞争优势。
  3. 夯实基础，多角度解决问题：可能在一开始学习的时候只会用固定思路或单一方法解决问题，但可以逐渐地尝试多角度分析并解决问题。即一种问题多种解决方案，这样做的好处就是不仅复习和巩固了知识点，还增强了对知识掌握的广度与深度，从而提升自己解决问题的综合思维，并用最省力高效的方式完成开发工作。

以上就是学习JS方法与学习资料的总结了，之后也会开更JS方面的文章，敬请期待~

avatar
文章
阅读
粉丝