الهدف
بنهاية هذا الدرس، سيكون الطالب قادرًا على شرح دور HTML وCSS وJavaScript في بناء الواجهة الأمامية، وفهم كيفية تفاعل المتصفح مع هذه التقنيات.
شرح الدرس
الثالوث الأساسي للواجهة الأمامية:
- HTML (هيكل): يُحدد المحتوى والبنية — عناوين، فقرات، صور، روابط. الهيكل العظمي للصفحة.
- CSS (تصميم): يُحدد المظهر والشكل — الألوان، الخطوط، التخطيط، الاستجابة للشاشات المختلفة. الملابس.
- JavaScript (سلوك): يُضيف التفاعلية والديناميكية — الأزرار التي تعمل، التحديثات بدون تحميل. العضلات.
DOM (نموذج كائن المستند): تمثيل الصفحة كشجرة من الكائنات يتيح لـ JavaScript تعديل الصفحة ديناميكيًا.
أطر العمل (Frameworks): React, Vue, Angular — تُسرّع بناء واجهات تفاعلية معقدة بأنماط منظمة.
الاستجابة (Responsive Design): الصفحة تتكيف مع أحجام الشاشات (موبايل، تابلت، سطح المكتب) — أساسًا بـ CSS Media Queries.
أداء الصفحة: تُقاس بسرعة التحميل. المؤثرات: حجم الصور، عدد الطلبات الشبكية، ضغط الكود (Minification).
أسئلة تدريبية
1. افرض أن HTML هو ‘الهيكل’ وCSS هو ‘المظهر’ وJS هو ‘السلوك’. لو أُزيل CSS من موقع إخباري فقط — ما الذي سيبقى؟ وما الذي سيختفي؟
عرض الإجابة
يبقى: كل المحتوى (العناوين، الفقرات، الصور، الروابط) يظهر بالترتيب الهيكلي الافتراضي للمتصفح — نص أسود على خلفية بيضاء، عناوين كبيرة، روابط زرقاء. يختفي: الألوان المخصصة، التخطيط المتعدد الأعمدة، الخطوط المميزة، الأزرار المصممة، القوائم التنقلية المنسقة — الموقع يصبح بلا تصميم لكن قابلًا للاستخدام.
2. JavaScript يُريد تغيير نص زر من ‘اشتر الآن’ إلى ‘تمت الإضافة’ بعد نقر المستخدم. كيف يتم ذلك من خلال DOM؟
عرض الإجابة
JS يصل للزر عبر DOM: document.getElementById(‘buy-btn’) (مثلًا). يُضيف مستمع حدث: .addEventListener(‘click’, …). عند النقر: يُغيّر خاصية النص: button.textContent = ‘تمت الإضافة’. كل هذا يُعدّل الشجرة الحية للـ DOM في الذاكرة والمتصفح يعكس التغيير فورًا على الشاشة دون تحميل الصفحة.
3. موقع لا يعمل جيدًا على الموبايل رغم ظهوره جيدًا على سطح المكتب. ما المشكلة التقنية المرجحة؟ وما الحل؟
عرض الإجابة
المشكلة: غياب Responsive Design — الصفحة مُصممة لعرض ثابت كبير ولا تتكيف مع الشاشات الصغيرة. الحل: استخدام CSS Media Queries (@media (max-width: 768px) {…}) لتغيير التخطيط عند شاشات أصغر، وإضافة علامة Viewport في HTML (). الأفضل: نهج Mobile-First — التصميم من الأصغر للأكبر.
4. ما الفرق بين إطار عمل (Framework) مثل React ومكتبة (Library) مثل jQuery؟
عرض الإجابة
المكتبة (jQuery): أدوات تستخدمها عند الحاجة — أنت تتحكم في تدفق البرنامج وتستدعيها. الإطار (React): يُمسك بهيكل التطبيق كله — أنت تملأ الأجزاء وفق قواعده (‘Hollywood Principle: Don’t call us, we’ll call you’). React: إطار لبناء واجهات مبنية على مكونات تُعاد استخدامها. القرار بحسب حجم المشروع وتعقيده.
5. ما معنى ‘ضغط الكود’ (Minification)؟ ولماذا يُحسّن أداء الصفحة؟
عرض الإجابة
Minification: إزالة كل المسافات والتعليقات وأسماء المتغيرات الطويلة من ملفات JS/CSS دون تغيير وظيفتها. يُحسّن الأداء: تُقلل حجم الملفات بنسبة 20-60% — أقل بايتات تُرسَل عبر الشبكة = تحميل أسرع. ملف app.js بحجم 500KB قد يصبح 180KB بعد المعالجة.
6. موقع يُحمّل 50 صورة في صفحة المنتجات. المستخدم لا يرى أغلبها إلا إذا سحب للأسفل. كيف يُحسّن المطوّر الأداء؟
عرض الإجابة
Lazy Loading: تحميل الصور فقط عند اقتراب المستخدم منها عند السحب (يمكن تطبيقه بخاصية loading=’lazy’ في HTML أو Intersection Observer API). هكذا الصفحة تُحمّل 5 صور فقط أولًا (المرئية) ثم تُحمّل الباقي تدريجيًا — يُقلل وقت التحميل الأولي بشكل ملحوظ.
7. ما الفرق بين CSS Grid وCSS Flexbox؟ أيهما يناسب شبكة منتجات (Grid) وأيهما يناسب قائمة تنقل أفقية (Nav)؟
عرض الإجابة
Flexbox: للتخطيط أحادي البعد (صف أو عمود). مثالي لعناصر في خط واحد مع مرونة في التوزيع. Grid: للتخطيط ثنائي البعد (صفوف وأعمدة). مثالي للشبكات المنظمة. شبكة المنتجات (صفوف وأعمدة من البطاقات): Grid. قائمة التنقل (عناصر في صف أفقي): Flexbox.
8. ما Browser Rendering Pipeline؟ صِف بإيجاز كيف يتحول HTML/CSS/JS لما تراه على الشاشة.
عرض الإجابة
المتصفح: (1) يُحلل HTML → يبني DOM. (2) يُحلل CSS → يبني CSSOM. (3) يدمجهما → Render Tree. (4) يحسب مواضع وأحجام العناصر → Layout. (5) يرسمها → Paint. (6) يُركّبها في طبقات → Composite. JavaScript يُعدّل DOM أو CSSOM مما قد يُعيد بعض هذه الخطوات (Reflow/Repaint) — لهذا تعديل DOM كثيرًا يُبطئ الصفحة.
9. ما مبدأ ‘الفصل بين الاهتمامات’ (Separation of Concerns) في الواجهة الأمامية؟ وكيف يُطبَّق؟
عرض الإجابة
المبدأ: كل تقنية تتحمل مسؤوليتها فقط. HTML = البنية والمحتوى فقط. CSS = المظهر فقط. JS = السلوك والمنطق فقط. التطبيق: لا تضع تنسيقات CSS داخل HTML (style attribute)، ولا تضع تعريفات HTML داخل JavaScript، ولا منطق في HTML. الفائدة: تعديل المظهر لا يمس المحتوى أو السلوك.
10. موقع يُعطي رسالة خطأ ‘CORS error’ في المتصفح عند تحميل صورة من نطاق آخر. لماذا لا يحدث هذا مع صور ؟
عرض الإجابة
القاعدة: المتصفح يُطبّق CORS على طلبات JavaScript (fetch/XHR) التي تصل لموارد نطاق آخر. لكن علامات HTML كـ و و تجلب الموارد الخارجية بدون قيود CORS (بتصميم تاريخي). إذن: CSS خارجي وصور مُضمّنة في HTML = لا CORS. طلب JavaScript لصورة من نطاق آخر لمعالجتها = CORS يُطبَّق.
11. ما مفهوم Progressive Web App (PWA)؟ وما الميزات التي تجعلها قريبة من التطبيقات الأصلية؟
عرض الإجابة
PWA: تطبيق ويب يُوفّر تجربة تشبه التطبيقات الأصلية (Native Apps) عبر المتصفح. الميزات: (1) يعمل بدون إنترنت (Service Worker يُخزّن كاش). (2) يُثبَّت على الشاشة الرئيسية للهاتف. (3) إشعارات Push. (4) وصول للكاميرا والـ GPS. (5) يتحمّل بسرعة. الميزة: نفس الكود يعمل على كل الأجهزة.
12. ما أداة DevTools في المتصفح؟ واذكر ثلاثة استخدامات عملية لها في تطوير الويب.
عرض الإجابة
DevTools: أدوات مضمّنة في المتصفح (F12) للتفتيش وتحليل صفحات الويب. الاستخدامات: (1) تفتيش عناصر HTML/CSS وتعديلها مباشرة لرؤية التأثير فورًا. (2) مراقبة طلبات الشبكة (Network tab) — رؤية كل طلب HTTP ووقته وحجمه والـ Headers. (3) تصحيح أخطاء JavaScript (Console + Debugger) — وضع نقاط توقف ومشاهدة قيم المتغيرات.