Giriş
Birçok yol vardır ki JSON şu dilde kullanılabilir: JavaScript. En temel kullanımlarından biri veri depolamaktır. Ayrıca istemciler arasında, sunucular arasında veya sunucudan istemciye veri aktarmak için de kullanabilirsiniz. Diğer yararlı uygulamalar arasında verileri yapılandırma ve doğrulama yeteneğinin yanı sıra veri yapıları oluşturma da yer alır.
Bu öğreticide, JavaScript programlarınızda JSON’ı nasıl kullanabileceğinizi keşfedeceğiz. JavaScript ile daha önce programlama deneyiminiz varsa, bu size oldukça kolay gelecektir.
JSON Nedir?
JSON, JavaScript Object Notation (JavaScript Nesne Gösterimi) anlamına gelir. Farklı veri türlerinin paylaşılmasını sağlamak için tasarlanmış bir formattır. JSON, birincil programlama dili olarak esas olarak JavaScript’i kullanır. Ayrıca şu dillerle de çalışır: Python, PHP, Ruby, ve ayrıca Java. Okunması kolaydır, son derece hafiftir ve çok fazla biçimlendirme gerektirmez. Format’ın genel sözdizimi ve yapısı hakkında bilgi edinmek için öğreticimizi takip edebilirsiniz: JSON Veri Paylaşım Formatına Genel Bir Bakış.
JSON tek başına kullanılabilir veya başka bir dosya formatında tanımlanabilir. Tek başına olduğunda, şu uzantıyı kullanır: .json uzantısı. Başka bir formatta olduğunda, tırnak işaretleri içinde bir JSON dizesi olarak veya bir değişkene atanmış bir nesne olarak görünür. Örneğin, JSON şu formatta da kullanılabilir: .html formatında da kullanılabilir. Bu format, sunucu ile tarayıcı arasında nispeten kolay bir şekilde veri aktarımı yapmanızı sağlar.
JSON formatı metin tabanlıdır. Anahtar-değer verileri süslü parantezler içinde görünür. İşte tipik bir .json dosyasının görünümü:
|
1 2 3 4 5 |
{ "first_name" : "Sammy", "last_name" : "Shark", "online" : true } |
Eğer bir JSON nesneniz bir .js veya .html dosyasında bulunuyorsa, şu şekilde bir değişken olarak görünecektir:
|
1 2 3 4 5 |
var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true } |
Bazı durumlarda, hepsini tek bir satırda görebilirsiniz. Bu, JSON’ın JavaScript dosyasında bir nesne yerine bir dize olarak işlendiği durumdur:
|
1 |
var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'; |
JSON nesnelerini dizelere dönüştürebilirsiniz. Bu, hızlı veri aktarımı gerçekleştirmek istediğinizde kullanışlıdır.
JSON ve JavaScript Nesnesi Karşılaştırması
Daha önce de belirttiğimiz gibi, JSON her programlama diliyle çalışır. Ancak, JavaScript nesneleriyle yalnızca JavaScript kullanarak çalışabilirsiniz. JSON’daki ve JavaScript’teki sözdizimi benzerdir. Fark, JavaScript nesnelerinin tırnak işaretleri yerine dizeler içinde görünmesidir. Ek olarak, JavaScript nesneleri değer olarak fonksiyonları kullanabilir, bu da daha az sınırlı oldukları anlamına gelir.
Aşağıdaki örnekte, bir kullanıcının JavaScript seçeneğini gösteriyoruz. Kullanıcı Sammy Shark ve şu anda çevrimiçi:
|
1 2 3 4 5 6 7 8 |
var user = { first_name: "Sammy", last_name : "Shark", online : true, full_name : function() { return this.first_name + " " + this.last_name; } }; |
Görebileceğiniz gibi, şu anahtarların hiçbirinin etrafında tırnak işareti yoktur: first_name, last_name, online, veya full_name. Ayrıca son satıra yerleştirilmiş bir fonksiyon değeri vardır. Verilere dize biçiminde erişmek istiyorsanız, şunu çağırabilirsiniz: user.first_name nokta gösterimini kullanarak. Bunun yerine tam adı istiyorsanız, şunu kullanacaksınız: user.full_name(), çünkü bu bir fonksiyondur.
JSON Verilerine Nasıl Erişilir
Son bölümde değindiğimiz gibi, JavaScript’te JSON verilerine nokta gösterimini kullanarak erişebilirsiniz. Örneğin, şu isimdeki JSON nesnesini ele alalım: sammy:
|
1 2 3 4 5 |
var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true } |
Değerlere erişmek için nokta gösterimimiz şu şekilde olacaktır:
|
1 2 3 |
sammy.first_name sammy.last_name sammy.online |
Önce değişken gelir. Ondan sonra bir nokta koyarız. Son olarak, erişmek istediğimiz anahtarı belirtiriz.
Diyelim ki JavaScript'te first_name anahtarının değerini gösteren bir uyarı oluşturmak istiyoruz. Bunun bir açılır pencerede görünmesini sağlamak için JavaScript alert() işlevini şu şekilde kullanacağız:
|
1 |
alert(sammy.first_name); |
|
1 2 |
Output Sammy |
JSON'dan verilere erişmenin başka bir yolu da köşeli parantez sözdizimini kullanmaktır. Anahtar, köşeli parantez içinde çift tırnak içine alınmalıdır. İşte önceki örneğin devamı:
|
1 |
alert(sammy["online"]); |
|
1 2 |
Output true |
Peki ya iç içe geçmiş dizi öğeleriyle çalışıyorsanız? Bu durumda, dizideki öğenin numarasını çağırmanız gerekir. Aşağıdaki örneği ele alalım:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var user_profile = { "username" : "SammyShark", "social_media" : [ { "description" : "twitter", "link" : "https://twitter.com/digitalocean" }, { "description" : "facebook", "link" : "https://www.facebook.com/DigitalOceanCloudHosting" }, { "description" : "github", "link" : "https://github.com/digitalocean" } ] } |
Diyelim ki facebook dizesine erişmek istiyoruz. Nokta gösterimini kullanarak dizideki o öğeye numarasıyla nasıl erişeceğimiz aşağıda gösterilmiştir:
|
1 |
alert(user_profile.social_media[1].description); |
|
1 2 |
Output facebook |
Her iç içe geçmiş öğe için ek bir nokta eklemeyi unutmayın.
JSON ile Kullanılan Fonksiyonlar
Sırada, JSON ile kullanabileceğiniz birkaç fonksiyona bakacağız. JSON'u nesneden dizeye veya dizeden nesneye dönüştürebildiğinizde veri aktarımı ve depolama oldukça kolaylaşır. JSON'u iki farklı şekilde nasıl dizeleştirebileceğinizi (stringify) ve ayrıştırabileceğinizi (parse) inceleyeceğiz:
- JSON.stringify()
Verileri hafif bir şekilde aktarmaya çalışırken dizeleri kullanmak daha iyidir. İstemciden sunucuya veri depolamak ve aktarmak için kullanılmasının nedeni budur. Aşağıdaki örneği ele alalım. Diyelim ki bir makinedeki kullanıcının ayarlarının verilerini topluyorsunuz. Bu bilgiyi sunucunuza göndermeniz gerekiyor. Bu amaçla dize kullanırsınız. Daha sonra okumak ve üzerinde çalışmak için JSON.parse() kullanarak tekrar geri dönüştürebilirsiniz.
Burada vurgulayacağımız fonksiyon JSON.stringify() fonksiyonudur. Bu fonksiyon, bir JSON nesnesini bir JSON dizesine dönüştürür. Bu örnekte, nesnemizi obj değişkenine atayacağız. Bunu JSON.stringify() fonksiyonunu kullanarak dönüştüreceğiz. Bunun için obj değişkenini fonksiyona geçireceğiz ve ardından dizeyi şu şekilde s değişkenine atayacağız:
|
1 2 |
var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"} var s = JSON.stringify(obj) |
Calling the s değişkenini çağırmak size JSON'u dize olarak verecektir:
|
1 |
'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}' |
- JSON.parse()
Anlaşılacağı üzere, JSON.parse() tam tersi işlevi görür. Verileri taşımayı bitirdikten sonra, üzerinde çalışabilmek için tekrar JSON nesnesine dönüştürmeniz gerekir. Seçeneklerden biri eval() fonksiyonunu kullanmaktır. Ancak bu yaklaşım pek güvenli değildir. Bu yüzden JSON.parse() fonksiyonunu kullanmayı tercih ediyoruz.
Önceki örneği bir kez daha ele alalım. s dizesini JSON.parse() fonksiyonuna geçireceğiz. Ardından buna yeni bir değişken atayacağız:
|
1 |
var o = JSON.parse(s) |
Yeni nesnemiz artık o nesnesidir. Bu nesne, obj ile aynı olacaktır. Bir HTML dosyasında JSON.parse() fonksiyonunu şu şekilde ele aldığımızda daha fazla bilgi edinebiliriz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <p id="user"></p> <script> var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'; var obj = JSON.parse(s); document.getElementById("user").innerHTML = "Ad: " + obj.first_name + " " + obj.last_name + "<br>" + "Konum: " + obj.location; </script> </body> </html> |
Burada, s dizesini elde edilebilir bir nesneye nasıl dönüştürdüğümüzü gerçekten görebilirsiniz. Böylece, JSON.parse() JSON dizelerini nesnelere dönüştürmek için güvenli bir seçenektir.
Sonuç
Bu eğitim boyunca gördüğümüz gibi, JSON'ın JavaScript'te pek çok uygulaması vardır. Neredeyse tüm programlama dilleriyle kullanılabilmesi onu doğal bir seçenek haline getirdiği için özellikle kullanışlıdır. Üstelik bu sadece işin yüzeyidir. JSON ile yapabileceğiniz çok daha fazla şey var. Zaten API'lerde de desteklenmektedir.
JavaScript ile programlama yapmanıza yardımcı olacak blogumuzdaki diğer kaynaklar şunlardır:
- Şunun nasıl çalıştığını öğrenin: Javascript'te prototipler ve kalıtım.
- Ayrıntılı olarak inceleyin: HTML'e JavaScript nasıl eklenir.
- Kendi web uygulamanızı oluşturuyorsanız, en iyi sunucu kurulumunu seçme kılavuzumuza göz atın.
Keyifli Kodlamalar!
Yorumlar
Henüz yorum yapılmamış. İlk siz olun.