محل قرار گیری کدهای جاوا اسکریپت

خانه » بلاگ » javascript » محل قرار گیری کدهای جاوا اسکریپت

آموزش زبان جاوا اسکریپت JaveScript جلسه دوم

محل قرار گیری کدهای جاوا اسکریپت

با سلام خدمت دوستان و برنامه نویسان و همراهان همیشگی تیم طراحی سایت اصفهان وب یار. دراین قسمت از آموزش جاوا اسکریپت با موضوع محل قرار گیری کدهای جاوا اسکریپت همراه شما عزیزان هستیم. در جلسه اول آموزش جاوا اسکریپت، با یک مثال ساده کار رو شروع نمودیم و گفتیم کدهای جاوا اسکریپت درون تگهای باز و بسته <script> و <script/> قرار می گیرند. اینک می خواهیم این تگ های script را درون سایت خود و در جای مناسب قرار دهیم. خوشبختانه تگ های جاوا اسکریپت این توانایی را دارند که در هر جایی از صفحات html به کار روند اما معمول ترین و استاندارد ترین آن ها به سه روش است که در ادامه هر سه روش قرار گیری کدهای جاوا اسکریپت را به شما عزیزان آموزش می دهیم.

محل کدهای جاوا اسکریپت در صفحه html

1.جاوا اسکریپت در بخش <head>

هنگامی که کدهای جاوا اسکریپت را در قسمت head قرار داده باشیم، این کدها در هنگام لود صفحه زود تر از سایر اجزا اجرا می گردند که این مسئله تاثیر مستقیمی روی سرعت و سئو سایت دارد. به همین سبب زمانی از این روش استفاده می کنیم که قرار است یک سری توابع و رویداد هایی در هنگام بارگزاری سایت (onload) اتفاق بیفتد. از جمله نمایش پاپ آپ های خبرنامه و…

در مورد توابع و رویداد ها در جلسه ی مربوط به خود بیشتر صحبت می کنیم. اکنون به مثال زیرکه محل قرارگیری کدهای جاوا اسکریپت در بخش head است توجه نمایید:

<!DOCTYPE html>
<html>
<head>
<script type=”text/javascript”>
document.getElementById(“demo”).innerHtml=”my first javascript”;
</script>
</head>
<body>
<p id=” demo “>my first project</p>
</body>
</html>

2.جاوا اسکریپت در بخش <body>

یک روش بهتر برای محل قرار گیری کدهای جاوا اسکریپت ، گذاشتن آن ها در تگ body است. زیرا همان طور که در جلسه ی مقدمه ی جاوا اسکریپت نیز بیان شد صفحات وب و کدهای جاوا اسکریپت توسط مرورگر به صورت مفسری ترجمه می شوند ؛ به همین دلیل با این روش نیمی از صفحه تا قبل از تگ جاوا اسکریپت لود شده است. پس اگر بخواهیم سرعت سایت خود را بهبود ببخشیم، بهتر است کدهای جاوا اسکریپت را در انتهای تگ body و قبل از بسته شدن آن بنویسیم. به عنوان مثال:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id=” demo “>my first project</p>
</body>
</html>

3.جاوا اسکریپت در فایل خارجی

گاهی اوقات پیش می آید که یک سری از کدهای javaScript در چندین صفحه تکرار می شوند و این تکرار کدها به بهینگی برنامه نویسی سایت لطمه وارد می کند. به همین سبب بهترین راهکار استفاده از فایل خارجی جاوا اسکریپت است. حال در این روش کدها جاوا اسکریپت را بدون تگ script در فایلی جداگانه و با پسوند .js ذخیره کرده و سپس آن را در بخش head و بهتر از آن در انتهای body فراخوانی می نماییم.

به عنوان مثال درون فایل myScript.js کد زیر را می نویسیم:

document.getElementById(“demo”).innerHtml=”my first javascript”;

و سپس در فایل html به فایل myScript.js لینک می دهیم:

<!DOCTYPE html>
<html>
<body>
<p id=” demo “>my first project</p>
<script src="myScript.js"></script>
</body>
</html>

با روش3 خوانایی و بروز رسانی کدهای جاوا اسکریپت و html بیشتر می شود و همچنین با catch شدن فایل های جاوا اسکریپت در سیستم کاربر ، سرعت بارگزاری سایت بهبود می یابد.

این بخش ازآموزش های جاوا اسکریپت نیز به پایان رسید. در صورت اطلاع از آخرین آموزش های ما می توانید در کانال تلگرام وب یار webyar_net@ عضو شوید.