` elementas yra tuščias, tai reiškia, kad nieko nebus rodoma ekrane, kol nepridėsime turinio. Taip pat suteikiame jam `id`, kad galėtume lengvai jį gauti naudojant JavaScript. Grįžkite į `app.js` failą ir sukurkite naują pagalbinę funkciją `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Ši funkcija yra gana paprasta: pateikus elemento *id* ir *tekstą*, ji atnaujins DOM elemento tekstinį turinį, atitinkantį `id`. Naudokime šį metodą vietoj ankstesnio klaidos pranešimo `login` funkcijoje: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Dabar, jei bandysite prisijungti su neteisinga paskyra, turėtumėte matyti kažką panašaus:  Dabar turime klaidos tekstą, kuris vizualiai rodomas, tačiau jei bandysite jį naudoti su ekrano skaitytuvu, pastebėsite, kad nieko nėra pranešama. Kad tekstas, kuris dinamiškai pridedamas prie puslapio, būtų pranešamas ekrano skaitytuvams, jis turi naudoti vadinamąją [gyvąją sritį](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Čia naudosime specifinį gyvosios srities tipą, vadinamą pranešimu: ```html ``` Įgyvendinkite tą patį elgesį `register` funkcijos klaidoms (nepamirškite atnaujinti HTML). ## Informacijos rodymas prietaisų skydelyje Naudodami tas pačias technikas, kurias ką tik matėme, taip pat pasirūpinsime paskyros informacijos rodymu prietaisų skydelio puslapyje. Štai kaip atrodo paskyros objektas, gautas iš serverio: ```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 } ], } ``` > Pastaba: kad būtų lengviau, galite naudoti jau esamą `test` paskyrą, kuri jau yra užpildyta duomenimis. ### Užduotis Pradėkime nuo "Balanso" skyriaus pakeitimo HTML, kad pridėtume vietos rezervavimo elementus: ```html

Balance:

``` Taip pat pridėsime naują skyrių žemiau, kad rodytume paskyros aprašymą: ```html

``` ✅ Kadangi paskyros aprašymas veikia kaip turinio antraštė, jis semantiškai pažymėtas kaip antraštė. Sužinokite daugiau apie tai, kaip [antraščių struktūra](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) yra svarbi prieinamumui, ir kritiškai įvertinkite puslapį, kad nustatytumėte, kas dar galėtų būti antraštė. Tada sukursime naują funkciją `app.js` faile, kad užpildytume vietos rezervavimo elementus: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Pirma, patikriname, ar turime reikalingus paskyros duomenis, prieš tęsdami. Tada naudojame anksčiau sukurtą `updateElement()` funkciją, kad atnaujintume HTML. > Kad balanso rodymas būtų gražesnis, naudojame metodą [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed), kad priverstinai rodytume reikšmę su 2 skaitmenimis po kablelio. Dabar turime iškviesti mūsų `updateDashboard()` funkciją kiekvieną kartą, kai prietaisų skydelis yra įkeliamas. Jei jau baigėte [1 pamokos užduotį](../1-template-route/assignment.md), tai turėtų būti paprasta, kitaip galite naudoti šią įgyvendinimą. Pridėkite šį kodą `updateRoute()` funkcijos pabaigoje: ```js if (typeof route.init === 'function') { route.init(); } ``` Ir atnaujinkite maršrutų apibrėžimą su: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` Su šiuo pakeitimu, kiekvieną kartą, kai prietaisų skydelio puslapis yra rodomas, iškviečiama funkcija `updateDashboard()`. Po prisijungimo turėtumėte matyti paskyros balansą, valiutą ir aprašymą. ## Dinamiškas lentelės eilučių kūrimas naudojant HTML šablonus Pirmoje pamokoje](../1-template-route/README.md) naudojome HTML šablonus kartu su [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) metodu, kad įgyvendintume navigaciją mūsų programėlėje. Šablonai taip pat gali būti mažesni ir naudojami dinamiškai užpildyti pasikartojančias puslapio dalis. Naudosime panašų požiūrį, kad rodytume operacijų sąrašą HTML lentelėje. ### Užduotis Pridėkite naują šabloną HTML ``: ```html ``` Šis šablonas atspindi vieną lentelės eilutę su 3 stulpeliais, kuriuos norime užpildyti: *data*, *objektas* ir *suma* operacijos. Tada pridėkite šį `id` atributą prie `` elemento lentelėje prietaisų skydelio šablone, kad būtų lengviau jį rasti naudojant JavaScript: ```html ``` Mūsų HTML paruoštas, pereikime prie JavaScript kodo ir sukurkime naują funkciją `createTransactionRow`: ```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; } ``` Ši funkcija daro būtent tai, ką jos pavadinimas nurodo: naudodama anksčiau sukurtą šabloną, ji sukuria naują lentelės eilutę ir užpildo jos turinį naudodama operacijos duomenis. Naudosime tai mūsų `updateDashboard()` funkcijoje, kad užpildytume lentelę: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Čia naudojame metodą [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment), kuris sukuria naują DOM fragmentą, su kuriuo galime dirbti, prieš galiausiai jį prijungdami prie mūsų HTML lentelės. Dar yra vienas dalykas, kurį turime padaryti, kad šis kodas Jei bandysite prisijungti naudodami `test` paskyrą, dabar turėtumėte matyti operacijų sąrašą prietaisų skydelyje 🎉. --- ## 🚀 Iššūkis Dirbkite kartu, kad prietaisų skydelio puslapis atrodytų kaip tikra banko programėlė. Jei jau stilizavote savo programėlę, pabandykite naudoti [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries), kad sukurtumėte [responsyvų dizainą](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks), kuris gerai veiktų tiek staliniuose, tiek mobiliuosiuose įrenginiuose. Štai pavyzdys, kaip gali atrodyti stilizuotas prietaisų skydelio puslapis:  ## Po paskaitos testas [Po paskaitos testas](https://ff-quizzes.netlify.app/web/quiz/46) ## Užduotis [Refaktorizuokite ir pakomentuokite savo kodą](assignment.md) --- **Atsakomybės apribojimas**: Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.