أساسيات لغة JavaScript: دليلك العملي لإضافة التفاعلية لموقعك

تطوير الويب وتحسين محركات البحث

لغة JavaScript: إضافة الحركة والتفاعلية لموقعك

by محمد قتيبة شيخاني | سبتمبر 14, 2025 | 0 comments

في مقالاتنا السابقة، قمنا ببناء الهيكل العظمي باستخدام HTML، ثم ألبسناه الملابس والديكور باستخدام CSS.

مشروعنا الآن يبدو جيداً، لكنه ثابت وهادئ، أشبه بتمثال جميل. حان الوقت الآن لإضافة "الجهاز العصبي والعقل" لبث الحياة فيه.

هذا هو دور JavaScript (JS).

في هذا الدليل، سنتعلم أساسيات JavaScript، اللغة التي تحول صفحات الويب من مستندات ثابتة إلى تطبيقات تفاعلية.

سنأخذ مشروعنا الذي صممناه، وسنضيف إليه أول وظيفة ديناميكية لنرى كيف يتفاعل مع المستخدم.

ما هي لغة JavaScript؟ (لغة البرمجة للويب)

على عكس HTML و CSS، اللتين تعتبران لغات "تصريحية" (Declarative) تصف "ماذا" يجب أن يظهر على الشاشة، فإن JavaScript هي لغة برمجة حقيقية وكاملة.

هذا يعني أنها لغة "أمرية" (Imperative) تعطي تعليمات ومنطقاً للمتصفح، وتخبره "كيف" يتصرف ويتفاعل.

للتوضيح أكثر:

• HTML يخبر المتصفح: "هنا يوجد زر".
• CSS يخبر المتصفح: "اجعل هذا الزر أزرق اللون وبزوايا دائرية".
• JavaScript يخبر المتصفح: "عندما ينقر المستخدم على هذا الزر، قم بفعل شيء ما (مثل إظهار رسالة أو تغيير لون الصفحة)".

التنفيذ من جانب العميل (Client-Side)

الوظيفة الأساسية والتاريخية لـ JavaScript هي أنها تعمل مباشرة داخل متصفح المستخدم.

عندما تزور صفحة ويب، يقوم متصفحك بتنزيل ملفات HTML, CSS, و JavaScript، ثم يقوم "محرك جافاسكريبت" المدمج في المتصفح بتنفيذ الكود.

هذا التنفيذ من جانب العميل هو ما يسمح لنا بـ:

• التلاعب بالـ DOM: تغيير محتوى HTML وأنماط CSS بشكل فوري استجابة لأفعال المستخدم.
• التحقق من صحة النماذج (Form Validation): إعطاء المستخدم ملاحظات فورية (مثل "كلمة المرور قصيرة جداً") دون الحاجة لإرسال النموذج إلى الخادم.
• إنشاء رسوم متحركة وتفاعلات معقدة: مثل القوائم المنسدلة، معارض الصور، والخرائط التفاعلية.
• التطبيقات أحادية الصفحة (SPAs - Single Page Applications): إنشاء تجارب شبيهة بتطبيقات سطح المكتب (مثل Gmail أو خرائط جوجل) حيث يتم تحديث المحتوى ديناميكياً دون إعادة تحميل الصفحة بأكملها.

التطور إلى جانب الخادم (Server-Side)

في الماضي، كانت JavaScript لغة مخصصة للمتصفحات فقط. لكن هذا تغير بشكل جذري مع ظهور بيئة Node.js في عام 2009.

ما هو Node.js؟ هو بيئة تشغيل تسمح للمطورين باستخدام لغة JavaScript لكتابة برامج تعمل مباشرة على الخادم (Server).

ماذا يعني هذا؟ هذا يعني أن JavaScript أصبحت الآن قادرة على القيام بكل ما كانت تفعله لغات البرمجة من جانب الخادم التقليدية (مثل PHP أو Python).

يمكنها الآن التعامل مع قواعد البيانات، إنشاء واجهات برمجة التطبيقات (APIs)، وإدارة الملفات على الخادم.

هذا التطور جعل JavaScript لغة "لكامل الحزمة" (Full-Stack)، مما يسمح للمطورين باستخدام لغة واحدة لبناء كل من الواجهة الأمامية (Front-end) والخلفية (Back-end) لتطبيقات الويب.

نبذة تاريخية - كيف وُلدت لغة JavaScript؟

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

البداية السريعة في Netscape (1995)

في منتصف التسعينيات، كانت "حرب المتصفحات" الأولى مشتعلة بين Netscape Navigator و Microsoft Internet Explorer.

أرادت Netscape إضافة لغة برمجة بسيطة إلى متصفحها لجعل صفحات الويب تفاعلية. تم تكليف مبرمج يدعى برندان آيك (Brendan Eich) بإنشاء هذه اللغة.

المدهش في الأمر أنه قام بتطوير النسخة الأولى من JavaScript في 10 أيام فقط في مايو 1995.

كان اسمها في البداية "Mocha"، ثم تغير إلى "LiveScript"، وأخيراً استقر على "JavaScript" في محاولة تسويقية للاستفادة من شعبية لغة Java التي كانت مزدهرة في ذلك الوقت (على الرغم من عدم وجود علاقة تقنية حقيقية بينهما).

صورة للمبرمج الأمريكي بريندان إيتش، مبتكر لغة البرمجة JavaScript والمؤسس المشارك لمشروعي Mozilla وBrave.

الفوضى والتوحيد القياسي (1996 - 2009)

بعد أن أطلقت Netscape لغة JavaScript، قامت مايكروسوفت بهندستها عكسياً وأطلقت نسختها الخاصة المسماة "JScript" في Internet Explorer. هذا خلق فوضى عارمة، حيث كان على المطورين كتابة كود مختلف لكل متصفح.

لحل هذه المشكلة، تم تقديم JavaScript إلى هيئة المعايير الدولية ECMA International لتوحيدها. نتج عن ذلك معيار رسمي يسمى ECMAScript.

• ECMAScript: هو "المعيار" أو "الوصفة" التي تحدد كيف يجب أن تعمل اللغة.
• JavaScript: هي "التطبيق" الفعلي لهذه الوصفة في المتصفحات.

هذا التوحيد القياسي كان خطوة حاسمة، لكن تطوير اللغة ظل بطيئاً جداً لسنوات عديدة.

العصر الحديث: ثورة ES6 و Node.js (2009 وما بعدها)

شهدت JavaScript انفجاراً في شعبيتها وتطورها في العقد الأخير لسببين رئيسيين:

ظهور Node.js (2009): كما ذكرنا سابقاً، سمح Node.js للمطورين بتشغيل JavaScript على الخوادم، مما جعلها لغة "لكامل الحزمة" (Full-Stack) وفتح لها آفاقاً جديدة هائلة.

إصدار ES6 (ECMAScript 2015): كان هذا هو أكبر تحديث في تاريخ اللغة.

أضاف ميزات قوية وحديثة جعلت كتابة JavaScript أكثر سهولة وقوة، مثل let و const، الدوال السهمية (Arrow Functions)، والـ Classes.

منذ عام 2015، أصبحت اللغة تتلقى تحديثات سنوية منتظمة، مما يضمن تطورها المستمر.

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

كيفية إضافة JavaScript وتفاعلها مع الصفحة

الآن بعد أن عرفنا تاريخ JavaScript وقوتها كلغة برمجة، دعنا ننتقل إلى الجانب العملي: كيف نضيفها إلى مشروعنا، وكيف تبدأ بالتفاعل مع عناصر HTML و CSS التي بنيناها؟

الطريقة المثلى لإضافة JavaScript

كما هو الحال مع CSS، فإن أفضل ممارسة هي فصل الأكواد في ملفات خاصة بها.

1. إنشاء ملف خارجي: تقوم بكتابة كل أكواد JavaScript في ملف منفصل بامتداد .js (مثل script.js).
2. الربط بملف HTML: تقوم بربط هذا الملف باستخدام وسم <script>. لكن على عكس وسم <link> الخاص بـ CSS، فإن أفضل مكان لوضع وسم <script> هو قبل إغلاق وسم </body> مباشرة.

مثال:

<body>
    <script src="script.js"></script>
</body>

لماذا في النهاية؟

فكر في المتصفح كبنّاء يقوم ببناء منزل (صفحتك) من مخطط هندسي (ملف HTML). يقرأ البنّاء المخطط من الأعلى إلى الأسفل.

• عناصر HTML هي الجدران والأبواب والنوافذ.
• JavaScript هو الكهربائي الذي يأتي لتركيب مفاتيح الإضاءة التفاعلية.

إذا وضعت وسم <script> في قسم <head>، فهذا يشبه إرسال الكهربائي إلى موقع البناء قبل بناء الجدران.

سيحاول الكهربائي (السكريبت الخاص بك) العثور على جدار لتركيب مفتاح (document.querySelector('button'))، ولن يجده لأنه لم يُبنَ بعد، وسيفشل البرنامج مع ظهور خطأ.

بوضع السكريبت في نهاية <body>، فإنك تضمن أن المتصفح قد انتهى من بناء هيكل HTML بالكامل (الـ DOM) قبل وصول كهربائي JavaScript، مما يضمن أن جميع العناصر في مكانها وجاهزة للتفاعل معها.

كيف يتفاعل JavaScript مع HTML و CSS؟

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

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

هذه الشجرة الحية والتفاعلية هي ما يُعرف بـ نموذج كائن المستند (Document Object Model - DOM).

الـ DOM هو "شجرة عائلة" حية وتفاعلية لصفحتك. JavaScript لديه القدرة على:

• العثور على أي فرد في العائلة (العناصر): باستخدام أوامر مثل document.querySelector().
• تغيير خصائصهم (السمات والمحتوى): مثل تغيير نص زر أو مصدر صورة.
• تغيير مظهرهم (الأنماط): عبر إضافة أو إزالة فئات CSS.
• إضافة أفراد جدد للعائلة (إنشاء عناصر جديدة).
• الاستماع لما يفعلونه (الأحداث - Events): مثل انتظار نقرة فأرة من المستخدم.

هذا التفاعل مع الـ DOM هو ما يجعل JavaScript قوياً للغاية. هو يسمح لنا بتحويل مستند ثابت إلى تطبيق ديناميكي يستجيب لأفعال المستخدم في الوقت الفعلي.

أساسيات لغة JavaScript: من المتغيرات إلى التفاعل

الآن بعد أن قمنا بربط ملف script.js بصفحتنا بنجاح، حان الوقت لنتعلم المفردات الأساسية لهذه اللغة القوية ونبدأ في كتابة الكود الفعلي.

قبل أن نغوص في التفاصيل، من المهم أن تعرف أن كل موضوع من المواضيع التالية هو عالم بحد ذاته ويستحق سلسلة مقالات خاصة به.

هدفي في هذا الدليل هو أخذ نظرة أولى ومبسطة على هذه المفاهيم لنمنحك الأدوات الكافية لبناء أول تفاعل لك.

لا تقلق إذا لم تفهم كل شيء بنسبة 100%، فمع مرور الوقت والممارسة، سنتعمق في كل مفهوم على حدة في مقالات متقدمة.

سنمر بثلاث خطوات منطقية: أولاً، سنتعلم كيف "نتذكر" المعلومات، ثم كيف "نتفاعل" مع صفحتنا، وأخيراً كيف "ننظم" أوامرنا.

1. تخزين المعلومات: المتغيرات وأنواع البيانات

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

فكر في المتغيرات كـ"صناديق بأسماء" يمكنك وضع معلومات داخلها لاستخدامها لاحقًا. في JavaScript الحديثة، نستخدم طريقتين أساسيتين لإنشاء هذه الصناديق:

