در حال بارگذاری...

اعتبارسنجی فرم

همان برگهٔ چای برگشته است. فرم #slip است، فیلد متن #guest، فیلد عدد #cups، و دکمهٔ #send از نوع type="submit". #note اول blank است.
خواندن مقدار با قبول کردنش یکی نیست. این صفحه هنوز preventDefault را صدا می‌زند تا مرورگر همین‌جا بماند، بعد تصمیم می‌گیرد. نام مهمان بعد از trim نباید خالی باشد. تعداد فنجان باید عددی از ۱ تا ۳ باشد. جز این، سفارش رد می‌شود. lida و ۲ قبول می‌شوند و یادداشت می‌شود ok. صفحه یک بار send را می‌زند در حالی که نام هنوز خالی است، بعد فیلدها را پر می‌کند و دوباره می‌زند. خط می‌شود need guest / ok.

برگهٔ قبلی این کار را نمی‌کرد

صفحهٔ قبل lida و رشتهٔ ۲ را ذخیره کرد و نوشت lida / 2 / stayed. نپرسید سفارش مجاز است یا نه. مهمان خالی هم فرستاده می‌شد. این صفحه همان فرم و همان دکمه را دارد و سؤال دیگری می‌پرسد: این سفارش سر پا می‌ماند؟
بررسی اول سراغ نام می‌رود. اگر نام خالی باشد، فنجان‌ها هنوز قضاوت نمی‌شوند. فقط یک نام واقعی به آزمون فنجان می‌رسد. Number("") صفر است و صفر بیرون از ۱ تا ۳ است، ولی وقتی آدم اسمش را ننوشته نباید بگویی «فنجان غلط است».

یادداشت فقط یکی از این‌هاست

یادداشت اول 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 است. صفحهٔ قبل نام و عدد را داخل یادداشت می‌گذاشت. این صفحه این کار را نمی‌کند.

اول مهمان، بعد فنجان

نام اول سنجیده می‌شود. اگر خالی باشد، تابع need guest می‌نویسد و برمی‌گردد. فنجان‌ها می‌توانند ۲ باشند و باز هم مهم نیستند.

مهمان خالی را رد کن

javascript 
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 است. فاصله‌ها به هیچ تبدیل شدند، پس نام به حساب نمی‌آید. فنجان‌ها ۲ بودند و اصلاً آزمون نشدند.

نه فنجان

برگه تازه است. مهمان lida است. فنجان‌ها ۹ هستند، یعنی بیشتر از ۳.

نه فنجان را رد کن

javascript 
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 است. نام قبول شد. تعداد قبول نشد. ۱ و ۳ از این آزمون می‌گذرند. ۰ و ۴ نه.

سفارش درست

باز برگه تازه است. مهمان lida است و فنجان‌ها ۲. هر دو قاعده قبول می‌شوند، پس یادداشت ok می‌شود.

دو فنجان را قبول کن

javascript 
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 و ۲ را می‌گذارد و دوباره send را می‌زند. خط دو یادداشت را به هم وصل می‌کند.

نمایش صفحه — برگهٔ بررسی‌شده

html 
<!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 و ۲ دید. یادداشت آخر ok است. کلمهٔ blank رفته است. lida / 2 / stayed مال صفحهٔ قبلی است.

پشت پیشخوان

  1. مهمان را خالی بگذار، فنجان را ۲ بگذار و بررسی را اجرا کن. یادداشت need guest است.
  2. مهمان را lida و فنجان را ۹ بگذار. یادداشت need cups است.
  3. فنجان را ۲ بگذار. یادداشت ok است.
  4. خط صفحه را بخوان: need guest / ok.

اشتباه‌های پشت پیشخوان

روی دکمه هنوز send است. یادداشت یکی از سه کلمه است: need guest، need cups، یا ok.

  • ok نوشتن وقتی مهمان هنوز خالی است
  • فنجان را قبل از نام سنجیدن، تا مهمان خالی بشود need cups
  • فراموش کردن trim، تا سه فاصله به‌جای نام رد شود
  • مقایسهٔ cups.value به‌صورت متن و انتظار اینکه >= «عدد» را بفهمد
  • خواندن خط به‌صورت lida / 2 / stayed
  • ایستادن بعد از کلیک اول و جا انداختن ok

این را نگه دار

  • مهمان خالی، حتی اگر فقط فاصله باشد، need guest می‌نویسد و می‌ایستد
  • فنجان بیرون از ۱ تا ۳، need cups می‌نویسد
  • lida با ۲، ok می‌نویسد
  • مهمان قبل از فنجان بررسی می‌شود
  • خط صفحه need guest / ok است

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
6
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 54 از 55
Javascript آموزش