هذا الدرس من الدورة التدريبية: تعلم البرمجة من الصفر وتطوير صفحات الويب الإحترافية مع لغة جافاسكربت JavaScript
الدرس: تطبيق عملي 2 WorkShop
المدة: 23 دقائق
وصف مختصر:
التلاعب بعناصر DOM باستخدام JavaScript في هذا الدرس، سنتعلم كيفية التلاعب بعناصر DOM (Document Object Model) باستخدام JavaScript. و نقوم بتوضيح كيفية...
وصف الدرس
التلاعب بعناصر DOM باستخدام JavaScript
في هذا الدرس، سنتعلم كيفية التلاعب بعناصر DOM (Document Object Model) باستخدام JavaScript.
و نقوم بتوضيح كيفية الوصول إلى العناصر وتعديلها، وكذلك كيفية إضافة عناصر جديدة أو إزالة عناصر موجودة.
و سنشرح هذا من خلال مثال يوضح كيفية التحقق من درجات الطلاب وعرض النتيجة النهائية.
الكود:
```javascript
// الوصول إلى قائمة درجات الطلاب والتأكد من درجاتهم
var studentsGradesList = document.getElementsByClassName('student_grades');
for (var studentGrades of studentsGradesList) {
checkListGrades(studentGrades);
}
function checkListGrades(element) {
var studentGradesList = element;
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');
heading_element.innerText = _subject.innerText;
_subject.innerHTML = '';
_subject.append(progressSubject);
_subject.prepend(heading_element);
var smallReport = document.createElement('small'),
smallReportText = document.createTextNode(subjectData.grade + ' / ' + subjectData.finalGrade);
smallReport.append(smallReportText);
smallReport.style.padding = '0 10px';
smallReport.style.color = 'black';
heading_element.appendChild(smallReport);
var reportSubject = document.createElement('p'),
reportText = 'The student reaches ' + subjectData.grade + ' of ' + subjectData.finalGrade;
reportText = document.createTextNode(reportText);
reportSubject.append(reportText);
reportSubject.style.color = 'black';
reportSubject.hidden = true;
reportSubject.classList.add('moreText');
var moreOfReport = document.createElement('a');
moreOfReport.innerText = 'More';
moreOfReport.setAttribute('href', '#more');
moreOfReport.addEventListener('click', function () {
moreOfReport = this;
moreOfReport.parentElement.querySelector('.moreText').hidden = false;
moreOfReport.remove();
});
_subject.insertBefore(moreOfReport, _subject.lastElementChild);
_subject.lastElementChild.before(reportSubject);
}
studentScore = (totalGrades / finalGrades) * 100;
studentScore = Math.round(studentScore);
var total_percentage_element = document.createElement('h1'),
total_percentage_text = document.createTextNode(studentScore + '%');
total_percentage_element.append(total_percentage_text);
total_percentage_element.style.display = 'table';
total_percentage_element.style.margin = '0 auto';
total_percentage_element.style.paddingTop = '40px';
studentGradesList.before(total_percentage_element);
}
// تفعيل الطالب النشط وعرض تقريره
var students_list = document.getElementById('students_list');
for (var student of students_list.children) {
student.addEventListener('click', function () {
var _student = this,
_activeStudent = _student.parentElement.querySelector('.active');
_activeStudent.classList.remove('active');
_student.classList.add('active');
var student_report = document.querySelector('#student_report');
student_report.querySelector('.active').classList.remove('active');
var _targetedStudent = student_report.querySelector('.student-id-' + _student.dataset.studentId);
_targetedStudent.classList.add('active');
});
}
```
الشرح المفصل
1. **الوصول إلى قائمة درجات الطلاب**:
نستخدم `document.getElementsByClassName` للوصول إلى جميع العناصر التي تحتوي على درجات الطلاب:
```javascript
var studentsGradesList = document.getElementsByClassName('student_grades');
for (var studentGrades of studentsGradesList) {
checkListGrades(studentGrades);
}
```
2. **دالة `checkListGrades`**:
تقوم هذه الدالة بحساب الدرجات وعرضها بشكل تفاعلي باستخدام عناصر DOM:
```javascript
function checkListGrades(element) {
var studentGradesList = element;
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');
heading_element.innerText = _subject.innerText;
_subject.innerHTML = '';
_subject.append(progressSubject);
_subject.prepend(heading_element);
var smallReport = document.createElement('small'),
smallReportText = document.createTextNode(subjectData.grade + ' / ' + subjectData.finalGrade);
smallReport.append(smallReportText);
smallReport.style.padding = '0 10px';
smallReport.style.color = 'black';
heading_element.appendChild(smallReport);
var reportSubject = document.createElement('p'),
reportText = 'The student reaches ' + subjectData.grade + ' of ' + subjectData.finalGrade;
reportText = document.createTextNode(reportText);
reportSubject.append(reportText);
reportSubject.style.color = 'black';
reportSubject.hidden = true;
reportSubject.classList.add('moreText');
var moreOfReport = document.createElement('a');
moreOfReport.innerText = 'More';
moreOfReport.setAttribute('href', '#more');
moreOfReport.addEventListener('click', function () {
moreOfReport = this;
moreOfReport.parentElement.querySelector('.moreText').hidden = false;
moreOfReport.remove();
});
_subject.insertBefore(moreOfReport, _subject.lastElementChild);
_subject.lastElementChild.before(reportSubject);
}
studentScore = (totalGrades / finalGrades) * 100;
studentScore = Math.round(studentScore);
var total_percentage_element = document.createElement('h1'),
total_percentage_text = document.createTextNode(studentScore + '%');
total_percentage_element.append(total_percentage_text);
total_percentage_element.style.display = 'table';
total_percentage_element.style.margin = '0 auto';
total_percentage_element.style.paddingTop = '40px';
studentGradesList.before(total_percentage_element);
}
```
3. **تفعيل الطالب النشط وعرض تقريره**:
نقوم بإضافة مستمعين للأحداث لتفعيل الطالب النشط وعرض تقريره عند النقر على اسمه:
```javascript
var students_list = document.getElementById('students_list');
for (var student of students_list.children) {
student.addEventListener('click', function () {
var _student = this,
_activeStudent = _student.parentElement.querySelector('.active');
_activeStudent.classList.remove('active');
_student.classList.add('active');
var student_report = document.querySelector('#student_report');
student_report.querySelector('.active').classList.remove('active');
var _targetedStudent = student_report.querySelector('.student-id-' + _student.dataset.studentId);
_targetedStudent.classList.add('active');
});
}
```
الخلاصة
باستخدام هذه التقنيات، يمكننا التفاعل مع عناصر DOM بطرق متعددة لتحسين وتخصيص واجهات المستخدم بشكل ديناميكي. هذه المهارات تعتبر أساسية لكل مطور ويب يعمل على تطوير واجهات تفاعلية.
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي تطبيق عملي 2 WorkShop
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
الأوامر البرمجية المستخدمة
ملحقات ال PDF
الدروس والاختبارات لتعلم هذه الدورة التدريبية : تعلم البرمجة من الصفر وتطوير صفحات الويب الإحترافية مع لغة جافاسكربت JavaScript