JavaScript · Lesson 04 / 32 · English
JavaScript Output
Understand the idea. Change the code. Build confidence with one focused experiment.
Read this lesson in தமிழ் ↗.
Start with the idea
Choose an output destination deliberately. console.log is useful for learning and diagnostics; changing textContent updates a browser page. This runnable console example separates labels from values.
Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.
Step-by-step lesson notes
JavaScript Output Methods
JavaScript can display output in several ways depending on where and how you want to show the data.
console Methods (Developer Tool)
// Standard log
console.log("Hello, World!");
console.log(42, true, [1, 2, 3], { name: "Alice" });
// Levels — each has a different icon/color in DevTools
console.info("ℹ Information");
console.warn("⚠ Warning message");
console.error("❌ Error message");
// Table — great for arrays of objects
const users = [
{ name: "Alice", age: 30 },
{ name: "Bob", age: 25 },
];
console.table(users);
// Grouping
console.group("User Details");
console.log("Name: Alice");
console.log("Role: Admin");
console.groupEnd();
// Timing
console.time("loop");
for (let i = 0; i < 1e6; i++) {}
console.timeEnd("loop"); // "loop: 2.5ms"
// Assertion (logs only if false)
console.assert(2 + 2 === 5, "Math is broken!");Browser Dialog Boxes
// alert — displays a message (blocks execution)
alert("Hello!");
// confirm — returns true (OK) or false (Cancel)
const agreed = confirm("Do you agree?");
if (agreed) console.log("User agreed");
// prompt — returns user input as string (or null)
const name = prompt("What is your name?", "Guest");
console.log("Hello,", name);Avoid dialog boxes in production. They block the browser, can't be styled, and are disabled in some environments. Use custom UI instead.
Writing to the DOM
// textContent — safe, treats value as plain text
document.getElementById("output").textContent = "Hello!";
// innerHTML — parses HTML (use carefully!)
document.getElementById("output").innerHTML = "<strong>Bold!</strong>";
// document.write — AVOID in modern code
// It overwrites the entire document if called after load
document.write("Hello"); // only safe during initial parse| Method | Use case | Notes |
|---|---|---|
| console.log() | Development & debugging | Best practice |
| alert() | Simple user notification | Avoid in production |
| confirm() | Yes/No user decision | Avoid in production |
| prompt() | Get simple user input | Avoid in production |
| element.textContent | Update page content safely | Escapes HTML |
| element.innerHTML | Insert HTML into page | XSS risk with user input |
| document.write() | Legacy — initial page load only | Never use in modern code |
A complete example
Run this complete index.js program in the JavaScript console editor below. The earlier reference fragments may need a browser page or other surrounding setup.
const price = 250;
console.log("Price:", price);
console.log("With delivery:", price + 30);Predict first. Reveal the expected result.
Price: 250 With delivery: 280
Make one change. See what happens.
Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.
Wait for the editor to load, then load this example and press Run.
Powered by the free OneCompiler editor. Code you run is sent to that external service. Keep personal data and secret keys out of your examples.
Put the idea to work
Practice challenge
Change delivery to 50 and calculate the new total.
Reveal the answer and reasoning
The total becomes 300. Use price + 50 in the second log.
One mistake to avoid: document.write can replace a loaded document. Prefer DOM methods such as textContent when updating an existing page.
Your learning checkpoint
- Explain the example in your own words.
- Complete the challenge before revealing its answer.
- Describe the common mistake and how to avoid it.