### آشنایی با ویژگی جالبی به نام touch-action 🤫

زمانی که برای دستگاه‌های موبایل یا نمایشگرهای لمسی وب‌اپلیکیشن توسعه می‌دهیم، مدیریت دقیق ژست‌های لمسی کاربران—مانند سوایپ، اسکرول یا بزرگ‌نمایی—اهمیت زیادی پیدا می‌کند. در این میان، ویژگی CSS به نام touch-action به کمک ما می‌آید.

این ویژگی به ما امکان می‌دهد کنترل کنیم که عناصر صفحه در برابر رویدادهای لمسی چگونه واکنش نشان دهند و می‌توانیم از انجام خودکار برخی رفتارهای پیش‌فرض مرورگر جلوگیری کنیم.

---

### touch-action دقیقاً چه کاری انجام می‌دهد؟ 🧐

به‌طور پیش‌فرض، مرورگرها خودشان ژست‌های لمسی را تفسیر و اجرا می‌کنند. این موضوع ممکن است در عملکرد برخی برنامه‌ها اختلال ایجاد کند، چرا که مرورگر می‌تواند در پردازش رویدادها دخالت کند.

با استفاده از touch-action می‌توانیم مشخص کنیم که کدام رفتارها را مرورگر باید پردازش کند و کدام‌ها را اپلیکیشن. این امکان به‌ویژه برای جلوگیری از رفتارهای ناخواسته، مانند اسکرول ناگهانی یا بزرگ‌نمایی ناخواسته، بسیار مفید است.

---

### چرا استفاده از touch-action ضروری است؟ 🤕

یک) بهبود عملکرد:
با غیرفعال کردن عملکردهای غیرضروری مرورگر (مانند اسکرول یا زوم)، می‌توان عملکرد کلی اپلیکیشن را به‌ویژه در موبایل‌ها افزایش داد.

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

سه) جلوگیری از تداخل با مرورگر:
استفاده از مقدار touch-action: none جلوی دخالت مرورگر را می‌گیرد—برای مثال، در شرایطی که کاربر با سوایپ قصد تعامل با اپلیکیشن دارد، اما مرورگر آن را به‌عنوان حرکت بازگشت به صفحه قبلی تلقی می‌کند.




#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

‏✌️ Driver.js: تورها، نکات برجسته، راهنمایی‌های زمینه‌ای و موارد بیشتر

یک کتابخانه جاوااسکریپت خالص برای ساخت تورهای تعاملی در صفحه و سیستم‌های راهنمایی زمینه‌ای است. این کتابخانه چندین سال است که عرضه شده، اما همچنان به‌روزرسانی و نگهداری می‌شود و نمونه‌های متعددی برای بررسی دارد — عملکرد آن بسیار روان و بی‌نقص است.


🔗https://driverjs.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

در این‌جا مجموعه‌ای از برترین آیکون‌های متحرک آورده شده است که هر طراح رابط کاربری و تجربه کاربری (UI/UX) باید برای پروژه‌های طراحی آتی خود مد نظر قرار دهد:

