عرض المنشورات باستخدام JavaScript

في هذا الدرس، سنتعلم كيفية استخدام دالة `addPosts` لعرض مجموعة من المنشورات على صفحة الويب باستخدام JavaScript وDOM.

 التحليل الأولي

قبل استخدام الدالة `addPosts`، دعنا نفهم بنية الكائنات التي سيتم عرضها:

```javascript
var obj = {
"key_1": "value",
"key_2": "value",
"key_3": false,
"key_4": null,
"key_5": 123
}
```

هذا المثال يوضح كيف يمكن تمثيل بيانات بتنسيق JSON في JavaScript.

#### استخدام دالة `addPosts`

الدالة `addPosts` تأخذ قائمة من المنشورات (`posts`) وتعرضها على الصفحة بدءًا من الفهرس `start` إلى `end`.

```javascript
function addPosts(posts, start = 0, end = 3) {
for( var i = start; i < end; i++ ) {
var post = posts[i];

// إنشاء عناصر HTML لكل منشور
var _elementPost = document.createElement('div')
var _elementPostTitle = document.createElement('h4')
var _elementPostImage = document.createElement('img')
var _elementPostViews = document.createElement('small') var _elementPostDescription = document.createElement('p')

// تعيين محتويات العناصر من بيانات المنشور
_elementPostDescription.innerText = post.post_description;
_elementPostViews.innerText = 'المشاهدات: ' + post.post_views;
_elementPostImage.src = post.post_image;
_elementPostTitle.innerText = post.post_title;

// إضافة العناصر إلى عنصر الـ container في صفحة HTML
_elementPost.append(_elementPostTitle);
_elementPost.append(_elementPostImage);
_elementPost.append(_elementPostViews);
_elementPost.append(_elementPostDescription);

document.getElementById('container').append(_elementPost);
}
}
```

الخلاصة

باستخدام هذا الشرح، يمكنك الآن استخدام دالة `addPosts` لعرض مجموعة من المنشورات على صفحة الويب باستخدام JavaScript. يساعد هذا النهج في تنظيم وعرض البيانات بشكل ديناميكي وجذاب للمستخدمين.