## مقدمة إلى JSON وHTML في JavaScript

في عالم تطوير الويب، [شركة برمجة مصرية] تعتبر JSON وHTML من الأدوات الأساسية التي تُستخدم بشكل متكرر لإدارة البيانات وتقديم المحتوى. يتيح لنا JavaScript الدمج بين هاتين التقنيتين لتحقيق تجربة تفاعلية وغنية على الويب. في هذا المقال، سنستعرض مفهوم JSON وHTML وكيفية استخدامهما في JavaScript مع تقديم أمثلة توضيحية.

### ما هو JSON؟

JSON (JavaScript Object Notation) هو صيغة خفيفة لتبادل البيانات. يتميز بسهولة القراءة والكتابة للبشر والآلات على حد سواء. يُستخدم JSON بشكل شائع لتبادل البيانات بين العميل والخادم، مما يجعله خيارًا مثاليًا لتطبيقات الويب الحديثة.

#### مثال على JSON:

on
{
  "name": "Ali",
  "age": 30,
  "email": "ali@example.com",
  "skills": ["JavaScript", "HTML", "CSS"]
}

### ما هو HTML؟

HTML (HyperText Markup Language) هو لغة ترميز تُستخدم لإنشاء صفحات الويب. تُحدد HTML بنية المحتوى على الويب باستخدام عناصر وعلامات مختلفة.

#### مثال على HTML:

“`html

مرحبًا بك في موقعي

هذا مثال على صفحة HTML بسيطة.

“`

### استخدام JSON وHTML مع JavaScript

يمكن لـ JavaScript التعامل مع JSON وتحويله [شركة برمجة مصرية] إلى كائنات يمكن استخدامها لتحديث محتوى HTML ديناميكيًا. دعونا نلقي نظرة على بعض الأمثلة:

#### مثال 1: تحويل JSON إلى كائن JavaScript

const jsonString = '{"name": "Ali", "age": 30}';
const user = JSON.parse(jsonString);

console.log(user.name); // Ali
console.log(user.age);  // 30

#### مثال 2: استخدام JSON لتحديث HTML

تخيل أنك ترغب في عرض بيانات مستخدم في صفحة ويب. يمكنك استخدام JavaScript لتحويل JSON وإدراج البيانات في عناصر HTML.

“`html

بيانات المستخدم

const jsonString = ‘{“name”: “Ali”, “age”: 30, “email”: “ali@example.com”}’;
const user = JSON.parse(jsonString);

const userInfoDiv = document.getElementById(‘user-info’);
userInfoDiv.innerHTML = `

الاسم: ${user.name}

العمر: ${user.age}

البريد الإلكتروني: ${user.email}

`;

“`

### استرجاع البيانات من خادم باستخدام JSON

في تطبيقات الويب الحديثة، غالبًا ما تحتاج إلى استرجاع البيانات من خادم وتحديث واجهة المستخدم بناءً على هذه البيانات. يمكن استخدام `fetch` API لاسترجاع JSON من خادم.

#### مثال 3: استرجاع بيانات JSON من خادم

fetch('https://api.example.com/user')
    .then(response => response.json())
    .then(data => {
        console.log(data.name);
        console.log(data.age);
    })
    .catch(error => {
        console.error('حدث خطأ:', error);
    });

### الخاتمة

يُعد JSON وHTML جزءًا لا يتجزأ من تطوير تطبيقات الويب باستخدام JavaScript. يوفر JSON طريقة فعالة لتبادل البيانات، بينما يُستخدم HTML لبناء بنية الصفحات. من خلال استخدام JavaScript، يمكن دمج هاتين التقنيتين لإنشاء تجارب ويب ديناميكية وتفاعلية. نأمل أن يكون هذا المقال قد قدم لك فهمًا واضحًا لكيفية التعامل مع JSON وHTML في JavaScript.