یک. LottieFiles
ارائه‌دهنده مجموعه‌ای حرفه‌ای از آیکون‌های متحرک مبتنی بر فرمت Lottie
🔗 [lottiefiles.com/animation/icon](https://lottiefiles.com/animation/icon)

دو. Lordicon
کتابخانه‌ای غنی از آیکون‌های تعاملی و انیمیشنی با قابلیت سفارشی‌سازی
🔗 [lordicon.com](https://lordicon.com)

سه. IconScout
منبعی گسترده برای آیکون‌های متحرک، Lottie، SVG و سایر فرمت‌ها
🔗 [iconscout.com/icons/animation](https://iconscout.com/icons/animation)

چهار. Icons8
مجموعه‌ای متنوع از آیکون‌های متحرک، استاتیک و چندفرمت برای استفاده در انواع پروژه‌ها
🔗 [icons8.com/animated-icons](https://icons8.com/animated-icons)

پنج. UseAnimations
آیکون‌هایی با طراحی مینیمال و انیمیشن‌های سبک برای رابط‌های مدرن
🔗 [useanimations.com](https://useanimations.com)

شش. Flaticon
یکی از بزرگ‌ترین منابع جهانی برای آیکون‌های گرافیکی، اکنون با پشتیبانی از آیکون‌های متحرک
🔗 [flaticon.com/animated-icons](https://flaticon.com/animated-icons)

این ابزارها می‌توانند به طرز چشمگیری جذابیت بصری و تعامل‌پذیری طراحی‌های شما را افزایش دهند.


#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

سرور HTTP انجین‌ایکس (Nginx) دارای ماژولی به نام njs است که امکان گسترش قابلیت‌های آن با استفاده از جاوااسکریپت را فراهم می‌کند. در گذشته، این ماژول تنها از استاندارد ES5 پشتیبانی می‌کرد. اما اکنون، با بهره‌گیری از موتور QuickJS
، تجربه‌ای مدرن‌تر و قدرتمندتر را ارائه می‌دهد و پشتیبانی کامل از استاندارد ES2023 را فراهم کرده

🔗https://blog.nginx.org/blog/quickjs-engine-support-for-njs
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

‏👀 npq: نصب ایمن بسته‌ها از طریق بررسی پیش از نصب
[مشاهده در GitHub](https://github.com/lirantal/npq)

‏ابزار npq نسبت به npm چند مرحله‌ی اضافی برای اطمینان از سلامت و امنیت بسته‌ها انجام می‌دهد. این ابزار:

* با پایگاه داده‌ی آسیب‌پذیری‌های امنیتی Snyk مشورت می‌کند،
* سن بسته (مدت‌زمانی که از انتشار آن گذشته)،
* تعداد دفعات دانلود،
* و مستندات آن را بررسی می‌کند،

و تلاش می‌کند تصویری دقیق‌تر و شفاف‌تر از آنچه واقعاً در حال نصب هستید ارائه دهد.

این رویکرد باعث افزایش امنیت در زنجیره‌ی تأمین نرم‌افزار شده و به توسعه‌دهندگان کمک می‌کند با اطمینان بیشتری بسته‌ها را انتخاب و نصب کنند.


#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

### بررسی متد classList.toggle همراه با پارامتر دوم 🤨

متد toggle یکی از پرکاربردترین ابزارها برای مدیریت کلاس‌های CSS در JavaScript است. این متد امکان تغییر پویا در وضعیت عناصر صفحه را با افزودن یا حذف کلاس‌ها فراهم می‌کند.

اما این متد یک پارامتر دوم هم دارد که معمولاً نادیده گرفته می‌شود! 😔

---

### ☺️ نگاهی به سینتکس پایه:

element.classList.toggle('className');

در این حالت:

* ✔️ اگر کلاس مورد نظر وجود داشته باشد، حذف می‌شود؛
* ✔️ اگر وجود نداشته باشد، افزوده می‌شود.

---

### ☺️ اما پارامتر force چیست؟

element.classList.toggle('className', force);

پارامتر force یک مقدار بولی (true یا false) است که به طور صریح کنترل می‌کند که کلاس افزوده شود یا حذف:

* ✔️ true → همیشه کلاس را افزوده خواهد کرد؛
* ✔️ false → همیشه کلاس را حذف خواهد کرد.

---

### 🔍 چند مثال:

menu.classList.toggle('open', true);   // کلاس 'open' حتماً افزوده می‌شود
menu.classList.toggle('open', false);  // کلاس 'open' حتماً حذف می‌شود

---

### 🔧 این قابلیت کجا به کار می‌آید؟

برای همگام‌سازی وضعیت عناصر با منطق برنامه.
به‌جای نوشتن شرط‌های جداگانه برای بررسی وجود یا نبود کلاس، می‌توان به‌سادگی از یک شرط منطقی استفاده کرد:

const isDarkMode = userSettings.theme === 'dark';
document.body.classList.toggle('dark-mode', isDarkMode);

---

### 📌 موارد کاربرد رایج:

* 🔵 فعال‌سازی تم تیره
* 🔵 باز یا بسته بودن منوها
* 🔵 مشخص کردن عنصر فعال
* 🔵 اعمال فیلتر یا مرتب‌سازی

---

### چرا مهم است؟

اگر از پارامتر force استفاده نشود، متد toggle فقط وضعیت کلاس را بین حالت موجود و ناموجود جابه‌جا می‌کند. اما در دنیای واقعی توسعه، معمولاً نیاز به کنترل دقیق و هماهنگ با منطق برنامه وجود دارد.

---

### ✅ نتیجه‌گیری:

استفاده از toggle با پارامتر force مزایای زیر را به همراه دارد:

* کاهش منطق اضافی (نیازی به شرط‌های جداگانه نیست)
* کاهش حجم کد (فقط یک خط کد به‌جای چندین خط شرطی)
* کاهش خطا (جلوگیری از ناهماهنگی بین وضعیت UI و داده‌ها)

در مجموع، روشی ساده و مؤثر برای همگام‌سازی دقیق وضعیت عناصر با منطق برنامه است. 👍


#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

لاراول و Node.js: اجرای PHP در محیط Watt Runtime
[مطالعه در وبلاگ Platformatic](https://blog.platformatic.dev/laravel-nodejs-php-in-watt-runtime)

در ماه ژوئن، پروژه‌ای با نام php-node معرفی شد که روشی نوین برای *پر کردن فاصله بین PHP و Node.js* ارائه می‌داد؛ به‌طوری‌که می‌توانستیم کدهای PHP را درون برنامه‌های Node اجرا کنیم.

اکنون این رویکرد یک گام فراتر رفته است: با بهره‌گیری از php-node و سرور برنامه‌ای Watt**، امکان **اجرای برنامه‌های لاراول (Laravel) نیز فراهم شده است.

این پروژه، پیوندی جالب و نوآورانه میان دو اکوسیستم محبوب یعنی PHP و Node.js ایجاد کرده و راهی تازه برای هم‌زیستی آن‌ها در یک پروژه واحد فراهم می‌سازد.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

### انواع رشته‌ای قالب‌دار (Template Literal Types) در TypeScript: چرا به آن‌ها نیاز داریم؟ 🤨

با آن‌که این قابلیت‌ها به‌طور مکرر استفاده نمی‌شوند، اما می‌توانند حل برخی مسائل خاص را بسیار ساده‌تر کنند — مسائلی مانند تولید کلیدها یا مدیریت مسیرها.

---

### ❓ این قابلیت چیست؟

انواع رشته‌ای قالب‌دار در TypeScript این امکان را می‌دهند که رشته‌هایی با ساختار پویا بسازیم، با استفاده از ساختار ${} برای ترکیب بخش‌های مختلف. این کار به تعریف انواع دقیق‌تر، ایمن‌تر و انعطاف‌پذیرتر کمک می‌کند.

#### نمونه:

type Key = `${string}_action`;

در اینجا، نوع Key می‌تواند هر رشته‌ای باشد که با _action پایان می‌یابد.

---

### 🧑‍💻 این ویژگی چه زمانی مفید است؟

#### ✔️ تولید کلیدها:

زمانی که نیاز است چندین کلید با ساختار یکسان تولید شود، می‌توان با استفاده از رشته‌های قالب‌دار، از تکرار و خطاهای احتمالی جلوگیری کرد.

type Prefix = 'user' | 'admin';
type Action = 'create' | 'edit' | 'delete';

type ActionKey = `${Prefix}_${Action}`;
// 'user_create' | 'admin_edit' | و مانند آن‌ها

---

#### ✔️ کار با مسیرها و URLها:

در مواردی که نیاز است مسیرهایی با بخش‌های پویا تعریف شوند — مانند مسیرهای کاربری یا API.

type UserProfileUrl = `users/${string}/profile`;
// 'users/۱۲۳/profile' | 'users/john/profile' و غیره

---

#### ✔️ تولید مقادیر خاص و کنترل‌شده:

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

---

### ✅ جمع‌بندی:

استفاده از رشته‌های قالب‌دار در TypeScript این امکان را فراهم می‌کند که رشته‌هایی با ساختار مشخص و الگوهای ثابت را با دقت و ایمنی بالا نوع‌دهی کنیم. این ویژگی به‌ویژه در پروژه‌هایی که نیاز به کار با داده‌های پویا اما ساختاریافته دارند، بسیار کاربردی است و خطاهای رایج را به حداقل می‌رساند. 👍


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

‏### Visual Viewport API: ردیابی بزرگ‌نمایی و تغییرات ناحیه‌ی دید 🤩

اگر تا به حال به این فکر کرده‌اید که چطور می‌توان تغییرات در بزرگ‌نمایی (zoom) صفحه یا واکنش به تغییر ابعاد پنجره در دستگاه‌های موبایل را شناسایی کرد، خبر خوبی برایتان دارم — من به‌تازگی با API جالبی به نام Visual Viewport API آشنا شدم! 🎉

‏**Visual Viewport API** ابزاری است که به شما امکان می‌دهد بفهمید کاربر در حال حاضر سایت شما را *چگونه می‌بیند* و بتوانید رابط کاربری را متناسب با اقدامات او تنظیم کنید.

این API به شما دسترسی می‌دهد به ناحیه‌ی دید بصری — یعنی آن بخش از صفحه که در لحظه روی نمایشگر دیده می‌شود، نه کل محتوای صفحه.

---

### با Visual Viewport API چه اطلاعاتی می‌توان به‌دست آورد؟

#### 🔍 ردیابی بزرگ‌نمایی (Zoom)

از طریق ویژگی window.visualViewport.scale می‌توان تغییرات در سطح بزرگ‌نمایی صفحه را شناسایی کرد. هر زمان کاربر صفحه را بزرگ‌تر یا کوچک‌تر کند، این مقدار به‌روز می‌شود.

---

#### 📏 تغییر اندازه‌ی ناحیه‌ی دید

زمانی‌که اندازه‌ی بخش قابل‌مشاهده‌ی صفحه تغییر می‌کند (برای مثال، هنگام بزرگ‌نمایی یا چرخش صفحه‌نمایش)، می‌توان از window.visualViewport.width و window.visualViewport.height برای دریافت ابعاد جدید استفاده کرد. این کار به تطبیق بهتر رابط کاربری با اندازه‌های مختلف کمک می‌کند.

---

#### ➡️ تشخیص جابه‌جایی ناحیه‌ی دید

با استفاده از window.visualViewport.offsetLeft و window.visualViewport.offsetTop می‌توان جابه‌جایی ناحیه‌ی دید را نسبت به ابتدای صفحه پیگیری کرد. این قابلیت برای جای‌گذاری دقیق عناصر روی صفحه بسیار کاربردی است.

---

### پشتیبانی از رویدادهای resize و scroll

این API از رویدادهای resize و scroll نیز پشتیبانی می‌کند، که هنگام تغییر وضعیت ناحیه‌ی دید فعال می‌شوند. این موضوع به شما امکان می‌دهد محتوای رابط کاربری را *به‌صورت لحظه‌ای* به‌روزرسانی کنید — قابلیتی ایده‌آل برای رابط‌های پویا و تعاملی.

---

### ✅ جمع‌بندی

با استفاده از Visual Viewport API می‌توانید رابط‌هایی طراحی کنید که نسبت به رفتارهای کاربر مانند بزرگ‌نمایی یا پیمایش (scroll) واکنش نشان دهند. این ویژگی به‌ویژه برای طراحی رابط‌های موبایل بسیار ارزشمند است. 🙂

—

دموی این قابلیت را می‌توانید در این لینک مشاهده کنید:

🔗 مشاهده کد در CodePen
#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

آیا راهی برای فشرده‌سازی کدهای SVG می‌خواهید؟
معمولاً SVGها کد نسبتاً تمیزی دارند، ولی بعضی فایل‌ها حجم زیادی کد اضافی و غیرضروری تولید می‌کنند.

ابزار فوق‌العاده‌ای به نام SVGO (مخفف SVG Optimizer) وجود دارد که اگر SVGها را به صورت inline در HTML استفاده می‌کنید، واقعاً به کارتان می‌آید.

با SVGO می‌توانید:
✔️ دقت غیرضروری منحنی‌ها را کاهش دهید
✔️ استایل‌های درون‌خطی را به کلاس‌ها منتقل کنید
✔️ عناصر و ویژگی‌ها را مرتب و گروه‌بندی کنید

---
🔗https://jakearchibald.github.io/svgomg/
#️⃣ #tool
👥@IR_javascript_group
🆔@IR_javascript

یکی از ویژگی‌های CSS برای جدول‌ها که اغلب نادیده گرفته می‌شود، اما می‌تواند به‌طور چشمگیری کار شما را ساده‌تر کند:
‏
## table-layout — کلیدی برای بهینه‌سازی جدول‌ها

این ویژگی تعیین می‌کند مرورگر چگونه ابعاد ستون‌ها و سطرهای یک جدول را محاسبه کند.

### table-layout دقیقاً چه می‌کند؟

با استفاده از این ویژگی، می‌توان سرعت رندر جدول را افزایش داد و ظاهر آن را تحت کنترل قرار داد.
در حالت پیش‌فرض، مرورگر اندازه‌ی ستون‌ها را بر اساس محتوای درون آن‌ها محاسبه می‌کند. این کار ممکن است مخصوصاً در جدول‌های بزرگ، فرآیند رندر را کند کند.

اما با کمک table-layout می‌توان ابعاد ستون‌ها را به‌صورت ثابت تعیین کرد تا مرورگر دیگر نیازی به محاسبه‌ی آن‌ها نداشته باشد و از همان ابتدا، از اندازه‌های مشخص‌شده استفاده کند.

---

### مقادیر قابل استفاده برای table-layout:

✔️ auto (مقدار پیش‌فرض):
ابعاد ستون‌ها به‌صورت خودکار و بر اساس محتوای آن‌ها تعیین می‌شود.
مناسب برای جدول‌هایی با محتوای پویا، اما ممکن است باعث کاهش سرعت رندر شود.

✔️ fixed:
همه‌ی ستون‌ها دارای عرض ثابت خواهند بود، بدون توجه به محتوای داخلی آن‌ها.
این گزینه رندر جدول را سریع‌تر کرده و کارایی را بهبود می‌بخشد، زیرا مرورگر از ابتدا از اندازه‌های تعیین‌شده استفاده می‌کند.

---

اگر جدول شما شامل داده‌های زیادی است یا به ستون‌هایی با عرض یکسان نیاز دارید، استفاده از table-layout: fixed بهترین انتخاب خواهد بود. 👍

🔗 [نمونه در CodePen](https://codepen.io/katrin_profrontend/pen/zxvKRPo)


#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

### بهبود عملکرد رویدادهای پیمایش (Scroll) 👨‍🏫

به‌تازگی با این هشدار مواجه شدم:

> "\[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive."

این پیام باعث شد رویکردم به مدیریت رویدادهای پیمایش را بازبینی کنم.

زمانی که با رویدادهایی مانند پیمایش با ماوس (wheel) یا حرکت لمسی (touchmove) سروکار داریم، معمولاً چالش‌هایی در زمینه‌ی عملکرد (Performance) به وجود می‌آید.
به‌طور پیش‌فرض، مرورگرها می‌توانند رفتار استاندارد (مانند پیمایش) را مسدود کنند، به‌ویژه اگر در تابع پردازشگر از event.preventDefault() استفاده شود.
این مسأله ممکن است باعث تأخیر در واکنش رابط کاربری**، خصوصاً در دستگاه‌های همراه شود. 😔

---

### راه‌حل: استفاده از گزینه‌ی `{ passive: true }` 🤨

با افزودن گزینه‌ی `{ passive: true }` هنگام افزودن شنونده‌ی رویداد (Event Listener)، به مرورگر اطلاع می‌دهیم که قرار نیست رفتار پیش‌فرض را لغو کنیم.
در نتیجه، مرورگر می‌تواند بلافاصله اقدام به انجام رفتار استاندارد (مثل پیمایش) کند و منتظر اجرای کامل کد شما نماند.

```javascript
element.addEventListener('wheel', (event) => {
// کد مربوطه
}, { passive: true });
```

---

### چرا این موضوع اهمیت دارد؟

✔️ **افزایش سرعت واکنش رویدادها
مرورگر بلافاصله پیمایش را آغاز می‌کند و این باعث بهبود پاسخ‌گویی رابط کاربری می‌شود — خصوصاً در تلفن‌های هوشمند و تبلت‌ها.

✔️ عدم انسداد رندر شدن صفحه
با استفاده از { passive: true } مرورگر دیگر منتظر اجرای کامل تابع پردازشگر نمی‌ماند، که این موضوع باعث کاهش تأخیر و افزایش روانی حرکت صفحه می‌شود.

---

### چند نکته‌ی مهم:

۱️⃣ مقدار پیش‌فرض `passive` برابر با false است
یعنی در حالت عادی می‌توان از event.preventDefault() برای لغو رفتار پیش‌فرض استفاده کرد.
اما مرورگرها در مورد برخی رویدادها مانند wheel`، `touchmove و touchstart در سطوحی مثل window`، `document و `document.body`، به‌صورت خودکار passive را برابر با true قرار می‌دهند تا از ایجاد تاخیر جلوگیری شود.

۲️⃣ اگر شما `passive: true` را صراحتاً تعیین کنید و در تابع مربوطه از event.preventDefault() استفاده نمایید، مرورگر این دستور را نادیده خواهد گرفت.

---

### جمع‌بندی:

استفاده از گزینه‌ی { passive: true } یک تغییر ساده اما مؤثر برای بهبود روانی و واکنش‌پذیری اپلیکیشن است — به‌ویژه در سناریوهایی که با پیمایش و تعامل لمسی سروکار داریم. ✅


#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

Moveable

‌‌‏دادن قابلیت جابجایی و تغییر اندازه‌ی دستی به عناصر کار ساده‌ای نیست. کتابخانه منطق پیچیده را در قالبی قابل استفاده بسته‌بندی کرده و ابزارهای آماده‌ای برای دستکاری اشیاء در زمان واقعی ارائه می‌دهد. این ابزار برای ساخت ویرایشگرهای تعاملی، داشبوردهای قابل سفارشی‌سازی یا هر برنامه‌ای با رابط کاربری کشیدن و رها کردن بسیار مناسب است.

🔗https://github.com/daybrush/moveable?tab=readme-ov-file
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

اگر وب‌سایت شما از iframe یا Service Worker استفاده می‌کند، لازم است بررسی کنید که کدی که در کنسول اجرا می‌کنید، در زمینهٔ (Context) درست اجرا می‌شود.
مرورگر کروم یک گزینش‌گر زمینهٔ جاوااسکریپت در بالای سمت چپ زبانهٔ کنسول (Console Tab) فراهم کرده است. به‌صورت پیش‌فرض، این زمینه روی «فریم اصلی» صفحه قرار دارد.

💡 نکته:
افزونه‌های کروم (Chrome Extensions) نیز دارای زمینهٔ جاوااسکریپت مستقل خود هستند.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

سلام بر رقیه عزیز حسین (ع) ... .
🖤اربعین حسینی تسلیت باد

#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

اگر کدی را در کنسول اجرا کرده‌اید و حالا می‌خواهید نتیجهٔ آن را در جایی دیگر جای‌گذاری (Paste) کنید، بسیار ساده است:
کافی‌ست دستور زیر را اجرا کنید:

در اینجا، $_ به مقدار آخرین عبارت جاوااسکریپتی که در کنسول اجرا کرده‌اید اشاره دارد.

اگر نیاز دارید چند مرحله مختلف را روی یک شیء انجام دهید، استفاده از $_ باعث می‌شود بتوانید به نتیجهٔ آخرین عملیات به‌سادگی دسترسی پیدا کنید، بدون نیاز به اجرای مجدد کل عبارت.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

### می‌خواهید بدانید یک تابع چند بار و با چه آرگومان‌هایی فراخوانی می‌شود؟

تابع monitor این امکان را فراهم می‌کند تا با هر بار اجرای تابع، گزارشی حاوی جزئیات آن در کنسول نمایش داده شود.

monitor(window.scrollTo);
window.scrollTo(۰, ۲۰۰۰);

می‌توانید از monitor برای توابع داخلی مانند scrollTo (در مثال بالا) یا برای کدهای سفارشی خود استفاده کنید.

برای متوقف کردن ثبت گزارش‌ها، کافی‌ست از تابع unmonitor استفاده کنید:

unmonitor(window.scrollTo);

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

ثبت رویدادهای عناصر DOM در کنسول

تابع monitorEvents برای هر رویدادی که روی یک گره DOM (مانند یک عنصر HTML) رخ می‌دهد، پیامی در کنسول ثبت می‌کند.

monitorEvents(document.body);

📋 رویدادهای گزارش‌شده روی `document.body`

همان‌طور که مشاهده می‌کنید، گزارش‌گیری از تمام رویدادها می‌تواند بسیار شلوغ و پرحجم باشد.
برای جلوگیری از این مسئله، می‌توانید فقط نوع رویدادهایی که برایتان اهمیت دارند را به‌صورت آرایه‌ای مشخص کنید:

monitorEvents(document.body, ["pointerenter", "click"]);

برای غیرفعال کردن این گزارش‌ها، از تابع unmonitorEvents استفاده کنید:

unmonitorEvents(document.body);

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

شناسایی شنونده‌های رویداد (Event Listeners) متصل‌شده

برای مشاهده‌ی تمامی شنونده‌های رویداد (Event Handlers) که به یک عنصر متصل شده‌اند، می‌توانید از تابع getEventListeners استفاده کنید:

getEventListeners(document.body);

با اجرای این دستور، می‌توانید موارد زیر را مشاهده کنید:

* نوع رویداد (مانند click`، `scroll و...)
* ویژگی‌هایی مانند اینکه آیا شنونده فقط یک‌بار اجرا می‌شود (once) یا خیر
* و همچنین ارجاع مستقیم به تابعی که به‌عنوان handler تعریف شده است

برای مشاهده‌ی کد منبع تابع، کافی‌ست روی آن راست‌کلیک کرده و گزینه‌ی Show function definition را انتخاب کنید تا مستقیماً به محل تعریف تابع هدایت شوید.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript