Form doğrulama
Aynı çay fişi geri geldi. Form #slip, metin alanı #guest, sayı alanı #cups, düğme #send ve type="submit". #note blank ile başlar.
Bir değeri okumak onu kabul etmek değildir. Sayfa tarayıcı burada kalsın diye hâlâ preventDefault çağırır, sonra karar verir. trim sonrası ad boş olmamalı. Fincan 1 ile 3 arasında bir sayı olmalı. Gerisi reddedilir. lida ve 2 kabul edilir, not ok olur. Sayfa ad boşken send’e basar, sonra alanları doldurup bir kez daha basar. Satır need guest / ok olur.
Önceki fiş bu işi yapmıyordu
Önceki sayfa lida’yı ve 2 metnini saklayıp lida / 2 / stayed yazdı. Siparişin uygun olup olmadığını sormadı. Boş misafir de giderdi. Bu sayfa aynı formu ve aynı düğmeyi kullanır ve başka bir soru sorar: bu sipariş ayakta kalır mı?
Kontrol önce misafire bakar. Ad boşsa fincanlar henüz yargılanmaz. Number("") 0’dır ve 1–3 dışındadır, ama unutulmuş ad need cups olmamalı.
Not ne diyebilir
Not blank ile başlar. Düğmede hâlâ send yazar. Her parça boş bir fişten başlar; sayfa satırı hariç.
📊 Not ne diyebilir
| Ne yazıldı | Not metni | Karıştırması kolay |
|---|---|---|
| misafir boş, 2 fincan | need guest | need cups yazmak |
| misafir lida, 9 fincan | need cups | ok yazmak |
| misafir lida, 2 fincan | ok | eski satır lida / 2 / stayed |
| misafir lida, 0 fincan | need cups | 0’ı «fincan yok, geç» saymak |
| sayfa, iki tıklama | need guest / ok | tek başına ok |
trim adın uçlarındaki boşlukları siler. Üç boşluk trim sonrası da boştur. Number fincan metnini sayıya çevirir ki >= ve <= metin değil sayı karşılaştırsın. Alan yine metin tutar. Dönüşüm yalnız kontrolün içinde olur.
Bir kural bozulunca işlev döner. Sonraki satırlar çalışmaz. Bu yüzden boş misafir fincan sınavına hiç varmaz.
Üç sözcük, fazlası yok
Not asla misafirin adı değildir, fincan sayısı da değildir. Yalnız need guest, need cups veya ok. Önceki sayfa lida ve 2’yi nota yazardı. Bu sayfa yazmaz.
Önce misafir, sonra fincan
Ad önce yargılanır. Boşsa işlev need guest yazar ve döner. Fincanlar 2 olabilir ve yine de önemsizdir.
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);
Günlük need guest. Boşluklar hiçe döndü, ad sayılmaz. Fincanlar 2’ydi ve sınanmadı.
Dokuz fincan
Taze fiş. Misafir lida. Fincanlar 9, yani 3’ün üstünde.
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);
Günlük need cups. Ad geçti, sayı geçmedi. 1 ve 3 geçerdi. 0 ve 4 geçmez.
Geçerli sipariş
Yine taze fiş. Misafir lida, fincan 2. İki kural da geçer, not ok olur.
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);
Günlük ok. Sayfanın yerinde kalması hakkında bir şey yazılmadı. Önceki satır lida / 2 / stayed yalnızca alanları okuyan sayfaya aittir.
Fişin altındaki satır
Betik body’nin sonundadır. Dinleyici preventDefault çağırır, sonra aynı kontrolü. İlk tıklama misafir boşken olur ve o not saklanır. Sonra betik lida ve 2 koyup send’e yeniden basar. Satır iki notu birleştirir.
<!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>
Satır need guest / ok. İlk tıklama boş ad buldu. İkincisi lida ve 2 buldu. Not ok ile biter. blank gitti. lida / 2 / stayed önceki sayfadır.
Tezgâhta
- Misafiri boş bırak, fincanı 2 yap, kontrolü çalıştır. Not need guest.
- Misafiri lida, fincanı 9 yap. Not need cups.
- Fincanı 2 yap. Not ok.
- Sayfa satırını oku: need guest / ok.
Tezgâh hataları
Düğmede hâlâ send yazar. Not üç sözcükten biridir: need guest, need cups veya ok.
- Misafir hâlâ boşken ok yazmak
- Addan önce fincanı yargılamak, boş misafirin need cups olması
trim’i unutmak, üç boşluğun ad diye geçmesicups.value’yu metin diye karşılaştırmak ve>=’in «sayı» anlamasını beklemek- Satırı lida / 2 / stayed diye okumak
- İlk tıklamadan sonra durup ok’u kaçırmak
Bunu tut
- Boş misafir, yalnızca boşluk olsa bile, need guest yazar ve durur
- 1–3 dışı fincan need cups yazar
- lida ile 2, ok yazar
- Misafir fincandan önce kontrol edilir
- Sayfa satırı need guest / ok
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek