دوره مجازی جاوااسکریپت (جلسه 10): event ها و کنترل رفتار کاربران در جاوااسکریپت

دسته بندی: جاوا اسکریپت
زمان مطالعه: ۲ دقیقه
۲۰ خرداد ۱۳۹۴

به جرات میشه گفت چیزی که جاوااسکریپت رو در سمت وب بسیار کاربردی، قدرتمند و جذاب کرده توانایی اون در مدیریت و کنترل رفتار کاربران و مرورگر اون ها در صفحات وب هست . امروز می خوایم در مورد بحث بسیار مهم event ها در جاوا اسکریپت و کنترل رفتار کاربران و مرورگرها در صفحات وب صحبت کنید و ببینیم چطوری میشه تعین کرد زمانی که کاربری فعالیت خاصی انجام داد بخش خاصی از کدهای جاوااسکریپت اجرا بشه! در این جلسه 3 تا مینی پروژه بسیار جالب هم داریم و یک بازی جذاب هم با هم خواهیم نوشت که در اون عنکبوتی باید به دنبال مگس بره و اون رو بخوره !!!

مطالب مطرح شده در این جلسه عبارتند از :

  •  معرفی رویدادها در جاوااسکریپت و اهمیت آن ها
  • ذکر مثال هایی از event های رایج در صفحات وب
  • روش های توزیع رویدادها (Event Propagation) در جاوااسکریپ و مفهوم آن ها
  • لیست event های موجود و توضیح مهمترین آن ها
  • دو روش استفاده از رویداد ها و اتصال کدهای جاوااسکریپت به event ها
  • روش استفاده درون تگ های html و ویژگی رویدادی  آن تگ
  • روش استفاده از متد addEventListener اتصال رویداد به توابع به شکل برنامه نویسی
  • متد addEventListener برای افزودن یک رویداد و اتصال یک تابع به آن
  • مشکل و ناسازگاری IE9 به پایین به متد addEventListener و removeEventListener
  • متد attachEvent برای استفاده در مرورگر اینترنت اکسپلور ورژن 9 به پایین
  • متد removeEventListener برای حذف یک event از قبل وصل شده
  • متد detachEvent برای استفاده در مرورگر اینترنت اکسپلور ورژن 9 به پایین
  • توانایی تعریف چندین eventListener برای یک شی
  • استفاده از توابع ناشناخته (anonymouse functions) در eventListener ها
  • نحوه اتصال یک event به توابعی که پارامتر ورودی دارند
  • مینی پروژه : نمایش ابعاد پنجره مرورگر در حین تغیر سایز آن توسط کاربر
  • مینی پروژه : نمایش موقعیت اسکرول صفحه وب در حین اسکرول کردن توسط کاربر
  • مینی پروژه : طراحی و کدنویسی یک بازی جذاب، گرفتن مگس توسط عنکبوت با استفاده از دکمه های جهت کیبرد
  • نحوه تمرین کردن برای تسلط در کار با رویدادها
:: توجه

این مطلب یک جلسه از آموزش javascript می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش javascript

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

حمیدرضا صفری

سلام دوستان من بازی شکار پشه رو که جناب آوند در این جلسه طراحی کردن رو گسترش دادم
به این صورت که تعداد پشه ها بین 1 تا 10 هر بار به صورت تصادفی ایجاد میشه و وقتی که آخرین پشه شکار بشه پیام برنده شدن ظاهر میشه
من لینک دانلودش رو براتون میذارم
فقط لطفا هر کس که تا پایان این دوره این بازی رو گسترش میده اگه دوس داره با بقیه به اشتراک بذاره تا هممون از تجربیات همدیگه استفاده کرده باشیم
مرسی
https://trainbit.com/files/6662362884/7LearnExtendedGame.zip

لقمان آوند

خیلی خوبه
ممنون از تلاشتون

سعید ریحانی

سلام وقت بخیر
ممنونم از شما ، متوجه ایراد کار شدم این دستورات document.documentElement.scrollTop فکر میکنم زمانی جواب میده که اون المنت scrollable باشه ولی من چون میخواستم موقعیت اسکرول پنجره رو نشون بده باید از window.pageOffsetTop استفاده میکردم که با این جواب داد.
حالا نمیدونم این حرفی که زدم درسته یا نه و این کاری که انجام دادم درسته یا نه

لقمان آوند

documentElement مربوط به سند هست و window پنجره مرورگر . و پوزیشن مربوطه هم نسبت به همین موارد داده میشه

سعید ریحانی

سلام وقت بخیر جناب آوند
ببخشید یه سوال داشتم این کد اسکرول (هم مال خودم هم مال شما) اصلا جواب نمیده یعنی هنگام لود صفحه کار میکنه و مقدار اولیه 0 رو برمیگردونه ولی هنگام اسکرول کردل جواب نمیده
اما کدی که از w3schools گرفتم کار میکنه ولی اون روی یک دایو با اندازه مشخص کار کرده میخواستم ببینم مشکل این کد کجاست؟

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="common/pure-min.css" type="text/css">
    <script src="common/common.js"></script>
