फ़ॉर्म वैलिडेशन
वही चाय की पर्ची वापस है। फ़ॉर्म #slip है, टेक्स्ट फ़ील्ड #guest, नंबर फ़ील्ड #cups, और बटन #send का type="submit" है। #note blank से शुरू होता है।
मान पढ़ना उसे मान लेना नहीं है। पेज अब भी preventDefault बुलाता है ताकि ब्राउज़र यहीं रहे, फिर फ़ैसला करता है। trim के बाद नाम खाली नहीं होना चाहिए। कप 1 से 3 तक की संख्या होनी चाहिए। बाक़ी अस्वीकार है। lida और 2 स्वीकार होते हैं और नोट ok हो जाता है। पेज send तब दबाता है जब नाम खाली है, फिर फ़ील्ड भरकर फिर दबाता है। पंक्ति need guest / ok होती है।
पिछली पर्ची यह नहीं करती थी
पिछला पेज lida और स्ट्रिंग 2 रखता था और lida / 2 / stayed लिखता था। उसने नहीं पूछा कि ऑर्डर जायज़ है या नहीं। खाली अतिथि भी चला जाता। यह पेज वही फ़ॉर्म और वही बटन इस्तेमाल करता है और दूसरा सवाल पूछता है: क्या यह ऑर्डर टिकता है?
जाँच पहले अतिथि देखती है। नाम खाली हो तो कप अभी नहीं आँके जाते। Number("") 0 है, जो 1 से 3 के बाहर है, पर भूला नाम need cups नहीं बनना चाहिए।
नोट क्या कह सकता है
नोट blank से शुरू होता है। बटन पर अब भी send है। हर टुकड़ा खाली पर्ची से शुरू होता है, पेज वाली पंक्ति छोड़कर।
📊 नोट क्या कह सकता है
| क्या लिखा | नोट | आसानी से उलझना |
|---|---|---|
| अतिथि खाली, 2 कप | need guest | need cups लिखना |
| अतिथि lida, 9 कप | need cups | ok लिखना |
| अतिथि lida, 2 कप | ok | पुरानी पंक्ति lida / 2 / stayed |
| अतिथि lida, 0 कप | need cups | 0 को «कप नहीं, आगे बढ़ो» मानना |
| पेज, दो क्लिक | need guest / ok | अकेला शब्द ok |
trim नाम के सिरों की खाली जगह हटाता है। तीन स्पेस trim के बाद भी खाली रहते हैं। Number कप के टेक्स्ट को संख्या बनाता है ताकि >= और <= संख्याएँ तुलना करें, स्ट्रिंग नहीं। फ़ील्ड में अब भी टेक्स्ट रहता है। बदलना सिर्फ़ जाँच के अंदर होता है।
एक नियम टूटते ही फ़ंक्शन लौट जाता है। बाद की लाइनें नहीं चलतीं। इसलिए खाली अतिथि कप की जाँच तक पहुँचता ही नहीं।
तीन शब्द, और कुछ नहीं
नोट कभी अतिथि का नाम नहीं और कभी कप की गिनती नहीं। सिर्फ़ need guest, need cups, या ok। पिछला पेज lida और 2 नोट में डालता था। यह पेज नहीं डालता।
पहले अतिथि, फिर कप
नाम पहले आँका जाता है। खाली हो तो फ़ंक्शन need guest लिखकर लौटता है। कप 2 हो सकते हैं और फिर भी मायने नहीं रखते।
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.elements.guest.value = " ";
slip.elements.cups.value = "2";
check();
console.log(note.textContent);
लॉग need guest है। स्पेस कुछ नहीं बचे, नाम नहीं गिना जाता। कप 2 थे और जाँचे नहीं गए।
नौ कप
नई पर्ची। अतिथि lida है। कप 9 हैं, यानी 3 से ऊपर।
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.elements.guest.value = "lida";
slip.elements.cups.value = "9";
check();
console.log(note.textContent);
लॉग need cups है। नाम पास हुआ, गिनती नहीं। 1 और 3 पास होते। 0 और 4 नहीं।
सही ऑर्डर
फिर नई पर्ची। अतिथि lida और कप 2। दोनों नियम पास होते हैं, नोट ok हो जाता है।
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
check();
console.log(note.textContent);
लॉग ok है। पेज के रुके रहने के बारे में कुछ नहीं लिखा। पिछली पंक्ति lida / 2 / stayed उस पेज की है जो सिर्फ़ फ़ील्ड पढ़ता था।
पर्ची के नीचे की पंक्ति
स्क्रिप्ट body के अंत में है। लिसनर preventDefault बुलाता है, फिर वही जाँच। पहला क्लिक खाली अतिथि पर होता है और वह नोट रख लिया जाता है। फिर स्क्रिप्ट lida और 2 भरकर send फिर दबाती है। पंक्ति दोनों नोट जोड़ती है।
<!DOCTYPE html>
<html>
<head>
<title>tea-slip — page</title>
</head>
<body>
<form id="slip">
<input id="guest" name="guest" type="text">
<input id="cups" name="cups" type="number">
<button id="send" type="submit">send</button>
</form>
<p id="note">blank</p>
<p id="line">…</p>
<script>
let slip = document.getElementById("slip");
let note = document.getElementById("note");
let seen = [];
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.addEventListener("submit", function (event) {
event.preventDefault();
check();
seen.push(note.textContent);
});
document.getElementById("send").click();
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
document.getElementById("send").click();
document.getElementById("line").textContent = seen.join(" / ");
</script>
</body>
</html>
पंक्ति need guest / ok है। पहले क्लिक ने खाली नाम देखा। दूसरे ने lida और 2 देखा। नोट ok पर खत्म होता है। blank चला गया। lida / 2 / stayed पिछला पेज है।
काउंटर पर
- अतिथि खाली छोड़ो, कप 2 रखो, जाँच चलाओ। नोट need guest है।
- अतिथि lida और कप 9 रखो। नोट need cups है।
- कप 2 रखो। नोट ok है।
- पेज की पंक्ति पढ़ो: need guest / ok।
काउंटर की चूक
बटन पर अब भी send है। नोट तीन शब्दों में से एक है: need guest, need cups, या ok।
- अतिथि अभी खाली हो और ok लिखना
- नाम से पहले कप आँकना, जिससे खाली अतिथि need cups बन जाए
trimभूलना, जिससे तीन स्पेस नाम बनकर निकल जाएँcups.valueको टेक्स्ट की तरह तुलना करना और उम्मीद करना कि>=«संख्या» समझे- पंक्ति को lida / 2 / stayed पढ़ना
- पहले क्लिक के बाद रुक जाना और ok छोड़ देना
यह रखो
- खाली अतिथि, चाहे सिर्फ़ स्पेस हो, need guest लिखता है और रुकता है
- 1 से 3 के बाहर कप need cups लिखते हैं
- lida और 2 ok लिखते हैं
- अतिथि कप से पहले जाँचा जाता है
- पेज की पंक्ति need guest / ok है
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी