入门

你好，欢迎来到《中级JavaScript：构建前端组件》课程。本课程的目的是教你如何运用已掌握的基础HTML、CSS和JavaScript知识，来构建真实世界中的前端组件。课程将带你逐步实现多个你在热门网站上常见过的复杂组件。你将学习如何应对常见的前端挑战，知道该提出哪些问题，如何在构思出解决方案后进行设计，如何调试并处理错误，以及其他重要技能。最终目标是让你能够指着网站的任意部分说：“我能做出这个。”

## 先修要求 如果你对HTML、CSS或JavaScript一无所知，本课程可能会有些难以跟上，但并非完全不可能。本课程的目标受众包括：至少完成过一门相关入门课程（或至少学过JavaScript）的学习者，以及希望提升前端技能的初级专业开发者。如果你是完全的新手，我建议先学习一门优秀的入门课程。不过，如果你有足够决心，初学者也可以通过自行查阅未解释内容的相关资料，尝试跟上课程进度。

课程说明

本课程使用原生的HTML、CSS和JavaScript。

成为一名优秀的前端工程师，需要掌握基础知识，并在引入库和框架之前，先学会用原生JavaScript构建功能。因为并非所有场景都会使用你专精的某个库，而掌握原生方式构建组件，能让你更清楚地理解背后的原理，不再觉得开发过程像“魔法”。

你将完成五个不同的组件开发，章节顺序建议按步进行。这是因为每一章都会在前一章的基础上，聚焦于前端开发的不同方面。例如，某些实现细节可能在早期章节中被深入讲解，而在后续章节中则假设你已经熟悉这些内容。

## 注意事项 课程中大部分示例都以标签页形式嵌入在iframe中，独立完整。请花时间仔细理解每个标签页的内容以及其中的变化。 如果你正在动手实践，请将HTML、CSS和JavaScript分别保存在不同的文件中，并从HTML页面中引用它们。示例中省略了这部分结构，是因为展示工具的实现方式如此。例如，若你有一个`index.html`文件，应在`<head>`标签内添加类似 `<link rel="stylesheet" type="text/css" href="./index.css">` 的代码，而在 `</body>` 标签前添加类似 `<script src="./index.js"></script>` 的脚本引用。我鼓励你使用自己的文件进行练习，甚至可以在查看下一个示例前先自己尝试实现，再对比结果。