Javascript

|

اموزش جاوا اسکریپت

Event ها از جمله بحث های مورد علاوه و جالب در زبان برنامه نویسی مخصوصا جاوا اسکریپتهستند. شما با استفاده از رویداد ها میتونید تعیین کنید زمانی که اتفاق خاصی در صفحات وب میوفته مثل کلیک روی یک دکمه ، دابل کلیک روی یک دکمه ، انتقال ماوس روی یک تگ خاص یا شی خاص روی یک صفحه وب چه اتفاقی میوفته.

برای مثال اگر میخواهید بر روی کلیک کردن بر روی یک دکمه پیام خاصی ظاهر بشه باید از اتفاق onclick استفاده کنید. برای اینکه واضح تر متوجه بشید یک مثال ساده میزنیم.

در اینجا ۴ تا دکمه داریم که در دکمه اول هیچ اتفاق خاصی نمی افته.

دکمه دوم دکمه ای هست که در صورتی که بر روی اون کلیک کنیم پیامی ظاهر میشه که hello dotine user نمایش میده.

دکمه سوم on mouse over هست یعنی زمانی که ماوس روی اون بره این پیام ظاهر میشه: hello dotine user.

و دکمه ی اخری on mouse out هست یعنی زمانی که ماوس از روی دکمه برداشته بشه و تا زمانی که ماوس بر روی هیچ اتفاق خاصی نمی افته ولی زمانی که از روی آن کنار میروید پیام hello dotine user نمایش داده میشود.

<body>

<button oneclick=”alert (‘ hello dotine user ’ ) “ > Normal Button </button> <br> <br>

<button oneclick=”alert (‘ hello dotine user ’ ) “ > onClick Button </button> <br> <br>

<button onmouseover=”alert (‘ hello dotine user ’ ) “ > MouseoOver Button </button> <br> <br>

<button onmouseout=”alert (‘ hello dotine user ’ ) “ > onMouseOut Button </button> <br> <br>

</body>

در زبان جاوا اسکریپت event های مختلفی تعریف شده که یکسری event ها برای اتفاقاتی که بر روی ماوس ممکنه اتفاق بیوفته و یکسری evet ها هم ممکنه بر روی کیبورد ها اتفاق بیوفته که همگی را در زیر مشاهده میکنید.

اموزش event

Onmousedown : زمانی که کلید ماوستون رو فشار دادید.

Onmousemove: زمانی که ماوستون انتقال پیدا کرده.

Onmouseover: زمانی که ماوس روی شی رفته.

Onmouseout : زمانی که ماوس رو از روی شی بر میدارید.

Onmouseup : زمانی که ماوس رو کلیک کردید و حال دکمه ماوس رو رها میکنید این اتفاق میوفته.

اموزش event در جاوا اسکریپت

Onkeydown : زمانی که user کلیدی رو روی کیبرد فشار داده و پایین نگه داشته.

Onkeypress : زمانی که user یک کلید رو روی کیبرد فشار داده.

Onkeyup : زمانی که user دستش رو از روی یک کلید بر روی کیبرد برداشته.

یکسری event ها برای فریم ها و یا کل صفحه وب تعریف شده که در زیر مشاهده میکنید.

اموزش جاوا اسکریپت

Onabor: زمانی که یک عکس به صورت کامل لود نشده.

Onerror: زمانی که عکس اشتباها لود شده.

Onload : زمانی که شی یا document در تگ body استفاده بشه لود شد.

Onresize : زمانی که صفحه ی وبی که میخوایم ببینیم تغییر سایز پیدا کرد.

Onscroll: زمانی که اسکرول کردیم اتفاق میوفته.

Onunload : زمانی که لود صفحه پایان پذیرفته و میخوایم از صفحه خارج شیم.

یک سری event ها هم برای فرم ها تعیین شده که این event ها کاربر زیادی دارند.
اموزش javascript

Onblur : زمانی که ما تمرکز رو ار روی یک فیلد که نوشتن یا پر کردن را از روی آن بر میداریم اتفاق میوفته.

Onchange : زمانی که محتوای <input> یا <textarea> تغییر پیدا میکنه اتفاق میوفته.

Onfocus : زمانی که ما یک فیل از فرممون focus کردیم یعنی ماوس را کیلیک کردیم و می خواهیم چیزی بنویسیم در واقع اون فیلد فیلد فعال میشه اتفاق میوفته.

Onreset : زمانی که بر روی دکمه reset کلیک کردیم و فرم را ریست میکنیم.

Onselect : زمانی که متنی رو انتخاب میکنیم از درون فیلد های موجود.

Onsubmit : زمانی که دکمه submit یا ارسال رو در فرم میزنیم اتفاق میوفته.

اینها مجموعه ای از رویدادهایی بودند که شما میتونید در صفحه وب از اونها و در تگ های مختلف html استفاده کنید.

مثال:

میخواهم یک اسکریپتی بنویسیم زمانی که لود شد hello dotine user ظاهر بشه.

<body onload=”alert ( ‘welcom dotine user’)” )>

</body>

حال میخواهیم اسکریپتی بنویسیم زمانی که روی تگ خاصی کلیک میکنیم متن درون اون تگ عوض بشه.

<body>

<div onclick=”this.innerHTML=’bye every body ‘ ” style=”height: 50px ; width100px ; background-color:silver” >

Hi every body

</div>

</body>

نکته: اگر از تگ this استفاده کنید اشاره به همان تگی دارد که درون آن this نوشته اید.

دریافت آخرین مطالب وبلاگ در کانال داتینه

بهاره شهسواری

بهاره شهسواری ، کارشناس نرم افزار هستم .
از سال 91 مشغول به یادگیری زبان های css ,html , javascript و jquery شدم
و از سال 93 به صورت اختصاصی به فعالیت در حوزه css و html پرداختم. علاوه بر کد نویسی به گرافیک هم علاقه مند هستم.

نظرات
نظر بدهید