+201555349790
السبت - الخميس: 10:00 ص - 10:00 م

دليل المبتدئين إلى JSON

فهم صيغة JSON هو خطوة أساسية لكل مطور ويب. دليل مبسط وسهل.

بواسطة: أحمد سميرTuesday, December 3, 2024
دليل المبتدئين إلى JSON

دليل المبتدئين إلى JSON

JSON (JavaScript Object Notation) هو تنسيق خفيف لتبادل البيانات. أصبح المعيار الفعلي لتبادل البيانات على الويب. هذا الدليل الشامل سيساعدك على فهم واستخدام JSON بفعالية.

ما هو JSON؟

JSON هو تنسيق نصي بسيط لتبادل البيانات. يستخدم بناء جملة مشابه لـ JavaScript، لكنه مستقل عن اللغة. يمكن استخدامه مع أي لغة برمجة.

مثال JSON بسيط:

{
  "name": "أحمد",
  "age": 25,
  "city": "الرياض",
  "isStudent": true,
  "hobbies": ["البرمجة", "القراءة", "الرياضة"]
}

لماذا JSON مهم؟

🌐 عالمي

مدعوم من جميع لغات البرمجة

⚡ سريع

تنسيق خفيف وسريع المعالجة

📱 متوافق

يعمل مع جميع المنصات

🔧 سهل

بناء جملة بسيط ومفهوم

أنواع البيانات في JSON:

📝 String (نص)

"name": "أحمد"
"message": "مرحباً بالعالم"

🔢 Number (رقم)

"age": 25
"price": 99.99
"count": 100

✅ Boolean (منطقي)

"isActive": true
"isStudent": false

📋 Array (مصفوفة)

"hobbies": ["البرمجة", "القراءة"]
"numbers": [1, 2, 3, 4, 5]

📦 Object (كائن)

"address": {
  "street": "شارع الملك فهد",
  "city": "الرياض"
}

❌ Null (فارغ)

"middleName": null

قواعد JSON:

✅ صحيح:

{
  "name": "أحمد",
  "age": 25,
  "isActive": true,
  "hobbies": ["البرمجة", "القراءة"],
  "address": {
    "city": "الرياض",
    "country": "السعودية"
  }
}

❌ خطأ:

// خطأ: مفاتيح بدون اقتباس
{
  name: "أحمد",  // ❌
  age: 25
}

// خطأ: فواصل إضافية
{
  "name": "أحمد",,  // ❌
  "age": 25
}

// خطأ: تعليقات غير مدعومة
{
  "name": "أحمد",
  // "age": 25  // ❌
}

العمل مع JSON في JavaScript:

تحويل JavaScript إلى JSON:

// كائن JavaScript
const person = {
  name: "أحمد",
  age: 25,
  city: "الرياض",
  isStudent: true,
  hobbies: ["البرمجة", "القراءة"]
};

// تحويل إلى JSON
const jsonString = JSON.stringify(person);
console.log(jsonString);
// {"name":"أحمد","age":25,"city":"الرياض","isStudent":true,"hobbies":["البرمجة","القراءة"]}

تحويل JSON إلى JavaScript:

// نص JSON
const jsonString = '{"name":"أحمد","age":25,"city":"الرياض"}';

// تحويل إلى كائن JavaScript
const person = JSON.parse(jsonString);
console.log(person.name); // أحمد
console.log(person.age);  // 25

معالجة الأخطاء:

try {
  const person = JSON.parse(jsonString);
  console.log(person);
} catch (error) {
  console.error('خطأ في تحليل JSON:', error.message);
}

أمثلة عملية:

مثال 1: بيانات المستخدم:

{
  "users": [
    {
      "id": 1,
      "name": "أحمد محمد",
      "email": "[email protected]",
      "profile": {
        "age": 25,
        "city": "الرياض",
        "avatar": "https://example.com/avatar1.jpg"
      },
      "permissions": ["read", "write"],
      "isActive": true
    },
    {
      "id": 2,
      "name": "فاطمة علي",
      "email": "[email protected]",
      "profile": {
        "age": 30,
        "city": "جدة",
        "avatar": "https://example.com/avatar2.jpg"
      },
      "permissions": ["read"],
      "isActive": false
    }
  ]
}

مثال 2: منتجات متجر:

{
  "products": [
    {
      "id": "P001",
      "name": "لابتوب",
      "price": 2500.00,
      "currency": "SAR",
      "category": "إلكترونيات",
      "inStock": true,
      "specifications": {
        "brand": "Dell",
        "model": "XPS 13",
        "ram": "16GB",
        "storage": "512GB SSD"
      },
      "tags": ["لابتوب", "إلكترونيات", "Dell"],
      "images": [
        "https://example.com/laptop1.jpg",
        "https://example.com/laptop2.jpg"
      ]
    }
  ]
}

استخدام JSON في APIs:

طلب API:

// إرسال بيانات
const userData = {
  name: "أحمد",
  email: "[email protected]",
  age: 25
};

fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(userData)
})
.then(response => response.json())
.then(data => console.log(data));

استقبال بيانات API:

// استقبال بيانات
fetch('/api/users')
  .then(response => response.json())
  .then(users => {
    users.forEach(user => {
      console.log(user.name);
    });
  });

التحقق من صحة JSON:

التحقق البرمجي:

function isValidJSON(str) {
  try {
    JSON.parse(str);
    return true;
  } catch (e) {
    return false;
  }
}

// استخدام الدالة
const jsonString = '{"name":"أحمد","age":25}';
if (isValidJSON(jsonString)) {
  const data = JSON.parse(jsonString);
  console.log('JSON صحيح:', data);
} else {
  console.log('JSON غير صحيح');
}

أدوات التحقق:

  • JSONLint.com
  • JSON Validator
  • Browser DevTools
  • VS Code Extensions

أفضل الممارسات:

📝 كتابة JSON:

  • استخدم أسماء مفاتيح واضحة
  • تجنب المسافات غير الضرورية
  • استخدم تنسيق متسق
  • اختبر صحة JSON

🔧 التعامل مع JSON:

  • استخدم try-catch للتحقق من الأخطاء
  • تحقق من وجود الخصائص
  • استخدم القيم الافتراضية
  • وثق بنية البيانات

⚡ الأداء:

  • قلل من حجم البيانات
  • استخدم ضغط البيانات
  • تجنب البيانات المكررة
  • استخدم تنسيقات بديلة للبيانات الكبيرة

أدوات مفيدة:

🔧 JSON Formatter

تنسيق وتجميل JSON

✅ JSON Validator

التحقق من صحة JSON

🔄 JSON Converter

تحويل بين تنسيقات مختلفة

📊 JSON Viewer

عرض JSON بشكل منظم

الخطوات التالية:

  • ممارسة كتابة JSON
  • تعلم استخدام APIs
  • فهم REST APIs
  • تعلم GraphQL
  • ممارسة معالجة البيانات

JSON هو أساس تبادل البيانات في الويب الحديث. ابدأ في تعلمه اليوم!

تعلم البرمجة معنا

تواصل معنا

عبر الماسنجر او الهاتف

اختر طريقة التواصل