خروجی (Output)
در این صفحه با «خروجی جاوااسکریپت» آشنا می شوی. خروجی یعنی نمایش داده. می توانیم متن صفحه را عوض کنیم، پیام نشان دهیم، یا در کنسول بنویسیم. آرام پیش برو و هر بخش را در ادیتور امتحان کن.
روش های نمایش خروجی جاوااسکریپت
چهار راه اصلی داریم: تغییر محتوای عنصر، نوشتن مستقیم روی سند، هشدار پاپ آپ، و کنسول مرورگر. هر کدام کاربرد خودش را دارد.
Using innerHTML: تغییر محتوای عنصر
«عنصر (Element)» همان تگ HTML است. با getElementById() پیدایش می کنیم. سپس با innerHTML محتوای HTML را می گذاریم.
document.getElementById("demo").innerHTML = "<h2>Hello World</h2>";
نکته: وقتی نیاز به تگ داری، از innerHTML استفاده کن.
Using innerText: فقط متن ساده
برای متن خام از innerText استفاده کن. اینجا تگ اجرا نمی شود.
document.getElementById("demo").innerText = "Hello World";
Using document.write(): فقط برای تست
این روش روی سند می نویسد. اما مراقب باش؛ بعد از بارگذاری صفحه، کل صفحه پاک می شود.
document.write(5 + 6);
document.write(5 + 6);
هشدار: از document.write() فقط در تمرین های ساده استفاده کن.
Using window.alert(): پیام پاپ آپ
«هشدار (Alert)» یک پیام سریع است. می توانی window را هم ننویسی.
window.alert(5 + 6);
alert(5 + 6);
Using console.log(): مخصوص خطایابی
«کنسول (Console)» جایی برای دیدن پیام های توسعه است. صفحه را به هم نمی ریزد.
console.log(5 + 6);
JavaScript Print: چاپ صفحه
متد چاپ مستقیمی نداریم. فقط می توانی محتوای صفحه را چاپ کنی.
window.print();
گام های عملی کوتاه
- یک id بساز و با innerText بنویس.
- همان بخش را با innerHTML تگ دار کن.
- یک alert() اضافه کن و نتیجه را ببین.
- پیام را در console.log() هم چاپ کن.
جمع بندی سریع
- innerHTML برای HTML، innerText برای متن.
- document.write() فقط در تست.
- alert() پیام سریع می دهد.
- console.log() برای توسعه عالی است.
نکته: اگر جای کد مردد شدی، صفحه کجا قرار دهیم را ببین. برای ادامه مسیر، به سینتکس جاوااسکریپت برو. صفحه خروجی جاوااسکریپت را نشانه گذاری کن.