JavaScript — Output

Displaying "output"

JavaScript has no printer. "Output" means showing values somewhere: in the page, in a popup, or in developer tools.

1. Into an HTML element

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

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

What the browser displays

Hello from JS!

(The empty paragraph now contains whatever the script assigned.)

• getElementById("demo") finds the element
• .innerHTML reads/writes its content — HTML tags inside are rendered, not shown literally

document.getElementById("demo").innerHTML = "<strong>Bold</strong> hello";
// renders actual bold text

Safer sibling for plain text: .textContent (never parses HTML).

2. Into the document itself

document.write("Added while loading.");

Works, but only during page load. Running it after load wipes the entire page — a legendary footgun. Treat it as history-lesson material; use innerHTML instead.

3. Alert boxes

alert("Form submitted!");

(A modal dialog with your message and an OK button.)

Blocking, ugly, unstyleable — but zero setup and impossible to miss. Legitimate remaining use: quick debugging when DevTools is inconvenient.

Confirm and prompt live in the same family:

const ok = confirm("Delete this item?");     // true/false
const name = prompt("Your name?", "guest"); // typed value or null

4. The console — a developer's home

Press F12 → Console tab:

console.log("plain message");
console.log("user:", name, "age:", age);   // multiple values, comma-separated
console.error("something broke");
console.warn("careful…");
console.table([{ id: 1, name: "Ada" }, { id: 2, name: "Grace" }]);

What you see

(In DevTools console: the logged text; table renders an actual sortable grid of your array.)

console.log is the single most-used debugging tool in existence. Unlike alert, it doesn't interrupt anyone — logs go to a place only developers look.

Choosing the right channel

Need	Use
Show result to users	innerHTML / textContent
Interrupt with must-know info	alert
Debug while building	console.log
Write raw into page	never (document.write)

Logging like a pro

const user = { name: "Ada", role: "admin" };

console.log(user);              // expandable object view
console.log(JSON.stringify(user));  // string form — good for copying
console.time("loop");
for (let i = 0; i < 1e6; i++) {}
console.timeEnd("loop");        // loop: 2.31ms

Label your logs so twenty messages stay readable:

console.log("[auth] login attempt", email);

Mini Practice

1. Put today's date into an element via innerHTML
2. Repeat with textContent, then try including <b> tags — spot the difference
3. Chain three console.logs that tell a tiny story
4. Trigger a deliberate console.error and find its red entry
5. Break a page on purpose with post-load document.write() once — remember why it's banned

Next: statements →