شما اچ‌تی‌ام‌ال را نمی‌شناسید: انواع اسکریپت‌ها

برای افزودن اسکریپت‌ها به صفحه از عنصر <script> استفاده می‌شود. اسکریپت‌ها انواع مختلفی دارند که بر رفتار و شیوه‌ی بارگذاری آن‌ها تأثیر می‌گذارد.

## 🔹 اسکریپت کلاسیک

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

<script>
  console.log("Hello from classic script!");
</script>

---

## 🔹 اسکریپت داده (type="not-javascript")

وقتی نوع اسکریپت رو چیزی غیر از جاوااسکریپت بذاریم، مرورگر اون رو اجرا نمی‌کنه. میشه برای نگهداری داده یا تنظیمات استفاده کرد.

<script type="not-javascript">
  {
    "user": "Ali",
    "role": "admin"
  }
</script>

---

## 🔹 اسکریپت خارجی کلاسیک

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

<script src="/script.js"></script>

📄 در فایل script.js می‌نویسیم:

console.log("Loaded from external file!");

---

## 🔹 اسکریپت خارجی با async

وقتی async بذاریم، فایل هم‌زمان با پردازش صفحه بارگذاری میشه. ولی به محض اینکه کامل دانلود بشه، اجرا میشه و پردازش صفحه رو همون لحظه متوقف می‌کنه.

<script src="/script.js" async></script>

---

## 🔹 اسکریپت خارجی با defer

اینجا فایل بارگذاری میشه، اما اجرای اون تا وقتی کل DOM آماده نشه عقب میفته. به همین خاطر همیشه مطمئنی به ترتیب ظاهر شدنش در HTML اجرا میشه.

<script src="/script.js" defer></script>

---

## 🔹 اسکریپت با async defer

اگه هر دو ویژگی رو با هم بذاریم، در عمل مثل async رفتار می‌کنه و defer نادیده گرفته میشه.

<script src="/script.js" async defer></script>

---

## 🔹 اسکریپت ماژول (type="module")

اینجا میشه از import و export استفاده کرد. ماژول‌ها مثل defer هستن: در زمان بارگذاری پارسر رو متوقف نمی‌کنن و بعد از آماده شدن DOM اجرا می‌شن.

<script type="module">
  import { sayHello } from "./utils.js";
  sayHello("Ali");
</script>

📄 در فایل utils.js:

export function sayHello(name) {
  console.log("Hello, " + name);
}

---

## 🔹 ماژول با async

همه‌ی وابستگی‌های ماژول به صورت موازی بارگذاری میشن. وقتی آخرینش آماده شد، ماژول اجرا میشه.

<script type="module" src="/main.js" async></script>

---

## 🔹 اسکریپت با nomodule

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

<script src="/fallback.js" nomodule></script>

---

## 🔹 نقشه‌ی واردات (type="importmap")

به مرورگر می‌گه چطور اسم‌های مستعار ماژول‌ها رو به مسیر واقعی فایل‌ها وصل کنه.

<script type="importmap">
{
  "imports": {
    "lib": "/js/library-v1.js"
  }
}
</script>

<script type="module">
  import { doSomething } from "lib";
  doSomething();
</script>

---

## 🔹 قوانین بارگذاری پیش‌دستانه (type="speculationrules")

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

<script type="speculationrules">
{
  "prefetch": [
    { "source": "document", "urls": ["/next-page.html"] }
  ]
}
</script>

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

## تفاوت بین Number.isFinite و isFinite چیست؟ 🤨

در JavaScript دو تابع برای بررسی این که آیا یک مقدار یک عدد محدود (Finite) است یا نه وجود دارد: Number.isFinite و تابع سراسری isFinite. بیایید با هم تفاوت آن‌ها را بررسی کنیم!

---

### ✔️ Number.isFinite

این تابع بررسی می‌کند که آیا مقدار داده‌شده یک عدد محدود واقعی است یا خیر.

تفاوت اصلی: این تابع تبدیل نوع داده‌ای انجام نمی‌دهد.

console.log(Number.isFinite(10));        // true
console.log(Number.isFinite('10'));      // false
console.log(Number.isFinite(Infinity));  // false

---

### ✔️ isFinite

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

console.log(isFinite(10));        // true
console.log(isFinite('10'));      // true، رشته به عدد تبدیل می‌شود
console.log(isFinite('abc'));     // false
console.log(isFinite(true));      // true، true به 1 تبدیل می‌شود

---

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

* 🧩 Number.isFinite: وقتی نیاز به بررسی دقیق و بدون تبدیل نوع عدد محدود دارید.
* 🧩 isFinite: وقتی می‌خواهید بررسی کنید که مقدار قابل تبدیل به عدد محدود است یا نه. 👍



#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

بررسی آزاردهنده‌ترین عنصر در میان تمام ویجت‌های استاندارد HTML

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

اگر زمانی که موتور خودرو را روشن می‌کنیم، موتور سرد باشد، Cold Start رخ می‌دهد. در این حالت، دور موتور بیش از حد نرمال افزایش می‌یابد تا زمانی که موتور به دمای محیطی که در آن قرار دارد برسد. این کار باعث می‌شود موتور سریع‌تر به شرایط عملکردی مناسب خود برسد.

در دنیای نرم‌افزار، هوش مصنوعی و سرویس‌های ابری نیز مفهوم مشابهی وجود دارد. «شروع سرد» (Cold Start) به وضعیتی گفته می‌شود که وقتی یک سرویس، مدل یا برنامه برای اولین بار اجرا می‌شود، باید همه چیز را از صفر بارگذاری کند. به همین دلیل، معمولاً در این مرحله زمان پاسخ‌دهی طولانی‌تر از حالت عادی است.

در سرویس‌های ابری (Cloud Services):
وقتی یک تابع یا کانتینر برای اولین بار اجرا می‌شود، سیستم باید محیط آن را آماده کند، کتابخانه‌ها و وابستگی‌ها را بارگذاری کند و سپس کد را اجرا کند. این زمان اولیه همان Cold Start است.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

### مقادیر دوگانه در ویژگی display در CSS 🤔

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

#### مقادیر دوگانه چیست؟

🧩 مقدار نخست، رفتار اصلی عنصر را مشخص می‌کند (مانند *block*، *inline* یا *flex*).
🧩 مقدار دوم، این رفتار را تکمیل و اصلاح می‌کند.

به‌عنوان نمونه، در حالت inline-block**، عنصر مانند یک عنصر درون‌خطی رفتار می‌کند، اما در عین حال می‌توان برای آن ابعاد مشخص کرد، درست مانند یک عنصر بلوکی. 👍

```html
<div style="display: inline-block; width: 100px; height: 50px; background-color: lightblue;">بلوک</div>
```

#### نمونه‌های دیگر:

✔️ **inline-block:
⏺️ *inline* — عنصر در همان خط باقی می‌ماند.
⏺️ *block* — امکان تعریف اندازه‌ها فراهم است.

✔️ inline-flex:
⏺️ *inline* — ظرف (container) موجب شکستن خط نمی‌شود.
⏺️ *flex* — عناصر درون ظرف بر اساس قوانین فِلِکس‌باکس چیده می‌شوند.

---

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

مقادیر دوگانه در CSS باعث ساده‌تر شدن ساختار صفحه می‌شوند و امکان طراحی صفحات منعطف‌تر و واکنش‌گرا را با حداقل میزان کدنویسی فراهم می‌آورند. 💗



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

### ویژگی decoding در تگ <img> واقعاً چه کاری انجام می‌دهد؟

