学习使用 JavaScript 构建一个简单的词典应用程序

JavaScript 是 Web 开发人员中最流行的编程语言之一。在学习 JavaScript 时,每个人都从基础开始,并使用 DOM 操作构建简单的应用程序。

在本文中,您将学习如何使用 JavaScript 和 DOM 操作构建字典。本文希望您在阅读之前了解 JavaScript 的基础知识。

看看 API

API代表应用程序编程接口。 API 使应用程序能够轻松安全地交换数据和功能,从而简化软件开发和创新。

该项目使用dictionaryapi.dev API。这是一个免费的 API,可提供与您搜索的词相关的多个定义、语音和其他语法术语。

API链接如下:

 https://api.dictionaryapi.dev/api/v2/entries/en/word

项目前端布局

该项目的前端布局是使用 HTML 和TailwindCSS构建的。您可以使用下面给出的 CDN 在 HTML 文件中导入 TailwindCSS。

 <link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet" />

HTML 页面有一个输入和一个按钮,用户可以在其中输入要搜索的词。还有三个 div 可以显示词性、多个定义和音频,帮助您正确发音。默认情况下,这三个 div 的显示属性为 none。当从 API 获取数据时,这些 div 的显示属性将设置为阻止。

 
<div class="bg-green-100 min-h-screen pt-10">
<h2 class="text-green-600 text-5xl pt-4 font-semibold text-center">
Dictionary
</h2>
<div class="flex justify-center p-8 items-center">
<input
type="text"
placeholder="Enter the word"
id="word"
class="
py-2
w-1/4
focus:outline-none
border-2 border-green-600
rounded
px-3
"
/>
<button
id="search"
class="bg-green-600 text-white text-xl px-4 py-2 rounded">
Search
</button>
</div>
<div class="flex flex-col justify-center items-center">
<div id="partOfSpeechDiv" class="hidden">
<h2 class="text-xl text-gray-500 py-2" id="partOfSpeechHeader"></h2>
<p class="text-md" id="partOfSpeechPara"></p>
</div>
<div class="hidden" id="meaningDiv">
<h2 class="text-4xl py-3 px-3 text-green-500" id="meaningHeader"></h2>
</div>
<div id="audio" class="hidden"></div>
</div>
</div>
<script src="./index.js"></script>

这个前端看起来像这样

使用 JavaScript 添加功能

在通过 API 获取数据并显示之前,您需要使用它们的 id 访问 HTML 元素。您可以使用 JavaScript 方法getElementById()访问 ID。

 const word = document.getElementById("word");
const search = document.getElementById("search");
const display = document.getElementById("display");
const partOfSpeechDiv = document.getElementById("partOfSpeechDiv");
const partOfSpeechHeader = document.getElementById("partOfSpeechHeader");
const partOfSpeechPara = document.getElementById("partOfSpeechPara");
const meaningDiv = document.getElementById("meaningDiv");
const audioDiv = document.getElementById("audio");
const meaningHeader = document.getElementById("meaningHeader");

添加事件监听器

HTML 页面中的 input 元素有一个名为word的 ID。访问 input 元素后,您可以使用.value属性检索 input 元素中文本的值。

搜索按钮的 id 名为search 。您必须添加一个单击事件侦听器来触发事件并进行函数调用以通过 API 获取数据。

异步和等待

从 2017 年开始,JavaScript 引入了asyncawait的概念来执行异步请求。您可以使用异步等待代替。然后.catch解析并拒绝承诺。

相关:同步与异步编程:它们有何不同?

 search.addEventListener("click", async () => {
try {
let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word.value.toLowerCase()}`;
const res = await fetch(url);
const data = await res.json();
displayData(data);
} catch (error) {
console.log(error);
}
});

要使用async-await处理 promise,您需要在函数定义之前添加async关键字。每当您发出请求或调用函数时,都必须在其前面添加await关键字。

await关键字暂停函数的进一步执行,直到前一个请求没有完成。

您需要在try-catch块中执行整个async-await承诺操作。如果 promise 无法获取数据,那么它会在catch块中显示错误。在将单词传递给 API 之前,它应该采用小写格式以获得准确的结果。您可以使用.lowercase()字符串方法来转换单词。

fetch 方法应从 API 检索数据。您必须添加await关键字,以便函数在 fetch 方法检索数据时暂停。

检索数据后,您需要使用响应中的.json()方法将其转换为JSON格式。

在网页上显示数据

检索数据并将其转换为JSON格式后,您必须将其显示在网页上。您需要调用displayData()方法并将数据传递给它。

API响应的结构如下:

API 返回响应中单词的词性、多重定义和语音。

您可以使用以下方法获取给定单词的所有定义:

 const meanings = data[0].meanings[0].definitions;

变量含义是一个数组,其中包含给定单词的所有定义。

要获取给定单词的词性:

 const partOfSpeech = data[0].meanings[0].partOfSpeech;

您可以使用.innerHTML属性添加单词的词性。在 HTML 代码中,词性 div 默认具有 display none属性,但在 JavaScript 代码中,获取数据后,您需要将 display 属性设置为block

显示定义

您必须创建一个名为meaningList的变量。将所有定义附加到此变量后,您需要为其分配.innerHTML属性以将其显示在网页上。

相关: HTML Essentials 备忘单:标签、属性等

循环遍历含义数组并跟踪单个定义及其存在的索引。将单个定义和索引附加到 HTML 段落元素内的meaningList变量。

一旦你退出循环,你必须将它传递给.innerHTML属性的meaningDiv

在网页上显示音频元素

API 收到的响应包含帮助用户理解单词发音的语音。要在网页上添加此声音,您需要创建一个音频元素并在该元素的src属性中传递语音。最后,您需要使用.innerHTML属性将音频元素放在audioDiv 中

 const displayData = (data) => {
console.log(data);
const partOfSpeech = data[0].meanings[0].partOfSpeech;
const meanings = data[0].meanings[0].definitions;
partOfSpeechDiv.className =
"bg-gray-100 px-2 py-3 flex flex-col w-1/4 justify-center items-center border-2 border-green-500 rounded block";
partOfSpeechHeader.innerHTML = "Part of Speech";
partOfSpeechPara.innerHTML = partOfSpeech;
let meaningList = ``;
meanings.forEach((meaning, ind) => {
meaningList += `<p class='my-3 px-4 py-1 text-md'>${ind + 1}) ${
meaning.definition
} </p>`;
});
meaningDiv.className =
"text-center w-1/4 bg-gray-100 my-6 border-2 border-green-500 rounded block";
meaningHeader.innerText = "Meanings";
meaningDiv.innerHTML = meaningList;
let aud = `<audio src="${data[0].phonetics[0].audio}" controls>`;
audioDiv.className = "block";
audioDiv.innerHTML = aud;
};

将另一个项目添加到您的列表中

现在您已经学会了使用 JavaScript 构建字典应用程序,是时候自己构建一些令人兴奋的项目了。构建项目不仅会提高您的基础知识,还会为您的简历添加项目。

正在寻找有关 JavaScript 和 DOM 操作概念的更多实践?这是您可以建立以增强技能的另一个项目。