همانطور که میدانید کد های جاوا را هم میتوان در بخش Head و هم در بخش Body قرار داد در این تمرین ما قرار دادن کد های جاوا را در این دو قسمت تمرین میکنیم.
کد های جاوا اسکریپت را کجا قرار دهیم.
سطح آموزش : مقدماتی
کد های جاوا هم می توانند در تگ Body و هم در تگ Head قرار بگیرند.
تگ <script>
در Html کد های جاوا اسکریپت بایت بین تگ های <script> و <script/> قرار بگیرند.
مثال :
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
شاید در گذشته شما پارامتری به نام type="text/javascript" را هم در این تگ می دیدید ولی جاوا اسکریپت نیازی به این پارامتر ندارد چرا که اسکریپت های جاوا توسط Html کاملا شناسایی می گردند.
جاوا اسکریپت توابع و رخداد ها.
توابع جاوا اسکریپت در واقع بلاکی از کد های جاوا هستند. و می توانند هنگام فراخوانی به اجرا در بیایند.
برای مثال یک تابع میتواند هنگامی که یک رخداد روی می دهد به اجرا در بیایید. مثلا هنگام کلیک کردن کاربر روی یک دکمه.
در آموزش های بعدی ما در باره ی رخداد ها و توابع بیشتر توضیح می دهیم.
جاوا اسکریپت در تگ Head یا تگ Body
شما می توانید به تعداد دلخواه کد جاوا اسکریپت در html خود وارد کنید.
اسکریپت ها می توانند در تگ Body و یا در تگ Head در صفحه Html قرار بگیرند. این کد ها می توانند همزمان در هر دوقسمت استفاده شوند.
نکته : نگه داشتن کد ها در یک مکان همیشه ارجحیت دارد.
جاوا اسکریپت در تگ HEAD
در این مثال . یک تابع جاوا اسکریپت در تگ Head در یک سند Html قرار گرفته است.
این تابع زمانی که دکمه ای فشرده شود فراخوانی می شود.
مثال:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
جاوا اسکریپت در تگ Body
در این مثال ، یک تابع جاوا اسکریپت در تگ Body در یک صفحه Html قرار گرفته است.
این تابع هنگامی که یک دکمه فشرده شود فراخوانی می شود.
مثال:
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<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>
نکته این ایده خوبی است که اسکریپت ها در پایین تگ Body قرار بگیرند. این می تواند لود شدن صفح را بهبود بدهد. چرا که مجموعه ای از اسکریپت ها می توانند صفحه شما را کند کنند.
جاوا اسکریپت در فایل خارجی
یک فایل خارجی می تواند محل کد های جاوا اسکریپت شما باشد.
مثال :
myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
اسکریپت خارجی زمانی کاربرد دارد که یک کد بارها و بارها قرار است در همان صفحه استفاده شود.
فایل ها جاوا اسکریپت پسوند JS. دارند.
برای استفاده از جاوا اسکریپت خارجی باید مسیر و نام این اسکریپت را در پارامتر SRC تگ Scriptقرار دهید.
مثال:
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
شما می توانید از اسکریپت خارجی در تگ Body یا Head استفاده کنید.
اسکریپت دقیقا جایی عمل می کند که تگ Script آن را فرا خوانی می کند.
جاوا اسکریپت خارجی سرعت وب شما را افزایش می دهد. قابلیت خوانش کد های Html و جاوا را بیشتر می کند. وکد های Html و جاوا را از هم جدا میکند.