(منبع: [TuneTheWeb](https://www.tunetheweb.com/blog/what-does-the-image-decoding-attribute-actually-do/))

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

احتمالاً دیده‌اید که بعضی تصاویر با ویژگی decoding="async" اضافه می‌شوند. شاید خودتان هم طبق توصیه‌های مقالات بهینه‌سازی عملکرد چنین ویژگی‌ای را استفاده کرده‌اید. اگر از کامپوننت Image در NextJS استفاده می‌کنید، به‌صورت پیش‌فرض این ویژگی روی تصاویر فعال است. اما آیا واقعاً مهم است؟

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

---

### مقادیر ویژگی decoding

طبق مشخصات، این ویژگی سه مقدار دارد:

* sync → درخواست رمزگشایی همزمان تصویر
* async → درخواست رمزگشایی ناهمزمان تصویر
* auto → مرورگر خودش تصمیم می‌گیرد

---

### روند کار تصویر در مرورگر

تصاویر مراحل زیر را طی می‌کنند:

1. مرورگر <img src="..."> را می‌بیند و ابتدا تصویر را از شبکه یا کش دریافت می‌کند.
2. سپس یک فرآیند کمکی تصویر را رمزگشایی می‌کند (تبدیل بایت‌ها به داده‌های قابل رندر).
3. در نهایت تصویر در صفحه نمایش داده می‌شود.

نکته جالب این است که در صفحات استاتیک، این ویژگی تقریباً تأثیری ندارد، زیرا مرورگرها هوشمندانه تغییرات را جمع‌آوری کرده و به شکل chunks رندر می‌کنند و تصاویر در جریان اصلی رندر بلوکه نمی‌شوند.

* در Firefox به‌صورت پیش‌فرض async است.
* در Chrome پیش‌فرض sync است.
* در WebKit بیشتر مواقع sync است اما در بعضی استثناها async است.

بنابراین مرورگرها هنوز روی یک رفتار پیش‌فرض توافق ندارند.

---

### تفاوت واقعی هنگام استفاده از JavaScript

در SPAها (برنامه‌های تک‌صفحه‌ای) وقتی تصاویر توسط JS اضافه می‌شوند، تفاوت محسوس می‌شود:

* اگر داخل JS یک div با پس‌زمینه قرمز بسازید و بعد یک تصویر بزرگ داخل آن اضافه کنید:

* با sync → صفحه ممکن است کمی گیر کند زیرا مرورگر منتظر رمزگشایی تصویر می‌ماند.
* با async → ابتدا پس‌زمینه قرمز نمایش داده می‌شود و بعد تصویر رندر می‌شود، اما ممکن است موقعیت چشمک زدن ایجاد شود.

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

---

### توصیه‌ها

* اگر تصاویر را با JS بارگذاری می‌کنید، بهتر است از async استفاده کنید. این روش هم ناهمزمان است و هم قبل از رندر، تصویر آماده است.
* async مناسب زمانی است که متن صفحه مهم‌تر از تصاویر است. در این حالت دو مرحله رندر داریم ولی متن سریع‌تر نمایش داده می‌شود.
* برای بهینه‌سازی Core Web Vitals، به ویژه LCP**، بهتر است مقادیر مختلف را امتحان کنید. هرچند intuitively به نظر می‌رسد `sync` بهتر باشد، اما مرورگرها هوشمند هستند و باید تست و مقایسه کنید.
* اگر روی بهینه‌سازی رمزگشایی تصاویر کار می‌کنید، یا سایتتان از قبل عالی است، یا بهتر است روی مسائل مفیدتری مثل **بارگذاری تنبل تصاویر و بهینه‌سازی خود تصاویر تمرکز کنید.

---

منبع اصلی: [TuneTheWeb](https://www.tunetheweb.com/blog/what-does-the-image-decoding-attribute-actually-do/)


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

در media queries نمی‌توان از ویژگی‌های CSS (@property) استفاده کرد، اما راه‌های جایگزینی وجود دارد از طریق container queries.

@property --inline-size-s {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: ۱۰۰vi;
}

:root {
  --breakpoint-s: ۴۸em;
  --inline-size-s: min(var(--breakpoint-s), ۱۰۰vi);
}

body {
  background-color: var(--bg-color);

  --bg-color: oklch(۰.۹۴ ۰.۰۱ ۹۹);
  
  @container style(--inline-size-s: var(--breakpoint-s)) {
    --bg-color: oklch(۰.۸۷ ۰.۲۱ ۹۵.۸۲);
  }
}

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

در عنصر <link rel="stylesheet"> می‌توان ویژگی media را با یک عبارت مشابه آنچه در دستور @media استفاده می‌شود، تعیین کرد. مرورگر این عبارت رسانه‌ای را با محیط فعلی تطبیق می‌دهد و نتیجه‌ی آن بر نحوه‌ی بارگذاری فایل استایل تأثیر می‌گذارد:

<link
  rel="stylesheet"
  href="mobile.css"
  media="(width < 600px)"
>

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

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

بارگذاری فایل‌های CSS در لایه‌های مجزا با استفاده از ‎@import

<style>
  @import url('utils.css') layer(utils);
</style>

مرورگر فایل utils.css را بارگذاری کرده و آن را در لایه‌ای با نام utils قرار می‌دهد. این کار امکان کنترل ترتیب و اولویت آبشاریِ سبک‌های این فایل نسبت به سایر لایه‌ها را فراهم می‌آورد — یعنی می‌توان اولویت آن را نسبت به فایل‌های دیگر بالا برد یا پایین آورد.

با این حال، دستور @import از نظر کارایی انتخاب مطلوبی نیست و معمولاً توصیه می‌شود از آن پرهیز شود، زیرا وجود `@import`های تو‌در‌تو موجب می‌شود فایل‌های سبک به‌صورت متوالی و نه موازی بارگذاری شوند.




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

همه‌ی فضاهای ذخیره‌سازی مثل هم نیستند؛ با «سطل‌های ذخیره‌سازی» آشنا شوید

وقتی حافظه‌ی دستگاه کاربر تمام می‌شود، داده‌هایی که با APIهایی مثل IndexedDB یا localStorage ذخیره شده‌اند، بی‌اختیار حذف می‌شوند و کاربر نمی‌تواند جلویش را بگیرد. راه فعلی برای «دائمی» کردن این است که متد persist() را صدا بزنیم:

const persisted = await navigator.storage.persist();
if (persisted) {
  /* حافظه فقط با دستور مستقیم کاربر پاک می‌شود. */
}

این روش «همه یا هیچ» است؛ نمی‌توانید بگویید «فقط فلان داده مهم بماند». همه‌چیز در یک سطل ذخیره‌سازی واحد می‌ریزد.
API سطل‌های ذخیره‌سازی (Storage Buckets API)
ایده‌ی اصلی این است که سایت‌ها بتوانند چند سطل (bucket) جداگانه بسازند؛ مرورگر می‌تواند هر سطل را مستقل از بقیه حذف کند. بدین‌ترتیب توسعه‌دهنده می‌گوید «اگر مجبور به پاک‌کردن شدی، اول سراغ این سطل برو، آن یکی را آخرش بگذار».
مثال عملی
فرض کنید یک برنامه‌ی ایمیل داریم. از دست رفتن پیش‌نویس‌های ذخیره‌نشده روی دستگاه فاجعه است، اما اگر ایمیل‌های قدیمیِ Inbox حذف شوند چندان مهم نیست، چون روی سرور باقی‌مانده‌اند.

چطور از API استفاده کنیم؟

// سطل پیش‌نویس‌ها که فقط روی کلاینت است
const draftsBucket = await navigator.storageBuckets.open('drafts', {
  durability: 'strict', // یا 'relaxed'
  persisted: true,      // یا false
});

‏دو پارامتر اختیاری می‌توان داد:
persisted: false (پیش‌فرض) یا true
durability: 'relaxed' (پیش‌فرض) یا 'strict'
'strict': در برابر قطع برق ایمن‌تر است؛ ممکن است سرعت نوشتن کم شود، باتری بیشتر مصرف کند و عمر حافظه‌ی فیزیکی کوتاه‌تر شود.
'relaxed': در صورت قطع برق ممکن است چند ثانیه‌ی آخر اطلاعات از بین برود؛ در عوض نوشتن سریع‌تر و دوام باتری و حافظه‌ی بیشتر است.

دسترسی به APIهای حافظه از داخل هر سطل
هر سطل به همان APIهای همیشگی (IndexedDB، Cache، File و …) وصل است؛ فقط ورودی از طریق خود سطل انجام می‌شود.

const inboxDb = await new Promise((resolve, reject) => {
  const request = inboxBucket.indexedDB.open('messages');
  request.onupgradeneeded = () => { /* کد مهاجرت */ };
  request.onsuccess = () => resolve(request.result);
  request.onerror  = () => reject(request.error);
});

🔗https://developer.chrome.com/docs/web-platform/storage-buckets
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

🎯 بارگذاری مشروط فایل‌های CSS با استفاده از ‎@supports‎

دستور کاربردی دیگری که در این زمینه مطرح می‌شود، ‎`@supports`‎ است. با استفاده از آن می‌توان برخی سبک‌ها را تنها زمانی بارگذاری کرد که مرورگر از قابلیت‌های خاص CSS پشتیبانی کند. این ویژگی ابزاری قدرتمند برای پیاده‌سازی بهبود تدریجی (Progressive Enhancement) به شمار می‌آید و به توسعه‌دهندگان کمک می‌کند تا تجربه‌ی کاربری یکسانی را در مرورگرهای مختلف حفظ کنند.

<style>
  @import url('scroll-animations.css') supports(animation-timeline: scroll());
</style>

در این مثال، مرورگر فایل ‎`scroll-animations.css`‎ را فقط در صورتی بارگذاری می‌کند که از ویژگی ‎`animation-timeline: scroll()`‎ پشتیبانی داشته باشد. این روش راهی تمیز و هوشمندانه برای استفاده‌ی بهینه از قابلیت‌های مدرن CSS است.


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

کار با dispatchEvent در جاوااسکریپت 👨‍🏫

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

📚 اصول استفاده

برای ارسال یک رویداد باید:

✔️ رویداد را بسازید؛
✔️ آن را با dispatchEvent ارسال کنید.

const button = document.querySelector('button');
const event = new Event('click');  // ساخت رویداد
button.dispatchEvent(event);       // ارسال رویداد

حالا اگر روی دکمه‌ای هندلر رویداد click تعریف شده باشد، اجرا می‌شود، درست همانند زمانی که کاربر واقعاً کلیک کرده باشد. 👍

📚 رویدادهای همراه با داده

اگر لازم است داده‌های اضافی همراه رویداد ارسال شود، از CustomEvent استفاده می‌کنیم؛ رویدادی ویژه که امکان انتقال داده‌ها را از طریق ویژگی detail فراهم می‌کند.

const customEvent = new CustomEvent('dataChanged', {
  detail: { value: 'متن جدید' },
  bubbles: true, // رویداد در DOM به سمت بالا می‌جهد
  cancelable: true // امکان لغل رفتار پیش‌فرض وجود دارد
});

✔️ detail: شیئی است که هر داده‌ای را که بخواهید می‌تواند در خود جای دهد؛
✔️ bubbles (اختیاری): رویداد می‌تواند در درخت DOM به سمت بالا «بجهد»؛
✔️ cancelable (اختیاری): اجازه می‌دهد رفتار پیش‌فرض رویداد لغو شود.

📚 چرا به این ابزار نیاز داریم؟

⏺️ می‌توان در هر لحظه‌ای رویداد را به‌راحتی ارسال کرد؛
⏺️ با CustomEvent هر داده‌ای را میان اجزا رد و بدل کرد؛
⏺️ برای تست یا شبیه‌سازی اعمال کاربر روی صفحه بسیار کارآمد است.

در مجموع، این ابزار برای ساخت رابط‌هایی پویا و انعطاف‌پذیر بی‌نظیر است؛ از آن بهره بگیرید تا رویدادها را مدیریت کرده و داده‌ها را میان عناصر صفحه جابه‌جا کنید. 👍

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

موارد استفاده از <datalist> 🎨

عنصر <datalist> اغلب نادیده گرفته می‌شود، در حالی که قابلیت‌های بسیار مفیدی دارد. 😔

با کمک این تگ می‌توان فهرستی از گزینه‌های از پیش تعریف‌شده را در اختیار کاربر گذاشت تا از میان آن‌ها انتخاب کند، بدون آن‌که از وارد کردن مقدار دلخواه خود بازداشته شود.

این ویژگی زمانی ایدئال است که بخواهیم گزینه‌های رایج یا پرکاربرد را پیشنهاد دهیم، اما کاربر را به انتخاب آن‌ها مجبور نکنیم.

📚 برای استفاده از <datalist> باید چند گام ساده را انجام داد:

✔️ ایجاد عنصر <datalist> با یک شناسه‌ی منحصربه‌فرد؛

✔️ افزودن عناصر <option> درون <datalist> برای نمایش گزینه‌های قابل انتخاب؛

✔️ درون فیلد ورودی (<input>)، افزودن ویژگی list که مقدار آن باید با شناسه‌ی عنصر <datalist> یکسان باشد.

نمونه:

<label for="browsers">مرورگر را انتخاب کنید:</label>
<input list="browser-list" name="browsers" id="browsers">
<datalist id="browser-list">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

گذشته از فیلدهای متنی، می‌توان از <datalist> برای انتخاب رنگ نیز استفاده کرد. مرورگرها یک انتخاب‌گر رنگ استاندارد در اختیار کاربر قرار می‌دهند که امکان انتخاب از میان رنگ‌های پیشنهادی را فراهم می‌کند.
کاربر می‌تواند یکی از رنگ‌های ارائه‌شده را انتخاب کند یا رنگ دلخواه خود را وارد نماید، و این انعطاف‌پذیری باعث می‌شود روند انتخاب ساده‌تر و کاربرپسندتر شود. 👍

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

چگونه باید پارامترها را به‌درستی در نشانی اینترنتی (URL) ارسال کرد؟ 🤔

هنگام ارسال پارامترها از طریق نشانی اینترنتی، بسیار مهم است که آن‌ها را به‌درستی کُدگذاری کنیم. این کار باعث می‌شود درخواست‌ها به‌درستی اجرا شوند و داده‌ها دچار اعوجاج نشوند. در JavaScript چند تابع مفید برای این کار وجود دارد: encodeURIComponent()`، `encodeURI() و URLSearchParams. بیایید ببینیم هرکدام چه کاری انجام می‌دهند و در چه شرایطی بهتر است از آن‌ها استفاده شود. 😁

---

### ۱️⃣ encodeURIComponent()

از این تابع برای کُدگذاری مقدار پارامترها در نشانی اینترنتی استفاده می‌شود. این تابع تضمین می‌کند که همهٔ نویسه‌های خاص (مانند فاصله، علامت &، علامت =، یا /) به معادل‌های ایمن درصدی‌شان تبدیل شوند.

نمونه:

const name = "Katerina & Pro Frontend";
const encodedName = encodeURIComponent(name);
console.log(encodedName); // Katerina%20%26%20Pro%20Frontend

➡️ همیشه زمانی که مقدار پارامترها (مثل نام یا شهر) را کُدگذاری می‌کنید از encodeURIComponent() استفاده کنید تا از تفسیر نادرست نویسه‌هایی مانند فاصله یا علامت & جلوگیری شود.

---

### ۲️⃣ encodeURI()

از این تابع برای کُدگذاری کل نشانی اینترنتی استفاده می‌شود، اما نویسه‌هایی مانند ?, &, = و / را که بخشی از ساختار درخواست هستند، دست‌نخورده باقی می‌گذارد. این روش زمانی مفید است که می‌خواهید کل URL را کُدگذاری کنید، اما نمی‌خواهید جداکننده‌های پارامترها تغییر کنند.

نمونه:

const url = "https://example.com/search?channel=Katerina | Pro Frontend";
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // https://example.com/search?channel=Katerina%20%7C%20Pro%20Frontend

➡️ از encodeURI() برای کُدگذاری کل URL (هم مسیر و هم پارامترها) استفاده کنید، در حالی که ساختار کلی پرس‌وجو را حفظ می‌کنید.

---

### ۳️⃣ URLSearchParams

این شیء برای کار آسان‌تر با پارامترهای URL طراحی شده است. به‌طور خودکار مقادیر پارامترها را کُدگذاری می‌کند و متدهایی برای افزودن، حذف یا تغییر آن‌ها در اختیار می‌گذارد که کار با داده‌های پویا را ساده‌تر می‌کند.

const params = new URLSearchParams();
params.append('name', 'John Doe');
console.log(params.toString()); // 'name=John+Doe' — 

---

### در نتیجه:

✔️ encodeURIComponent() — برای کُدگذاری مقادیر پارامترها (مانند name=Katerina & Pro Frontend)

✔️ encodeURI() — برای کُدگذاری کل نشانی اینترنتی همراه با ساختار پرس‌وجو

✔️ URLSearchParams — برای افزودن، ویرایش و مدیریت آسان پارامترهای URL


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

آشنایی با navigator.userAgent 🧐

این ویژگی رشته‌ای است که توسط شیء navigator برگردانده می‌شود و شامل اطلاعاتی دربارهٔ مرورگر، سیستم‌عامل و دستگاه کاربر است.

به کمک آن می‌توان وب‌سایت را متناسب با مرورگر یا دستگاه خاصی تنظیم و بهینه کرد. 😁

---

### 🔹 نمونهٔ رشته:

"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36"

---

### اجزای اصلی رشتهٔ userAgent:

⏺️ Mozilla/5.0 — برچسب تاریخی؛
⏺️ Macintosh; Intel Mac OS X 10_15_7 — اطلاعات مربوط به سیستم‌عامل؛
⏺️ AppleWebKit/537.36 — موتور رندر مرورگر؛
⏺️ Chrome/141.0.0.0 — نسخهٔ مرورگر؛
⏺️ Safari/537.36 — اجزای تکمیلی.

---

### 🎯 چرا این اطلاعات مفید است؟

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

---

### 💡 نمونهٔ استفاده از userAgent:

if (/Chrome/.test(navigator.userAgent)) {
    console.log("کاربر از مرورگر Chrome استفاده می‌کند");
}

---

### ⚠️ نکات مهم:

✔️ قابل تغییر بودن رشته: کاربران می‌توانند با افزونه‌ها مقدار userAgent را تغییر دهند.
✔️ دقت پایین اطلاعات: برخی مرورگرها خود را به‌جای مرورگر دیگر معرفی می‌کنند.

برای نتایج قابل‌اعتمادتر، بهتر است به‌جای تکیه بر userAgent از روش feature detection (شناسایی قابلیت‌ها) استفاده کنید — که در پست بعدی درباره‌اش صحبت خواهیم کرد. 😉


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

گاهی به‌نظر می‌رسد که فهمیدن وضعیت کلیدهای ترکیبی مانند Shift**، **Control**، **Alt یا Meta کار پیچیده‌ای است. 🙈

«اصلاً چطور باید این کار را انجام داد؟ آیا باید هر کلید را جداگانه بررسی کنیم؟» 🤔

نگران نباشید — راه‌حل وجود دارد و بسیار ساده‌تر از چیزی است که تصور می‌کنید! تنها چیزی که نیاز دارید، متد `getModifierState()` در جاوااسکریپت است که در رویدادهای صفحه‌کلید در دسترس می‌باشد.

این متد به شما اجازه می‌دهد به‌راحتی بفهمید آیا یک کلید ترکیبی (مثلاً Shift یا Ctrl یا Alt) در لحظهٔ وقوع رویداد فشرده شده است یا نه.

---

### 💡 نمونهٔ استفاده:

document.addEventListener('keydown', function(event) {
  if (event.getModifierState('Shift')) {
    console.log('کلید Shift فشرده شده است!');
  }
  if (event.getModifierState('Control')) {
    console.log('کلید Control فشرده شده است!');
  }
});

متد getModifierState() مقدار true برمی‌گرداند اگر کلید ترکیبی در آن لحظه فشرده شده باشد، و در غیر این صورت false. به همین سادگی! 😁

---

### 🎯 مثال کاربردی

فرض کنید می‌خواهیم از رفتار پیش‌فرض مرورگر هنگام فشردن ترکیب Ctrl + S (ذخیرهٔ صفحه) جلوگیری کنیم:

document.addEventListener('keydown', function(event) {
  if (event.getModifierState('Control') && event.key === 's') {
    event.preventDefault(); // جلوگیری از عملکرد پیش‌فرض
    console.log('عملیات ذخیره‌سازی لغو شد!');
  }
});

---

### ✅ نتیجه

با استفاده از تنها چند خط کد و متد **getModifierState()**، می‌توانیم به‌سادگی وضعیت کلیدهای ترکیبی موردنیاز را بررسی و کنترل کنیم. 👍


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

نوآوری‌های CSS — کنترل حداکثری با انتخابگر :nth-child() و دستور جدید OF S

با استفاده از شبه‌کلاس `:nth-child()` می‌توان عناصر موجود در DOM را بر اساس ترتیبشان انتخاب کرد. نحوۀ کلاسیک An+B به شما امکان می‌دهد انتخاب عناصر را با دقت بالا کنترل کنید.

برای نمونه:

* :nth-child(2) — انتخاب دومین فرزند.
* :nth-child(2n) — انتخاب تمام فرزندان زوج.
* :nth-child(2n+1) — انتخاب تمام فرزندان فرد.
و غیره...

اما حالا ویژگی جدیدی در سطح چهارم انتخابگرهای CSS معرفی شده است — یعنی سینتکس OF S. این قابلیت به شما اجازه می‌دهد ابتدا عناصر را بر اساس یک فیلتر مشخص (مثلاً کلاس یا نوع خاصی از عناصر) محدود کنید، و سپس از میان همان گروه، عناصر مورد نظر را بر اساس ترتیبشان انتخاب نمایید.

ساختار کلی:

:nth-child(An+B [of S])
:nth-last-child(An+B [of S])

در سطح چهارم انتخابگرهای CSS (Selectors Level 4) که در [W3C](https://www.w3.org/TR/selectors-4/) تعریف شده است، می‌توان به‌صورت اختیاری یک فهرست از انتخابگرها را در :nth-child() یا :nth-last-child() ارسال کرد.

---

### 📘 مثال

<div class="test-1">one</div>
<div class="test-2">two</div>
<div class="test-1">three</div>
<div class="test-2">four</div>

:nth-child(2 of .test-1, .test-2) {
  outline: 0.3rem dashed lightblue;
}

---

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

تصور کنید شبه‌کلاس :nth-child با دستور of S مانند یک فیلتر هوشمند عمل می‌کند.
ابتدا مرورگر همهٔ عناصری را که با انتخابگرهای .test-1 و .test-2 مطابقت دارند پیدا می‌کند. سپس از میان آن فهرست فیلترشده، دومین عنصر را انتخاب می‌کند و سبک (style) مورد نظر را به آن اعمال می‌کند.

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

---

با این قابلیت، دامنۀ کارهایی که می‌توان تنها با CSS انجام داد روزبه‌روز گسترده‌تر می‌شود — بدون نیاز به جاوااسکریپت! 🎨


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

چگونه بدون استفاده از <br> در CSS شکست خط ایجاد کنیم 🧐

یک ترفند جالب وجود دارد که با استفاده از نماد \A و سبک‌هایی مثل white-space: pre-wrap می‌توان شکست خط را در CSS ایجاد کرد. بیایید بررسی کنیم چگونه این کار انجام می‌شود!

📕 نماد `\A` چیست؟

در CSS، \A راهی برای وارد کردن شکست خط در ویژگی content است که معمولاً در پیش‌عنصرها (::before و ::after) استفاده می‌شود. به جای قرار دادن دستی <br>`، کافی است `\A را بنویسیم تا مرورگر بداند در این نقطه باید خط جدید شروع شود.

با این حال، برای کارکرد صحیح این روش، لازم است ویژگی white-space را اضافه کنیم، مثلاً با مقدار pre-wrap. این ویژگی به مرورگر می‌گوید: «شکست‌های خط را مانند تگ <pre> پردازش کن، ولی همچنین اجازه بده متن در صورت نیاز به خط بعد منتقل شود.»

مثال:

.text::before {
  content: "خط اول\Aخط دوم"; /* \A شکست خط ایجاد می‌کند */
  white-space: pre-wrap;       /* \A را به عنوان شکست خط پردازش می‌کند */
}

اینجا \A در ویژگی content شکست خط ایجاد می‌کند و white-space: pre-wrap به مرورگر کمک می‌کند این شکست را به درستی نمایش دهد.

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


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

EyeDropper API: انتخاب رنگ‌ها مستقیم از روی صفحه 🤩

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

EyeDropper API به توسعه‌دهندگان وب این امکان را می‌دهد که کاربران بتوانند با استفاده از ابزار قطره‌چکان (pipette) رنگ‌ها را مستقیماً از صفحه انتخاب کنند. پس از انتخاب، مقدار رنگ به صورت sRGBHex (مثل #ff5733) بازگردانده می‌شود.

---

### نمونه ساده استفاده:

if ("EyeDropper" in window) {
  const eyeDropper = new EyeDropper();
  eyeDropper.open()
    .then(result => {
      console.log("رنگ انتخاب‌شده:", result.sRGBHex);
      document.body.style.backgroundColor = result.sRGBHex;
    })
    .catch(err => {
      console.error("خطا:", err);
    });
}

---

### نحوه عملکرد 🧐

1. فراخوانی متد open() روی شیء `EyeDropper`؛
2. باز شدن ابزار قطره‌چکان در مرورگر؛
3. انتخاب رنگ توسط کاربر؛
4. بازگرداندن رنگ انتخاب‌شده در فرمت `#RRGGBB`.

---

### مزایای API

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

---

### محدودیت پشتیبانی

این API در حال حاضر فقط در Chrome، Edge و Opera پشتیبانی می‌شود. در مرورگرهای Safari و Firefox هنوز قابل استفاده نیست.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

ترتیب عناصر در <head>

چند وقت یک‌بار به <head> پروژه‌های خود سر می‌زنید و بررسی می‌کنید که چه اتفاقی در آنجا می‌افتد؟ بهتر است این کار را به‌صورت دوره‌ای انجام دهید، زیرا محتوای <head> و ترتیب عناصر می‌تواند تأثیر منفی بر عملکرد سایت داشته باشد.

ابتدا باید از صحت ساختار اطمینان حاصل کرد. درون <head> تنها برخی عناصر مشخص مجاز هستند:

* یک عنصر <title>
* یک عنصر <base>
* صفر یا بیشتر عناصر <link>
* صفر یا بیشتر عناصر <meta>
* صفر یا بیشتر عناصر <script>
* صفر یا بیشتر عناصر <style>
* صفر یا بیشتر عناصر <template>
* صفر یا بیشتر عناصر <noscript>

اگر هر عنصر دیگری در <head> مشاهده شود، پارسر فوراً <head> را می‌بندد و عناصر باقی‌مانده را به <body> منتقل می‌کند.

مثال:

<head>
  <meta charset="utf-8">
  <title>سایت من</title>
  <img src="pixel.png">
  <link
    rel="preload"
    href="custom-font.woff2"
    as="font"
    type="font/woff2"
  >
  <link 
    rel="stylesheet"
    href="styles.css"
  >
  <script
    src="script.js"
    defer
  ></script>
</head>
<body>
  <!-- ... -->
</body>

پارسر این کد را به شکل زیر بازسازی می‌کند:

<head>
  <meta charset="utf-8">
  <title>سایت من</title>
</head>
<body>
  <img src="pixel.png">
  <link
    rel="preload"
    href="custom-font.woff2"
    as="font"
    type="font/woff2"
  >
  <link 
    rel="stylesheet"
    href="styles.css"
  >
  <script
    src="script.js"
    defer
  ></script>
  <!-- ... -->
</body>

این موضوع پیامدهای مختلفی دارد، زیرا محل و اولویت عناصر در صف بارگذاری منابع، وضعیت مسدودسازی پارسر و عملکرد اسکریپت‌هایی که به <head> وابسته‌اند، تغییر می‌کند.

عناصر غیرمجاز در <head> معمولاً هنگام ادغام «پیکسل‌ها»، فریم‌های تحلیلی و دیگر افزونه‌های جانبی ظاهر می‌شوند و معمولاً شامل <img>`، <iframe> و <div>` هستند.

دستورالعمل‌های این افزونه‌ها اغلب پیشنهاد می‌کنند که کد مربوطه در ابتدای <body> قرار گیرد، اما گاهی همراه با <script> به <head> وارد می‌شوند. استفاده از ولیدیتور HTML می‌تواند چنین خطاهایی را شناسایی کند.

منبع دیگر مشکلات، ترتیب نادرست عناصر در <head> است. جابجایی ساده عناصر به ترتیب مناسب می‌تواند زمان بارگذاری را تا چند ثانیه کاهش دهد. در این زمینه، سخنرانی بسیار خوبی توسط هری رابرتز موجود است.

دو ابزار برای شناسایی مشکلات ترتیب عناصر وجود دارد:

* ct.css — فایل استایلی که عناصر <head> را قابل مشاهده می‌کند و نقاط مشکل‌دار را برجسته می‌سازد.
* capo.js — قطعه کدی که محتوای <head> را تحلیل کرده و ترتیب فعلی و مرتب‌شده را در کنسول نمایش می‌دهد.

مدیران تگ نیز توجه ویژه‌ای می‌طلبند، زیرا از طریق آن‌ها اسکریپت‌های بازاریابی مختلف به‌طور غیرقابل کنترل وارد سایت شده و <head> را شلوغ می‌کنند.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript