الأزرار Buttons
تعتبر الأزرار أكثر عناصر النموذج استخداما، ويتم الزر باستخدام علامة <input>، كما يلي:
<input type= “button” name=”myButton” value= “Click Me”>
وكما يوضح الكود السابق يحتوي الزر على مجموعة من الخواص، مثل الخاصية name والتي يعطي لها قيمة تمثل أسم الزر في النموذج، والخاصية type والتي تمثل نوع الزر كأحد عناصر النموذج، والخاصية value والتي تمثل قيمتها النص الذي يتم كتابته على الزر.
ويمكنك استخدام الدالة onclick لتحديد ما يحدث عند قيام زائر الموقع بالضغط على زر النموذج، كما يوضح المثال التالي:
<html>
<head>
<script language= “JavaScript” type= “text/javascript”>
Var numberOfClicks =0;
Function myButton_onclick()
{
numberOfClicks++;
window.document.form1.myButton.value = ‘Button clicked’+numberOfClicks+’times’;
}
</script>
</head>
<body>
<form name=form1>
<input type= ‘button’ name= ‘my Button’ value=’Button clicked 0 times’ onclick= “my Button_onclick()”>
</form>
</body>
</html>
- ويقوم الإسكريببت السابق بإظهار زر في صفحة الويب كالموضح في الشكل التالي وكلما قام المستخدم بالنقر فوق هذا الزر تغير النص المكتوب على الزر ليعكس عدد المرات التي قام المستخدم فيها بالنقر على الزر:
لاحظ في المثال السابق وضع إسكريبت حافا سكريبت في علامة رأٍس الصفحة <head> وبدأ هذا الإسكريبت بتعريف متغير عام Global Variable يمكن الوصول إليه من أي مكان في الإسكريبت هذا المتغير يسمى numberOfclicks ليتم بعد ذلك وضع عدد المرات التي يقوم فيها زائر الموقع بالضغط على زر المستند كقيمة لهذا المتغير، وكان ذلك بالكود التالي:
Var numberOfClicks= 0;
وبعد ذلك تم إنشاء الدالة myButton_onclick() وتم ربط هذه الدالة بالحدث الخاص بقيام المستخدم بالضغط على زر النموذج، وتقوم هذه الدالة بزيادة قيمة المتغير numberOfClicks بمقدار واحد في كل مرة يتم تشغيل فيها الدالة، وذلك بالكود التالي:
Function myButton_onclick()
{
numberOfClick++;
وباستخدام الكود التالي يتم تحديث النص الذي يظهر على زر النموذج ليعكس عدد المرات التي قام المستخدم بالنقر على هذا الزر.
Window.document.form1.myButton.value = ‘Button clicked’+ numberOfClicks+ ‘times’;
}
الحدث Onmouseup والحدث Onmousedown
المثال التالي يوضح كيفية استخدام الحدث onmousedown والذي يقوم فيه المستخدم بالضغط فوق زر النموذج، والحدث onmouseup الذي يقوم فيه المستخدم بترك زر الماوس، ففي المثال تظهر عبارة mouse goes down على زر النموذج، عندما يقوم المستخدم بالنقر فوق زر النموذج، وتتغير هذه العابرة إلى mouse goes up عندما يقوم المستخدم بترك زر الماوس:
والشكل التالي يوضح العبارة المكتوبة على الزر التي تتغير بتغير وضع مؤشر الماوس فوق الزر:
في المثال السابق قمنا بإنشاء نموذج يحتوي على زر يسمى myButton، وقمنا بوضع القيمة المكتوبة على هذا الزر بشكل افتراضي هي Mouse Goes Up، وهي الحالة الافتراضية التي عندها لا يقوم زائر الموقع بالنقر على زر النموذج، وقمنا باستخدام حدث Onmouseup والذي يمثل عدم قيام المستخدم بالنقر بزر الماوس على زر النموذج، قمنا باستخدام هذا الحدث فلاستدعاء دالة تسمى (myButton_onmouseup) واستخدام حدث Onmousedown والذي يمثل قيام المستخدم بالنقر بزر الماوس على زر النموذج، قمنا باستخدام هذا الحدث في استدعاء دالة (myButton_onmousedown)، وذلك بالكود التالي:
<form name=form1>
<input type= ‘button’ name= ‘myButton’ value= ‘Mouse Goes Up’ onmouseup= “myButton_onmouseup()” onmousedown= “myButton_onmousedown()”>
</form>
