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

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

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

在第二部门，我们将重点进修 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

（编辑：湖南网）

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