شرح صفوف ومحتوى الفقرة
يقوم كل موقع أو تطبيق ويب تفتحه في متصفحك—مهما بلغت ضخامته—على ثلاث لغات أساسية للواجهة الأمامية يفهمها كل متصفح ويب بشكل فطري: HTML وCSS وJavaScript. في هذا الدرس التأسيسي ستكتسب خريطة ذهنية واضحة لوظيفة كل لغة من هذه اللغات الثلاث، ولماذا تختلف لغتا التوصيف والتنسيق عن لغات البرمجة المنطقية، وكيف يربط المتصفح بينها عبر شجرة المستند ()، وما الدور الذي تضيفه لغة TypeScript في المشاريع الحديثة.
قبل الغوص في تفاصيل هذا الدرس، استعرض جدول المصطلحات الأساسية التالية:
| المصطلح بالعربية | المصطلح بالإنجليزية | النطق التقني | المعنى المبسط |
|---|---|---|---|
| لغة توصيف النص الفائق | إتش تي إم إل | اللغة المسؤولة عن بناء الهيكل الأساسي للصفحة وتحديد عناوينها وفقراتها وصورها وأزرارها. | |
| أوراق الأنماط المتتالية | سي إس إس | لغة التنسيق المسؤولة عن تجميل الصفحة بالألوان والخطوط والأبعاد وتوزيع العناصر على الشاشات. | |
| لغة جافاسكريبت | جافاسكريبت | لغة البرمجة المنطقية التي تضيف التفاعل والحركة وتستجيب لنقرات المستخدم داخل المتصفح. | |
| لغة توصيف | مارك أب لانجويج | لغة تستخدم الوسوم لتوصيف وتسمية أجزاء المستند (مثل عنوان أو فقرة) دون تنفيذ عمليات حسابية أو شرطية. | |
| نموذج كائنات المستند | دوكيومنت أوبجكت موديل (دوم) | شجرة حية ينشئها المتصفح في الذاكرة لتمثيل عناصر الصفحة وربط HTML بـ CSS وJavaScript. | |
| لغة تايب سكريبت | تايب سكريبت | امتداد مطوّر مبني فوق JavaScript يضيف فحصاً صارماً لأنواع البيانات لاكتشاف الأخطاء مبكراً. |
لكي تتخيل كيف تتكامل اللغات الثلاث الأساسية للواجهة الأمامية دون تداخل في المهام، تأمل تشبيه «بناء المنزل» أو «جسم الإنسان» الشهير في عالم الويب:
- لغة هي الهيكل العظمي والجدران الخرسانية: تحدد أركان المبنى ومواقع الغرف والأبواب والنوافذ بصورتها الخام قبل أي طلاء أو تجميل.
- لغة هي الطلاء والديكور والملابس الأنيقة: تكسو الهيكل الخرساني بالألوان المتناسقة والإضاءة وتوزع الأثاث وتحدد المسافات بدقة.
- لغة هي الكهرباء والأجهزة الذكية والعضلات المحركة: تمنح المنزل الحياة والحركة؛ فعندما تضغط زر الجرس يرن، وعندما تقترب من الباب الذكي يفتح تلقائياً.