Browser Input & Output (alert, prompt, confirm & Number Parsing)

🟨 JavaScript (ES2026+) 🟢 Lesson 6 📂 Phase 03: Operators & Input 📅 2026 Edition

📌 Covered in this lesson: alert() · prompt() · confirm() · Converting Input to Number · Number() · parseInt() · parseFloat() · Invalid Input Handling (isNaN) · HTML Form Input

Welcome to Lesson 6 of Phase 3: Operators & Input! Client-side JavaScript interacts with users through browser dialogs, DOM inputs, and dynamic forms. In this lesson, you will learn how to capture user input using prompt(), display dialogs with alert() and confirm(), safely convert string inputs into numbers using Number(), parseInt(), and parseFloat(), handle NaN invalid input, and process HTML form input.

1Browser Dialog Methods (alert, prompt, confirm)

Browser environments provide 3 modal pop-up methods in the window object:

Dialog Method	Return Type	Description	Example Syntax
`alert(message)`	`undefined`	Displays an informational alert box with an OK button. Blocks execution until dismissed.	`alert("Welcome to Our Compiler!");`
`prompt(text, default)`	`String` or `null`	Displays an input dialog box asking user for text input. Returns input string or `null` if Cancel clicked.	`let name = prompt("Enter your name:");`
`confirm(message)`	`Boolean`	Displays a confirmation box with OK and Cancel buttons. Returns `true` (OK) or `false` (Cancel).	`let isSure = confirm("Are you sure?");`

2Converting Input to Number (Number vs parseInt vs parseFloat)

Crucial Rule: prompt() eppudu return chesina data String type lo untundhi! Meeru numeric addition cheyyalante string ni Number ga convert cheyyali. Otherwise "10" + "20" result "1020" ga string concatenation avthundi!

Conversion Function	Behavior	Example	Result
`Number(str)`	Converts entire string to number. If non-numeric characters exist, returns `NaN`.	`Number("123.45")`	`123.45`
`parseInt(str, radix)`	Parses leading integer digits up to first non-digit character. Ignores trailing text!	`parseInt("100px")`	`100`
`parseFloat(str)`	Parses leading floating-point decimal digits up to first invalid character.	`parseFloat("99.99USD")`	`99.99`

JavaScript — Number Parsing Comparison ▶ Run Code

"use strict";

// 1. Strict Conversion with Number()
console.log(Number("42"));         // 42
console.log(Number("42.85"));      // 42.85
console.log(Number("42px"));       // NaN (Strict failure!)

// 2. Loose Parsing with parseInt() & parseFloat()
console.log(parseInt("42px"));     // 42 (Strips "px")
console.log(parseInt("42.85"));    // 42 (Truncates decimals)
console.log(parseFloat("42.85em"));// 42.85 (Parses decimal float)

3Handling Invalid Input (isNaN & Number.isNaN)

User invalid string type chesinappudu conversion NaN (Not a Number) ga vasthundhi. Dheenini validate cheyyadaniki isNaN() or strict Number.isNaN() vadali:

JavaScript — Input Validation ▶ Run Code

"use strict";

let userInput = "abc";
let parsedNum = Number(userInput);

if (Number.isNaN(parsedNum)) {
    console.log("❌ Invalid Number Input! Please enter numeric digits.");
} else {
    console.log("✅ Valid Number:", parsedNum);
}

4Reading HTML Form Input via DOM

Modern Web Development lo prompt() badhulu HTML <input> elements ni DOM dwara read chesthamu:

HTML + JavaScript Form Input

<!-- HTML Layout -->
<input type="number" id="ageInput" placeholder="Enter Age">
<button id="submitBtn">Submit</button>

<script>
document.getElementById("submitBtn").addEventListener("click", function() {
    // Read input string value from DOM element
    let ageStr = document.getElementById("ageInput").value;
    let age = Number(ageStr);

    if (!age || age < 0) {
        alert("Please enter a valid age!");
    } else {
        alert("Your age next year will be: " + (age + 1));
    }
});
</script>

💻 Try It Yourself — User Curriculum Code Example

Run this number addition logic using input conversion:

JavaScript Prompt Addition ▶ Run Code

"use strict";

// Simulated input values (Equivalent to prompt("Enter number"))
const input1 = "25";
const input2 = "75";

const firstNumber = Number(input1);
const secondNumber = Number(input2);

console.log("First Number:", firstNumber);
console.log("Second Number:", secondNumber);
console.log("Sum Result:", firstNumber + secondNumber);

Run Code in Our Compiler →

Written and reviewed by Our Compiler Technical Team · Updated for JavaScript ES2026+