Theory
Page को पूछना और बताना है
FestConnect एक student को बताना चाहता है 'Email missing है', पूछना चाहता है '2 events के लिए register कर रहे हैं, sure हैं?', और request करना चाहता है 'अपना coupon code enter कीजिए'। तीन अलग conversations: एक notice, एक yes/no, और एक text request।
JavaScript के पास हर एक के लिए एक built-in popup है: alert, confirm, और prompt। वे इस्तेमाल करने में quick हैं, पर ज़रूरी चीज़ यह है हर एक क्या वापस देता है, क्योंकि वह return value ही है जिससे आपका code जानता है user ने क्या किया।
Theory
Notice, doorbell, guestbook
एक shop एक visitor से बात करने के तीन तरीक़े। दीवार पर एक notice बस inform करता है ('Sunday को बंद'): वह alert है। एक doorbell yes/no के साथ ('क्या मैं उन्हें अंदर आने दूँ?'): वह confirm है, यह true या false वापस आता है। एक guestbook जहाँ वे अपना नाम लिखते हैं: वह prompt है, यह जो भी उन्होंने लिखा वापस आता है, या अगर वे चले जाएँ तो कुछ नहीं।
Theory
तीन dialogs और उनके returns
- `alert(msg)`: एक message और एक OK button दिखाता है। कुछ return नहीं करता (
undefined)। Notices और errors के लिए। - `confirm(question)`: OK और Cancel दिखाता है। `true` (OK) या `false` (Cancel) return करता है। इसे एक
ifमें test कीजिए। - `prompt(question, default)`: एक text box दिखाता है। type किया गया string return करता है, या user cancel करे तो `null`।
तीनों तब तक page pause करते हैं जब तक user respond न करे। Return value ही सब कुछ है: यह आपके code को बताता है क्या हुआ।
Practical
FestConnect पूछता और बताता है
// alert: just inform (no return used)
alert("Email is missing an @");
// confirm: returns true/false
let sure = confirm("Register for 2 events?");
if (sure) {
console.log("proceeding...");
} else {
console.log("cancelled");
}
// prompt: returns the string, or null if cancelled
let code = prompt("Enter coupon code (optional):", "");
if (code === null) {
console.log("no coupon entered");
} else {
console.log("coupon: " + code);
}This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
वापस क्या आता है?
हर एक के लिए, return value बताइए: (a) user एक confirm पर Cancel click करता है; (b) user एक prompt पर Cancel click करता है; (c) user एक alert पर OK click करता है। फिर बताइए एक prompt के result को सिर्फ़ if (code) से test करना risky क्यों हो सकता है।
Show the answer
(a) confirm Cancel false return करता है। (b) prompt Cancel null return करता है। (c) alert undefined return करता है (इसका कोई असली result नहीं है)। if (code) test करना risky है क्योंकि अगर user box clear करके OK दबाए, prompt एक empty string "" return करता है, जो falsy है, तो एक जानबूझकर 'no coupon' cancel जैसा ही दिखता है। उन्हें अलग बताने के लिए, specifically cancel के लिए code === null check कीजिए।
Quiz
आप `if (confirm("Delete registration?")) deleteIt();` लिखते हैं। deleteIt() कब run होता है?
- सिर्फ़ तभी जब user OK click करे, क्योंकि confirm तब true return करता है
- हर बार, क्योंकि confirm हमेशा true return करता है
- सिर्फ़ तभी जब user Cancel click करे
- कभी नहीं, क्योंकि confirm एक if में इस्तेमाल नहीं किया जा सकता
Show the answer
सिर्फ़ तभी जब user OK click करे, क्योंकि confirm तब true return करता है
confirm OK के लिए true और Cancel के लिए false return करता है, तो if (confirm(...)) deleteIt() सिर्फ़ OK पर चलाता है (A)। यह हमेशा true return नहीं करता (B), और Cancel false देता है जो block skip कर देता है (C)। confirm बिल्कुल एक if में इस्तेमाल के लिए designed है (D ग़लत है)। यह OK/Cancel-से-true/false mapping ही कारण है confirm एक destructive action से पहले standard 'sure हैं?' guard है।
Watch out
Dialog traps
1. confirm एक boolean return करता है, prompt एक string या null। एक prompt result को true/false की तरह treat मत कीजिए, और इसे इस्तेमाल करने से पहले हमेशा === null check कीजिए।
2. एक number का prompt फिर भी text है: prompt('Age?') "20" देता है, एक string। Maths करने से पहले Number(...) से convert कीजिए।
3. वे page block करते हैं: dismiss होने तक सब कुछ pause होता है, तो loops में इनसे बचिए। असली products custom modals इस्तेमाल करते हैं, पर exams इन तीनों को test करते हैं।
Theory
ये validation results report करते हैं
अगले दो lessons में, जब FestConnect validation एक blank field या एक bad email ढूँढता है, यह exact problem alert करेगा, और final submit से पहले शायद confirm करे। सीखते हुए एक validation message दिखाने का सबसे simple तरीक़ा dialogs हैं। जो return values आपने यहाँ master की हैं (true/false, string/null) वही हैं जिनसे calling code user की choice पर react करता है।
Summary
Key takeaways
- alert(msg) एक notice दिखाता है और कुछ return नहीं करता (undefined)।
- confirm(question) OK/Cancel दिखाता है और true या false return करता है: इसे एक if में test कीजिए।
- prompt(question, default) एक text box दिखाता है और type किया गया string return करता है, या cancel होने पर null।
- एक cleared prompt "" (falsy) return करता है, तो specifically cancel detect करने के लिए === null check कीजिए।
- prompt values strings हैं; numbers को Number() से convert कीजिए। तीनों page pause करते हैं।
- Memory hook: notice (alert), doorbell yes/no (confirm), guestbook (prompt)।