آموزش برنامه نویسی

آموزش مقدماتی JSON

آموزش JSON مقدماتی قسمت اول

Json چیست ؟

Json مخفف Javascript Object Notation، یک فرمت برای ذخیره سازی و تبادل داده‌ها می‌باشد.
به مثال زیر دقت کنید :

کد بالا یک json است، که دارد به ما می‌گوید، person دارای اطلاعات اشخاص است.

این اطلاعات شامل شماره، نام، نام خانوادگی و علایق می‌باشد، شماره یک می‎گوید نام فرد Pouria، نام خانوادگی او parhami و علایقش خواند، بازی کردن و برنامه نویسی است.
بعد از دیدن کد بالا احتمالا متوجه شدید چرا به آن javaScript Object Notation می‎گویند. چون طریقه نوشتن json بسیار شبیه به نوشتن object در جاوا اسکریپت است .
اما خوبی‎های json :
انسان می‎تواند به راحتی json را بخواند و متوجه اطلاعات آن شود.
Json به زبان خواصی وابسته نیست، مستقل است و تمام زبان‎های برنامه نویسی محبوب آن را پشتی‎بانی می‎کنند.
Json ساختار بسیار سازمان یافته‎ای دارد و به راحتی می‎توان آن را ساخت و به آن دست‎رسی داشت.

قوانین نوشتاری Json :
1- داده‎های json باید داخل آکولاد باشند {}
2- داده باید دارای یک کلید باشند .
3- کلید‎ها باید داخل دابل کوتیشن باشند “”
4- داده و کلید باید با علامت دو نقطه از هم جدا بشوند :
5- از کاما برای جدا کردن داده‎ها از هم استفاده می‎شود ,
6- از براکت برای نگه‎داری آرایه استفاده می‎شود [] 7- اشیاء را درون آکولاد نگه داری می‎کنیم.

Json چه مقادیری می‌تواند داشته باشد ؟
Number, string , boolen, null, array, object
حال بیاید با استفاده از این قوانین یک json ساده بسازیم، اول آکولاد، دوم ایجاد کلید داخل دابل کوتیشن، سوم قرار دادن علامت : چهارم نوشتن مقداری که باید در کلید باشد پنجم جدا کردن داده‌ها با استفاده از کاما
اولین json را برای اعداد می‌سازیم :

همان طور که می‌بینید برای اعداد لازم نیست داده در داخل دابل کوتیشن باشد .

رشته String :

می‌بینید که اگر بخواهیم رشته‌ای مانند Hooman asked,”What is your name” را بنویسیم نیاز است تا برای رفع اختلال در قرار گرفتن دابل کوتیشن ها از علامت \ بک اسلش استفاده کنیم .
Boolean :

Null :

آرایه Array :
ابتدا آرایه‌ای از رشته‌ها string می‌سازیم :

آرایه‌ای از اعداد numbers:

آرایه‌ای از Boolean :

آرایه‌ای از آرایه :

آرایه‌ای از اشیاء Objects

شئ Object :

همان طور که می‌بینید من دو شئ به نام office وaddress ایجاد کردم.
در پایان تمام کد json که نوشتیم را در کنار هم خواهیم دید:

اگر به یاد داشته باشید در اولین قسمت از آموزش کد json را به شما نشان دادیم و به صورت ابتدایی شروع به خواندن اطلاعات آن کردیم، حال یک بار دیگر نگاهی به آن می‌اندازیم.

شئ به نام person وجود دارد، داخل person سه کلید داریم که هر کدام از آنها داری یک object می‌باشند، داخل شئ اول آرایه‌ای به نام interests وجود دارد، به همین شکل آبجکت 2,3 را نیز بخوانید.

خواندن و نوشتن json در java script :
برای خواندن یک رشته json در جاوا اسکریپت باید json خود را درون علامت ‘ ‘ تک کوتیشن قرار دهیم:

سپس با استفاده از JSON.parse آن را به یک آبجکت جاوا اسکریپت تبدیل کنیم:

در آخر برای نمایش اطلاعات کافی است بگویم از شئ مورد نظر کدام پراپرتی یا متد را می‌خواهیم:

صفحه‌ای به نام index.html می‌سازم و کارهایی که گفته شد را انجام می‌دهم .

اما برای تبدیل یک آبجکت جاوااسکریپت به json کافی است از JSON.stringify استفاده کنم .

استخراج داده‌های دلخواه از رشته json :
Json زیر اطلاعات مربوط به وضعیت آب و هوا، موقعیت جغرافیایی و … یک شهر در ژاپن را داراست.

من تمام این اطلاعات لازم ندارم، فقط می‌خواهم طول عرض جغرافیایی، توضیحات، فشار و نام شهر را داشته باشم ،
ابتدا در فایل index.html این رشته json را به یک آبجکت javascript تبدیل می‌کنیم:

سپس برای گرفتن طول و عرض جغرافایی اول باید ببینیم نام کلید آنها چیست و چگونه نگه‌داری می‌شوند، نام کلید coord است و به صورت شئ از این اطلاعات نگه‌داری می‌ شود. پس می‌توانیم این گونه به این اطلاعات دسترسی داشته باشیم .

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

به اولین، حتما به یاد دارید اولین خانه یک آرایه خانه 0 است، پس اولین خانه و کدام پراپرتی از این آبجکت را می‌خواهیم description

مابقی نیز به همین شکل، محتوای فایل index.html به صورت کامل:

چه زمانی به جای نقطه باید از براکت استفاده کرد ؟؟
مثال فرض کنید چنین json داریم :

اگر برای دست‌رسی به Pouria کد زیر را بنویسیم دچار خطا می‌شویم :

