خوب در این قسمت می خواهیم مکان های استفاده از جاوا اسکریپت رو با هم بررسی جدی کنیم.
به طور کلی جاوا اسکریپت در 2 مکان اصلی می تواند قرار بگیرید:
1 - در بخش هد یا اصطلاحا درون تگ <head>
2- در بخش بدنه یا اصطلاحا درون تگ <body>
1 - در بخش هد یا اصطلاحا درون تگ <head> :
مثل مثال زیر :
نکته خاصی در این نوع وجود ندارد .
2- در بخش بدنه یا اصطلاحا درون تگ <body> :
مثل مثال زیر :
در این جا یک نکته اساسی وجود دارد :
چرا کدهای جاوا اسکریپت رو در پایین ترین بخش body نوشتیم؟!!!
به خاطر این که باعث بهبود عملکرد بارگذاری صفحه وب سایت مان می شود ! اجتماع کدهای جاوا اسکریپت باعث کم شدن سرعت نمایش وب می شود. با این کار ، اول صفحه و استایل ها بارگذاری می شوند بعد کدهای جاوا اسکریپت اجرا .
نکته : بهترین گزینه برای بهبود سرعت لود ، استفاده از جاوا اسکریپت در این مکان است. حتی اگر بخواهیم کدها را از جایی دیگر فراخوانی کنیم!
این کاربردی ترین نکته استفاده از جاوا اسکریپت در body بود.
خوب حالا اگر کدها رو بخواهیم از یک جای دیگه فراخوانی کنیم چه؟!
این کار را اصطلاحا external files یا استفاده از فایل های خارجی می گویند.
برای این که خوب متوجه بشیم ، یک عملیات کوچیک انجام میدیم:
اول از همه کنار تمپلیت فایل Html خودتون یک فایل با پسوند js بسازید: مثلا
myScript.js
حالا کد قبلی خودمون رو توش می گذاریم :
حالا کافیه این فایل را در یکی از مکان های گفته شده(یا در head یا در body ) فراخوانی کنیم.
با ساختار زیر می توانیم یک فایل خارجی جاوا اسکریپت رو فراخوانی کنیم:
نکته : هر جایی که فایل خارجی رو فراخوانی بکنید ، همان جا عمل خواهد کرد. بنابراین در انتهای بخش body کدهای طولانی را فراخوانی کنید.
نکته : در فایل های خارجی جاوا اسکریپت ، استفاده از تگ باز و بسته script لازم نیست.
در قسمت بعد با ما همراه باشید چرا که قراره کار رو جدی تر دنبال کنیم.
به قلم : سیدمحمدمهدی موسوی
به طور کلی جاوا اسکریپت در 2 مکان اصلی می تواند قرار بگیرید:
1 - در بخش هد یا اصطلاحا درون تگ <head>
2- در بخش بدنه یا اصطلاحا درون تگ <body>
1 - در بخش هد یا اصطلاحا درون تگ <head> :
مثل مثال زیر :
کد:
<!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>
نکته خاصی در این نوع وجود ندارد .
2- در بخش بدنه یا اصطلاحا درون تگ <body> :
مثل مثال زیر :
کد:
<!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 نوشتیم؟!!!
به خاطر این که باعث بهبود عملکرد بارگذاری صفحه وب سایت مان می شود ! اجتماع کدهای جاوا اسکریپت باعث کم شدن سرعت نمایش وب می شود. با این کار ، اول صفحه و استایل ها بارگذاری می شوند بعد کدهای جاوا اسکریپت اجرا .
نکته : بهترین گزینه برای بهبود سرعت لود ، استفاده از جاوا اسکریپت در این مکان است. حتی اگر بخواهیم کدها را از جایی دیگر فراخوانی کنیم!
این کاربردی ترین نکته استفاده از جاوا اسکریپت در body بود.
خوب حالا اگر کدها رو بخواهیم از یک جای دیگه فراخوانی کنیم چه؟!
این کار را اصطلاحا external files یا استفاده از فایل های خارجی می گویند.
برای این که خوب متوجه بشیم ، یک عملیات کوچیک انجام میدیم:
اول از همه کنار تمپلیت فایل Html خودتون یک فایل با پسوند js بسازید: مثلا
myScript.js
حالا کد قبلی خودمون رو توش می گذاریم :
کد:
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
حالا کافیه این فایل را در یکی از مکان های گفته شده(یا در head یا در body ) فراخوانی کنیم.
با ساختار زیر می توانیم یک فایل خارجی جاوا اسکریپت رو فراخوانی کنیم:
کد:
<script src="myScript.js"></script>
نکته : هر جایی که فایل خارجی رو فراخوانی بکنید ، همان جا عمل خواهد کرد. بنابراین در انتهای بخش body کدهای طولانی را فراخوانی کنید.
نکته : در فایل های خارجی جاوا اسکریپت ، استفاده از تگ باز و بسته script لازم نیست.
در قسمت بعد با ما همراه باشید چرا که قراره کار رو جدی تر دنبال کنیم.
به قلم : سیدمحمدمهدی موسوی