دوره مجازی جاوااسکریپت (جلسه 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 به توابعی که پارامتر ورودی دارند
  • مینی پروژه : نمایش ابعاد پنجره مرورگر در حین تغیر سایز آن توسط کاربر
  • مینی پروژه : نمایش موقعیت اسکرول صفحه وب در حین اسکرول کردن توسط کاربر
  • مینی پروژه : طراحی و کدنویسی یک بازی جذاب، گرفتن مگس توسط عنکبوت با استفاده از دکمه های جهت کیبرد
  • نحوه تمرین کردن برای تسلط در کار با رویدادها
more  بیشتر بخوانید : ترفندهای پیشرفته jQuery (قسمت 19)
info توجه

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

ثبت نام در دوره جاوااسکریپت و جی کوئری

comment دیدگاه کاربران
Alireza Sajedi

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

لقمان آوند

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

Alireza Sajedi

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

وحید صالحی

خیر دوست عزیز

Hossein

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

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

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

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

Hossein

سپاس

Aria Banazadeh

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

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

لقمان آوند

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

سعید ریحانی

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

سعید ریحانی

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

لقمان آوند

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

نیاز به لاگین

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