</head>
<body onload="getDimension();getScrollPos()" style="text-align: center">
<div style="position: fixed;text-align: center;width:100%" id="123">
    <button id="dims" class="pure-button pure-button-primary">……</button>
    <br>
    <button id="scrlPos" class="pure-button">……</button>
</div>
<br><br>
<br>.<br>.<br>.<br>.<br>.<br>.<br>111111
<br>.<br>.<br>.<br>.<br>.<br>.<br>222222
<br>.<br>.<br>.<br>.<br>.<br>.<br>333333
<br>.<br>.<br>.<br>.<br>.<br>.<br>444444
<br>.<br>.<br>.<br>.<br>.<br>.<br>555555
<br>.<br>.<br>.<br>.<br>.<br>.<br>666666
<br>.<br>.<br>.<br>.<br>.<br>.<br>777777
<br>.<br>.<br>.<br>.<br>.<br>.<br>888888
<br>.<br>.<br>.<br>.<br>.<br>.<br>999999
<br>.<br>.<br>.<br>.<br>.<br>.<br>000000
<br>.<br>.<br>.<br>.<br>.<br>.<br>.

<script>
    //———— Windows Size———
    function setDimension() {
        return ‘Window size is ‘ + window.outerWidth + ‘ * ‘ + window.outerHeight;
    }

    function getDimension() {
        document.getElementById(‘dims’).innerHTML = setDimension();
    }

    window.addEventListener(‘resize’, getDimension);

    //————- Scroll Position ——-
    function setScrollPos() {
        return ‘Scroll Position is ‘ + document.body.scrollTop + ‘px from Top’;
    }

    function getScrollPos() {
        document.getElementById(‘scrlPos’).innerHTML = setScrollPos();
    }

    window.addEventListener("scroll", getScrollPos);
</script>

</body>
</html>
لقمان آوند

سلام
در تابع setScrollPos به جای document.body.scrollTop از document.documentElement.scrollTop استفاده کنید.

Aria Banazadeh

