کجا قرار دهیم (Where To)
در این بخش «قرار دادن جاوااسکریپت» را می بینیم. جاوااسکریپت (JavaScript) داخل تگ اسکریپت اجرا می شود. می تواند متن، ظاهر، و رفتار صفحه را تغییر دهد. آرام برو، سپس با «Try it» تمرین کن.
تگ اسکریپت و قرار دادن جاوااسکریپت
کد بین تگ های <script> قرار می گیرد. «عنصر (Element)» یک تگ HTML است. با id آن را پیدا می کنیم و متنش را عوض می کنیم.
document.getElementById("demo").innerHTML = "My First JavaScript";
نکته: ویژگی type لازم نیست. جاوااسکریپت پیش فرض HTML است.
توابع و رویدادها در جاوااسکریپت
«تابع (Function)» مجموعه ای از دستورات است. وقتی «رویداد (Event)» رخ می دهد، آن را صدا می زنیم. مثلا با کلیک دکمه.
قرار دادن کد در head یا body
می توانی چند اسکریپت داشته باشی. داخل <head>، داخل <body>، یا هر دو. هر کدام مناسب سناریو خاص است.
نمونه: اسکریپت در head
تابع در head تعریف می شود. سپس با کلیک، اجرا می شود.
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
نمونه: اسکریپت در body
در این حالت، کد نزدیک عنصر است. فهمش ساده تر می شود.
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
نکته: گذاشتن اسکریپت ها انتهای body سرعت نمایش را بهتر می کند.
اسکریپت خارجی (External JavaScript)
وقتی کد را در چند صفحه نیاز داری، فایل «.js» بساز. سپس با ویژگی src آن را وصل کن. «کش (Cache)» یعنی نگهداری فایل برای سرعت بیشتر.
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
هشدار: داخل فایل خارجی، تگ <script> نگذار.
شیوه های ارجاع فایل خارجی
سه راه معمول داریم: آدرس کامل، مسیر پوشه، یا نام فایل کنار صفحه. نمونه ها را در «Try it» ببین.
گام های عملیِ کوتاه
- یک دکمه و یک پاراگراف بساز.
- تابع myFunction() را در head بنویس.
- روی کلیک دکمه، تابع را صدا بزن.
- کد را به فایل خارجی منتقل کن.
جمع بندی سریع
- کد بین تگ اسکریپت قرار می گیرد.
- head و body هر دو قابل استفاده اند.
- فایل خارجی مدیریت را آسان می کند.
- قرار دادن جاوااسکریپت نزدیک پایان body سریع تر است.
نکته: برای مرور، صفحه معرفی را ببین. همچنین خروجی ها را در خروجی در جاوااسکریپت بررسی کن. اگر لازم شد، قرار دادن جاوااسکریپت را دوباره مرور کن.