ترفند 9 : مانیتور و نظارت کردن بر روی رویدادها
شما میتونین به سادگی و با استفاده از قدرت Inspector بر روی رویدادهای متنوعی که در صفحه وب رخ میده نظارت داشته باشید و اونا رو مانیتور و پایش کنید و اطلاعات مورد نظرتون رو از اونا در بیارید. برای اینکار به سایت w3schools برید و در Inspector تب Console رو باز کنید:
همونطور که دیدید الان در Console هستیم. فرض کنید میخایم زمانی که بر روی صفحه کلیک شد، اطلاعات اون رویداد برای ما نمایش داده بشه. برای اینکار بصورت زیر عمل میکنیم:
monitorEvents(المنت مورد نظر, "event")
همونطور که دیدید باید از دستور monitorEvents استفاده کنیم. این دستور دو ورودی دریافت میکنه. ورودی اول المنتی که میخایم رویداد رو براش بررسی کنیم قرار میدیم و ورودی دوم هم رویدادی که قرار هست بررسی بشه. حالا اگر بخوایم رویداد کلیک بر روی صفحه رو بررسی کنیم، باید عبارت رو در Console تایپ کرده و اینتر بزنیم:
از این به بعد، هر جای صفحه که کلیک کنیم، اطلاعات اون نمایش داده میشه. برای مثال من برای یکبار بر روی یک نقطه از سایت مورد نظر کلیک میکنم و خروجی بصورت زیر هست:
همونطور که میبینید یک رویداد از نوع click ثبت شده و اطلاعات کلی در مورد اون قرار داده شده. اگر بر روی مثلث واقع در کنار اون کلیک کنیم، اطلاعات اون بصورت کامل نمایش داده میشه:
همونطور که میبینید اطلاعات رویداد بصورت کامل در اختیارتون قرار داده میشه. مثلا ویژگی altKey برابر با false هست و به معنای اینه که در زمان کلیک کردن، دکمه alt رو بر روی کیبور نگه نداشتیم. clientX و clientY فاصله‌های افقی و عمودی رو مشخص میکنه. همونطور که میبینید گفته شده که رویداد کلیک بر روی المنت h1 رخ داده است. شما میتونین از این ترفند استفاده‌های زیادی کنید. یکی از کارایی که میشه کرد اینه که بعضی اوقات میتونین با اینکار بفهمید که رویداد مورد نظرتون چه ویژگی هایی رو داره و بتونین از اونا در کدهاتون استفاده کنید.
ترفند 10 : ویرایش سریع تگهای HTML در تب Elements
شاید براتون پیش اومده باشه که بخواید مثلا تگ h1 رو به تگ p تبدیل کنید و برای اینکار لازم باشه که هم تگ ابتدا و هم تگ انتها رو ویرایش کنید. شما میتونین این کار رو در Inspector بصورت راحت انجام بدین و خود Inspector تگ نهایی رو برای شما با تگ ابتدایی مطابقت میده. همون سایت بالایی رو باز کرده و در Inspector تب elements رو باز کنید:
فرض کنید که میخایم تگ h1 مشخص شده رو به تگ p تغییر بدیم. برای اینکار بصورت زیر عمل میکنیم:
دیدید که به سادگی بر روی تگ ابتدایی h1 دو بار کلیک میکنیم تا بصورت فعال در بیاد. بعد از اون اون رو به p تغییر میدیم و اینتر میزنیم. با اینکار تگ تغییر میکنه و منتظر میمونه که ویژگی دیگه ای رو به اون تگ اضافه کنید. شما میتونین مجددا اینتر بزنید تا ویژگی دیگه ای اضافه نشه. بهمین راحتی. حتی شما میتونین هر اسم دیگه ای رو برای تگها بزارید.
همونطور که دیدید من اسم تگ رو فارسی قرار دادم و اون رو سلام کردم!
امیدوارم از این مطلب خوشتون اومده باشه.
موفق باشید
یا علی
مرسی داری واسه ترفندهای خوبت، هر دفعه که یکیشم استفاده کنیم، خودش یه پیشرفته و آموختن دانش.
با تشکر.
موفق باشی دوست عزیز