const (للثوابت):

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

// نعلن عن ثابت اسمه blogName ونخزن فيه نصًا
const blogName = "مدونتي التقنية";

let (للمتغيرات):

استخدمها فقط في الحالات التي تحتاج فيها إلى تغيير القيمة المخزنة لاحقًا، مثل عداد الزوار أو اسم المستخدم الحالي.

// نعلن عن متغير اسمه visitorCount وقيمته الأولية 10
let visitorCount = 10;
visitorCount = 11; // يمكننا تغيير قيمته لاحقًا

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

وماذا نضع داخل هذه الصناديق؟ يمكننا وضع أنواع مختلفة من البيانات، أهمها للمبتدئين:

• String: أي نص، ويوضع دائمًا بين علامتي اقتباس (مثال: "مرحباً بالعالم").
• Number: أي رقم، سواء كان صحيحًا أو عشريًا (مثال: 2025 أو 19.99).
• Boolean: قيمة منطقية بسيطة، إما true (صحيح) أو false (خطأ). فكر فيها كمفتاح إضاءة، إما يعمل أو لا يعمل. هذه القيم حاسمة لاتخاذ القرارات في الكود.

الآن بعد أن أصبح لدينا 'صناديق' لتخزين بياناتنا، نحتاج إلى 'أدوات' للتعامل مع هذه البيانات واتخاذ القرارات بناءً عليها. هنا يأتي دور لبنات البناء المنطقية للغة.

2. لبنات البناء المنطقية: قواعد لغة JavaScript

العوامل (Operators): كلمات الفعل

العوامل هي الرموز التي تقوم بإجراءات على بياناتك. هي "كلمات الفعل" في JavaScript.

• العوامل الحسابية: تستخدم للرياضيات (+, -, * للضرب, / للقسمة).
• عوامل المقارنة: تستخدم لمقارنة قيمتين، ونتيجتها دائمًا قيمة منطقية true أو false. أهمها هو عامل المساواة الصارم ===، الذي يتحقق من تطابق القيمة والنوع.

let userAge = 25;
console.log(userAge > 18); // الناتج: true

الجمل الشرطية (if...else): صانع القرار

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

let userIsLoggedIn = true;

if (userIsLoggedIn === true) {
  console.log("مرحبًا بعودتك أيها المستخدم!");
} else {
  console.log("يرجى تسجيل الدخول للمتابعة.");
}

المصفوفات والكائنات (Arrays & Objects): حاويات التخزين

نادرًا ما تتعامل مع قطعة بيانات واحدة. المصفوفات والكائنات هي طريقتك لتنظيم مجموعات البيانات.

المصفوفة []

قائمة مرتبة من العناصر. مثالية لتخزين مجموعة أشياء متشابهة (مثل قائمة مقالات).

const socialMediaLinks = ["Twitter", "LinkedIn", "GitHub"];
console.log(socialMediaLinks[0]); // الناتج: "Twitter" (الفهرسة تبدأ من 0)

الكائن {}

مجموعة بيانات مترابطة على شكل أزواج "مفتاح: قيمة". مثالي لوصف كيان واحد (مثل مستخدم).

const user = {
  firstName: "محمد",
  isDeveloper: true
};
console.log(user.firstName); // الناتج: "محمد"

الحلقات التكرارية (for): المُكرِّر الآلي

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

const fruits = ["تفاح", "موز", "كرز"];

for (let i = 0; i < fruits.length; i++) {
  console.log("أنا أحب " + fruits[i]);
}

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

3. التفاعل مع الصفحة: الوصول للعناصر والاستماع للأحداث

الآن لدينا صناديق معلومات، لكنها لا تزال معزولة داخل ملف script.js. كيف نجعلها تتفاعل مع الهيكل الذي بنيناه بـ HTML؟ يتم ذلك عبر خطوتين:

