درس ۲: محل قرارگیری کدهای جاوااسکریپت
درس ۲: محل قرارگیری کدهای جاوااسکریپت (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"