` öğesi boştur, yani içine bir içerik eklenene kadar ekranda hiçbir şey görüntülenmeyecektir. Ayrıca, JavaScript ile kolayca alabilmek için bir `id` veriyoruz. `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 basittir: bir öğe *id*'si ve *metin* verildiğinde, eşleşen `id`'ye sahip DOM öğesinin metin içeriğini günceller. Bu yöntemi `login` fonksiyonundaki önceki hata mesajının yerine kullanalım: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Şimdi geçersiz bir hesapla giriş yapmaya çalışırsanız, şu şekilde bir şey görmelisiniz:  Artık görsel olarak bir hata metni görüntüleniyor, ancak bunu bir ekran okuyucuyla denerseniz hiçbir şeyin duyurulmadığını fark edeceksiniz. Bir sayfaya dinamik olarak eklenen metnin ekran okuyucular tarafından duyurulabilmesi için, [Canlı Bölge](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) adı verilen bir şey kullanılması gerekir. Burada, bir uyarı adı verilen özel bir canlı bölge türü kullanacağız: ```html ``` Aynı davranışı `register` fonksiyonundaki hatalar için de uygulayın (HTML'yi güncellemeyi unutmayın). ## Gösterge Tablosunda Bilgi Görüntüleme Az önce gördüğümüz teknikleri kullanarak, gösterge tablosu sayfasında hesap bilgilerini görüntüleme işini de halledeceğiz. Sunucudan alınan bir hesap nesnesi şu şekilde görünür: ```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: İşinizi kolaylaştırmak için, önceden doldurulmuş verilerle birlikte gelen `test` hesabını kullanabilirsiniz. ### Görev HTML'deki "Bakiye" bölümünü yer tutucu öğeler eklemek için değiştirmekle başlayalım: ```html

Balance:

``` Ayrıca, hesap açıklamasını görüntülemek için hemen altına yeni bir bölüm ekleyelim: ```html

``` ✅ Hesap açıklaması, altındaki içerik için bir başlık işlevi gördüğünden, 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ında yer tutucuyu doldurmak için yeni bir fonksiyon oluşturalı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. Daha sonra, daha önce oluşturduğumuz `updateElement()` fonksiyonunu kullanarak HTML'yi güncelliyoruz. > Bakiyeyi daha güzel bir şekilde görüntülemek 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, gösterge tablosu her yüklendiğinde `updateDashboard()` fonksiyonumuzu çağırmamız gerekiyor. Eğer [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ımını şu şekilde güncelleyin: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` Bu değişiklikle, gösterge tablosu sayfası her görüntülendiğinde `updateDashboard()` fonksiyonu çağrılır. Bir girişten sonra, hesap bakiyesini, para birimini ve açıklamayı görebilmelisiniz. ## HTML Şablonlarıyla Dinamik Olarak Tablo Satırları Oluşturma [İlk derste](../1-template-route/README.md), uygulamamızdaki gezinmeyi 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örüntülemek için kullanacağız. ### Görev HTML `` bölümüne yeni bir şablon ekleyin: ```html ``` Bu şablon, bir işlem için *tarih*, *nesne* ve *tutar* sütunlarını doldurmak üzere kullanacağımız tek bir tablo satırını temsil eder. Ardından, JavaScript ile daha kolay bulabilmek için gösterge tablosundaki 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, adından da anlaşılacağı gibi, daha önce oluşturduğumuz şablonu kullanarak yeni bir tablo satırı oluşturur ve işlem verilerini kullanarak içeriğini doldurur. Bunu, tabloyu doldurmak için `updateDashboard()` fonksiyonumuzda 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 bunu 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 hem metin hem de [DOM Düğümleri](https://developer.mozilla.org/docs/Web/API/Node) eklememize 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ının ö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.