سلام اقای اوند

 7Learn Spider Game
  function rand(start,end)
  {
   var r = start + Math.floor(Math.random() * (end - start));
   return r;
  }
  body {
   background: url(files/spiderWeb.png) no-repeat center center fixed;
   font-size: 13px;
   padding: 3px;
   color: #C86300;
  }
  #spider {
   position: fixed;
  }
  .mosq {
   position: fixed;
   padding: 3px;
   border-radius: 3px;
  }
 A Game by<b>7Learn.com</b>
 function startGame() {
  var mosq = document.getElementsByClassName('mosq');
  var spider = document.getElementById('spider');
  //mosq[0].style.top = rand(0, window.innerHeight - 50) + "px";
  //mosq[0].style.left = rand(0, window.innerWidth - 50) + "px";
  //mosq[1].style.top = rand(0, window.innerHeight - 50) + "px";
  //mosq[1].style.left = rand(0, window.innerWidth - 50) + "px";
  //mosq[2].style.top = rand(0, window.innerHeight - 50) + "px";
  //mosq[2].style.left = rand(0, window.innerWidth - 50) + "px";
  //mosq[3].style.top = rand(0, window.innerHeight - 50) + "px";
  //mosq[3].style.left = rand(0, window.innerWidth - 50) + "px";
  //mosq[4].style.top = rand(0, window.innerHeight - 50) + "px";
  //mosq[4].style.left = rand(0, window.innerWidth - 50) + "px";
  //mosq[5].style.top = rand(0, window.innerHeight - 50) + "px";
  //mosq[5].style.left = rand(0, window.innerWidth - 50) + "px";
  //mosq[6].style.top = rand(0, window.innerHeight - 50) + "px";
  //mosq[6].style.left = rand(0, window.innerWidth - 50) + "px";
  for (var i = 0; i == 6; i++)
  {
   mosq[i].style.top = rand(0, window.innerHeight - 50) + "px";
   mosq[i].style.left = rand(0, window.innerWidth - 50) + "px";
  }
  alert("به بازی پشه کشی خوش اومدید!\nسعی کنید هر چه سریعتر پشه رو نابود کنید !!!")
 }
 //  Keys  : Up  Down Left  Right
 //  Codes : 38   40   37    39
 function handleKeys(e) {
  var mosq = document.getElementsByClassName('mosq');
  var spider = document.getElementById('spider');
  var Count = mosq.Count;
  if (e.keyCode == 38) {     // up
   moveSpider('up');
  } else if (e.keyCode == 40) { // down
   moveSpider('down');
  } else if (e.keyCode == 37) { // left
   moveSpider('left');
  } else if (e.keyCode == 39) { // right
   moveSpider('right');
  }
  if (Math.abs(document.getElementsByClassName('mosq').offsetTop - spider.offsetTop) &lt; 20 &amp;&amp; Math.abs(mosq.offsetLeft - spider.offsetLeft) &lt; 20) {
   if (Count == 1) {
    YouWin();
   }
   else
   {
    Count = Count - 1;
    alert(&quot;شما موفق شدید یک مگس دیگر را نابود کنید /n تنها {0} مگس دیگر باقی ماند است&quot;, Count);
   }
  }
 }
 function moveSpider(direction) {
  var spider = document.getElementById(&#039;spider&#039;);
  var d = 10;
  switch (direction) {
   case &quot;up&quot; :
    spider.style.top = (spider.offsetTop - d) + &quot;px&quot;;
    if (spider.offsetTop  window.innerHeight)
     spider.style.top = "0px";
    break;
   case "left" :
    spider.style.left = (spider.offsetLeft - d) + "px";
    if (spider.offsetLeft  window.innerWidth)
     spider.style.left = "0px";
    break;
  }
 }
 function YouWin() {
  alert("شما بازی را بردید تبریک میگم");
  mosq.style.backgroundColor = "#FC4C4C";
 }
 

من میخواتم این بازییو که نوشتینو توسعه بدم مگسهای بیشتر میخواستم بکن و توی ی ارایه بزارم ولی وقتی میخوام پوزیشنشونو مشخص کنم با for نمیشه و مجبورم یکی یکی ست کنم و ی سوال دیگه که در اونجا اگه عنکبوت مگسو بگیره از کجا بفهمم کدوم یک از مگس هارو گرفته گیج شددم 😳

لقمان آوند

سلام
اینجا جایی هست که شما باید از اشیاء استفاده کنید.
هر مگس رو یه شئ در نظر بگیرید و مشخصات اون (اسم، موقعیت و …) رو در شئ مربوط به اون نگه دارید. آرایه ای از این شئ ها رو نگه دارید.
توی حلقه موقعیت عنکبوت رو به ترتیب با مگس ها مقایسه کنید. طبیعتا هر کدوم موقعیتشون یکی شد یعنی شکار شده. همونجا اطلاعات اون شئ رو می تونید چاپ کنید .

Hossein

سلام.چرا بعضی جاها مانند کدهای زیر از پرانتز برای صدا زدن فانکشن استفاده می کنیم

 document.getElementById('dims').innerHTML = getDimensionStr(); 

و بعضی جاها برای صدا زدن فانکشن مانند کدهای زیر پرانتز را حذف می کنیم

 window.addEventListener('resize', setDimension) 
کیوان علی محمدی

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

Hossein

سپاس

Alireza Sajedi

سلام استاد بعضی سایت ها هستن که با تغیر موقعیت موس عکس پس زمینه تغیر میکنه این نوع کار رو با جاوااسکریپت انجام میدن؟

لقمان آوند

بله میشه
می تونید در رویداد onmousemove اینکارو انجام بدید …

Alireza Sajedi

استاد همین کار رو میشه با css انجام داد؟

وحید صالحی

خیر دوست عزیز

ervin

در ضمن ببخشید اما این کد رو لطفا بررسی کنید ببینید کجاش اشتباه هست 🙂 استاد گرامی امیدوارم وقت داشته باشید
خودم 20 بار چک کردم اما مشکلی تو جاوا اسکریپت نبود 🙁
http://s6.picofile.com/file/8253688276/spider.rar.html

لقمان آوند

بررسی کدی که نوشتید زمانبره که فعلا وقتش رو نداشتم.
اگر ویدیو رو دنبال کنید و مثل اون کدنویسی کرده باشید نباید مشکلی باشه !

ervin

سلام اقای اوند 🙂
یه سوال داشتم
چرا تو اون بخش که میخواستید با key ها عنکبوت رو جابه جا کنید از offsetTop یا offsetLeft استفاده کردید!؟ چرا از “spider.style.top = -10 + “px استفاده نکردید؟! من از این حرکت استفاده کردم اما عنکبوت میپره میچسبه به بالای صفحه! دلیلش چیه!؟

لقمان آوند

خوب چون با زدن دکمه پایین فاصله عنکبوت از بالا مثلا 10 تا اضافه میشه ! و طبیعیه که از این مورد استفاده کنیم. برای offsetLeft هم همینطوره !

لقمان آوند

توی دوره که گفتیم. پارامتر دوم رو یه تابع ناشناس بزارید. اینطور :

  document.getElementById('btn').addEventListener('click',function(){document.write('button clicked!!!');})  
پایان زمان پشتیبانی

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

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

نیاز به لاگین

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