1. If Statement - Simple Condition Check
If statement ka use hum tab karte hain jab ek simple condition check karni ho. Agar condition true ho, toh hum kuch action perform karte hain.
Example: Agar user ki age 18 ya usse zyada hai, toh "Aap adult hain" dikhayenge.
<!DOCTYPE html>
<html lang="en">
<head>
<title>If Statement Example</title>
</head>
<body>
<h1>Age Checker</h1>
<input type="number" id="ageInput" placeholder="Apni age daalo">
<button onclick="checkAge()">Check</button>
<p id="result"></p>
<script>
function checkAge() {
let age = document.getElementById("ageInput").value;
if (age >= 18) {
document.getElementById("result").innerText = "Aap adult ho!";
}
}
</script>
</body>
</html>
2. If-Else Statement - Simple Decision
Ab agar condition false ho, toh hum If-Else statement ka use karte hain. Matlab ek condition true hone par ek action, aur agar false ho toh doosra action.
Example: Agar user ki age 18 ya zyada ho, toh "Drive kar sakte ho", warna "Nahi kar sakte".
<!DOCTYPE html>
<html lang="en">
<head>
<title>If-Else Example</title>
</head>
<body>
<h1>Driving Eligibility</h1>
<input type="number" id="ageInput" placeholder="Apni age daalo">
<button onclick="checkDriving()">Check</button>
<p id="result"></p>
<script>
function checkDriving() {
let age = document.getElementById("ageInput").value;
if (age >= 18) {
document.getElementById("result").innerText = "Aap drive kar sakte ho!";
} else {
document.getElementById("result").innerText = "Aap abhi drive nahi kar sakte.";
}
}
</script>
</body>
</html>
3. If-Else If-Else Statement - Multiple Conditions
Yeh statement tab use hoti hai jab aapko multiple conditions check karni ho. Hum multiple if-else statements ko chain karte hain.
Example: Marks ke basis par grades assign karna. Agar marks 90 ya usse zyada hain, toh grade "A+", 80 se 90 tak "A", 60 se 80 tak "B", aur baaki sab ke liye "F".
<!DOCTYPE html>
<html lang="en">
<head>
<title>Grade Checker</title>
</head>
<body>
<h1>Grade Checker</h1>
<input type="number" id="marksInput" placeholder="Apne marks daalo">
<button onclick="checkGrade()">Check</button>
<p id="result"></p>
<script>
function checkGrade() {
let marks = document.getElementById("marksInput").value;
if (marks >= 90) {
document.getElementById("result").innerText = "Grade: A+";
} else if (marks >= 80) {
document.getElementById("result").innerText = "Grade: A";
} else if (marks >= 60) {
document.getElementById("result").innerText = "Grade: B";
} else {
document.getElementById("result").innerText = "Grade: F";
}
}
</script>
</body>
</html>
4. Nested If Statement - Condition Inside Condition
Nested if statement ka use tab hota hai jab aapko ek condition ke andar doosri condition check karni ho. Jaise first condition ke true hone par doosri condition ko check karna.
Example: Agar user ki age 18 ya zyada hai aur uske paas ID bhi hai, tab hi wo eligible hoga.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nested If Example</title>
</head>
<body>
<h1>Eligibility Check</h1>
<input type="number" id="ageInput" placeholder="Apni age daalo">
<select id="idStatus">
<option value="true">ID hai</option>
<option value="false">ID nahi hai</option>
</select>
<button onclick="checkEligibility()">Check</button>
<p id="result"></p>
<script>
function checkEligibility() {
let age = document.getElementById("ageInput").value;
let hasID = document.getElementById("idStatus").value === "true";
if (age >= 18) {
if (hasID) {
document.getElementById("result").innerText = "Aap eligible ho!";
} else {
document.getElementById("result").innerText = "ID lekar aaiye.";
}
} else {
document.getElementById("result").innerText = "Aap abhi chhote ho.";
}
}
</script>
</body>
</html>
5. Complex Conditions - Using Logical Operators
Jab aapko ek se zyada conditions check karni ho, tab logical operators ka use hota hai. Jaise `&&` (AND), `||` (OR), aur `!` (NOT).
Example: Agar user member hai aur uska bill amount 300 se zyada hai, toh usko discount milega.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Complex Conditions Example</title>
</head>
<body>
<h1>Discount Checker</h1>
<input type="number" id="billAmount" placeholder="Bill amount daalo">
<select id="membershipStatus">
<option value="true">Member</option>
<option value="false">Non-Member</option>
</select>
<button onclick="checkDiscount()">Check</button>
<p id="result"></p>
<script>
function checkDiscount() {
let bill = document.getElementById("billAmount").value;
let isMember = document.getElementById("membershipStatus").value === "true";
if (isMember && bill > 300) {
document.getElementById("result").innerText = "Aapko 20% discount milega!";
} else {
document.getElementById("result").innerText = "Koi discount nahi milega.";
}
}
</script>
</body>
</html>
