هنگام ایجاد صفحات ، گاهی اوقات لازم است که وقتی روی دکمه قرار گرفته در صفحه کلیک می کنید ، برخی از رویدادهای برنامه ریزی شده توسط نویسنده در مرورگر رخ دهد. برای انجام این کار ، باید کد JavaScript را در سند تولید شده قرار دهید و آن را به دکمه مورد نیاز متصل کنید. بسته به مقدار کدی که برای اجرای رویداد مورد نظر لازم است ، می توانید از روش های مختلفی برای اتصال دکمه به کد استفاده کنید.
دستورالعمل ها
مرحله 1
در اکثر مواقع ، تماس های کد JavaScript به رویداد onclick ، یعنی کلیک روی دکمه سمت چپ ماوس الزامی هستند. اگر برای توصیف عملی که باید اتفاق بیفتد به کد زیادی احتیاج ندارید ، همه آنها را می توانید مستقیماً در برچسب دکمه قرار دهید. به عنوان مثال ، برای برنامه نویسی مرورگر برای نشان دادن یک پیام ساده هنگام کلیک یک دکمه ، اسکریپت JavaScript به این شکل خواهد بود: alert ("کد کار کرد!") فقط به یک عبارت و متن نیاز دارد. همه اینها را می توان به راحتی در توضیحات رویداد onclick برچسب دکمه قرار داد. در این حالت ، ساده ترین کد HTML صفحه ممکن است به صورت زیر باشد:
دکمه با کد
دکمه با کد
گام 2
قرار دادن کد جاوا اسکریپت پیچیده تر به طور مستقیم در برچسب دکمه عملی نیست. آسان تر است که یک عملکرد جداگانه از آن ایجاد کنید و تماس آن را در رویداد onclick قرار دهید. به عنوان مثال ، این ممکن است مانند تابعی باشد که پنجره ای را نشان می دهد که حاوی زمان کلیک یک دکمه است: function getTime () {
var اکنون = تاریخ جدید ()؛
alert ("کد کار کرده است" + now.getHours () + ":" + now.getMinutes ())؛
} باید در هدر صفحه (بین برچسب ها و) قرار گیرد. کد کامل صفحه با فراخوانی این عملکرد متصل به دکمه ممکن است به صورت زیر باشد:
دکمه عملکرد
تابع getTime () {
var اکنون = تاریخ جدید ()؛
alert ("کد کار کرده است" + now.getHours () + ":" + now.getMinutes ())؛
}
دکمه عملکرد
مرحله 3
هنگام کلیک کردن روی چندین دکمه مختلف ، باید از همان روش استفاده شود ، باید رویدادی ایجاد شود که با همان کد JavaScript قابل توصیف باشد. به عنوان مثال ، می توانید عملکرد قبلی را کمی تغییر دهید تا شناسایی دکمه فشرده شده را به جعبه پیام اضافه کنید: تابع getTime (btnString) {
var اکنون = تاریخ جدید ()؛
alert (btnString + "کلیک شده در" + now.getHours () + ":" + now.getMinutes ())؛
} کد کامل صفحه ای با سه دکمه از این دست ممکن است به این شکل باشد:
سه دکمه با یک تماس عملکردی
تابع getTime (btnString) {
var اکنون = تاریخ جدید ()؛
alert (btnString + "کلیک شده در" + now.getHours () + ":" + now.getMinutes ())؛
}
دکمه اول
دکمه دوم
دکمه سوم
