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

ویژگی‌های عمومی و اسکریپت‌ها

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

10.1 ویژگی‌های جهانی برای تمام تگ‌ها

10.1.1 کنترل کلی و معنایی

هر عنصر HTML می‌تواند از مجموعه‌ای از ویژگی‌های جهانی (Global Attributes) استفاده کند که برای تمام تگ‌ها قابل اعمال هستند. این ویژگی‌ها بدون نیاز به تعریف مجدد به مرورگر، موتورهای جستجو و ابزارهای دسترسی کمک می‌کنند تا ساختار، رفتار و معنای صفحه را به درستی درک کنند.

class	مشخص کردن کلاس‌های CSS برای استایل‌دهی
id	شناسه منحصر به فرد برای تگ (برای جستجو، اسکرول، JavaScript)
hidden	مخفی کردن تگ از نمایش (بدون حذف از DOM)
lang	زبان محتوا مثلا (fa - en)
tabindex	ترتیب ورود کاربر به عناصر با کلید Tab
title>	متن توضیحی (نمایش در هاور)
style	استایل داخلی (مستقیم)
data-*	ویژگی‌های سفارشی برای ذخیره داده در متون HTML

<div 
 id="user-card"
 class="card profile"
 lang="fa"
 tabindex="0"
 title="اطلاعات کاربر"
 hidden
 data-user-id="12345"
>
 <p>نام: محمد احمدی</p>
</div>

hidden فقط از نمایش محتوا جلوگیری می‌کند اما عنصر همچنان در DOM وجود دارد.
tabindex="-1" برای غیرفعال کردن از دسترسی با Tab استفاده می‌شود.
tabindex="0" برای فعال‌سازی از طریق Tab.
lang به موتورهای جستجو و ابزارهای خواندن متن کمک می‌کند تا لحن و تلفظ را به درستی تشخیص دهند.

10.2 استفاده از ویژگی‌های سفارشی (data-*): ذخیره‌سازی داده در HTML

10.2.1 تعریف ویژگی‌های سفارشی

ویژگی‌های با پیشوند data**-** برای ذخیره داده‌های شخصی‌سازی‌شده در HTML استفاده می‌شوند.
این داده‌ها به صورت خودکار در **dataset** در $JavaScript$ قابل دسترسی هستند.

<button 
 id="btn-action" 
 data-action="delete" 
 data-user-id="789" 
 data-confirm="آیا مطمئن هستید؟"
>
 حذف کاربر
</button>

ویژگی‌های data-* فقط برای داده‌های فنی (نه محتوای نمایشی) استفاده شوند. نباید از آن‌ها برای نمایش محتوا استفاده کرد.

10.2.2 دسترسی به داده‌ها در JavaScript

با استفاده از element.dataset می‌توان به مقادیر data-* دسترسی پیدا کرد.

<script>
 const button = document.getElementById("btn-action");
    
 button.addEventListener("click", function () {
  const action = this.dataset.action;        // "delete"
  const userId = this.dataset.userId;        // "789"
  const confirmMsg = this.dataset.confirm;   // "آیا مطمئن هستید؟"
    
  if (confirm(confirmMsg)) {
   console.log(`عملیات ${action} برای کاربر ${userId}`);
   // اجرای عملیات
  }
});
</script>

dataset به صورت camelCase نام‌گذاری می‌شود (مثلاً data-user-id → dataset.userId).
این روش به جای استفاده از getAttribute() مختصرتر و ایمن‌تر است.
داده‌های data- در سمت کلاینت ذخیره می‌شوند و باید در سمت سرور مجدداً اعتبارسنجی شوند.
از data- برای داده‌های حساس (مثل رمز عبور) خودداری کنید.

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

10.3.1 <script>: بارگذاری و اجرای کدهای JavaScript

src	مسیر فایل JS (خارجی)
async	بارگذاری غیرهمزمان (برای فایل‌هایی که وابستگی ندارند)
defer	بارگذاری و اجرای بعد از تحلیل DOM
type="module"	استفاده از ES Modules (ESM)
nomodule	برای مرورگرهای قدیمی (fallback)

<script src="app.js" async></script>
<script src="analytics.js" defer></script>
<script type="module" src="main.mjs"></script>
<script nomodule src="legacy.js"></script>

async مناسب برای کدهای مستقل (مثلاً تحلیل، تبلیغات).
defer مناسب برای کدهای وابسته به DOM (مثلاً اسکریپت‌های اصلی).
type="module" امکان استفاده از import/export را فراهم می‌کند.

async و defer هر دو باعث تأخیر در اجرای کد می‌شوند، اما defer اجرا را بعد از DOMContentLoaded تضمین می‌کند.

10.3.2 هندلرهای درون‌خطی (Inline Event Handlers)

این روش شامل تعیین رویدادها مستقیماً در HTML است (مثلاً onclick).

<button onclick="alert('کلیک شد!')">کلیک کنید</button>
<input type="text" oninput="this.value = this.value.toUpperCase()">

استفاده از هندلرهای درون‌خطی به عنوان روش توصیه‌شده نیست.
این روش منجر به تداخل کد، عدم نگهداری و مشکلات امنیتی (مثل XSS) می‌شود.
بهتر است از addEventListener در JavaScript استفاده شود.

<button id="myBtn">کلیک کنید</button>

<script>
 document.getElementById("myBtn").addEventListener("click", function () {
  alert("کلیک شد!");
 });
</script>

استفاده از addEventListener امکان اضافه کردن چندین هندلر به یک رویداد را فراهم می‌کند.
امکان حذف هندلر با removeEventListener وجود دارد.

یک صفحه وب موفق، فقط با زیبایی ظاهری نیست بلکه با استفاده هوشمندانه از ویژگی‌های عمومی، مدیریت داده با data-* و اجرای اسکریپت‌های پیشرفته با async/defer و addEventListener ساخته می‌شود. این فصل پایه‌ای برای نوشتن محتوای پویا، پایدار و متناسب با استانداردهای جهانی است.

بعدی قبلی