前端练级攻略(第二部分)

本文是 前端练级攻略 第二部分，第一部分请看下面：

•  前端练级攻略(第一部分)

在第二部分，我们将重点学习 JavaScript 作为一种独立的语言，如何向界面添加交互性，JavaScript 设计和架构模式，以及如何构建网络应用程序。

就像 HTML 和 CSS一样，有大量的 JavaScript教程。然而，特别是对于一个新手来说，很难弄清楚使用什么样的教程以及以什么样的顺序来学习它们。本系列的主要目标是为你提供一个路线图，帮助你导航学习成为前端开发者。

JavaScript基础知识

JavaScript 是一种跨平台的编程语言，现在几乎可以用于任何事情。

语言

在学习如何将JavaScript应用到web之前，首先要了解该语言本身。首先，阅读 Mozilla Developer Network的语言基础速成课程。本教程将教你基本的语言结构，如变量、条件和函数。

然后，阅读 MDN 的 JavaScript 指南中的以下部分:

•  Grammar and types (语法和类型)
•  Control flow and error handling (控制流程和错误处理)
•  Loops and iterations (循环和迭代)
•  Functions(函数)

不要太担心记住特定的语法，你可以随时查一下文档。相反，应该专注于理解重要的概念，比如变量实例化、循环和函数。如果知识密度难度太大，也没关，先过一篇，你把这些概念付诸实践，当你回过头在来看，可能会理解起来会更加清晰。

基于文档的学习可能会过于单调，可以看看 Codecademy 的 JavaScript课程，这课程是理论与实践相结合的，相对会有乐趣一。 此外，如果你有时间，请参阅上面列出的每个概念，阅读 Eloquent JavaScript中的相应章节以加强你的学习。 Eloquent JavaScript 是一本很棒的免费在线书籍，每个有抱负的前端开发人员都应该阅读。

交互性

现在你已经基本了解了 JavaScript 的语法，下一步就是将它应用到 Web上。 要了解 JavaScript如 何与网站交互，首先你必须了解 文档对象模型（DOM）。

DOM 是 HTML 文档的一种表示结构。它是一个树形结构，由对应于 HTML 节点的 JavaScript 对象组成。要进一步了解DOM，请阅读 CSSTricks 的 《什么是DOM》。它提供了对 DOM 的简单而直接的解释。

JavaScript 与 DOM 交互以更改和更新它。下面是一个例子，我们选择一个 HTML 元素并更改它的内容

var container = document.getElementById(“container”);   
container.innerHTML = 'New Content!'; 

别担心，那只是一个简单的例子。使用 JavaScript DOM 操作，你可以做更多的事情。要了解有关如何使用 JavaScript 与 DO M交互的更多信息，请阅读 MDN 的“文档对象模型”一节中的以下指南。

•  事件及DOM
•  Examples of web and XML development using the DOM
•  如何建立 DOM 树
•  DOM概述
•  使用选择器定位DOM元素

再次强调一下，重点是要先理解概念而不是语法，希望能够回答以下问题:

•  DOM 是什么?
•  如何查询元素
•  如何添加事件监听？
•  如何更改 DOM 节点属性？

有关常见的 JavaScript DOM 交互的列表，请查看 PlainJS 的 JavaScript 函数和助手。该网站提供了一些例子，说明如何在 HTML 元素上设置样式和附加键盘事件监听器。如果你想深入挖掘，你可以随时阅读 Eloquent 讲的 JavaScript 中关于DOM的部分。

检查

要调试浏览器中的JavaScript，我们使用浏览器内置的开发人员工具。 大多数浏览器都提供了 inspector 面板，可以让你查看网页的来源。 你可以在执行时跟踪 JavaScript，将调试语句打印到控制台，以及查看网络请求和资源等内容。

里有一个关于使用 Chrome 开发工具的教程。如果你使用的 Firefox，可以查看本教程。

实践基础

在这一点上，关于JavaScript还有很多东西需要学习。然而，最后一节包含了许多新信息。我想我们该休息一下，做几个实践了。它们有助于巩固你刚刚学到的一些概念。

实践 1

对于实践1，转到 AirBnB，打开浏览器的页面检查器，然后单击控制台选项卡。在这里，你可以在页面上执行JavaScript。我们要做的是通过操纵页面上的一些元素来获得一些乐趣。看看你是否可以完成以下所有的 DOM 操作。

•  选择具有唯一类名的标题标签并更改文本
•  选择页面上的任何元素并将其删除
•  选择任意元素并更改其CSS属性之一

*　选择一个特定的区域标签，并向下移动250像素

*　选择任何组件，如面板，并调整其透明度

•  定义一个名为 doS​​omething 的函数，该函数j里定义一下alert (“Hello world”) 然后执行它
•  选择一个特定的段落标记，向其中注册一个 click 事件，并在每次事件被触发时运行 doSomething

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!