JavaScript – کجا استفاده شود (Where To)

جاوا اسکریپت کجا استفاده می‌شود

تگ <script>

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

مثال:

<script>
document.getElementById("demo").innerHTML = "اولین جاوا اسکریپت من";
</script>

نمونه‌های قدیمی جاوا اسکریپت ممکن است از ویژگی type استفاده کنند: <script type="text/javascript">. این ویژگی دیگر الزامی نیست زیرا جاوا اسکریپت زبان پیش‌فرض در HTML است.

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

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

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

شما در فصول بعدی بیشتر درباره توابع و رویدادها یاد خواهید گرفت.

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

شما می‌توانید هر تعداد اسکریپت در یک سند HTML قرار دهید.

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

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

در این مثال، یک تابع جاوا اسکریپت در بخش <head> قرار گرفته است. این تابع هنگام کلیک روی دکمه فراخوانی می‌شود:

مثال:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "پاراگراف تغییر کرد.";
}
</script>
</head>
<body>
<h2>دمو جاوا اسکریپت در هد</h2>

<p id="demo">یک پاراگراف</p>
<button type="button" onclick="myFunction()">امتحان کنید</button>

</body>
</html>

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

در این مثال، یک تابع جاوا اسکریپت در بخش <body> قرار گرفته است. تابع هنگام کلیک روی دکمه فراخوانی می‌شود:

مثال:

<!DOCTYPE html>
<html>
<body>

<h2>دمو جاوا اسکریپت در بادی</h2>

<p id="demo">یک پاراگراف</p>

<button type="button" onclick="myFunction()">امتحان کنید</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "پاراگراف تغییر کرد.";
}
</script>

</body>
</html>

قرار دادن اسکریپت‌ها در انتهای عنصر <body> سرعت نمایش صفحه را بهبود می‌بخشد، زیرا تفسیر اسکریپت‌ها نمایش را کند می‌کند.

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

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

فایل خارجی: myScript.js

function myFunction() {
  document.getElementById("demo").innerHTML = "پاراگراف تغییر کرد.";
}

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

فایل‌های جاوا اسکریپت با پسوند .js ذخیره می‌شوند.

برای استفاده از یک اسکریپت خارجی، نام فایل اسکریپت را در ویژگی src (منبع) تگ <script> قرار دهید:

مثال:

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

می‌توانید مرجع اسکریپت خارجی را در <head> یا <body> قرار دهید.

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

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

  • جدا کردن HTML و کد
  • خوانایی و نگهداری آسان‌تر HTML و JavaScript
  • فایل‌های جاوا اسکریپت کش شده می‌توانند سرعت بارگذاری صفحات را افزایش دهند

برای اضافه کردن چندین فایل اسکریپت به یک صفحه، از چندین تگ اسکریپت استفاده کنید:

مثال:

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

ارجاعات خارجی

یک اسکریپت خارجی می‌تواند به سه روش مختلف ارجاع شود:

  1. با یک URL کامل (آدرس کامل وب)
  2. با یک مسیر فایل (مانند /js/)
  3. بدون مسیر

این مثال از یک URL کامل برای پیوند به myScript.js استفاده می‌کند:

مثال:

<script src="https://www.w3schools.com/js/myScript.js"></script>

این مثال از یک مسیر فایل برای پیوند به myScript.js استفاده می‌کند:

مثال:

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

این مثال بدون مسیر به myScript.js پیوند می‌دهد:

مثال:

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

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.