قالب‌های HTML

یکی از روش‌های مؤثر برای سامان‌دهی کد HTML، استفاده از *قالب‌ها*ست؛ این تکنیک به کاهش تکرار، تقسیم‌بندی منطقی کد و در نهایت بهبود درک ساختار صفحه کمک می‌کند.

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

### چگونه کار می‌کند؟

برای ایجاد قالب، از تگ <template> استفاده می‌کنیم. به‌عنوان مثال:

<template id="tmp">
  <h1>عنوان</h1>
  <p>متن...</p>
</template>

### استفاده از قالب:

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

let elem = document.createElement('div');
elem.append(tmp.content.cloneNode(true));
document.body.append(elem);

نکته مهم:
مرورگر محتویات تگ <template> را نادیده می‌گیرد و تنها از نظر نحوی (syntax) بررسی می‌کند. این بدان معناست که کد داخل قالب تا زمانی که فعالانه در صفحه درج نشود، اجرا یا نمایش داده نمی‌شود.




#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

نتیجه چه خواهد بود؟

"🤦‍♂️".substr(0,2);
"🤦‍♂️".substr(2,3);

#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

چه چیزی DOM است و چرا به آن نیاز داریم؟

«همه‌جا صحبت از DOM است... اما واقعاً DOM چیست؟»

DOM (مخفف *Document Object Model*) یا مدل شیء‌گرای سند، نمایی ساختاری از یک صفحه وب به شکل یک درخت است. در این مدل، هر تگ HTML به یک گره تبدیل می‌شود—یا شاخه، یا برگ. این ساختار به JavaScript اجازه می‌دهد تا در میان این درخت حرکت کرده، ویژگی‌های گره‌ها را بخواند و ساختار یا محتوای آن‌ها را در لحظه تغییر دهد.

### چرا به DOM نیاز داریم؟

پویایی محتوا

* امکان تغییر متن، سبک‌ها و ساختار صفحه بدون نیاز به بارگذاری مجدد
* پیاده‌سازی برنامه‌های تک‌صفحه‌ای (*SPA*) و رابط‌های فوق‌العاده سریع

تعامل‌پذیری

* واکنش به کلیک، حرکت ماوس، یا ورود اطلاعات از صفحه‌کلید
* ساخت منوهای کشویی، پنجره‌های مودال، اسلایدرها و سایر قابلیت‌هایی که به یک وب‌سایت «جان» می‌بخشند

ارتباط با JavaScript

* DOM پلی است میان HTML و CSS ایستا با منطق پویا در JavaScript
* این امکان را به اسکریپت‌ها می‌دهد که عناصر را جابه‌جا کرده، حذف یا اضافه کنند و به آن‌ها انیمیشن بدهند


### نکات مهم:

هنگامی که شروع به اعمال تغییرات متعدد در DOM می‌کنید، به خاطر داشته باشید که هر تغییر می‌تواند پرهزینه باشد. افزودن یا حذف عناصر، تغییر در سبک‌ها یا بازآرایی ساختار صفحه، باعث رخ دادن «بازمحاسبه» (*reflow*) و «بازنقاشی» (*repaint*) می‌شود—یعنی مرورگر مجبور است دوباره ابعاد و موقعیت عناصر را محاسبه کرده و صفحه را مجدداً ترسیم کند. اگر این تغییرات زیاد و پراکنده باشند، ممکن است باعث کند شدن رابط کاربری شود.

برای جلوگیری از این مشکل، سعی کنید تغییرات را دسته‌بندی و یکجا اعمال کنید؛ به عنوان مثال، ابتدا گره‌های جدید را در یک *DocumentFragment* قرار دهید و سپس آن را به‌صورت یکجا به DOM اضافه کنید، به‌جای آنکه هر گره را جداگانه درج نمایید.

نکته‌ای دیگر، مسئله امنیت است. استفاده‌ی مستقیم از innerHTML برای درج کد HTML، می‌تواند زمینه‌ساز حملات XSS شود. اگر کدی مخرب وارد شود، ممکن است در صفحه شما اجرا گردد. برای جلوگیری از این خطر، به‌جای innerHTML از textContent برای درج متن استفاده کنید و برای ایجاد عناصر جدید، از document.createElement و روش‌هایی مانند appendChild یا insertBefore بهره بگیرید.

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

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




#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

:hover > \:not(\:hover)
معمولاً از ویژگی hover برای برجسته‌سازی یک عنصر خاص استفاده می‌شود؛ اما گاهی‌اوقات زیباتر است اگر به‌جای آن، کاری با سایر عناصر انجام دهیم.

CSS

ul {
  @media (hover) and (prefers-reduced-motion: no-preference) {
    & > li {
      transform-origin: left center;
      transition: transform یک ثانیه با تابع زمان‌بندی var(--ease-spring-۳)،
                  opacity صفر ممیز سه ثانیه با تابع زمان‌بندی var(--ease-۳);
    }
    &:hover > li:not(:hover) {
      opacity: ۰.۲۵;
      transform: scale(۰.۸);
    }
  }
}

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


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

افزونه‌هایی مفید برای vscode:

Angular Language Service – پیشنهاد خودکار کد و امکان پیمایش آسان بین کامپوننت‌ها

ESLint + Prettier – کدی پاک و یکپارچه، بدون نیاز به تلاش اضافی

Import/Export Sorter برای JavaScript/TypeScript – مرتب‌سازی خودکار import و export هنگام ذخیره‌سازی

Path IntelliSense – تکمیل خودکار مسیر فایل‌ها با سرعت و دقت

Gremlins – هشدار در صورت وارد کردن اشتباه حروف، مانند تایپ «С» روسی به‌جای «C» انگلیسی

GitLen‎s – مشاهده‌ی تاریخچه تغییرات در کد: چه کسی، چه زمانی، چه چیزی را تغییر داده است


Run Terminal Command — امکان اجرای مستقیم دستورات (مثل npm، ng، یا git) از طریق منوی زمینه‌ی فایل‌ها یا از پنل فرمان را فراهم می‌کند.

CSS Peek — اجازه می‌دهد از کلاس‌ها یا شناسه‌های (id) موجود در HTML، مستقیماً به محل تعریف آن‌ها در فایل‌های CSS یا SCSS بروید.

Import ‎Cost — اندازه‌ی هر ماژول واردشده را نمایش می‌دهد و کمک می‌کند وابستگی‌های «سنگین» پروژه را تحت کنترل داشته باشید.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

رویداددهی تفویضی (Event Delegation) چیست؟
رویداددهی تفویضی یا Event Delegation تکنیکی در برنامه‌نویسی است که به‌جای آن‌که برای هر عنصر تعاملی (دکمه، لینک، آیتم فهرست و غیره) یک شنونده‌ی رویداد (event listener) جداگانه تعریف کنیم، یک شنونده‌ی واحد را روی عنصر والد آن‌ها (یا حتی روی کل سند document) قرار می‌دهیم.
زمانی که کاربر روی یک عنصر فرزند کلیک می‌کند، رویداد به سمت بالا در سلسله‌مراتب عناصر حرکت می‌کند (این پدیده به نام *Event Bubbling* شناخته می‌شود)، و ما می‌توانیم آن را در نقطه‌ای بالاتر دریافت و مدیریت کنیم.

### چرا این روش مفید است؟

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

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

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

---

### چند نکته‌ی کاربردی:

* از e.target.matches() استفاده کنید
برای آن‌که تشخیص دهید رویداد دقیقاً روی کدام عنصر اتفاق افتاده است.

* از closest() بهره بگیرید
برای پیدا کردن نزدیک‌ترین عنصر والد مانند یک <li> که حاوی دکمه یا عنصر موردنظر باشد.

* محدوده‌ی تفویض را هوشمندانه انتخاب کنید
نیازی نیست شنونده را روی کل سند (document) قرار دهید؛ اگر می‌توان آن را به نزدیک‌ترین والد مشترک محدود کرد، از این کار بهره‌مند شوید تا از پردازش‌های غیرضروری جلوگیری شود.

---

### جمع‌بندی

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


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

بررسی Type Guardهای امن در TypeScript برای مقادیر unknown یا any

در اینجا به یکی از ویژگی‌های موردعلاقه‌ام در TypeScript می‌پردازم:
استفاده از عبارت value is Type که به کامپایلر کمک می‌کند تا نوع واقعی یک مقدار را شناسایی کرده و بدون نیاز به تبدیل‌های پرخطر از نوع any یا بروز خطاهای زمان اجرا، با آن کار کند.

### چرا نباید از as به‌صورت سرسری استفاده کنیم؟

اغلب هنگام مواجهه با مقادیر از نوع unknown یا `any`، خیلی ساده می‌نویسیم:

const data = value as MyType;

یا حتی:

const data = value as any;

در این حالت، در واقع چشم خود را بر هشدارهای کامپایلر می‌بندیم. اما این کار باعث می‌شود از مزایای سیستم نوع‌گذاری TypeScript محروم شویم و ممکن است در زمان اجرا با مقدار `undefined` به‌جای فیلدی که انتظار داریم، مواجه شویم.

### راه‌حل: استفاده از تابع تشخیص (Type Predicate)

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

۱. بررسی کند مقدار null یا undefined نباشد
۲. وجود ویژگی‌های موردنیاز را بررسی کند
۳. نوع این ویژگی‌ها را با دقت بررسی نماید (مثلاً string، number، و غیره)

### نمونه‌ای از یک بررسی امن:

function isMyType(value: unknown): value is MyType {
  return (
    typeof value === 'object' &&
    value !== null &&
    /* بررسی وجود ویژگی‌ها */
    /* بررسی نوع اولیه‌ی آن‌ها */
  );
}

در اینجا:

* value: unknown یعنی ما به ورودی اعتماد نداریم.
* value is MyType به کامپایلر قول می‌دهد: «اگر خروجی true بود، قطعاً نوع مقدار MyType است».
* درون تابع، می‌توانیم از انواع بررسی‌ها استفاده کنیم: بررسی کلیدها، استفاده از instanceof`، `Array.isArray() و هر روش منطقی دیگری.

### یک مثال واقعی از کاربرد:

function handle(resp: unknown) {
  if (isMyType(resp)) {
    // در اینجا مطمئن هستیم که resp از نوع MyType است
    // بنابراین می‌توانیم با خیال راحت از ویژگی‌های آن استفاده کنیم
  }
}

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

این روش، راهکاری مؤثر برای حفظ ایمنی نوع‌ها هنگام کار با مقادیر unknown یا any است. نه‌تنها به کدی مطمئن‌تر منجر می‌شود، بلکه تجربه‌ی توسعه را نیز با خطاهای کمتر و پیش‌بینی‌پذیری بیشتر بهبود می‌بخشد.



#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

دسترس‌پذیری وب‌سایت و نقش ویژگی‌های ARIA

به‌تازگی شروع کرده‌ام درباره‌ی اهمیت دسترس‌پذیری وب‌سایت‌ها صحبت کنم. امروز این موضوع را ادامه می‌دهم و درباره‌ی ویژگی‌های ARIA توضیح می‌دهم؛ عناصری کلیدی که باعث می‌شوند رابط‌های کاربری وب برای همه‌ی کاربران قابل فهم باشند.

ARIA (مخفف *برنامه‌های اینترنتی غنی قابل دسترس*) مجموعه‌ای از ویژگی‌هاست که به عناصر HTML افزوده می‌شود تا فناوری‌های کمکی مانند صفحه‌خوان‌ها، نمایشگرهای بریل و ابزارهای مشابه، اطلاعات بیشتری درباره‌ی نقش و وضعیت عناصر رابط کاربری دریافت کنند.

مثالی بدون استفاده از ARIA:
فرض کنید یک دکمه‌ی چندرسانه‌ای داریم که به هر دلیلی فقط با یک عنصر <div> ساخته شده است. در این حالت، یک صفحه‌خوان قادر نخواهد بود تشخیص دهد که این عنصر در واقع یک دکمه است.

نمونه‌ی بهبودیافته با استفاده از ARIA:
در این مثال ما صراحتاً مشخص می‌کنیم که این عنصر یک دکمه است:

<div role="button" tabindex="0">Play</div>

چطور می‌توان این موارد را پیاده‌سازی کرد؟
می‌توان از گام‌های کوچک آغاز کرد: بررسی دکمه‌ها، فرم‌ها و بخش‌های تعاملی. بررسی کنیم که آیا صفحه‌خوان‌ها می‌توانند مفهوم آن‌ها را درک کنند یا خیر، و در صورت نیاز، ویژگی‌های ARIA را به آن‌ها اضافه کنیم.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

