محل قرارگیری جاوااسکریپت در صفحه (JavaScript Where To)

تگ <script>

در HTML، کدهای جاوااسکریپت (JavaScript) بین تگ های <script> و </script> قرار می گیرند.

نمونه کد

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

تست کد خودتان »

نکته: نوع type="text/javascript" قدیمی است و نیاز نیست.

توابع و رویدادها در جاوااسکریپت

یک تابع (Function) در JavaScript یک بلوک کد است که با فراخوانی اجرا می شود.

توابع می توانند با رخدادها (Events) مثل کلیک کاربر اجرا شوند.

نکته: جزئیات بیشتر درباره توابع و رویدادها در فصل های بعدی آموزش داده می شود.

جاوااسکریپت در <head> یا <body>

می توانید هر تعداد اسکریپت در سند HTML قرار دهید. آن ها در <body> یا <head> یا هر دو قابل استفاده هستند.

جاوااسکریپت در <head>

مثال زیر تابعی را در بخش <head> تعریف می کند که هنگام کلیک دکمه اجرا می شود:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
  <h2>Demo JavaScript in Head</h2>
  <p id="demo">A Paragraph</p>
  <button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

تست کد در Head »

جاوااسکریپت در <body>

مثال زیر تابعی را در <body> قرار می دهد و هنگام کلیک اجرا می شود:

<!DOCTYPE html>
<html>
<body>
  <h2>Demo JavaScript in Body</h2>
  <p id="demo">A Paragraph</p>
  <button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>

نکته: قرار دادن اسکریپت ها در انتهای <body> سرعت نمایش صفحه را افزایش می دهد.

جاوااسکریپت خارجی

می توان اسکریپت ها را در فایل های خارجی قرار داد:

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

برای استفاده در HTML، مسیر فایل را در src تگ <script> قرار دهید:

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

تست کد خارجی »

مزایای استفاده از اسکریپت های خارجی

HTML و کد جدا می شوند
خواندن و نگهداری آسان تر می شود
فایل های کش شده سرعت بارگذاری را افزایش می دهند

برای اضافه کردن چند فایل، چند تگ <script> استفاده کنید.

مراجع خارجی

می توان اسکریپت خارجی را با 3 روش ارجاع داد:

URL کامل
مسیر فایل
بدون مسیر

مثال URL کامل

اطلاعات بیشتر درباره مسیر فایل ها

قبلی: مقدمه ی جاوااسکریپت (JS Introduction) بعدی: خروجی در جاوااسکریپت (JS Output)

فهرست سرفصل‌های JavaScript

JavaScript — محل قرارگیری جاوااسکریپت در صفحه (JS Where To)