کجا کد های JS را بنویسیم؟
مانند CSS، جاوا اسکریپت در سه بخش نوشته می شود:
- جاوا اسکریپت داخلی (internal)
- جاوا اسکریپت خارجی (external)
- جاوا اسکریپت درون خطی (inline) (با کمک رویدادها)
JS داخلی (internal)
برای استفاده از JS داخلی باید از تگ script استفاده کرد. script را می توان در تگ head و body استفاده کرد.
<script>
// محل نوشتن کدهای جاوا اسکریپت داخلی
</script>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.js)
- کدهای جاوا اسکریپت خود را به آن اضافه می کنیم.
function myFunction() { document.getElementById("demo").innerHTML = "متن تغییر کرد"; } - سپس با یک تگ اسکریپت مانند زیر به آن آدرس دهی کنیم:
<script src="script.js"></script>
نکته: تگ <script> در دو بخش <head> و <body> قابل استفاده است. اما بهتر است در انتهای body نوشته شود.
JS درون خطی (inline)
برای استفاده از JavaScript درون خطی، باید از رویدادها (event) استفاده کرد.
<p id="demo">با کلیک بر روی دکمه زیر تاریخ و زمان فعلی را مشاهده می کنید.</p>
<button onclick="document.getElementById('demo').innerHTML=Date()">کلیک کنید</button>نکته: برای اطلاعات بیشتر به آموزش رویداد JS مراجعه کنید.
خلاصه درس
در این آموزش با موارد زیر آشنا شدیم:
- JavaScript داخلی در head
- JavaScript داخلی درbody
- JavaScript خارجی
- JavaScript درون خطی
احسان اسلامی
