تعلم JavaScript للمبتدئين: المفاهيم الأساسية

إذا كنت تريد بناء مواقع تفاعلية، فلا مفر من تعلم جافا سكريبت (JavaScript)، فهي اللغة التي تفهمها كل المتصفحات وتجعل الصفحة تستجيب لما يفعله المستخدم. والخبر الجيد أنك تستطيع البدء الآن دون تثبيت أي شيء.

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

ما هي JavaScript ولماذا تتعلمها؟

JavaScript لغة برمجة تعمل داخل المتصفح لتجعل صفحات الويب تفاعلية، مثل فتح القوائم والتحقق من النماذج وتحديث المحتوى دون إعادة تحميل الصفحة. وتعمل أيضًا خارج المتصفح عبر بيئة Node.js لبناء الخوادم والأدوات.

أسباب تجعلها خيارًا قويًا:

• لا بديل لها في المتصفح: كل موقع تفاعلي حديث يستخدمها بشكل أو بآخر.
• لغة واحدة للواجهة والخادم: مع Node.js تبني الموقع كاملًا بلغة واحدة.
• نتيجة فورية: تكتب سطرًا وترى أثره في الصفحة مباشرة، وهذا يسرع التعلم.
• أساس الأطر الحديثة: React وVue وغيرها مبنية عليها، وكذلك أدوات بناء التطبيقات مثل React Native.

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

كيف تشغّل أول كود JavaScript؟

أسرع طريقة هي لوحة Console في متصفحك: افتح أي صفحة، واضغط F12 أو اختر «فحص» من القائمة، ثم انتقل إلى تبويب Console واكتب console.log("Hello"); واضغط Enter.

للمشاريع الحقيقية، تكتب الكود في ملف منفصل وتربطه بصفحة HTML بالسطر <script src="app.js" defer></script>. الخاصية defer تجعل المتصفح يحمّل الملف دون أن يوقف عرض الصفحة، ثم ينفذه بعد اكتمال قراءة الـ HTML.

تعلّم قراءة رسائل الخطأ من اليوم الأول

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

• ReferenceError: تستخدم اسمًا غير معرّف، وغالبًا بسبب خطأ إملائي في اسم متغير أو دالة.
• TypeError: تتعامل مع قيمة بطريقة لا تناسب نوعها، مثل قراءة خاصية من قيمة undefined، وكثيرًا ما يحدث ذلك عندما لا يجد querySelector العنصر المطلوب فيعيد null.
• SyntaxError: خطأ في كتابة الكود نفسه، مثل قوس ناقص أو علامة تنصيص غير مغلقة.

وعندما تحتاج إلى تشغيل JavaScript خارج المتصفح، ثبّت Node.js من موقعه الرسمي، ثم شغّل أي ملف بالأمر node app.js.

المتغيرات وأنواع البيانات: let وconst

المتغير اسم تحفظ فيه قيمة لتستخدمها لاحقًا. في JavaScript الحديثة تستخدم const للقيم التي لن تعيد إسنادها، وlet للقيم التي ستتغير، وتتجنب var القديمة.

أمثلة: const name = "Sara"; نص، وlet age = 25; رقم، وlet isMember = true; قيمة منطقية. وتوجد قيمتان خاصتان: null للفراغ المقصود، وundefined لمتغير لم تُسند له قيمة بعد. ويمكنك معرفة نوع أي قيمة بكتابة typeof age التي تعيد "number".

ولدمج المتغيرات داخل النصوص استخدم القوالب النصية (Template Literals) المكتوبة بعلامة الإمالة العكسية: `Hello ${name}, you are ${age}`. هذه الصيغة أوضح بكثير من وصل النصوص بعلامة +، وستراها في أغلب الكود الحديث.

الشروط والحلقات والدوال

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

الشروط

if (age >= 18) { console.log("Adult"); } else { console.log("Minor"); } يطبع نتيجة مختلفة حسب العمر. وللمقارنة استخدم دائمًا === التي تقارن القيمة والنوع معًا، لأن "5" == 5 تعطي true بينما "5" === 5 تعطي false.

الحلقات

for (let i = 1; i <= 3; i++) { console.log(i); } تطبع الأرقام من 1 إلى 3. وللمرور على عناصر قائمة استخدم الصيغة الأوضح: for (const item of items) { console.log(item); }.

الدوال

الدالة العادية: function add(a, b) { return a + b; }. والصيغة المختصرة المسماة الدالة السهمية (Arrow Function): const add = (a, b) => a + b;. كلتاهما تعيد مجموع رقمين، وستقابل الصيغتين كثيرًا في أي مشروع.

المصفوفات والكائنات: كيف تنظم البيانات؟

