آموزش JSON در جاوا اسکریپت به زبان ساده
Json یک قالب برای مرتب سازی و انتقال اطلاعات است و معمولا در زمانی هایی که قصد ارسال اطلاعات از سرور به سمت سایت را داریم مورد استفاده قرار می گیرد.
در این مقاله قصد داریم اطلاعات دقیقی درباره Json در جاوا اسکریپت (javascript) و ویژگی های مرتبط با آن در اختیار قرار داده و درباره سینتکس این قالب توضیحاتی را ارائه دهیم.
آشنایی بیشتر با JSON
Json در واقع برگرفته از عبارت «Java Script Object Notation» و یک قالب کم حجم برای تبادل اطلاعات است. Json یک زبان مستقل است و به صورت «خود-تفسیر» فعالیت می کند، از این رو بسیار خوانا و قابل فهم است.
سینتکس Json، از سینتکس javascript object notation نشأت گرفته و برداشت شده است اما قالب json فقط از جنس Text یا همان متن است. کدهای قابل تولید و خوانش در json را با هر زبان برنامه نویسی مورد نظری می توان نوشت.
ظاهر Json
- داده ها در Json به صورت نام / مقدار قرار می گیرند.
- آرایه ها با علامت [ ] نشان داده می شوند.
- داده ها با علامت کاما از هم جدا می شوند.
- اشیا با علامت { } نشان داده می شوند.
داده‌های Json
داده های Json به صورت زوج های name/value نوشته می‌شوند. دقیقا مانند خصوصیات اشیاء در زبان برنامه نویسی جاوا اسکریپت با این تفاوت که نام ها در Json باید درون Cotation قرار بگیرند اما در جاوا اسکریپت نیازی به انجام این کار نیست.
|
1 |
"firstname" : "ali" |
انواع داده های Json
انواع داده ها در Json عبارتند از :
- String
- Number
- Object
- Array
- Boolean
- Null
مقادیر زیر نمی توانند جزء داده های Json باشند :
- Function
- Date
- Undefined
قالب JSON، آبجکت های JavaScript را ارزیابی می کند
قالب Json، جهت ایجاد آبجکت های جاوا اسکریپت، از نظر سینتکسی با کد همسان می شود. از این رو به خاطر شباهت و همسان سازی به وجود آمده میان Json و JavaScript، یک برنامه جاوا اسکریپت قادر است اطلاعات Json را به آبجکت های نیتیو جاوا اسکریپت تبدیل کند.
اطلاعات JSON؛ Name/Value
همانطور که اشاره شد، اطلاعات JSON به صورت جفتی از Name/Value نوشته می شود. درست به همان شکل که ویژگی های آبجکت ها در جاوا اسکریپت نوشته می شود.
طرز نوشتن آنها هم به این شکل است که ابتدا یک نام در علامت کوتیشن نوشته می شود، سپس یک دو نقطه و بعد از آن نیز یک ارزش در علامت کوتیشن نوشته می شود. مانند مثال زیر:
“firstName”:”Andy”
نکته ای که اینجا توجه کاربران با تجربه را جلب می کند، این است که در Json نام در کوتیشن قرار می گیرد اما در JavaScript اینطور نیست.
آبجکت های JSON
آبجکت های json داخل آکولاد نوشته می شوند. درست شبیه javascripts، آبجکت ها می توانند هر دوی نام (Name) و ارزش (Value) را شامل شوند.
{“firstName”:”Andy”, “lastName”:”Joe”}
مثالی از JSON
در این قسمت به یک مثال ساده از Json که سینتکس آن را به خوبی نمایش می‌دهد، می پردازیم. این سینتکس مربوط به آرایه های سه کارمند یک شرکت است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ] } |
مثالی دیگر از Json
در مثالی دیگر یک شی با نام ماشین ها داریم که مقدار این شی آرایه ای شامل دو عنصر است. هر عنصر یک شی است که شامل مشخصات ماشین می شود. یکی برند ماشین و دیگری رنگ ماشین :
|
1 2 3 4 5 6 |
{ "cars":[ {"Name":"BMW", "color":"black"}, {"Name":"Benz", "color":"red"} ] } |
آرایه های JSON
آرایه های Json داخل براکت نوشته می شوند. درست مانند جاوا اسکریپت این آرایه ها و براکت ها نیز می توانند شامل آبجکت ها باشند.
|
1 2 3 4 5 6 7 8 9 |
"employees":[ {"firstName":"Andy", "lastName":"Joe"}, {"firstName":"Sarah", "lastName":"Sandy"}, {"firstName":"Jenifer", "lastName":"Scottie"} ] |
در مثال بالا، آبجکت employees یک آرایه است. این آرایه سه آبجکت را شامل می شود. هر کدام از این سه آبجکت، گزارشی درباره یکی از افراد را شامل می شوند. (نام و نام خانوادگی آنها)
تبدیل یک متن Json به یک آبجکت Java Script
یکی از استفاده های رایجی که از JSON می شود، خواندن اطلاعات از سرور و نمایش آن بر روی صفحه سایت است. برای سادگی درک این مطلب، می توان آن را با قرار دادن یک رشته به عنوان مقدار ورودی نشان داد.
ابتدا یک رشته JavaScript شامل سینتکس Json، می سازیم:
|
1 2 3 4 5 6 7 |
var text = '{ "employees" : [' + '{ "firstName":"Saba" , "lastName":"Raad" },' + '{ "firstName":"Amy" , "lastName":"Andrue" },' + '{ "firstName":"Sam" , "lastName":"Sunny" } ]}'; |
سپس یک عملکرد درون ساز جاوا اسکریپت JSON.parse()، می سازیم تا رشته را به یک آبجکت جاوا اسکریپتی تبدیل کنیم:
var obj = JSON.parse(text);
و در آخر، آبجکت جدید جاوا اسکریپت را در صفحه خود استفاده می کنیم:
|
1 2 3 4 5 6 7 8 9 |
<p id="demo"></p> <script> document.getElementById("demo").innerHTML = obj.employees[1].firstName + " " + obj.employees[1].lastName; </script> |
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.