أهلاً بكم يا شباب في معهد ديف بوينت،
مع دخول HTML5، المتصفحات بقت تدعم إمكانيات قوية جداً وفرت علينا إضافات ومكتبات كتير كنا بنضطر نستخدمها زمان. ورغم كده، فيه وسوم وعناصر دلالية (Semantic Elements) ممتازة جداً نزلت ومخدتش حقها في الشهرة رغم أهميتها الكبيرة في كتابة كود نظيف ومتوافق مع معايير الويب الحديثة.
النهارده هنتكلم بالتفصيل عن الوسم <output> واستخدامه مع حقل الإدخال الرقمي <input type="number">.
إيه هو الوسم <output> وليه بنحتاجه؟
من سنين طويلة وكلنا متعودين ناخد البيانات من المستخدم عبر حقول input مختلفة، ولما نحب نعرض نتيجة عملية حسابية كنا بنحطها في input تاني غير قابل للتعديل (Read-only) أو في تاج <label> أو <span>.
الوسم <output> جه مخصوص علشان يحل المشكلة دي من الناحية الدلالية (Semantic HTML)، ووظيفته الأساسية هي تمثيل نتيجة عملية حسابية أو مخرجات تفاعل برمجي.
الخصائص الأساسية للوسم <output>
الوسم بيقبل 3 خصائص رئيسية لازم تاخد بالك منهم:
تطبيق عملي: دمج <output> مع <input type="number">
حقل input من نوع number بيجبر المستخدم على إدخال أرقام بس، وبعض المتصفحات بتعرض أسهم للزيادة والنقصان تلقائياً. علشان ننفذ عملية حسابية فورية بدون الحاجة لزر إرسال (Submit)، نقدر نعتمد على الحدث oninput.
شوف المثال البسيط ده لعملية قسمة فورية:
ملاحظة برمجية مهمة:
في كود الجافا سكريبت استخدمنا parseInt لتحويل القيمة المدخلة لرقم. في معايير HTML5 تم توفير خاصية اسمها valueAsNumber لجلب القيمة كرقم مباشرة، لكن استخدام parseInt أو parseFloat يظل أضمن للتوافقية الكاملة مع المتصفحات القديمة.
الخلاصة
استخدام العناصر الدلالية بيخلي كودك احترافي، أسهل في القراءة والصيانة، وأفضل لمحركات البحث وتجربة المستخدم بشكل عام.
شاركونا في التعليقات: هل بتستخدموا الوسم <output> في مشاريعكم ولا بتعتمدوا على وسوم عادية زي div و span لعرض النتائج الحسابية؟
مع دخول HTML5، المتصفحات بقت تدعم إمكانيات قوية جداً وفرت علينا إضافات ومكتبات كتير كنا بنضطر نستخدمها زمان. ورغم كده، فيه وسوم وعناصر دلالية (Semantic Elements) ممتازة جداً نزلت ومخدتش حقها في الشهرة رغم أهميتها الكبيرة في كتابة كود نظيف ومتوافق مع معايير الويب الحديثة.
النهارده هنتكلم بالتفصيل عن الوسم <output> واستخدامه مع حقل الإدخال الرقمي <input type="number">.
إيه هو الوسم <output> وليه بنحتاجه؟
الوسم <output> جه مخصوص علشان يحل المشكلة دي من الناحية الدلالية (Semantic HTML)، ووظيفته الأساسية هي تمثيل نتيجة عملية حسابية أو مخرجات تفاعل برمجي.
الخصائص الأساسية للوسم <output>
الوسم بيقبل 3 خصائص رئيسية لازم تاخد بالك منهم:
- الخاصية name: لتحديد اسم العنصر للتعامل معاه برمجياً.
- الخاصية for: زي اللي بنستخدمها مع الـ label، وبنحدد فيها الـ id الخاص بعناصر الإدخال المرتبطة بالعملية الحسابية، ولو أكتر من عنصر بنفصل بينهم بمسافة.
- الخاصية form: بتسمح بربط الـ output بفورم معين حتى لو كان الوسم محطوط بره حدود الفورم في نفس الصفحة.
تطبيق عملي: دمج <output> مع <input type="number">
حقل input من نوع number بيجبر المستخدم على إدخال أرقام بس، وبعض المتصفحات بتعرض أسهم للزيادة والنقصان تلقائياً. علشان ننفذ عملية حسابية فورية بدون الحاجة لزر إرسال (Submit)، نقدر نعتمد على الحدث oninput.
شوف المثال البسيط ده لعملية قسمة فورية:
HTML:
من فضلك قم , تسجيل الدخول أو تسجيل لعرض المحتوى
ملاحظة برمجية مهمة:
في كود الجافا سكريبت استخدمنا parseInt لتحويل القيمة المدخلة لرقم. في معايير HTML5 تم توفير خاصية اسمها valueAsNumber لجلب القيمة كرقم مباشرة، لكن استخدام parseInt أو parseFloat يظل أضمن للتوافقية الكاملة مع المتصفحات القديمة.
الخلاصة
استخدام العناصر الدلالية بيخلي كودك احترافي، أسهل في القراءة والصيانة، وأفضل لمحركات البحث وتجربة المستخدم بشكل عام.
شاركونا في التعليقات: هل بتستخدموا الوسم <output> في مشاريعكم ولا بتعتمدوا على وسوم عادية زي div و span لعرض النتائج الحسابية؟
