تعلم كيفية إنشاء تطبيق قاموس بسيط باستخدام JavaScript

تعد JavaScript واحدة من أكثر لغات البرمجة شيوعًا بين مطوري الويب. أثناء تعلم JavaScript ، يبدأ الجميع بالأساسيات وإنشاء تطبيقات بسيطة باستخدام معالجة DOM.

في هذه المقالة ، ستتعلم كيف يمكنك إنشاء قاموس باستخدام معالجة JavaScript و DOM. تتوقع هذه المقالة أن تعرف أساسيات JavaScript قبل القراءة.

إلقاء نظرة على API

API لتقف على واجهة برمجة التطبيقات . تعمل واجهات برمجة التطبيقات على تبسيط تطوير البرامج والابتكار من خلال تمكين التطبيقات من تبادل البيانات والوظائف بسهولة وأمان.

هذا المشروع يستخدم Dictionaryapi.dev API. هذه واجهة برمجة تطبيقات مجانية توفر العديد من التعريفات والصوتيات والمصطلحات النحوية الأخرى المتعلقة بالكلمات التي تبحث عنها.

الارتباط إلى API كما يلي:

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

تخطيط الواجهة الأمامية للمشروع

تم إنشاء تخطيط الواجهة الأمامية لهذا المشروع باستخدام HTML و TailwindCSS . يمكنك استيراد TailwindCSS في ملف HTML الخاص بك باستخدام CDN الموضح أدناه.

تحتوي صفحة HTML على إدخال وزر حيث يمكن للمستخدم إدخال الكلمة المراد البحث عنها. هناك ثلاث عناصر div أخرى لعرض جزء الكلام وتعريفات متعددة وصوت يساعدك على نطق الكلمة بشكل صحيح. بشكل افتراضي ، هذه الثلاثة divs لها خاصية عرض لا شيء. عندما يتم جلب البيانات من API ، سيتم تعيين خاصية عرض divs هذه على الحظر.

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 وعرضها ، تحتاج إلى الوصول إلى عناصر HTML باستخدام معرفاتهم. يمكنك الوصول إلى المعرفات باستخدام طريقة JavaScript getElementById () .

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 له معرف باسم الكلمة . بعد الحصول على الوصول إلى عنصر الإدخال، يمكنك استرداد قيمة النص في عنصر المدخلات باستخدام .value السمة.

زر البحث له المعرف المسمى البحث . يجب عليك إضافة مستمع حدث النقر لتشغيل الحدث وإجراء استدعاء وظيفي لجلب البيانات من خلال API.

عدم التزامن وانتظار

منذ عام 2017، وقد أدخلت جافا سكريبت مفهوم المتزامن و ننتظر لتنفيذ طلبات غير متزامن. يمكنك استخدام انتظار غير متزامن بدلاً من . ثم و . التقاط لحل الوعود ورفضها.

الموضوعات ذات الصلة: البرمجة المتزامنة مقابل البرمجة غير المتزامنة: ما مدى اختلافهما؟

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); } });

للعمل مع الوعود باستخدام انتظار غير متزامن ، تحتاج إلى إضافة الكلمة الأساسية غير المتزامنة قبل تعريف الوظيفة. وكلما قمت بإجراء طلب أو استدعاء وظيفة ، يجب عليك إضافة الكلمة الأساسية انتظار قبلها.

في انتظار الكلمة مؤقتا تنفيذ مزيد من وظيفة حتى لا يحصل الانتهاء من الطلب السابق.

تحتاج إلى تنفيذ إجراء الوعد غير المتزامن بالكامل في كتلة try-catch . إذا كان الوعد غير قادر على جلب البيانات ، فسوف يعرض الخطأ في كتلة catch . قبل تمرير الكلمة إلى API ، يجب أن تكون بتنسيق الأحرف الصغيرة للحصول على نتائج دقيقة. يمكنك استخدام أسلوب السلسلة .lowercase () لتحويل الكلمة.

يجب أن تقوم طريقة الجلب باسترداد البيانات من واجهة برمجة التطبيقات. يجب عليك إضافة الكلمة الأساسية في انتظار بحيث تتوقف الوظيفة مؤقتًا في تلك اللحظة أثناء قيام طريقة الجلب باسترداد البيانات.

بعد استرجاع البيانات ، تحتاج إلى تحويلها بتنسيق JSON باستخدام طريقة .json () في الاستجابة.

عرض البيانات على صفحة الويب

بعد استرداد البيانات وتحويلها إلى تنسيق JSON ، يجب عليك عرضها على صفحة الويب. تحتاج إلى استدعاء طريقة displayData () وتمرير البيانات إليها.

هيكل استجابة API كما يلي:

تقوم واجهة برمجة التطبيقات بإرجاع جزء الكلام والتعريفات المتعددة والصوتيات للكلمات في الاستجابة.

يمكنك الحصول على جميع التعاريف الخاصة بكلمة معينة باستخدام:

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

معاني المتغيرات عبارة عن مصفوفة تحتوي على جميع التعاريف الخاصة بكلمة معينة.

للحصول على جزء الكلام من كلمة معينة:

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

يمكنك إضافة جزء الكلام للكلمة باستخدام سمة .innerHTML . في كود HTML ، جزء الكلام div له خاصية العرض لا شيء افتراضيًا ولكن في كود JavaScript ، بعد جلب البيانات ، تحتاج إلى تعيين خاصية العرض للحظر .

عرض التعاريف

يجب عليك إنشاء متغير يسمى قائمة المعنى . بعد إلحاق جميع التعريفات بهذا المتغير ، تحتاج إلى تخصيص السمة .innerHTML لعرضه على صفحة الويب.

الموضوعات ذات الصلة: ورقة الغش في أساسيات HTML: العلامات والسمات والمزيد

قم بالتكرار خلال مصفوفة المعاني وتتبع تعريفًا واحدًا والفهرس الذي يوجد به. قم بإلحاق التعريف الفردي والفهرس بمتغير قائمة المعنى داخل عنصر الفقرة في HTML.

مرة كنت خارجا من الحلقة، لديك لتمريرها إلى .innerHTML سمة من meaningDiv .

اعرض عنصر الصوت على صفحة الويب

تحتوي الاستجابة التي تتلقاها API على صوتيات تساعد المستخدمين على فهم نطق الكلمة. لإضافة هذا الصوت إلى صفحة الويب ، تحتاج إلى إنشاء عنصر صوت وتمرير الصوتيات في السمة src لهذا العنصر. أخيرًا ، تحتاج إلى وضع عنصر الصوت في audioDiv باستخدام السمة .innerHTML .

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
}

"؛
}) ؛
meaningDiv.className =
"text-center w-1/4 bg-grey-100 my-6 border-2 border-green-500 rounded block"؛
meaningHeader.innerText = "المعاني" ؛
meaningDiv.innerHTML = قائمة المعنى ؛
دعونا AUD = `

"؛
audioDiv.className = "block" ؛
audioDiv.innerHTML = aud ؛
} ؛

أضف مشروعًا آخر إلى قائمتك

الآن بعد أن تعلمت إنشاء تطبيق قاموس باستخدام JavaScript ، فقد حان الوقت لإنشاء بعض المشاريع المثيرة بنفسك. لن تؤدي مشاريع البناء إلى تحسين الأساسيات فحسب ، بل ستضيف أيضًا مشاريع إلى سيرتك الذاتية.

هل تبحث عن مزيد من التدريب على مفاهيم معالجة JavaScript و DOM؟ إليك مشروع آخر يمكنك بناؤه لتقوية مهاراتك.