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