چاپ اطلاعات در javascript
برای چاپ اطلاعات در JavaScript راه های مختلفی داریم :
- ویژگی innerHTML , innerText
- متد ()console.log
- متد ()window.alert
- متد ()document.write
شیء document و متد getElementById در JS
برای دسترسی به سند html در JS باید از شیء document استفاده کنیم.
نکته: زمانی که مرورگر یک سند HTML را بارگذاری می کند. از سند HTML یک شیء به نام document می سازد. با کمک شیء document و جاوا اسکریپت می توان به تگ، استایل و یا محتوا های سند HTML دسترسی پیدا کرد یا حتی آن ها را تغییر داد.
برای دسترسی به یک المان html با کمک id آن المان در JS باید ازمتد getElementById(آیدی) استفاده کنیم.
document.getElementById("#id-1");با استفاده از نمونه کد بالا می توان به المان با آیدی id-1 دسترسی پیدا کرد. در ادامه یاد می گیریم چطوری متن داخل المان را به دست بیاوریم یا متن آن را تغییر دهیم.
متد innerText و innerHTML در JS
با ویژگی innerText می توان محتوا متنی را تغییر داد.
document.getElementById("demo").innerText = 5 + 6;با ویژگی innerHTML می توان محتوا متنی را تغییر و همچنین تگ html اضافه کرد.
document.getElementById("demo").innerHTML = "<b>" + 11 + "</b>";document.getElementById("demo1").innerText = "<b>" + 11 + "</b>";
document.getElementById("demo2").innerHTML = "<b>" + 11 + "</b>";متد document.write() در JS
متد document.write() برای کار های تستی و آزمایشی کاربرد دارد.
document.write(2 + 2);نکته: اگر زمانی که صفحه به صورت کامل، بارگذاری شده باشد از متد document.write() استفاده کنیم، محتوای سند html به صورت کامل پاک می شود و محتوای جدید جایگزین آن می شود.
window.addEventListener("load", function () {
document.write(2 + 2);
});متد window.alert() در JS
متد window.alert() برای چاپ اطلاعات در alertbox استفاده می شود.
window.alert(5 + 6);متد console.log() در JS
متد console.log() برای دیباگ (debug) و رفع اشکال کدها استفاده می شود.
شما می توانید در کنسول مرورگر گزارش خطا های خود را ببینید.
نکته: در همه ی مرورگرها می توانید با کلیک بر روی دکمه F12 یا راست کلیک و انتخاب گزینه inspect وارد بخش بازبینی شوید. در پنجره بازبینی یک سربرگ به اسم console وجود دارد.
console.log(5 + 6);خلاصه درس
در این فصل با موارد زیر آشنا شدیم:
- ویژگی innerHTML , innerText (تغییر محتوای یک المان)
- متد ()console.log
- متد ()window.alert
- متد ()document.write
احسان اسلامی
