برای قراردهی کد جاوااسکریپت در هرجایی از یک سند HTML انعطاف پذیری وجود دارد. اما بهرحال بهترین روش های جایگذاری جاوااسکریپت در یک فایل HTML به صورت زیر است:
- اسکریپت در بخش head فایل HTML
- اسکریپت در بخش body
- اسکریپت در بخش های body و head
- اسکریپت در یک فایل بیرونی که در بخش head فایل HTML ضمیمه شده است
در ادامه خواهید دید که چگونه می توانید جاوااسکریپت را در فایل HTML به روش های مختلف قرار دهید.
جاوااسکریپت در بخش head
اگر بخواهید که در برخی مواقع کد جاوااسکریپتی را اجرا کنید؛ مثلا وقتی کاربری در جایی کلیک می کند، نحوه قرارگیری این کد در بخش head سند HTML به صورت زیر است:
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>
این کد دکمه ای را برای کاربر به نمایش درخواهدآورد که با کلیک بر آن مقدار Hello World به نمایش در می آید.
جاوااسکریپت در بخش body
اگر که به اسکریپتی برای اجرای همزمان با بارگیری صفحه نیاز دارید که از این طریق این اسکریپت محتوایی را در صفحه ایجاد کند بنابراین این اسکریپت بایستی در بخش body سند قرار گیرد. در این مورد، به هیچ تابع تعریف شده توسط جاوااسکریپت نیازی ندارید. به کد زیر نگاهی بیاندازید:
<html>
<head>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>
این تکه کد عبارت Hello World را توسط کد جاوااسکریپت و عبارت بعدی را توسط متن حاضر در تگ HTML نمایش می دهد.
جاوااسکریپت در بخش های head و body
دیگر موقعیت جاوااسکریپت در سند HTML در بخش های body و head می باشد. به مثال زیر نگاهی بیاندازید:
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>
این تکه کد جاوااسکریپت عبارت Hello World و سپس دکمه Say Hello را ایجاد می کند.
جاوااسکریپت در فایل بیرونی
به محض اینکه در کار با جاوااسکریپت سرتان شلوع شد، خود را در شرایطی می بینید که در حال استفاده دوباره از کد تکراری جاوااسکریپت در چندین صفحه از سایت هستید.
شما محدود به حفظ کد یکتا در چندین فایل HTML نیستید. تگ script مکانزیمی را ایجاد می کند که در آن شما اجازه ذخیره سازی جاوااسکریپت در فایلی بیرونی را داشته و سپس آن را در فایل های HTML خود وارد سازید.
در اینجا مثالی می آید که در آن نشان داده می شود که چگونه یک فایل بیرونی جاوااسکریپت در کد HTML شما با استفاده از تگ script و خصوصیت src وارد می شود.
<html>
<head>
<script type = "text/javascript" src = "filename.js" ></script>
</head>
<body>
.......
</body>
</html>
برای استفاده از جاوااسکریپت در یک فایل بیرونی بایستی تمام کد جاوااسکریپت خود را در یک فایل متنی ساده با پسوند js ذخیره سازید.
برای مثال، می توانید از تابع sayHello در فایل HTML خود پس از مشمول کردن فایل filename.js استفاده کنید.
function sayHello() {
alert("Hello World")
}