عند إنشاء الصفحات ، من الضروري أحيانًا أنه عند النقر فوق الزر الموجود في الصفحة ، يحدث حدث مبرمج بواسطة المؤلف في المتصفح. للقيام بذلك ، تحتاج إلى وضع كود JavaScript في المستند الذي تم إنشاؤه وربطه بالزر المطلوب. اعتمادًا على مقدار الكود المطلوب لتنفيذ الحدث المقصود ، يمكنك استخدام طرق مختلفة لتوصيل الزر بالرمز.
تعليمات
الخطوة 1
في أغلب الأحيان ، ترتبط استدعاءات تعليمات JavaScript البرمجية بحدث onclick ، أي بالنقر فوق زر الماوس الأيسر. إذا لم تكن بحاجة إلى الكثير من التعليمات البرمجية لوصف الإجراء الذي يجب أن يحدث ، فيمكن وضع كل ذلك مباشرةً في علامة الزر. على سبيل المثال ، لبرمجة المتصفح لإظهار رسالة بسيطة عند النقر على الزر ، سيبدو نص جافا سكريبت كما يلي: تنبيه ("تم عمل الرمز!") يتطلب الأمر عبارة ونصًا واحدًا فقط. كل هذا يمكن وضعه بسهولة في وصف حدث onclick لعلامة الزر. في هذه الحالة ، قد تبدو أبسط كود HTML للصفحة كما يلي:
زر مع رمز
زر مع رمز
الخطوة 2
ليس من العملي وضع كود JavaScript أكثر تعقيدًا مباشرةً في علامة الزر. من الأسهل إنشاء وظيفة منفصلة منها ، ووضع دعوتها في حدث onclick. على سبيل المثال ، قد يبدو هذا وكأنه دالة تعرض نافذة تحتوي على وقت النقر فوق الزر: function getTime () {
var now = تاريخ جديد () ؛
تنبيه ("الكود يعمل في" + now.getHours () + ":" + now.getMinutes ())؛
} يجب وضعها في رأس الصفحة (بين العلامتين و). قد يبدو الكود الكامل للصفحة مع استدعاء لهذه الوظيفة المرتبطة بالزر كما يلي:
زر الاتصال الوظيفي
دالة getTime () {
var now = تاريخ جديد () ؛
تنبيه ("الكود يعمل في" + now.getHours () + ":" + now.getMinutes ())؛
}
زر الاتصال الوظيفي
الخطوه 3
يجب استخدام نفس الطريقة عند النقر فوق عدة أزرار مختلفة من شأنها أن تثير حدثًا يمكن وصفه بنفس كود JavaScript. على سبيل المثال ، يمكنك تعديل الوظيفة السابقة بشكل طفيف لإضافة تعريف الزر المضغوط إلى مربع الرسالة: وظيفة getTime (btnString) {
var now = تاريخ جديد () ؛
تنبيه (btnString + "تم النقر عليه" + now.getHours () + ":" + now.getMinutes ())؛
} قد تبدو الشفرة الكاملة لصفحة بها ثلاثة أزرار على النحو التالي:
ثلاثة أزرار مع وظيفة المكالمة
دالة getTime (btnString) {
var now = تاريخ جديد () ؛
تنبيه (btnString + "تم النقر عليه" + now.getHours () + ":" + now.getMinutes ())؛
}
الزر الأول
الزر الثاني
الزر الثالث
