學習使用 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。

HTML 頁面有一個輸入和一個按鈕，用戶可以在其中輸入要搜索的詞。還有三個 div 可以顯示詞性、多個定義和音頻，幫助您正確發音。默認情況下，這三個 div 的顯示屬性為 none。當從 API 獲取數據時，這些 div 的顯示屬性將設置為阻止。

Dictionary

<>
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
"
/>
<>
id="search"
class="bg-green-600 text-white text-xl px-4 py-2 rounded">
Search
 

這個前端看起來像這樣

使用 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 引入了async和await的概念來執行異步請求。您可以使用異步等待代替。然後和.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 += `

${ind + 1}) ${
meaning.definition
}

`;
});
含義Div.className =
"text-center w-1/4 bg-gray-100 my-6 border-2 border-green-500 圓角塊";
含義Header.innerText = "含義";
含義Div.innerHTML = 含義列表；
讓 aud = `

`;
audioDiv.className = "block";
audioDiv.innerHTML = aud;
};

將另一個項目添加到您的列表中

現在您已經學會了使用 JavaScript 構建字典應用程序，是時候自己構建一些令人興奮的項目了。構建項目不僅會提高您的基礎知識，還會為您的簡歷添加項目。

正在尋找有關 JavaScript 和 DOM 操作概念的更多實踐？這是您可以建立以增強技能的另一個項目。