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



visibility  
mode_comment   ۵۳

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

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

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

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

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

comment دیدگاه کاربران
hassani replyپاسخ

سلام این جلسه هم مثل بقیه جلسات عالیه.فقط نمیدونم چرا استاد در آموزش height رو به عرض ترجمه کردن !!! height= ارتفاع
حالا باز نگین استادا بعضی وقتا عمدا اشتباه میکنن تا شاگردا رو امتحان کنن 😀 😀 😀
اگر هم من اشتباه میکنم معذرت میخوام 😥 😥 😥 ❓

لقمان آوند

ممنون
عمدا که اشتباه نمی کنیم …
اینجور اشتباه ها معمولا پیش میاد تو صحبت کردن های طولانی. جاهای دیگه ارتفاع گفتم …

hassani

عجب بازی اکشنی 😯 😯 ببینم میتونم توسعش بدم یا نه 😉 😉
منم وقتی css تمرین میکردم یه بازی رو توسعه دادم ببینین چطوره؟
فقط با css هست و اینکه فقط ایده اولیه اش از خودم نبوده ولی خودم برای اتفاق های مختلف در بازی واکنش های مختلف تعریف کردم و…
http://s5.picofile.com/d/199b1f80-4684-4a40-8ca4-c581c13014c1/counter2.rar

لقمان آوند

خوبه جالبه …

hassani

سلام دوباره
من یه کم روی بازی کار کردم فقط یه مشکل دارم:
ببینین من میخوام وقتی همه پشه ها قرمز شدند تابع youvin() >>>>true بشه و پیام شما برنده شدید داده بشه.الان من باید چیکار کنم؟؟؟
ممنونم که وقت میذارین.
http://s3.picofile.com/d/3f026167-3109-4994-bd6c-b5a36a8278f5/spider.rar

لقمان آوند

یه آرایه برای وضعیت پشه ها باید ایجاد کنی. هر کدوم قرمز شدن عضو متناظر در آرایه رو مثلا true کنی.
اگر همه true بودند یعنی تمامه…

hassani

من به صورت زیر نوشتم درست شد ولی میدونم که یه راه آسونتر که کدنویسی کمتری داشته باشه هم هست که من هرکاری کردم نتونستم ئیداش کنم:

لقمان آوند

میشه این موارد رو در ارایه ذخیره کرد و کد کمتری نوشت با استفاده از حلقه ها!

hassani

از سه تمرینی که در آخرآموزش پشنهاد دادین من به صورت زیر انجام دادم:
1-تغییر رنگ پس زمینه پاراگراف با رفتن موس روی اون به صورت رندوم:

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


2-بسته شدن پنجره مرورگر با دبل کلیک:
من جستجو کردم و فهمیدم که پنجره ای که خود کاربر از مرورگر باز کرده رو نمیشه بست ولی پنجره ای که ما ایجاد میکنیم رو میشه با تابع close() بست:


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


3-اجازه ندادن به کاربر برای تغییر اندازه پنجره مرورگر:
در این مورد بسیار بسیار بسیار تلاش کردم ولی آخرش هیچی نفهمیدم کم کم داشتم یه زبان برنامه نویسی از خودم ابداع میکردم که برای یه لحظه به خودم اومدم و این کامنت رو نوشتم. 😉 😉 😉 😀 😀 😀

hassani replyپاسخ

آقای آوند اشکالی نداره که کل این صفحه پر شده از کامنتای من؟؟؟
اگه امکانش هست چند دقیقه وقت بذارین و این کد منو کم حجم ترش کنید من هر کاری کردم نتونستم.(منظورم بازی پشه ها هست)
مشکل من اینه که نمیتونم بگم وقتی تمام اعضای این آرایه رنگشون قرمز شد فلان اتفاق بیفته.
و برای جلوگیری از تغییر اندازه صفحه توسط کاربر هم جوابشو بگین من بیچاره شدم. 😡 😡 😡
ولی نمیدونم چرا وقتی جوابو میگین میبینم خیلی آسون بوده. 😀 😀 😀

لقمان آوند

سلام
من وقت ندارم خودم کد بنویسم. اگه بخوام اینکارو بکنم به خاطر درخواستای زیاد به کارای دوره ها و بقیه کارام نمیرسم ;D در عین حال کاملا راهنمایی می کنم که خودتون انجام بدید. برای خودتون بهتره .
– کافیه تو یه حلقه چک کنید اعضای آرایه رو . یه متغیر به عنوان شمارنده بزارید. هر کدوم از اعضا که قرمز بود یکی اون متغیر رو افزایش بدید. بعد از اینکه از حلقه خارج شدید چک کنید ایا تعداد قرمز ها با سایز آرایه برابره یا نه. اگر برابر بود یعنی همه قرمز شدند.
– برای جلوگیری از تغیر سایز : سایز اولیه پنجره رو بگیرید و عرض و ارتفاعش رو تو 2 تا متغیر بزارید . در رویداد resize (یعنی وقتی کاربر ریسایز میکنه) شما با تابع resizeTo عرض و اتفاع رو به همون مقادیر اولیه ست کنید!
باید بیشتر تلاش کنی بعد بیای بپرسی…
سرچ کن … سرچ !

