` นี้ว่างเปล่า หมายความว่าจะไม่มีอะไรแสดงบนหน้าจอจนกว่าเราจะเพิ่มเนื้อหาให้กับมัน เราให้ `id` เพื่อให้สามารถดึงข้อมูลได้ง่ายด้วย JavaScript กลับไปที่ไฟล์ `app.js` และสร้างฟังก์ชันช่วยเหลือใหม่ `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` ฟังก์ชันนี้ค่อนข้างตรงไปตรงมา: เมื่อได้รับ *id* และ *text* ขององค์ประกอบ มันจะอัปเดตข้อความขององค์ประกอบ DOM ที่มี `id` ตรงกัน มาใช้เมธอดนี้แทนข้อความข้อผิดพลาดในฟังก์ชัน `login`: ```js if (data.error) { return updateElement('loginError', data.error); } ``` ตอนนี้หากคุณพยายามเข้าสู่ระบบด้วยบัญชีที่ไม่ถูกต้อง คุณควรเห็นบางอย่างเช่นนี้:  ตอนนี้เรามีข้อความข้อผิดพลาดที่แสดงขึ้นมาให้เห็น แต่หากคุณลองใช้กับ screen reader คุณจะสังเกตเห็นว่าไม่มีอะไรถูกประกาศออกมา เพื่อให้ข้อความที่เพิ่มเข้ามาในหน้าแบบไดนามิกถูกประกาศโดย screen reader เราจำเป็นต้องใช้สิ่งที่เรียกว่า [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) ที่นี่เราจะใช้ประเภทของ live region ที่เรียกว่า alert: ```html ``` นำพฤติกรรมเดียวกันนี้ไปใช้กับข้อผิดพลาดในฟังก์ชัน `register` (อย่าลืมอัปเดต HTML) ## แสดงข้อมูลในแดชบอร์ด ใช้เทคนิคเดียวกับที่เราเพิ่งเรียนรู้ เราจะดูแลการแสดงข้อมูลบัญชีในหน้าแดชบอร์ด นี่คือลักษณะของออบเจ็กต์บัญชีที่ได้รับจากเซิร์ฟเวอร์: ```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 } ], } ``` > หมายเหตุ: เพื่อให้ง่ายขึ้น คุณสามารถใช้บัญชี `test` ที่มีข้อมูลอยู่แล้ว ### งาน เริ่มต้นด้วยการแทนที่ส่วน "Balance" ใน HTML เพื่อเพิ่มองค์ประกอบ placeholder: ```html

Balance:

``` เราจะเพิ่มส่วนใหม่ด้านล่างเพื่อแสดงคำอธิบายบัญชี: ```html

