کجا کد های JS را بنویسیم؟
مانند CSS , جاوا اسکریپت در سه بخش زیر قابلیت نوشتن دارد:
- داخلی (internal)
- خارجی (external)
- درون خطی (inline)
JS داخلی در head
در مثال زیر یک تابع جاوا اسکریپت در تگ <head> قرار دارد.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "0";
}
</script>
</head>
<body>
<p id="demo">1</p>
<button type="button" onclick="myFunction()">کلیک کنید</button>
</body>
</html>JS داخلی در body
در مثال زیر یک تابع جاوا اسکریپت در تگ <body> قرار دارد.
<!DOCTYPE html>
<html>
<body>
<p id="demo">یک متن آزمایشی</p>
<button type="button" onclick="myFunction()">کلیک کنید</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "متن تغییر کرد";
}
</script>
</body>
</html>تگ <script> در body یا head؟
از لحاظ تکنیکی نوشته شدن تگ script در body و head تفاوتی ندارد، و در هر دو تگ کدها اجرا می شوند.
اما از لحاظ عملکرد اجرا، بهتر است کد های JS در انتهای تگ body نوشته شود.
نکته: چون مرورگرها صفحات سایت را به صورت خطی اجرا می کنند. بهتر است ابتدا ساختار html و css سایت بارگذاری شوند تا کاربر با محتوای سایت ارتباط برقرار کند.
JS خارجی (external)
مانند CSS , اسکریپت ها را می توان در فایل های خارج از html نیز استفاده کرد.
برای ایجاد اسکریپت خارجی:
- باید یک فایل با پسوند .js ایجاد کنیم.
- سپس با یک تگ اسکریپت مانند زیر به آن آدرس دهی کنیم:
<script src="script.js"></script>نکته: تگ <script> در دو بخش <head> و <body> قابل استفاده است. اما بهتر است در انتهای body نوشته شود.
JS درون خطی (inline)
برای استفاده از JavaScript درون خطی، می توان از رویدادها (event) استفاده کرد.
نکته: برای اطلاعات بیشتر به صفحات مربوط به تابع و رویداد مراجعه کنید.
خلاصه درس
در این آموزش با موارد زیر آشنا شدیم:
- JavaScript داخلی در head
- JavaScript داخلی درbody
- JavaScript خارجی
- JavaScript درون خطی
احسان اسلامی
