Yükleniyor...

JavaScript formları

Çay tezgâhında bir fiş var. Form #slip. İçinde name’i de guest olan metin alanı #guest, name’i de cups olan sayı alanı #cups ve type="submit" olan düğme #send duruyor. Altta #note hâlâ blank diyor.
Form, adı olan alanları bir araya toplar. Yazılan şey value içindedir ve type number olsa bile bu her zaman metindir. Göndermek, formun üzerindeki submit olayıdır. preventDefault yoksa tarayıcı formun adresini açar ve bu sayfa gider. Bu fiş preventDefault çağırır, not okunabilir kalır. Sayfa misafiri lida yapar, fincanı 2 yapar, send’e bir kez tıklar ve satır lida / 2 / stayed olur.

Bu bilet şeridi değil

Bilet şeridi üst öğeye bir tıklama dinleyicisi koyup event.target okuyordu. Satırı red / blue / gold / 1 idi ve preventDefault yoktu. Levha sayfası bunu bir bağlantıda çağırdı. Satırı click / seal / plaque / true / quiet idi. Bu fiş ikisi de değil. gold düğmesi yok, currentTarget de yok. Olayın adı submit. Önemli olan lida ve 2 metnidir.
getElementById("guest") alanı id ile bulur. slip.elements.guest onu name ile, formun içinden bulur. Burada id ve name aynı sözcüktür. Sonraki ders alanın boş olup olmadığına bakar. Bu sayfa bakmaz. Boş misafir de gönderilir.

Fiş neyi yazar

Not blank ile başlar. Misafir ve fincan boştur. Düğmenin yazısı send kalır. Satırları sırayla oku. Her parça boş fişten başlar; sayfa satırı hariç, o alttaki demodur. Demo send’e bir kez tıklar.

📊 Fiş neyi yazar

An Ne okursun Not Kolay karışan
misafir lida guest.value lida guest id’sini okumak
fincan 2 cups.value 2, ve metindir 2 sayısını beklemek
send tıklanınca işlev stayed yazar not stayed dinleyiciyi atlayan slip.submit()
iki ad, form üzerinden elements.guest ve elements.cups lida 2 elements.slip okumak
sayfa betiği satır lida / 2 / stayed red / blue / gold / 1

value sayı alanını sayıya çevirmez. 2 kaydedilince cups.value 2 karakterleridir. typeof cups.value "string" olur. Sonra sayı istersen kendin çevirirsin. Bu satır onu yapmaz.
send.click(), düğmenin type’ı submit olduğu için submit olayını ateşler. slip.submit() başka bir çağrıdır. Formu gönderir ve senin submit dinleyicini çalıştırmaz. İçindeki preventDefault sıraya bile gelmez. Bu sayfa tıklamayı kullanır.

Aynı alana iki yol

getElementById("cups") id kullanır. slip.elements.cups name kullanır ve ancak formu elinde tutuyorsan. Burada iki öznitelik aynı sözcüktür. name count olup id cups kalsaydı elements.cups bulunmaz, alan elements.count olurdu.

Misafirin adı

Alan boş başlar. Betik lida’yı value içine koyar ve aynı özelliği nota geri okur. Henüz bir şey gönderilmez.

Read the guest

javascript 
let guest = document.getElementById("guest");
let note = document.getElementById("note");
guest.value = "lida";
note.textContent = guest.value;
console.log(note.textContent);

Kayıt lida. id guest’tir. Not, guest sözcüğü değildir. value içinde duran metindir.

Kaç fincan

Taze fiş. Fincan alanı type="number". 2’yi kaydet, value oku, sonra typeof sor.

Read the cups as text

javascript 
let cups = document.getElementById("cups");
let note = document.getElementById("note");
cups.value = "2";
note.textContent = cups.value + " " + typeof cups.value;
console.log(note.textContent);

Kayıt 2 string. Kutu sayı gibi durur, betik metin alır. 2’yi tırnaksız kaydetsen de özellik "2" metni olarak döner.

Gönder düğmesi

Yine taze fiş. Dinleyici formdadır, submit için. preventDefault çağırır ve stayed yazar. Sonra sayfa send’e tıklar. slip.submit() çağırmaz.

Stay on the page

javascript 
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function pour(event) {
event.preventDefault();
note.textContent = "stayed";
}
slip.addEventListener("submit", pour);
document.getElementById("send").click();
console.log(note.textContent);

Kayıt stayed. Dinleyici çalıştı, tarayıcı bu sayfadan ayrılmadı. Tıklama yerine slip.submit() çağırırsan pour çalışmaz. Not blank kalır.

Fişteki adlar

Taze fiş, bu kez dinleyici yok. Betik iki alanı slip.elements üzerinden name ile yazar, sonra notta birleştirir.

Read both names

javascript 
let slip = document.getElementById("slip");
let note = document.getElementById("note");
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
note.textContent = slip.elements.guest.value + " " + slip.elements.cups.value;
console.log(note.textContent);

Kayıt lida 2. elements.guest, name’i guest olan alandır; id’si slip olan öğe değil. Boşluk yalnız notu ayırır. Sayfa satırı sonra / kullanır.

Fişin altındaki satır

Betik body’nin sonundadır, form ve paragraflardan sonra. mark önce left’tir. Dinleyici olağan gönderimi engeller, iki değeri nota kopyalar ve mark değerini stayed yapar. Sonra lida ve 2’yi doldurur, send’e bir kez tıklar. Satır o tıklamadan sonra yazılır.

Page demo — tea slip

html 
<!DOCTYPE html>
<html>
<head>
<title>forms — 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 mark = "left";
function pour(event) {
event.preventDefault();
note.textContent =
slip.elements.guest.value + " / " + slip.elements.cups.value;
mark = "stayed";
}
slip.addEventListener("submit", pour);
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
document.getElementById("send").click();
document.getElementById("line").textContent =
note.textContent + " / " + mark;
</script>
</body>
</html>

Satır lida / 2 / stayed. İlk sözcük misafir, ikincisi metin olarak fincan, sonuncusu mark. Dinleyici çalıştığı için son sözcük stayed’dir, left değil. Not lida / 2 ile biter. blank gider. Bilet satırı başka sayfadadır. Bu fiş alanların dolu olup olmadığına bakmaz.

Tezgâhta

  1. Misafir alanına lida koy ve value oku. Not lida olur.
  2. Fincana 2 koy ve value ile typeof oku. Not 2 string olur.
  3. submit dinle, preventDefault çağır ve send’e tıkla. Not stayed olur.
  4. İki alanı slip.elements ile oku. Sonra sayfa satırı: lida / 2 / stayed.

Tezgâhtaki sürçmeler

Etiketler guest, cups ve send kalır. Not, slip sözcüğü değildir.

  • cups.value değerini 2 sayısı sanmak
  • slip.submit() çağırıp pour beklemek
  • preventDefault unutmak; tarayıcı adresi açar
  • value isterken guest id’sini okumak
  • slip.elements.slip aramak
  • Bu sayfada boş alan veya kalıp denetlemek
  • Satırı red / blue / gold / 1 okumak

Bunu sakla

  • lida kaydedilince guest.value lida olur
  • cups.value 2 metnidir ve typeof "string" olur
  • send.click() submit dinleyicisini çalıştırır; slip.submit() çalıştırmaz
  • Sayfanın durmasının ve notun stayed diyebilmesinin nedeni preventDefault
  • slip.elements.guest ve slip.elements.cups adlı alanları okur
  • Sayfa satırı lida / 2 / stayed olur

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 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
Konu 53 / 55
Javascript Ders