📝 What You’ll Learn

• The different ways JavaScript can display output
• When and where to use each method
• Real examples with code
• Common beginner mistakes to avoid

🖥 Console Output

The console.log() method is one of the most commonly used ways to display output, especially for debugging.

console.log("Hello, console!");

Where it shows: Developer Console in your browser (usually opened with F12 or right-click → Inspect → Console)

📦 Alert Boxes

alert() displays a popup dialog with a message. It’s useful for very basic interaction or testing.

alert("Hello, user!");

Note: This method interrupts the user experience, so it’s not used in production code.

📄 Writing to the Webpage

You can use document.write() to output content directly into the HTML of a page.

document.write("This is written to the page.");

Caution: If used after the page has loaded, it can overwrite the entire document.

✏️ Updating HTML Elements

The most practical and modern way to show output is by updating an element on the webpage using innerHTML.

<p id="demo"></p>

<script>
  document.getElementById("demo").innerHTML = "Hello from JavaScript!";
</script>

This method is non-intrusive, meaning it doesn’t pop up or replace the entire page—great for real UI work.

🛠 Other Output Methods

• confirm() – shows a dialog with OK/Cancel
• prompt() – asks for user input
• console.error() – logs an error message
• console.table() – displays data in a table format (great for arrays and objects)

⚠️ Common Mistakes

• Using alert() too much — it becomes annoying quickly
• Forgetting to target the correct element with getElementById()
• Using document.write() after the page has fully loaded (it erases content)

📘 Recap

• Use console.log() for debugging
• Use alert() sparingly, mostly for learning
• Prefer innerHTML to show output in the UI
• Avoid document.write() in real-world projects