التحقق من النماذج
قسيمة الشاي نفسها عادت. النموذج #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. كل مقطع يبدأ من قسيمة فارغة، إلا صف الصفحة.
📊 ماذا قد تقول الملاحظة
| ماذا كُتب | نص الملاحظة | سهل الخلط |
|---|---|---|
| ضيف فارغ، فنجانان | need guest | كتابة need cups |
| الضيف lida، تسعة فناجين | need cups | كتابة ok |
| الضيف lida، فنجانان | ok | السطر القديم lida / 2 / stayed |
| الضيف lida، صفر | need cups | اعتبار الصفر «لا فناجين، فتجاوز» |
| الصفحة، نقرتان | 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
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى