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


انواع رویدادها در زبان جاوا اسکریپت


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

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

در زبان جاوا اسکریپت انواع رویدادها وجود دارد که با استفاده از آنها میتوانیم برای هر حرکتی در صفحه یک عملیاتی را انجام داد، منظور از هر حرکتی ،کلیک کردن موس، کلیدهای صفحه کلید، اسکرول کردن و ... است، که با استفاده از یک سری از کلمات کلیدی میتوانیم  انواع دستورات را اجرایی کرد.
 
یک پوشه جدید با نام javascripttest ایجاد کرده و در همین پوشه یک صفحه از نوع html با نام page1 ایجاد میکنیم.
ساختار کلی صفحه html را ایجاد کرده و در بخش body تگ script را برای کدها جاوا اسکریت ایجاد میکنیم.
اولین کار این است که تشخیص دهیم رویدادها را کجا باید ببینیم در واقع آیا همه اشیاء، همه رویدادها را دارند؟ یا اینکه همه اشیاء همه رویداد ها را میپذیرند؟ نه قطعا به این شکل رفتار نمیکنن!
منظور از اشیا که در بالا گفته شد همه تگ ها html است که آیا همه آنها همه رویدادها را میپذیرند؟یا خیر؟.
برای مثال یک input میتواند رویداد onchange یا فکوس را بشناسد.اما شاید یک تگ div نتواند این رویدادها را دریافت کند. به همین خاطر این رویداد ها را با چند مثال توضیح میدهیم.

رویدادهای موس:

یک تگ div خارج از script ایجاد میکنیم که ببینیم تگی مثل div چه رویدادهایی را میتواند انجام دهد.یا اینکه از کجا بفهمیم چه رویدادهایی را انجام میدهد.
در div اگر کلمه onmouse را بنویسیم خواهید دید که تمام رویداد های موس را برای شما نمایش میدهد که میتواند بر روی این تگ رویداد پذیرد.
از بین آنها، کلمه onmousedown انتخاب میکنیم و به محض انتخاب این کلمه روبروی آن یک دوبل کتیشن قرار میگیرد که درون آن  میتوانید کد مربوط به هر عملی را بنویسید برای مثال میتواند در زمان کلیک و تنها فرو رفتن موس برای شما یک پیغام را نمایش دهد.و برنامه به این صورت میشود که هر زمان بر روی div کلیک موس فرو رود برای شما یک پیغام نمایش داده میشود.
    <div onmousedown="alert('darsman.com')">
            Hello
    </div>
حال بجای اینکه به کاربر یک پیام را نمایش دهد شما میتوانید انواع دستورات را در آنجا قرار دهید و یا اینکه یک تابع را فراخوانی کنید.
برای مثال میتوانید از رویداد onmouseup استفاده کنید که در زمان رها شدن موس برای شما یک رویدادی را انجام دهد.یا اینکه میتوانیم برنامه را به روشی طراحی کنیم که زمان کلیک و فرو روفتن موس بر روی  div یک کلمه نمایش داده شود و در حالت رها کردن کلیک موس کلمه دیگر نمایش داده شود.
 
    <div onmousedown="fun1()" onmouseup="fun2()" id="str" >
        Hello
    </div>
    <script>
        function fun1() {
            document.getElementById("str").innerText='darsman.com'
        }
        function fun2() {

            document.getElementById("str").innerText="DARSMAN.COM"
        }
    </script>


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

          <div onclick="alert('hello')">
          darsman.com
          </div>
 

رویدادهای صفحه کلید:

رویدادهای صفحه کلید همانند رویداد موس onkeydown و onkeyup برای دکمه های صفحه کلید دارد که به کمک این رویدادها  میتوان یک input را به روشی درست کرد که در زمان فرو رفتن و رها کردن کلید رنگ input تغییر کند.برای اینکار ابتدا در قسمت head یک تگ style ایجاد کرده و درون آن دو کلاس css با نام bgred با background قرمز و به همین ترتیب یک کلاس دیگر با نام bgblue با background آبی ایجاد میکنیم.
<head>
    <style>
        .bgred{
            background: # F00;
        }
        .bgblue{
            background: #00F;
        }
    </style>
</head>
یک input با id مشخص str ایجاد کرده و رویدادهای onkeydown و onkeyup را به input اضافه میکنیم.
<input type="text" id="input" onkeydown="fun1()" onkeyup="fun2()">

 

در ادامه کار در قسمت تگ script یک تابع برای زمان فرو رفتن کلید و یک تابع دیگر برای رها کردن کلید ایجاد میکنیم،
درون تابع ها با استفاده از document، input مد نظرمان را پیدا میکنیم و با استفاده از classList.add کلاس های css را که در قسمت head ساختیم  استفاده میکنیم. به این صورت که تابع اول برای  زمان فرو رفتن کلید از کلاس bgred و در تابع دوم از کلاس bgblue برای رها کردن کلید استفاده میکنیم.توجه داشته باشید که این دو تابع فقط برای یک بار عمل میکند برای اینکه رنگ پس زمینه  input مدام تغییر کند لازم است ک بعد از تغییر رنگ از classList.remove استفاده کنیم، به این صورت که در تابع اول برای classList.remove از کلاس bgblue و در تابع دوم از bgred استفاده کنیم.
    <script>
        function fun1() {
            document.getElementById("input").classList.add("bgred")
            document.getElementById("input").classList.remove("bgblue")
            }
        function fun2(){
            document.getElementById("input").classList.add("bgblue")
            document.getElementById("input").classList.remove("bgred")
        }
    </script>
 و اخرین رویداد مربوط به این بخش onkeypress خواهد بود که از ترکیب دو تابع بالا که گفته شد بدست آمده است.

رویدادهای اشیاء فرمی:

از این رویدادها بیشتر در input استفاده میشود که با ورود و خروج شدن اشاره گر موس میتواند یک عملیاتی را انجام دهد که با نام onfocus برای ورود و onblur برای خروج اشاره‌گر موس استفاده میشود.
 
یک input ایجاد کرده و این دو رویداد را به آن میدهیم و id آنرا firstname قرار میدهیم.
و داخل تگ script دو تابع برای انجام این دو رویداد مینویسیم که با onfocusکردن رنگ آن تغییر کند و با onblur کردن رنگ آن به رنگ دیگر تغییر یابد.
    <input type="text" id="input" onfocus="fun1()" onblur="fun2()"  >
    <script>
        function fun1() {
            document.getElementById("input").classList.add("bgred")
            document.getElementById("input").classList.remove("bgblue")
           
        }
        function fun2(){
            document.getElementById("input").classList.add("bgblue")
            document.getElementById("input").classList.remove("bgred")
        }
    </script>
رویداد دیگر که در این بخش استفاده میشود onchenge است که در زمان تغییرات تابپی ایجاد میشود یا اینکه زمانی که در input تایپ رخ میدهد.

رویدادهای ویندوزی:

در این گونه از رویدادها، رویدادی همانند scroll وجود دارد.در بخش body امکان این را فراهم میکنیم که صفحه html ما اسکرول را پیدا کند و در تگ body رویداد onscroll  را نوشته که تابع fun3  را فراخوانی کند.
<body onscroll="fun3()">
darsman.com<br/>
darsman.com<br/>
darsman.com<br/>
darsman.com<br/>
darsman.com<br/>
darsman.com<br/>
darsman.com<br/>
darsman.com<br/>
darsman.com<br/>
در تگ script یک متغییر با نام  x  و یک تابع تعریف میکنیم برای زمانی که صفحه را اسکرول کردیم یک واحد به این متغییر اضافه کند و اگر در آخر به عدد 10 رسید یک پیام را نمایش دهد.
    <script>
        var x=0;
        function fun3() {
            x++;
            if(x===10)
            {
                alert("the end")
            }           
        }
    </script>
</body>
 


نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد .
برای ارسال نظر نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.
16 جلسه برای دوره آموزش جاوا اسکریپت-مقدماتی تا متوسط

درس 1
مقدمه ای بر زبان برنامه نویسی جاوا اسکریپت
29 دقیقه / رایگان

درس 2
ساختار کلی برنامه در زبان جاوا اسکریپت
33 دقیقه / رایگان

درس 3
عملگرها در زبان جاوا اسکریپت
35 دقیقه / رایگان

درس 4
روشهای نمایش اطلاعات در خروجی در زبان جاوا اسکریپت
31 دقیقه / رایگان

درس 5
روشهای دریافت داده از ورودی و تغییر نوع داده در زبان جاوا اسکریپت
26 دقیقه / رایگان

درس 6
توابع و رویدادها در زبان جاوا اسکریپت
29 دقیقه / رایگان

درس 7
انواع رویدادها در زبان جاوا اسکریپت
42 دقیقه / رایگان

درس 8
دستورات کنترلی در زبان جاوا اسکریپت
25 دقیقه / رایگان

درس 9
حلقه های تکرار در زبان جاوا اسکریپت
20 دقیقه / رایگان

درس 10
اشیا و آرایه ها در زبان جاوا اسکریپت
41 دقیقه / رایگان

درس 11
شی گرایی در زبان جاوا اسکریپت
40 دقیقه / رایگان

درس 12
متد های کار با رشته ها و اعداد در زبان جاوا اسکریپت
35 دقیقه / رایگان

درس 13
متدهای کار با آرایه ها، تاریخ و زمان در جاوا اسکریپت
26 دقیقه / رایگان

درس 14
DOM در جاوا اسکریپت (قسمت اول)
33 دقیقه / رایگان

درس 15
DOM در جاوا اسکریپت (قسمت دوم)
25 دقیقه / رایگان

درس 16
BOM در جاوا اسکریپت (browser object model )
28 دقیقه / رایگان

دوره آموزش جاوا اسکریپت-مقدماتی تا متوسط


تعداد جلسات 16 جلسه
مدت زمان 470 دقیقه
سطح مهارت مقدماتی تا متوسط
زبان فارسی
دانشجو 62 دانشجو
گواهی نامه ندارد
قیمت دوره : 0 تومان
درحال برگزاری
مهدی عباسی
مهدی عباسی

درباره مدرس :

مدیر‌ عامل‌ شرکت آریا‌ نرم‌‌ افزار دارنده مدرک کارشناسی‌ ارشد مهندسی کامپیوتر 12‌ سال سابقه تدریس دروس کامپیوتر را در دانشگاههای دولتی، آزاد، پیام‌نور ملایر، شهیدشمسی‌پور تهران و تدریس برنامه‌نویسی در انیستیتو ایزایران، مجتمع فنی و موسسه راه‌آینده تهران دارا میباشد و تا به حال راهنمایی انجمنهای علمی دانشگاه و صدها پروژه دانشجویی را برعهده داشته است. تخصص اصلی: با داشتن گواهی‌نامه‌های معتبر تدریس از انیستیتو‌ ایزایران، راه آینده‌تهران و سازمان‌فنی‌حرفه‌ای، تدریس و آموزش‌ دروس کامپیوتر، ‌برنامه‌نویسی کامپیوتر و کلاسهای کنکور کارشناسی و کارشناسی‌ارشد میباشد.همچنین تجربه داوری و نظارت مسابقات برنامه‌نویسی کشوری‌ACM را در سالهای متعدد داشته و تیم مورد رهبری ایشان در 3سال متوالی مقام اول مسابقات کشوری را از آن خود کرده است.ایشان مقالاتی در زمینه شبکه‌های کامپیوتری، تکنیک‌های وزارت دفاع و ... به ثبت رسانده و مشاور و کارشناس در طراحی و برنامه نویسی بیش از 50‌برنامه کاربردی تحت وب و ویندوز و موبایل میباشد. افتخارات دیگر:کسب مقام دوم ایده‌های برتر در مسابقات استارت‌آپ و بکند کشوری را نام برد.

دوره آموزش جاوا اسکریپت-مقدماتی تا متوسط

دوره آموزش جاوا اسکریپت-مقدماتی تا متوسط

مهدی عباسی


62
رایگان
470 دقیقه
جزئیات دوره
دوره رایگان آموزش جاوا - مقدماتی تا متوسط

دوره رایگان آموزش جاوا - مقدماتی تا متوسط

مهدی عباسی


72
رایگان
685 دقیقه
جزئیات دوره
آموزش مفاهیم Delegate ها در سی شارپ

آموزش مفاهیم Delegate ها در سی شارپ

احمد غیاثوند


11
رایگان
30 دقیقه
جزئیات دوره
آموزش Modular Application در اندروید

آموزش Modular Application در اندروید

احمد غیاثوند


10
رایگان
12 دقیقه
جزئیات دوره
آموزش پیغام Toast سفارشی در اندروید

آموزش پیغام Toast سفارشی در اندروید

احمد غیاثوند


15
رایگان
22 دقیقه
جزئیات دوره
دوره آموزش سی شارپ پیشرفته

دوره آموزش سی شارپ پیشرفته

مهدی عباسی


34
رایگان
100 دقیقه
جزئیات دوره
تحلیل مدارهای الکتریکی پایه 2

تحلیل مدارهای الکتریکی پایه 2

علیرضا نوروزی


18
200,000 تومان
630 دقیقه
جزئیات دوره
دوره حل تمرین سی پلاس پلاس

دوره حل تمرین سی پلاس پلاس

مهدی احمدی


28
25,000 تومان
1550 دقیقه
جزئیات دوره