شیوه های مختلف نوشتن کدهای JavaScript (داخلی (Internal)، خارجی (External) و درون خطی (Inline))
کدهای JavaScript ، به سه شیوه مختلف نوشته می شوند :
1- داخلی (Internal JavaScript) : نوشتن کدهای JavaScript به صورت بلوک های اسکریپت (Script Blocks)
2- خارجی (External JavaScript) : نوشتن کدهای JavaScript به صورت فایل جداگانه (External JavaScript Files)
3- درون خطی (Inline JavaScript) : نوشتن کدهای JavaScript به صورت درون خطی (Inline) (درون تگ های HTML)
بنابراین برای نوشتن کدهای JavaScript مورد نظرمان، بر اساس کاربرد آن و سلیقه خود، می توانیم یکی از 3 روش بالا را انتخاب نماییم.
در ادامه، این شیوه ها را شرح می دهیم.
1- داخلی (Internal JavaScript) : نوشتن کدهای JavaScript به صورت بلوک های اسکریپت (Script Blocks)
در این شیوه، کدهای JavaScript را در میان زوج تگ
script
می نویسیم. یعنی قبل از شروع کدهای JavaScript ، تگ شروع
script
نوشته می شود :
و در انتها (بعد از کدهای JavaScript)، باید تگ پایان
script
نوشته شود :
مثل کد زیر (در ساختار صفحه HTML) :
در گذشته، زوج تگ
script
به صورت زیر نوشته می شدند :
اما از HTML5 ، دیگر عبارت
type="text/javascript"
را نمی نویسیم و به کار بردن عبارت مورد نظر، منسوخ (Obsolete) شده است :
البته اگر عبارت مورد نظر وجود داشته باشد، تاثیری بر روی اجرای کدها ندارد و این تذکر را دادیم تا اگر این عبارت را در کدهای JavaScript قدیمی مشاهده کردید، علت آن را بدانید.
2- خارجی (External JavaScript) : نوشتن کدهای JavaScript به صورت فایل جداگانه (External JavaScript Files)
در این شیوه، ابتدا کدهای JavaScript مورد نظرمان را در یک فایل می نویسیم و آن را ذخیره می کنیم (پسوند فایل باید js باشد). سپس در صفحه مورد نظرمان، به آن فایل، ارجاع می دهیم. مثلا فرض کنید که نام فایل حاوی کدهای JavaScript ، برابر
code.js
باشد، در این صورت، با کد زیر می توانیم به آن ارجاع بدهیم :
مثل کد زیر (در ساختار صفحه HTML) :
در گذشته، زوج تگ
script
برای ارجاع به یک فایل، مشابه کد زیر نوشته می شدند :
اما از HTML5 ، دیگر عبارت
type="text/javascript"
را نمی نویسیم و به کار بردن عبارت مورد نظر، منسوخ (Obsolete) شده است :
البته اگر عبارت مورد نظر وجود داشته باشد، تاثیری بر روی اجرای کدها ندارد و این تذکر را دادیم تا اگر این عبارت را در کدهای JavaScript قدیمی مشاهده کردید، علت آن را بدانید.
3- درون خطی (Inline JavaScript) : نوشتن کدهای JavaScript به صورت درون خطی (Inline) (درون تگ های HTML)
برخی کدهای JavaScript ، به صورت درون خطی (درون تگ های HTML صفحه) نوشته می شوند. به آنها، به کار گیرنده رویداد (Event Handler) گفته می شود.
به مثال زیر توجه کنید :
نتیجه :
در کادر بالا، اگر بر روی کلمه Red کلیک کنید، آنگاه پس زمینه صفحه، با رنگ قرمز نمایش داده می شود و اگر بر روی کلمه white کلیک نماییم، آنگاه پس زمینه صفحه، با رنگ سفید نمایش داده خواهد شد.