المصفوفة (Array) قائمة مرتبة من القيم، والكائن (Object) مجموعة خصائص لكل منها اسم وقيمة. أغلب البيانات التي ستتعامل بها، مثل قائمة منتجات أو بيانات مستخدم، مزيج من الاثنين.

• مصفوفة: const prices = [100, 250, 80]; وتصل لأول عنصر بـ prices[0] لأن الترقيم يبدأ من صفر.
• تصفية: prices.filter(p => p > 90) تعيد [100, 250].
• تحويل: prices.map(p => p * 2) تعيد مصفوفة جديدة بالأسعار مضاعفة.
• كائن: const user = { name: "Sara", city: "Cairo" }; وتقرأ الاسم بـ user.name.
• مصفوفة كائنات: const products = [{ name: "Tea", price: 10 }, { name: "Coffee", price: 25 }]; وهذا هو الشكل الذي تصلك به البيانات غالبًا من أي API.

كيف تتحكم JavaScript في الصفحة؟ الـ DOM والأحداث

الـ DOM هو تمثيل الصفحة على شكل شجرة من العناصر تستطيع JavaScript قراءتها وتعديلها. والحدث (Event) هو شيء يحدث في الصفحة، مثل ضغطة زر أو كتابة في حقل أو تمرير الصفحة، فتربط به دالة تُنفذ عند وقوعه.

مثال يغير نص فقرة عند الضغط على زر: document.querySelector("#btn").addEventListener("click", () => { document.querySelector("#msg").textContent = "Done"; });

مثال حقيقي: تأخير السكربتات الثقيلة حتى أول تفاعل

عند تحسين سرعة موقع Apex، كان من أكثر الخطوات أثرًا تأخير تحميل وسوم Google Analytics والإعلانات حتى أول تفاعل من الزائر، بدل تحميلها مع الصفحة. الفكرة تعتمد على الأحداث نفسها التي تتعلمها هنا: window.addEventListener("scroll", loadTags, { once: true }); حيث loadTags دالة تضيف السكربت إلى الصفحة، والخيار once يضمن تنفيذها مرة واحدة. وعمليًا تُربط الدالة بأكثر من حدث، مثل اللمس وتحريك الفأرة، حتى لا تفوت أي زائر.

البرمجة غير المتزامنة: fetch وasync/await

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

مثال يجلب مهمة تجريبية من خدمة JSONPlaceholder العامة المخصصة للتدريب: async function load() { const res = await fetch("https://jsonplaceholder.typicode.com/todos/1"); const todo = await res.json(); console.log(todo.title); } ثم استدعِ الدالة بكتابة load().

في المشاريع الحقيقية، أحط الطلب بـ try وcatch لتتعامل مع انقطاع الشبكة، مثل هذا السطر داخل دالة async: try { await load(); } catch (err) { console.error("Failed:", err); }. وتحقق أيضًا من res.ok قبل قراءة البيانات، لأن fetch لا يعتبر رد الخطأ من الخادم، مثل الرمز 404، فشلًا يقفز بك إلى catch. ولفهم ما يحدث بين المتصفح والخادم في هذا الطلب، اقرأ ما هو الـ API؟ شرح بسيط بأمثلة.

خطة عملية لتعلم جافا سكريبت وأخطاء تتجنبها

تعلّم المفاهيم بالترتيب السابق، وابنِ مشروعًا صغيرًا بعد كل مجموعة منها، فالمشروع هو ما يكشف لك ما لم تفهمه.

أخطاء شائعة تؤخر المبتدئين:

• القفز إلى React قبل إتقان الدوال والمصفوفات والبرمجة غير المتزامنة.
• استخدام == بدل === ثم الحيرة من نتائج المقارنة.
• تجاهل لوحة Console، مع أن رسائل الخطأ فيها تحدد السطر والمشكلة غالبًا.
• نسخ أمثلة قديمة تستخدم var وأساليب تجاوزها الزمن دون فهمها.

مرجعك الرسمي طوال الطريق هو MDN Web Docs، ففيه شرح كل دالة بأمثلة وتوافقها مع المتصفحات. وإن كنت ما زلت تقرر مسارك العام، فابدأ من الدليل الكامل لتعلم البرمجة من الصفر.

الخلاصة

• ابدأ تعلم جافا سكريبت من المتصفح مباشرة، دون أي تثبيت، عبر لوحة Console.
• استخدم const افتراضيًا وlet عند الحاجة، وقارن دائمًا بـ ===.
• أتقن المصفوفات والكائنات وmap وfilter، فهي أساس التعامل مع أي بيانات.
• الـ DOM والأحداث تجعل صفحتك تفاعلية، وfetch مع async/await تربطها بالخادم.
• ابنِ مشروعًا بعد كل مرحلة، ولا تنتقل إلى React قبل أن تثبت هذه الأساسيات.