وضع النص textarea لوضع كود برمجى فى صندوق ~ سوهاج بوك

الأحد، 26 مايو 2013

وضع النص textarea لوضع كود برمجى فى صندوق

في كثير من الاحيان نود ان نضع في موضوعات المدونة أو حتى في الاعمدة الجانية نصا يحتوي على كود بصيغة ( html, أو javascript ) ليقوم المستخدم ( الزائر ) بنسخه و اعادة استخدامه في موقع اخر
في هذا الموضوع سنتعرف على دالة تمكننا من ذلك , بل و لها الكثير من الاستخدامات الاخرى المفيده
استخدام الدالة ( textarea )
و كما هو واضح من اسم الدالة , تستخدم لتخصيص مساحة محددة لاظهار نص ما , هذا النص يمكن ان يكون – كود , معلومة محددة , كما يمكن ان تستخدم في انشاء مربعات الحوار كما هو الحال في التعليقات .... و الكثير من المجالات التي سنتعرف على بعضها اليوم ان شاء الله
الدالة ( textarea ) توضع بالشكل التالي حيث يوضع النص المطلوب بينهما

<textarea></textarea>

مثال :
لو اردنا ان نكتب النص التالي في موضوع معين من المدونة

<textarea>تطبق المثال الاول</textarea>

النتيجة:

و لتقيد ابعاد مربع النص بتحديد عدد الاعمدة و عدد السطور فيه و ذلك باضافة ( cols=" " rows=" " ) و كما يلي

<textarea " cols="40" rows="4"></textarea>

النتيجة

سنلاحظ ان النص كما هو في المثال اعلاه , متغير , بمعنى ان المستخدم يستطيع التعديل فيه ( جرب حذف كلمة من المربع بنفسك , أو اضافة ما تشاء ), لذلك فان الغاية من استخدام textarea هي التي نحدد فيها نوع النص المراد اظهاره للمستخدم , فمثلا اذا اردنا ان نبقي النص كما هو و نمنع التعديل فيه نضيف الى تعليمة textarea تعليمة readonly و كما يلي

<textarea " cols="40" rows="4" readonly="yes"></textarea>

النتيجة

استخدام تعليمة الـ textarea لاظهار كود معين في المدونة أو في المنتدى:
لاظهار كود ما في المدونة نود من الزائر نسخه و اعادة استخدامه و لصقه في مكان محدد,نقوم بذلك بعددة طرق احداها ما استخدمه شخصيا في مدونتي ( للاطلاع على طريقة اضافة كود في المدونة ) , و كذلك يمكن ان نستخدم textarea لاظهار الكود المطلوب مع ملاحظة ان هذه الطريقة ربما اسهل في استخدامها من معظم الطرق الاخرى كونها لا تحتاج اي تعديل على نص الكود ( تحويله من صيغته الى صيغة encode كما هو الحال عند استخدام طريقة السابقة الذكر

اذا ايها الكريم , نقوم باستخدام textarea لاظهار كود معين باضافة id لتحديد نوع الادخال و كما يلي:

<textarea id="code" cols="40" rows="4" readonly="yes">
كود مقطع الفيديو الظاهر في النتيجةو الذي نرغب من الزائر نسخه و اعادة استخدامه
</textarea>

النتيجة:

لاحظ اني مجبرا على تغير صيغة الكود الى encode عندما اردت اظهار الكود كما هو مبين فوق النتيجة , بينما لا دعي لتعديل أو تحويل الكود عندما نقوم باستخدام textarea و هو كما تم ايضاحه في النتيجة ملاحظة مهمة : عند استخدام تعليمة textarea يجب عدم ترك مسافات في النص , لان ذلك سيؤدي الى ظهور تعليمة الفواصل ( br ) و الذي سيؤدي الى خلل في الكود عند تنفيذه اي بعد ان يقوم المستخدم بنسخه و بما ان متابعة و تدقيق نص الكود تحتاج جهدا كبيرا و ذلك في تتبع وجود فواصل و العمل على حذفها , لذلك نقوم باضافة تعليمة تسبق كود الـ textarea و كما يلي لاحظ هنا كيف ظهرت الفواصل ( -be- )

نقوم بمنع ظهورها باضافة تعليمة pre كما يلي :

النتيجة: