درس ۲: محل قرارگیری کدهای جاوااسکریپت

درس ۲: محل قرارگیری کدهای جاوااسکریپت (JS Where To)

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

۱. تگ <script>

در مثال زیر، کد جاوااسکریپت محتوای یک المان با آی‌دی “demo” را تغییر می‌دهد:

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

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

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

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

<!DOCTYPE html>
<html>
<body>

<h2>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>

نمای خروجی کد بالا در مرورگر:

JavaScript in Body

Paragraph changed.

۳. جاوااسکریپت خارجی (External JavaScript)

می‌توان اسکریپت‌ها را در فایل‌های جداگانه ذخیره کرد. این کار زمانی که از یک کد در چندین صفحه وب استفاده می‌شود بسیار مفید است. فایل‌های جاوااسکریپت دارای پسوند .js هستند. مثال از فایل myScript.js:

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

برای استفاده از این فایل، نام آن را در ویژگی src تگ اسکریپت بنویسید:

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

۴. مزایای اسکریپت‌های خارجی

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

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

با آدرس کامل: src="https://www.w3schools.com/js/myScript.js"
با مسیر فایل: src="/js/myScript.js"
در پوشه فعلی: src="myScript.js"

قبلی

بازگشت به دوره

بعدی

💬

دیدگاه کاربران

نظر یا تجربه خود را درباره این مطلب با دیگران به اشتراک بگذارید.

💭 هنوز دیدگاهی ثبت نشده است. اولین نفری باشید که نظر خود را می‌نویسد.

✍️ ارسال دیدگاه

🔒 دیدگاه شما پس از بررسی و تأیید مدیر سایت نمایش داده خواهد شد.

درس ۲: محل قرارگیری کدهای جاوااسکریپت