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

4 سال پیش

امتیاز دهید post

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

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

رویداد چیست؟

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

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

توسعه دهندگان می توانند از این رویدادها برای اجرای پاسخ های رمزگذاری شده جاوا اسکریپت استفاده كنند كه باعث بسته شدن دكمه ها در پنجره ها، نمایش پیام ها به كاربران، اعتبار سنجی داده ها و تقریباً هر نوع پاسخی دیگر كه می توان تصور كرد.

رویدادها بخشی از مدل شی Document (DOM) سطح 3 هستند و هر عنصر HTML حاوی مجموعه ای از رویدادها است که می تواند کد جاوا اسکریپت را تحریک کند.

لطفاً برای درک بهتر مرجع رویداد HTML این آموزش کوچک را طی کنید. در اینجا چند مثال برای درک رابطه بین رویداد و جاوا اسکریپت خواهیم دید –

رویداد onclick

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

مثال زیر را امتحان کنید.

&lt;html&gt;
   &lt;head&gt;   
      &lt;script type = "text/javascript"&gt;
         &lt;!--
            function sayHello() {
               alert("Hello World")
            }
         //--&gt;
      &lt;/script&gt;      
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Click the following button and see result&lt;/p&gt;      
      &lt;form&gt;
         &lt;input type = "button" onclick = "sayHello()" value = "Say Hello" /&gt;
      &lt;/form&gt;      
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<!--

function sayHello() {

alert("Hello World")

}

//-->

</script>

</head>

<body>

<p>Click the following button and see result</p>

<form>

</form>

</body>

</html>

خروجی

Click the following button and see result

1	Click the following button and see result

رویداد onsubmit

onsubmit رویدادی است که هنگام تلاش برای ارسال فرم رخ می دهد. می توانید اعتبار فرم خود را در برابر این نوع رویداد قرار دهید.

مثال

مثال زیر نحوه استفاده از onsubmit را نشان می دهد. در اینجا ما قبل از ارسال داده های فرم به سرور وب ، یک تابع ()validate را فراخوانی می کنیم. اگر تابع validate () درست برگردد ، فرم ارسال می شود، در غیر این صورت داده ها را ارسال نمی کند.

مثال زیر را امتحان کنید.

&lt;html&gt;
   &lt;head&gt;   
      &lt;script type = "text/javascript"&gt;
         &lt;!--
            function validation() {
               all validation goes here
               .........
               return either true or false
            }
         //--&gt;
      &lt;/script&gt;      
   &lt;/head&gt;
   
   &lt;body&gt;   
      &lt;form method = "POST" action = "t.cgi" onsubmit = "return validate()"&gt;
         .......
         &lt;input type = "submit" value = "Submit" /&gt;
      &lt;/form&gt;      
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<!--

function validation() {

all validation goes here

.........

return either true or false

}

//-->

</script>

</head>

<body>

.......

</form>

</body>

</html>

onmouseover و onmouseout

این دو نوع رویداد به شما کمک می کنند تا جلوه های زیبایی را با تصاویر یا حتی متن ایجاد کنید. رویداد onmouseover هنگامی که ماوس خود را بر روی هر عنصری می آورید و هنگامی که ماوس خود را از آن عنصر خارج می کنید ، رویداد onmouseout فعال می شود. مثال زیر را امتحان کنید.

&lt;html&gt;
   &lt;head&gt;   
      &lt;script type = "text/javascript"&gt;
         &lt;!--
            function over() {
               document.write ("Mouse Over");
            }            
            function out() {
               document.write ("Mouse Out");
            }            
         //--&gt;
      &lt;/script&gt;      
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Bring your mouse inside the division to see the result:&lt;/p&gt;      
      &lt;div onmouseover = "over()" onmouseout = "out()"&gt;
         &lt;h2&gt; This is inside the division &lt;/h2&gt;
      &lt;/div&gt;         
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<!--

function over() {

document.write ("Mouse Over");

}

function out() {

document.write ("Mouse Out");

}

//-->

</script>

</head>

<body>

<p>Bring your mouse inside the division to see the result:</p>

<h2> This is inside the division </h2>

</div>

</body>

</html>

منبع.

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

امتیاز دهید post

نویسنده مطلب saber

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

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

رویداد چیست؟

رویداد onclick

خروجی

رویداد onsubmit

مثال

onmouseover و onmouseout

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

دیدگاه شما

بدون دیدگاه

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

رویداد چیست؟

رویداد onclick

خروجی

رویداد onsubmit

مثال

onmouseover و onmouseout

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه