Tarayıcıdan veri çekmek: fetch ve API

Şimdiye kadar sayfalarındaki verinin hepsini sen yazdın: şampiyon dizileri, maç günlüğü kayıtları. Gerçek uygulamalar veriyi çoğu zaman başka bir yerden, bir sunucudan alır. Bu derste Riot'un herkese açık veri deposu Data Dragon'dan 170'ten fazla şampiyonun güncel listesini tarayıcıda çekecek, kartlara dökecek, arama kutusu ve rol filtresi ekleyeceksin.

Yolda internetin üç gerçeğiyle tanışacaksın: istek zaman alır, bazen hiç sonuçlanmaz ve tarayıcı her siteden veri okumana izin vermez. İyi bir sayfa bu üçünü de kullanıcıya açıkça söyler.

#API: programlar arasındaki kapı

Şampiyon kartları yapmak istiyorsun. Bütün şampiyonların adını, unvanını ve rolünü elle bir diziye yazabilirsin. Ama 170'ten fazla şampiyon var, her yamada bir şeyler değişiyor ve elle yazdığın liste birkaç hafta içinde eskiyor. Doğrusu, bu bilgiyi zaten tutan yerden, yani Riot'tan istemek.

Ders 15'te bunun ilk örneğini gördün: programın bir adrese istek attı, cevap olarak JSON aldı. Bir programın başka programlara böyle kurallı bir kapı açmasına API denir.

Web API'lerinde dükkân ekranındaki her düğme bir adrestir. Belli bir veriyi veren adrese uç nokta denir.

Riot oyunun sabit verilerini (şampiyonlar, eşyalar, sihirdar büyüleri, simgeler) Data Dragon'da herkese açık tutar; anahtar, hesap ya da kayıt istemez. Bütün adresleri https://ddragon.leagueoflegends.com ile başlar. Bu derste iki uç noktasını kullanacağız:

İkinci adreste iki parça değişir: 16.20.1 sürüm, tr_TR dil kodu (Türkçe, Türkiye). Sürümü elle yazarsan bir sonraki yamada eskir; bu yüzden önce sürüm listesini isteyip en yenisini alacak, adresi onunla kuracağız. Riot'un belgesi bir uyarı da yapıyor: Data Dragon her yamadan sonra elle güncellendiği için yeni yamanın çıktığı gün hemen güncellenmeyebilir.

#champion.json'un içine bakmak

Bu ders için C:\kod\sampiyon-listesi adında yeni bir proje klasörü oluştur ve VS Code'da File → Open Folder ile aç. Kod yazmadan önce cevaba gözünle bak: Ders 15'te versions.json'u tarayıcıda açmıştın, şimdi şampiyon listesini aç. Adresteki sürümü versions.json'un ilk elemanıyla değiştir:

https://ddragon.leagueoflegends.com/cdn/16.20.1/data/tr_TR/champion.json

Ekran bir anda yazıyla dolar: yaklaşık 163 kB'lık tek bir JSON metni. Chrome, Edge ya da Brave'de üstteki Pretty-print kutusunu işaretlersen girintili görünür. Yapısı şöyle; Ahri'nin kaydını kısalttık, … olan yerlerde başka alanlar ve 171 şampiyon daha var:

{    "type": "champion",    "format": "standAloneComplex",    "version": "16.20.1",    "data": {        "Aatrox": { … },        "Ahri": {            "version": "16.20.1",            "id": "Ahri",            "key": "103",            "name": "Ahri",            "title": "Dokuz Kuyruklu Tilki",            "blurb": "Ruhlar âleminin sihrine doğuştan bağlı olan Ahri, …",            "info": { "attack": 3, "defense": 4, "magic": 8, "difficulty": 5 },            "image": { "full": "Ahri.png", "sprite": "champion0.png", … },            "tags": ["Mage", "Assassin"],            "partype": "Mana",            "stats": { "hp": 590, "hpperlevel": 104, "mp": 418, … }        },        …    }}

Dört şeye dikkat et:

• data bir dizi değil, obje. Anahtarları şampiyonların kimliği (id). Kart dizmek için dizi gerekir: Object.values(veri.data) (Ders 12) bütün değerleri sırayla bir diziye koyar.
• id ile name farklı olabilir. id İngilizce harfli, boşluksuz bir kimliktir; ekrana name'i yaz. Wukong'un kimliği MonkeyKing; Nunu'nun adı Türkçe dosyada Nunu ve Willump, kimliği Nunu.
• tags Türkçe dosyada da İngilizce kalır: Fighter, Tank, Mage, Assassin, Marksman, Support. Bunlar ekran yazısı değil, kodun süzme yaparken kullanacağı etiketler. Türkçelerini kendimiz yazacağız.
• title ve blurb dile göre değişir. Adresteki dil kodu en_US olursa aynı alanlar İngilizce gelir:

Yolları sayfa yazmadan denemek için Node yeter. Proje klasöründe deneme.js adında bir dosya aç; bu dersteki küçük Node denemelerini hep bu dosyada yapacaksın (her seferinde içini sil). İçine champion.json'un küçük bir kopyasını obje olarak yaz ve VS Code'un terminalinde çalıştır:

1const veri = {2    type: "champion",3    version: "16.20.1",4    data: {5        Ahri: {6            name: "Ahri",7            title: "Dokuz Kuyruklu Tilki",8            tags: ["Mage", "Assassin"]9        },10        Garen: {11            name: "Garen",12            title: "Demacia'nın Kudreti",13            tags: ["Fighter", "Tank"]14        },15        Jinx: {16            name: "Jinx",17            title: "Delifişek",18            tags: ["Marksman"]19        }20    }21}22 23console.log(veri.version)24console.log(veri.data.Ahri.title)25console.log(veri.data.Garen.tags[1])26console.log(Object.keys(veri.data))27 28const sampiyonlar = Object.values(veri.data)29console.log(sampiyonlar.length)30console.log(sampiyonlar[2].name)

PS C:\kod\sampiyon-listesi> node deneme.js16.20.1Dokuz Kuyruklu TilkiTank[ 'Ahri', 'Garen', 'Jinx' ]3Jinx

veri.data.Garen.tags[1] yolunu soldan sağa oku: veri, onun içindeki data kutusu, onun içindeki Garen, Garen'in tags dizisi, dizinin 1 numaralı elemanı. Gerçek dosyada da yol aynı; yalnız data'nın içinde 173 şampiyon var.

#Tarayıcıda fetch: Node'dan farkı ne?

fetch tarayıcının da yerleşik bir fonksiyonu; Ders 15'teki kod tarayıcıda da çalışır. Aynı klasörde iki dosya oluştur. Önce sayfanın iskeleti:

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>Şampiyon Listesi</title>7    <script src="uygulama.js" defer></script>8</head>9<body>10    <h1>Şampiyonlar</h1>11</body>12</html>

Sonra uygulama.js. Ders 15'teki jsonGetir'i aynen yaz ve onu kullanan bir yukle fonksiyonu ekle:

1async function jsonGetir(adres) {2    const yanit = await fetch(adres)3    if (!yanit.ok) {4        throw new Error("İstek başarısız: " + yanit.status)5    }6    const veri = await yanit.json()7    return veri8}9 10async function yukle() {11    const surumler = await jsonGetir("https://ddragon.leagueoflegends.com/api/versions.json")12    const surum = surumler[0]13    const veri = await jsonGetir(`https://ddragon.leagueoflegends.com/cdn/${surum}/data/tr_TR/champion.json`)14    const sampiyonlar = Object.values(veri.data)15    console.log("En yeni sürüm:", surum)16    console.log("Şampiyon sayısı:", sampiyonlar.length)17    console.log("İlk şampiyon:", sampiyonlar[0].name, "-", sampiyonlar[0].title)18}19 20yukle()

En yeni sürüm: 16.20.1Şampiyon sayısı: 173İlk şampiyon: Aatrox - Darkin Kılıcı

Sayfayı Ders 18'deki gibi Live Server ile aç: index.html'e sağ tıkla, Open with Live Server'ı seç. Tarayıcıda http://127.0.0.1:5500/index.html açılır. Sayfada yalnız başlık var; asıl iş görünmüyor. F12 ile geliştirici araçlarını aç, Console sekmesine geç: yukarıdaki üç satır oradadır. Sürüm ve sayı sende farklı olabilir, Riot her yamada listeyi günceller.

İkinci isteğin adresi birincinin cevabına bağlı (sürümü bilmeden şampiyon dosyasının adresini kuramazsın); bu yüzden iki await sırayla bekler. Kod Ders 15'tekiyle neredeyse aynı, ama ortam farklı:

Tarayıcıda yakalanmayan bir hata Node'daki gibi programı kapatmaz: yalnız o fonksiyon yarıda kalır, sayfa açık durur ve konsola kırmızı bir satır düşer. Bu iyi bir şey, ama hata sessizce geçer: konsolu açmazsan bir sorun olduğunu fark etmezsin. Bu yüzden tarayıcıda çalışırken geliştirici araçları hep açık kalsın.

1async function yukle() {2    const yanit = fetch("https://ddragon.leagueoflegends.com/api/versions.json")3    const surumler = await yanit.json()4    console.log(surumler[0])5}6 7yukle()

Uncaught (in promise) TypeError: yanit.json is not a function    at yukle (uygulama.js:3:34)    at uygulama.js:7:1

1async function yukle() {2    const yanit = await fetch("https://ddragon.leagueoflegends.com/cdn/16.20.1/data/tr_TR/champion.json")3    const veri = await yanit.text()4    const sampiyonlar = Object.values(veri.data)5    console.log(sampiyonlar.length)6}7 8yukle()

Uncaught (in promise) TypeError: Cannot convert undefined or null to object    at Object.values (<anonymous>)    at yukle (uygulama.js:4:32)

#Network sekmesinde isteği incelemek

Console, kodunun ne yazdığını gösterir. Network sekmesi ise tarayıcının gerçekte ne gönderip ne aldığını gösterir. Ders 18'de ona ilk kez baktın; şimdi bir isteği baştan sona okuyacağız. Aşağıdaki adımlardaki numaralar şekildeki numaralarla aynı.

Size sütununa bak: champion.json için yaklaşık 37 kB yazar, oysa dosyanın kendisi 163 kB. Sunucu dosyayı sıkıştırıp gönderir (Response headers'taki Content-Encoding: gzip satırı bunu söyler), tarayıcı açar; yolda giden, küçük olandır. Network'ün kendi ayarlarını açarsan (araç çubuğunun en sağındaki dişli simgesi) Big request rows seçeneğiyle Size hücresinde iki sayıyı birden görürsün: üstteki ağdan gelen boyut, alttaki dosyanın asıl boyutu.

#Yükleniyor, hata ve boş durumları

Sen kodu yazarken internetin hızlı, sunucu ayakta. Metroda telefondan giren biri için champion.json saniyeler sürebilir; tünelde hiç gelmeyebilir. Boş bir sayfaya bakan kullanıcı "bozuk" der ve çıkar. İyi bir arayüz her an dört durumdan birindedir ve hangisinde olduğunu kullanıcıya söyler.

Önce sayfaya durumu yazacak yeri aç. index.html'in <body> kısmını şöyle değiştir:

9<body>10    <header>11        <h1>Şampiyonlar</h1>12        <p id="surum"></p>13    </header>14    <main>15        <p id="durum" aria-live="polite">Şampiyonlar yükleniyor…</p>16        <ul id="liste" class="kartlar"></ul>17    </main>18</body>

İlk durum metni HTML'de yazılı: JavaScript daha çalışmadan, sayfa açılır açılmaz "yükleniyor" görünür. aria-live="polite" niteliği ekran okuyucuya "bu yazı değişince yeni hâlini oku" der (Ders 19'daki erişilebilirlik); görme engelli bir kullanıcı da yüklemenin bittiğini ya da hatayı duyar.

Şimdi uygulama.js'i güncelle. jsonGetir aynı kalıyor; yukle'yi try / catch ile sar ve dosyanın başına öğeleri bulan satırları ekle:

1const surumYazisi = document.querySelector("#surum")2const durum = document.querySelector("#durum")3const liste = document.querySelector("#liste")4 5let sampiyonlar = []6let surum = ""7 8// jsonGetir fonksiyonu burada, değişmedi9 10async function yukle() {11    durum.textContent = "Şampiyonlar yükleniyor…"12    durum.classList.remove("hata")13    try {14        const surumler = await jsonGetir("https://ddragon.leagueoflegends.com/api/versions.json")15        surum = surumler[0]16        const veri = await jsonGetir(`https://ddragon.leagueoflegends.com/cdn/${surum}/data/tr_TR/champion.json`)17        sampiyonlar = Object.values(veri.data)18        surumYazisi.textContent = `Yama ${surum} · ${sampiyonlar.length} şampiyon`19        ciz()20    } catch (hata) {21        console.error(hata)22        durum.textContent = "Şampiyonlar yüklenemedi. İnternet bağlantını denetleyip sayfayı yenile."23        durum.classList.add("hata")24    }25}26 27function ciz() {28    durum.textContent = `${sampiyonlar.length} şampiyon yüklendi.`29}30 31yukle()

• sampiyonlar ve surum en üstte let ile açıldı, çünkü birazdan başka fonksiyonlar da (ciz, kart yapan fonksiyon) onları okuyacak (Ders 10'daki kapsam). yukle içinde const ile açsaydın dışarıdan görünmezlerdi.
• ciz şimdilik yalnız sayıyı yazıyor; bir sonraki bölümde kartları çizecek.
• Hata iki yere gidiyor: console.error ayrıntıyı konsola kırmızı yazar (geliştirici için), durum anlaşılır bir cümleyi ekrana yazar (kullanıcı için). Kullanıcıya TypeError: Failed to fetch göstermek yerine ne yapacağını söylemek daha iyidir.
• hata sınıfının kırmızı rengini birazdan stil dosyasında vereceğiz. Durum her değiştiğinde önce eski hata sınıfını kaldırmayı unutma; yoksa başarılı bir yüklemeden sonra da yazı kırmızı kalır.

Dersin sonunda, arama kutusu da eklenmiş hâliyle, üç durum şöyle görünecek:

Durumları kendi gözünle gör. Network sekmesindeki Disable cache kutusu işaretli olsun; yoksa tarayıcı dosyaları önbellekten verir, ne yavaşlama ne hata görürsün.

• Yükleniyor: Network sekmesinde No throttling yazan menüden 3G'yi seç ve sayfayı yenile. Her şey yavaşlar, "Şampiyonlar yükleniyor…" yazısı birkaç saniye ekranda kalır. Denemeden sonra menüyü yeniden No throttling yap; yoksa bu sekmede açtığın her sayfa yavaş gelir.
• Hata: champion.json adresindeki ${surum} yerine geçici olarak 16.99.1 yaz ve kaydet. Data Dragon 403 döndürür, jsonGetir hata fırlatır, ekranda kırmızı mesaj çıkar. Konsolda iki kırmızı satır görürsün; ne anlama geldiklerini Sık hatalar bölümündeki ilk kart anlatıyor. Sonra adresi geri al.
• İnternetsiz: Wi-Fi'ı kapatıp sayfayı yenile. Live Server senin bilgisayarında çalıştığı için sayfa açılır ama Data Dragon'a ulaşılamaz. Network'teki Offline seçeneği bu iş için uygun değil: Live Server'a giden isteği de keser, sayfanın kendisi de açılmaz.
• Boş: Arama kutusunu birazdan, Arama kutusu ve rol filtresi bölümünde ekleyeceğiz; olmayan bir ad aratınca bu durum çıkacak.

#Şampiyonları kartlara dökmek

Veri elimizde. Şimdi her şampiyon için bir kart yapacağız: resim, ad, unvan ve rol rozetleri. Ders 22'de öğrendiğin createElement ve append yeter. Önce yolun tamamına bir bak:

Bir şampiyon objesi alıp bir <li> kartı döndüren fonksiyonu yaz. Rol etiketlerinin Türkçesi için de bir obje gerekiyor:

1const ROL_ADLARI = {2    Assassin: "Suikastçı",3    Fighter: "Dövüşçü",4    Mage: "Büyücü",5    Marksman: "Nişancı",6    Support: "Destek",7    Tank: "Tank"8}9 10function kartOlustur(sampiyon) {11    const kart = document.createElement("li")12    kart.classList.add("kart")13 14    const resim = document.createElement("img")15    resim.src = `https://ddragon.leagueoflegends.com/cdn/${surum}/img/champion/${sampiyon.image.full}`16    resim.alt = ""17    resim.width = 9618    resim.height = 9619 20    const ad = document.createElement("h2")21    ad.textContent = sampiyon.name22 23    const unvan = document.createElement("p")24    unvan.textContent = sampiyon.title25 26    const roller = document.createElement("p")27    roller.classList.add("roller")28    for (const rol of sampiyon.tags) {29        const rozet = document.createElement("span")30        rozet.textContent = ROL_ADLARI[rol]31        roller.append(rozet)32    }33 34    kart.append(resim, ad, unvan, roller)35    return kart36}

• Resim adresi: Data Dragon'da şampiyon simgeleri …/cdn/<sürüm>/img/champion/<dosya adı> adresindedir. Dosya adını kendin uydurma, verideki image.full alanından al (aşağıdaki hata kartına bak).
• resim.alt = "": Kartta adı zaten yazılı. Boş alt, ekran okuyucuya "bu resim süs, atla" der; yoksa her kartta ad iki kez okunur.
• resim.width ve resim.height: HTML'deki width="96" ve height="96" niteliklerinin aynısı. Resim gelmeden önce yerini ayırır; neden önemli olduğunu geç yükleme bölümünde göreceksin.
• textContent: Metinler Riot'un sunucusundan geliyor. innerHTML kullansaydın, bir gün o metinlerde bir etiket olsa tarayıcı onu çalıştırırdı (Ders 22). Dışarıdan gelen her metin textContent ile yazılır.
• ROL_ADLARI[rol]: Hiç değişmeyecek bir ayar listesi olduğu için adı büyük harfle (Ders 17'deki DUSMANLAR gibi). rol bir değişken olduğu için köşeli parantezle okunur (Ders 4): "Mage" için "Büyücü" gelir.

ciz'i de kartları çizecek hâle getir:

1function ciz() {2    liste.textContent = ""3    liste.append(...sampiyonlar.map(kartOlustur))4    durum.textContent = `${sampiyonlar.length} şampiyon gösteriliyor.`5}

liste.textContent = "" listenin içini boşaltır. sampiyonlar.map(kartOlustur) her şampiyon için kartOlustur'u çağırır ve kartlardan oluşan bir dizi verir (Ders 11). append tek tek öğe ister, dizi değil; baştaki ... diziyi açıp elemanlarını tek tek verir (Ders 12'deki yayma).

Görünüş için klasöre stil.css dosyasını ekle ve index.html'in <head> kısmına, <script> satırının üstüne <link rel="stylesheet" href="stil.css"> yaz. Izgara Ders 21'deki satır; renkleri istediğin gibi değiştirebilirsin:

1* {2    box-sizing: border-box;3}4 5body {6    margin: 0;7    font-family: system-ui, sans-serif;8    background: #0f1420;9    color: #e8e6df;10}11 12header, main, footer {13    max-width: 1100px;14    margin: 0 auto;15    padding: 0 16px;16}17 18h1 {19    margin: 24px 0 4px;20    color: #c8aa6e;21}22 23#surum, #durum, footer {24    color: #9aa3b5;25}26 27#durum.hata {28    color: #ff8f8f;29}30 31.araclar {32    display: flex;33    flex-wrap: wrap;34    gap: 12px;35}36 37.araclar label {38    display: flex;39    flex-direction: column;40    gap: 4px;41}42 43input, select {44    font: inherit;45    padding: 8px 10px;46    border: 1px solid #3a4560;47    border-radius: 8px;48    background: #182033;49    color: inherit;50}51 52.kartlar {53    display: grid;54    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));55    gap: 12px;56    padding: 0;57    list-style: none;58}59 60.kart {61    padding: 14px 10px;62    border: 1px solid #2a3550;63    border-radius: 12px;64    background: #182033;65    text-align: center;66}67 68.kart h2 {69    margin: 8px 0 2px;70    font-size: 16px;71}72 73.kart p {74    margin: 0;75    font-size: 13px;76    color: #9aa3b5;77}78 79.roller span {80    display: inline-block;81    margin: 8px 2px 0;82    padding: 2px 8px;83    border-radius: 999px;84    background: #2a3550;85    font-size: 12px;86    color: #e8e6df;87}88 89footer {90    margin-top: 32px;91    padding-bottom: 24px;92    font-size: 12px;93}

Sayfayı yenile. Arama kutusu ve rol menüsü bir sonraki bölümde gelecek; onlar eklenince sayfa şöyle görünecek:

127.0.0.1:5500/index.html

1resim.src = `https://ddragon.leagueoflegends.com/cdn/${surum}/img/champion/${sampiyon.name}.png`

#Arama kutusu ve rol filtresi

173 kartın içinde Thresh'i bulmak için kaydırmak yorucu. Bir arama kutusu (ad ya da unvan) ve bir rol menüsü ekleyelim. index.html'de <main>'in en başına, #durum paragrafının üstüne şunu koy:

16<div class="araclar">17    <label>18        Ara19        <input type="search" id="arama" placeholder="Ahri, tilki…">20    </label>21    <label>22        Rol23        <select id="rol">24            <option value="">Hepsi</option>25            <option value="Assassin">Suikastçı</option>26            <option value="Fighter">Dövüşçü</option>27            <option value="Mage">Büyücü</option>28            <option value="Marksman">Nişancı</option>29            <option value="Support">Destek</option>30            <option value="Tank">Tank</option>31        </select>32    </label>33</div>

Her seçeneğin value'su verideki İngilizce etiket, görünen yazısı Türkçe. Kod value ile çalışır, kullanıcı yazıyı görür. "Hepsi"nin value'su boş metin: "rol süzme" demek.

#Türkçe harf tuzağı yine karşında

Aramayı büyük-küçük harfe duyarsız yapmak için iki tarafı da küçültüp includes ile karşılaştıracaksın. Hangi kuralla küçülteceksin? Ders 9'da kural şuydu: metin hangi dildeyse onun kuralını kullan. Burada iki dil aynı kutuda: unvanlar Türkçe (Kumların İmparatoru), adlar İngilizce kökenli (Irelia, Jarvan IV). İkisini de dene:

1console.log("Irelia".toLowerCase())2console.log("Irelia".toLocaleLowerCase("tr"))3console.log("Kumların İmparatoru".toLowerCase().includes("imparator"))4console.log("Kumların İmparatoru".toLocaleLowerCase("tr").includes("imparator"))

ireliaıreliafalsetrue

Türkçe kural Irelia'yı ırelia yapıyor: kullanıcı irelia yazarsa bulunmaz. İngilizce kural da İmparatoru'nu bozuyor: İ küçülünce iki karakterli bir i̇ çıkar ve imparator eşleşmez. Hangisini seçersen bir yarısı bozuluyor.

Çözüm: iki tarafı da önce Türkçe kuralla küçült, sonra bütün ı harflerini i yap. Böylece "ı mı yazdı, i mi?" farkı aramada önemini yitirir:

1function aramaBicimi(metin) {2    return metin.toLocaleLowerCase("tr").replaceAll("ı", "i")3}4 5console.log(aramaBicimi("Irelia"))6console.log(aramaBicimi("İRELİA"))7console.log(aramaBicimi("Jarvan IV"))8console.log(aramaBicimi("Kumların İmparatoru"))

ireliaireliajarvan ivkumlarin imparatoru

Kullanıcı irelia, IRELIA ya da İrelia yazsın; şampiyonun adı Irelia olsun: hepsi aynı biçime iner. Aramada iki tarafa da aynı fonksiyonu uygulamak şart; yalnız birine uygularsan yine eşleşmez.

#Süzme fonksiyonu

Bir şampiyonun aramaya ve role uyup uymadığını söyleyen fonksiyonu DOM'dan ayrı yaz. Böylece onu sayfa açmadan, Node'da deneyebilirsin:

1function aramaBicimi(metin) {2    return metin.toLocaleLowerCase("tr").replaceAll("ı", "i")3}4 5function uyuyorMu(sampiyon, aranan, rol) {6    const metin = aramaBicimi(`${sampiyon.name} ${sampiyon.title}`)7    const metinUyuyor = metin.includes(aramaBicimi(aranan))8    const rolUyuyor = rol === "" || sampiyon.tags.includes(rol)9    return metinUyuyor && rolUyuyor10}11 12const ornekler = [13    { name: "Ahri", title: "Dokuz Kuyruklu Tilki", tags: ["Mage", "Assassin"] },14    { name: "Irelia", title: "Bıçakların Dansı", tags: ["Fighter", "Assassin"] },15    { name: "Leona", title: "Seher Işığı", tags: ["Tank", "Support"] },16    { name: "Lux", title: "Işık Leydisi", tags: ["Mage", "Support"] }17]18 19function adlar(aranan, rol) {20    return ornekler.filter((sampiyon) => uyuyorMu(sampiyon, aranan, rol)).map((sampiyon) => sampiyon.name)21}22 23console.log(adlar("", ""))24console.log(adlar("IRELIA", ""))25console.log(adlar("ışık", ""))26console.log(adlar("ışı", ""))27console.log(adlar("", "Support"))28console.log(adlar("a", "Mage"))29console.log(adlar("teemo", ""))

[ 'Ahri', 'Irelia', 'Leona', 'Lux' ][ 'Irelia' ][ 'Lux' ][ 'Leona', 'Lux' ][ 'Leona', 'Lux' ][ 'Ahri' ][]

Satır satır sınırları dene:

• Boş arama her metnin içinde vardır ("lux".includes("") true verir); boş arama ve "Hepsi" bütün listeyi getirir.
• ışık yalnız Lux'u buldu, Leona'yı bulmadı. Leona'nın unvanı Seher Işığı: Türkçede ışık sözcüğü ek alınca ışığı olur ve k harfi ğ'ye döner. Arama harf harf eşleştirir; ışı yazınca ikisi de çıkar.
• Rol koşulu includes ile: Leona'nın etiketleri ["Tank", "Support"]; rolü ikinci sırada olsa da bulunur. tags[0] === rol yazsaydın Lux, Leona gibi destekleri kaçırırdın.
• teemo hiçbir şeye uymadı ve boş dizi geldi. Sayfada bu, boş durumdur.

Şimdi uyuyorMu'yu ve aramaBicimi'yi uygulama.js'e taşı ve ciz'i süzerek çizecek hâle getir. Dosyanın başına iki öğeyi, sonuna iki olay dinleyicisini ekle:

1const aramaKutusu = document.querySelector("#arama")2const rolSecimi = document.querySelector("#rol")3 4function ciz() {5    if (sampiyonlar.length === 0) {6        return7    }8    const aranan = aramaKutusu.value.trim()9    const rol = rolSecimi.value10    const gorunenler = sampiyonlar.filter((sampiyon) => uyuyorMu(sampiyon, aranan, rol))11 12    liste.textContent = ""13    liste.append(...gorunenler.map(kartOlustur))14 15    if (gorunenler.length === 0) {16        durum.textContent = "Bu aramaya uyan şampiyon yok."17    } else {18        durum.textContent = `${sampiyonlar.length} şampiyondan ${gorunenler.length} tanesi gösteriliyor.`19    }20}21 22aramaKutusu.addEventListener("input", ciz)23rolSecimi.addEventListener("change", ciz)

Her harf yazıldığında ve her rol seçildiğinde ciz baştan çalışır: tam listeden süzer, listeyi boşaltır, kalanları çizer, sayacı günceller. Veriyi bir kez çektik; süzme her seferinde bellekteki sampiyonlar dizisinden yapılıyor, yeni istek gitmiyor. trim() kullanıcının yanlışlıkla bıraktığı boşlukları atar (Ders 9).

En baştaki if, Ders 6'daki erken çıkış: veri daha gelmediyse ciz hiçbir şey yapmaz. Neden gerekli? Arama kutusu sayfa açılır açılmaz yazılabilir. Veri yüklenirken ya da yükleme başarısız olduktan sonra biri kutuya yazarsa ciz boş diziden süzer, "Bu aramaya uyan şampiyon yok." yazar ve ekrandaki "yükleniyor" ya da hata mesajını siler.

Denedik: o üç satır yokken, kırmızı hata mesajı ekrandayken kutuya a yazınca mesaj "Bu aramaya uyan şampiyon yok." oldu. Kullanıcı internetinin gittiğini değil, aradığı şampiyonun olmadığını sanar; boş durumla hatayı karıştıran sayfanın ta kendisi. Erken çıkışla hata mesajı yerinde kalır. Yüklenirken yazılan arama da boşa gitmez: veri gelince yukle ciz'i çağırır, o da kutudaki yazıyla süzer.

127.0.0.1:5500/index.html

#Resimleri geç yüklemek

Sayfa açılınca tarayıcı 173 kartın hepsini oluşturur ve her <img> için Data Dragon'a bir istek atar. Denedik: bu sürümde 173 simgenin toplamı yaklaşık 4,9 milyon bayt, yani 5 MB'a yakın. JSON'un ağdan gelen hâli ise 37 kB. Kullanıcı ekranda belki 12 kart görüyor; kalan 160'tan fazla resim için mobil verisini harcamak boşuna.

Çözüm tek bir nitelik: loading="lazy". Tarayıcıya "bu resmi şimdi indirme, kullanıcı ona yaklaşınca indir" der.

kartOlustur'daki resim satırlarına bir satır ekle:

1const resim = document.createElement("img")2resim.src = `https://ddragon.leagueoflegends.com/cdn/${surum}/img/champion/${sampiyon.image.full}`3resim.alt = ""4resim.width = 965resim.height = 966resim.loading = "lazy"

HTML'de yazsaydın <img src="…" alt="" width="96" height="96" loading="lazy"> olurdu; resim.loading = "lazy" aynı niteliği JavaScript'ten koyar.

Tarayıcı resmi tam ekrana girdiği anda değil, biraz önce ister; böylece kaydırırken boş kart görmezsin. Ne kadar önce isteyeceğine tarayıcı kendisi karar verir. Chrome 153 ile denedik: 1000 × 760 piksellik bir pencerede ilk açılışta 173 resmin 48'i istendi, sayfanın sonuna kadar kaydırınca kalan 125'i geldi. Telefon boyutunda (390 × 844) ilk açılışta yalnız 18 resim istendi. loading="lazy" olmadan ise 173'ü birden istenir.

Bağlantı yavaşladıkça tarayıcı daha uzaktaki resimleri de önceden ister, çünkü her resim daha geç gelir. Aynı pencerede Network'ün kısma menüsünden Slow 4G seçince ilk açılışta 78, 3G seçince 168 resim istendi.

Kendin ölç: Network sekmesinde Img süzgecini seç ve sayfayı yenile. Panelin en altındaki sayaç, süzgeçten kaç isteğin geçtiğini yazar (48 / 54 requests gibi). Sonra sayfayı yavaşça aşağı kaydır: listeye yeni .png satırları eklenir, sayı artar. resim.loading = "lazy" satırını silip yenilersen 173'ünün birden geldiğini görürsün.

width ve height neden önemli? Resim gelmeden önce tarayıcı onun ne kadar yer kaplayacağını bilmezse resme hiç yer ayırmaz; resim gelince kart büyür ve altındaki her şey aşağı kayar. Okumakta olduğun yazı bir anda zıplar. Boyutları baştan verirsen yer ayrılır, hiçbir şey kaymaz.

Geç yüklemede bu daha da önemli: boyutu bilinmeyen resim gelene kadar sıfır yükseklikte durur, kartlar kısa çizilir ve tarayıcı ekrana yakın sandığı fazladan resimleri de ister. Denedik: aynı pencerede width ve height satırlarını silince ilk açılışta 48 yerine 72 resim istendi.

#Dosyaların son hâli

Bütün parçalar yerinde. index.html şöyle olmalı (en alttaki not, Riot'un istediği hayran projesi notu):

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>Şampiyon Listesi</title>7    <link rel="stylesheet" href="stil.css">8    <script src="uygulama.js" defer></script>9</head>10<body>11    <header>12        <h1>Şampiyonlar</h1>13        <p id="surum"></p>14    </header>15    <main>16        <div class="araclar">17            <label>18                Ara19                <input type="search" id="arama" placeholder="Ahri, tilki…">20            </label>21            <label>22                Rol23                <select id="rol">24                    <option value="">Hepsi</option>25                    <option value="Assassin">Suikastçı</option>26                    <option value="Fighter">Dövüşçü</option>27                    <option value="Mage">Büyücü</option>28                    <option value="Marksman">Nişancı</option>29                    <option value="Support">Destek</option>30                    <option value="Tank">Tank</option>31                </select>32            </label>33        </div>34        <p id="durum" aria-live="polite">Şampiyonlar yükleniyor…</p>35        <ul id="liste" class="kartlar"></ul>36    </main>37    <footer>38        <p>Şampiyon Listesi was created under Riot Games' "Legal Jibber Jabber" policy using assets owned by Riot Games. Riot Games does not endorse or sponsor this project.</p>39    </footer>40</body>41</html>

uygulama.js'in tamamı. Kendi dosyanı bununla karşılaştır; sıra önemli: öğeleri bulan satırlar en üstte, olay dinleyicileri ve yukle() çağrısı en altta.

1const surumYazisi = document.querySelector("#surum")2const durum = document.querySelector("#durum")3const liste = document.querySelector("#liste")4const aramaKutusu = document.querySelector("#arama")5const rolSecimi = document.querySelector("#rol")6 7const ROL_ADLARI = {8    Assassin: "Suikastçı",9    Fighter: "Dövüşçü",10    Mage: "Büyücü",11    Marksman: "Nişancı",12    Support: "Destek",13    Tank: "Tank"14}15 16let sampiyonlar = []17let surum = ""18 19async function jsonGetir(adres) {20    const yanit = await fetch(adres)21    if (!yanit.ok) {22        throw new Error("İstek başarısız: " + yanit.status)23    }24    const veri = await yanit.json()25    return veri26}27 28async function yukle() {29    durum.textContent = "Şampiyonlar yükleniyor…"30    durum.classList.remove("hata")31    try {32        const surumler = await jsonGetir("https://ddragon.leagueoflegends.com/api/versions.json")33        surum = surumler[0]34        const veri = await jsonGetir(`https://ddragon.leagueoflegends.com/cdn/${surum}/data/tr_TR/champion.json`)35        sampiyonlar = Object.values(veri.data)36        surumYazisi.textContent = `Yama ${surum} · ${sampiyonlar.length} şampiyon`37        ciz()38    } catch (hata) {39        console.error(hata)40        durum.textContent = "Şampiyonlar yüklenemedi. İnternet bağlantını denetleyip sayfayı yenile."41        durum.classList.add("hata")42    }43}44 45function kartOlustur(sampiyon) {46    const kart = document.createElement("li")47    kart.classList.add("kart")48 49    const resim = document.createElement("img")50    resim.src = `https://ddragon.leagueoflegends.com/cdn/${surum}/img/champion/${sampiyon.image.full}`51    resim.alt = ""52    resim.width = 9653    resim.height = 9654    resim.loading = "lazy"55 56    const ad = document.createElement("h2")57    ad.textContent = sampiyon.name58 59    const unvan = document.createElement("p")60    unvan.textContent = sampiyon.title61 62    const roller = document.createElement("p")63    roller.classList.add("roller")64    for (const rol of sampiyon.tags) {65        const rozet = document.createElement("span")66        rozet.textContent = ROL_ADLARI[rol]67        roller.append(rozet)68    }69 70    kart.append(resim, ad, unvan, roller)71    return kart72}73 74function aramaBicimi(metin) {75    return metin.toLocaleLowerCase("tr").replaceAll("ı", "i")76}77 78function uyuyorMu(sampiyon, aranan, rol) {79    const metin = aramaBicimi(`${sampiyon.name} ${sampiyon.title}`)80    const metinUyuyor = metin.includes(aramaBicimi(aranan))81    const rolUyuyor = rol === "" || sampiyon.tags.includes(rol)82    return metinUyuyor && rolUyuyor83}84 85function ciz() {86    if (sampiyonlar.length === 0) {87        return88    }89    const aranan = aramaKutusu.value.trim()90    const rol = rolSecimi.value91    const gorunenler = sampiyonlar.filter((sampiyon) => uyuyorMu(sampiyon, aranan, rol))92 93    liste.textContent = ""94    liste.append(...gorunenler.map(kartOlustur))95 96    if (gorunenler.length === 0) {97        durum.textContent = "Bu aramaya uyan şampiyon yok."98    } else {99        durum.textContent = `${sampiyonlar.length} şampiyondan ${gorunenler.length} tanesi gösteriliyor.`100    }101}102 103aramaKutusu.addEventListener("input", ciz)104rolSecimi.addEventListener("change", ciz)105yukle()

Toplam 105 satır, ama her fonksiyon tek bir iş yapıyor: jsonGetir istek atar, yukle durumları yönetir, kartOlustur bir kart yapar, uyuyorMu süzer, ciz ekranı günceller. Bir şey bozulunca hangi fonksiyona bakacağını bilirsin.

#CORS: tarayıcının izin denetimi

Data Dragon'dan veri çekerken tarayıcı seni hiç durdurmadı. Şimdi Riot'un sitesindeki yama notları sayfasını kendi sayfanda göstermek istediğini düşün. Şampiyon listene dokunmadan denemek için aynı klasörde küçük bir deneme sayfası aç:

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <title>CORS Denemesi</title>6    <script src="cors.js" defer></script>7</head>8<body>9    <h1>CORS denemesi</h1>10</body>11</html>

cors.js'e yama notları sayfasını isteyen kodu yaz ve sayfayı http://127.0.0.1:5500/cors.html adresinden aç:

1async function yamaNotlariniGetir() {2    const yanit = await fetch("https://www.leagueoflegends.com/tr-tr/news/game-updates/")3    const sayfa = await yanit.text()4    console.log(sayfa.length)5}6 7yamaNotlariniGetir()

Access to fetch at 'https://www.leagueoflegends.com/tr-tr/news/game-updates/' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.GET https://www.leagueoflegends.com/tr-tr/news/game-updates/ net::ERR_FAILED 200 (OK)Uncaught (in promise) TypeError: Failed to fetch    at yamaNotlariniGetir (cors.js:2:25)    at cors.js:7:1

Ortadaki satırın sonuna bak: 200 (OK). Sunucu sayfayı başarıyla gönderdi, ama tarayıcı cevabı koduna vermedi ve isteği net::ERR_FAILED ile başarısız saydı. Network sekmesinde de bu isteğin Status sütununda CORS error yazar. İlk satırı parçala: "127.0.0.1:5500 kökeninden gelen bu fetch isteği CORS politikası yüzünden engellendi: istenen kaynakta Access-Control-Allow-Origin başlığı yok."

Önce mesajdaki origin (köken) sözcüğü. Kavramı Ders 23'ten tanıyorsun: localStorage kökene bağlıydı, 127.0.0.1:5500 ile localhost:5500 ayrı depolar kullanıyordu. Ders 7'deki Git uzak deposu origin ile ise yalnız adı aynı.

Sayfan http://127.0.0.1:5500/index.html olsun. İstek attığı adreslerin kökeni onunkiyle aynı mı?

Tarayıcının temel güvenlik kuralı aynı köken kuralıdır (same-origin policy): bir sayfadaki JavaScript, yalnız kendi kökeninden gelen cevapları okuyabilir. Sebebi senin güvenliğin. Bu kural olmasaydı girdiğin herhangi bir site, arka planda bankanın sitesine istek atıp cevabı okuyabilirdi; tarayıcın o isteğe senin oturum bilgilerini de ekleyebildiği için cevapta senin hesabın olurdu.

Ama farklı kökenden veri okumak her zaman yasak değil. Sunucu izin verebilir. İznin adı CORS.

Data Dragon'un iznini Network sekmesinde zaten gördün: champion.json'un Response headers bölümündeki Access-Control-Allow-Origin: * satırı (Network şeklindeki 6). Yıldız "her kökenden gelen sayfa bu cevabı okuyabilir" demek. Aynı bölmede biraz aşağı inersen Request headers bölümünde Origin: http://127.0.0.1:5500 satırını da görürsün: tarayıcı başka bir kökene istek atarken sayfanın nereden geldiğini kendisi yazar.

İstersen aynı başlıklara terminalden de bakabilirsin. curl.exe adresteki dosyayı indiren bir komut satırı aracı; -I yalnız başlıkları ister, -H isteğe bir başlık ekler. Bu aracı Ders 26'da ayrıntılı göreceksin, şimdilik kalıp olarak yaz:

PS C:\kod\sampiyon-listesi> curl.exe -I -H "Origin: http://127.0.0.1:5500" https://ddragon.leagueoflegends.com/cdn/16.20.1/data/tr_TR/champion.jsonHTTP/1.1 200 OKContent-Type: application/jsonContent-Length: 162972Connection: keep-aliveAccess-Control-Allow-Origin: *Access-Control-Allow-Methods: GET, HEADAccess-Control-Max-Age: 3000...

Origin başlığıyla tarayıcının yaptığını taklit ettik, "ben bu kökenden geliyorum" dedik; sunucu Access-Control-Allow-Origin: * ile cevap verdi. Data Dragon bu satırı her cevaba koyuyor, -H kısmını silsen de gelir; bazı sunucular ise izni yalnız Origin taşıyan isteklere yazar. Content-Length: 162972 da dosyanın sıkıştırılmamış boyutu (163 kB). Windows PowerShell'de .exe'yi yazmayı unutma: tek başına curl, PowerShell'de başka bir komutun takma adıdır ve bu seçenekleri anlamaz.

#Node'da neden böyle bir hata yoktu?

Aynı kodu Node'da çalıştır. Hiçbir engel çıkmaz; sayfa gelir:

1async function yamaNotlariniGetir() {2    const yanit = await fetch("https://www.leagueoflegends.com/tr-tr/news/game-updates/")3    const sayfa = await yanit.text()4    console.log(yanit.status, sayfa.length)5}6 7yamaNotlariniGetir()

200 517981

CORS bir tarayıcı kuralıdır. Tarayıcı başkalarının yazdığı sayfaları senin bilgisayarında, senin oturumlarınla çalıştırır; bu yüzden onları birbirinden korumak zorunda. Node'daki program ise senin kendi programın, kimsenin sayfası değil; tarayıcının denetimi orada yok. Bu fark çözüm yolunu da gösteriyor.

#CORS hatası alınca ne yaparsın?

Hatanın çözümü senin sayfanın kodunda değil, cevabı veren sunucuda. İzni sunucu verir; sen sayfadan kendine izin veremezsin.

• Sunucu senin değilse: O sitenin bu iş için bir API'si var mı bak. Riot'un oyun verisi için Data Dragon izin veriyor; yama notları sayfası ise bir API değil, insanlar için yapılmış bir web sayfası.
• Ara sunucu: Tarayıcı kendi sunucuna sorar, senin sunucun (Node, CORS'a takılmaz) asıl siteye sorar ve cevabı geri verir. Bunu Ders 30'da yazacaksın.
• Sunucu seninse: Ya cevabına izin başlığını eklersin ya da sayfanı ve API'ni aynı sunucudan, aynı kökenden verirsin. Blok 4'te kendi API'ni yazınca sayfanı da aynı sunucudan vereceksin; köken aynı olduğu için CORS'a hiç takılmayacaksın.

Şunları yapma: isteğe mode: "no-cors" eklemek hatayı susturur ama cevap "opak" gelir: durum kodu 0, gövde boş, içini yine okuyamazsın. İnternette bulduğun hazır "CORS proxy" siteleri verini başkasının sunucusundan geçirir. CORS'u kapatan tarayıcı eklentileri de kendi güvenliğini kapatır ve sayfanı açan başka hiç kimsenin tarayıcısında işe yaramaz.

#Sık hatalar

Bu derste karşılaştığın hataların çoğu bölümlerin içinde. Birkaçı daha:

GET https://ddragon.leagueoflegends.com/cdn/16.99.1/data/tr_TR/champion.json 403 (Forbidden)Error: İstek başarısız: 403    at jsonGetir (uygulama.js:22:15)    at async yukle (uygulama.js:34:22)

GET https://ddragon.leagueoflegends.com/api/versions.json net::ERR_INTERNET_DISCONNECTEDTypeError: Failed to fetch    at jsonGetir (uygulama.js:20:25)    at yukle (uygulama.js:32:32)    at uygulama.js:105:1

#Görevler

Görevlerin her birini sampiyon-listesi klasöründe yap. Sayfa görevlerinde yeni bir .html ve .js dosyası aç; Live Server açıkken adres çubuğunda dosya adını değiştirerek (/buyuler.html gibi) açabilirsin. Data Dragon'un başka dosyalarını tarayıcıda açıp önce gözünle okumayı unutma.

https://ddragon.leagueoflegends.com/cdn/<sürüm>/data/tr_TR/summoner.json

Sihirdar Vadisi'nde 9 büyü var.Bariyer · 180 snArındır · 240 snTutuştur · 180 snBitkinlik · 240 snSıçra · 300 snHayalet · 240 snŞifa · 240 snÇarp · 15 snIşınlan · 300 sn

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <title>Sihirdar Büyüleri</title>6    <script src="buyuler.js" defer></script>7</head>8<body>9    <h1>Sihirdar Büyüleri</h1>10    <p id="buyuDurum">Büyüler yükleniyor…</p>11    <ul id="buyuListesi"></ul>12</body>13</html>

1const buyuDurum = document.querySelector("#buyuDurum")2const buyuListesi = document.querySelector("#buyuListesi")3 4async function jsonGetir(adres) {5    const yanit = await fetch(adres)6    if (!yanit.ok) {7        throw new Error("İstek başarısız: " + yanit.status)8    }9    const veri = await yanit.json()10    return veri11}12 13async function buyuleriYukle() {14    try {15        const surumler = await jsonGetir("https://ddragon.leagueoflegends.com/api/versions.json")16        const veri = await jsonGetir(`https://ddragon.leagueoflegends.com/cdn/${surumler[0]}/data/tr_TR/summoner.json`)17        const vadiBuyuleri = Object.values(veri.data).filter((buyu) => buyu.modes.includes("CLASSIC"))18        for (const buyu of vadiBuyuleri) {19            const satir = document.createElement("li")20            satir.textContent = `${buyu.name} · ${buyu.cooldown[0]} sn`21            buyuListesi.append(satir)22        }23        buyuDurum.textContent = `Sihirdar Vadisi'nde ${vadiBuyuleri.length} büyü var.`24    } catch (hata) {25        console.error(hata)26        buyuDurum.textContent = "Büyüler yüklenemedi."27    }28}29 30buyuleriYukle()

34<p id="durum" aria-live="polite">Şampiyonlar yükleniyor…</p>35<button type="button" id="tekrar" hidden>Yeniden dene</button>

1const tekrarDugmesi = document.querySelector("#tekrar")2 3async function yukle() {4    durum.textContent = "Şampiyonlar yükleniyor…"5    durum.classList.remove("hata")6    tekrarDugmesi.hidden = true7    try {8        const surumler = await jsonGetir("https://ddragon.leagueoflegends.com/api/versions.json")9        surum = surumler[0]10        const veri = await jsonGetir(`https://ddragon.leagueoflegends.com/cdn/${surum}/data/tr_TR/champion.json`)11        sampiyonlar = Object.values(veri.data)12        surumYazisi.textContent = `Yama ${surum} · ${sampiyonlar.length} şampiyon`13        ciz()14    } catch (hata) {15        console.error(hata)16        durum.textContent = "Şampiyonlar yüklenemedi. İnternet bağlantını denetleyip yeniden dene."17        durum.classList.add("hata")18        tekrarDugmesi.hidden = false19    }20}21 22tekrarDugmesi.addEventListener("click", yukle)

https://ddragon.leagueoflegends.com/cdn/<sürüm>/data/tr_TR/profileicon.json

5126 simge var. Aşağı kaydırdıkça yüklenecekler.

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <title>Sihirdar Simgeleri</title>6    <script src="simgeler.js" defer></script>7</head>8<body>9    <h1>Sihirdar simgeleri</h1>10    <p id="simgeDurum">Simgeler yükleniyor…</p>11    <div id="galeri"></div>12</body>13</html>

1const simgeDurum = document.querySelector("#simgeDurum")2const galeri = document.querySelector("#galeri")3 4async function jsonGetir(adres) {5    const yanit = await fetch(adres)6    if (!yanit.ok) {7        throw new Error("İstek başarısız: " + yanit.status)8    }9    const veri = await yanit.json()10    return veri11}12 13async function simgeleriYukle() {14    try {15        const surumler = await jsonGetir("https://ddragon.leagueoflegends.com/api/versions.json")16        const surum = surumler[0]17        const veri = await jsonGetir(`https://ddragon.leagueoflegends.com/cdn/${surum}/data/tr_TR/profileicon.json`)18        const simgeler = Object.values(veri.data)19        for (const simge of simgeler) {20            const resim = document.createElement("img")21            resim.src = `https://ddragon.leagueoflegends.com/cdn/${surum}/img/profileicon/${simge.image.full}`22            resim.alt = `Simge ${simge.id}`23            resim.width = 6424            resim.height = 6425            resim.loading = "lazy"26            galeri.append(resim)27        }28        simgeDurum.textContent = `${simgeler.length} simge var. Aşağı kaydırdıkça yüklenecekler.`29    } catch (hata) {30        console.error(hata)31        simgeDurum.textContent = "Simgeler yüklenemedi."32    }33}34 35simgeleriYukle()

1function alinabilirler(tumEsyalar, altin) {2    return tumEsyalar3        .filter((esya) => esya.gold.purchasable && esya.maps["11"] && !esya.requiredChampion)4        .filter((esya) => esya.gold.total <= altin)5        .toSorted((a, b) => a.gold.total - b.gold.total)6}7 8const ornekler = [9    { name: "Kontrol Totemi", gold: { total: 75, purchasable: true }, maps: { "11": true } },10    { name: "Can İksiri", gold: { total: 50, purchasable: true }, maps: { "11": true } },11    { name: "Görünmez Totem", gold: { total: 0, purchasable: true }, maps: { "11": true } },12    { name: "Kalista'nın Kara Kargısı", gold: { total: 0, purchasable: true }, maps: { "11": true }, requiredChampion: "Kalista" },13    { name: "Can Simidi", gold: { total: 1600, purchasable: true }, maps: { "11": false } },14    { name: "Ebedi Kılıç", gold: { total: 3500, purchasable: true }, maps: { "11": true } }15]16 17for (const altin of [-5, 0, 49, 50, 75, 3500]) {18    const adlar = alinabilirler(ornekler, altin).map((esya) => esya.name)19    console.log(altin, adlar)20}

-5 []0 [ 'Görünmez Totem' ]49 [ 'Görünmez Totem' ]50 [ 'Görünmez Totem', 'Can İksiri' ]75 [ 'Görünmez Totem', 'Can İksiri', 'Kontrol Totemi' ]3500 [ 'Görünmez Totem', 'Can İksiri', 'Kontrol Totemi', 'Ebedi Kılıç' ]

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <title>Bütçene Göre Eşya</title>6    <script src="esyalar.js" defer></script>7</head>8<body>9    <h1>Bütçene göre eşya</h1>10    <label>11        Altının12        <input type="number" id="altinKutusu" min="0" step="50" disabled>13    </label>14    <p id="esyaDurum">Eşyalar yükleniyor…</p>15    <ul id="esyaListesi"></ul>16</body>17</html>

1const altinKutusu = document.querySelector("#altinKutusu")2const esyaDurum = document.querySelector("#esyaDurum")3const esyaListesi = document.querySelector("#esyaListesi")4 5let esyalar = []6 7async function jsonGetir(adres) {8    const yanit = await fetch(adres)9    if (!yanit.ok) {10        throw new Error("İstek başarısız: " + yanit.status)11    }12    const veri = await yanit.json()13    return veri14}15 16function alinabilirler(tumEsyalar, altin) {17    return tumEsyalar18        .filter((esya) => esya.gold.purchasable && esya.maps["11"] && !esya.requiredChampion)19        .filter((esya) => esya.gold.total <= altin)20        .toSorted((a, b) => a.gold.total - b.gold.total)21}22 23function esyalariCiz() {24    esyaListesi.textContent = ""25    if (altinKutusu.value === "") {26        esyaDurum.textContent = "Ne kadar altının olduğunu yaz."27        return28    }29    const altin = Number(altinKutusu.value)30    const uygunlar = alinabilirler(esyalar, altin)31    for (const esya of uygunlar) {32        const satir = document.createElement("li")33        satir.textContent = `${esya.name} · ${esya.gold.total} altın`34        esyaListesi.append(satir)35    }36    if (uygunlar.length === 0) {37        esyaDurum.textContent = `${altin} altınla alınabilecek eşya yok.`38    } else {39        esyaDurum.textContent = `${altin} altınla ${uygunlar.length} eşya alabilirsin.`40    }41}42 43async function esyalariYukle() {44    try {45        const surumler = await jsonGetir("https://ddragon.leagueoflegends.com/api/versions.json")46        const veri = await jsonGetir(`https://ddragon.leagueoflegends.com/cdn/${surumler[0]}/data/tr_TR/item.json`)47        esyalar = Object.values(veri.data)48        altinKutusu.disabled = false49        esyalariCiz()50    } catch (hata) {51        console.error(hata)52        esyaDurum.textContent = "Eşyalar yüklenemedi."53    }54}55 56altinKutusu.addEventListener("input", esyalariCiz)57esyalariYukle()