خروجی گرفتن
اسکریپت را بلدید روی صفحه بگذارید. مهارت بعدی این است که نتیجه را کجا نشان بدهید: روی خود صفحه برای بازدیدکننده، در یک پنجره که باید ببندد، یا فقط در Console برای خودتان. یک زبان است؛ چهار جای خیلی متفاوت.
نتیجهٔ JavaScript را چطور نشان بدهیم؟
برای بازدیدکننده، یک عنصر موجود را عوض کنید. متن ساده را با textContent بگذارید. innerHTML را فقط وقتی واقعاً باید تگ بگذارید. پیام مسدودکننده با window.alert. برای دیباگ خودتان console.log. document.write مال دوران قدیمی‌تر است: وقتی فایل هنوز خوانده می‌شود گاهی کار می‌کند؛ بعد از بار شدن صفحه ممکن است کل سند را پاک کند.
نتیجه کجا دیده می‌شود؟
📊 جاهای رایج برای دیدن نتیجه
| روش | چه کسی می‌بیند | پیش‌فرض مبتدی |
|---|---|---|
textContent روی یک عنصر |
بازدیدکننده، روی صفحه | بله — خروجی روزمره |
innerHTML روی یک عنصر |
بازدیدکننده، با تگ HTML | فقط وقتی نشانه‌گذاری مال خودتان است |
window.alert |
بازدیدکننده، در پنجره | کم — صفحه تا OK می‌ایستد |
console.log |
شما، در Console ابزار توسعه‌دهنده | بله برای دیباگ؛ بازدیدکننده نمی‌بیند |
document.write |
جریان HTML | بعد از بار شدن صفحه استفاده نکنید |
روی صفحه (پیش‌فرض برای بازدیدکننده)
تیتر یا پاراگراف واقعی را در HTML بگذارید. وقتی اسکریپت اجرا شد (انتهای body، مثل جلسهٔ قبل)، همان گره را عوض کنید. بازدیدکننده متن تازه را می‌بیند؛ لازم نیست DevTools باز کند.
<!DOCTYPE html>
<html>
<head>
<title>Output — Page</title>
</head>
<body>
<h1 id="msg">Waiting…</h1>
<script>
document.getElementById("msg").textContent =
"Hello from JavaScript";
</script>
</body>
</html>
چرا اول textContent
- اگر اسکریپت خطا بدهد، همان «Waiting…» هنوز در HTML هست
- گیومه و
<در رشته متن می‌مانند، تگ نمی‌شوند - همین الگو را وقتی اسکریپت را انتهای body گذاشتید دیدید
- ماژول DOM بعداً عمیق‌تر می‌شود؛ اینجا فقط «نتیجه را اینجا بگذار»
innerHTML — وقتی نتیجه خودش نشانه‌گذاری است
innerHTML رشته را مثل HTML می‌خواند. وقتی عمداً تگ‌هایی می‌گذارید که خودتان نوشته‌اید، به کار می‌آید. متن خام کاربر را داخل innerHTML نریزید — ممکن است نشانه‌گذاری ناخواسته اجرا شود. برای اسم یا قیمت، همان textContent کافی است.
<!DOCTYPE html>
<html>
<head>
<title>Output — innerHTML</title>
</head>
<body>
<p id="box">Empty</p>
<script>
document.getElementById("box").innerHTML =
"<strong>Ready</strong> — markup inside the paragraph";
</script>
</body>
</html>
document.write — بشناسید؛ کمتر استفاده کنید
document.write متن را همان موقع که مرورگر فایل را می‌خواند داخل جریان HTML می‌فرستد. اگر بعد از تمام شدن بار صفحه صدا بزنید (مثلاً کلیک دیرهنگام روی دکمه)، خیلی از مرورگرها جریان تازه باز می‌کنند و صفحه خالی می‌شود. برای به‌روزرسانی، عنصر را عوض کنید؛ به این روش عادت نکنید.
<!DOCTYPE html>
<html>
<head>
<title>Output — write</title>
</head>
<body>
<p>This paragraph exists first.</p>
<button type="button" id="wipe">Call document.write after load</button>
<script>
document.getElementById("wipe").onclick = function () {
document.write("The previous page content is gone");
};
</script>
</body>
</html>
این دمو را باز کنید، دکمه را بزنید و ببینید پاراگراف اول می‌رود. برای همین در بقیهٔ این کورس برای مثال‌های بعدی از document.write استفاده نمی‌کنیم.
alert — پنجره‌ای که صفحه را نگه می‌دارد
window.alert (معمولاً همان alert) یک پنجرهٔ سیستم باز می‌کند. صفحه صبر می‌کند تا بازدیدکننده OK بزند. یک بار برای اثبات اجرا شدن اسکریپت بد نیست. به‌عنوان تنها «رابط کاربری» ضعیف است: استایل نمی‌گیرد، پشت‌سرهم آزار می‌دهد، و کار صفحه‌خوان و کیبورد را قطع می‌کند. پیام واقعی را روی صفحه بنویسید.
<!DOCTYPE html>
<html>
<head>
<title>Output — Alert</title>
</head>
<body>
<p>The page pauses until you dismiss the dialog.</p>
<script>
alert("Script ran — click OK to continue");
</script>
</body>
</html>
console.log — برای شما، نه برای بازدیدکننده
Console ابزار برنامه‌نویس است. console.log مقدار را آنجا چاپ می‌کند. مشتری روی موبایل اصلاً آن را نمی‌بیند. وقتی دارید یاد می‌گیرید عدد یا رشته را چک کنید، خوب است. لاگ موفق یعنی «برنامه نتیجه را نشان داد» نیست.
console.log("Visible in DevTools, not on the page");
console.log(2 + 2);
DevTools را باز کنید (اغلب F12)، تب Console را بزنید، صفحه را تازه کنید و خط‌ها را بخوانید. اگر فقط console.log را عوض کنید و تیتر همان «Waiting…» بماند، بازدیدکننده هم همان «Waiting…» را می‌بیند.
خودتان امتحان کنید
- صفحهٔ
textContentرا ذخیره کنید، باز کنید، رشته را عوض کنید و تازه کنید. - همان خط را به
innerHTMLبا تگ<strong>عوض کنید و ببینید کلمه پررنگ می‌شود. - Console را باز کنید و مثال
console.logرا اجرا کنید — در بدنهٔ صفحه چیز تازه‌ای نباید بیاید. - یک بار مثال alert را بزنید؛ بعد alert را بردارید و همان پیام را روی تیتر بگذارید تا صفحه نایستد.
- اختیاری: دموی دکمهٔ
document.writeرا بزنید تا حس پاک شدن صفحه را بگیرید — بعد این الگو را از فایل‌های خودتان حذف کنید.
اشتباهات رایج
- نتیجه را فقط با
console.logنشان دادن و تعجب که چرا کاربر صفحهٔ خالی می‌بیند - ریختن متنی که خودتان ننوشته‌اید (فرم، آدرس، چت) داخل
innerHTMLبه‌جایtextContent - صدا زدن
document.writeبعد از بار صفحه و از دست رفتن کل چیدمان alertپشت هر کلید- قاطی کردن با جلسهٔ «کجا بگذاریم»: آنجا جای زندگی اسکریپت است؛ اینجا جای دیده شدن نتیجه
خلاصه
- پیش‌فرض دیدنی برای بازدیدکننده: عنصر را با
textContentعوض کنید innerHTMLنشانه‌گذاریِ خودتان را می‌گذارد — رشتهٔ غریبه را نهalertصفحه را قفل می‌کند؛ کم استفاده کنیدconsole.logبرای برنامه‌نویس در DevTools است- بعد از بار شدن صفحه سراغ
document.writeنروید؛ ممکن است سند را پاک کند - تمرین کنید همان پیام را از Console به alert و بعد به تیتر ببرید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود