Formlar, kullanıcı girdisi ve localStorage

Ders 22'de sayfaların tıklamalara ve tuşlara tepki verdi; bir kutuya yazılanı da harf harf okudun. Bu derste bir formu baştan sona işleyeceksin: kullanıcının yazdığını okuyacak, denetleyecek, bir listeye ekleyecek, silecek, düzenleyecek ve sayfa kapansa da kaybolmasın diye tarayıcıya kaydedeceksin.

Dersin sonunda elinde küçük ama gerçek bir uygulama olacak: maç günlüğü. Oynadığın her maçın şampiyonunu, KDA'sını, süresini ve sonucunu girersin; uygulama listeyi tutar, kazanma oranını hesaplar, tarayıcıyı kapatıp açtığında her şeyi hatırlar. Yapılacaklar listeleri, alışveriş sepetleri, yorum kutuları: web'deki formların çoğu bu dersteki kalıpla çalışır.

#Proje klasörü ve form

C:\kod içinde mac-gunlugu adında yeni bir klasör oluştur ve VS Code'da File → Open Folder ile onu aç. Uygulama üç dosyadan oluşacak: iskelet index.html, görünüm stil.css, davranış app.js. Üçünü de oluştur; app.js şimdilik boş kalsın.

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <meta name="viewport" content="width=device-width, initial-scale=1">6    <title>Maç günlüğü</title>7    <link rel="stylesheet" href="stil.css">8    <script src="app.js" defer></script>9</head>10<body>11    <main>12        <h1>Maç günlüğü</h1>13 14        <form id="macFormu">15            <label>Şampiyon16                <input id="sampiyon" name="sampiyon" placeholder="Ahri">17            </label>18            <label>KDA (kill/ölüm/asist)19                <input id="kda" name="kda" placeholder="8/2/11">20            </label>21            <label>Süre (dakika)22                <input id="sure" name="sure" type="number" placeholder="31">23            </label>24            <label>Sonuç25                <select id="sonuc" name="sonuc">26                    <option value="zafer">Zafer</option>27                    <option value="bozgun">Bozgun</option>28                </select>29            </label>30            <p id="formHata" class="form-hata" role="alert"></p>31            <div class="dugmeler">32                <button id="kaydetDugmesi" type="submit">Kaydet</button>33                <button id="vazgecDugmesi" class="ikincil" type="button" hidden>Vazgeç</button>34            </div>35        </form>36 37        <section>38            <div class="liste-bas">39                <h2>Maçlar</h2>40                <select id="filtre" aria-label="Hangi maçlar gösterilsin">41                    <option value="hepsi">Hepsi</option>42                    <option value="zafer">Zaferler</option>43                    <option value="bozgun">Bozgunlar</option>44                </select>45            </div>46            <p id="ozet"></p>47            <ul id="liste"></ul>48        </section>49    </main>50</body>51</html>

defer sayesinde app.js sayfa okunduktan sonra çalışır ve querySelector öğeleri hazır bulur (Ders 22). Geri kalanın çoğu Ders 19'dan tanıdık. Dört ayrıntıya dikkat et:

• Hem id hem name. id'yi JavaScript'ten öğeyi bulmak için, name'i form için yazıyoruz: tarayıcı formu gönderirken verileri bu adlarla paketler (Ders 19).
• label'ın içinde input. Kutuyu etiketin içine koymak, for ile bağlamak kadar geçerli bir yol; etikete tıklayınca imleç kutuya gider.
• İki düğme, iki tür. Kaydet type="submit": formu gönderir. Vazgeç type="button": kendi başına hiçbir şey yapmaz, formu da göndermez. Ona düzenleme bölümünde JavaScript ile iş vereceğiz.
• hidden niteliği öğeyi gizler; Vazgeç şimdilik görünmüyor. #formHata, #ozet ve #liste de şimdilik boş; onları JavaScript dolduracak.

Görünüm bu dersin konusu değil; aşağıdaki CSS'in neredeyse tamamı Ders 20 ve 21'den. Yazarken grid'in ve flex'in nerede kullanıldığına bak. Yeni olan üç küçük ayrıntıyı hemen altında açıklıyoruz.

1* {2    box-sizing: border-box;3}4 5body {6    margin: 0;7    font-family: system-ui, sans-serif;8    background: #f2f3f7;9    color: #1d1d2b;10}11 12main {13    max-width: 640px;14    margin: 0 auto;15    padding: 16px;16}17 18form {19    display: grid;20    grid-template-columns: 1fr 1fr;21    gap: 12px;22    padding: 16px;23    background: #ffffff;24    border-radius: 12px;25}26 27label {28    display: grid;29    gap: 4px;30    font-weight: 600;31}32 33input, select, button {34    font: inherit;35    padding: 8px 10px;36    border: 1px solid #c4c7d4;37    border-radius: 8px;38}39 40button {41    background: #5b4bd6;42    color: #ffffff;43    border: 0;44    cursor: pointer;45}46 47.form-hata {48    grid-column: 1 / -1;49    margin: 0;50    color: #c0263b;51}52 53.dugmeler {54    grid-column: 1 / -1;55    display: flex;56    gap: 8px;57}58 59.liste-bas {60    display: flex;61    justify-content: space-between;62    align-items: center;63}64 65#liste {66    list-style: none;67    padding: 0;68}69 70#liste li {71    display: flex;72    gap: 8px;73    align-items: center;74    margin-bottom: 8px;75    padding: 10px 12px;76    background: #ffffff;77    border-left: 6px solid #9a9db0;78    border-radius: 8px;79}80 81#liste li span {82    flex: 1;83}84 85#liste .zafer {86    border-left-color: #1f9d55;87}88 89#liste .bozgun {90    border-left-color: #d64545;91}92 93.ikincil,94#liste button {95    background: #e9e8f7;96    color: #3a2fa3;97}98 99#liste button {100    padding: 4px 10px;101}102 103@media (max-width: 480px) {104    form {105        grid-template-columns: 1fr;106    }107}

• grid-column: 1 / -1 öğeyi grid'in ilk çizgisinden son çizgisine kadar uzatır. Hata paragrafı ve düğmeler, kaç sütun olursa olsun bütün satırı kaplar.
• border-left yalnız sol kenara çizgi çeker; border-left-color da yalnız o çizginin rengini değiştirir. Zafer ve bozgun sınıfları kalınlığa dokunmadan rengi boyar.
• system-ui, işletim sisteminin kendi yazı tipidir (Windows'ta Segoe UI).

Sayfayı yerel sunucuyla aç. Live Server kullanıyorsan adres 127.0.0.1:5500/index.html olur, npx serve kullanıyorsan localhost:3000. Ekranda şunu görmelisin:

#Form gönderilince ne olur?

Ders 22'de öğrendiğin gibi bir olay dinleyicisi ekle: form gönderilince şampiyonun adı listeye eklensin. app.js'e yaz:

1const form = document.querySelector("#macFormu")2const sampiyonKutusu = document.querySelector("#sampiyon")3const liste = document.querySelector("#liste")4 5form.addEventListener("submit", () => {6    const satir = document.createElement("li")7    satir.textContent = sampiyonKutusu.value8    liste.append(satir)9    console.log("Listeye eklendi:", sampiyonKutusu.value)10})

submit, formun gönderildiği an çalışan olaydır. Kutuları doldur (Ahri, 8/2/11, 31) ve Kaydet'e bas. Ahri satırı ya hiç görünmez ya da bir an görünüp kaybolur. Kutular boşalır, konsoldaki mesaj silinir, adres çubuğu da değişir:

127.0.0.1:5500/index.html?sampiyon=Ahri&kda=8%2F2%2F11&sure=31&sonuc=zafer

Kodun çalıştı; sorun ondan sonra olanda. Bunu Ders 19'da görmüştün: form gönderilince tarayıcı kutuların name=değer çiftlerini adresin sonuna ekler ve sayfayı baştan yükler (/ adreste %2F diye yazılır). Bu, formun varsayılan davranışı; Ders 22'de bağlantıya tıklayınca başka sayfaya gidilmesi gibi. Yeni yüklenen sayfada ne eklediğin satır var ne de JavaScript değişkenlerin: Ders 22'deki benzetmeyle, maç baştan başladı.

Bu davranış, formları sunucunun işlediği sitelerden kalma ve hâlâ geçerli: birçok arama kutusu sayfayı böyle gönderir. Bizim işimizi ise JavaScript yapacak; tarayıcıya "bu sefer gönderme" demeliyiz. Ders 22'de bağlantının varsayılan davranışını preventDefault() ile durdurmuştun; formda da aynı metot çalışır.

Dinleyici olay nesnesini Ders 22'deki gibi olay adıyla alsın ve ilk iş olarak olay.preventDefault() çağırsın:

1const form = document.querySelector("#macFormu")2const sampiyonKutusu = document.querySelector("#sampiyon")3const liste = document.querySelector("#liste")4 5form.addEventListener("submit", (olay) => {6    olay.preventDefault()7    const satir = document.createElement("li")8    satir.textContent = sampiyonKutusu.value9    liste.append(satir)10    console.log("Listeye eklendi:", sampiyonKutusu.value)11})

Listeye eklendi: Ahri

Yeniden dene: satır listede kalır, adres değişmez, mesaj konsolda durur. Şampiyon kutusundayken Enter'a basmak da formu gönderir; tarayıcı bunu Kaydet'e tıklanmış gibi işler ve yine submit çalışır.

#Neden düğmenin click'i değil, formun submit'i?

Dinleyiciyi Kaydet düğmesinin click olayına da bağlayabilirdin; Enter'a basınca bile çalışırdı. Asıl fark doğrulamada. Birazdan forma "bu kutu boş geçilemez" gibi kurallar ekleyeceğiz. click bu kurallara bakılmadan önce çalışır, form bomboşken bile. submit ise yalnız bütün kurallar geçince çalışır. Veriyi submit'te almak, bozuk verinin kapıdan girmemesi demek.

1const form = document.querySelector("#macFormu")2const sampiyonKutusu = document.querySelector("#sampiyon")3const liste = document.querySelector("#liste")4 5form.addEventListener("submit", (olay) => {6    const satir = document.createElement("li")7    satir.textContent = sampiyonKutsu.value8    liste.append(satir)9    olay.preventDefault()10})

Uncaught ReferenceError: sampiyonKutsu is not defined    at HTMLFormElement.<anonymous> (app.js:7:25)

#Girdiyi okumak: kutudan gelen her şey metin

Şimdi bütün kutuları okuyalım. Her girdi öğesinin value özelliği içine yazılanı verir; <select>'te ise seçili seçeneğin value'sunu. Aşağıdaki ikinci console.log'da yeni bir sözcük var: typeof (okunuşu "tayp ov"), yanındaki değerin türünü metin olarak söyler. typeof 31 sonucu "number", typeof "31" sonucu "string". Bir değerin sayı mı metin mi olduğundan şüphelendiğinde ilk başvuracağın araç bu.

Listeye ekleme işini birazdan daha iyi bir yolla yazacağız; deneme için app.js'in içeriğini şununla değiştir:

1const form = document.querySelector("#macFormu")2const sampiyonKutusu = document.querySelector("#sampiyon")3const kdaKutusu = document.querySelector("#kda")4const sureKutusu = document.querySelector("#sure")5const sonucKutusu = document.querySelector("#sonuc")6 7form.addEventListener("submit", (olay) => {8    olay.preventDefault()9    console.log(sampiyonKutusu.value, kdaKutusu.value, sureKutusu.value, sonucKutusu.value)10    console.log(typeof sureKutusu.value)11})

Ahri 8/2/11 31 zaferstring

Süre kutusunun türü number olduğu hâlde typeof string diyor. Kural şu: Girdi kutusundan okunan değer her zaman metindir. type="number" kutunun neyi kabul ettiğini ve telefonda hangi klavyenin açılacağını değiştirir, value'nun türünü değiştirmez.

Bunun neden önemli olduğunu görmek için maçların toplam süresini tutmayı dene. Bu bölümdeki her denemede app.js'in içeriğini yenisiyle değiştir:

1const form = document.querySelector("#macFormu")2const sureKutusu = document.querySelector("#sure")3 4let toplamSure = 05 6form.addEventListener("submit", (olay) => {7    olay.preventDefault()8    toplamSure = toplamSure + sureKutusu.value9    console.log("Toplam süre:", toplamSure)10})

Süreye önce 31 yazıp Kaydet'e bas, sonra 28 yazıp yine bas:

Toplam süre: 031Toplam süre: 03128

59 beklerken 03128 çıktı. 0 + "31" işleminde bir taraf metin olduğu için + toplamadı, yapıştırdı (Ders 1'deki metin + sayı kuralı). Sonuç artık bir metin ve her yeni süre onun sonuna eklendi.

Çözüm, değeri hesaba sokmadan önce sayıya çevirmek. İki yolun var:

• Number(sureKutusu.value): Ders 9'daki çevirme.
• sureKutusu.valueAsNumber: yalnız type="number" gibi sayısal kutularda çalışan, değeri doğrudan sayı olarak veren özellik.

Farkları boş kutuda ortaya çıkar. Şunu yazıp önce süre 31 iken, sonra süre kutusu boşken Kaydet'e bas:

1const form = document.querySelector("#macFormu")2const kdaKutusu = document.querySelector("#kda")3const sureKutusu = document.querySelector("#sure")4 5form.addEventListener("submit", (olay) => {6    olay.preventDefault()7    console.log(Number(sureKutusu.value), sureKutusu.valueAsNumber)8    console.log(kdaKutusu.valueAsNumber)9})

31 31NaN0 NaNNaN

Boş kutuyu Number sessizce 0 yapar: 0 dakikalık bir maç kaydedersin ve kimse fark etmez. valueAsNumber ise NaN verir, yani "burada sayı yok" der. Sayı kutularında valueAsNumber'ı tercih et; birazdan required ile boş kutuyu kökünden engelleyeceğiz. Metin kutusunda valueAsNumber hep NaN'dır, çünkü o kutu sayı kutusu değil.

KDA bir metin kutusu ve içinde üç sayı var. Onu Ders 9'daki gibi parçalara ayırıp her parçayı çevirirsin. Bu kısım sayfaya dokunmadığı için Node'da da deneyebilirsin:

const kda = "8/2/11"const parcalar = kda.split("/")console.log(parcalar)console.log(parcalar.map((parca) => Number(parca)))

[ '8', '2', '11' ][ 8, 2, 11 ]

Uygulamada bunu tek satırda, dizi parçalamayla (Ders 12) yazacağız: const [kill, olum, asist] = kdaKutusu.value.split("/").map((parca) => Number(parca)).

1const form = document.querySelector("#macFormu")2const sureKutusu = document.querySelector("#sure")3 4form.addEventListener("submit", (olay) => {5    olay.preventDefault()6    console.log(sureKutusu.value + 1)7    console.log(Number(sureKutusu.value) + 1)8})

516

#Doğrulama: önce tarayıcı, sonra sen

Kullanıcı her şeyi yazabilir: kutuyu boş bırakabilir, süreye 500 yazabilir, KDA'yı 8-2-11 diye girebilir. Bozuk veri listeye girerse kazanma oranı da KDA da bozulur. Bu yüzden veriyi kabul etmeden önce doğrularız (validation). Ders 13'te fonksiyona gelen değerleri kapıdaki bir bekçiyle denetlemiştin; şimdi bekçiyi kullanıcının yazdığının önüne koyuyoruz. İlk savunma hattı HTML'in kendisi: kutulara birkaç nitelik eklemen yeter. index.html'deki üç input'u şöyle değiştir:

14        <form id="macFormu">15            <label>Şampiyon16                <input id="sampiyon" name="sampiyon" required maxlength="20" placeholder="Ahri">17            </label>18            <label>KDA (kill/ölüm/asist)19                <input id="kda" name="kda" required pattern="[0-9]{1,2}/[0-9]{1,2}/[0-9]{1,2}"20                    placeholder="8/2/11" title="Üç sayıyı eğik çizgiyle ayır, ör. 8/2/11">21            </label>22            <label>Süre (dakika)23                <input id="sure" name="sure" type="number" required min="1" max="120" placeholder="31">24            </label>

Uzun satırı ikiye böldük; bir etiketin nitelikleri birkaç satıra yayılabilir. Kaydet'e basınca tarayıcı önce bu kuralları denetler. Kurala uymayan ilk kutunun yanında bir uyarı balonu açılır ve submit olayı hiç çalışmaz: dinleyicin bozuk veriyi görmez bile. maxlength="20" uyarı vermez, 20 karakterden fazlasını yazdırmaz.

Mesajları tarayıcı yazar, tarayıcının diliyle. Chrome'un dili Türkçeyse soldaki, İngilizceyse sağdaki sütunu görürsün.

pattern'a yazılan şey bir düzenli ifade (regular expression), yani bir metin kalıbı.

Bütün dilini öğrenmen gerekmiyor; bu kalıbı okumak için üç parça yeter:

• [0-9]: 0'dan 9'a kadar bir rakam.
• {1,2}: hemen önündeki parça bir ya da iki kez.
• /: eğik çizginin kendisi.

Yani [0-9]{1,2}/[0-9]{1,2}/[0-9]{1,2} "bir ya da iki basamaklı sayı, eğik çizgi, yine öyle, yine öyle" demek. Kalıp metnin tamamına uymalı: 8/2/11 ve 08/02/11 geçer; 8-2-11, 8/2, 123/1/1 ve başında boşluk olan 8/2/11 geçmez. Boş kutuya pattern bakmaz; boş kutuyu required yakalar. Kalıbı okumak zor olduğu için ne istediğini title'a insan diliyle yaz; tarayıcı bu açıklamayı uyarıyla birlikte gösterebilir.

#Aynı denetimi JavaScript'ten yapmak

Her girdi öğesinin checkValidity() metodu, kurallara uyuyorsa true, uymuyorsa false döndürür. validationMessage özelliği de tarayıcının göstereceği mesajı verir. Formun da bir checkValidity()'si vardır: bütün kutular geçerliyse true. value'ya JavaScript'ten değer de atayabilirsin; kutunun içi değişir. Denemek için app.js'in içeriğini geçici olarak şununla değiştir ve sayfayı yenile:

1const form = document.querySelector("#macFormu")2const sampiyonKutusu = document.querySelector("#sampiyon")3const kdaKutusu = document.querySelector("#kda")4const sureKutusu = document.querySelector("#sure")5 6sureKutusu.value = "200"7console.log(sureKutusu.checkValidity())8console.log(sureKutusu.validationMessage)9 10kdaKutusu.value = "8-2-11"11console.log(kdaKutusu.validationMessage)12 13sampiyonKutusu.value = "   "14console.log(sampiyonKutusu.checkValidity())15console.log(form.checkValidity())

falseDeğer 120 veya daha küçük olmalıdır.Lütfen istenen biçimi eşleştirin.truefalse

İngilizce Chrome'da ikinci ve üçüncü satır Value must be less than or equal to 120. ve Please match the requested format. olur. Dördüncü satıra dikkat: yalnızca üç boşluktan oluşan şampiyon adı required'ı geçti. Tarayıcı için boşluk da bir karakterdir. İşte HTML'in yakalayamadığı ilk kural; onu sen yazacaksın.

#Kendi kuralın ve kendi mesajın

Tarayıcının denetimini geçen veri submit dinleyicisine gelir. Kendi kurallarını orada, preventDefault'un hemen altında yazarsın. Kural bozuksa formdaki #formHata paragrafına mesajı yaz, imleci o kutuya götür ve return ile dinleyiciden çık (erken çıkış). app.js'teki geçici denemeyi sil, yerine şunu yaz:

1const form = document.querySelector("#macFormu")2const sampiyonKutusu = document.querySelector("#sampiyon")3const formHata = document.querySelector("#formHata")4 5form.addEventListener("submit", (olay) => {6    olay.preventDefault()7 8    const sampiyon = sampiyonKutusu.value.trim()9    if (sampiyon === "") {10        formHata.textContent = "Şampiyon adı yalnız boşluktan oluşamaz."11        sampiyonKutusu.focus()12        return13    }14 15    formHata.textContent = ""16    console.log("Geçerli:", sampiyon)17})

trim() baştaki ve sondaki boşlukları atar (Ders 9); geriye bir şey kalmadıysa ad boştur. focus() imleci o kutuya götürür. #formHata'nın role="alert" niteliği, mesaj değişince ekran okuyucunun onu sesli okumasını sağlar. Şampiyon kutusuna yalnızca boşluk yaz, ötekileri doldur ve Kaydet'e bas:

127.0.0.1:5500/index.html

#Veriden arayüz çizmek

İlk denemede satırı doğrudan listeye ekledik. Ekleme için yeterli; ama silme, düzenleme ve filtreleme gelince bu yol çıkmaza girer: listedeki bir maçın KDA'sını öğrenmek için li'nin metnini ("Zafer · Ahri · 8/2/11 …") yeniden parçalaman gerekir. Sayfa, veriyi saklamak için kötü bir yerdir.

Bunun yerine bütün veriyi bir dizide tutar, ekrandaki listeyi her seferinde o diziden baştan çizeriz. Ders 22'deki dükkânda kural "önce durumu değiştir, sonra ekranı güncelle" idi; ama orada kartların kendisi de durumun bir parçasıydı, bir kartın fiyatını onun dataset'inden okuyordun. Burada bir adım ileri gidiyoruz: sayfa yalnız bir görüntü, bilgi her zaman dizide. Kural basit: veriyi değiştiren her olayın sonunda ekranı yeniden çiz.

Üçüncü adımı (kaydetmeyi) dersin sonunda ekleyeceğiz. Şimdi app.js'i baştan yaz. Önce bütün öğeleri bul ve durumu kur:

1const SONUC_ADI = { zafer: "Zafer", bozgun: "Bozgun" }2 3const form = document.querySelector("#macFormu")4const sampiyonKutusu = document.querySelector("#sampiyon")5const kdaKutusu = document.querySelector("#kda")6const sureKutusu = document.querySelector("#sure")7const sonucKutusu = document.querySelector("#sonuc")8const formHata = document.querySelector("#formHata")9const kaydetDugmesi = document.querySelector("#kaydetDugmesi")10const vazgecDugmesi = document.querySelector("#vazgecDugmesi")11const filtreKutusu = document.querySelector("#filtre")12const ozet = document.querySelector("#ozet")13const liste = document.querySelector("#liste")14 15let maclar = []

SONUC_ADI, "zafer" gibi değerleri ekranda yazılacak hâllerine çevirir: SONUC_ADI[mac.sonuc] köşeli parantezle okuma (Ders 4). Adının büyük harfle yazılması Ders 17'deki DUSMANLAR gibi: "bu hiç değişmeyen bir ayar" demek. maclar'ı let ile açtık, çünkü birazdan ona yeni diziler atayacağız. Her maç bir obje olacak; alanları id, sampiyon, kill, olum, asist, sure ve sonuc.

Durumun altına, bir boş satır bırakıp iki hesap fonksiyonu yaz. kdaMetni, Ders 9'daki fonksiyonun üç sayı yerine bir maç objesi alan hâli. kazanmaOrani zaferleri filter ile sayıp yüzdeye çevirir:

1function kdaMetni(mac) {2    if (mac.olum === 0) {3        return "Kusursuz"4    }5    return ((mac.kill + mac.asist) / mac.olum).toFixed(2)6}7 8function kazanmaOrani(tumMaclar) {9    if (tumMaclar.length === 0) {10        return "—"11    }12    const zaferSayisi = tumMaclar.filter((mac) => mac.sonuc === "zafer").length13    return "%" + Math.round((zaferSayisi / tumMaclar.length) * 100)14}

Bu iki fonksiyon hiçbir sayfa öğesine dokunmuyor; aldıklarından bir sonuç üretiyorlar (saf fonksiyon). Böyle fonksiyonları tarayıcı açmadan Node ile deneyebilirsin. Klasörde deneme.js aç, iki fonksiyonu oraya da yaz ve sınır değerleriyle çağır:

1function kdaMetni(mac) {2    if (mac.olum === 0) {3        return "Kusursuz"4    }5    return ((mac.kill + mac.asist) / mac.olum).toFixed(2)6}7 8function kazanmaOrani(tumMaclar) {9    if (tumMaclar.length === 0) {10        return "—"11    }12    const zaferSayisi = tumMaclar.filter((mac) => mac.sonuc === "zafer").length13    return "%" + Math.round((zaferSayisi / tumMaclar.length) * 100)14}15 16console.log(kdaMetni({ kill: 8, olum: 2, asist: 11 }))17console.log(kdaMetni({ kill: 3, olum: 0, asist: 17 }))18console.log(kazanmaOrani([]))19console.log(kazanmaOrani([{ sonuc: "zafer" }, { sonuc: "bozgun" }, { sonuc: "zafer" }]))

PS C:\kod\mac-gunlugu> node deneme.js9.50Kusursuz—%67

if satırları neden var? Onlar olmasaydı hiç maç yokken ve hiç ölmeyen oyuncuda ne çıkacağını Node hemen gösterir:

console.log("%" + Math.round((0 / 0) * 100))console.log(((3 + 17) / 0).toFixed(2))

%NaNInfinity

Boş liste ve sıfır ölüm: Ders 9'da da karşına çıkan sınır değerleri burada da tuzak kuruyor.

Şimdi çizim fonksiyonu. app.js'e, hesap fonksiyonlarının altına ekle:

function ciz() {    liste.replaceChildren()     for (const mac of maclar) {        const satir = document.createElement("li")        satir.classList.add(mac.sonuc)        satir.textContent = `${SONUC_ADI[mac.sonuc]} · ${mac.sampiyon} · ${mac.kill}/${mac.olum}/${mac.asist} · KDA ${kdaMetni(mac)} · ${mac.sure} dk`        liste.append(satir)    }     if (maclar.length === 0) {        const bos = document.createElement("li")        bos.textContent = "Henüz maç yok. İlk maçını yukarıdan ekle."        liste.append(bos)    }     const zaferSayisi = maclar.filter((mac) => mac.sonuc === "zafer").length    ozet.textContent = `${maclar.length} maç · ${zaferSayisi} zafer · kazanma oranı ${kazanmaOrani(maclar)}`}

• liste.replaceChildren() listenin bütün çocuklarını söker; Ders 22'de dükkânı da böyle boşaltmıştın. Her çizim temiz başlar, eski satırlar iki kez görünmez.
• classList.add(mac.sonuc) satıra zafer ya da bozgun sınıfını verir; CSS sol kenarı ona göre boyar.
• Liste boşsa "Henüz maç yok" yazılır; boş durumu unutmak kullanıcıya bomboş bir ekran göstermek demektir. Özet de her çizimde baştan hesaplanır.

Son olarak submit dinleyicisi maçı diziye ekler ve çizer:

form.addEventListener("submit", (olay) => {    olay.preventDefault()     const sampiyon = sampiyonKutusu.value.trim()    if (sampiyon === "") {        formHata.textContent = "Şampiyon adı yalnız boşluktan oluşamaz."        sampiyonKutusu.focus()        return    }     const [kill, olum, asist] = kdaKutusu.value.split("/").map((parca) => Number(parca))    maclar.push({        id: Date.now(),        sampiyon: sampiyon,        kill: kill,        olum: olum,        asist: asist,        sure: sureKutusu.valueAsNumber,        sonuc: sonucKutusu.value    })     formHata.textContent = ""    form.reset()    ciz()}) ciz()

Dinleyici sayfaya tek bir satır bile eklemiyor: yalnız durumu değiştiriyor (push) ve ciz()'i çağırıyor. form.reset() formu ilk hâline döndürür, Ders 19'daki type="reset" düğmesi gibi: kutular boşalır, Sonuç yeniden Zafer olur. En alttaki ciz() sayfa açılırken bir kez çalışır. Date.now() o anın zamanını büyük bir sayı olarak verir; id: Date.now() bu sayıyı maçın kimlik numarası yapar. Ne işe yaradığını hemen göreceksin. Birkaç maç ekle ve listenin her seferinde baştan kurulduğunu izle.

Henüz maç yok. İlk maçını yukarıdan ekle.Zafer · Ahri · 8/2/11 · KDA 9.50 · 31 dkZafer · Ahri · 8/2/11 · KDA 9.50 · 31 dkBozgun · Jinx · 4/7/9 · KDA 1.86 · 38 dk

#Silme, düzenleme ve filtreleme

#Silme: her maçın bir kimliği olsun

Silmek için hangi maçın silineceğini bilmen gerekir. İlk akla gelen dizideki sıra numarası; ama birazdan listeyi filtreleyeceğiz ve "Bozgunlar" seçiliyken ekrandaki ilk satır dizinin üçüncü elemanı olabilir. İki sırayı karıştırırsan yanlış maçı silersin. Bu yüzden her maça değişmeyen bir kimlik verdik. Oyunun kendisi de böyle yapar: maç geçmişindeki her maçın, liste nasıl sıralanırsa sıralansın değişmeyen bir maç kimliği vardır. Bizim kimliğimiz Date.now(): 1 Ocak 1970'ten bu yana geçen milisaniye sayısı. Elle eklenen iki maçın aynı milisaniyeye düşmesi pratikte imkânsızdır.

Satıra düğme ekleyeceğimiz için metni ayrı bir span'a koyuyoruz. ciz()'deki döngüyü şöyle değiştir:

    for (const mac of maclar) {        const satir = document.createElement("li")        satir.classList.add(mac.sonuc)         const bilgi = document.createElement("span")        bilgi.textContent = `${SONUC_ADI[mac.sonuc]} · ${mac.sampiyon} · ${mac.kill}/${mac.olum}/${mac.asist} · KDA ${kdaMetni(mac)} · ${mac.sure} dk`         const silDugmesi = document.createElement("button")        silDugmesi.textContent = "Sil"        silDugmesi.addEventListener("click", () => sil(mac.id))         satir.append(bilgi, silDugmesi)        liste.append(satir)    }

Silme fonksiyonunu ciz fonksiyonunun bittiği yerin altına, submit dinleyicisinin üstüne yaz:

function sil(id) {    maclar = maclar.filter((mac) => mac.id !== id)    ciz()}

Her Sil düğmesinin dinleyicisi, döngünün o turundaki mac'i hatırlar (kapanış, Ders 10); bu yüzden her düğme kendi maçının kimliğini gönderir. filter, o kimlik dışındaki maçlardan yeni bir dizi kurar, biz de maclar'ı onunla değiştiririz. Sonra yine ciz(). Eski düğmeler, dinleyicileriyle birlikte replaceChildren() ile sökülür. Ders 22'deki olay yetkilendirmesiyle listeye tek dinleyici koyup kimliği dataset'ten okumak da olurdu; okuması daha kolay olduğu için burada her düğmeye kendi dinleyicisini veriyoruz.

#Düzenleme: aynı form, iki iş

Düzenlemek için ayrı bir form kurmayacağız. Düzenle'ye basınca maçın bilgileri forma dolsun ve düğmenin yazısı Güncelle olsun; gönderilince yeni maç eklenmesin, var olan değişsin. Formun hangi işte olduğunu bilmek için durumu bir değişkenle genişlet, let maclar = []'ın altına yaz:

let duzenlenenId = null

null "şu an düzenlenen bir maç yok" demek (null). Döngüde Sil'in önüne bir Düzenle düğmesi ekle ve append satırını güncelle:

        const duzenleDugmesi = document.createElement("button")        duzenleDugmesi.textContent = "Düzenle"        duzenleDugmesi.addEventListener("click", () => duzenlemeyeBasla(mac))

        satir.append(bilgi, duzenleDugmesi, silDugmesi)

Düzenlemeyi başlatan ve formu ilk hâline döndüren iki fonksiyonu sil'in üstüne yaz:

function duzenlemeyeBasla(mac) {    duzenlenenId = mac.id    sampiyonKutusu.value = mac.sampiyon    kdaKutusu.value = `${mac.kill}/${mac.olum}/${mac.asist}`    sureKutusu.value = mac.sure    sonucKutusu.value = mac.sonuc    kaydetDugmesi.textContent = "Güncelle"    vazgecDugmesi.hidden = false    sampiyonKutusu.focus()} function formuTemizle() {    duzenlenenId = null    form.reset()    formHata.textContent = ""    kaydetDugmesi.textContent = "Kaydet"    vazgecDugmesi.hidden = true}

hidden niteliği JavaScript'te aynı adlı bir özellik olarak durur: false yapınca Vazgeç görünür. Şimdi submit dinleyicisinde const [kill, olum, asist] satırından dinleyicinin sonuna kadar olan kısmı şununla değiştir; dosyanın en altındaki ciz() yerinde kalsın. Ekleme de güncelleme de aynı bilgileri kullandığı için onları önce bir bilgiler objesinde topluyoruz:

    const [kill, olum, asist] = kdaKutusu.value.split("/").map((parca) => Number(parca))    const bilgiler = {        sampiyon: sampiyon,        kill: kill,        olum: olum,        asist: asist,        sure: sureKutusu.valueAsNumber,        sonuc: sonucKutusu.value    }     if (duzenlenenId === null) {        maclar.push({ id: Date.now(), ...bilgiler })    } else {        maclar = maclar.map((mac) => {            if (mac.id === duzenlenenId) {                return { ...mac, ...bilgiler }            }            return mac        })    }     formuTemizle()    ciz()}) vazgecDugmesi.addEventListener("click", formuTemizle)

map her maçı olduğu gibi geri verir; yalnız kimliği eşleşeni { ...mac, ...bilgiler } ile değiştirir. Yaymada (Ders 12) sonra gelen kazanır: önce eski maçın bütün alanları (kimlik dahil) kopyalanır, sonra bilgiler'deki yeni değerler onların üstüne yazılır. Vazgeç, hiçbir şeyi değiştirmeden formu temizler.

Bir sınır durumu daha: düzenlediğin maçı silersen ne olur? Form Güncelle modunda kalır, Güncelle'ye basınca map silinmiş maçı bulamaz ve yazdıkların sessizce kaybolur. sil'e bir denetim ekle:

function sil(id) {    maclar = maclar.filter((mac) => mac.id !== id)    if (id === duzenlenenId) {        formuTemizle()    }    ciz()}

Jinx maçında Düzenle'ye basıp KDA'yı değiştirince form şöyle görünür:

127.0.0.1:5500/index.html

Listede Jinx'in eski KDA'sı duruyor: Güncelle'ye basana kadar durum değişmedi, ekran da değişmedi.

#Filtreleme: diziyi değil görünümü süz

Filtre maclar dizisini değiştirmez; yalnız neyin gösterileceğini seçer. Bu yüzden maclar'ı filtreleyip üstüne yazmayız; yazarsak gizlenen maçlar silinmiş olur.

ciz() içinde ayrı bir gorunenler dizisi kurar, döngüyü onun üzerinde döndürürüz. ciz()'in başını ve boş liste kısmını şöyle değiştir:

function ciz() {    liste.replaceChildren()    const gorunenler = maclar.filter((mac) => filtreKutusu.value === "hepsi" || mac.sonuc === filtreKutusu.value)     for (const mac of gorunenler) {

    if (gorunenler.length === 0) {        const bos = document.createElement("li")        if (maclar.length === 0) {            bos.textContent = "Henüz maç yok. İlk maçını yukarıdan ekle."        } else {            bos.textContent = "Bu filtreye uyan maç yok."        }        liste.append(bos)    }

Seçim değişince yeniden çiz; bu satırı dosyanın en sonundaki ciz() çağrısının üstüne ekle. change olayı, bir <select>'te seçim değiştiğinde çalışır:

filtreKutusu.addEventListener("change", ciz)

Özet satırı bilerek bütün maclar'dan hesaplanıyor: "Bozgunlar" seçiliyken kazanma oranının %0 görünmesini istemeyiz.

127.0.0.1:5500/index.html

#localStorage: sayfa kapansa da unutmasın

Birkaç maç ekle ve F5'e bas. Liste boş; Ders 22'deki dükkânda yenileyince altının sıfırlanması gibi. maclar dizisi programın belleğinde yaşıyordu ve sayfa yenilenince program baştan başladı. Verinin kalıcı olması için onu bir yere yazmamız gerekir. Sunucu ve veritabanı Blok 4 ve 5'in konusu; şimdilik tarayıcının kendi küçük deposu yeter.

Bu derste "depo" dediğimizde bu dolabı kastediyoruz; Ders 7'deki Git deposuyla ilgisi yok. Türkçe geliştirici araçları da ona Yerel depolama der.

#Üç metot

Denemeleri maç günlüğünü bozmadan yapmak için klasöre iki küçük dosya aç. depo.html yalnız betiği yükler:

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <title>Depo denemeleri</title>6    <script src="depo.js" defer></script>7</head>8<body>9    <p>Sonuçlar konsolda.</p>10</body>11</html>

depo.js'e şunu yaz ve 127.0.0.1:5500/depo.html'i açıp konsola bak:

1localStorage.setItem("sihirdarAdi", "Ahri Main")2console.log(localStorage.getItem("sihirdarAdi"))3console.log(localStorage.getItem("yokBoyleBirAnahtar"))4localStorage.removeItem("sihirdarAdi")5console.log(localStorage.getItem("sihirdarAdi"))

Ahri Mainnullnull

• setItem(anahtar, değer): değeri o anahtarın altına yazar. Anahtar zaten varsa eski değerin üstüne yazar.
• getItem(anahtar): değeri okur. Öyle bir anahtar yoksa null döndürür.
• removeItem(anahtar): anahtarı ve değerini siler.

Sonraki denemelerde depo.js'in içeriğini her seferinde yenisiyle değiştir ve sayfayı yenile. depo.html ile maç günlüğü aynı adresten açıldığı için aynı depoyu kullanır; denemelerde maç günlüğünün kullanmayacağı anahtar adları seçtik.

#Yalnız metin

Depoya bir sayı ve bir dizi koy, geri oku:

1localStorage.setItem("seviye", 18)2const seviye = localStorage.getItem("seviye")3console.log(seviye, typeof seviye)4console.log(seviye + 1)5 6localStorage.setItem("favoriler", ["Ahri", "Lux"])7console.log(localStorage.getItem("favoriler"))

18 string181Ahri,Lux

setItem her değeri metne çevirerek saklar; sayı koysan da metin geri gelir. Girdi kutularındaki tuzağın aynısı. Bir dizinin metin hâli de elemanlarının virgülle yan yana yazılmasıdır: köşeli parantezler ve tırnaklar gitti, elinde artık bir dizi değil "Ahri,Lux" metni var. Bir diziyi ya da objeyi saklayacaksan önce JSON metnine çevirmelisin:

1const mac = { sampiyon: "Ahri", kill: 8 }2localStorage.setItem("sonMac", JSON.stringify(mac))3console.log(localStorage.getItem("sonMac"))4const geriGelen = JSON.parse(localStorage.getItem("sonMac"))5console.log(geriGelen.sampiyon, geriGelen.kill + 1)

{"sampiyon":"Ahri","kill":8}Ahri 9

Saklanan şey artık JSON metni; JSON.parse ondan yeniden bir obje kurdu ve kill yine sayı. Maç günlüğünde bu işi iki fonksiyon yapacak:

1const mac = { sampiyon: "Ahri", kill: 8 }2localStorage.setItem("sonMac", mac)3console.log(localStorage.getItem("sonMac"))4const okunan = JSON.parse(localStorage.getItem("sonMac"))

[object Object]Uncaught SyntaxError: "[object Object]" is not valid JSON    at JSON.parse (<anonymous>)    at depo.js:4:21

#Maç günlüğüne kaydetmek ve yüklemek

Şimdi app.js'e dön. Dosyanın en üstüne bir anahtar adı ekle; let duzenlenenId = null satırının altına da bir boş satır bırakıp kaydet fonksiyonunu yaz:

const ANAHTAR = "macGunlugu.maclar"

function kaydet() {    localStorage.setItem(ANAHTAR, JSON.stringify(maclar))}

Anahtarın adına uygulamanın adını koyduk; nedenini birazdan göreceksin. Durumu değiştiren her yerin sonunda, ciz()'den önce kaydet() çağır: submit dinleyicisinde formuTemizle()'nin üstüne ve sil fonksiyonunda ciz()'in üstüne. Yükleme için ilk akla gelen, let maclar = [] satırını şöyle yazmak:

let maclar = JSON.parse(localStorage.getItem(ANAHTAR))

Sayfayı yenile. Konsol kırmızı:

16let maclar = JSON.parse(localStorage.getItem(ANAHTAR))

Uncaught TypeError: Cannot read properties of null (reading 'filter')    at ciz (app.js:40:31)    at app.js:142:1Uncaught TypeError: Cannot read properties of null (reading 'push')    at HTMLFormElement.<anonymous> (app.js:124:16)

İlk açılışta kayıt olmaması normal bir durum, hata değil. Okumayı bir fonksiyona taşı ve null'ı ayrıca karşıla. 16. satırı şöyle değiştir, yukle fonksiyonunu da kaydet'in üstüne yaz:

16let maclar = yukle()

19function yukle() {20    const kayit = localStorage.getItem(ANAHTAR)21    if (kayit === null) {22        return []23    }24    return JSON.parse(kayit)25}

yukle bir fonksiyon bildirimi olduğu için tanımından önceki satırda çağrılabilir (hoisting, Ders 10). Bu hâliyle ilk açılış sorunsuz. Ama bir sorun daha var: kayıt bozulursa?

19function yukle() {20    const kayit = localStorage.getItem(ANAHTAR)21    if (kayit === null) {22        return []23    }24    return JSON.parse(kayit)25}

Uncaught SyntaxError: "undefined" is not valid JSON    at JSON.parse (<anonymous>)    at yukle (app.js:24:17)    at app.js:16:14

yukle'nin son hâli:

19function yukle() {20    const kayit = localStorage.getItem(ANAHTAR)21    if (kayit === null) {22        return []23    }24    try {25        return JSON.parse(kayit)26    } catch (hata) {27        console.warn("Kayıt okunamadı, boş listeyle başlıyorum:", hata.message)28        return []29    }30}

Kayıt okunamadı, boş listeyle başlıyorum: "undefined" is not valid JSON

console.warn konsola sarı bir uyarı yazar. Uygulama boş listeyle açılır ve çalışır; ilk kaydette bozuk metnin üstüne doğru veri yazılır. Bozuk veri kaybolur ama uygulama kurtulur. Depodan gelen veriye de, dışarıdan gelen her veri gibi, körü körüne güvenme.

#Depoya bakmak: Application paneli

F12 → Application sekmesi (Türkçe arayüzde Uygulama) → solda Storage (Depolama) altında Local storage (Yerel depolama) → http://127.0.0.1:5500. Sekme görünmüyorsa sekme satırının sonundaki » işaretine tıkla; yer kalmayan sekmeler orada durur.

Bu sitenin bütün anahtarları ve değerleri bir tabloda durur. Bir satırı seçince değeri alt bölmede görünür: geçerli bir JSON dizisi ya da objesiyse açılır bir ağaç olarak, Ahri,Lux ya da [object Object] gibi JSON olmayan bir metinse düz yazı olarak. Depoya doğru yazıp yazmadığını anlamanın en hızlı yolu bu.

Bir hücreye çift tıklayıp değeri düzenleyebilir, bir satırı seçip Delete ile silebilir, araç çubuğundaki düğmeyle hepsini temizleyebilirsin. Depo denemelerinden kalan seviye, favoriler ve sonMac da orada; işin bitince onları sil. Bozuk kayıt denemesi için de en hızlı araç bu: macGunlugu.maclar'ın değerini çift tıklayıp undefined yap, sayfayı yenile ve yukle'nin sarı uyarısını gör. DevTools sürümden sürüme biraz değişir; düğmelerin yeri farklıysa aradığın adlar aynıdır.

1const form = document.querySelector("#macFormu")2const sampiyonKutusu = document.querySelector("#sampiyon")3const sonucKutusu = document.querySelector("#sonuc")4 5form.addEventListener("submit", (olay) => {6    olay.preventDefault()7    const mac = { sampiyon: sampiyonKutusu.value, sonuc: sonucKutusu.value }8    localStorage.setItem("mac", JSON.stringify(mac))9    console.log("Kayıtlı:", localStorage.getItem("mac"))10})

Kayıtlı: {"sampiyon":"Ahri","sonuc":"zafer"}Kayıtlı: {"sampiyon":"Jinx","sonuc":"bozgun"}Kayıtlı: {"sampiyon":"Lux","sonuc":"zafer"}

#Uygulamanın tamamı

Bütün parçalar yerine oturunca app.js şöyle olmalı. Parçaları anlatılan yerlere yazdıysan dosyan bununla satırı satırına aynıdır; hata izlerindeki satır numaraları da buna göre. Kendi dosyanla karşılaştır.

Fonksiyonların sırası farklıysa da çalışır; ama ANAHTAR, let maclar = yukle() satırından önce durmalı. Sonra tanımlarsan sayfa Uncaught ReferenceError: Cannot access 'ANAHTAR' before initialization hatasıyla açılır: const ile açılan bir kutu, tanımlandığı satırdan önce kullanılamaz.

1const ANAHTAR = "macGunlugu.maclar"2const SONUC_ADI = { zafer: "Zafer", bozgun: "Bozgun" }3 4const form = document.querySelector("#macFormu")5const sampiyonKutusu = document.querySelector("#sampiyon")6const kdaKutusu = document.querySelector("#kda")7const sureKutusu = document.querySelector("#sure")8const sonucKutusu = document.querySelector("#sonuc")9const formHata = document.querySelector("#formHata")10const kaydetDugmesi = document.querySelector("#kaydetDugmesi")11const vazgecDugmesi = document.querySelector("#vazgecDugmesi")12const filtreKutusu = document.querySelector("#filtre")13const ozet = document.querySelector("#ozet")14const liste = document.querySelector("#liste")15 16let maclar = yukle()17let duzenlenenId = null18 19function yukle() {20    const kayit = localStorage.getItem(ANAHTAR)21    if (kayit === null) {22        return []23    }24    try {25        return JSON.parse(kayit)26    } catch (hata) {27        console.warn("Kayıt okunamadı, boş listeyle başlıyorum:", hata.message)28        return []29    }30}31 32function kaydet() {33    localStorage.setItem(ANAHTAR, JSON.stringify(maclar))34}35 36function kdaMetni(mac) {37    if (mac.olum === 0) {38        return "Kusursuz"39    }40    return ((mac.kill + mac.asist) / mac.olum).toFixed(2)41}42 43function kazanmaOrani(tumMaclar) {44    if (tumMaclar.length === 0) {45        return "—"46    }47    const zaferSayisi = tumMaclar.filter((mac) => mac.sonuc === "zafer").length48    return "%" + Math.round((zaferSayisi / tumMaclar.length) * 100)49}50 51function ciz() {52    liste.replaceChildren()53    const gorunenler = maclar.filter((mac) => filtreKutusu.value === "hepsi" || mac.sonuc === filtreKutusu.value)54 55    for (const mac of gorunenler) {56        const satir = document.createElement("li")57        satir.classList.add(mac.sonuc)58 59        const bilgi = document.createElement("span")60        bilgi.textContent = `${SONUC_ADI[mac.sonuc]} · ${mac.sampiyon} · ${mac.kill}/${mac.olum}/${mac.asist} · KDA ${kdaMetni(mac)} · ${mac.sure} dk`61 62        const duzenleDugmesi = document.createElement("button")63        duzenleDugmesi.textContent = "Düzenle"64        duzenleDugmesi.addEventListener("click", () => duzenlemeyeBasla(mac))65 66        const silDugmesi = document.createElement("button")67        silDugmesi.textContent = "Sil"68        silDugmesi.addEventListener("click", () => sil(mac.id))69 70        satir.append(bilgi, duzenleDugmesi, silDugmesi)71        liste.append(satir)72    }73 74    if (gorunenler.length === 0) {75        const bos = document.createElement("li")76        if (maclar.length === 0) {77            bos.textContent = "Henüz maç yok. İlk maçını yukarıdan ekle."78        } else {79            bos.textContent = "Bu filtreye uyan maç yok."80        }81        liste.append(bos)82    }83 84    const zaferSayisi = maclar.filter((mac) => mac.sonuc === "zafer").length85    ozet.textContent = `${maclar.length} maç · ${zaferSayisi} zafer · kazanma oranı ${kazanmaOrani(maclar)}`86}87 88function duzenlemeyeBasla(mac) {89    duzenlenenId = mac.id90    sampiyonKutusu.value = mac.sampiyon91    kdaKutusu.value = `${mac.kill}/${mac.olum}/${mac.asist}`92    sureKutusu.value = mac.sure93    sonucKutusu.value = mac.sonuc94    kaydetDugmesi.textContent = "Güncelle"95    vazgecDugmesi.hidden = false96    sampiyonKutusu.focus()97}98 99function formuTemizle() {100    duzenlenenId = null101    form.reset()102    formHata.textContent = ""103    kaydetDugmesi.textContent = "Kaydet"104    vazgecDugmesi.hidden = true105}106 107function sil(id) {108    maclar = maclar.filter((mac) => mac.id !== id)109    if (id === duzenlenenId) {110        formuTemizle()111    }112    kaydet()113    ciz()114}115 116form.addEventListener("submit", (olay) => {117    olay.preventDefault()118 119    const sampiyon = sampiyonKutusu.value.trim()120    if (sampiyon === "") {121        formHata.textContent = "Şampiyon adı yalnız boşluktan oluşamaz."122        sampiyonKutusu.focus()123        return124    }125 126    const [kill, olum, asist] = kdaKutusu.value.split("/").map((parca) => Number(parca))127    const bilgiler = {128        sampiyon: sampiyon,129        kill: kill,130        olum: olum,131        asist: asist,132        sure: sureKutusu.valueAsNumber,133        sonuc: sonucKutusu.value134    }135 136    if (duzenlenenId === null) {137        maclar.push({ id: Date.now(), ...bilgiler })138    } else {139        maclar = maclar.map((mac) => {140            if (mac.id === duzenlenenId) {141                return { ...mac, ...bilgiler }142            }143            return mac144        })145    }146 147    kaydet()148    formuTemizle()149    ciz()150})151 152vazgecDugmesi.addEventListener("click", formuTemizle)153filtreKutusu.addEventListener("change", ciz)154 155ciz()

Beş maç ekledikten sonra uygulama şöyle görünür:

127.0.0.1:5500/index.html

Sayfayı yenile, tarayıcıyı kapatıp aç: maçlar yerinde. Application panelinde macGunlugu.maclar anahtarının değeri şöyle başlar:

[{"id":1791724265534,"sampiyon":"Ahri","kill":8,"olum":2,"asist":11,"sure":31,"sonuc":"zafer"},{"id":1791724265582,"sampiyon":"Jinx","kill":4,"olum":7,"asist":9,"sure":38,"sonuc":"bozgun"},…

id'ler, eklediğin anın zamanı olduğu için sende farklı olur.

#Görevler

Görevleri C:\kod\mac-gunlugu klasöründe yap. Şampiyon araması maç günlüğünün kendisine eklenir; ötekiler için görevde adı geçen yeni .html ve .js dosyalarını aç. Onlar 127.0.0.1:5500/altin.html gibi adreslerde açılır. Hepsi aynı kökende olduğu için anahtar adlarının başına ders23. koyuyoruz. Önce kendin dene, takılırsan ipuçlarını sırayla aç.

Kesede 450 altın var.

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <title>Altın kesesi</title>6    <script src="altin.js" defer></script>7</head>8<body>9    <h1>Altın kesesi</h1>10    <form id="altinFormu">11        <label>Kazandığın altın12            <input id="miktar" type="number" required min="1" max="5000">13        </label>14        <button type="submit">Ekle</button>15    </form>16    <p id="kese">Kesede 0 altın var.</p>17</body>18</html>

1const altinFormu = document.querySelector("#altinFormu")2const miktarKutusu = document.querySelector("#miktar")3const kese = document.querySelector("#kese")4 5let toplamAltin = 06 7altinFormu.addEventListener("submit", (olay) => {8    olay.preventDefault()9    toplamAltin = toplamAltin + miktarKutusu.valueAsNumber10    kese.textContent = `Kesede ${toplamAltin} altın var.`11    altinFormu.reset()12})

Tekrar hoş geldin, Ahri Main!

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <title>Sihirdar</title>6    <script src="sihirdar.js" defer></script>7</head>8<body>9    <p id="selam">Merhaba, yabancı.</p>10    <form id="adFormu">11        <label>Sihirdar adın12            <input id="ad" required maxlength="16">13        </label>14        <button type="submit">Hatırla</button>15    </form>16    <button id="unutDugmesi" type="button">Unut</button>17</body>18</html>

1const ANAHTAR = "ders23.sihirdarAdi"2const selam = document.querySelector("#selam")3const adFormu = document.querySelector("#adFormu")4const adKutusu = document.querySelector("#ad")5const unutDugmesi = document.querySelector("#unutDugmesi")6 7function selamla() {8    const ad = localStorage.getItem(ANAHTAR)9    if (ad === null) {10        selam.textContent = "Merhaba, yabancı."11    } else {12        selam.textContent = `Tekrar hoş geldin, ${ad}!`13    }14}15 16adFormu.addEventListener("submit", (olay) => {17    olay.preventDefault()18    const ad = adKutusu.value.trim()19    if (ad === "") {20        selam.textContent = "Ad yalnız boşluktan oluşamaz."21        return22    }23    localStorage.setItem(ANAHTAR, ad)24    adFormu.reset()25    selamla()26})27 28unutDugmesi.addEventListener("click", () => {29    localStorage.removeItem(ANAHTAR)30    selamla()31})32 33selamla()