使用 JavaScript 进行动态脚本编写

预备知识

在开始本模块之前，你不需要任何 JavaScript 知识，但你应该已经完成了本课程的前几个模块。你至少应该了解HTML和CSS 的基本原理。

教程与挑战

什么是 JavaScript？

欢迎来到 MDN 初学者 JavaScript 课程！在第一篇文章中，我们将从宏观角度审视 JavaScript，回答诸如“它是什么？”、“它在做什么？”等问题，并确保你熟悉 JavaScript 的用途。

初探 JavaScript

既然你已经了解了 JavaScript 的理论及其用途，我们将通过一个完全实用的教程，为你提供 JavaScript 基本功能的速成课程。在这里，你将一步步构建一个简单的“猜数字”游戏。

哪里出了问题？JavaScript 故障排除

当你在上一篇文章中构建“猜数字”游戏时，你可能会发现它无法正常工作。别担心——本文旨在通过提供一些查找和修复 JavaScript 程序错误的简单技巧，让你不再为这些问题抓狂。

存储所需信息 — 变量

阅读完前几篇文章后，你应该已经了解了 JavaScript 是什么、它能为你做什么、如何将其与其他 Web 技术配合使用，以及它的主要功能从宏观上看是怎样的。在本文中，我们将深入了解真正的基础知识，学习如何使用 JavaScript 最基本的构建块——变量。

JavaScript 中的基本数学 — 数值和运算符

在本课程的这一部分，我们将讨论 JavaScript 中的数学——我们如何结合运算符和其他功能，成功地操作数字以实现我们的意图。

文本处理——JavaScript 中的字符串

接下来，我们将把注意力转向字符串——这是编程中对文本片段的称呼。在本文中，我们将介绍学习 JavaScript 时应该了解的所有常见字符串知识，例如创建字符串、在字符串中转义引号以及将它们连接起来。

有用的字符串方法

既然我们已经了解了字符串的最基本知识，让我们更进一步，开始思考可以使用内置方法对字符串进行哪些有用的操作，例如查找文本字符串的长度、连接和拆分字符串、用一个字符替换字符串中的另一个字符等等。

数组

在本课中，我们将学习数组——一种将数据项列表存储在单个变量名下的整洁方式。在这里，我们将探讨它的用途，然后学习如何创建数组、检索、添加和删除存储在数组中的项目，以及其他内容。

挑战：傻瓜故事生成器 ^挑战

在这个挑战中，你需要运用迄今为止在本模块中学到的一些知识，将其应用于创建一个有趣的应用程序，生成随机的傻瓜故事。在此过程中，我们将测试你对变量、数学、字符串和数组的知识。

在代码中做出决策——条件语句

在任何编程语言中，代码都需要根据不同的输入做出决策并执行相应的操作。例如，在游戏中，如果玩家的生命值为 0，那么游戏结束。在天气应用程序中，如果是在早上查看，则显示日出图形；如果是晚上，则显示星星和月亮。在本文中，我们将探讨 JavaScript 中所谓的条件语句是如何工作的。

循环代码

编程语言对于快速完成重复性任务非常有用，从多个基本计算到几乎任何其他需要完成大量类似工作的场景。在这里，我们将介绍 JavaScript 中可用的循环结构，以处理此类需求。

函数——可重用的代码块

编码的另一个基本概念是函数，它允许你将执行单一任务的代码块存储在一个定义的块中，然后使用一个简短的命令在需要时调用该代码——而不是多次输入相同的代码。在本文中，我们将探讨函数背后的基本概念，例如基本语法、如何调用和定义它们、作用域和参数。

构建你自己的函数

在上一篇文章中处理了大部分基本理论之后，本文将提供实践经验。在这里，你将练习构建自己的自定义函数。在此过程中，我们还将解释处理函数的一些有用细节。

函数返回值

关于函数，我们还需要讨论最后一个基本概念——返回值。有些函数不返回有意义的值，但有些会。理解它们的值是什么、如何在代码中使用它们以及如何使函数返回有用的值非常重要。我们将在下面介绍所有这些。

事件介绍

在本文中，我们讨论了一些围绕事件的重要概念，并探讨了它们在浏览器中工作的基本原理。

事件冒泡

本文介绍了事件冒泡、事件捕获和事件委托的概念，这些都涉及到当你向一个包含另一个元素的元素添加监听器，并且事件发生在被包含元素上时所发生的情况。

挑战：图片画廊 ^挑战

既然我们已经了解了 JavaScript 的基本构建块，我们将通过让你构建一个在许多网站上都能看到的常见项目——一个由 JavaScript 驱动的图片画廊，来测试你对循环、函数、条件语句和事件的知识。

对象基础

在本文中，我们将探讨 JavaScript 对象的基本语法，并回顾本课程前面已经介绍过的一些 JavaScript 功能，重申你已经处理的许多功能都是对象这一事实。

DOM 脚本简介

在编写网页和应用程序时，最常见的操作之一就是以某种方式更改文档结构。这通常通过操作文档对象模型 (DOM) 来完成，通过一组用于控制 HTML 和样式信息的内置浏览器 API。在本文中，我们将向你介绍 DOM 脚本编程。

使用 JavaScript 发出网络请求

现代网站和应用程序中另一个非常常见的任务是发出网络请求，从服务器检索单个数据项，以更新网页的各个部分，而无需加载整个新页面。这个看似微小的细节对网站的性能和行为产生了巨大影响，因此在本文中，我们将解释这个概念并介绍使之成为可能的技术。

使用 JSON

JavaScript 对象表示法 (JSON) 是一种基于 JavaScript 对象语法的标准文本格式，用于表示结构化数据。它通常用于在 Web 应用程序中传输数据（例如，将一些数据从服务器发送到客户端，以便在网页上显示，反之亦然）。你会经常遇到它，因此在本文中，我们为你提供了使用 JavaScript 处理 JSON 所需的一切，包括解析 JSON 以便你可以访问其中的数据，以及创建 JSON。

挑战：构建房屋数据 UI ^挑战

在这个挑战中，我们将让你为一个房地产网站的房屋搜索页面编写一些 JavaScript。这将包括获取 JSON 数据，根据提供的表单控件中输入的值过滤数据，并将数据渲染到用户界面。在此过程中，我们还将测试你对条件语句、循环、数组和数组方法以及其他知识的掌握程度。

JavaScript 调试和错误处理

在本课中，我们将回到 JavaScript 调试的主题（我们最初在出了什么问题？中探讨过）。在这里，我们将深入探讨跟踪错误的技术，同时也将探讨如何在代码中进行防御性编码和处理错误，从一开始就避免问题。

检验你的技能

你会在教程文章之间找到“检验你的技能”文章，以检查你是否在继续学习之前掌握了最重要的信息。如果你想一起探索所有这些内容，可以在检验你的技能：JavaScript中找到它们的列表。

另见

Scrimba: 学习 JavaScript ^{MDN 学习合作伙伴}

Scrimba 的《学习 JavaScript》课程通过解决 140 多个交互式编码挑战来教授 JavaScript，构建项目包括游戏、浏览器扩展甚至移动应用程序。Scrimba 提供由知识渊博的老师教授的有趣互动课程。

学习 JavaScript

对于有抱负的 Web 开发人员来说，这是一个极好的资源——在交互式环境中学习 JavaScript，包括短课程和交互式测试，并通过自动化评估进行指导。前 40 节课是免费的，完整课程只需一次小额付款。

• 概述：核心学习模块
• 下一页