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