رویدادها در جاوااسکریپت

از ویکی کد
پرش به ناوبری پرش به جستجو
دورهٔ آموزشی جاوااسکریپت
Javascript.jpg
جاوااسکریپت
موارد آموزشی
۱آموزش جاوااسکریپت
۲مقدمه‌ای بر جاوااسکریپت
۳قوانین و اصول اولیه زبان جاوااسکریپت
۴خروجی جاوااسکریپت
۵عبارت‌ها در جاوااسکریپت
۶شیوهٔ نوشتن دستورات در جاوااسکریپت
۷نظرات یا کامنت‌ها (Comments) در جاوااسکریپت
۸متغیرها در جاوااسکریپت
۹عملگرهای جاوااسکریپت
۱۰عملگرهای ریاضی در جاوااسکریپت
۱۱عملگرهای مقداردهی در جاوااسکریپت
۱۲انواع داده‌ها در جاوااسکریپت
۱۳توابع در جاوااسکریپت
۱۴اشیاء (object) در جاوااسکریپت
۱۵رویدادها در جاوااسکریپت
۱۶رشته‌های متنی (string) در جاوااسکریپت
۱۷متدهای نوع داده متنی یا رشته‌ای در جاوااسکریپت
۱۸اعداد در جاوااسکریپت
۱۹متدهای داده‌های عددی در جاوااسکریپت
۲۰آرایه‌ها در جاوااسکریپت
۲۱متدهای آرایه در جاوااسکریپت
۲۲مرتب‌سازی آرایه‌ها در جاوااسکریپت
۲۳متدهای پیمایش آرایه در جاوااسکریپت
۲۴اشیاء تاریخ و زمان در جاوااسکریپت
۲۵فرمت‌های تاریخ و زمان در جاوااسکریپت
۲۶متدهای دریافت تاریخ و زمان در جاوااسکریپت
۲۷متدهای تنظیم زمان و تاریخ در جاوااسکریپت
۲۸شی ریاضی (Math) در جاوااسکریپت
۲۹ایجاد عدد تصادفی در جاوااسکریپت
۳۰مقادیر بولین (Booleans) در جاوااسکریپت
۳۱عملگرهای منطقی و مقایسه‌ای در جاوااسکریپت
۳۲ساختار if else و else if در جاوااسکریپت
۳۳تکه کد Switch در جاوا اسکریپت
۳۴حلقه For در جاوااسکریپت
۳۵حلقه While در جاوااسکریپت
۳۶کلمات کلیدی Break و Continue در جاوااسکریپت
۳۷تبدیل نوع داده‌ها در جاوااسکریپت
۳۸عملیات‌های بیتی در جاوااسکریپت
۳۹عبارات با قاعده در جاوااسکریپت
۴۰خطاها در جاوااسکریپت - رخ دادن خطا و رفع آن
۴۱Scope در جاوااسکریپت
۴۲Hoisting یا جا به جایی کدها در جاوااسکریپت
۴۳استفاده از مد یا حالت سخت‌گیرانه (use strict) در جاوااسکریپت
۴۴کلمه کلیدی This در جاوااسکریپت
۴۵کلمه کلیدی Let در جاوااسکریپت
۴۶ثابت‌ها در جاوااسکریپت
۴۷تعریف توابع به صورت پیکان
۴۸کلاس‌ها در جاوااسکریپت
۴۹اشکال‌زدایی در جاوااسکریپت
۵۰راهنمای استایل و استانداردهای کدنویسی در جاوااسکریپت
۵۱بهترین تمرینات جاوااسکریپت
۵۲اشتباهات رایج در برنامه‌نویسی جاوااسکریپت
۵۳کارایی در جاوااسکریپت
۵۴کلمات رزرو شده در جاوااسکریپت
۵۵ورژن‌های جاوااسکریپت
۵۶ECMAScript 5 - JavaScript 5
۵۷ECMAScript 6 - ECMAScript 2015
۵۸جیسون (JSON) در جاوااسکریپت
فرم‌ها
۱فرم‌ها در جاوااسکریپت
۲API ارزشیابی در جاوااسکریپت
اشیاء (object) در جاوااسکریپت
۱تست
۲تست
۳تست
۴تست
۵تست
۶تست
۷تست
JS Functions
۱تست
۲تست
۳تست
۴تست
۵تست
۶تست
JS HTML DOM
۱تست
۲تست
۳تست
۴تست
۵تست
۶تست
۷تست
۸تست
۹تست
۱۰تست
۱۱تست
۱۲تست
۱۳تست

رویداد HTML "چیزهایی" هستند که برای عناصر HTML ای اتفاق می‌افتد. [۱]

زمانیکه شما از جاوااسکریپت درون صفحات HTML استفاده می‌کنید، جاوااسکریپت می‌تواند به این رویدادها "واکنش" نشان دهد.

رویدادها در HTML

یک رویداد در HTML می‌تواند کاری باشد که مرورگر انجام می‌دهد یا کاری باشد که یک کاربر انجام می‌دهد.

در زیر می‌توانید مثال‌هایی از رویدادها در HTML را ببینید:

  • زمانیکه بارگذاری یک صفحه HTML به طور کامل به پایان می‌رسد.
  • زمانیکه یک مقدار فیلد ورود داده (به انگلیسی: input field) تغییر می‌کند.
  • زمانیکه بر روی یک دکمه HTML ای کلیک می‌شود.

اغلب، زمانیکه یک رویداد رخ می‌دهد، شما می‌خواهید یک کاری را انجام دهید.

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

زبان HTML به شما اجازه می‌دهد که به وسیلهٔ کدهای جاوااسکریپت و خاصیت‌هایی برای مدیریت رویداد (به انگلیسی: event handler) که در HTML وجود دارند، رویدادهای عناصر مختلف را مدیریت کنید:

با علامت تک کوتیشن « '»:

<element event='some JavaScript'>

با دو کوتیشن « "»:

<element event="some JavaScript">

در مثال زیر، ویژگی​onclick​(با کد)، به یک عنصر​<button>​در HTML اضافه شده‌است:

مثال

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

در مثال بالا، کد جاوااسکریپت محتوای عنصر را که id (به فارسی: شناسه) آن برابر با کلمهٔ "demo" است را تغییر می‌دهد.

در مثال بعدی، کد ما محتوای عنصر HTML مربوط به خود را (با استفاده از دستور​this.innerHTML​) تغییر می‌دهد:

مثال

<button onclick="this.innerHTML = Date()">The time is?</button>


مثال

<button onclick="displayDate()">The time is?</button>

رویدادهای پر استفادهٔ HTML

در اینجا می‌توانید لیستی از رویدادهای پر استفاده در HTML را ببینید:

توضیحات رویداد
زمانیکه محتوای یک عنصر HTML تغییر می‌کند. Onchange
زمانیکه کاربر بر روی یک عنصر HTML کلیک می‌کند. Onclick
زمانیکه کاربر موس خود را روی یک عنصر HTML می‌برد. Onmouseover
زمانیکه کاربر موس خود را از محدوده یک عنصر HTML خارج می‌کند. Onmouseout
زمانیکه کاربر یک کلید از کیبرد را می‌فشارد. Onkeydown
زمانیکه بارگذاری صفحه به طور کامل پایان می‌پذیرد. Onload

لیست مرجع وب سایت: Wikicod در مورد رویدادهای HTML DOM در جاوااسکریپت بسیار طولانی‌تر است.

جاوااسکریپت چه کاری می‌تواند انجام دهد؟

رویدادها می‌توانند برای مدیریت و بررسی صحت و سقم مواردی همچون: داده‌ای که کاربر به عنوان ورودی وارد می‌کند، کارهایی که کاربر و مرورگر انجام می‌دهند استفاده شوند:

  • کارهایی که باید هر دفعه که صفحه بارگذاری شد، انجام شوند.
  • کارهایی که می‌بایست زمانیکه صفحه بسته شد، انجام شوند.
  • عملی که می‌بایست زمانیکه کاربر روی یک دکمه کلیک می‌کند انجام شود.
  • محتوایی که می‌بایست زمانیکه کاربر دادهٔ ورودی خود را وارد می‌کند، بررسی شود.
  • و …

روشهای گوناگونی می‌توانند استفاده شوند تا به جاوااسکریپت این اجازه را بدهد که با رویدادها کار کند:

  • خاصیت (به انگلیسی: attributes)، رویداد (به انگلیسی: event) در HTML می‌تواند کدهای جاوااسکریپت را به صورت مستقیم اجرا کند.
  • ویژگی رویداد (به انگلیسی: event) در HTML می‌تواند توابع جاوااسکریپت را فراخوانی کند.
  • شما می‌توانید مدیریت‌کنندهٔ رویداد (به انگلیسی: event handler) خود را به عناصر HTML اضافه کنید.
  • شما می‌توانید از رخ‌دادن رویدادها یا مدیریت آن‌ها جلوگیری کنید.
  • و …

شما مطالب بیشتری را در مورد رویدادها و مدیریت‌کنندهٔ رویدادها در فصل HTML DOM خواهید آموخت.

منابع آموزشی