أولاً، نحتاج إلى إيجاد العنصر الذي نريد التفاعل معه. JavaScript يوفر لنا جسرًا للتواصل مع الـ DOM يسمى document.

من خلاله، يمكننا استخدام الأمر querySelector() للعثور على أي عنصر نريده، تمامًا كما نستهدفه في CSS:

// ابحث في المستند عن أول عنصر لديه id="theme-button"
// ثم قم بتخزين هذا العنصر في ثابت اسمه themeButton
const themeButton = document.querySelector('#theme-button');

ثانيًا، بعد أن وجدنا العنصر وخزناه في "صندوق"، نطلب منه الاستماع لفعل معين من المستخدم. هذه الأفعال تسمى الأحداث (Events)، وأشهرها هو حدث النقر 'click'. نستخدم addEventListener() لنقول للزر: "كن في حالة تأهب، وعندما ينقر عليك المستخدم، قم بتنفيذ مجموعة من الأوامر".

4. تنظيم الأوامر: الدوال (Functions)

عندما يقع الحدث، نحتاج إلى إعطاء المتصفح قائمة من التعليمات لتنفيذها. أفضل طريقة لتجميع وتنظيم هذه التعليمات هي عبر الدوال (Functions).

فكر في الدالة كـ"وصفة طبخ": هي مجموعة من الخطوات المحددة التي نعطيها اسمًا، ويمكننا تنفيذها (أو "طهيها") متى احتجنا إليها. هذا يجعل الكود منظمًا، قابلًا للقراءة، وقابلًا لإعادة الاستخدام.

// نُعرّف دالة (وصفة) اسمها "greetUser"
function greetUser() {
  // التعليمات داخل الوصفة
  console.log("أهلاً بك في مدونتي!");
}

// يمكننا الآن استدعاء (طهي) الوصفة في أي وقت
greetUser();

بدمج هذه المفاهيم الثلاثة معًا، تصبح لدينا القوة الكاملة: نستخدم querySelector لنجد زرًا ونخزنه في متغير، ثم نستخدم addEventListener لنستمع لنقرة عليه، وعندما تحدث النقرة، نستدعي دالة تحتوي على التعليمات التي نريد تنفيذها.

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

لمحة عن المستقبل: أطر العمل والمكتبات (Frameworks & Libraries)

الآن بعد أن تعلمنا كيفية التفاعل مع الصفحة باستخدام JavaScript الأساسية (والتي تُعرف في المجال باسم "Vanilla JS")، من المهم أن تعرف أنه في المشاريع الكبيرة والاحترافية، نادرًا ما يقوم المطورون ببناء كل شيء من الصفر.

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

فكر في الأمر كالتالي: ما تعلمناه حتى الآن هو كيفية استخدام "الأدوات اليدوية" الأساسية (مفك، مطرقة). أما أطر العمل والمكتبات، فهي بمثابة "مجموعة أدوات كهربائية متخصصة" أو "أجزاء منزل جاهزة الصنع".

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

ما الفرق بين المكتبة وإطار العمل؟

المكتبة (Library)

هي مجموعة من الأكواد الجاهزة التي أنت تستدعيها عند الحاجة.

أشهر مثال هو jQuery (على الرغم من تراجع شعبيتها) أو React.

أنت من يتحكم في تدفق التطبيق، وتستدعي وظائف المكتبة لمساعدتك في مهام معينة (مثل التلاعب بالـ DOM).

إطار العمل (Framework)

هو هيكل متكامل هو الذي يستدعي كودك. هو يفرض عليك طريقة معينة لتنظيم مشروعك.

أشهر الأمثلة هي Angular و Vue.js.

أنت تملأ الفراغات التي يحددها إطار العمل، وهو يتولى الباقي.

أشهر الأدوات في السوق

React: هي أشهر مكتبة في العالم (تم تطويرها بواسطة فيسبوك). تقوم على فكرة بناء واجهات المستخدم من "مكونات" (Components) مستقلة وقابلة لإعادة الاستخدام (مثل مكون زر، مكون قائمة تنقل).

