مقدمة

في هذا المختبر، ستدخل إلى عالم تطوير الويب من خلال عيون Alex، وهو مطور ويب ناشئ مكلف بإنشاء أداة تعقب مالية شخصية ديناميكية. إنشاء تطبيق سهل الاستخدام يسمح للمستخدمين بإدخال وتتبع نفقاتهم ودخلهم اليومي. الهدف واضح - تطوير واجهة سهلة الاستخدام وجذابة، مما يضمن للمستخدمين إمكانية إدارة شؤونهم المالية بسهولة دون أي متاعب. لا يهدف هذا المشروع إلى تبسيط إدارة التمويل الشخصي فحسب، بل يهدف أيضًا إلى تعريفك بالمفاهيم الأساسية للتعامل مع JavaScript وDOM.

سنعمل من خلال 5 مختبرات لاستكمال مشروع EconoMe.

نقاط المعرفة:

• التصريحات المتغيرة (let, const)
• أساسيات معالجة DOM (الحصول على العناصر، تعديل محتوى العنصر)
• الاستماع إلى الأحداث (addEventListener)

جافا سكريبت الأساسية

جافا سكريبت هي لغة بسيطة وموجهة نحو الكائنات وموجهة بالأحداث. يتم تنزيله من الخادم إلى العميل ويتم تنفيذه بواسطة المتصفح.

يمكن استخدامه مع HTML والويب، وعلى نطاق أوسع على الخوادم وأجهزة الكمبيوتر الشخصية وأجهزة الكمبيوتر المحمولة والأجهزة اللوحية والهواتف الذكية.

ومن خصائصه:

• يستخدم عادةً لكتابة البرامج النصية من جانب العميل.
• يستخدم بشكل أساسي لإضافة سلوك تفاعلي في صفحات HTML.
• إنها لغة مفسرة، يتم تنفيذها كما يتم تفسيرها.

إذن، كيف يمكننا تضمين JavaScript في HTML؟

طريقة التضمين مشابهة لـ CSS ويمكن إجراؤها بثلاث طرق:

• مباشرة في علامات HTML، خاصة لرمز JavaScript القصير.
• باستخدام علامة
• باستخدام ملف جافا سكريبت خارجي، اكتب كود البرنامج النصي جافا سكريبت في ملف بلاحقة .js وقم بتضمينه عن طريق تعيين سمة src للعلامة

على سبيل المثال، إذا ضغطنا على F12، يمكننا أن نرى أن العديد من ملفات JavaScript الخارجية مضمنة في هذه الصفحة، وبالضغط على Event Listers، يمكننا أن نلاحظ أن هناك العديد من أنواع الأحداث داخل صفحة.

الآن، دعونا نضيف العلامة

التالي، دعونا نتعلم كيفية تعريف المتغيرات في جافا سكريبت!

ما هي المتغيرات

يمكن اعتبار المتغيرات بمثابة حاويات لتخزين المعلومات. في البرمجة، نستخدم المتغيرات لتخزين قيم البيانات. JavaScript هي لغة مكتوبة ديناميكيًا، مما يعني أنك لا تحتاج إلى الإعلان عن نوع المتغير. سيتم تحديد النوع تلقائيا أثناء تنفيذ البرنامج.

إعلان المتغيرات

في JavaScript، يمكنك استخدام الكلمات الأساسية var، أو Let، أو const للإعلان عن المتغيرات:

• var: قبل ES6، كانت var هي الطريقة الأساسية للإعلان عن المتغيرات، ولها نطاق وظيفي.
• Let: تم تقديمه في ES6، يتيح لك الإعلان عن المتغيرات المحلية ذات النطاق الكتلي.
• const: تم تقديمه أيضًا في ES6، ويستخدم للإعلان عن ثابت لا يمكن تغييره بمجرد الإعلان عنه.

على سبيل المثال:

var name = "Alice"; // Using var to declare a variable
let age = 30; // Using let to declare a variable
const city = "London"; // Using const to declare a constant

أنواع المتغيرات

في JavaScript، هناك عدة أنواع مختلفة من البيانات:

• سلسلة: بيانات نصية، مثل "Hello, World!".
• الرقم: الأعداد الصحيحة أو أرقام الفاصلة العائمة، مثل 42 أو 3.14.
• المنطقية: صحيحة أو خاطئة.
• الكائن: يمكنه تخزين قيم متعددة أو هياكل بيانات معقدة.
• فارغة وغير محددة: أنواع خاصة تمثل "بلا قيمة" و"قيمة غير محددة" على التوالي.

استخدام المتغيرات

بمجرد الإعلان عن المتغيرات، يمكنك استخدامها في برنامجك:

console.log(name); // Outputs: Alice
console.log("Age: "   age); // Outputs: Age: 30
console.log(city   " is a beautiful city"); // Outputs: London is a beautiful city

تقوم الطريقة الثابتة console.log() بإخراج رسالة إلى وحدة التحكم.

التلاعب بـ DOM

DOM (Document Object Model) عبارة عن واجهة مشتركة بين الأنظمة الأساسية ومستقلة عن اللغة تتعامل مع مستندات HTML وXML كبنية شجرة ، حيث تكون كل عقدة جزءًا من المستند، مثل العناصر والسمات ومحتوى النص.

الوصول إلى عناصر DOM

لمعالجة محتوى صفحة الويب، تحتاج أولاً إلى الوصول إلى العناصر الموجودة في شجرة DOM. يمكنك استخدام طرق مختلفة للوصول إلى العناصر، مثل المعرف الخاص بها أو اسم الفئة أو اسم العلامة:

let elementById = document.getElementById("elementId"); // Access element by ID
let elementsByClassName = document.getElementsByClassName("className"); // Access a collection of elements by class name
let elementsByTagName = document.getElementsByTagName("tagName"); // Access a collection of elements by tag name

أضف الكود التالي إلى ملف ~/project/script.js الخاص بمشروع EconoMe:

const form = document.getElementById("record-form");
const recordsList = document.getElementById("records-list");
const totalIncomeEl = document.getElementById("total-income");
const totalExpenseEl = document.getElementById("total-expense");
const balanceEl = document.getElementById("balance");

تعديل محتوى العنصر

بمجرد أن يكون لديك مرجع لعنصر ما، يمكنك تعديل محتواه. يتم استخدام خصائص InternalHTML وtextContent بشكل شائع لهذا الغرض.

على سبيل المثال، لإدراج

محتوى HTML جديد

في عنصر div بمعرف = محتوى واستبدال "مرحبًا" بـ "محتوى نص جديد" في عنصر امتداد بمعرف = معلومات، يمكنك استخدام كود جافا سكريبت التالي:

إضافة وإزالة العناصر

يمكنك إضافة العناصر أو إزالتها ديناميكيًا على الصفحة باستخدام JavaScript.

على سبيل المثال:

// Create a new element
let newElement = document.createElement("div");
newElement.textContent = "Hello, world!";
document.body.appendChild(newElement); // Add the new element to the document body
document.body.removeChild(newElement); // Remove the element from the document body

• في مستند HTML، يقوم الأسلوب document.createElement() بإنشاء عنصر HTML.
• يضيف الأسلوب document.body.appendChild() العنصر الجديد إلى نهاية العنصر .
• يزيل الأسلوب document.body.removeChild() العنصر من العنصر .

التعامل مع الأحداث

يسمح لك مستمعو الأحداث بالرد على إجراءات المستخدم.

addEventListener("event", function () {});

مثل النقرات أو التمرير أو الضغط على المفاتيح:

elementById.addEventListener("click", function () {
  console.log("Element was clicked!");
});

بعد تعلم عمليات DOM الأساسية، يمكنك إضافة الكود التالي إلى ملف ~/project/script.js الخاص بمشروع EconoMe:

document.addEventListener("DOMContentLoaded", function () {
  const form = document.getElementById("record-form");
  const recordsList = document.getElementById("records-list");
  const totalIncomeEl = document.getElementById("total-income");
  const totalExpenseEl = document.getElementById("total-expense");
  const balanceEl = document.getElementById("balance");
  let draggedIndex = null; // Index of the dragged item
});

يتم تشغيل حدث DOMContentLoaded في JavaScript عندما يتم تحميل مستند HTML الأولي وتحليله بالكامل، دون انتظار انتهاء تحميل أوراق الأنماط والصور والإطارات الفرعية. وهذا يجعله حدثًا مهمًا لتشغيل كود JavaScript بمجرد أن يصبح DOM جاهزًا، مما يضمن تفاعل البرنامج النصي مع عناصر HTML التي تم تحليلها بالكامل.

لا يتطلب هذا الدرس التطبيقي معاينة التأثير في هذه المرحلة. وسنقوم بمراجعته بعد إكمال الكود في الخطوات التالية.

ملخص

في هذا المختبر، شرعت في رحلة بناء جزء أساسي ولكنه أساسي من أداة تعقب التمويل الشخصي مع Alex. لقد مهدت الطريق لتطبيق ويب ديناميكي من خلال إعداد بيئة المشروع واستخدام JavaScript لمعالجة DOM، وإظهار الحالات المالية الأولية. الفكرة الرئيسية هي فهم كيفية تفاعل JavaScript مع عناصر HTML لتغيير محتوى صفحة الويب ديناميكيًا، ووضع الأساس لمزيد من الميزات التفاعلية في الخطوات التالية.

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

---

؟ التدريب الآن: JavaScript الأساسية وDOM

---

هل تريد معرفة المزيد؟

• ؟ تعلم أحدث أشجار مهارات جافا سكريبت
• ؟ اقرأ المزيد عن دروس جافا سكريبت
• ؟ انضم إلى Discord أو قم بتغريدنا على @WeAreLabEx