JavaScript Input & Output తెలుగులో | console.log, alert, prompt, confirm

🟨 JavaScript (ES2026+) 🟢 Lesson 7 📂 Phase 04: Conditions 📅 2026 Edition

📌 Covered in this lesson: console.log · console.error · console.warn · console.table · alert() · prompt() · confirm() · Node.js readline · DOM innerText

ఒక హోటల్ కి వెళ్ళినప్పుడు ఏం జరుగుతుంది? మీరు వెయిటర్ కి ఆర్డర్ చెబుతారు (input). వంటగది ఆ ఆర్డర్ తయారు చేసి, మీ టేబుల్ కి భోజనం తెస్తారు (output). Programs కూడా అలాగే పని చేస్తాయి: user నుంచి ఏదైనా తీసుకుంటాయి, లెక్కించి, ఫలితం చూపిస్తాయి.

ఇప్పటివరకు మనం console.log() తో output చూపించాం. ఈ chapter లో output చూపించే మరిన్ని మార్గాలు, మరియు user నుంచి input తీసుకునే విధానం నేర్చుకుందాం.

1ఈ chapter లో మీరు నేర్చుకునేవి

console.log, console.error, console.warn, console.table
alert() తో popup message చూపించడం
prompt() తో user నుంచి input తీసుకోవడం
confirm() తో అవును/కాదు అడగడం
Node.js లో input తీసుకునే పద్ధతి (చిన్న పరిచయం)
Page లో output చూపించడం (DOM పరిచయం)

2Output: ఫలితం చూపించే మార్గాలు

1. `console.log()`: ఇప్పటికే తెలిసినదే

ఒకేసారి ఎన్ని విషయాలైనా కామాలతో వేరు చేసి print చేయొచ్చు:

JavaScript ▶ Run Code

console.log("పేరు:", "రవి", "వయసు:", 20);

        Output:

        పేరు: రవి వయసు: 20

2. `console.error()` మరియు `console.warn()`

ఇవి print చేస్తాయి, కానీ browser console లో ఎరుపు (error) లేదా పసుపు (warning) రంగులో కనిపిస్తాయి.

console.log("ఇది సాధారణ message");
console.warn("ఇది హెచ్చరిక");
console.error("ఇది error message");

        Output (browser console లో):

        ఇది సాధారణ message

        ఇది హెచ్చరిక    (పసుపు రంగులో)

        ఇది error message  (ఎరుపు రంగులో)

రంగులు browser console లో మాత్రమే కనిపిస్తాయి. Text అయితే అన్నీ ఒకేలా ఉంటుంది.

3. `console.table()`: పట్టిక రూపంలో చూపించడం

ఎక్కువ డేటా ఉన్నప్పుడు, console.table() దాన్ని చక్కని పట్టికగా చూపిస్తుంది:

const students = [
  { name: "Ravi", marks: 80 },
  { name: "Sita", marks: 90 },
  { name: "Kiran", marks: 75 }
];

console.table(students);

        Output (సుమారుగా ఇలా కనిపిస్తుంది):

        (index)   name     marks

        0        "Ravi"    80

        1        "Sita"    90

        2        "Kiran"   75

📌 గమనిక

Arrays మరియు objects ని ముందు chapters లో వివరంగా నేర్చుకుంటాం. ఇప్పటికి కేవలం console.table() ఎంత చక్కగా డేటాని చూపిస్తుందో గమనించండి. పట్టిక రూపం browser ని బట్టి, Node.js ని బట్టి కొద్దిగా మారొచ్చు.

3alert(): Popup message చూపించడం

alert() browser లో ఒక చిన్న popup box చూపిస్తుంది. User OK నొక్కేవరకు page లో ఏమీ చేయలేరు:

alert("స్వాగతం! JavaScript నేర్చుకుందాం");

ఫలితం: Browser లో ఒక popup వస్తుంది, అందులో ఆ message మరియు OK బటన్ ఉంటాయి.

⚠️ ముఖ్యమైన విషయం

