` فارغ، مما يعني أنه لن يتم عرض أي شيء على الشاشة حتى نضيف محتوى له. كما نعطيه `id` حتى نتمكن من استرجاعه بسهولة باستخدام JavaScript. ارجع إلى ملف `app.js` وأنشئ وظيفة مساعدة جديدة `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` هذه الوظيفة بسيطة جدًا: بالنظر إلى *معرف العنصر* و*النص*، ستقوم بتحديث محتوى النص الخاص بعنصر DOM الذي يتطابق مع `id`. لنستخدم هذه الطريقة بدلاً من رسالة الخطأ السابقة في وظيفة `login`: ```js if (data.error) { return updateElement('loginError', data.error); } ``` الآن إذا حاولت تسجيل الدخول باستخدام حساب غير صالح، يجب أن ترى شيئًا مثل هذا:  الآن لدينا نص خطأ يظهر بصريًا، ولكن إذا جربته باستخدام قارئ شاشة ستلاحظ أنه لا يتم الإعلان عن أي شيء. لكي يتم الإعلان عن النص الذي يتم إضافته ديناميكيًا إلى الصفحة بواسطة قارئات الشاشة، يجب أن يستخدم شيئًا يسمى [منطقة حية (Live Region)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). هنا سنستخدم نوعًا معينًا من المناطق الحية يسمى تنبيه: ```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` الموجود مسبقًا والمليء بالبيانات. ### المهمة لنبدأ باستبدال قسم "الرصيد" في HTML لإضافة عناصر نائبة: ```html

Balance:

``` سنضيف أيضًا قسمًا جديدًا أسفل ذلك لعرض وصف الحساب: ```html

``` ✅ بما أن وصف الحساب يعمل كعنوان للمحتوى الموجود تحته، يتم ترميزه دلاليًا كعنوان. تعرف على المزيد حول كيفية أهمية [هيكل العناوين](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) لإمكانية الوصول، وألقِ نظرة نقدية على الصفحة لتحديد ما يمكن أن يكون عنوانًا أيضًا. بعد ذلك، سننشئ وظيفة جديدة في `app.js` لملء العناصر النائبة: ```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) لعرض القيمة مع رقمين عشريين بعد النقطة. الآن نحتاج إلى استدعاء وظيفة `updateDashboard()` الخاصة بنا في كل مرة يتم فيها تحميل لوحة التحكم. إذا كنت قد أكملت [مهمة الدرس الأول](../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 في [الدرس الأول](../1-template-route/README.md) استخدمنا قوالب HTML مع طريقة [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) لتنفيذ التنقل في تطبيقنا. يمكن أن تكون القوالب أصغر وتُستخدم أيضًا لملء الأجزاء المتكررة من الصفحة ديناميكيًا. سنستخدم نهجًا مشابهًا لعرض قائمة المعاملات في جدول HTML. ### المهمة أضف قالبًا جديدًا في `` الخاص بـ HTML: ```html ``` يمثل هذا القالب صفًا واحدًا في الجدول، مع الأعمدة الثلاثة التي نريد ملؤها: *التاريخ*، *العنصر* و*المبلغ* للمعاملة. ثم، أضف خاصية `id` إلى عنصر `` الخاص بالجدول داخل قالب لوحة التحكم لجعل العثور عليه أسهل باستخدام 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; } ``` تقوم هذه الوظيفة بما يوحي به اسمها: باستخدام القالب الذي أنشأناه سابقًا، تقوم بإنشاء صف جدول جديد وتملأ محتوياته باستخدام بيانات المعاملة. سنستخدم هذا في وظيفة `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) التي تنشئ جزءًا جديدًا من 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](https://developer.mozilla.org/docs/Web/API/Node) إلى عنصر رئيسي، وهو ما يناسب جميع حالات الاستخدام الخاصة بنا. إذا حاولت استخدام حساب `test` لتسجيل الدخول، يجب أن ترى الآن قائمة المعاملات على لوحة التحكم 🎉. --- ## 🚀 التحدي اعملوا معًا لجعل صفحة لوحة التحكم تبدو كأنها تطبيق مصرفي حقيقي. إذا كنت قد قمت بالفعل بتنسيق تطبيقك، حاول استخدام [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) لإنشاء [تصميم متجاوب](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) يعمل بشكل جيد على كل من أجهزة الكمبيوتر المكتبية والأجهزة المحمولة. إليك مثال على صفحة لوحة تحكم منسقة:  ## اختبار ما بعد المحاضرة [اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/46) ## الواجب [إعادة هيكلة وتعليق الكود الخاص بك](assignment.md) **إخلاء المسؤولية**: تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.