رنگ currentColor
یکی از قابلیت‌های CSS که گاهی فراموش می‌شود، اما می‌تواند در مدیریت رنگ‌ها بسیار مفید واقع شود، ویژگی currentColor است.

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

این ویژگی، یک واژه‌ی کلیدی خاص در CSS است که برای ارجاع به رنگ فعلی عنصر به کار می‌رود.

به عنوان مثال، اگر رنگ متن یک عنصر با استفاده از ویژگی color تعیین شده باشد، currentColor به همان رنگ اشاره خواهد کرد، فارغ از این‌که در کجا یا چگونه مورد استفاده قرار می‌گیرد.

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

در فایل‌های SVG نیز می‌توان رنگ پرشدگی یا خط دور عناصر را با currentColor تعیین کرد. این موضوع زمانی بسیار کاربردی است که نیاز دارید رنگ آیکون با رنگ متن یا سایر عناصر هماهنگ باشد.

مثال:

button {
  color: blue; /* تعیین رنگ متن */
  background-color: white;
  border: ۲px solid currentColor; /* حاشیه به رنگ آبی، همانند رنگ متن خواهد بود */
}

svg {
  fill: currentColor; /* آیکون به رنگ آبی، همانند رنگ متن نمایش داده می‌شود */
}

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




#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

all: unset – بازنشانی تمام استایل‌ها تنها با یک خط

احتمالاً بارها پیش آمده که به‌صورت دستی استایل‌های پیش‌فرض یک عنصر را پاک کرده‌اید؛ مثلاً به این شکل:

button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

حالا تصور کنید تمام این تنظیمات را بتوان فقط با یک خط جایگزین کرد:

button {
  all: unset;
}

و دقیقاً همان نتیجه را گرفت!

### ویژگی all: unset چیست؟

این ویژگی تمام استایل‌های اعمال‌شده را ــ حتی استایل‌های پیش‌فرض مرورگر ــ بازنشانی می‌کند،
در عین حال، ویژگی‌هایی که قابل ارث‌بری هستند (مانند color یا font-family) را از عنصر والد حفظ می‌کند.

در واقع، این ویژگی مانند فشردن دکمه «پاک کردن همه چیز» است؛
و بعد از آن، می‌توانید ظاهر دلخواه خود را از پایه و با کنترل کامل طراحی کنید.

### نمونه‌ی نهایی:

button {
  all: unset;
  background-color: blue;
  color: white;
  font-size: ۱۶px;
  padding: ۱۰px ۲۰px;
  border-radius: ۵px;
}

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

### چه زمانی از all: unset استفاده کنیم؟

* زمانی که می‌خواهید تمام استایل‌های پیش‌فرض را حذف کنید؛
* هنگام طراحی مؤلفه‌های سفارشی (custom components) با ظاهر کاملاً خالص؛
* وقتی که می‌خواهید همه چیز دقیقاً از «صفر» شروع شود.

all: unset ابزاری قدرتمند برای بازنشانی استایل است —
اما باید با احتیاط از آن استفاده کنید،
چرا که ممکن است ناخواسته ویژگی‌هایی را نیز حذف کنید که قصد حفظ آن‌ها را داشتید.
در چنین مواردی، گاهی بهتر است به‌صورت انتخابی استایل‌ها را پاک کنید تا بعداً مجبور به بازگرداندن دستی آن‌ها نشوید.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

متوقف کردن یک Watcher

‏Watcher**هایی که به‌صورت هم‌زمان (synchronous) درون تابع `setup()` یا در قالب `<script setup>` تعریف می‌شوند، به نمونه (instance) کامپوننت مالک وابسته هستند و به‌طور خودکار هنگام **unmount شدن آن کامپوننت متوقف خواهند شد. در اغلب موارد، نیازی نیست نگران متوقف کردن دستی آن‌ها باشید.

نکته‌ی کلیدی در این‌جاست که Watcher باید به‌صورت هم‌زمان ایجاد شود؛ اگر Watcher در یک تابع غیرهم‌زمان (asynchronous) مانند setTimeout ایجاد گردد، دیگر به کامپوننت والد وابسته نخواهد بود و باید به‌صورت دستی متوقف شود تا از نشت حافظه (memory leak) جلوگیری شود. به مثال زیر توجه کنید:

<script setup>
import { watchEffect } from 'vue'

