让我们开门见山 - 通过阅读无休止的教程和文档来学习 javascript 可能会让人感到无聊。

相信我，我从经验中知道。我花了很多时间复制和粘贴代码片段，但没有掌握发生了什么。

然后我发现了一些改变一切的事情：构建真实的项目是提高 javascript 技能的最快方法。

事情是这样的 - 您无需成为编码高手即可开始。

我将分享的五个项目旨在帮助您摆脱“什么是函数？”到“我可以创造东西！”

每个项目都建立在上一个项目的基础上，教授新想法，同时强化您已经知道的知识。

还有什么更好的吗？您将构建实际的功能应用程序 - 而不仅仅是您永远不会再使用的随机编码练习。

无论您是 javascript 新手还是只是想加强基础知识，这些项目都会为您提供实践经验。

想开始吗？让我们开始第一个项目。

项目1：交互式待办事项列表

您可能会想，“另一个待办事项清单？？”但这个项目作为一个基本起点是有原因的——它在一个紧凑的包中教你关键的 javascript 概念。

这就是为什么它对初学者如此有效：

首先，您将获得 dom 操作的实践经验 - 这意味着使用 javascript 更改您的网页。

您将添加新任务，勾选它们，然后通过单击鼠标删除它们。这意味着您将使用事件侦听器、创建新元素并随时更新页面。

您将创建的主要功能：

• 使用输入框添加新任务
• 将项目标记为已完成
• 删除您不再需要的任务
• 保存您的任务，以便在您重新加载页面时它们保持原样
• 为成品添加炫酷的删除线效果。

当您添加本地存储来保存任务时，真正的奇迹就会发生。

突然之间，您的基本待办事项列表变成了一个持久的应用程序，可以记住您放入的内容。

这与大型应用程序中用于存储用户信息的想法相同。

提示：从基础开始。首先，确保您可以添加和删除项目。然后，您可以在此基础上添加额外的功能。这种方法使整个过程不再那么令人畏惧。

想要激励自己吗？考虑添加任务类别或截止日期。这些额外的小东西将提高您的技能并使您的项目更加实用。

项目2：天气仪表板

该项目将向您介绍现代 web 开发中的一个关键概念——使用 api，从而提高您的技能。

您还将构建一些您可能想自己使用的有用的东西。

这个项目的酷之处在于，您将从互联网上获取实时天气数据并以引人注目的方式显示出来。

您将学习处理不是立即可用的数据（异步 javascript）并使用真实世界的 api 响应。

您将构建的主要功能：

• 搜索全球任何城市
• 显示当前温度、湿度和风速
• 显示未来几天的天气预报
• 包括根据情况变化的天气图标
• 保留喜爱的城市以便快速访问

最好的部分？您将了解 fetch 和 promise——任何 javascript 开发人员的关键概念：

async function getweatherdata(city) {
    const response = await fetch(`https://api.weatherapi.com/v1/forecast.json?q=${city}`);
    const data = await response.json();
    updateweatherdisplay(data);
}