چرا ؟ چون ما از integer به عنوان نام کلید استفاده کرده‌ایم، پس چه باید کرد؟ کافی است 1 را درون براکت قرار دهیم :

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

موقعیت دیگری که در آن نمی‌توان از نقطه استفاده کرد زمانی است که کلید شما فضای خالی space داشته باشد.

موقعیت دیگر زمانی است، که نام کلید ما درون یک متغییر باشد و بخواهیم به واسطه آن متغییر داده را بگیریم :

گرفتن JSON از سرور :

برای این کار xampp را برروی لپ تاپ خود نصب کنید، به پوشه htdocs در xampp رفته و پوشه‌ای به نام server ایجاد می‌کنید. سپس دورن این پوشه فایلی به نام getDataFromServer.html بسازید.
همچنین دو فایل به نام‌های ex1.json و ex2.json را نیز بسازید و درون این پوشه قرار دهید .

محتوای ex1.json :

محتوای ex2.json :

می‌تو‌انیم برای دسترسی و دیدن این فایل‌ها از طریق مرورگر به آدرس http://localhost/server/ex1.json مراجعه کنیم، البته اگر نام فایل و فولدرها برای شما متفاوت است باید به آدرس خود بروید.
به فایل getDataFromServer.html می‌روم ، در اینجا من از ajax برای گرفتن اطلاعات استفاده می‌کنم، اگر در مورد ajax اطلاعات کمی دارید می‌توانید آموزش ajax را در اینجا مطالعه کنید .

همان طور که می‌بینید یک دکمه داریم که در هنگام کلیک شدن فانکشنی به نام getJsonData را فراخوانی می‌کند، این فانکشن ajax ما را اجرا می‌کند، در ajax هم اطلاعات را خوانده و در div نمایش می‌دهم برای اینکه اطلاعات ex2.json را ببینم کافی است، url را تغییر دهیم.
xmlHttpReq.open(“GET”, “http://localhost/server/ex2.json”, false);

مرورگر خود را باز کنید و به آدرس http://localhost/server/getDataFromServer.html
برروی دکمه Get Data کلیک کنید اگر به درستی عمل کرده باشید باید مانند من اطلاعات ex1.json را مشاهده کنید.

jsonpic1

چگونه Json را از API دریافت کنیم ؟
برای دریافت json از api سایت‌های مختلف می‌توانید از همان روش استفاده کنید، من از api وب سایت http://fixer.io/ استفاده خواهم کرد، این آدرس api سایت مورد نظر است است .
http://api.fixer.io/latest?base=USD
در همان پوشه server فایلی به نام getJsonFromApi.html می‌سازم و در آن اطلاعات را از این api دریافت می‌کنم .

به این صفحه بروید و روی دکمه Get Data کلیک کنید باید اطلاعات را ببینید.

حال می‌خواهیم از api سایت http://openweathermap.org/ استفاده کنیم، تا اطلاعات آب و هوای مشهد را دریافت کنیم، اطلاعات مورد نظر من طول و عرض جغرافیایی نام شهر و توضیحات است .
کد شهر مشهد 124665 است .

بعد از کلیک برروی دکمه Get data باید چیزی مشابه شکل زیر را ببینید:

jsonpic2

فرستادن اطلاعات با post :
چطور است برای خود یک ماشین محاسبه BMI بسازیم؟

فرمی داریم که قد و وزن شما را می‌گیرد، یک div برای نمایش اطلاعات و یک دکمه برای فرستادن اطلاعات مورد نظر وجود دارد.
هم‌چنین فایلی به نام bmiApi.php ساختم که در آن داده‌ها دریافت شده و bmi محاسبه می‌شود، سپس اطلاعاتی که باید به سمت کاربر برود به صورت json درآمده و فرساده می‌شوند.
تفاوت اینجا در این است که این دفعه از متد post و Asynchronous برای فرستادن اطلاعات در ajax استفاده خواهیم کرد.
محتویات bmiApi.php

و در آخر شما چنین چیزی خواهید داشت :

jsonpic3

در مثال بالا ما فقط دو پارامتر را فرستادیم. اما اگر بخواهیم بیش از دو پارامتر را ارسال کنیم چه باید کرد ؟

بهتر است اطلاعات به صورت json ارسال شوند، من از همان فایل‌هایی که در مثال قبل ایجاد کردیم استفاده می‌کنم، البته با کمی تغییرات کوچک در آنها:
bmiApi.php

تا اینجا چیزهای زیادی آموختیم، حال نوبت آن است که یک نرم افزار تبدیل واحد پول بسازیم، با استفاده از همان api که در گذشته دید.

ابتدا سعی کنید خود این نرم افزار را ایجاد کنید .

در ابتدا صفحه‌ای به نام currency.html می‌سازیم که در آن یک جدول و چند dropDown list برای انتخاب واحد پول و دو input برای گرفتن و نمایش واحد‌ها خواهم داشت.
Currency.html

حال تنها کاری که باید انجام شود، فرستادن طلاعات به این آدرس http://api.fixer.io/latest?symbols=USD,RUB است.
سپس گرفتن اطلاعات و محاسبه تبدیل ارز را انجام می‌دیهم .

jsonpic4

آموزش ما اینجا تمام می‌شود. در مورد json بیشتر تحقیق کنید، کدهایی که با هم نوشتیم را بهبود ببخشید و خود از ابتدا آنها را بنویسید.

موفق و شاد باشید.

برچسب ها

پوریا پرهامی

سلام. من پوریا هستم. به برنامه نویسی علاقه مندم. حدود دو سال است در سامانه‌ی آموزشی خدماتی دارکوب وب فعالیت می‌کنم. امیدوارم آموزش‌هایی که در وب‌سایت قرار می‌دهم برای شما مفید باشد. موفق باشید. {^}

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

دکمه بازگشت به بالا
بستن