جاوااسکریپت | JavaScript

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

برای افزودن اسکریپت‌ها به صفحه از عنصر <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

👍2

174 views_, 16:32