` öğesi boş, yani ekrana hiçbir şey gösterilmeyecek. Ancak JavaScript ile içerik eklediğimizde görünür hale gelecek. Ayrıca `id` özelliği ekleyerek JavaScript ile kolayca erişilebilir hale getiriyoruz. `app.js` dosyasına geri dönün ve yeni bir yardımcı fonksiyon `updateElement` oluşturun: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Bu fonksiyon oldukça basit: bir öğe *id* ve *metin* verildiğinde, DOM'daki eşleşen `id` öğesinin metin içeriğini günceller. Bu yöntemi `login` fonksiyonundaki önceki hata mesajı yerine kullanalım: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Şimdi geçersiz bir hesapla giriş yapmaya çalışırsanız, şöyle bir şey görmelisiniz:  Artık görsel olarak bir hata metni gösteriliyor, ancak bir ekran okuyucu ile denediğinizde hiçbir şeyin duyurulmadığını fark edeceksiniz. Bir sayfaya dinamik olarak eklenen metnin ekran okuyucular tarafından duyurulabilmesi için [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) adı verilen bir şey kullanılması gerekir. Burada bir uyarı olarak adlandırılan özel bir tür canlı bölge kullanacağız: ```html ``` Aynı davranışı `register` fonksiyon hataları için de uygulayın (HTML'yi güncellemeyi unutmayın). ## Gösterge panelinde bilgi gösterme Az önce gördüğümüz teknikleri kullanarak, hesap bilgilerini gösterge paneli sayfasında da göstereceğiz. Sunucudan alınan bir hesap nesnesi şu şekilde görünüyor: ```json { "user": "test", "currency": "$", "description": "Test account", "balance": 75, "transactions": [ { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 }, { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 }, { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 } ], } ``` > Not: işinizi kolaylaştırmak için, önceden doldurulmuş verilerle `test` hesabını kullanabilirsiniz. ### Görev HTML'deki "Bakiye" bölümünü yer tutucu öğeler eklemek için değiştirelim: ```html

Balance:

``` Ayrıca, hesap açıklamasını göstermek için hemen altına yeni bir bölüm ekleyeceğiz: ```html

``` ✅ Hesap açıklaması, altındaki içeriğin başlığı olarak işlev gördüğü için semantik olarak bir başlık olarak işaretlenmiştir. [Başlık yapısının](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) erişilebilirlik için neden önemli olduğunu öğrenin ve sayfayı eleştirel bir gözle inceleyerek başka nelerin başlık olabileceğini belirleyin. Şimdi `app.js` dosyasına yeni bir fonksiyon ekleyerek yer tutucuyu dolduralım: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Öncelikle, devam etmeden önce ihtiyacımız olan hesap verilerine sahip olduğumuzu kontrol ediyoruz. Ardından, daha önce oluşturduğumuz `updateElement()` fonksiyonunu kullanarak HTML'yi güncelliyoruz. > Bakiye görüntüsünü daha güzel hale getirmek için, değeri ondalık noktadan sonra 2 basamakla zorlamak için [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) yöntemini kullanıyoruz. Şimdi `updateDashboard()` fonksiyonumuzu her gösterge paneli yüklendiğinde çağırmamız gerekiyor. [Ders 1 ödevini](../1-template-route/assignment.md) zaten tamamladıysanız bu oldukça basit olmalı, aksi takdirde aşağıdaki uygulamayı kullanabilirsiniz. `updateRoute()` fonksiyonunun sonuna şu kodu ekleyin: ```js if (typeof route.init === 'function') { route.init(); } ``` Ve rota tanımlarını şu şekilde güncelleyin: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` Bu değişiklikle, her gösterge paneli sayfası görüntülendiğinde `updateDashboard()` fonksiyonu çağrılır. Giriş yaptıktan sonra hesap bakiyesini, para birimini ve açıklamayı görebilmelisiniz. ## HTML şablonlarıyla tablo satırlarını dinamik olarak oluşturma [Birinci derste](../1-template-route/README.md) uygulamamızdaki navigasyonu uygulamak için HTML şablonlarını ve [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) yöntemini kullandık. Şablonlar daha küçük olabilir ve bir sayfanın tekrarlayan bölümlerini dinamik olarak doldurmak için kullanılabilir. Aynı yaklaşımı HTML tablosundaki işlem listesini göstermek için kullanacağız. ### Görev HTML `` içinde yeni bir şablon ekleyin: ```html ``` Bu şablon, bir işlem için *tarih*, *nesne* ve *miktar* gibi 3 sütunu doldurmak istediğimiz tek bir tablo satırını temsil eder. Ardından, JavaScript ile kolayca bulabilmek için gösterge paneli şablonundaki tablonun `` öğesine şu `id` özelliğini ekleyin: ```html ``` HTML'miz hazır, şimdi JavaScript koduna geçelim ve yeni bir `createTransactionRow` fonksiyonu oluşturalım: ```js function createTransactionRow(transaction) { const template = document.getElementById('transaction'); const transactionRow = template.content.cloneNode(true); const tr = transactionRow.querySelector('tr'); tr.children[0].textContent = transaction.date; tr.children[1].textContent = transaction.object; tr.children[2].textContent = transaction.amount.toFixed(2); return transactionRow; } ``` Bu fonksiyon tam olarak adının ima ettiği şeyi yapar: daha önce oluşturduğumuz şablonu kullanarak yeni bir tablo satırı oluşturur ve işlem verilerini kullanarak içeriğini doldurur. Bunu `updateDashboard()` fonksiyonumuzda tabloyu doldurmak için kullanacağız: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Burada, üzerinde çalışabileceğimiz yeni bir DOM parçası oluşturan [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) yöntemini kullanıyoruz ve sonunda HTML tablomuzla iliştiriyoruz. Bu kodun çalışabilmesi için hala yapmamız gereken bir şey var, çünkü `updateElement()` fonksiyonumuz şu anda yalnızca metin içeriğini destekliyor. Kodunu biraz değiştirelim: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) yöntemini kullanıyoruz çünkü bu yöntem bir üst öğeye metin veya [DOM Düğümleri](https://developer.mozilla.org/docs/Web/API/Node) eklemeye olanak tanır, bu da tüm kullanım durumlarımız için mükemmeldir. Eğer `test` hesabını kullanarak giriş yapmayı denerseniz, artık kontrol panelinde bir işlem listesi görmelisiniz 🎉. --- ## 🚀 Meydan Okuma Birlikte çalışarak kontrol paneli sayfasını gerçek bir bankacılık uygulaması gibi görünmesini sağlayın. Eğer uygulamanızı zaten tasarladıysanız, [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) kullanarak hem masaüstü hem de mobil cihazlarda güzel çalışan bir [duyarlı tasarım](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) oluşturmayı deneyin. İşte tasarlanmış bir kontrol paneli sayfası örneği:  ## Ders Sonrası Test [Ders sonrası test](https://ff-quizzes.netlify.app/web/quiz/46) ## Ödev [Kodunuzu yeniden düzenleyin ve yorumlayın](assignment.md) --- **Feragatname**: Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalar için sorumluluk kabul etmiyoruz.