NTF Hub / البرمجة / JavaScript

JavaScript

لغة البرمجة التي تبثّ الحياة في صفحات الويب. بينما تبني HTML الهيكل وتنسّق CSS الشكل، تتولّى JavaScript التفاعل: الاستجابة لنقرات المستخدم، تحديث المحتوى لحظيًا، التحقّق من النماذج، والتواصل مع الخوادم.

DOM الأحداث الدوال async/await

مقدمة تعريفية

ما هي JavaScript ولماذا تُسمّى لغة الويب.

JavaScript هي لغة برمجة تعمل داخل المتصفح مباشرة، وهي اللغة الوحيدة التي تفهمها جميع المتصفحات بشكل أصيل. بفضلها تتحوّل الصفحة من مستند ثابت إلى تطبيق تفاعلي يستجيب لكل حركة من المستخدم.

ومع بيئة التشغيل Node.js خرجت JavaScript من المتصفح لتعمل على الخوادم أيضًا، فأصبحت لغة واحدة تكتب بها الواجهة الأمامية والخلفية معًا — وهذا ما جعلها من أكثر اللغات انتشارًا وطلبًا في العالم.

لماذا يجب تعلّم JavaScript؟

أسباب تجعلها خطوتك التالية الطبيعية بعد HTML و CSS.

لغة الويب الرسمية: لا بديل لها داخل المتصفح لإضافة التفاعل والمنطق.
واجهة وخادم بلغة واحدة: عبر Node.js تكتب التطبيق كاملًا بلغة واحدة.
أطر عمل قوية: React وVue وAngular مبنية عليها، وهي مفتاح سوق العمل.
مجتمع ضخم: ملايين المكتبات الجاهزة عبر npm ومصادر تعلّم لا تنتهي.
تطبيقات متعدّدة: مواقع، تطبيقات جوال، ألعاب، وحتى أدوات سطح مكتب.

التفاعل مع عناصر الصفحة (DOM)

كيف تصل JavaScript إلى محتوى الصفحة وتغيّره.

DOM (نموذج كائن المستند) هو تمثيل شجري لكل عناصر الصفحة في الذاكرة. يحوّل المتصفح كود HTML إلى شجرة من «العُقد» (Nodes) يمكن لـ JavaScript قراءتها وتعديلها لحظيًا: تغيير نص، إضافة عنصر، حذف آخر، أو تبديل الأنماط.

نصل إلى العناصر عبر دوال مثل querySelector وgetElementById، ثم نعدّل خصائصها مثل textContent وstyle وclassList.

الأحداث (Events)

كيف تستجيب الصفحة لتفاعل المستخدم.

🖱️

click

يُطلق عند النقر على زرّ أو عنصر — أكثر الأحداث استخدامًا.

⌨️

input / keyup

يتابع ما يكتبه المستخدم في الحقول لحظة بلحظة.

📤

submit

يُطلق عند إرسال نموذج، ويُستخدم للتحقّق قبل الإرسال.

🖐️

mouseover

يستجيب لمرور المؤشّر فوق عنصر لإظهار تأثيرات تفاعلية.

📜

scroll

يتابع تمرير الصفحة لتفعيل حركات أو تحميل محتوى تدريجي.

⏳

load

يُطلق بعد اكتمال تحميل الصفحة أو الصور لبدء العمل بأمان.

المهارات الأساسية المطلوبة

المفاهيم التي تبني عليها كل مشروع لاحق.

المتغيرات والأنواع: let وconst والفرق بين النص والرقم والمصفوفة والكائن.
الدوال: التقليدية والسهمية (Arrow) وتمرير الوسائط وإرجاع القيم.
التحكّم بالتدفّق: الشروط if/else والحلقات for وforEach.
المصفوفات والكائنات: دوال map وfilter وreduce للتعامل مع البيانات.
الـ DOM والأحداث: الوصول للعناصر وربط المستمعين addEventListener.
غير المتزامن: Promises وasync/await وطلبات fetch من الخوادم.

خارطة طريق للمبتدئ

مسار متدرّج من الأساسيات إلى المشاريع التفاعلية.

الأساسيات

المتغيرات، الأنواع، العمليات الحسابية والمنطقية.

التحكّم والدوال

الشروط والحلقات وكتابة دوال قابلة لإعادة الاستخدام.

المصفوفات والكائنات

تنظيم البيانات ومعالجتها بدوال map وfilter.

الـ DOM والأحداث

تعديل الصفحة والاستجابة لتفاعل المستخدم.

غير المتزامن

جلب البيانات من واجهات API عبر fetch وasync/await.

مشروع تفاعلي

ابنِ تطبيق مهام (To‑Do) أو آلة حاسبة كمشروع تطبيقي.

أمثلة عملية

أكواد قصيرة توضّح أهم المفاهيم.

تغيير محتوى عنصر (DOM)

الوصول لعنصر وتعديل نصّه ولونه.

const title = document.querySelector("#title");
title.textContent = "أهلًا بك!";
title.style.color = "#ffd166";

ربط حدث نقر

تنفيذ دالة عند الضغط على زرّ.

const btn = document.querySelector("#go");
btn.addEventListener("click", () => {
  alert("تم النقر على الزر!");
});

التعامل مع مصفوفة

تصفية الأرقام الزوجية ومضاعفتها.

const nums = [1, 2, 3, 4, 5, 6];
const result = nums
  .filter(n => n % 2 === 0)
  .map(n => n * 2);
console.log(result); // [4, 8, 12]

جلب بيانات (async)

طلب بيانات من واجهة برمجية.

async function getUser() {
  const res = await fetch("/api/user");
  const data = await res.json();
  console.log(data);
}

جرّب بنفسك

مثال حيّ على الأحداث وتعديل الـ DOM داخل هذه الصفحة.

عدد النقرات: 0

أسئلة شائعة

أكثر ما يتساءل عنه المتعلّمون حول JavaScript.

هل أحتاج إتقان HTML و CSS أولًا؟

نعم، يُفضّل بشدّة. JavaScript تتفاعل مع عناصر HTML وتنسيقات CSS، لذا فهم الأساسيات يجعل تعلّمها أسهل وأوضح بكثير.

ما الفرق بين JavaScript و Java؟

رغم تشابه الاسم فهما لغتان مختلفتان تمامًا في الاستخدام والبنية. JavaScript لغة الويب، أما Java فلغة عامة تُستخدم غالبًا في تطبيقات الشركات وأندرويد.

ما المقصود بالبرمجة غير المتزامنة؟

هي أسلوب لتنفيذ مهام تستغرق وقتًا (كجلب بيانات من الإنترنت) دون تجميد الصفحة، باستخدام Promises وasync/await.

متى أبدأ بتعلّم إطار عمل مثل React؟

بعد إتقان أساسيات JavaScript الخالصة (الدوال، المصفوفات، الـ DOM، غير المتزامن). البناء على أساس متين يجعل تعلّم الأطر أسرع بكثير.

تابع رحلتك في البرمجة

انتقل إلى بقية المسارات التعليمية في قسم البرمجة.