alert(), prompt(), confirm() browser లో మాత్రమే పని చేస్తాయి. Node.js లో లేదా online compilers లో ఇవి పని చేయవు, ఇలా error వస్తుంది:

ReferenceError: alert is not defined

ఈ examples ని పరీక్షించడానికి browser console (F12) లేదా index.html file వాడండి.

4prompt(): User నుంచి input తీసుకోవడం

prompt() ఒక popup తో user ని ఏదైనా అడుగుతుంది. User టైప్ చేసిన దాన్ని program కి తిరిగి ఇస్తుంది:

const name = prompt("మీ పేరు ఏమిటి?");
alert(`నమస్కారం ${name}!`);

"మీ పేరు ఏమిటి?" అని ఒక popup వస్తుంది, దానిలో టైప్ చేయడానికి ఒక box ఉంటుంది.
User "రవి" అని టైప్ చేసి OK నొక్కితే, name లో "రవి" నిల్వ అవుతుంది.
తర్వాత "నమస్కారం రవి!" అనే alert వస్తుంది.

Default విలువ ఇవ్వడం

prompt() కి రెండో విలువ ఇస్తే, అది box లో ముందే నింపి ఉంటుంది:

const city = prompt("మీ ఊరు ఏది?", "హైదరాబాద్");
console.log(city);

User ఏమీ మార్చకుండా OK నొక్కితే "హైదరాబాద్" వస్తుంది.

`prompt()` ఎప్పుడూ string ఇస్తుంది!

💡 Chapter 6 గుర్తుందా?

User 25 అని టైప్ చేసినా, prompt() ఇచ్చేది "25" అనే string. అందుకే లెక్కలు చేసే ముందు Number() వాడాలి.

const age = prompt("మీ వయసు ఎంత?");
console.log(typeof age);

        Output (user 25 టైప్ చేస్తే):

        string

ఉదాహరణ: రెండు సంఖ్యల మొత్తం

const a = Number(prompt("మొదటి సంఖ్య:"));
const b = Number(prompt("రెండో సంఖ్య:"));

alert(`మొత్తం: ${a + b}`);

        User 10 మరియు 20 ఇస్తే alert:

        మొత్తం: 30

Number() వాడకపోతే "10" + "20" అతికించబడి "1020" వచ్చేది.

Cancel నొక్కితే ఏం జరుగుతుంది?

User చేసేది	`prompt()` ఇచ్చేది
Cancel నొక్కుతే	`null`
ఖాళీగా OK నొక్కుతే	`""` (ఖాళీ string)
`hello` టైప్ చేస్తే	`"hello"`

5confirm(): అవును / కాదు అడగడం

confirm() ఒక popup తో రెండు బటన్లు (OK మరియు Cancel) చూపిస్తుంది. OK నొక్కితే true, Cancel నొక్కితే false ఇస్తుంది:

const wantsDelete = confirm("ఈ file ని delete చేయాలా?");

console.log(wantsDelete ? "Delete అయ్యింది" : "Cancel చేశారు");

        OK నొక్కితే:

        Delete అయ్యింది

        Cancel నొక్కితే:

        Cancel చేశారు

మూడింటి పోలిక

Function	పని	ఏమి తిరిగి ఇస్తుంది
`alert()`	message చూపిస్తుంది	`undefined`
`prompt()`	text తీసుకుంటుంది	string లేదా `null`
`confirm()`	అవును/కాదు అడుగుతుంది	`true` లేదా `false`

💡 నిజ జీవితంలో

ఈ రోజుల్లో నిజమైన వెబ్సైట్లలో alert మరియు prompt లను దాదాపు ఎవరూ వాడరు, ఎందుకంటే అవి page ని ఆపేస్తాయి. కానీ నేర్చుకోవడానికి, చిన్న tests కి అవి చాలా సులభం. నిజమైన sites లో HTML forms వాడతాం.

6Node.js లో input తీసుకోవడం (చిన్న పరిచయం)

మీరు browser కాకుండా Node.js లో JavaScript run చేస్తే, prompt() ఉండదు. అక్కడ readline అనే built-in module వాడతాం:

JavaScript (Node.js) ▶ Run Code

const readline = require("readline");

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

