لمشاهدة نبذة عن محتوى الدرس تطبيق عملي WorkShop
 التلاعب بعناصر DOM باستخدام JavaScript في هذا الدرس، سنتعلم كيفية التلاعب بعناصر DOM (Document Object Model) باستخدام JavaScript. سنتناول كيفية الوصول إلى العناصر وتعديلها، وكذلك كيفية إضافة عناصر جديدة أو إزالة عناصر موجودة. مثال عملي: التحقق من درجات الطلاب سنبدأ بمثال تطبيقي يظهر كيفية التحقق من درجات الطلاب وعرض نسبة الدرجات باستخدام عناصر DOM.  الكود: ```javascript function checkListGrades() { var studentGradesList = document.getElementById('student_grades'); var totalGrades = 0, finalGrades = 0, studentScore = 0; for (var i = 0; i <= studentGradesList.childElementCount - 1; i++) { var _subject = studentGradesList.children[i], subjectData = _subject.dataset; totalGrades += Number(subjectData.grade); finalGrades += Number(subjectData.finalGrade); var progressSubject = document.createElement('progress'); progressSubject.setAttribute('max', subjectData.finalGrade); progressSubject.setAttribute('value', subjectData.grade); var heading_element = document.createElement('h3');…

لمشاهدة نبذة عن محتوى الدرس تطبيق عملي WorkShop
 التلاعب بعناصر DOM باستخدام JavaScript في هذا الدرس، سنتعلم كيفية التلاعب بعناصر DOM (Document Object Model) باستخدام JavaScript. سنتناول كيفية الوصول إلى العناصر وتعديلها، وكذلك كيفية إضافة عناصر جديدة أو إزالة عناصر موجودة. مثال عملي: التحقق من درجات الطلاب سنبدأ بمثال تطبيقي يظهر كيفية التحقق من درجات الطلاب وعرض نسبة الدرجات باستخدام عناصر DOM.  الكود: ```javascript function checkListGrades() { var studentGradesList = document.getElementById('student_grades'); var totalGrades = 0, finalGrades = 0, studentScore = 0; for (var i = 0; i <= studentGradesList.childElementCount - 1; i++) { var _subject = studentGradesList.children[i], subjectData = _subject.dataset; totalGrades += Number(subjectData.grade); finalGrades += Number(subjectData.finalGrade); var progressSubject = document.createElement('progress'); progressSubject.setAttribute('max', subjectData.finalGrade); progressSubject.setAttribute('value', subjectData.grade); var heading_element = document.createElement('h3');…