آموزش جامع JSON در جاوااسکریپت

🎯 اهداف یادگیری

• درک مفهوم JSON و کاربردهای آن
• یادگیری نحوه کار با JSON در جاوااسکریپت
• تبدیل بین JSON و رشته‌ها
• کار با JSON در APIها و ذخیره‌سازی داده

📌 JSON چیست؟

JSON (JavaScript Object Notation) یک فرمت سبک و متنی برای تبادل داده است که هم برای انسان و هم برای ماشین قابل خواندن است:

// نمونه یک شیء JSON
{
  "name": "علی محمدی",
  "age": 30,
  "isStudent": false,
  "courses": ["برنامه‌نویسی", "پایگاه داده", "الگوریتم"]
}

ویژگی‌های کلیدی JSON:

• سبک و متنی: حجم کم و خوانایی بالا
• زبان مستقل: در بسیاری از زبان‌های برنامه‌نویسی پشتیبانی می‌شود
• ساختار سلسله‌مراتبی: پشتیبانی از اشیاء و آرایه‌های تو در تو

📌 ساختار JSON

JSON از چند نوع داده اصلی پشتیبانی می‌کند:

// رشته‌ها (همیشه با دابل کوتیشن)
"name": "علی محمدی"
// اعداد (بدون کوتیشن)
"age": 30
// مقادیر بولین
"isStudent": false
// آرایه‌ها
"courses": ["برنامه‌نویسی", "پایگاه داده"]
// اشیاء تو در تو
"address": {
  "city": "تهران",
  "postalCode": "1234567890"
}

قوانین ساختاری JSON:

• کلیدها باید رشته باشند و با دابل کوتیشن محصور شوند
• مقادیر می‌توانند رشته، عدد، بولین، آرایه، شیء یا null باشند
• آخرین آیتم لیست‌ها نباید کاما داشته باشد
• توابع و کامنت‌ها در JSON معتبر نیستند

📌 کار با JSON در جاوااسکریپت

جاوااسکریپت دو متد اصلی برای کار با JSON دارد:

// تبدیل شیء جاوااسکریپت به رشته JSON
const person = {
  name: "علی محمدی",
  age: 30
};
const jsonString = JSON.stringify(person);
console.log(jsonString); // {"name":"علی محمدی","age":30}
// تبدیل رشته JSON به شیء جاوااسکریپت
const parsedObject = JSON.parse(jsonString);
console.log(parsedObject.name); // "علی محمدی"

کاربردهای JSON:

• تبادل داده بین سرور و کلاینت
• ذخیره‌سازی داده‌های پیکربندی
• ذخیره‌سازی داده‌های موقت در localStorage
• ساختاردهی به داده‌های پیچیده

📌 JSON و APIها

JSON استاندارد اصلی برای تبادل داده در APIهای وب است:

// دریافت داده از یک API
fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => {
    console.log(data); // داده‌های JSON دریافتی
  });
// ارسال داده به سرور
const user = {
  name: "علی",
  email: "ali@example.com"
};
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(user)
});

نکات مهم در کار با API:

• همیشه headerهای مناسب را تنظیم کنید
• خطاها را مدیریت کنید
• داده‌های دریافتی را اعتبارسنجی کنید
• برای داده‌های حساس از HTTPS استفاده کنید

📌 تمرین عملی

یک شیء جاوااسکریپت با اطلاعات زیر ایجاد کنید و آن را به JSON تبدیل کنید:

const product = {
  // نام محصول
  // قیمت
  // موجودی
  // دسته‌بندی
  // وضعیت (موجود/ناموجود)
};

راهنمای تمرین:

1. شیء را با ویژگی‌های name, price, stock, category, isAvailable ایجاد کنید
2. از متد JSON.stringify برای تبدیل به JSON استفاده کنید
3. نتیجه را در console.log نمایش دهید
4. سپس رشته JSON را دوباره به شیء تبدیل کنید

📌 قدم بعدی

در درس بعدی با مدیریت DOM در جاوااسکریپت در جاوااسکریپت آشنا خواهیم شد!