Blok 3 projesi: şampiyon ansiklopedisi

Blok 3'ün sonuna geldin. Bu derste HTML, CSS, DOM, formlar, localStorage ve fetch derslerinde öğrendiklerini tek bir gerçek projede birleştiriyorsun. Ders 24'teki şampiyon listesi büyüyüp bir şampiyon ansiklopedisine dönüşecek: arama, rol filtresi, favoriler ve her şampiyon için ayrı bir sayfa. Sonunda onu GitHub Pages ile internete koyacak, bağlantısını istediğin kişiye gönderebileceksin.

Ders uzun; tek oturumda bitirmek zorunda değilsin. Proje adım adım büyüyor ve her büyük adımın sonunda sayfayı tarayıcıda açıp çalıştığını gördüğün bir kontrol noktası var. Bir kontrol noktası çalışmadan sonrakine geçme. Bitince sayfan şöyle görünecek:

127.0.0.1:5500/index.html

#Önce plan: ne yapıyoruz?

Boş bir index.html açıp hemen yazmaya başlamak cazip gelir. Ama yarım saat sonra "arama kutusu nereye gelecekti, favoriler nerede saklanacaktı" diye düşünürken aynı kodu üçüncü kez baştan yazarsın. Ders 17'de oyun için yaptığın gibi önce ne yapacağını yazıya dökeceğiz. Bu sefer bir adım daha var: ekranın kaba bir çizimi.

#Özellik listesi

Uygulamanın neler yapacağını madde madde yaz. Her maddenin yanına kullanıcıya ne kazandırdığını ve ne zaman yapılacağını ekle. Ders 17'deki en küçük çalışan sürüm fikri burada da geçerli: ilk sürüme neyin gireceğine baştan karar verirsin, gerisi sonraki sürümlerin işi.

#Elimizdeki veri

Veriyi Ders 24'te tanıdığın Data Dragon'dan alacağız. Beş adresten dördünü zaten kullandın: sürüm listesi, champion.json ve kare resim Ders 24'ten, tek şampiyonun dosyası Ders 15'teki "Şampiyonun unvanı" görevinden. Yeni olan yalnızca büyük resim:

Listedeki her şampiyon şuna benzer bir obje. Projede kullanacağımız alanları bıraktık, gerisini kısalttık:

{    "id": "Ahri",    "name": "Ahri",    "title": "Dokuz Kuyruklu Tilki",    "info": { "attack": 3, "defense": 4, "magic": 8, "difficulty": 5 },    "image": { "full": "Ahri.png" },    "tags": ["Mage", "Assassin"],    "stats": { "hp": 590, "armor": 21, "attackrange": 550, "movespeed": 330 }}

#Tel kafes

Özellik listesi "ne"yi söyler, tel kafes "nerede"yi. Kâğıt kalem yeter; istersen Excalidraw gibi ücretsiz çizim sitelerini de kullanabilirsin. Önemli olan renk ya da yazı tipi değil, her parçanın yeri.

Aynı iki ekranı bir de telefon için çiz. Telefonda yan yana duran şeyler alt alta iner; çizerken bunun nereleri etkilediğini görürsün.

Taslağı çizerken üç karar verdik; kod yazarken bunlara uyacağız:

• Tek sayfa, iki görünüm. Liste ve detay aynı index.html içinde duracak. Hangisinin görüneceğine adres karar verecek: adreste ?id=Ahri varsa detay, yoksa liste.
• Kartın tamamı bir bağlantı, yıldız ayrı bir düğme. HTML bir bağlantının içine düğme koymana izin vermez; koyarsan yıldıza basınca hem favori değişir hem detay sayfası açılır. Bu yüzden yıldız kartın içinde ama bağlantının dışında.
• Telefonda daha az sütun. Detay tek sütuna iner: resim üste çıkar, yazılar altına akar. Bunun için Ders 21'deki @media sorgusunu kullanacağız. Kart listesi ise ekran daraldıkça kendiliğinden iki sütuna iner.

#Klasör ve dosyalar

Bu proje C:\kod\ogren'in içinde değil, kendi klasöründe duracak: GitHub Pages bir depoyu site olarak yayınlar, bu yüzden projenin ayrı bir deposu olmalı. VS Code'da File → Open Folder… ile C:\kod içinde ansiklopedi adında yeni bir klasör oluştur ve onu aç. Sonra Explorer'da New Folder ile js klasörünü, New File ile dosyaları oluştur. Bitince yapı şöyle olacak:

ansiklopedi/├── index.html        sayfanın iskeleti: iki görünüm, filtreler, mesaj alanı├── stil.css          görünüm: renkler, ızgara, telefon ayarları└── js/    ├── uygulama.js   yönetici: adresi okur, durumu tutar, olayları dinler    ├── api.js        Data Dragon'dan veri getirir    ├── arayuz.js     kartları ve detayı ekrana çizer    └── favoriler.js  favorileri localStorage'da saklar

Ders 24'teki uygulama.js tek dosyada yüz satır kadardı. Bu projenin JavaScript'i 300 satıra yaklaşacak, görevlerden sonra 400'ü geçecek; tek dosyada bir hatayı ararken her şeyi okumak zorunda kalırsın. Dosyalara böldüğünde "favoriler bozuldu" dediğin an nereye bakacağını bilirsin. Ders 14'te Node için öğrendiğin, Ders 17'de oyununda kullandığın modülleri şimdi tarayıcıda kullanacağız.

Ders boyunca Node'da küçük denemeler de yapacağız. Onları proje klasörüne değil, C:\kod\ogren\ders25.js dosyasına yaz; projenin deposuna deneme dosyası girmesin. VS Code'da File → New Text File ile boş bir dosya aç, File → Save As… ile C:\kod\ogren klasörüne ders25.js adıyla kaydet. Çalıştırmak için terminalde önce cd C:\kod\ogren, sonra node ders25.js yaz. Denemeler birbirinden bağımsız: her yenisine başlamadan dosyanın eski içeriğini sil, yoksa aynı adlı iki const yüzünden hata alırsın.

#index.html

Önce iskelet. Aşağıdaki dosyayı yaz; altında önemli satırları tek tek açıklıyoruz.

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 Ansiklopedisi</title>7    <link rel="stylesheet" href="stil.css">8    <script type="module" src="js/uygulama.js"></script>9</head>10<body>11    <header class="ust">12        <a class="logo" href="./">Şampiyon Ansiklopedisi</a>13    </header>14 15    <main>16        <section id="liste-gorunumu" hidden>17            <h1>Şampiyonlar</h1>18            <form class="filtreler" id="filtreler" autocomplete="off">19                <div class="alan">20                    <label for="arama">Ara</label>21                    <input id="arama" type="search" placeholder="Ad ya da unvan">22                </div>23                <div class="alan">24                    <label for="rol">Rol</label>25                    <select id="rol">26                        <option value="">Hepsi</option>27                        <option value="Assassin">Suikastçı</option>28                        <option value="Fighter">Dövüşçü</option>29                        <option value="Mage">Büyücü</option>30                        <option value="Marksman">Nişancı</option>31                        <option value="Support">Destek</option>32                        <option value="Tank">Tank</option>33                    </select>34                </div>35                <label class="onay">36                    <input id="yalniz-favori" type="checkbox">37                    Yalnız favoriler38                </label>39            </form>40            <p class="sayac" id="sayac" aria-live="polite"></p>41            <ul class="kartlar" id="liste"></ul>42        </section>43 44        <section id="detay-gorunumu" hidden>45            <a class="geri" href="./">← Tüm şampiyonlar</a>46            <article class="detay" id="detay" hidden>47                <img class="detay-resim" id="detay-resim" alt="" width="308" height="560">48                <div>49                    <h1 id="detay-ad"></h1>50                    <p class="detay-unvan" id="detay-unvan"></p>51                    <p class="roller" id="detay-roller"></p>52                    <dl class="olculer" id="detay-olculer"></dl>53                    <h2>Hikâye</h2>54                    <p id="detay-hikaye"></p>55                    <h2>Yetenekler</h2>56                    <ul id="detay-yetenekler"></ul>57                    <h2>İpuçları</h2>58                    <ul id="detay-ipuclari"></ul>59                </div>60            </article>61        </section>62 63        <p class="mesaj" id="mesaj" role="status">Yükleniyor…</p>64    </main>65 66    <footer class="alt">67        <p>Veriler Riot Games'in Data Dragon servisinden gelir.</p>68        <p lang="en">Şampiyon Ansiklopedisi 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>69    </footer>70</body>71</html>

