في كثير من الاحيان نود ان نضع في موضوعات المدونة أو حتى في الاعمدة الجانية نصا يحتوي على كود بصيغة ( 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>
كود مقطع الفيديو الظاهر في النتيجةو الذي نرغب من الزائر نسخه و اعادة استخدامه
</textarea>
النتيجة:
لاحظ اني مجبرا على تغير صيغة الكود الى encode عندما اردت اظهار الكود كما هو مبين فوق النتيجة , بينما لا دعي لتعديل أو تحويل الكود عندما نقوم باستخدام textarea و هو كما تم ايضاحه في النتيجة ملاحظة مهمة : عند استخدام تعليمة textarea يجب عدم ترك مسافات في النص , لان ذلك سيؤدي الى ظهور تعليمة الفواصل ( br ) و الذي سيؤدي الى خلل في الكود عند تنفيذه اي بعد ان يقوم المستخدم بنسخه و بما ان متابعة و تدقيق نص الكود تحتاج جهدا كبيرا و ذلك في تتبع وجود فواصل و العمل على حذفها , لذلك نقوم باضافة تعليمة تسبق كود الـ textarea و كما يلي لاحظ هنا كيف ظهرت الفواصل ( -be- )
نقوم بمنع ظهورها باضافة تعليمة pre كما يلي :
<pre> <textarea id="code" cols="40" rows="4" > <object width="320" height="266" class="MUSICTOFA7AA_video_class" id="MUSICTOFA7AA_video-downunder" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="movie" value="https://sites.google.com/site/musictofa7aa/jwplayer/player.swf"> <param name="bgcolor" value="#292929"> <param name="allowfullscreen" value="true"> <param name='flashvars' value='http://mjwplayer.googlecode.com/files/downunder.flv'> <param name='title' value='http://musictofa7aa.blogspot.com'> <embed src="https://sites.google.com/site/musictofa7aa/jwplayer/player.swf" type="application/x-shockwave-flash" width="320" height="266" bgcolor="#292929" allowscriptaccess='always' allowfullscreen='true' flashvars='file=http://mjwplayer.googlecode.com/files/downunder.flv'/> </object></textarea> </pre>
النتيجة:
