گروه مقاله : جاوا اسكريپت Java Script
تاريخ انتشار : 1396/08/16 - 10:36
كد :7932
رخدادها یکی از اصلی ترین بخش های یک سایت تعاملی میباشند. در این مقاله نحوه کد نویسی برای رخدادها را بررسی می کنیم.
رخدادها اتفاقاتی هستند که برای تگ ها در HTML رخ میدهند.
رخداد های HTML
رخداد های HTML فعالیت هایی هستند که مرورگر یا کاربر انجام میدهد.
چند نمونه از رخدادهای HTML را در فهرست زیر مشاهده میکنید.
- An HTML web page has finished loading
- An HTML input field was changed
- An HTML button was clicked
اغلب، وقتیکه رخدادها به وقوع می پیوندندکه کاربر کاری میخواهد انجام دهد.
جاوا اسکریپت کدهایی را در هنگام به وقوع پیوستن رخدادها پردازش می کند.
میتوان کدهای جاوا اسکریپت را درون یک جفت کوتیشن بصورت ویژگی یک رخداد در تگ HTML تعریف کرد:
<element event='some JavaScript'>
میتوان همین کار را با یک یک جفت دبل کوتیشن انجام داد:
<element event="some JavaScript">
در کد زیر از کدهای جاوا اسکریپت بصورت یک مقدار از صفت رخداد ONCLICK استفاده کرده ایم:
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
==============================================================
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>
====================================================================
Tue Nov 07 2017 09:39:13 GMT+0330 (Iran Standard Time)
با فشردن دکمه محتوای تگ دارای id="demo" تغییر خواهد کرد. در مثال بعد، کد محتوای خود دکمه را تغییر می دهد:
<button onclick="this.innerHTML = Date()">The time is?</button>
==================================================
Tue Nov 07 2017 09:39:13 GMT+0330 (Iran Standard Time)
در کدهای واقعی معمولا در درون صفت رخداد کد جاوا اسکریپت تنها یک تابع را فرا میخواند و کدهای تابع نیز معمولا بیش از یک خط هستند.
<button onclick="displayDate()">The time is?</button>
==========================================
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
===============================================
Tue Nov 07 2017 09:39:13 GMT+0330 (Iran Standard Time)
رخداد های عمومی در HTML
در جدول زیر لیستی از رخداد های عمومی در HTML را مشاهده میکنید.
|
رخداد
|
توضیحات
|
|
onchange
|
در صورتیکه تگ HTML تغییر کند رخ میدهد
|
|
onclick
|
کاربر روی یک تگ HTML کلیک کند
|
|
onmouseover
|
هنگام هاور موس روی تگ رخ میدهد
|
|
onmouseout
|
هنگام خروج موس از روی تگ رخ میدهد
|
|
onkeydown
|
هنگام فشردن یک کلیک رخ میدهد
|
|
onload
|
با پایان بارگذاری صفحه رخ میدهد
|
این لیست خیلی طولانی تر است. در سایت www.w3schools.com میتوانید این لیست را مشاهده کنید.
جاوا اسکریپت میتواند چه کارهایی انجا دهد؟
از کد های جاوا اسکریپت برای موارد زیادی مانند کنترل ورودی کاربران و رخدادهای کاربر و رخدادهای مرورگر میتوان استفاده کرد.
- هنگامیکه در زمان بارگذاری صفحه، رخدادی باید به وقع به پیوندند.
- رخدادهایی که با بسته شدن صفحه باید پایان بپذیرند.
- رخدادهایی که هنگام کلیک کاربر بر روی دکمه رخ میدهند.
- محتواهایی که باید در هنگام ورود توسط کاربر چک شوند.
- و ...
متد های بسیاری در هنگام اجرای کدهای جاوا اسکریپت میتوانند استفاده شوند.
- صفات رخداد در HTML میتوانند کدهای جاوا اسکریپت را بصورت مستقیم پردازش کنند.
- صفات رخداد در HTML میتوانند توابع جاوا را فراخوانی کنند.
- میتوان رخدادهای را به تگ های HTML نسبت داد.
- ارسال و یا فراخوانی تابع در هنگام رخداد.
- و...
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد