موارد استفاده از <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

⚜️عزیز خدا ذلیل نمیشود
💚سالروز ولادت حضرت زینب(س)

🔗https://www.youtube.com/watch?v=pg9wdMnPfcg
#️⃣#event
👥@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