• 8. satır: type="module" bu dosyanın bir modül olduğunu söyler; yalnızca böyle yüklenen dosyalar import ve export kullanabilir. Ders 22'de söz ettiğimiz gibi modül betikleri defer gibi davranır: tarayıcı önce HTML'in tamamını okur, sonra betiği çalıştırır. Bu yüzden <head> içinde durması sorun değil.
• 16 ve 44. satırlar: İki görünümün ikisi de hidden (Ders 23'te Vazgeç düğmesini böyle gizlemiştin). Hangisinin açılacağına JavaScript adrese bakıp karar verecek.
• Filtreler: Her girdi alanının bir <label for="…">'u var (Ders 19). Etikete tıklayınca kutu seçilir, ekran okuyucu da kutunun adını söyler.
• 18. satır: autocomplete="off" tarayıcıya bu formdaki kutuları hatırlamamasını söyler: arama kutusunun altında eski aramalar öneri olarak çıkmaz. Daha önemli bir sebebi var; detay görünümünü yazdıktan sonra geri tuşunu denerken göreceksin.
• 40. satır: aria-live="polite" Ders 24'teki durum yazısında da vardı: "bu yazı değişince sesli oku". Sayaç değiştikçe ekran okuyucu "Gösterilen: 12 / 173" der.
• 52. satır: <dl> (description list, tanım listesi) "ad: değer" çiftleri için yapılmış bir liste. İçinde her çift bir <dt> (ad, "Saldırı") ve bir <dd> (değer, "3/10") olur. Ölçüleri JavaScript ile bu listeye dolduracağız.
• 63. satır: Yükleniyor, hata ve boş mesajlarının hepsi bu paragrafta görünecek. role="status" da aria-live="polite" gibi çalışır: içerik değişince sesli okunur. İçindeki "Yükleniyor…" yazısı, JavaScript hiç çalışmazsa ekranda takılı kalır; bir şeylerin ters gittiğini hemen anlarsın.
• 68. satır: Ders 24'te öğrendiğin Riot hayran projesi notu. lang="en" ekran okuyucuya bu cümleyi İngilizce okumasını söyler.

#stil.css

Görünümü Ders 20 ve Ders 21'deki araçlarla yazıyoruz. Dosya uzun ama içindekilerin çoğunu tanıyorsun; yeni olanları altında anlatıyoruz. İstersen renkleri kendi zevkine göre değiştir.

1:root {2    --zemin: #f4f5f9;3    --kart: #ffffff;4    --yazi: #1c1f2b;5    --soluk: #596074;6    --vurgu: #6b3fd4;7    --cizgi: #d4d7e1;8    --yildiz: #9a6700;9    font-family: system-ui, "Segoe UI", sans-serif;10}11 12* {13    box-sizing: border-box;14}15 16[hidden] {17    display: none !important;18}19 20body {21    margin: 0;22    background: var(--zemin);23    color: var(--yazi);24    line-height: 1.5;25}26 27:focus-visible {28    outline: 3px solid var(--vurgu);29    outline-offset: 2px;30}31 32.ust {33    padding: 14px 16px;34    background: #1c1f2b;35}36 37.logo {38    color: #ffffff;39    font-weight: 700;40    text-decoration: none;41}42 43main,44.alt {45    max-width: 1100px;46    margin: 0 auto;47    padding: 16px;48}49 50/* filtreler */51.filtreler {52    display: flex;53    flex-wrap: wrap;54    align-items: flex-end;55    gap: 12px 16px;56}57 58.alan {59    display: flex;60    flex-direction: column;61}62 63#arama,64#rol {65    min-height: 44px;66    padding: 8px 12px;67    border: 1px solid var(--soluk);68    border-radius: 8px;69    background: var(--kart);70    color: var(--yazi);71    font: inherit;72}73 74.onay {75    display: flex;76    align-items: center;77    gap: 8px;78    min-height: 44px;79}80 81.onay input {82    width: 20px;83    height: 20px;84}85 86.sayac,87.kart-unvan,88.roller,89.mesaj,90.alt {91    color: var(--soluk);92}93 94/* kartlar */95.kartlar {96    display: grid;97    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));98    gap: 12px;99    padding: 0;100    list-style: none;101}102 103.kart {104    position: relative;105    border: 1px solid var(--cizgi);106    border-radius: 12px;107    background: var(--kart);108    text-align: center;109}110 111.kart a {112    display: flex;113    flex-direction: column;114    align-items: center;115    padding: 16px 12px 4px;116    border-radius: 12px;117    color: inherit;118    text-decoration: none;119}120 121.kart img {122    border-radius: 50%;123}124 125.kart-ad {126    margin-top: 8px;127    font-weight: 700;128}129 130.kart-unvan,131.roller {132    font-size: 0.875rem;133}134 135.kart .roller {136    margin: 4px 8px 12px;137}138 139.favori {140    position: absolute;141    top: 4px;142    right: 4px;143    width: 44px;144    height: 44px;145    border: 0;146    border-radius: 50%;147    background: transparent;148    color: var(--yildiz);149    font-size: 1.5rem;150    cursor: pointer;151}152 153/* detay */154.geri {155    display: inline-block;156    margin-bottom: 16px;157    color: var(--vurgu);158}159 160.detay {161    display: grid;162    grid-template-columns: 260px 1fr;163    gap: 24px;164    align-items: start;165}166 167.detay-resim {168    width: 100%;169    height: auto;170    border-radius: 12px;171}172 173.detay h1,174.detay-unvan {175    margin: 0;176}177 178.olculer {179    display: grid;180    grid-template-columns: max-content 1fr;181    gap: 6px 12px;182    max-width: 360px;183}184 185.olculer dd {186    margin: 0;187}188 189/* mesaj ve alt bilgi */190.mesaj {191    padding: 24px;192    text-align: center;193}194 195.mesaj button {196    min-height: 44px;197    padding: 8px 16px;198    border: 2px solid var(--vurgu);199    border-radius: 8px;200    background: transparent;201    color: var(--vurgu);202    font: inherit;203    cursor: pointer;204}205 206.alt {207    font-size: 0.8rem;208}209 210/* telefon */211@media (max-width: 600px) {212    .detay {213        grid-template-columns: 1fr;214    }215 216    .detay-resim {217        max-width: 220px;218    }219}

• Renkler değişkenlerde (Ders 21'deki CSS değişkenleri). Görevlerde koyu tema eklerken yalnızca bu değişkenleri değiştirmek yetecek.
• :focus-visible: Ders 20'deki :hover gibi bir sözde sınıf. Klavyeyle gezerken seçili öğenin çevresine kalın mor bir çerçeve (outline) çizer; fareyle tıklayınca çıkmaz. Erişilebilirlik bölümünde bunun neden şart olduğunu göreceksin.
• repeat(auto-fill, minmax(150px, 1fr)): Ders 24'teki ızgaranın aynısı. Kartlar en az 150 piksel genişliğinde; ekran genişledikçe sütun sayısı artar (bizim 1100 piksellik sayfamızda en çok altı), telefonda iki sütun kendiliğinden gelir.
• min-height: 44px ve 44 piksellik yıldız: Parmakla rahatça basılabilecek en küçük boyut. Telefonda küçük bir yıldızı tutturmaya çalışmak sinir bozucudur.
• .olculer: <dl>'yi iki sütunlu bir ızgaraya çevirir: solda adlar (dt), sağda değerler (dd). max-content "en uzun ad kadar geniş" demek.
• [hidden] kuralı: Garip görünebilir; neden gerektiğini aşağıdaki hata kartı anlatıyor.

Sık hatahidden yazdım ama öğe hâlâ görünüyor

Ne zaman çıkar? Bir öğeye hem hidden niteliği verip hem de CSS'te display değeri (grid, flex, block) yazınca. hidden aslında tarayıcının kendi stil dosyasındaki bir display: none kuralıdır. Senin stil dosyandaki kurallar tarayıcınınkilerden üstün gelir (Ders 20'deki basamaklama); .detay { display: grid } kazanır ve öğe gizlenmez.

[hidden] kuralını yazmadan detay sayfasında hatalı bir adres (?id=ahri) açtığımızda gerçekten olan bu: hata mesajı geldi ama boş detay iskeleti de ekranda kaldı.

Nasıl düzelir? Stil dosyanın başına [hidden] { display: none !important; } kuralını koy. [hidden] "hidden niteliği olan her öğe" demek; !important ise "bu kural her durumda kazansın" (Ders 20'de ondan neden kaçındığımızı gördün). Buradaki iş tam onun işi: hidden yazdığın her öğe kesin gizlensin.

#Modüller tarayıcıda: type="module"

Ders 14'te kodu dosyalara bölüp export ve import ile bağladın. Tarayıcıda da aynı sözdizimi geçerli, ama birkaç kural farklı:

1. <script type="module"> şart. Böyle yüklenmeyen bir dosyada import yazarsan tarayıcı itiraz eder.
2. Yol ./, ../ ya da / ile başlar ve uzantıyı içerir. import … from "./api.js" doğru; "api.js" ya da "./api" yanlış. Tarayıcı dosyayı tahmin etmeye çalışmaz, ne yazdıysan onu ister.
3. Yol, import satırını yazan dosyaya göre çözülür, sayfaya göre değil. js/uygulama.js içinde "./api.js" yazınca tarayıcı aynı klasördeki js/api.js'yi arar.
4. Modüller yalnızca bir sunucu üzerinden çalışır. Dosyaya çift tıklayıp açarsan (adres çubuğunda file:/// görürsün) tarayıcı güvenlik nedeniyle modülleri yüklemez. Sayfayı hep Live Server ile aç.
5. Her modülün kendi kapsamı var. Bir modülde tanımladığın değişkeni, export etmedikçe başka dosya göremez (Ders 10'daki kapsam kuralının dosya düzeyindeki hâli). Böylece iki dosyada aynı adı kullanmak çakışma yaratmaz.

Ders 17'deki gibi her dosyanın neyi dışarı verdiğini de baştan yaz. Bu tablo, modüller arasındaki sözleşme: bir fonksiyonun adını değiştirirsen onu içe aktaran dosyayı da değiştirmen gerekir.

#api.js: veriyi getiren modül

Data Dragon ile konuşan bütün kod bu dosyada. Başka hiçbir dosya fetch çağırmayacak; adresler değişirse yalnızca burayı düzelteceksin.

1const ADRES = "https://ddragon.leagueoflegends.com"2 3async function jsonGetir(adres) {4    const yanit = await fetch(adres)5    if (!yanit.ok) {6        throw new Error(`İstek başarısız (${yanit.status}): ${adres}`)7    }8    const veri = await yanit.json()9    return veri10}11 12export async function sonSurumuGetir() {13    const surumler = await jsonGetir(`${ADRES}/api/versions.json`)14    return surumler[0]15}16 17export async function sampiyonlariGetir(surum) {18    const veri = await jsonGetir(`${ADRES}/cdn/${surum}/data/tr_TR/champion.json`)19    return Object.values(veri.data)20}21 22export async function sampiyonGetir(surum, id) {23    const dosya = encodeURIComponent(id)24    const veri = await jsonGetir(`${ADRES}/cdn/${surum}/data/tr_TR/champion/${dosya}.json`)25    return veri.data[id]26}27 28export function kareResim(surum, sampiyon) {29    return `${ADRES}/cdn/${surum}/img/champion/${sampiyon.image.full}`30}31 32export function buyukResim(sampiyon) {33    return `${ADRES}/cdn/img/champion/loading/${sampiyon.id}_0.jpg`34}

• jsonGetir: Ders 24'teki fonksiyonun aynısı, tek farkla: hata mesajına adresi de ekledik. Konsolda "İstek başarısız (403)" yazınca hangi dosyanın gelmediğini hemen görürsün. Bu fonksiyon dışa aktarılmıyor; yalnızca bu dosyanın içinde kullanılan bir yardımcı (Ders 3'teki "kendini tekrar etme" kuralı).
• Object.values(veri.data): champion.json şampiyonları { Aatrox: {…}, Ahri: {…} } biçiminde bir obje olarak verir; Ders 24'teki gibi diziye çeviriyoruz.
• encodeURIComponent(id): Yeni bir fonksiyon. id adresten, yani kullanıcıdan gelecek. İçinde /, ? ya da # gibi adreste özel anlamı olan işaretler varsa onları zararsız kodlara çevirir: encodeURIComponent("a/b") sonucu "a%2Fb". Ders 23'te form gönderilince adres çubuğunda 8%2F2%2F11 görmüştün; tarayıcının orada yaptığını bu fonksiyon senin için yapar. Kullanıcıdan gelen bir metni bir adresin içine koymadan önce hep bunu yap.
• Resim fonksiyonları adres üretir, istek atmaz. Resmi <img src> yükleyecek.

#Kontrol noktası 1: modüller konuşuyor mu?

Arayüzü yazmadan önce modüllerin birbirini bulduğundan ve verinin geldiğinden emin olalım. js/uygulama.js dosyasına geçici olarak şunu yaz. Birazdan tamamen sileceğiz.

1import { sonSurumuGetir, sampiyonlariGetir } from "./api.js"2 3async function dene() {4    const surum = await sonSurumuGetir()5    const sampiyonlar = await sampiyonlariGetir(surum)6    console.log("Sürüm:", surum)7    console.log("Şampiyon sayısı:", sampiyonlar.length)8    console.log("İlk şampiyon:", sampiyonlar[0].name, "-", sampiyonlar[0].title)9}10 11dene()

Tarayıcıda http://127.0.0.1:5500/index.html açılır. Sayfada şimdilik yalnızca başlık çubuğu ve "Yükleniyor…" yazısı var; önemli olan konsol. F12 ile geliştirici araçlarını aç, Console sekmesine bak:

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

Sürüm numarası ve şampiyon sayısı sende farklı olabilir: Riot her yamada listeyi günceller. Araya Ders 22'den tanıdığın iki satır da karışabilir: Live Server'ın Live reload enabled. mesajı ve sekme simgesi için istenen favicon.ico'nun kırmızı 404'ü. İkisi de zararsız.

Yukarıdaki üç satırı gördüysen index.html modülü buldu, modül api.js'yi buldu ve veri internetten geldi. Görmediysen aşağıdaki hata kartlarına bak; bu aşamada en sık çıkan hatalar bunlar.

Access to script at 'file:///C:/kod/ansiklopedi/js/uygulama.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.Failed to load resource: net::ERR_FAILED

Uncaught SyntaxError: Cannot use import statement outside a module

<script src="js/uygulama.js"></script>

<script type="module" src="js/uygulama.js"></script>

Uncaught TypeError: Failed to resolve module specifier "api.js". Relative references must start with either "/", "./", or "../".

Failed to load resource: the server responded with a status of 404 (Not Found)

1const modul = "https://kullanici.github.io/ansiklopedi/js/uygulama.js"2console.log(new URL("./api.js", modul).href)3console.log(new URL("./js/api.js", modul).href)4console.log(new URL("../stil.css", modul).href)

https://kullanici.github.io/ansiklopedi/js/api.jshttps://kullanici.github.io/ansiklopedi/js/js/api.jshttps://kullanici.github.io/ansiklopedi/stil.css

#favoriler.js: tarayıcıda saklamak

Favoriler, sayfayı kapatıp açınca da durmalı. Ders 23'te maç günlüğünü localStorage'da sakladın; buradaki iki fonksiyon oradaki yukle ve kaydet'in kardeşi. Favorileri bir id dizisi olarak tutuyoruz: ["Ahri", "Lux"].

1const ANAHTAR = "ansiklopedi.favoriler"2 3export function favorileriOku() {4    const kayit = localStorage.getItem(ANAHTAR)5    if (kayit === null) {6        return []7    }8    try {9        return JSON.parse(kayit)10    } catch (hata) {11        console.warn("Favori kaydı bozuk, boş listeyle devam ediyorum:", hata.message)12        return []13    }14}15 16export function favoriDegistir(id) {17    let favoriler = favorileriOku()18    if (favoriler.includes(id)) {19        favoriler = favoriler.filter((f) => f !== id)20    } else {21        favoriler.push(id)22    }23    localStorage.setItem(ANAHTAR, JSON.stringify(favoriler))24    return favoriler.includes(id)25}

• ANAHTAR: Live Server bütün projelerini aynı 127.0.0.1:5500 adresinden açar ve hepsi aynı depoyu paylaşır (Ders 23). Anahtarın başına proje adını koyunca maç günlüğünün kaydıyla çakışmaz.
• kayit === null ve try / catch: Ders 23'teki yukle'nin aynısı. İlk ziyarette kayıt yoktur; kayıt bozuksa uygulama çökmez, konsola sarı bir uyarı yazıp boş listeyle devam eder.
• favoriDegistir varsa çıkarır, yoksa ekler, kaydeder ve son durumu (true ya da false) döndürür. Düğmeyi güncellerken bu dönüş değerini kullanacağız. Kayıt her seferinde baştan okunduğu için favorilerin tek doğru kaynağı localStorage; favorileri ayrı bir değişkende de tutup ikisinin hep aynı kalmasıyla uğraşmıyoruz.

JSON.stringify neden şart? localStorage yalnızca metin saklar; ona bir dizi verirsen kendisi metne çevirir, ama senin istediğin biçimde değil. Ders 23'te objenin [object Object]'e döndüğünü görmüştün; dizide ne olduğunu ders25.js dosyasında gör:

1const favoriler = ["Ahri", "Lux"]2console.log(String(favoriler))3console.log(JSON.stringify(favoriler))4console.log(JSON.parse("[\"Ahri\",\"Lux\"]"))

Ahri,Lux["Ahri","Lux"][ 'Ahri', 'Lux' ]

String(favoriler), localStorage'ın kendiliğinden yaptığı çeviri: köşeli parantez ve tırnaklar gitmiş, geriye Ahri,Lux kalmış. JSON.stringify ise diziyi geri okunabilecek biçimde yazar.

1const kayit = String(["Ahri", "Lux"])2console.log(kayit)3const favoriler = JSON.parse(kayit)

Ahri,Lux<anonymous_script>:1Ahri,Lux^ SyntaxError: Unexpected token 'A', "Ahri,Lux" is not valid JSON    at JSON.parse (<anonymous>)    at Object.<anonymous> (C:\kod\ogren\ders25.js:3:24)    ... Node.js v24.20.0

Favori kaydı bozuk, boş listeyle devam ediyorum: Unexpected token 'A', "Ahri" is not valid JSONFavori kaydı bozuk, boş listeyle devam ediyorum: Unexpected token 'L', "Lux" is not valid JSON

#arayuz.js: ekrana çizen modül

Bu dosya veriyi alıp HTML öğelerine çevirir. Veri nereden geldi, nerede saklanıyor, bilmez ve umursamaz; yalnızca çizer. Ders 24'teki kartOlustur ve ROL_ADLARI buraya taşınıyor. Şimdilik liste kısmını yazıyoruz, detay kısmını ilgili bölümde ekleyeceğiz.

1import { kareResim } from "./api.js"2 3const ROL_ADLARI = {4    Assassin: "Suikastçı",5    Fighter: "Dövüşçü",6    Mage: "Büyücü",7    Marksman: "Nişancı",8    Support: "Destek",9    Tank: "Tank"10}11 12const mesaj = document.querySelector("#mesaj")13 14function oge(etiket, sinif, yazi) {15    const yeni = document.createElement(etiket)16    if (sinif) {17        yeni.className = sinif18    }19    if (yazi !== undefined) {20        yeni.textContent = yazi21    }22    return yeni23}24 25function rolleriYaz(roller) {26    return roller.map((rol) => ROL_ADLARI[rol] ?? rol).join(" · ")27}28 29export function favoriDugmesiniAyarla(dugme, favori) {30    dugme.setAttribute("aria-pressed", String(favori))31    dugme.textContent = favori ? "★" : "☆"32}33 34function kartOlustur(sampiyon, surum, favori) {35    const resim = oge("img")36    resim.src = kareResim(surum, sampiyon)37    resim.alt = ""38    resim.width = 9639    resim.height = 9640    resim.loading = "lazy"41 42    const baglanti = oge("a")43    baglanti.href = `?id=${sampiyon.id}`44    baglanti.append(resim, oge("span", "kart-ad", sampiyon.name), oge("span", "kart-unvan", sampiyon.title))45 46    const dugme = oge("button", "favori")47    dugme.type = "button"48    dugme.dataset.id = sampiyon.id49    dugme.setAttribute("aria-label", `Favori: ${sampiyon.name}`)50    favoriDugmesiniAyarla(dugme, favori)51 52    const kart = oge("li", "kart")53    kart.append(baglanti, oge("p", "roller", rolleriYaz(sampiyon.tags)), dugme)54    return kart55}56 57export function listeyiCiz(liste, sampiyonlar, surum, favoriler) {58    liste.textContent = ""59    for (const sampiyon of sampiyonlar) {60        liste.append(kartOlustur(sampiyon, surum, favoriler.includes(sampiyon.id)))61    }62}63 64export function mesajGoster(metin) {65    mesaj.textContent = metin66    mesaj.hidden = metin === ""67}68 69export function hataGoster(metin) {70    mesajGoster(`${metin} `)71    const dugme = oge("button", "", "Tekrar dene")72    dugme.type = "button"73    dugme.addEventListener("click", () => location.reload())74    mesaj.append(dugme)75}

Yukarıdan aşağı:

• ROL_ADLARI ve rolleriYaz: Sözlük obje Ders 24'tekinin aynısı. ROL_ADLARI[rol] ?? rol (Ders 12'deki boş değer birleştirme): sözlükte varsa Türkçesi, yoksa (Riot ileride yeni bir rol eklerse) İngilizcesi. Ders 24'teki kart böyle bir rolde boş bir rozet gösterirdi; bu hâli bilinmeyen rolü olduğu gibi yazar. join(" · ") rolleri araya nokta koyarak tek metinde birleştirir: "Büyücü · Suikastçı".
• oge yardımcısı: Her öğe için createElement, className, textContent üçlüsünü tekrar tekrar yazmamak için. oge("span", "kart-ad", "Ahri") bize <span class="kart-ad">Ahri</span> verir. className, class niteliğinin JavaScript'teki adıdır.
• Hep textContent: Veriyi asla innerHTML ile koymuyoruz (Ders 22'deki XSS). Veri bizim değil, Riot'un.
• Resim: alt = "", width/height ve loading = "lazy" Ders 24'tekiyle aynı: ad kartta yazdığı için resim süs, yeri baştan ayrılıyor, ekrana yaklaşınca iniyor.
• href = "?id=Ahri": Başında / olmayan, yalnızca soru işaretiyle başlayan bir göreli bağlantı: "bu sayfanın adresi aynı kalsın, yalnızca sorgu kısmı ?id=Ahri olsun" demek. Detay bölümünde bu adresi okuyacağız.
• Yıldız düğmesi: type = "button" olmazsa bir formun içindeki düğme formu gönderebilir. dataset.id, data-id="Ahri" niteliğini yazar (Ders 22); tıklanınca hangi şampiyonun yıldızı olduğunu buradan anlayacağız.
• setAttribute(ad, değer): Bir öğeye istediğin niteliği yazar. src, href, type gibi yaygın niteliklerin resim.src = … diye kısa yolları vardır; aria-… ile başlayanları setAttribute ile yazarız. Nitelik değerleri hep metin olduğu için true'yu String(favori) ile "true"'ya çevirdik.
• aria-label ve aria-pressed: Düğmede yalnızca bir yıldız karakteri var; ekran okuyucu onu okuyunca kullanıcı hiçbir şey anlamaz. aria-label düğmenin adını, aria-pressed de basılı olup olmadığını söyler. Ekran okuyucu "Favori: Ahri, açma kapama düğmesi, basılı" gibi bir şey der. ★ ve ☆ yalnızca gözle görenler için.
• mesajGoster("") mesajı gizler; dolu bir metin verince gösterir. hataGoster mesajın yanına bir "Tekrar dene" düğmesi ekler.
• location.reload(): location, tarayıcının o anki sayfanın adresini tutan hazır objesi; adres çubuğunun JavaScript'teki karşılığı. reload() sayfayı yeniler, tıpkı F5 gibi. Detay bölümünde location'ın başka bir parçasını da kullanacağız.

#uygulama.js: hepsini yöneten dosya

Geçici deneme kodunu js/uygulama.js'den tamamen sil. Gerçek dosyayı parça parça yazacağız. Önce merkezdeki fikir: Ders 23'te öğrendiğin durum.

Kullanıcının o an seçtiği her şey (arama kutusundaki yazı, seçili rol, "yalnız favoriler" kutusu) ve gelen veri tek bir objede duracak. Ekranı hep bu objeye bakarak çizeceğiz. Kullanıcı bir şey değiştirdiğinde önce objeyi güncelleyecek, sonra listeyi baştan çizeceğiz.

Dosyanın başı: içe aktarmalar, durum objesi ve sık kullanacağımız iki öğe.

1import { sonSurumuGetir, sampiyonlariGetir } from "./api.js"2import { listeyiCiz, favoriDugmesiniAyarla, mesajGoster, hataGoster } from "./arayuz.js"3import { favorileriOku, favoriDegistir } from "./favoriler.js"4 5const durum = {6    surum: "",7    sampiyonlar: [],8    arama: "",9    rol: "",10    yalnizFavori: false11}12 13const liste = document.querySelector("#liste")14const sayac = document.querySelector("#sayac")

Ders 24'te surum ve sampiyonlar ayrı let değişkenleriydi. Şimdi hepsi tek objede: neyin ekranı etkilediğini görmek için tek bir yere bakarsın. durum bir const, ama içindeki alanları değiştirebiliriz; const yalnızca kutunun başka bir objeyle değiştirilmesini yasaklar (Ders 12'deki referans).

#Arama: Ders 24'teki fonksiyonu taşı

Ders 24'te Türkçe I tuzağını çözen aramaBicimi ile süzme fonksiyonu uyuyorMu'yu yazmıştın. İkisini de buraya taşıyoruz, uyuyorMu'yu favori koşuluyla büyütüyoruz:

16function aramaBicimi(metin) {17    return metin.trim().toLocaleLowerCase("tr").replaceAll("ı", "i")18}19 20function uyuyorMu(sampiyon, secim) {21    const metinUyuyor = aramaBicimi(`${sampiyon.name} ${sampiyon.title}`).includes(aramaBicimi(secim.arama))22    const rolUyuyor = secim.rol === "" || sampiyon.tags.includes(secim.rol)23    const favoriUyuyor = !secim.yalnizFavori || secim.favoriler.includes(sampiyon.id)24    return metinUyuyor && rolUyuyor && favoriUyuyor25}26 27function gorunenleriBul(favoriler) {28    const secim = { ...durum, favoriler }29    return durum.sampiyonlar.filter((sampiyon) => uyuyorMu(sampiyon, secim))30}

Ders 24'ten üç fark var:

• trim() artık aramaBicimi'nin içinde. Kutunun değerini kırpmayı artık unutamazsın: baştaki ve sondaki boşlukları hem aranan metinden hem şampiyonun adından fonksiyonun kendisi atıyor.
• uyuyorMu üç ayrı değer yerine tek bir secim objesi alıyor: { arama, rol, yalnizFavori, favoriler }. Koşul ekledikçe parametre listesi uzamıyor; görevlerde dördüncü koşulu eklerken bunun faydasını göreceksin.
• Favori koşulu: Kutu işaretli değilse herkes geçer; işaretliyse yalnızca favori listesindekiler. Listede id'ler var, bu yüzden sampiyon.id ile bakıyoruz.

gorunenleriBul o anki durumdan ekranda görünecek şampiyonları hesaplar. { ...durum, favoriler }, Ders 12'deki yayma ile "durumun kopyası, yanına favoriler de eklenmiş" demek; favoriler tek başına yazılınca favoriler: favoriler anlamına gelir.

aramaBicimi ve uyuyorMu saf fonksiyonlar (Ders 10): sayfaya dokunmaz, aldığı veriden bir sonuç döndürür. Bu yüzden onları tarayıcıyı açmadan, Node'da birkaç örnekle deneyebilirsin. ders25.js'ye iki fonksiyonu ve dört örnek şampiyonu yaz:

1function aramaBicimi(metin) {2    return metin.trim().toLocaleLowerCase("tr").replaceAll("ı", "i")3}4 5function uyuyorMu(sampiyon, secim) {6    const metinUyuyor = aramaBicimi(`${sampiyon.name} ${sampiyon.title}`).includes(aramaBicimi(secim.arama))7    const rolUyuyor = secim.rol === "" || sampiyon.tags.includes(secim.rol)8    const favoriUyuyor = !secim.yalnizFavori || secim.favoriler.includes(sampiyon.id)9    return metinUyuyor && rolUyuyor && favoriUyuyor10}11 12const ornekler = [13    { id: "Ahri", name: "Ahri", title: "Dokuz Kuyruklu Tilki", tags: ["Mage", "Assassin"] },14    { id: "Irelia", name: "Irelia", title: "Bıçakların Dansı", tags: ["Fighter", "Assassin"] },15    { id: "Lux", name: "Lux", title: "Işık Leydisi", tags: ["Mage", "Support"] },16    { id: "MonkeyKing", name: "Wukong", title: "Maymun Kral", tags: ["Fighter", "Tank"] }17]18 19const bos = { arama: "", rol: "", yalnizFavori: false, favoriler: ["Lux", "MonkeyKing"] }20const adlar = (secim) => ornekler.filter((s) => uyuyorMu(s, secim)).map((s) => s.name)21 22console.log(adlar(bos))23console.log(adlar({ ...bos, arama: "  IRE " }))24console.log(adlar({ ...bos, rol: "Assassin" }))25console.log(adlar({ ...bos, yalnizFavori: true }))26console.log(adlar({ ...bos, yalnizFavori: true, rol: "Mage" }))27console.log(adlar({ ...bos, yalnizFavori: true, favoriler: ["Wukong"] }))28console.log(adlar({ ...bos, yalnizFavori: true, favoriler: [] }))

[ 'Ahri', 'Irelia', 'Lux', 'Wukong' ][ 'Irelia' ][ 'Ahri', 'Irelia' ][ 'Lux', 'Wukong' ][ 'Lux' ][][]

Her satırı tek tek kontrol et: boş seçim hepsini verdi; başı sonu boşluklu, büyük harfli " IRE " Irelia'yı buldu; "yalnız favoriler" Lux ile Wukong'u bıraktı; iki koşul birlikte çalıştı. Altıncı satır önemli bir sınır: favorilere "Wukong" adı yazılmış olsaydı Wukong görünmezdi, çünkü onun id'si MonkeyKing. Son satırda favori listesi boş ve kutu işaretli: hiçbir şey kalmıyor.

#Listeyi güncellemek ve boş durumlar

Döngünün 3. ve 4. adımı tek fonksiyonda: görünenleri bul, çiz, sayacı ve mesajı ayarla.

32function listeyiGuncelle() {33    const favoriler = favorileriOku()34    const gorunenler = gorunenleriBul(favoriler)35    listeyiCiz(liste, gorunenler, durum.surum, favoriler)36    sayac.textContent = `Gösterilen: ${gorunenler.length} / ${durum.sampiyonlar.length}`37    if (gorunenler.length > 0) {38        mesajGoster("")39    } else if (durum.yalnizFavori && favoriler.length === 0) {40        mesajGoster("Henüz favorin yok. Bir kartın yıldızına basarak ekleyebilirsin.")41    } else {42        mesajGoster("Aramana uyan şampiyon yok. Aramayı kısaltmayı ya da rolü Hepsi yapmayı dene.")43    }44}

İki ayrı boş durum mesajı var, çünkü sebepleri farklı. "Yalnız favoriler" işaretli ve hiç favori yoksa kullanıcıya ne yapacağını söylüyoruz: yıldıza bas. Arama hiçbir şeye uymuyorsa çıkış yolunu gösteriyoruz: aramayı kısalt. Ders 24'teki kuralı hatırla: boş durum bir hata değildir ve hatayla aynı mesajı almamalıdır.

#Veriyi yüklemek

46async function listeyiAc() {47    document.querySelector("#liste-gorunumu").hidden = false48    mesajGoster("Şampiyonlar yükleniyor…")49    try {50        durum.surum = await sonSurumuGetir()51        durum.sampiyonlar = await sampiyonlariGetir(durum.surum)52        listeyiGuncelle()53    } catch (hata) {54        console.error(hata)55        hataGoster("Şampiyonlar yüklenemedi. İnternet bağlantını kontrol et.")56    }57}

Ders 24'teki yukle'nin kardeşi. Önce liste görünümünü açıp "yükleniyor" mesajını gösteriyoruz, sonra veriyi bekliyoruz. Bir şey ters giderse catch iki iş yapar: hatanın aslını geliştirici için konsola yazar (console.error), kullanıcıya da anlayacağı dilde bir mesaj ve "Tekrar dene" düğmesi gösterir.

#Olayları dinlemek

59document.querySelector("#filtreler").addEventListener("submit", (olay) => {60    olay.preventDefault()61})62 63document.querySelector("#arama").addEventListener("input", (olay) => {64    durum.arama = olay.target.value65    listeyiGuncelle()66})67 68document.querySelector("#rol").addEventListener("change", (olay) => {69    durum.rol = olay.target.value70    listeyiGuncelle()71})72 73document.querySelector("#yalniz-favori").addEventListener("change", (olay) => {74    durum.yalnizFavori = olay.target.checked75    listeyiGuncelle()76})77 78liste.addEventListener("click", (olay) => {79    const dugme = olay.target.closest(".favori")80    if (!dugme) {81        return82    }83    const favori = favoriDegistir(dugme.dataset.id)84    favoriDugmesiniAyarla(dugme, favori)85    if (durum.yalnizFavori) {86        listeyiGuncelle()87    }88})

• input olayı her tuş vuruşunda çalışır; kullanıcı yazdıkça liste daralır. select ve onay kutusu için change yeterli. Onay kutusunun değeri value'da değil checked'de durur: işaretliyse true.
• Her dinleyici aynı kalıpta: durumu güncelle, listeyiGuncelle()'yi çağır. Durumu değiştiren başka bir yer yok; bir şey yanlış görünüyorsa bakacağın yer belli.
• Yıldızlar için tek dinleyici: 173 düğmenin her birine ayrı dinleyici koymak yerine listenin kendisini dinliyoruz: Ders 22'deki olay yetkilendirmesi. closest(".favori") tıklanan öğeden yukarı doğru çıkıp favori sınıflı ilk öğeyi bulur; kartın başka bir yerine tıklandıysa null döner ve hiçbir şey yapmayız. Kartlar her aramada silinip yeniden yaratıldığı için tek dinleyici en sade yol: düğmelere tek tek takılan dinleyiciler kartlarla birlikte silinir, her çizimde yeniden takman gerekirdi. Listenin kendisi (#liste) ise hiç silinmez.
• Yıldıza basınca listeyi baştan çizmiyoruz, yalnızca o düğmeyi güncelliyoruz. Bunun bir erişilebilirlik sebebi var; aşağıdaki "Klavye ve odak" başlığında göreceksin. Tek istisna "yalnız favoriler" açıkken: o zaman favoriden çıkan kart listeden kalkmalı.

#Kontrol noktası 2: liste çalışıyor

Dosyanın sonuna, olay dinleyicilerinin altına bir boş satır ve başlatma satırını yaz:

90listeyiAc()

Kaydet. Live Server sayfayı kendisi yeniler; kartlar gelmeli. Şunları tek tek dene:

1. Arama kutusuna ahri yaz: tek kart kalmalı, sayaç Gösterilen: 1 / 173 demeli.
2. Aramayı sil, rolü Destek yap: yalnızca destekler kalmalı (bu ders yazılırken 43 şampiyon).
3. Ahri'nin ve Lux'un yıldızına bas, sayfayı yenile (F5): yıldızlar dolu kalmalı.
4. Yalnız favoriler'i işaretle: yalnızca o iki kart kalmalı. Birinin yıldızına basınca o kart da listeden çıkmalı.
5. Bir karta tıkla: adres ?id=… ile biter ama ekranda yine liste vardır. Detayı birazdan yazacağız.

Uygulamanın baştaki ekran görüntüsündeki gibi göründüğünü ve konsolda kırmızı satır olmadığını (zararsız favicon.ico 404'ü dışında) gördüysen ikinci kontrol noktasını geçtin.

#Yükleniyor, hata ve boş durumlar

Ders 24'te bir sayfanın dört durumunu (yükleniyor, dolu, boş, hata) görmüştün. Projede de üçü aynı mesaj alanında görünüyor:

Hepsini kendin dene; "bende çalışıyor" yetmez. Yöntemler Ders 24'tekilerle aynı. Önce geliştirici araçlarını aç ve Network sekmesinde Disable cache kutusunun işaretli olduğundan emin ol; boşsa tarayıcı JSON dosyalarını önbellekten verir ve yükleniyor ile hata durumlarını hiç görmezsin.

• Yükleniyor: Geliştirici araçlarında Network sekmesini aç, No throttling yazan menüden 3G'yi seç ve sayfayı yenile. Mesajı birkaç saniye görürsün. İşin bitince menüyü yeniden No throttling yap.
• Hata: Wi-Fi'ı kapat (ya da kabloyu çıkar) ve sayfayı yenile. Live Server senin bilgisayarında çalıştığı için sayfa yine açılır; gelmeyen yalnızca Data Dragon verisidir. Tekrar dene'ye bas: internet yokken yine aynı mesaj gelir. İnterneti açıp yeniden basınca kartlar gelir. Konsolda gerçek sebep görünür:

Failed to load resource: net::ERR_INTERNET_DISCONNECTEDTypeError: Failed to fetch    at jsonGetir (http://127.0.0.1:5500/js/api.js:4:25)    at sonSurumuGetir (http://127.0.0.1:5500/js/api.js:13:28)    at listeyiAc (http://127.0.0.1:5500/js/uygulama.js:50:29)    ...

• Boş: zzz diye ara. Bir de hiç favorin yokken Yalnız favoriler'i işaretle; farklı mesajı görmelisin.

export function favorileriOku() {    return JSON.parse(localStorage.getItem(ANAHTAR))}

TypeError: Cannot read properties of null (reading 'includes')    at listeyiCiz (http://127.0.0.1:5500/js/arayuz.js:60:61)    at listeyiGuncelle (http://127.0.0.1:5500/js/uygulama.js:35:5)    at listeyiAc (http://127.0.0.1:5500/js/uygulama.js:52:9)

#Detay görünümü: adreste ?id=

Bir karta tıklayınca detay açılmalı. Seçilen şampiyonu bir değişkende tutup ekranı değiştirmek de bir yol, ama o zaman üç şeyi kaybederiz:

• Paylaşmak: Arkadaşına "şu sayfaya bak" diyemezsin; gönderdiğin adres hep listeyi açar.
• Yenilemek: F5'e basınca değişkenler sıfırlanır, listeye dönersin.
• Geri tuşu: Tarayıcının geri tuşu bir önceki sayfaya gider; değişkenini bilmez.

Seçimi adrese yazarsak üçü de kendiliğinden çalışır. Ders 18'de URL'nin parçalarını görmüştün; soru işaretinden sonraki kısım sorgu (query string). Sayfa adresi …/index.html?id=Ahri olduğunda JavaScript bu kısmı okuyup Ahri'yi çizer.

Tarayıcıda location.search, Ders 18'deki new URL(...) objesinin search alanı gibi, adresin soru işaretinden başlayan kısmını verir: "?id=Ahri". URLSearchParams bu metni parçalayıp get ile tek tek okumanı sağlar. Node'da da var; ders25.js dosyasında dene:

1const parametreler = new URLSearchParams("?id=Ahri&sekme=hikaye")2console.log(parametreler.get("id"))3console.log(parametreler.get("sekme"))4console.log(parametreler.get("rol"))5console.log(parametreler.get("ID"))6console.log(new URLSearchParams("?id=").get("id") === "")

Ahrihikayenullnulltrue

Üç sınır durumuna dikkat: adreste olmayan bir ad null verir; adlar büyük-küçük harfe duyarlıdır (ID bulunmadı); ?id= yazılıp değer verilmezse sonuç boş metindir. Biz if (secilenId) diye soracağız: hem null'ı hem boş metni "seçim yok" sayar (Ders 12'deki doğru sayılan ve yanlış sayılan değerler).

#arayuz.js'ye detay kısmı

js/arayuz.js'nin 1. satırını, büyük resim adresini de alacak şekilde değiştir:

1import { kareResim, buyukResim } from "./api.js"

Dosyanın en sonuna, hataGoster'ın altına bir boş satır bırakıp şunu ekle:

77const OLCULER = [78    ["Saldırı", "attack"],79    ["Savunma", "defense"],80    ["Büyü", "magic"],81    ["Zorluk", "difficulty"]82]83 84export function detayiCiz(sampiyon) {85    const resim = document.querySelector("#detay-resim")86    resim.src = buyukResim(sampiyon)87    resim.alt = `${sampiyon.name} çizimi`88    document.querySelector("#detay-ad").textContent = sampiyon.name89    document.querySelector("#detay-unvan").textContent = sampiyon.title90    document.querySelector("#detay-roller").textContent = rolleriYaz(sampiyon.tags)91    document.querySelector("#detay-hikaye").textContent = sampiyon.lore92 93    const olculer = document.querySelector("#detay-olculer")94    for (const [ad, anahtar] of OLCULER) {95        const olcu = oge("meter")96        olcu.max = 1097        olcu.value = sampiyon.info[anahtar]98        const deger = oge("dd")99        deger.append(olcu, ` ${sampiyon.info[anahtar]}/10`)100        olculer.append(oge("dt", "", ad), deger)101    }102 103    const yetenekler = document.querySelector("#detay-yetenekler")104    yetenekler.append(oge("li", "", `Pasif: ${sampiyon.passive.name}`))105    sampiyon.spells.forEach((yetenek, sira) => {106        yetenekler.append(oge("li", "", `${"QWER"[sira]}: ${yetenek.name}`))107    })108 109    const ipuclari = document.querySelector("#detay-ipuclari")110    if (sampiyon.allytips.length === 0) {111        ipuclari.append(oge("li", "", "Bu şampiyon için ipucu yok."))112    }113    for (const ipucu of sampiyon.allytips) {114        ipuclari.append(oge("li", "", ipucu))115    }116}

• İskelet HTML'de, veri JavaScript'te. Detayın başlıkları ve kutuları index.html'de zaten duruyor; burada yalnızca içlerini dolduruyoruz. Listede kart sayısı değiştiği için kartları JavaScript ile üretmek zorundaydık; detayda yapı hep aynı.
• alt: Burada resim süs değil; şampiyonun nasıl göründüğünü anlatıyor. Bu yüzden boş bırakmadık.
• OLCULER ve for…of ile parçalama: Dört ölçü için dört kez aynı kodu yazmak yerine [ekrandaki ad, verideki anahtar] çiftlerinden bir dizi kurduk ve döngüde Ders 12'deki dizi parçalamayla açtık. Her tur <dl>'ye bir <dt> ve bir <dd> ekler.
• <meter>: HTML'in hazır ölçü çubuğu; max ve value vermen yeter. Yanına sayıyı da yazdık, çünkü çubuğun doluluğunu herkes aynı rahatlıkla okuyamaz. append'e öğe ile metni birlikte verebilirsin (Ders 23'teki " " gibi).
• "QWER"[sira]: Metinler de dizi gibi sırayla okunabilir (Ders 9). Data Dragon yetenekleri Q, W, E, R sırasıyla verir; forEach'in ikinci parametresi sıra numarasıdır (Ders 11). sira 0 iken "Q", 3 iken "R" olur.
• Boş ipucu listesi: Bu ders yazılırken 173 şampiyonun 24'ünün ipucu listesi boştu. Boş bir başlığın altında hiçbir şey göstermemek yerine bunu söylüyoruz.

Detay her açılışta yeni bir sayfa yüklemesiyle çizildiği için listeleri önce boşaltmamız gerekmiyor. Aynı sayfada ikinci kez çağrılsaydı yetenekler iki kez eklenirdi; Ders 24'te liste.textContent = "" satırını unutunca kartların üst üste eklenmesinin kardeşi.

#uygulama.js'ye detay kısmı

js/uygulama.js'nin ilk iki satırına detay için gereken iki adı ekle:

1import { sonSurumuGetir, sampiyonlariGetir, sampiyonGetir } from "./api.js"2import { listeyiCiz, favoriDugmesiniAyarla, mesajGoster, hataGoster, detayiCiz } from "./arayuz.js"

Dosyanın sonundaki listeyiAc() satırını sil ve yerine şunu yaz:

90async function detayiAc(id) {91    document.querySelector("#detay-gorunumu").hidden = false92    mesajGoster("Şampiyon yükleniyor…")93    try {94        const surum = await sonSurumuGetir()95        const sampiyon = await sampiyonGetir(surum, id)96        detayiCiz(sampiyon)97        document.title = `${sampiyon.name} · Şampiyon Ansiklopedisi`98        document.querySelector("#detay").hidden = false99        mesajGoster("")100    } catch (hata) {101        console.error(hata)102        hataGoster(`"${id}" yüklenemedi. Adresteki adı (büyük-küçük harf dahil) ve bağlantını kontrol et.`)103    }104}105 106const parametreler = new URLSearchParams(location.search)107const secilenId = parametreler.get("id")108 109if (secilenId) {110    detayiAc(secilenId)111} else {112    listeyiAc()113}

• parametreler satırından dosyanın sonuna kadarki kısım uygulamanın kapısı: adreste id varsa detayı, yoksa listeyi açar.
• Önce bölümü, sonra içeriği göster: detay-gorunumu hemen açılıyor; böylece "← Tüm şampiyonlar" bağlantısı yüklenirken de, hata çıkarsa da ekranda. Bilgi kartı (#detay) ise ancak veri gelince görünüyor; boş iskelet hiç görünmüyor.
• document.title: Tarayıcı sekmesindeki başlık "Ahri · Şampiyon Ansiklopedisi" olur. Birden çok sekme açan kullanıcı hangisinin ne olduğunu görür; geçmiş ve yer imleri de bu adı kullanır.
• Hata mesajında id: Adresi kullanıcı yazabilir, yani id her şey olabilir. Mesajı textContent ile yazdığımız için içine etiket koyan biri de bir şey çalıştıramaz (XSS).

#Kontrol noktası 3: detay ve geri tuşu

Sayfayı yenile ve Ahri'nin kartına tıkla:

127.0.0.1:5500/index.html?id=Ahri

Şimdi tarayıcının geri tuşuna bas: listeye dönersin. Bunun için tek satır kod yazmadık. Kartlar gerçek bağlantı olduğu için her tıklama yeni bir sayfa açar ve tarayıcı geçmişe ekler; geri tuşu da bir önceki sayfayı yeniden açar.

Listeyi nasıl bulacağın tarayıcıya bağlı. Tarayıcı sayfayı bellekte tuttuysa (geri-ileri önbelleği, İngilizcesiyle back/forward cache) aramanı ve filtreni bıraktığın gibi bulursun; tutmadıysa sayfa baştan yüklenir ve filtreler sıfırlanmış gelir. İkisi de tutarlı; formdaki autocomplete="off" tutarsız bir üçüncü hâli önlemek için orada.

"← Tüm şampiyonlar" bağlantısının adresi ./: "bu klasörün kendisi", yani sorgu olmayan aynı sayfa. Geri tuşundan farkı şu: biri detay sayfasını doğrudan bir bağlantıdan açtıysa geri tuşu onu senin sitenden çıkarır, bu bağlantı ise her zaman listeye götürür.

Son olarak adres çubuğuna elle http://127.0.0.1:5500/index.html?id=ahri (küçük harfle) yazıp aç. Ekranda bizim hata mesajımız çıkar; konsolda da şunlar:

Failed to load resource: the server responded with a status of 403 (Forbidden)Error: İstek başarısız (403): https://ddragon.leagueoflegends.com/cdn/16.20.1/data/tr_TR/champion/ahri.json    at jsonGetir (http://127.0.0.1:5500/js/api.js:6:15)    at async sampiyonGetir (http://127.0.0.1:5500/js/api.js:24:18)    at async detayiAc (http://127.0.0.1:5500/js/uygulama.js:95:26)

Ders 24'te gördüğün gibi Data Dragon'da dosya adları büyük-küçük harfe duyarlı ve olmayan dosya için "bulunamadı" (404) yerine "yasak" (403) dönüyor. Hangisi gelirse gelsin yanit.ok false olur ve jsonGetir hata fırlatır; hata mesajına eklediğimiz adres de tam olarak hangi dosyanın istendiğini gösteriyor. Aynı hatayı ?id=Wukong ile de görürsün: Wukong'un id'si MonkeyKing. Kartlardaki bağlantılar id kullandığı için tıklayınca sorun çıkmaz; elle yazılan adreslerde çıkar.

Uncaught SyntaxError: The requested module './api.js' does not provide an export named 'sampiyonuGetir'

#Erişilebilirlik ve mobil kontrol listesi

Sayfan senin ekranında, senin farenle çalışıyor. Ama onu açacak herkes senin gibi değil: kimi fareyi kullanamaz ve yalnızca klavyeyle gezer; kimi görme engellidir ve sayfayı bir ekran okuyucu sesli okur; kimi güneşin altında telefondan bakar. Erişilebilirlik onlar için de çalışmak demek. İş görüşmelerinde de sorulur; projeni gösterirken "klavyeyle de kullanılabiliyor" demek fark yaratır.

Aşağıdaki listeyi her projenin sonunda tek tek yap:

#Klavye ve odak

Sayfayı aç, fareye dokunmadan Tab'a art arda bas. Bizim sayfamızda gerçek sıra şöyle çıktı:

1. Logodaki "Şampiyon Ansiklopedisi" bağlantısı
2. Arama kutusu
3. Rol seçimi
4. "Yalnız favoriler" kutusu
5. Aatrox kartının bağlantısı
6. Aatrox'un yıldızı ("Favori: Aatrox")
7. Ahri kartının bağlantısı, sonra Ahri'nin yıldızı ve böyle devam eder

Sıra, öğelerin HTML'deki sırasıdır; bu yüzden kartta bağlantıyı önce, yıldızı sonra yazdık. Odaktaki öğenin çevresinde mor çerçeve görünür:

liste.addEventListener("click", (olay) => {    const dugme = olay.target.closest(".favori")    if (!dugme) {        return    }    favoriDegistir(dugme.dataset.id)    listeyiGuncelle()})

#Kontrast

Ders 20'de kontrast oranını ve 4,5:1 sınırını görmüştün. Açık gri yazı şık görünür ama birçok kişi için okunmaz: ekranı parlak olmayan bir laptopta, güneş altında ya da gözü yorgun biri için. Renklerimizin oranlarını hesapladık; her rengi, sayfada üstünde durduğu zeminle ölçtük:

Kendi renklerini Ders 20'deki gibi denetle: yazının üstüne sağ tıklayıp İncele (Inspect) de, Styles bölümünde renk karesine tıkla; açılan renk seçicideki Contrast ratio satırı oranı gösterir (arayüz Chrome sürümüne göre biraz değişmiş olabilir). Çerçeveler için kural daha gevşek: bir giriş kutusunun kenarı arka planla en az 3:1 olmalı; biz kutu kenarlarında soluk yazı rengini kullandık.

#Telefon

Geliştirici araçlarında Ctrl+Shift+M cihaz araç çubuğunu açar; üstteki genişliği 390 yaparsan sayfayı bir telefon ekranında görürsün. Bizim sayfamız 390 pikselde böyle:

Bakacağın üç şey: sayfa yana kaymamalı (alttaki kaydırma çubuğu çıkmamalı), yazılar yakınlaştırmadan okunmalı ve parmakla basılacak her şey en az 44×44 piksel olmalı. Bizim denememizde 390 piksellik pencerede sayfanın genişliği de tam 390 pikseldi ve yıldızlar 44×44 çıktı. <head>'deki <meta name="viewport"> satırını unutursan telefon sayfayı masaüstü genişliğinde çizip küçültür; her şey karınca kadar görünür (Ders 21).

#Yayına almak: GitHub Pages

Uygulaman şimdilik yalnızca senin bilgisayarında çalışıyor. Başkalarının da açabilmesi için dosyaları internette sürekli açık duran bir sunucuya koyman gerekiyor.

GitHub Pages, GitHub'ın statik siteler için ücretsiz yayın hizmeti. Depona koyduğun dosyaları https://kullaniciadin.github.io/depoadi/ adresinde yayınlar. Ücretsiz hesapta deponun herkese açık (Public) olması gerekir. Sunucuda kod çalıştırman gerekseydi Pages yetmezdi; Ders 32'de o tür uygulamaları başka yerlerde yayına alacağız.

İlk adımın komutları. VS Code terminali C:\kod\ansiklopedi klasöründe olmalı; Node denemelerinden sonra hâlâ C:\kod\ogren'deysen önce cd C:\kod\ansiklopedi yaz. Bu klasör yeni, bu yüzden Git'i burada ilk kez başlatıyoruz:

GitHub'da depoyu açınca sayfada gösterilen komutların aynısı (Ders 17'de de bunları kullandın). KULLANICI yerine kendi GitHub kullanıcı adını yaz:

PS C:\kod\ansiklopedi> git remote add origin https://github.com/KULLANICI/ansiklopedi.gitPS C:\kod\ansiklopedi> git branch -M mainPS C:\kod\ansiklopedi> git push -u origin main# İlk gönderimde tarayıcıda GitHub'a giriş isteyebilir (Ders 7'deki gibi).

git branch -M main dalın adını master'dan main'e çevirir; Pages ayarında seçeceğin dal bu. -u ise "bundan sonra git push yazınca buraya gönder" demek.

#Göreli yol tuzağı

Siten açıldı ama tasarım yok, sayfada yalnızca mavi bir bağlantı ve "Yükleniyor…" yazısı var mı? Yayına alırken en sık çıkan sorun bu ve sebebi tek bir karakter: yolun başındaki /.

Bilgisayarında sayfan sunucunun kök klasöründe duruyordu: 127.0.0.1:5500/index.html. Pages'te ise bir alt klasörde: kullanici.github.io/ansiklopedi/. Göreli yol (stil.css) bulunduğun klasörden başlar. Başında / olan bir yol ise "alan adının köküne git" demektir ve alt klasörü atlar. ders25.js ile hesapla:

1const sayfa = "https://kullanici.github.io/ansiklopedi/"2console.log(new URL("stil.css", sayfa).href)3console.log(new URL("/stil.css", sayfa).href)4console.log(new URL("?id=Ahri", sayfa).href)5 6const yerel = "http://127.0.0.1:5500/index.html"7console.log(new URL("stil.css", yerel).href)8console.log(new URL("/stil.css", yerel).href)

https://kullanici.github.io/ansiklopedi/stil.csshttps://kullanici.github.io/stil.csshttps://kullanici.github.io/ansiklopedi/?id=Ahrihttp://127.0.0.1:5500/stil.csshttp://127.0.0.1:5500/stil.css

Son iki satır, hatanın neden senin bilgisayarında hiç görünmediğini açıklıyor: kökte duran bir sayfa için stil.css ile /stil.css aynı yere gider.

Bu derste bütün yolları baştan doğru yazdık: stil.css, js/uygulama.js, ./, ?id=…. Hiçbirinin başında / yok. Ama internetteki örneklerin çoğu / ile başlar ve onları kopyalayınca tuzağa düşersin.

Sık hataPages'te stil ve betik gelmiyor: 404 (Not Found)

Ne zaman çıkar? index.html'de yolları / ile başlatınca: href="/stil.css", src="/js/uygulama.js". Bilgisayarında her şey çalışır; Pages'te sayfa çıplak HTML gibi görünür ve "Yükleniyor…" takılı kalır.

Pages'teki durumu bilgisayarında da görebilirsin: terminalde cd C:\kod ile bir üst klasöre geç, orada npx serve çalıştır ve http://localhost:3000/ansiklopedi/ adresini aç. Böylece sayfan Pages'teki gibi bir alt klasörde durur. Sondaki / önemli: Pages onu kendisi ekler, serve eklemez; /ansiklopedi yazarsan doğru sürüm de bozuk görünür. Bozuk sürümü böyle açtığımızda gördüğümüz:

localhost:3000/ansiklopedi/

Failed to load resource: the server responded with a status of 404 (Not Found)Failed to load resource: the server responded with a status of 404 (Not Found)

Network sekmesi iki kırmızı satırda adresleri gösterir: localhost:3000/stil.css ve localhost:3000/js/uygulama.js. İkisinde de ansiklopedi/ yok. (Bir de favicon.ico için üçüncü bir 404 görebilirsin; o her zamanki zararsız satır.)

Nasıl düzelir? Yolların başındaki /'yi sil: href="stil.css", src="js/uygulama.js". Kaydet, git add ., git commit, git push yap; Pages birkaç dakika içinde yeni sürümü yayınlar. Sunucuyu terminalde Ctrl+C ile durdurmayı unutma.

#README: ekran görüntüsü ve canlı bağlantı

Deponu açan biri (sen bir yıl sonra, bir arkadaşın ya da bir işveren) ilk olarak README'yi görür. Ders 7'de README'yi ve Markdown'ı, Ders 17'de iyi bir README'nin cevapladığı soruları gördün. Bir web projesinin README'sinde iki şey daha olmalı: tıklanabilir canlı bağlantı ve bir ekran görüntüsü.

Ekran görüntüsü almak: Canlı sitende güzel görünen bir an seç; birkaç kartı favorile ki yıldızlar görünsün. Windows'ta Win+Shift+S ile Ekran Alıntısı Aracı açılır; sayfanın alanını fareyle seç. Köşede çıkan bildirime tıkla ve açılan pencerede Ctrl+S ile proje klasöründe yeni açacağın img klasörüne ekran.png adıyla kaydet. İstersen Chrome'un geliştirici araçlarında Ctrl+Shift+P ile komut menüsünü açıp "screenshot" yazarak da görüntü alabilirsin (menü adları sürüme göre değişebilir).

Sonra proje klasörünün köküne README.md dosyasını oluştur:

1# Şampiyon Ansiklopedisi2 3League of Legends şampiyonlarını listeleyen, arayan, role göre süzen ve favorilere ekleyen küçük bir web uygulaması. Veriler Riot Games'in herkese açık Data Dragon servisinden gelir.4 5**Canlı sürüm:** https://KULLANICI.github.io/ansiklopedi/6 7![Liste görünümü: arama kutusu, rol filtresi ve şampiyon kartları](img/ekran.png)8 9## Özellikler10 11- Ada ya da unvana göre arama (Türkçe I ve ı harfleri doğru eşleşir)12- Rol filtresi ve yalnız favorileri gösterme13- Favoriler tarayıcıda saklanır (localStorage)14- Her şampiyonun kendi adresi var: `?id=Ahri`15- Telefonda da çalışır, klavyeyle gezilebilir16 17## Kullanılanlar18 19HTML, CSS (grid ve flexbox), JavaScript (ES modülleri, fetch, localStorage). Kütüphane yok.20 21## Bilgisayarında çalıştırmak22 231. Depoyu indir ve klasörü VS Code'da aç.242. Sayfayı Live Server ile aç ya da klasörde `npx serve` komutunu çalıştır.253. `index.html`'e çift tıklayarak açma: modüller `file://` adresinde çalışmaz.26 27## Neler öğrendim?28 29Bir projeyi özellik listesi ve tel kafesle planlamayı, kodu tarayıcıda ES modüllerine bölmeyi, seçimi adreste tutmayı (`URLSearchParams`), erişilebilirlik denetimini ve GitHub Pages ile yayına almayı.30 31---32 33Şampiyon Ansiklopedisi was created under Riot Games' "Legal Jibber Jabber" policy using assets owned by Riot Games. Riot Games does not endorse or sponsor this project.

• Canlı bağlantı en üstte. README'yi okuyan çoğu kişi yalnızca ilk ekranı görür. KULLANICI yerine kendi adını yazmayı unutma ve bağlantıya bir kez tıklayıp çalıştığından emin ol.
• Resim: ![alt metin](yol). Bağlantı yazımının başına ! koyunca Markdown resmi gösterir. Köşeli parantezdeki metin resmin alt metni; README'de de erişilebilirlik geçerli.
• Resmin yolu img/ekran.png: README'deki yollar da göreli; GitHub onları README dosyasının bulunduğu yere göre çözer. Başına / koymadık.
• Riot notu en altta. Depo sayfası da projenin bir yüzü; not orada da görünsün.

Bağlantıyı deponun ana sayfasında da göster: sağdaki About kutusunun dişli simgesine tıkla, açılan pencerede Website alanına site adresini yaz ve kaydet (arayüz değişmiş olabilir). Depo listesinde ve aramalarda projenin yanında bu bağlantı görünür.

Son olarak kaydet ve gönder. Pages, her git push'tan sonra siteyi kendiliğinden yeniden yayınlar:

PS C:\kod\ansiklopedi> git add .PS C:\kod\ansiklopedi> git commit -m "README: ekran görüntüsü ve canlı bağlantı"[main 28b4eef] README: ekran görüntüsü ve canlı bağlantı 2 files changed, 33 insertions(+) create mode 100644 README.md create mode 100644 img/ekran.pngPS C:\kod\ansiklopedi> git push

Resim dosyası satırlardan oluşmadığı için 33 insertions yalnızca README'nin satırları. Tebrik etmek için erken; önce dene. Canlı adresi telefonunda aç, bir şampiyonu favorile, detayına git, geri dön. Bu dört adım telefonda da çalışıyorsa Blok 3'ün projesini bitirdin: internette, gerçek veriyle çalışan, herkesin açabildiği bir uygulaman var.

#Görevler

Her görev projeyi bir özellikle büyütüyor. Görevleri sırayla yap; hepsi aynı dosyalara ekleniyor, her birini bitirince sayfayı tarayıcıda dene. Hepsi bitince dersin sonundaki kutuyla kaydet (istersen her görevden sonra ayrı bir commit de alabilirsin). Takılırsan ipuçlarını sırayla aç; çözüme en son bak.

1const gorunenler = []2const sira = Math.floor(Math.random() * gorunenler.length)3console.log(sira, gorunenler[sira])4console.log(gorunenler[sira].id)

0 undefinedC:\kod\ogren\ders25.js:4console.log(gorunenler[sira].id)                             ^ TypeError: Cannot read properties of undefined (reading 'id')    at Object.<anonymous> (C:\kod\ogren\ders25.js:4:30)    ... Node.js v24.20.0