جاوا اسکریپت یک زبان برنامه‌نویسی مبتنی بر شی است که نحوه عملکرد صفحات وب را تعیین می‌کند. در جاوا اسکریپت داده‌هایی از نوع String Number ،Boolean ،Null ،Undefied وجود دارد. متغیر‌ها درجاوا اسکریپت مقدار این داده‌ها را در خود ذخیره می‌کنند و این متغیرها می‌توانند یک مقدار بگیرند. اشیاء در جاوا اسکریپت نیز متغیر هستند با این تفاوت که می‌توانند مقادیر متعددی را در خود ذخیره کنند. می‌توانید با مطالعه مقاله‌ی "جاوا اسکریپت چیست" بیشتر با مفهوم جاوا اسکریپت آشنا شوید.

Json قالبی است که این اشیاء را به صورت آرایه و لیستی از اشیاء از سرور به صفحات وب ارسال می‌کند. در این مقاله با آموزش کار با json در جاوا اسکریپت همراه ما باشید.

JSON چیست؟

JSON مخفف عبارت JavaScript Object Notation است.

Json قالبی برای ذخیره و حمل‌ونقل داده‌ها است؛ که اغلب برای فرستادن داده‌ها از سرور به صفحه وب از آن استفاده می‌کنیم.

Json ساختار نام/مقدار (name/value) دارد و فهم کدهای آن بسیار آسان است‌؛ به همین دلیل می‌گویند Json خودتوصیف (self-describing) است. در نحوه نوشتن Json از نحوه نوشتن اشیاء جاوا اسکریپت الگو گرفته شده است و قالب آن با قالب کدهای ایجاد اشیاء در جاوا اسکریپت یکسان است.

Json مانند XML است ولی اغلب Json را به دلیل خوانایی بیشتر کدهای آن و محبوبیت جاوا اسکریپت به XML ترجیح می‌دهند.

XML چیست؟

XML مخفف Extensible Markup Language است و زبان نشانه‌گذاری توسعه‌پذیر است. این زبان برای جابه‌جایی داده‌ها مورد استفاده قرار می‌گیرد. XML داده‌ها و اطلاعات را بدون قالب خاصی در خود ذخیره می‌کند؛ به همین دلیل می‌توان در هر سیستمی آن را حمل کرد و نیاز به نرم افزار و سخت افزار خاصی ندارد.

ظاهر Json

• داده‌ها در Json به صورت نام/مقدار قرار می‌گیرند.
• داده‌ها با علامت کاما از هم جدا می‌شوند.
• اشیاء با علامت { } نشان داده می‌شوند.
• آرایه‌ها با علامت [ ] نشان داده می‌شوند.

مثالی از Json

برای مثال یک شی با نام ماشین‌ها داریم که مقدار این شی آرایه‌ای شامل دو عنصر است. هر عنصر یک شی است که شامل مشخصات ماشین می‌شود.

{
"cars":[
    {"Name":"BMW", "color":"black"},
    {"Name":"Benz", "color":"red"}
]
}                                                                                         

داده‌های Json

داده‌های Json به صورت زوج‌های name/value نوشته می‌شوند؛ دقیقا مانند خصوصیات اشیاء جاوا اسکریپت با این تفاوت که نام‌ها در Json باید درون جفت کوتیشن قرار گیرند اما در جاوا اسکریپت به این شکل نمی‌باشد.

"firstname" : "ali"

انواع داده‌های Json

انواع داده‌ها در Json عبارتند از:

• String
• Number
• Object
• Array
• Boolean
• Null

مقادیر زیر نمی‌توانند جزء داده‌های Json باشند:

• Function
• Date
• Undefined

رشته‌ها در Json

رشته‌ها در Json باید در داخل جفت کوتیشن قرار بگیرند. برای مثال:

{"name" : "ali"}

اعداد در Json   

اعداد باید یک مقدار صحیح و اعشاری باشند. برای مثال:

   {"age":26}

اشیاء در Json

مقادیر در json می‌توانند object باشند. برای مثال:

{
"cars": {"Name":"BMW", "color":"black"}
}                                                                                                    

آرایه‌هادر Json

مقادیر در json می‌توانند آرایه باشند. برای مثال:

{
"cars":[ "BMW", "Benz"]
}                                                                                                     

مقادیر boolean در Json

مقادیر در Json می‌تواند true و یا false باشند. برای مثال:

{"sale":true}

مقدار null در Json

مقادیر در Json می‌تواند null باشند.

تابع ()JSON.parse

همان‌طور که می‌دانیم با استفاده از Json، داده‌ها را از سرور یا بالعکس انتقال می‌دهیم که این داده‌های دریافت شده از سرور به صورت رشته هستند. داده‌ها توسط تابع ()JSON.parse تجزیه و به یک شی جاوا اسکریپت تبدیل می‌شوند.

var obj = JSON.parse('{ "name":"ali", "age":30, "city":"NewYork"}');

تابع ()JSON.stringify

با استفاده از تابع  JSON.stringify می‌توان یک شی JavaScript را به یک رشته تبدیل کرد.

var obj = { name: "ali", age: 30, city: "New York" };
var myJSON = JSON.stringify(obj);

در مثال بالا myJSON یک رشته است که آماده فرستاده‌ شدن به سمت سرور است.

با استفاده از این تابع همچنین می‌توان آرایه‌های جاوا‌ اسکریپت را به رشته تبدیل کرد.

var arr = [ "ali", "sara", "shiva", "reza" ];
var myJSON = JSON.stringify(arr);

اشیاء Json

اشیاء Json درون علامت {} نوشته می‌شوند. نام‌ها باید رشته‌ای و مقادیر باید یک نوع داده Json باشند.

• می‌توانیم با علامت "." به مقادیر شی دسترسی پیدا کنیم:

cars= {"name":"BMW", "color":"black"};
x = cars.name;

• همچنین می‌توانیم با علامت [ ] به مقادیر شی دسترسی پیدا کنیم:

x = cars["name"];

• مقادیر موجود در یک شی Json می‌توانند داخل یک شی Json دیگر باشد:

myObj = {
  "name":"ali",
  "age":25,
  "cars": {
    "car1":"Ford",
    "car2":"BMW",
    "car3":"Fiat"
  } }

• با استفاده از علامت نقطه و براکت می‌توان به اشیاء تودرتو دسترسی پیدا کرد:

x = myObj.cars.car2;

یا

x = myObj.cars["car2"];

• همچنین می‌توان از علامت نقطه برای تغییر مقدار هر شی Json استفاده کرد.

آرایه‌های Json

آرایه‌های Json تقریبا شبیه به آرایه‌های موجود در جاوا اسکریپت هستند. آرایه‌های Json درون براکت قرار می‌گیرند. در Json مقادیر آرایه باید از نوع رشته، عدد، شی، آرایه، بولین یا تهی باشند ولی در جاوا اسکریپت مقادیر آرایه علاوه بر موارد بالا، تابع، تاریخ‌ و تعریف نشده می‌توانند باشند.

["Ford", "BMW", "Fiat" ]

• آرایه‌ها می‌توانند مقادیر یک شی باشند:

{
"name":"ali",
"age":25,
"cars":[ "Ford", "BMW", "Fiat" ]
}

• با استفاده از شماره شاخص می‌توان به مقدار هر آرایه دسترسی پیدا کرد و مقدار آن را تغییر داد:

x = myObj.cars[0];
myObj.cars[1] = "Mercedes";

شباهت‌های JSON و XML

از json و XML می‌توان برای دریافت داده از وب سرور استفاده کرد. هر دو خود توصیف هستند و فهم کدهای آن‌ها بسیار آسان است. هر دو می‌توانند توسط بسیاری از زبان‌های برنامه‌نویسی مورد استفاده قرار بگیرند. هر دو را می‌توان با XMLHttpRequest دریافت کرد.

 جمع‌بندی

همان‌طور که در این مقاله (آموزش json در جاوا اسکریپت) خواندیم JSON قالبی سبک است که با استفاده از آن می‌توانیم داده‌ها را ذخیره کنیم و در صفحات وب به اشتراک بگذاریم. JSON قالبی است که خودش ساختار خود را تعریف می‌کند؛ به این صورت که داده‌ها در آن به صورت زوج‌های نام/مقدار قرار می‌گیرند و با علامت کاما ازهم جدا می‌شوند و این داده‌ها می‌توانند string، number، object، array، boolean و null باشند و اشیاء با علامت { } و آرایه‌ها با علامت [ ] نشان داده می‌شوند. JSON در اصل از زبان برنامه نویسی جاوا اسکریپت برگرفته شده است و در زبان‌های برنامه‌نویسی دیگر مانند #php ،python ،c و.... خوانده و استفاده می‌شود.

امیدوارم با مطالعه این مقاله به مفهوم  JSON و کاربرد آن پی برده باشید. اگر سوالی داشتید می‌توانید در بخش نظرات با ما در میان بگذارید.

اگر به یادگیری بیشتر در زمینه جاوا اسکریپت علاقه داری، با شرکت در دوره آموزش جاوا اسکریپت در کمتر از یک سال به یک متخصص JS همه فن حریف تبدیل می‌شوی که آماده‌ی استخدام، دریافت پروژه و یا فول-استک شدن هستی.