Angular: إطار عمل شامل وقوي (تم تطويره بواسطة جوجل). يوفر حلاً كاملاً لبناء تطبيقات ضخمة.

Vue.js: إطار عمل يشتهر بكونه سهل التعلم ومرنًا، ويجمع بين أفضل ما في React و Angular.

نصيحتي لك: هذه الأدوات هي الخطوة التالية والمتقدمة في رحلتك. من الضروري جدًا أن تتقن أولاً أساسيات JavaScript التي نناقشها في هذه المقالة.

فهم كيفية عمل "Vanilla JS" والتلاعب بالـ DOM يدويًا هو الأساس الذي سيمكنك لاحقًا من فهم واستيعاب قوة هذه الأدوات الاحترافية بشكل صحيح.

مشروعنا العملي – بث الحياة في الصفحة بزر الوضع الليلي

لقد انتهينا من بناء الهيكل العظمي للمدونة بـ HTML، ثم ألبسناه الملابس الأنيقة بـ CSS. الآن حان الوقت لنضيف له "الجهاز العصبي" لجعله يستجيب ويتفاعل مع المستخدم، تماماً كجهاز تحكم عن بعد لمصباح.

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

الخطوة 1: إضافة الزر إلى ملف HTML

أولاً، نحتاج إلى زر فعلي في صفحتنا ليضغط عليه المستخدم.

1. افتح ملف index.html.
2. داخل وسم <nav>، مباشرة بعد قائمة <ul>، أضف السطر التالي:

<button id="theme-toggle-button">تفعيل الوضع الليلي</button>

لقد أعطينا هذا الزر id فريدًا (theme-toggle-button) حتى نتمكن من العثور عليه بسهولة باستخدام JavaScript.

إعداد الديكور: قواعد الوضع الليلي بـ CSS

تذكر أن JavaScript لا يقوم بتغيير الألوان بنفسه؛ بل هو مجرد مدير يخبر المتصفح بأن "يُلبس" صفحتنا زي الوضع الليلي الذي أعددناه مسبقاً. هذا الزي هو عبارة عن مجموعة من القواعد في ملف style.css.

أضف هذه القواعد في نهاية ملف style.css الخاص بك:

/* قواعد الوضع الليلي */

/* عندما يتم إضافة فئة 'dark-mode' على وسم body، سيتم تفعيل هذه القواعد */
body.dark-mode {
  background-color: #121212;
  color: #f5f5f5;
}

/* تعديل ألوان الحاوية الرئيسية في الوضع الليلي */
.dark-mode .container {
  background-color: #1e1e1e;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* تعديل ألوان العناصر الأخرى في الوضع الليلي */
.dark-mode header h1 {
  color: #bb86fc;
}

.dark-mode header nav ul {
  border-bottom: 2px solid #333;
}

.dark-mode header nav ul li a {
  color: #e0e0e0;
}

.dark-mode footer {
  border-top: 2px solid #333;
}

هذه القواعد هي "خريطة الألوان" التي ستستخدمها صفحتنا بمجرد أن يضيف JavaScript فئة dark-mode إلى وسم <body>.

الخطوة 3: إنشاء وربط ملف JavaScript

1. في نفس مجلد المشروع، أنشئ ملفًا جديدًا وسمّه script.js.
2. افتح ملف index.html مرة أخرى، وتذكر قاعدتنا الذهبية: قبل وسم الإغلاق </body> مباشرةً، أضف السطر التالي لربط ملف السكريبت:

...
<footer>...</footer>

<script src="script.js"></script>
</body>
</html>

بهذا، نضمن أن هيكل HTML بالكامل قد تم بناؤه قبل أن يبدأ JavaScript في محاولة التفاعل معه.

الخطوة 4: كتابة الكود السحري في ملف JavaScript

الآن، افتح ملف script.js الفارغ والصق الكود التالي. لقد قمت بإضافة تعليقات تفصيلية لشرح وظيفة كل سطر:

// --- الخطوة 1: إيجاد العناصر وتخزينها في متغيرات ---

// ابحث في المستند عن الزر الذي يحمل id="theme-toggle-button"
const themeToggleButton = document.querySelector('#theme-toggle-button');

// ابحث عن وسم  لتطبيق التغييرات عليه
const body = document.querySelector('body');


// --- الخطوة 2: تعريف "الوصفة" أو الدالة التي ستقوم بالعمل ---

// نُعرّف دالة اسمها "toggleTheme"
function toggleTheme() {
  // هذا السطر هو قلب المنطق:
  // .classList.toggle() تقوم بإضافة الفئة إذا لم تكن موجودة،
  // وتقوم بإزالتها إذا كانت موجودة.
  body.classList.toggle('dark-mode');

  // الآن، دعنا نتحقق من الحالة الحالية لتغيير نص الزر
  if (body.classList.contains('dark-mode')) {
    // إذا كانت الصفحة في الوضع الليلي، غيّر نص الزر
    themeToggleButton.textContent = "تفعيل الوضع النهاري";
  } else {
    // وإلا (إذا كانت في الوضع النهاري)، أعد النص الأصلي
    themeToggleButton.textContent = "تفعيل الوضع الليلي";
  }
}


// --- الخطوة 3: ربط الحدث بالدالة ---

// نخبر الزر: "استمع لحدث النقر 'click'"
// "وعندما يحدث النقر، قم بتنفيذ (استدعاء) دالة toggleTheme"
themeToggleButton.addEventListener('click', toggleTheme);

الخطوة 5: شاهد النتيجة

احفظ جميع ملفاتك. الآن، عندما تنقر على زر "تفعيل الوضع الليلي"، سيقوم JavaScript بتفعيل قواعد CSS التي أضفناها، وستتحول الصفحة بأكملها إلى اللون الداكن!

بفعل هذا، تكون قد أنشأت أول تفاعل حقيقي في صفحتك. لقد ربطت بين "العقل" (المنطق البرمجي) و"الهيكل" (العناصر) و"الزي" (التصميم).

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

لقد بثت الحياة في مشروعك

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

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

الآن بعد أن أصبح لمشروعنا قيمة، كيف نحميه؟ كيف نتتبع تطوره؟ وكيف نضمن أننا نستطيع تجربة ميزات جديدة بأمان دون الخوف من إفساد ما قمنا ببنائه بشق الأنفس؟

الجواب يكمن في الانتقال من التفكير ككاتب كود إلى التفكير كمهندس برمجيات.

قبل أن نضيف أي ميزات جديدة، سنتعلم في مقالنا القادم كيفية وضع مشروعنا داخل شبكة أمان احترافية.

سنتعرف على الأداة الأهم في حزام أدوات أي مطور: نظام التحكم بالإصدارات Git، وشريكه السحابي GitHub.

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

شارك هذا الموضوع:

• المشاركة على X (فتح في نافذة جديدة) X
• شارك على فيس بوك (فتح في نافذة جديدة) فيس بوك
• المشاركة على Telegram (فتح في نافذة جديدة) Telegram
• المشاركة على WhatsApp (فتح في نافذة جديدة) WhatsApp

معجب بهذه:

إعجاب جاري التحميل…

محتوى تقني عربي | أساسيات المطور المحترف | بناء موقع ويب | تطوير الويب | تعلم البرمجة

محمد قتيبة شيخاني

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

• Follow
• Follow

مقالات قد تهمك

 

UI/UX: فن وعلم تصميم تجربة المستخدم

أكتوبر 23, 2025

مؤشرات أداء الويب الأساسية: قياس تجربة المستخدم التي يحبها جوجل

أكتوبر 21, 2025

سيمراش (Semrush): مركز قيادتك الشامل للتسويق الرقمي

أكتوبر 13, 2025

« Older Entries

شاركني رأيك أو تجربتك

اترك ردإلغاء الرد