पाठ 7, कुल 30 में

JavaScript ऑपरेटर्स

5 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

JavaScript वेरिएबल्स JavaScript डेटा टाइप्स

Operator एक छोटा चिह्न है जो values के साथ कुछ करता है: + जोड़ता है, * गुणा करता है, === जाँचता है कि दो चीज़ें बराबर हैं या नहीं। Operators JavaScript की क्रियाएँ हैं — variables संज्ञाएँ रखते हैं, और operators वे हैं जो आप उनसे करते हैं।

Diagram — देखें, यह सब कैसे जुड़ता है

चार groups हैं जो आपको चाहिए: arithmetic operators गणित के लिए, assignment operators values रखने के लिए, comparison operators सवाल पूछने के लिए, और logical operators सवालों को जोड़ने के लिए। साथ मिलकर ये शुरुआती program के लगभग हर काम को cover कर लेते हैं।

Arithmetic — गणित करना

Arithmetic operators हैं + जोड़, - घटाव, * गुणा, / भाग, % शेषफल, और ** घात। शेषफल वाला operator % वह है जिससे शुरुआती लोग सबसे बाद में मिलते हैं और सबसे ज़्यादा इस्तेमाल करते हैं: 10 % 3 है 1, क्योंकि 10 को 3 से भाग देने पर 1 बचता है। इसी से programs जाँचते हैं कि कोई नंबर even है (n % 2 === 0) या चीज़ों को groups में बाँटते हैं।

let total = 4 * 15;      // 60
let change = 100 - 60;   // 40
let isEven = 10 % 2 === 0; // true

Assignment — रखना और अपडेट करना

सादा assignment = value रखता है। Shortcuts operation और रखना एक साथ करते हैं: += जोड़कर रखता है, -= घटाकर रखता है, *= और /= गुणा और भाग के लिए वही करते हैं। total += 10 का मतलब बिल्कुल वही है जो total = total + 10 का है, पर छोटा। दो और shortcuts: ++ एक जोड़ता है, -- एक घटाता है।

let score = 50;
score += 10; // score is now 60
score++;     // score is now 61

Comparison — हाँ/ना वाले सवाल पूछना

Comparison operators true या false में जवाब देते हैं: === बिल्कुल बराबर, !== बिल्कुल बराबर नहीं, > बड़ा, < छोटा, >= और <=। हमेशा === और !== इस्तेमाल कीजिए, == और != नहीं। Double-equals वाले versions तुलना से पहले types बदल देते हैं, इसलिए "10" == 10 true है — एक हैरानी जो कोई नहीं चाहता। Triple equals value और type दोनों की तुलना करता है, इसलिए "10" === 10 false है, जो ईमानदार है।

let marks = 75;
marks >= 33;  // true — the student passed
marks === 75; // true
"75" === 75;  // false — a string is not a number

Logical — सवालों को जोड़ना

Logical operators true/false जवाबों को जोड़ते हैं: && का मतलब AND (दोनों true होने चाहिए), || का मतलब OR (कम से कम एक true होना चाहिए), ! का मतलब NOT (true को false में बदल देता है)। Scholarship के लिए marks 80 से ऊपर और attendance 90% से ऊपर चाहिए हो सकते हैं — यह एक && है। Discount students या teachers को मिल सकता है — यह एक || है।

let passed = marks >= 33;
let distinction = marks >= 75;
passed && distinction; // true only if both are true

Note: = value रखता है, === दो values की तुलना करता है। if (marks = 33) लिखने पर marks में 33 रख दिया जाता है और वह हमेशा true होता है — शुरुआती लोगों की classic गलती। अगर आपकी condition हमेशा pass हो रही है, तो जाँचिए कि कहीं single = तो नहीं है जहाँ === होना चाहिए था।

Tip: जब दो operators मिलते हैं, तो JavaScript स्कूल के गणित वाला क्रम मानता है: पहले brackets, फिर *, /, %, फिर + और -। शक हो तो brackets लगा दीजिए — (2 + 3) * 4, 2 + 3 * 4 से ज़्यादा साफ़ है, भले ही दोनों सही हों।

आम गलतियाँ

=== की जगह == इस्तेमाल करना — loose version types बदल देता है और strings और numbers के बीच असली फर्क छिपा देता है।
Condition के अंदर = इस्तेमाल करना — यह तुलना करने के बजाय value रख देता है, और condition हमेशा true होती है।
&& या || (double) की जगह & या | (single) लिखना — single versions bit operators हैं, बिल्कुल अलग चीज़।
यह भूल जाना कि + text को भी जोड़ता है — "5" + 3 है "53", 8 नहीं, क्योंकि string के साथ + का मतलब है "जोड़ो"।

याद रखें

Arithmetic: + - * / % **। शेषफल % even numbers और groups जाँचता है।
Assignment: = += -= *= /=, साथ में ++ और --।
Comparison: === !== > < >= <=। हमेशा triple versions इस्तेमाल कीजिए।
Logical: && AND, || OR, ! NOT।

उदाहरण समझिए

Number(document.getElementById("marks").value) — visitor ने जो marks type किए हैं, उन्हें पढ़ता है और text को नंबर में बदल देता है, ताकि गणित ठीक से हो।
marks >= 33 — एक तुलना जो true या false में जवाब देती है: क्या student pass marks तक पहुँचा?
marks >= 75 — distinction के लिए दूसरी तुलना। दोनों जवाब फेंके नहीं जाते, variables में रखे जाते हैं।
passed && distinction — AND operator: सिर्फ तभी true जब student pass भी हुआ और distinction भी लाया।
if ... else — जवाबों के आधार पर दो में से एक संदेश चुनता है। पूरा if statement आप Conditions वाले पाठ में सीखेंगे; यहाँ सिर्फ यह देखिए कि operators उसे true या false कैसे देते हैं।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Exam Result Checker</title>
<style>
body { background-color: #fff8e1; font-family: Verdana, sans-serif; text-align: center; }
h1 { color: #b45309; }
input { padding: 10px; font-size: 16px; width: 80px; text-align: center; }
button { background-color: #e13611; color: white; border: none; padding: 12px 24px; font-size: 16px; cursor: pointer; }
#result { color: green; font-weight: bold; font-size: 18px; }
</style>
</head>
<body>

<h1>Exam Result Checker</h1>
<p>Enter your marks out of 100. Pass is 33, distinction is 75.</p>
<input id="marks" type="number" value="82">
<button onclick="checkResult()">Check result</button>
<p id="result">Enter your marks and click the button.</p>

<script>
function checkResult() {
  let marks = Number(document.getElementById("marks").value);
  let passed = marks >= 33;
  let distinction = marks >= 75;
  if (passed && distinction) {
    document.getElementById("result").textContent = "Pass with distinction! Great work.";
  } else if (passed) {
    document.getElementById("result").textContent = "Pass. Keep improving!";
  } else {
    document.getElementById("result").textContent = "Fail. Try again next time.";
  }
}
</script>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

<!DOCTYPE html>
<html>
<head>
<title>Exam Result Checker</title>
<style>
body { background-color: #fff8e1; font-family: Verdana, sans-serif; text-align: center; }
h1 { color: #b45309; }
input { padding: 10px; font-size: 16px; width: 80px; text-align: center; }
button { background-color: #e13611; color: white; border: none; padding: 12px 24px; font-size: 16px; cursor: pointer; }
#result { color: green; font-weight: bold; font-size: 18px; }
</style>
</head>
<body>

<h1>Exam Result Checker</h1>
<p>Enter your marks out of 100. Pass is 33, distinction is 75.</p>
<input id="marks" type="number" value="82">
<button onclick="checkResult()">Check result</button>
<p id="result">Enter your marks and click the button.</p>

</body>
</html>

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।