``` ✅ เนื่องจากคำอธิบายบัญชีทำหน้าที่เป็นหัวเรื่องสำหรับเนื้อหาด้านล่าง จึงถูกทำเครื่องหมายว่าเป็น heading อย่างเหมาะสม เรียนรู้เพิ่มเติมเกี่ยวกับ [โครงสร้างหัวเรื่อง](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) ที่สำคัญต่อการเข้าถึง และพิจารณาโครงสร้างของหน้าอย่างวิจารณญาณเพื่อดูว่าส่วนใดควรเป็นหัวเรื่อง ถัดไป เราจะสร้างฟังก์ชันใหม่ใน `app.js` เพื่อเติมข้อมูลใน placeholder: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` เริ่มต้นด้วยการตรวจสอบว่าเรามีข้อมูลบัญชีที่ต้องการก่อนดำเนินการต่อ จากนั้นใช้ฟังก์ชัน `updateElement()` ที่เราสร้างขึ้นก่อนหน้านี้เพื่ออัปเดต HTML > เพื่อให้การแสดงยอดเงินดูสวยงามขึ้น เราใช้เมธอด [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) เพื่อบังคับให้แสดงค่าด้วยทศนิยม 2 ตำแหน่ง ตอนนี้เราต้องเรียกฟังก์ชัน `updateDashboard()` ทุกครั้งที่โหลดหน้าแดชบอร์ด หากคุณทำ [งานในบทเรียนที่ 1](../1-template-route/assignment.md) เสร็จแล้ว นี่ควรเป็นเรื่องง่าย มิฉะนั้นคุณสามารถใช้การดำเนินการต่อไปนี้ เพิ่มโค้ดนี้ที่ท้ายฟังก์ชัน `updateRoute()`: ```js if (typeof route.init === 'function') { route.init(); } ``` และอัปเดตการกำหนดเส้นทางด้วย: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` ด้วยการเปลี่ยนแปลงนี้ ทุกครั้งที่แสดงหน้าแดชบอร์ด ฟังก์ชัน `updateDashboard()` จะถูกเรียก หลังจากเข้าสู่ระบบ คุณควรจะสามารถเห็นยอดเงินในบัญชี สกุลเงิน และคำอธิบายได้ ## สร้างแถวในตารางแบบไดนามิกด้วย HTML templates ใน [บทเรียนแรก](../1-template-route/README.md) เราใช้ HTML templates ร่วมกับเมธอด [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) เพื่อสร้างการนำทางในแอปของเรา Templates ยังสามารถมีขนาดเล็กลงและใช้เพื่อเติมส่วนที่ซ้ำๆ ของหน้าแบบไดนามิกได้ เราจะใช้วิธีการเดียวกันนี้เพื่อแสดงรายการธุรกรรมในตาราง HTML ### งาน เพิ่ม template ใหม่ใน `` ของ HTML: ```html ``` Template นี้แสดงถึงแถวในตารางหนึ่งแถว โดยมี 3 คอลัมน์ที่เราต้องเติม: *date*, *object* และ *amount* ของธุรกรรม จากนั้นเพิ่มพร็อพเพอร์ตี `id` ให้กับองค์ประกอบ `` ของตารางใน template แดชบอร์ดเพื่อให้ง่ายต่อการค้นหาโดยใช้ JavaScript: ```html ``` HTML ของเราพร้อมแล้ว ไปที่โค้ด JavaScript และสร้างฟังก์ชันใหม่ `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; } ``` ฟังก์ชันนี้ทำในสิ่งที่ชื่อบอกไว้: โดยใช้ template ที่เราสร้างขึ้นก่อนหน้านี้ มันสร้างแถวในตารางใหม่และเติมเนื้อหาด้วยข้อมูลธุรกรรม เราจะใช้สิ่งนี้ในฟังก์ชัน `updateDashboard()` เพื่อเติมข้อมูลในตาราง: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` ที่นี่เราใช้เมธอด [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) ซึ่งสร้าง fragment DOM ใหม่ที่เราสามารถทำงานได้ ก่อนที่จะผนวกเข้ากับตาราง HTML ของเราในที่สุด ยังมีสิ่งหนึ่งที่เราต้องทำก่อนที่โค้ดนี้จะทำงานได้ เนื่องจากฟังก์ชัน `updateElement()` ของเราปัจจุบันรองรับเฉพาะข้อความเท่านั้น มาเปลี่ยนโค้ดของมันเล็กน้อย: ```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) เนื่องจากช่วยให้สามารถแนบข้อความหรือ [DOM Nodes](https://developer.mozilla.org/docs/Web/API/Node) กับองค์ประกอบแม่ได้ ซึ่งเหมาะสมกับทุกกรณีการใช้งานของเรา หากคุณลองใช้บัญชี `test` เพื่อเข้าสู่ระบบ ตอนนี้คุณควรจะเห็นรายการธุรกรรมบนแดชบอร์ดแล้ว 🎉 --- ## 🚀 ความท้าทาย ทำงานร่วมกันเพื่อทำให้หน้าแดชบอร์ดดูเหมือนแอปธนาคารจริง หากคุณได้ออกแบบแอปของคุณแล้ว ลองใช้ [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) เพื่อสร้าง [responsive design](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) ที่ทำงานได้ดีทั้งบนอุปกรณ์เดสก์ท็อปและมือถือ นี่คือตัวอย่างของหน้าแดชบอร์ดที่ได้รับการออกแบบ:  ## แบบทดสอบหลังการบรรยาย [แบบทดสอบหลังการบรรยาย](https://ff-quizzes.netlify.app/web/quiz/46) ## งานที่ได้รับมอบหมาย [ปรับปรุงและใส่คอมเมนต์ในโค้ดของคุณ](assignment.md) --- **ข้อจำกัดความรับผิดชอบ**: เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามอย่างเต็มที่เพื่อให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นทางควรถูกพิจารณาเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่มีความสำคัญ แนะนำให้ใช้บริการแปลภาษามนุษย์ที่เป็นมืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้