6. JavaScript 基础

脚本

核心模块

JavaScript 是一个庞大的主题，包含许多不同的功能、样式和技术需要学习，以及许多构建在其之上的 API 和工具。本模块主要关注核心语言的精髓，以及一些关键的周边主题——学习这些主题将为你提供坚实的基础。

通用资源

6.1 变量

学习目标

  • 理解什么是变量以及为什么它们在编程中如此重要，不仅限于 JavaScript。
  • 使用 let 声明变量并使用值对其进行初始化。
  • 使用新值重新分配变量。
  • 使用 const 创建常量。
  • 了解变量和常量的区别，以及何时使用哪一个。
  • 理解变量命名最佳实践。如果没有明确说明，所有示例都应展示良好的变量命名实践。
  • 了解可以存储在变量中的不同类型的值——字符串、数字、布尔值、数组和对象。

资源

6.2 数学

学习目标

  • JavaScript 中的基本数字运算——加、减、乘和除。
  • 理解如果数字被定义为字符串，则它们不是数字，以及这会导致计算错误。
  • 使用 Number() 将字符串转换为数字。
  • 运算符优先级。
  • 递增和递减。
  • 赋值运算符，例如加法赋值和减法赋值。
  • 比较运算符。
  • 基本的 Math 对象方法，例如 Math.random()、Math.floor() 和 Math.ceil()。

资源

6.3 文本

学习目标

  • 创建字符串字面量。
  • 理解匹配引号的必要性。
  • 字符串连接。
  • 在字符串中转义字符。
  • 模板字面量
    • 在模板字面量中使用变量。
    • 多行模板字面量。
  • 使用常见的属性和方法进行字符串操作，例如
    • 长度.
    • toString().
    • includes().
    • indexOf().
    • slice().
    • toLowerCase() 和 toUpperCase()。
    • replace().

资源

6.4 数组

学习目标

  • 理解什么是数组——一种保存变量列表的结构。
  • 数组的语法——[a, b, c] 和访问器语法 myArray[x]。
  • 使用 myArray[x] = y 修改数组值。
  • 使用常见的属性和方法进行数组操作，例如
    • 长度.
    • indexOf().
    • push() 和 pop()。
    • shift() 和 unshift()。
    • join() 和 split()。
  • 高级数组方法，例如 forEach()、map() 和 filter()。

资源

6.5 条件语句

学习目标

  • 理解什么是条件语句——一种代码结构，根据测试结果运行不同的代码路径。
  • if ... else ... else if.
  • 使用比较运算符创建测试。
  • 测试中的 AND、OR 和 NOT。
  • switch 语句。
  • 三元运算符。

资源

6.6 循环

学习目标

  • 理解循环的用途——一种代码结构，使你能够多次执行非常相似的操作，而无需为每次迭代重复相同的代码。
  • 基本的 for 循环。
  • 使用 for ... of 循环遍历集合。

注释:

JavaScript 中还有许多其他类型的循环，我们在这里没有列出。在这个阶段，理解所有循环类型没有必要（或有用）。现在，学生需要理解循环的用途，以及最常见的类型。

  • break 和 continue。

资源

6.7 函数

学习目标

  • 理解函数的用途——使能够创建可重用的代码块，可以在需要的地方调用。
  • 理解函数在 JavaScript 中无处不在，有些内置于浏览器，有些是用户定义的。
  • 理解函数和方法的区别。
  • 调用函数。
  • 返回值。
  • 理解全局作用域和函数/块作用域。
  • 向函数调用传递参数。
  • 命名函数和匿名函数。
  • 构建你自己的自定义函数
    • 包含参数。
    • 包含返回值。
  • 回调函数——理解函数的参数本身可以是函数，以及这种模式的用途。
  • 箭头函数。

资源

6.8 JavaScript 对象基础

学习目标

  • 理解在 JavaScript 中，大多数事物都是对象，你可能在每次使用 JavaScript 时都使用过对象。
  • 基本语法
    • 对象字面量。
    • 属性和方法。
    • 在对象中嵌套对象和数组。
  • 使用构造函数创建一个新对象。
  • 对象作用域和 this。
  • 访问属性和方法——方括号和点语法。
  • 对象解构。

资源

6.9 DOM 脚本

学习目标

  • 理解什么是 DOM——浏览器对文档的 HTML 结构的内部表示，以对象的层次结构形式呈现，可以使用 JavaScript 进行操作。
  • 理解 Web 浏览器的重要部分以及它们在 JavaScript 中的表示——Navigator、Window 和 Document。
  • 理解 DOM 节点在 DOM 树中的相对位置——根节点、父节点、子节点、兄弟节点和后代节点。
  • 获取对 DOM 节点的引用，例如使用 querySelector() 和 getElementById()。
  • 创建新的节点，例如使用 innerHTML() 和 createElement()。
  • 使用 appendChild() 和 removeChild() 将节点添加到 DOM 或从 DOM 中删除节点。
  • 使用 setAttribute() 添加属性。
  • 使用 Element.style.* 和 Element.classList.* 操作样式。

资源

6.10 事件

学习目标

  • 理解什么是事件——当浏览器发生重要事件时触发的信号，开发者可以在响应事件时运行一些代码。
  • 事件处理程序
    • addEventListener() 和 removeEventListener()
    • 事件处理程序属性。
    • 内联事件处理程序属性，以及为什么不应该使用它们。
  • 事件对象。
  • 使用 preventDefault() 阻止默认行为。
  • 事件委托。

资源

6.11 异步 JavaScript 基础

学习目标

  • 理解异步 JavaScript 的概念——它是什么以及它与同步 JavaScript 的区别。
  • 理解回调函数和事件在历史上为 JavaScript 提供了进行异步编程的方式。
  • 使用 async 函数和 await 进行现代异步编程
    • 基本用法。
    • 理解异步函数返回值。
    • 使用 try ... catch 进行错误处理。
  • Promise
    • 理解 async/await 在幕后使用 Promise；它们提供了一个更简单的抽象。
    • Promise 链。
    • 使用 catch() 捕获错误。

资源

6.12 使用 fetch() 发起网络请求

学习目标

  • 理解 fetch() 用于异步网络请求，这是 Web 上最常见的异步 JavaScript 用例。
  • 从网络中获取的常见资源类型
    • 文本内容、JSON、媒体资产等。
    • 来自 RESTful API 的数据。学习 REST 背后的基本概念，包括常见的模式，例如 CRUD。
  • 理解什么是单页应用 (SPA)，以及围绕它们的问题
    • 异步更新背后的无障碍性问题，例如，默认情况下，内容更新不会被屏幕阅读器宣布。
    • 异步更新背后的可用性问题，例如，历史记录丢失和破坏后退按钮。
  • 理解 HTTP 基础知识。你应该了解常见的 HTTP 方法，例如 GET、DELETE、POST 和 PUT，以及它们如何通过 fetch() 进行处理。

资源

6.13 使用 JSON

学习目标

  • 理解什么是 JSON——一种基于 JavaScript 对象语法的非常常用的数据格式。
  • 理解 JSON 也可以包含数组。
  • 使用 Web API 中可用的机制（例如 Fetch API 中的 Response.json()）将 JSON 检索为 JavaScript 对象。
  • 使用方括号和点语法访问 JSON 数据中的值。
  • 使用 JSON.parse() 和 JSON.stringify() 在对象和文本之间进行转换。

资源

6.14 库和框架

学习目标

  • 理解什么是第三方代码——由其他人编写的功能，你可以在自己的项目中使用，这样你就不必自己编写所有代码。
  • 为什么开发者使用第三方代码
    • 效率和生产力：大量的复杂功能已经为你编写好，可以供你使用，并且以一种强制执行高效、模块化代码组织的方式创建。
    • 兼容性：信誉良好的框架代码已经针对性能等方面进行了优化，可以在各种浏览器/设备上运行。许多框架还具有针对特定平台（例如 Android 或 iOS）输出的系统，作为构建目标。
    • 支持/生态系统：流行的框架拥有充满活力的社区和帮助资源，提供支持，以及丰富的扩展/插件系统来添加功能。
  • 库和框架之间的区别
    • 库往往是一个单一的代码组件，它提供特定问题的解决方案，您可以将其集成到自己的应用程序中（例如，chart.js 用于创建基于<canvas> 的图表，或 three.js 用于简化的基于 GPU 的 3D 图形渲染），而框架则往往是更广泛的架构，由多个组件组成，用于构建完整的应用程序。
    • 库在您如何在代码库中使用它方面往往是不强求的，而框架往往会强制执行特定的编码风格和控制流。
  • 为什么要使用框架？
    • 它们可以提供很多功能，为您节省很多时间。
    • 许多公司使用 React 或 Angular 等流行框架来编写他们的应用程序，因此许多工作岗位都会列出框架作为申请人必须具备的要求。
  • 为什么框架并不总是最佳选择？框架
    • 对于小型项目来说很容易过于复杂 - 您可能最好写几行原生 JavaScript 来解决问题，或者使用定制的库。
    • 通常会在应用程序的初始下载中添加大量 JavaScript，从而导致初始性能下降，并可能出现可用性问题。
    • 通常会附带一套自定义语法和约定，这可能会给项目带来额外的学习曲线。
    • 可能由于其架构选择与现有代码库不兼容。
    • 需要定期更新，这可能会给应用程序带来额外的维护开销。
    • 由于其架构（例如，SPA 风格的客户端路由），可能会给使用辅助技术的人员带来重大可访问性问题，这需要仔细考虑。
  • 如何选择？好的库或框架必须
    • 解决您的问题，同时提供比其带来的任何负面影响更为显著的优势。
    • 拥有良好的支持和友好的社区。
    • 积极维护 - 不要选择一个超过一年没有更新或没有用户的代码库。

资源

6.15 调试 JavaScript

学习目标

  • 了解不同类型的 JavaScript 错误，例如语法错误和逻辑错误。
  • 了解常见的 JavaScript 错误消息类型及其含义。
  • 使用浏览器开发者工具检查页面上运行的 JavaScript，并查看它生成的错误。
  • 使用console.log() 和 console.error() 进行简单的调试。
  • 错误处理
    • 使用条件语句避免错误。
    • try ... catch.
    • throw.
  • 使用断点、观察器等进行高级 JavaScript 调试。

资源

上一步：5. CSS 布局下一步：7. 可访问性