اگر علاقه مند به همکاری در نت پارادیس جهت نویسندگی، ویراستاری و ترجمه مطالب هستی پس روی دکمه مقابل کلیک کن

علاقه به همکاری دارم

طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

آموزش جاوا اسکریپت – رویداد ها در جاوا اسکریپت ۲


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

با بخش دوم از رویداد ها در جاوا اسکریپت از سری آموزش جاوا اسکریپت در خدمت شما هستیم.

در بخش اول رویداد ها در جاوا اسکریپت با نحوه کار رویدادها و همچنین یک رویداد مهم کلیک آشنا شدیم. در این بخش قصد داریم بقیه دسته بندی مهم رویدادها را بررسی کنیم.

 

رویدادهای کیبورد

در این بخش از رویداد ها در جاوا اسکریپت قصد داریم رویداد کیبورد را بررسی کنیم.

یک رویداد keyboard زمانی اجرا می شود که کاربر یک دکمه از کیبورد را فشار یا رها کند.

بعضی از مهمترین رویدادهای کیبورد را در زیر می بینید :

رویداد کلید پایین (onkeydown)

رویداد keydown زمانی اجرا می شود که کاربر یک کلید را فشار می دهد. و می توانید آن را با هنلدر onkeydown مدیریت کنید.

در مثال زیر به شما یک پیام alert را زمانی که یک کلید از کیبورد فشار داده می شود نشان می دهد.

رویداد کلید بالا (onkeyup)

رویداد keyup زمانی اجرا می شود که کاربر یک کلید را فشار داده شده روی کیبورد را رها می کند می دهد. و می توانید آن را با هنلدر onkeyup مدیریت کنید.

در مثال زیر به شما یک پیام alert را زمانی که رویداد کلید بالا اجرا می شود, نشان می دهد.

رویداد فشردن کلید (onkeypress)

رویداد keypress زمانی اجرا می شود یک کاربر کلیدی را از کیبودر می فشارد که مقدار کاراکتری را ایجاد نمی کند مثلا کلیدهای Ctrl, Shift, Alt, Esc و کلیدهای جهت نما و غیره.

در مثال زیر به شما یک پیام alert را زمانی که رویداد فشردن کلید اجرا می شود, نشان می دهد.

رویدادهای فرم

در این بخش از رویداد ها در جاوا اسکریپت قصد داریم رویدادهای فرم را بررسی کنیم.

یک رویداد form زمانی اجرا می شود که تمرکز روی فرم برداشته یا دریافت می شود یا اینکه کاربر مقداری را در اینپوت فرم تایپ می کند, گزینه ای از لیست را انتخاب می کند و غیره.. .

بعضی از مهمترین رویدادهای فرم را در زیر می بینید :

حتما بخوانید  آموزش جاوا اسکریپت – ساخت پنجره نمایش پیام در جاوا اسکریپت

رویداد تمرکز (onfocus)

رویداد focus زمانی اتفاق می افتد که کاربر به روی یک الان صفحه وب با ماوس یا کلیک روی آن برای نوشتن متمرکز می شود. و می توانید آن را با هنلدر onfocus مدیریت کنید.

در مثال زیر زمانی که روی ورودی input متمرکز می شویم, پس زمینه المان به زرد رنگ تغییر می کند.

نکته: کلمه کلید this داخل هندلر رویداد اشاره به امن المان داخل آن را دارد (جایی که رویداد در حال رخ دادن است).

رویداد blur

رویداد blur زمانی که ما تمرکز را از روی المان مورد نظر یا صفحه بر می داریم اجرا می شود. و می توانید آن را با هنلدر onblur مدیریت کنید.

در مثال زیر زمانی که تمرکز را از ورودی input بر میداریم, یک پیام alert نمایش داده می شود.

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

رویداد تغییر (onchange)

رویداد change زمانی که مقدار یک المان تغییر می کند اجرا می شود. و می توانید آن را با هنلدر onchange مدیریت کنید.

مثال زیر به شما یک پیام alert را زمانی که گزینه لیست انتخابی را تغییر می دهیم نمایش داده می شود.

رویداد سابمیت (onsubmit)

رویداد submit زمانی که کاربر با دکمه مورد نظر فرم را ارسال می کند اجرا می شود. و می توانید آن را با هنلدر onsubmit مدیریت کنید.

مثال زیر به شما یک پیام alert را زمانی که فرم را به سرور سابمیت می کنیم نمایش داده می شود.

 

حتما بخوانید  آموزش جاوا اسکریپت - اعداد در جاوا اسکریپت ۱

رویداد های سند/پنجره

برای آخرین نوع از رویداد ها در جاوا اسکریپت قصد داریم رویدادهای window/document را بررسی کنیم.

رویدادها همچنین در شرایطی که صفحه لود می شود یا اندازه مرورگر را تغییر می دهیم, اجرا می شود.

بعضی از مهمترین رویدادهای سند/پنجره را در زیر می بینید :

رویداد بارگذاری (onload)

رویداد load زمانی که بارگذاری یک صفحه وب در مرورگر وب کامل شد, اجرا می شود.و می توانید آن را با هنلدر onload مدیریت کنید.

مثال زیر به شما یک پیام alert را بعد از اینکه لود صفحه کامل شد نمایش داده می شود.

توجه داشته باشید اینجا ما این هندلر را در بخش body استفاده کردیم تا کل صفحه قابل نمایش لود را کنترل کند.

رویداد unload

رویداد unload زمانی اتفاق می افتد که کاربر صفحه فعلی را رها کنید.و می توانید آن را با هنلدر onunload مدیریت کنید.

مثال زیر به شما یک پیام alert را زمانی که قصد ترک صفحه فعلی را دارید نمایش داده می شود.

رویداد تغییر اندازه (onresize)

رویداد resize زمانی که یک کاربر اندازه صفحه مروگر را تغییر می دهد رخ می دهد. همچنین رویداد resize در زمانی که پنجر مرورگر را minimize/maximize می کنید, اجرا می شود.

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

مثال زیر به شما یک پیام alert حاوی عرض و ارتفاع جدید را هنگام تغییر اندازه مرورگر نمایش می دهد.

 

امیدوارم  از قسمت آخر رویداد ها در جاوا اسکریپت نهایت استفاده را برده باشید.

در بخش بعدی با نحوه کار با رشته ها در جاوا اسکریپت آشنا می شوید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

اگر مفید بود, لطفا به اشترک بگذارید تا دوستان دیگر نیز بهره ببرند

حسن شفیعی
مدرس ، پنتستر ، توسعه دهنده اپلیکیشن های تحت وب ، عضو مرکز حامی نخبگان و از مدیران و اعضای رسمی تیم امنیتی آشیانه هستم . علاقه خاصی به زبان های تحت وب, امنیت شبکه و لینوکس دارم و هر روز تلاش می کنم به این حوزه ها مسلط تر شوم و اطلاعاتم را در وب به اشتراک بگذارم

دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

آموزش طراحی وب سایت

سورس فروشگاهی دیجی کالا

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما

logo-samandehi

دانلود کتاب

عضویت رایگان خبرنامه