تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


یکی از قابلیت های بسیار مفید و کاربردی استفاده از جاوا اسکریپت (javascript) در طراحی صفحات و برنامه های تحت وب، واکنش های تعاملی آن متناسب با رفتار کاربر است، به فرض هنگامی که روی یک دکمه در صفحه ای کلیک می شود، می توان همزمان یا پس از آن، تابعی مبتنی بر جاوا اسکریپت را در سمت کاربر اجرا کرد و پیش از ارسال درخواست به سرور، پردازش های اولیه را بر روی آن انجام داد، این قدرت جاوا اسکریپت بیشتر متکی بر عناصری به نام رویداد (event) است که با وقوع آنها، عملیات تعریف شده خاصی در مرورگر اجرا می شود، در ادامه آموزش در این باره بیشتر خواهیم گفت.
معنی رویداد (event) در جاوا اسکریپت
به طور ساده رویداد (event) در برنامه نویسی جاوا اسکریپت به معنی اتفاقی در یک صفحه وب است که می تواند عامل آن، کاربر یا به فرض بارگذاری کامل یک صفحه باشد، بعد از بروز این اتفاق (رویداد)، مفسر جاوا اسکریپت مرورگر، آن را شناسایی کرده و متناسب با تابع تعریف شده، آن را اجرا می کند، لذا همانطور که پیش تر در بحث توابع (functions) دیدیم، رویدادها در واقع حکم استارت، برای موتور توابع را بازی می کنند و یک تابع بدون رویداد معمولا قابل اجرا نیست، برای آشنایی بیشتر به مثال زیر توجه کنید (کافی است کد را در یک صفحه html کپی و آن را تست کنید).


<script type="text/javascript">
function hello(){
    alert ("به آموزش جاوا اسکریپت خوش آمدید");
}
</script>

نحوه فراخوانی تابع بالا با رویداد onclick:


<input type="button" name="button" value="کلیک کنید" onclick="hello();" />

لیست رویداد ها در جاوا اسکریپت
رویداد ها در جاوا اسکریپت فراوانی و تنوع زیادی دارند، از این رو لیست تقریبا جامعی از آنها را در زیر تهیه کرده ایم، ذکر این نکته نیز ضروری است که رویدادهای جاوا اسکریپتی در تمام مرورگرها و نسخه های مختلف آنها به یک میزان و به یک شکل پشتیبانی نمی شوند، لذا در به کار بردن آنها باید به این مورد نیز دقت شود.
addEventListener چیست؟
addEventListener که در برخی رویداد های بالا ذکر شده، به معنی شیوه استاندارد و تعریف شده W3C است که توسط آن با اجرای یک رویداد بر روی یک عنصر،  مرورگر گوش به زنگ آن بوده و (بدون نسبت دادن مستقیم آن رویداد) توابع مربوط به آن فراخوانی می شوند، این امکان در مرورگر اینترنت اکسپلورر پشتیبانی نمی شود، ولی معادل آن attachEvent است (به جزء اینترنت اکسپلورر، سایر مرورگر ها از addEventListener پشتیبانی می کنند)، به طور مثال تابع زیر با کلیک بر روی بلاک با آی دی فرضی black اجرا می شود:


<script type="text/javascript">
function showtext(){
    alert("بر روی بلاک مشکی کلیک شد");
}
var myblock = document.getElementById("black");
if (myblock.addEventListener){
    //تمام مرورگرها به جزء اینترنت اکسپلورر
    myblock.addEventListener("click", showtext, false);
    }
    else {
        //اینترنت اکسپلورر
        myblock.attachEvent("on"+"click", showtext);
}
</script>


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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | رویدادها در جاوا اسکریپت</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
#black{
    width:100px;
    height:100px;
    background-color:#333;
    display:block;
    margin:4px;
}
</style>
<script type="text/javascript">
<!-- پنهان کردن کد از مرورگرهایی که جاوا اسکریپت را پشتیبانی نمی کنند
function hello(){
    alert ("به آموزش جاوا اسکریپت خوش آمدید");
}
function add(){
        document.getElementById("text").innerHTML = "این متن با اجرا شدن رویداد onmouseover در بلاک div با آی دی text چاپ می شود!";
}
function clean(){
        document.getElementById("text").innerHTML = '';
}
-->
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!<br />
</noscript>
مثال برای رویداد onclick :
<br /><br />
<input type="button" value="کلیک کنید" onclick="hello();" />
<hr />
<br /><br />
مثال برای رویداد onmouseover و onmouseout :
<br /><br />
<input type="button" value="ماوس را بر روی این دکمه بیاورید" onmouseover="add();" />
<input type="button" value="ماوس را از روی این دکمه خارج کنید" onmouseout="clean();" />
<div id="text"></div>
<hr />
<br /><br />
مثال برای حالت addEventListener :
<br /><br />
بر روی بلاک زیر کلیک کنید.
<div id="black"></div>
<script type="text/javascript">
<!--
function showtext(){
    alert("بر روی بلاک مشکی کلیک شد");
}
var myblock = document.getElementById("black");
if (myblock.addEventListener){
    //تمام مرورگرها به جزء اینترنت اکسپلورر
    myblock.addEventListener("click", showtext, false);
    }
    else {
        //اینترنت اکسپلورر
        myblock.attachEvent("on"+"click", showtext);
}
-->
</script>
<hr />
<br /><br />
مثال برای حالت onfocus و onblur :
<br /><br />
<input type="text" value="در این فیلد کلیک کنید..." onfocus="myFocus(this);" onblur="myBlur(this);" />
<script type="text/javascript">
<!--
function myFocus(element){
    if (element.value == element.defaultValue){
        element.value = '';
     }    
}
function myBlur(element){
    if (element.value == ''){
        element.value = element.defaultValue;
     }    
}
-->
</script>
<hr />
<br /><br />
مثال برای حالت onkeydown و onkeyup :
<br /><br />
<input type="text" id="first" value="در این فیلد متنی تایپ کنید..." onkeydown="myKeydown(this);" onkeyup="myKeyup(this);" />
<script type="text/javascript">
<!--
function myKeydown(element){
    if (element.value == element.defaultValue){
        element.value = '';
     }    
}
function myKeyup(element){
    if (element.value == ''){
        element.value = element.defaultValue;
     }    
}
-->
</script>
</body>
</html>


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, خواهد, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین