تحديث واجهة المستخدم باستخدام جافاسكريبت
في هذا الفصل، سنبدأ ببناء مشروعنا باستخدام جافاسكريبت وطرق نموذج كائن المستند (DOM) لإضافة وسم h1 إلى مشروعك.
افتح محرر الأكواد وأنشئ ملف index.html جديد. داخل ملف HTML، أضف الكود التالي:
<html>
<body>
<div></div>
</body>
</html>ثم أعط الـ div معرفًا فريدًا id حتى تتمكن من استهدافه لاحقًا.
<html>
<body>
<div id="app"></div>
</body>
</html>لكتابة جافاسكريبت داخل ملف HTML، أضف وسم script:
<html>
<body>
<div id="app"></div>
<script type="text/javascript"></script>
</body>
</html>الآن، داخل وسم script، يمكنك استخدام طريقة DOM getElementById() لتحديد عنصر <div> بواسطة id الخاص به:
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
const app = document.getElementById('app');
</script>
</body>
</html>يمكنك الاستمرار باستخدام طرق DOM لإنشاء عنصر <h1> جديد:
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
// تحديد عنصر div بالمعرف 'app'
const app = document.getElementById('app');
// إنشاء عنصر H1 جديد
const header = document.createElement('h1');
// إنشاء عقدة نصية جديدة لعنصر H1
const text = 'تطوير. معاينة. نشر.';
const headerContent = document.createTextNode(text);
// إضافة النص إلى عنصر H1
header.appendChild(headerContent);
// وضع عنصر H1 داخل الـ div
app.appendChild(header);
</script>
</body>
</html>للتأكد من أن كل شيء يعمل، افتح ملف HTML في متصفحك المفضل. يجب أن ترى وسم h1 مكتوب عليه 'تطوير. معاينة. نشر.'.
HTML مقابل DOM
إذا نظرت إلى عناصر DOM داخل أدوات مطور المتصفح، ستلاحظ أن DOM يتضمن عنصر <h1>. DOM للصفحة يختلف عن الكود المصدري - أو بمعنى آخر، ملف HTML الأصلي الذي أنشأته.
هذا لأن HTML يمثل محتوى الصفحة الأولي، بينما DOM يمثل محتوى الصفحة المحدث الذي تم تغييره بواسطة كود جافاسكريبت الذي كتبته.
تحديث DOM باستخدام جافاسكريبت العادي قوي جدًا ولكنه مطول. لقد كتبت كل هذا الكود فقط لإضافة عنصر <h1> مع بعض النصوص:
<script type="text/javascript">
const app = document.getElementById('app');
const header = document.createElement('h1');
const text = 'تطوير. معاينة. نشر.';
const headerContent = document.createTextNode(text);
header.appendChild(headerContent);
app.appendChild(header);
</script>مع زيادة حجم التطبيق أو الفريق، قد يصبح بناء التطبيقات بهذه الطريقة أكثر صعوبة.
بهذا الأسلوب، يقضي المطورون الكثير من الوقت في كتابة تعليمات لإخبار الكمبيوتر كيف يجب أن يفعل الأشياء. ولكن أليس من الأفضل أن تصف ما تريد عرضه وتترك للكمبيوتر مهمة معرفة كيفية تحديث DOM؟
البرمجة الأمرية مقابل التصريحية
الكود أعلاه هو مثال جيد على البرمجة الأمرية. أنت تكتب الخطوات الخاصة بـ كيفية تحديث واجهة المستخدم. ولكن عندما يتعلق الأمر ببناء واجهات المستخدم، يُفضل عادةً النهج التصريحي لأنه يمكن أن يسرع عملية التطوير. بدلاً من الاضطرار إلى كتابة طرق DOM، سيكون من المفيد إذا تمكن المطورون من التصريح بما يريدون عرضه (في هذه الحالة، وسم h1 مع بعض النصوص).
بمعنى آخر، البرمجة الأمرية تشبه إعطاء الشيف تعليمات خطوة بخطوة حول كيفية صنع البيتزا. البرمجة التصريحية تشبه طلب بيتزا دون الاهتمام بالخطوات التي يتخذها الشيف لصنع البيتزا. 🍕
رياكت هي مكتبة تصريحية شهيرة يمكنك استخدامها لبناء واجهات المستخدم.
رياكت: مكتبة واجهة مستخدم تصريحية
كمطور، يمكنك إخبار رياكت بما تريد حدوثه لواجهة المستخدم، وستقوم رياكت بمعرفة خطوات كيفية تحديث DOM نيابة عنك.
في القسم التالي، سنستكشف كيف يمكنك البدء مع رياكت.
موارد إضافية: