إن كان HTML هو هيكل الصفحة وCSS هو مظهرها، فإنّ JavaScript هو ما يمنحها الحياة: التفاعل، تحديث المحتوى دون إعادة تحميل، والتواصل مع الخوادم. تطوّرت اللغة كثيراً في السنوات الأخيرة وصارت أنظف وأقوى. هذا الدليل يضع بين يديك الأساسيات الحديثة التي تبني عليها أوّل مشاريعك بثقة.
1. المتغيّرات: let و const لا var
انسَ var القديم. اليوم نستعمل اثنين فقط:
constلقيمة لا يُعاد تعيينها (الافتراضي — استعمله أوّلاً دائماً).letلقيمة ستتغيّر (عدّاد في حلقة مثلاً).
كلاهما «محصور بالكتلة» (block-scoped)، أي يعيش داخل الأقواس { } التي عُرّف فيها فقط — وهذا يمنع كثيراً من الأخطاء الغامضة التي كان يسبّبها var.
2. الدوال والدوال السهمية
الدالّة تُغلّف منطقاً قابلاً لإعادة الاستخدام. الصياغة الحديثة المختصرة هي «الدالّة السهمية»:
const square = (n) => n * n;
square(5); // 25
أبقِ كل دالّة مسؤولة عن مهمّة واحدة واضحة، وأعطِها اسماً يصف ما تفعله (calculateTotal لا doStuff). الدوال الصغيرة المسمّاة جيداً هي عمود الكود القابل للقراءة.
3. المصفوفات والكائنات
هما وعاءا البيانات الأساسيان. المصفوفة [] لقائمة مرتّبة، والكائن {} لبيانات ذات مفاتيح:
const user = { name: 'سارة', age: 28 };
const skills = ['HTML', 'CSS', 'JS'];
تعلّم توابع المصفوفات الحديثة فهي تغنيك عن حلقات كثيرة: map للتحويل، filter للتصفية، find للبحث، reduce للتجميع. مثال: skills.map(s => s.toLowerCase());
4. التعامل مع الصفحة (DOM)
الـDOM هو تمثيل الصفحة الذي يستطيع جافاسكربت قراءته وتعديله:
const btn = document.querySelector('#send');
btn.textContent = 'إرسال';
تنتقي العناصر بـquerySelector (بمحدِّد CSS نفسه)، وتغيّر نصّها أو أصنافها أو سماتها. نصيحة أمان مهمّة: لإدراج نصّ من المستخدم استعمل textContent لا innerHTML لتتجنّب ثغرات حقن السكربت (XSS).
5. الأحداث (Events)
التفاعل يبدأ بالاستماع لحدث ثم الردّ عليه:
btn.addEventListener('click', () => {
console.log('تم الضغط!');
});
أشهر الأحداث: click، submit للنماذج، input لحقول الكتابة. في معالِج النموذج استدعِ event.preventDefault() لمنع إعادة تحميل الصفحة الافتراضية ثم عالِج البيانات بنفسك.
console.log() بسخاء لتفهم ماذا يحدث وأين، فالتعلّم بالتجربة المباشرة أسرع طريق للإتقان.
6. غير المتزامن: Promises و async/await
جلب البيانات من خادم يستغرق وقتاً، وأثناءه يجب ألّا يتجمّد الموقع. هنا يأتي الكود «غير المتزامن». الصياغة الحديثة async/await تجعله يُقرأ كأنه متزامن:
async function getData() {
try {
const res = await fetch('/api/data');
const data = await res.json();
return data;
} catch (e) { console.error(e); }
}
غلّف دائماً طلبات الشبكة بـtry/catch لأنها قد تفشل (انقطاع، خطأ خادم)، وتعامل مع الفشل برسالة واضحة للمستخدم.
7. أخطاء المبتدئين الشائعة
- الخلط بين
=(تعيين) و===(مقارنة). استعمل===دائماً للمقارنة الصارمة. - نسيان أنّ
fetchغير متزامن، فتقرأ النتيجة قبل وصولها. - تشغيل السكربت قبل تحميل العناصر — ضع
<script>بـdeferأو في نهاية<body>. - تلويث النطاق العام بمتغيّرات كثيرة — غلّف كودك في دوال أو وحدات (modules).
أسئلة شائعة
هل أتعلّم JavaScript أم إطاراً مثل React مباشرة؟ أتقن الأساسيات أوّلاً. الأطر مبنيّة على JavaScript، ومن يقفز فوقها يتعثّر عند أوّل مشكلة خارج «وصفات» الإطار.
كم أحتاج لأبني شيئاً مفيداً؟ بعد إتقان ما في هذا الدليل تستطيع بناء نماذج تفاعلية، تحقّق من المدخلات، وجلب بيانات وعرضها. ابنِ مشاريع صغيرة حقيقية — هي أفضل معلّم.
أين أتمرّن؟ في وحدة تحكّم المتصفّح مباشرة، وعلى صفحة HTML بسيطة. لا تحتاج أدوات معقّدة للبداية، بل ملفاً واحداً وفضولاً.
خلاصة
ابدأ بـconst/let، أتقن الدوال والمصفوفات والكائنات، تعلّم انتقاء عناصر DOM والاستماع للأحداث، ثم اكسر حاجز الكود غير المتزامن بـasync/await. هذه الأساسيات تغطّي معظم ما تحتاجه في مشاريعك الأولى — والباقي يأتي بالممارسة وبناء أشياء حقيقية، لا بحفظ النظريات.