hassani

سلام آقای آوند یه نگاه به اولین کامنتی که درباره بازی گذاشتم بندازین الان حدود یه هفته هست که من توی این مسیله گیر کردم فکر کنم به اندازه کافی براش وقت گذاشتم الان دیگه نوبت شماست که به عنوان یک استاد متعهد مشکل منو حل کنین تا من نقطه ضعفمو بدونم یا اگه فکر میکنین در ادامه آموزش ها در این دوره به این قضیه میپردازین تا دیگه من برم ادامه آموزش ها رو ببینم.

لقمان آوند

راهنمایی دقیق که کردم به چه شکل تشخیص بدی همه پشه ها قرمز شدند ! اونکارو کردی ؟

hassani

باورم نمیشه بالاخره درست شد. 😯 😯 😯
ممنونم از راهنمایی هاتون . ❓ ❓ ❓
مشکل این بود که من متغییر شمارنده رو داخل حلقه میذاشتم ببینین درست اشتباهمو تشخیص دادم یا…
تابع رو به صورت زیر نوشتم:

الان میخوام برای بازی زمان تعیین کنم از ۳۰ ثانیه تا ۰ ثانیه.
این مورد رو هنوز درس ندادین مگه نه؟؟

لقمان آوند

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

hassani

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

لقمان آوند

منطق کدت درسته و همینه .
منتهی مرورگرهای کنونی چون پنجره ها تو حالت تب باز میشن این کد توشون جواب نمیده اکثرا .
ولی در کل کدت صحیحه و می تونی خوشحال باشی ;D

hassani

❓ ❓ ❓ ❓ ❓ ❓ ❓ ❓ ❓ ❓ 😉

amir yazdi replyپاسخ

سلام استاد
من هر کاری کردم نمی دونم چرا پروژه ی scroll جواب نمیده .میشه یه نگاهی بندازین بهش؟

لقمان آوند

کدتون رو برام ایمیل کنید بررسی کنم
تو مرورگر دیگه هم تست کنید

amir yazdi replyپاسخ

کدی که شما نوشتین اصلا روی مرورگر من اجرا نمیشه و تغییرات اسکرول رو مرورگرم فقط 0 رو نشون می ده!

لقمان آوند

نوع و ورژن مرورگرتون رو بگید بررسی کنم

amir yazdi

firefox 39
کد شما در مورد اسکرولو
روی کروم امتحان کردم جواب داد.ولی روی موزیلا جواب نمیده !
فک کنم مشکل از document.body.scrollTop هست!

لقمان آوند

سلام
به جاش از window.scrollY استفاده کنید ببینید درست میشه …

amir yazdi replyپاسخ

بله استاد درست شد !دلیلش چی بود؟

لقمان آوند

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

Sahar Dida replyپاسخ

سلام استاد،خسته نباشید
من نفهمیدم که تو کد بازی چرا پوزیشن مگس و عنکبوت رو fixed گذاشتین؟
و کدی که واسه بازی نوشتم جواب نداد واستون میل کنم که بگین اشکالش کجاااست؟؟؟؟

لقمان آوند

فیکس می کنیم که قابل تغیر باشه پوزیشنشون.
کد نوشته شده در ویدیو رو تست کردید ؟ درست کار می کنه ؟

Sahar Dida

بله

لقمان آوند

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

Aria Banazadeh replyپاسخ

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

لقمان آوند

var audio = new Audio('audio_file.mp3');
audio.play();

fathiyan replyپاسخ

سلام استاد من در استفاده از متد addEventListener دچار مشکل شدم میخوام وقتی روی یک دکمه کلید میکنم متنی نمایش داده بشه من به این صورت نوشتم و بدون اینکه روی دکمه کلید کنم اون نوشته چاپ میشه اشکال کار کجاست؟

لقمان آوند

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

ervin replyپاسخ

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

لقمان آوند

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

ervin replyپاسخ

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

لقمان آوند

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

Alireza Sajedi replyپاسخ

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

لقمان آوند

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

Alireza Sajedi

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

وحید صالحی

خیر دوست عزیز

Hossein replyپاسخ

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

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

کیوان علی محمدی

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

Hossein

سپاس

Aria Banazadeh replyپاسخ

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

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

لقمان آوند

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

سعید ریحانی replyپاسخ

سلام وقت بخیر جناب آوند
ببخشید یه سوال داشتم این کد اسکرول (هم مال خودم هم مال شما) اصلا جواب نمیده یعنی هنگام لود صفحه کار میکنه و مقدار اولیه 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 استفاده کنید.

سعید ریحانی replyپاسخ

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

لقمان آوند

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

حمیدرضا صفری replyپاسخ

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

لقمان آوند

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

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.