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