rl.question("మీ పేరు ఏమిటి? ", (name) => {
  console.log(`నమస్కారం ${name}!`);
  rl.close();
});

        user Ravi అని టైప్ చేస్తే:

        మీ పేరు ఏమిటి? Ravi

        నమస్కారం Ravi!

ఇందులో (name) => { ... } అనేది ఒక arrow function. Functions ని తర్వాత chapters లో నేర్చుకుంటాం. ఇప్పుడు "Node.js లో input ఇలా తీసుకుంటారు" అని మాత్రం తెలుసుకోండి.

Online compiler లో user input ఇవ్వడానికి "Input" box వాడండి. అలా కాకపోతే, విలువలను code లోనే variables గా రాసి practice చేయొచ్చు.

7Page లో Output చూపించడం (DOM పరిచయం)

console.log() output page లో కనిపించదు, అది developer కి మాత్రమే (console లో). వెబ్సైట్ visitors కి ఫలితం page లోనే చూపించాలి:

HTML + JavaScript

<!DOCTYPE html>
<html>
<body>
  <h2 id="greeting"></h2>
  <script>
    const name = prompt("మీ పేరు ఏమిటి?");
    document.getElementById("greeting").innerText = `నమస్కారం ${name}!`;
  </script>
</body>
</html>

<h2 id="greeting"> ఒక ఖాళీ heading, దానికి greeting అనే పేరు (id) పెట్టాం.
document.getElementById("greeting") ఆ heading ని "వెతికి పట్టుకుంటుంది".
.innerText = ... ఆ heading లో text ని పెడుతుంది.

ఇదే DOM యొక్క మొదటి రుచి. DOM గురించి తర్వాతి chapters లో వివరంగా నేర్చుకుంటాం.

8ఉదాహరణ: ఉష్ణోగ్రత Converter

Celsius ని Fahrenheit గా మార్చే సూత్రం: F = C × 9 / 5 + 32:

const celsius = Number(prompt("Celsius లో ఉష్ణోగ్రత ఎంత?"));
const fahrenheit = celsius * 9 / 5 + 32;

alert(`${celsius}°C = ${fahrenheit}°F`);

        User 100 ఇస్తే alert:

        100°C = 212°F

        User 25 ఇస్తే: 25°C = 77°F

        User 0 ఇస్తే: 0°C = 32°F

⚠️ Beginners చేసే సాధారణ తప్పులు

1. prompt() ఫలితం string అని మర్చిపోవడం:

const a = prompt("సంఖ్య 1:");
const b = prompt("సంఖ్య 2:");
console.log(a + b); // "1020" వస్తుంది, 30 కాదు!

సరిచేయడం: Number(a) + Number(b)

2. Cancel నొక్కితే null వస్తుందని మర్చిపోవడం: Number(null) అనేది 0 అవుతుంది, NaN కాదు. Cancel ని ముందే చెక్ చేయాలి.

3. Browser functions ని Node.js లో వాడటం:

alert("Hello"); // Node.js లో: ReferenceError: alert is not defined

4. console.log() page లో కనిపిస్తుందనుకోవడం: console.log() browser console లో మాత్రమే కనిపిస్తుంది. Page visitors కి చూపించాలంటే innerText వాడాలి.
5. alert ని ఎక్కువగా వాడటం: ప్రతి చిన్న విషయానికి alert వాడితే user కి చిరాకు వస్తుంది. Debug చేయడానికి console.log వాడండి.

9ప్రాక్టీస్ ప్రశ్నలు & సమాధానాలు

prompt() తో user పేరు మరియు ఊరు అడిగి, alert లో "నమస్కారం ___, మీరు ___ నుంచి వచ్చారు" అని చూపించండి.
రెండు సంఖ్యలు అడిగి, వాటి గుణకారం alert లో చూపించండి.
ఒక దీర్ఘచతురస్రం యొక్క పొడవు, వెడల్పు అడిగి, దాని వైశాల్యం (area = పొడవు × వెడల్పు) చూపించండి.
Celsius ఇస్తే Fahrenheit చూపించే converter రాయండి. (F = C × 9 / 5 + 32)
confirm("మీకు 18 ఏళ్లు నిండాయా?") అడిగి, OK అయితే "మీరు ఓటు వేయొచ్చు", Cancel అయితే "ఇంకా కొన్ని సంవత్సరాలు వేచి చూడండి" అని చూపించండి.