// این Watcher به‌صورت خودکار متوقف خواهد شد
watchEffect(() => {})

// ...اما این یکی نه!
setTimeout(() => {
  watchEffect(() => {})
}, ۱۰۰)
</script>

برای متوقف کردن دستی یک Watcher**، می‌توان از تابع بازگشتی استفاده کرد. این روش هم برای `watch` و هم برای `watchEffect` کاربرد دارد:

const unwatch = watchEffect(() => {})

// ...در زمانی دیگر، زمانی که دیگر نیازی نیست
unwatch()

توجه داشته باشید که تنها در موارد بسیار محدود نیاز به ایجاد **Watcher به‌صورت غیرهم‌زمان وجود دارد، و در هر زمان ممکن، بهتر است از ایجاد هم‌زمان استفاده شود.

اگر نیاز دارید منتظر داده‌ای غیرهم‌زمان بمانید، می‌توانید منطق Watcher خود را مشروط طراحی کنید:

// داده‌ای که به‌صورت غیرهم‌زمان بارگذاری می‌شود
const data = ref(null)

watchEffect(() => {
  if (data.value) {
    // انجام عملیات زمانی که داده بارگذاری شد
  }
})

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

ویدیو دوبله شده در مورد انواع روش‌های آپلود فایل و رمزگذاری Base64 [+لینک]

به بررسی روش‌های مختلف آپلود فایل‌ها به سرور از جمله استفاده از داده‌های فرم چندبخشی (Multi-Part Form Data) و رمزگذاری Base64 پرداخته شد. روش‌های مختلف مانند ارسال فایل‌ها به صورت متن ساده (Plain Text)، رمزگذاری URL و فرم داده چندبخشی به تفصیل بررسی شد. همچنین استفاده از رمزگذاری Base64 برای جاسازی تصاویر در ایمیل‌ها و صفحات HTML شرح داده شد. در نهایت، نکات مهم در مورد محدودیت‌ها و بهترین شیوه‌های استفاده از این تکنیک‌ها در دنیای واقعی بیان گردید.


🔗https://www.aparat.com/v/pqz7475
#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript

در حال پیاده‌سازی بارگذاری فایل همراه با نوار پیشرفت هستیم

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

بیایید به نحوه‌ی پیاده‌سازی آن بپردازیم:

در این پیاده‌سازی، از شیء XMLHttpRequest استفاده می‌کنم؛ این شیء وظیفه‌ی ارسال فایل به‌صورت غیرهم‌زمان به سرور را بر عهده دارد و مجموعه‌ای از رویدادها را برای کنترل دقیق‌تر این فرآیند در اختیار ما می‌گذارد.

در این میان، لازم است بدانیم که کنترل‌کننده‌ی استاندارد xhr.onprogress`، پیشرفت *دریافت پاسخ از سرور* را پیگیری می‌کند؛ اما آنچه ما نیاز داریم، پیشرفت *ارسال فایل به سرور* است. از این رو، از `xhr.upload.onprogress بهره می‌گیریم تا رویدادهایی را که در طول انتقال هر بخش از داده‌ها به سرور رخ می‌دهند، دریافت کرده و وضعیت بارگذاری را با دقت به کاربر نمایش دهیم.

const xhr = new XMLHttpRequest();

این شیء دارای مجموعه‌ای از رویدادهای مفید است که در اسلاید بالا به آن‌ها اشاره کرده‌ام. با ترکیب این رویدادها و محاسبات ساده‌ای که در آن‌ها:

* lengthComputable مشخص می‌کند آیا می‌توان اندازه‌ی کل داده را محاسبه کرد،
* loaded میزان بایت‌های ارسال‌شده را نشان می‌دهد،
* total نیز نشان‌دهنده‌ی حجم کلی داده‌های ارسالی است،

می‌توان نوار پیشرفتی طراحی کرد که به‌صورت درصدی، وضعیت بارگذاری را نمایش دهد.

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

if (e.lengthComputable) {
  const percent = Math.round((e.loaded / e.total) * 100);
  // به‌روزرسانی رابط کاربری
}

به این ترتیب، یک نوار پیشرفت واکنش‌گرا خواهیم داشت که وضعیت لحظه‌ای بارگذاری را به‌روشنی به کاربر نمایش می‌دهد.



#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript