اظهار - اخفاء

سيكربت اليوم بسيط جداً سنتعلم من خلاله كيف نستخدم innerText لأي تأشيرة، بحيث نظهر نصاً و نخفيه. طبعاً اذا كنت من النوع الذي يهوى برمجة الألعاب، فهذا السيكربت قد يعطيك أفكاراً جيدة.

تجربة السيكربت

السيكربت

<script> function showMe(val) {      document.all.fun.innerText=val; } </script> <b id=fun>Hehehehehe</b> <form> <input type=button value=اظهار onClick=showMe("Hehehehehe")> <input type=button value=اخفاء onClick=showMe("")> <form>

شرح السيكربت

يتكوّن السيكربت من ثلاث أجزاء:

الجزء الأول هو الجافا سيكربت، والجزء الثاني هو المساحة التي ستتأثر بالسيكربت، اما الثالث، فيوضع في أي مكان في الصفحة.

نضع النص الذي نريده ان يختفي أو يظهر ضمن أي تأشيرة هتمل لنفرض انها مثلاً <b> التي تقوم بتغميق الخط.
هكذا:

الآن النص المحصور بين علامة <b> و </b> هو ال InnerText و لكن أي نص محصور بين أي تأشيرة هتمل سيكون InnerText لذا سنقوم باعطاء تأشيرة الهتمل اسم باستخدام صفة ال ID هكذا:

الآن أصبح اسم هذه التأشيرة fun و أصبح في الامكان الاشارة إلى النص المحصور بين طرفيها بـ fun.InnerText

ملاحظة: اذا لم تشأ استخدام أي تأشيرة فيمكنك استخدام <label id=theName>  أو  <div>

السيكربت: و هو يحتوي وظيفة واحد قد تم تظليلها باللون الأحمر في السكربت نفسه. في هذه الوظيفة سنقوم بعمل بسيط جداً، نلاحظ أن الوظيفة تأخذ قيمة عند استدعائها، كل ما علينا هو جعل fun.InnerText يساوي هذه القيمة. و لكي يعمل السيكربت سنقوم بوضع الاسم الكامل لها  و هو document.all.fun.InnerText و نساويها بالقيمة التي أخناها وقت استدعاء السيكربت و قمنا بتخزينها في المتغير val.

تفعيل السيكربت: يمكن تفعيل السيكربت باستخدام رابط أو زر تشغيل، و قد قمت في المثال باستخدام زري تشغيل، أحدهما و هو زر الاظهار يقوم عند الضغط عليه باستدعاء الوظيفة التي برمجناها في الجزء السابق و يقدم لها القيمة "Hehehehehe" لوضعها في داخل التأشيرة، أما زر الاخفاء فيقوم باستدعاء نفس الوظيفة و لكن بتقديم قيمة النص الفارغ: "" كي تحل محل النص في التأشيرة.

ملاحظات

لن يعمل هذا السيكربت في متصفح النتسكيب.

وفوق كل ذي علم عليم

أوشال