సమాధానాలు చూడండి

const name = prompt("మీ పేరు ఏమిటి?");
const city = prompt("మీ ఊరు ఏది?");
alert(`నమస్కారం ${name}, మీరు ${city} నుంచి వచ్చారు`);

const x = Number(prompt("మొదటి సంఖ్య:"));
const y = Number(prompt("రెండో సంఖ్య:"));
alert(`గుణకారం: ${x * y}`);

const length = Number(prompt("పొడవు ఎంత?"));
const breadth = Number(prompt("వెడల్పు ఎంత?"));
alert(`వైశాల్యం: ${length * breadth}`);

పొడవు 5, వెడల్పు 4 ఇస్తే: వైశాల్యం: 20

const c = Number(prompt("Celsius లో ఉష్ణోగ్రత:"));
const f = c * 9 / 5 + 32;
alert(`${c}°C = ${f}°F`);

100 ఇస్తే: 100°C = 212°F

const isAdult = confirm("మీకు 18 ఏళ్లు నిండాయా?");
console.log(isAdult ? "మీరు ఓటు వేయొచ్చు" : "ఇంకా కొన్ని సంవత్సరాలు వేచి చూడండి");

🚀 మీరే try చేయండి

Browser లేనప్పుడు కూడా పని చేసే విధంగా, విలువలను variables లో పెట్టి చక్కని output చూపించే ఈ code ని run చేయండి:

const shopName = "Ravi Stores";

const ricePrice = 60;
const riceQty = 2;
const dalPrice = 120;
const dalQty = 1;
const oilPrice = 150;
const oilQty = 1;

const total = ricePrice * riceQty + dalPrice * dalQty + oilPrice * oilQty;

console.log(`--- ${shopName} ---`);
console.log(`Rice: ₹${ricePrice} x ${riceQty} = ₹${ricePrice * riceQty}`);
console.log(`Dal:  ₹${dalPrice} x ${dalQty} = ₹${dalPrice * dalQty}`);
console.log(`Oil:  ₹${oilPrice} x ${oilQty} = ₹${oilPrice * oilQty}`);
console.log(`మొత్తం బిల్లు: ₹${total}`);

        Output:

        --- Ravi Stores ---

        Rice: ₹60 x 2 = ₹120

        Dal:  ₹120 x 1 = ₹120

        Oil:  ₹150 x 1 = ₹150

        మొత్తం బిల్లు: ₹390

👉 Our Compiler లో JavaScript try చేయండి

📌 Quick Summary:

Output కోసం: console.log() (సాధారణం), console.warn() (హెచ్చరిక), console.error() (తప్పు), console.table() (పట్టిక).
alert() popup తో message చూపిస్తుంది.
prompt() user నుంచి text తీసుకుంటుంది, ఎప్పుడూ string గా ఇస్తుంది (Cancel అయితే null). లెక్కలకు Number() తప్పనిసరి.
confirm() OK అయితే true, Cancel అయితే false ఇస్తుంది.
alert, prompt, confirm browser లో మాత్రమే పని చేస్తాయి. Node.js లో readline వాడతాం.
Page లో ఫలితం చూపించాలంటే document.getElementById("id").innerText = ... వాడతాం.

🎉 Part 1 పూర్తి అయ్యింది!

అభినందనలు! మీరు JavaScript Basics అన్నీ పూర్తి చేశారు:

JavaScript పరిచయం
Setup (console, script tag, external file)
Variables (let, const, var)
Data Types
Operators
Type Conversion & Template Literals
Input & Output ✅

తర్వాత Part 2: Control Flow — ఇక్కడ మీ programs నిర్ణయాలు తీసుకోవడం (if-else) మరియు పనులను పునరావృతం చేయడం (loops) నేర్చుకుంటాయి.