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

کدهای جاوا اسکریپت را می توان در بدنه یا هد سند html نوشت.

تگ <script>

در کدهای html، کد جاوا اسکریپت را بایستی در بین دو تگ <script> و <script/> قرار داد.

تذکر: همانطور که شما مستحضر هستید، تگ های html به استثناء معدودی از موارد دارای یک تگ شروعی (opening tag) و یک تگ پایانی (closing tag) است. تگ پایانی از طریق /  تگ اول مشخص می شود.مثال:

آموزش جاوا اسکریپت - کد 7

تذکر: من بعد از آوردن الگوی صفحات html در مثال ها خودداری می شود. فقط کد جاوا اسکریپت مثال قید می شود. همچنین در نسخه های قدیمی تر ممکن است تگ script همراه با معرفی نوع استفاده شود (<script type = "text/javascript>) اما در نسخه جدید html جاوا اسکریپت زبان پیش فرض بوده و نیازی به آوردن خصیصه type در تگ های اسکریپت نیست.

توابع و واقعه های جاوا اسکریپت

تابع (Functions) جاوا اسکریپت یک بلوک یا قطعه کد است که در زمان فراخوانی اجرا می شود. مثلاً تابع زمانی اجرا می شود که واقعه ای (event) رخ داده باشد، مثل زمانی که کاربر روی دکمه ای کلیک کند. در ادامه آموزش در این مورد بیشتر بحث می شود.

جاوا اسکریپت را در هد بگذاریم یا بدنه html

ما می توانیم هر تعداد اسکریپت که مایل باشیم در یک سند html درج کنیم. اسکریپت ها را می توانیم در بدنه (<body>) یا هد (<head>) سند یا در هر دوی آنها بگذاریم. اما نگهداری همه کدها در یک فایل یا جای منفرد عادت بهتری است.

جاوا اسکریپت در head

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

آموزش جاوا اسکریپت - کد8

جاوا اسکریپت در body

در مثال زیر تابع جاوا اسکریپت در بخش بدنه صفحه html قرار دارد. این تابع نیز در صورت کلیک دکمه try it فراخوانی می شود.

آموزش جاوا اسکریپت - کد 9

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

جاوا اسکریپت در فایل مجزا

جاوا اسکریپت را می توان در یک فایل جدا و بیرون از سند html قرار داد. این مسئله بخصوص زمانی اهمیت دارد، که یک قطعه کد یا تابع به صورت تکراری در صفحات متعددی از یک سایت تکرار می شود. پسوند فایل های جاوا اسکریپت js است. برای استفاده از فایل جاوا اسکریپت بیرونی، در سند html متناظر آن خصیصه منبع (src) را در تگ <script> به نام فایل ست می کنیم. مثال:

آموزش جاوا اسکریپت - گد 10

مرجع به فایل جاوا اسکریپت بیرونی مهم نیست که در بدنه یا هد سند html باشد. اسکریپت طوری رفتار می کند که انگار در خود بدنه یا هد نوشته شده است. در اسکرپیت های خارجی (فایل اسکریپت مجزا) نباید از تگ <script> استفاده کرد.

مزایای استفاده از فایل مجزا

نوشتن کدهای جاوا اسکریپت سایت دارای مزایای زیر است:

  • - html و کدهای جاوا اسکریپت از هم جدا هستند.
  • - خواندن و نگهداری و به روز رسانی کدهای html و جاوا اسکریپت را آسان می کند.
  • - فایل های جاوا اسکریپت که در سیستم کاربر catch می شوند، موجب سریعتر شدن بالا آمدن صفحه می شود.