JavaScript · Lesson 04 / 32 · தமிழ்
JavaScript Output
கருத்தைப் புரிந்துகொள்ளுங்கள். Code-ஐ மாற்றி இயக்குங்கள். ஒரு சிறிய பயிற்சியால் கற்றதை உறுதி செய்யுங்கள்.
மூலப் பாட விளக்கங்கள் தமிழில் உள்ளன. கூடுதல் concept, practice மற்றும் answer notes ஆங்கிலத்தில் உள்ளன.
முக்கியக் கருத்து
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.
விரிவான விளக்கங்கள்
JavaScript Output Methods
JavaScript-ல output காட்ட பல வழிகள் இருக்கு — எங்க காட்டணும்னு பொறுத்து method மாறும்.
console Methods (Developer Tool)
// Standard log
console.log("Hello, World!");
console.log(42, true, [1, 2, 3], { name: "Alice" });
// Levels — DevTools-ல வேற வேற icon/color காட்டும்
console.info("ℹ Information");
console.warn("⚠ Warning message");
console.error("❌ Error message");
// Table — objects array-க்கு super useful
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 — performance check-க்கு
console.time("loop");
for (let i = 0; i < 1e6; i++) {}
console.timeEnd("loop"); // "loop: 2.5ms"
// Assertion — false-ஆ இருந்தா மட்டும் log பண்ணும்
console.assert(2 + 2 === 5, "Math is broken!");Browser Dialog Boxes
// alert — message காட்டும் (execution block ஆகும்)
alert("Hello!");
// confirm — true (OK) அல்லது false (Cancel) return பண்ணும்
const agreed = confirm("சம்மதமா?");
if (agreed) console.log("User agreed");
// prompt — user input string-ஆ return பண்ணும் (null-உம் வரலாம்)
const name = prompt("உன் பேர் என்ன?", "Guest");
console.log("Hello,", name);Production-ல dialog boxes avoid பண்ணு. இவை browser-ஐ block பண்ணும், style பண்ண முடியாது, சில environments-ல disabled-ஆ இருக்கும். Custom UI use பண்றது better.
DOM-ல எழுதுவது
// textContent — safe, plain text-ஆ treat பண்ணும்
document.getElementById("output").textContent = "Hello!";
// innerHTML — HTML parse பண்ணும் (கவனமா use பண்ணு!)
document.getElementById("output").innerHTML = "<strong>Bold!</strong>";
// document.write — AVOID பண்ணு
// Page load ஆன பிறகு call பண்ணா entire document overwrite ஆகும்
document.write("Hello");| Method | Use case | Notes |
|---|---|---|
| console.log() | Development & debugging | Best practice |
| alert() | Simple notification | Production-ல avoid பண்ணு |
| confirm() | Yes/No decision | Production-ல avoid பண்ணு |
| prompt() | Simple user input | Production-ல avoid பண்ணு |
| element.textContent | Page content safely update | HTML-ஐ escape பண்ணும் |
| element.innerHTML | HTML insert பண்ண | User input-ல XSS risk |
| document.write() | Legacy — initial load மட்டும் | Modern code-ல never use |
முழுமையான உதாரணம்
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);எதிர்பார்க்கும் முடிவைப் பாருங்கள்
Price: 250 With delivery: 280
மாற்றி இயக்கிப் பாருங்கள்
Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.
Editor load ஆனதும் code-ஐ ஏற்றி Run அழுத்துங்கள்.
OneCompiler என்ற இலவச வெளிப்புற சேவை code-ஐ இயக்குகிறது. Run செய்யும் code அங்கு அனுப்பப்படும். தனிப்பட்ட தகவல்கள் அல்லது secret keys உள்ளிட வேண்டாம்.
சிறிய பயிற்சி
Practice challenge
Change delivery to 50 and calculate the new total.
விடை மற்றும் விளக்கம்
The total becomes 300. Use price + 50 in the second log.
தவிர்க்க வேண்டிய தவறு: document.write can replace a loaded document. Prefer DOM methods such as textContent when updating an existing page.
அடுத்த பாடத்திற்குத் தயாரா?
- Explain the example in your own words.
- Complete the challenge before revealing its answer.
- Describe the common mistake and how to avoid it.