Derinlemesine JavaScript Data

By Onder Teker

Bu kitapta JavaScript ile Data işlemleri anlatılmaktadır. JSON, XML, HTTP gibi temel konular gösterildikten sonra Node.js ile geliştirme işlenmektedir. Node.js ile module, server, cookie, file gibi konular ayrıntılı biçimde gösterilmektedir. Sonrasında JSON ile REST işlemleri, CRUD türü işlemleri içerecek biçimde anlatılmaktadır. JWT ve authentication konuları uygulamalı olarak işlenmektedir. HTTP ile çalışmak için Axios ve validation için de Yup kütüphaneleri içerik kapsamındadır.

Yazar

Kitabın yazarı bilgisayar mühendisi Önder Teker, yazılım geliştirme alanında 1990'lı yılların sonlarından beri projeler geliştirmekte, 2000'li yılların başından beri eğitimler vermekte, 2010'lu yılların başından beri de kitap ve eğitim setleri üretmektedir.

• Language: Türkçe
• Publisher: Godoro
• Release date: Apr 3, 2023
• ISBN: 9786057172532

Book preview

Derinlemesine

JavaScript

Data

Önder Teker

Godoro Yayıncılık

GODORO YAYINCILIK

Yayıncı Sertifikası No: 40946

Kitabın Adı:

Derinlemesine JavaScript Data

Copyright © 2022 Godoro Yayıncılık

Kitabın Yazarı:

Önder Teker

Birinci Basım, Temmuz 2022, İstanbul

ISBN:

978-605-82523-3-2

Kapak Tasarımı ve Mizanpaj:

Önder Teker

Baskı ve Ciltleme:

Godoro

Özel Baskı Çözümleri

Atikali Mah. Fatih Cad. No: 81 D: 2

Fatih / İstanbul

Telefon : [phone]

http://www.godoro.com

GODORO YAYINCILIK

Atikali Mah. Fatih Cad. No: 81 D: 2

Fatih / İstanbul

Telefon : [phone]

JSON

İki uygulama arasında veri iletişimi yapmak için kullanılan biçimletim (format) seçeneklerinden birisi de JSON (JavaScript Object Notation - JavaScript Nesne Gösterimi) adını taşır. JavaScript için kullanılması için tasarlansa da başka dillerde ve çevrelerde de kullanılmaktadır. Sözdiziminin JavaScript diline benzemesi kullanımın yaygınlaşmasına yol açmıştır. Özellikle HTTP üzerinden REST tekniğiyle iletişimde XML biçimletimine bir almaşık olarak kullanılmaktadır.

JavaScript dilinde gerek gözatıcı (browser), gerek başka istemci (client) gerekse işgörücü (server) uygulamalarında kullanılmak üzere JSON adlı bir sınıf bulunmaktadır. Bu sınıfta JSON biçimletiminin ayrıştırma (parse), yani sicimden nesneye çevirme ve tersi sicimleştirme (stringify), yani nesneyi sicime çevirmeyle ilgili yöntemler bulunmaktadır.

Ayrıştırma (Parse)

JSON içeriğiyle sicim (string) türünde iletişim kurulur. Başka bir deyişle, iki yaka arasında iletişim sicim vermek ve almak biçiminde gerçekleşir.

Sicim (String)

Bir JSON içeriği olağan bir sicim (string) olarak bildirilebilir. Örneğin aşağıdaki gibi

const content=`{

productId : 301,

productName : JavaScript,

salesPrice : 190.0

}`;

biçimindeki bildirim yapılabilir. Burada ` ` (geri kesmeler - back ticks) imleri kullanılsa da ' ' (tek tırnaklar - single quotes) ya da (ikişer tırnaklar - double quotes) imleri de kullanılabilir.

Ayrıştırma (Parse)

JSON biçimletimiyle yapılmış bir sicimi JavaScript dilindeki bir nesne (object) olarak almak için parse() (ayrııştır) adlı işlev kullanılabilir. Örneğin aşağıdaki gibi

const product = JSON.parse( content );

bir düzgüleme, bir sicim (string) içeriğinden JavaScript dilinde tanımlı bir nesne (object) elde eder. Söz konusu nesnenin tarlalarına olağan biçimde erişilebilir:

console.log(product.productId);

console.log(product.productName);

console.log(product.salesPrice);

Örnek

Aşağıdaki örnekte JSON biçimletimindeki bir içerik ayrıştırılarak konsola basılmaktadır:

const content=`{

 "productId":301,

 "productName:JavaScript",

 "salesPrice":190.0

}`;

const product=JSON.parse(content);

console.log('Ürün:');

console.log(product);

console.log('Tarlalar:');

console.log('\tÜrün Özdeşliği:',product.productId);

console.log('\tÜrün Adı:',product.productName);

console.log('\tSatış Ederi:',product.salesPrice);

Betim çalıştırılınca konsol çıktısı aşağıdaki gibi olur:

Ürün:

{ productId: 301, productName: 'JavaScript', salesPrice: 190 }

Tarlalar:

       Ürün Özdeşliği: 301

       Ürün Adı: JavaScript

       Satış Ederi: 190

Sicimleştirme (Stringify)

Bu bölümde JavaScript dilindeki bir nesne (object) değerinden JSON adlı biçimletim (format) ile sicim (string) türüne çevrilmesi anlatılmaktadır.

Sicimleştirme İşlevi (Stringify Function)

JSON sınıfındaki stringify() (sicimleştir) adlı işlev aldığı bir nesneyi JSON biçimletimindeki bir sicime çevirir. Örneğin aşağıdaki gibi bir JavaScript nesnesi olsun:

const product = {

productId: 301,

productName: JavaScript,

salesPrice: 190

}

Bunu bir sicime çevirmek için aşağıdaki gibi bir demeç yazılabilir:

const string = JSON.stringify( product );

Bunun sonucunda aşağıdaki gibi bir sonuç elde edilir:

{productId:301,productName:JavaScript,salesPrice:190}

Güzel Basma (Pretty Print)

Bir nesne JSON biçimletimine göre sicime çevrilirken az yer kaplasın diye boşluk (space) kullanılmaz. Ancak bu da okunaklılığı olumsuzca etkilemektedir. Bu amaçla stringify() (sicimleştir) yöntemine üçüncü değiştirgen olarak kaç tane boşluk (space) koyulacağı bildirilebilir. Bu durumda öğeler daha okunaklı olur. Örneğin aşağıdaki gibi

const text = JSON.stringify(product, null, 4);

biçimindeki demeçin sonucu aşağıdaki gibi olur:

{

productId: 301,

productName: JavaScript,

salesPrice: 190

}

Burada hem her öğenin yeni satırda gösterilmesi hem de bir nesnenin içindeki öğelerin onun kendi konumundan 4 boşluk sağda olması sağlanmaktadır. Daha derin olan JSON belgelerinde her iç öğe için 4 boşluk daha eklenir.

Yerine Geçirici (Replacer)

Kimi durumlarda JSON biçimletimine çevrilecek nesne (object) içindeki öznitelik (attribute) üyelerindeki değerleri aynen çevrilmek istenmez. Bu durumda stringify() (sicimleştir) işlevine ikinci değiştirgen olarak yerine geçirici (replacer) işlevi verilir. Söz konusu işlev değeri alıp başka bir değer döner ya da kökenli değerin üzerinde bir takım değişiklikler yapar. Örnek bir yerine geçirici işlev aşağıdaki gibi yapılabilir:

const replacer = (name, value) => {

 if (name.endsWith('Id')) {

   return # + value;

 } else {

   return value;

 }

}

Burada özniteliğin adının sonu Id ile bitiyorsa değerin başına # (çırpma - hash) imi koyulmaktadır. Bunu sonucunda oluşan JSON sicimi aşağıdaki gibi olur:

{

productId: #301,

productName: JavaScript,

salesPrice: 190

}

Örnek

Aşağıdaki örnekte bir JavaScript nesnesinin sicime çevrilmesiyle ilgili işlemler gösterilmektedir:

const product = {

productId: 301,

productName: JavaScript,

salesPrice: 190

}

const string = JSON.stringify(product);

console.log('Sicim:');

console.log(string);

const text = JSON.stringify(product, null, 4);

console.log('Yazı:');

console.log(text);

const replacer = (name, value) => {

 if (name.endsWith('Id')) {

   return # + value;

 } else {

   return value;

 }

}

const result = JSON.stringify(product, replacer, 4);

console.log('Sonuç:');

console.log(result);

Örnek çalıştırıldığında aşağıdaki gibi bir çıktı üretir:

Sicim:

{productId:301,productName:JavaScript,salesPrice:190}

Yazı:

{

productId: 301,

productName: JavaScript,

salesPrice: 190

}

Sonuç:

{

productId: #301,

productName: JavaScript,

salesPrice: 190

}

Nesneler Dizi (Array of Objects)

Bu bölümde nesneler dizisi (array of objects) içeren bir JSON belgesinin nasıl okunacağı gösterilmektedir. Teknik olarak yalın bir içerikten çok fazla fark yoktur.

Sicim (String)

İçinde nesneler dizisi (array of objects) olan bir JSON içeriği aşağıdaki gibi yazılabilir:

var content = `[

{ id: 301, name: HTML, value: 41.14},

{ id: 302, name: CSS, value: 22.64},

{ id: 303, name: JavaScript, value: 67.73}

]`;

Burada [ ] (dördül ayraçlar - square brackets) imleriyle dizi (array) bildirimi yapılmaktadır. Dizinin her bir öğesi de bir nesne (object) olarak verilmiştir.

Ayrıştırma (Parse)

JSON ayrıştırma işlemi olağan biçimde parse() (ayrıştır) yöntemiyle gerçekleştirilir. Örnek:

const objects = JSON.parse(content);

Sonuç olarak dönen dizi olağan biçimde kullanılabilir. Örneğin her öğeye bir için döngüsü (for loop) ile erişilebilir:

for(object of objects) {

// Nesneleri işle

}

Alınan nesnenin de tarlalarına aşağıdaki gibi erişilebilir:

console.log( object.id, object.name, object.value );

Örnek

Aşağıdaki örnekte nesneler dizisi (array of objects) içeren bir JSON içeriği ayrıştırılmakta ve içindeki nesnelerin tarlalarına ayrı ayrı erişilmektedir:

var content = `[

{ id: 301, name: HTML, value: 41.14},

{ id: 302, name: CSS, value: 22.64},

{ id: 303, name: JavaScript, value: 67.73}

]`;

const objects = JSON.parse(content);

console.log('Ürünler:');

console.log(objects);

console.log('Döngü:');

for(object of objects) {

 console.log(\t,

object.id,object.name,object.value);

}

Örnek çalıştırıldında konsola aşağıdaki gibi yazılar basılır:

Ürünler:

[

 { id: 301, name: 'HTML', value: 41.14 },

 { id: 302, name: 'CSS', value: 22.64 },

 { id: 303, name: 'JavaScript', value: 67.73 }

]

Döngü:

        301 HTML 41.14

        302 CSS 22.64

        303 JavaScript 67.73

Karmaşık JSON İçeriği

Bu bölümde karmaşık bir JSON içeriği olduğunda yapılacaklar anlatılmaktadır. JSON ile ilgili kesim olağan biçiminde yürütülür. Karmaşıklık, ayrıştırılan nesnenin yapısından gelmektedir.

Sicim (String)

Aşağıdaki gibi karmaşık bir JSON biçimletimiyle yapılmış bir sicim (string) değişkeni olsun:

var content = `{

 "exam" :{

   "id : js-3",

   "title : JavaScript 3. Sınavı",

   "questions" :[

      {

       "number" : 1,

       "body:Örün dilleri nelerdir? ",

       "options" : [

          { "code: A, text: HTML" },

         ...

       ]

     },

      {  

        "number" : 2,

       "body:Godoro eğitim dilleri nelerdir? ",

       "options" : [

          { "code: A, text: Java" },

         ...

       ]

     }

   ]

 }

}`;

Belger exam (sınav) diye bir nesne (object) bulunmaktadır. Onun id (özdeşlik) ve title (anabaşlık) adlı iki yalın tarlası bulunamaktadır. Üçüncü tarla olan questions (sorular) ise bir dizi (array) türündedir. Onun içindeki nesnelerde code (düzgü) ve text (yazı) biçiminde tarlalar yer almaktadır.

Ayrıştırm (Parse)

Yukarıdaki içeriği bir JavaScript nesnesi olarak almak için JSON nesnesindeki parse() (ayrıştır) yöntemi kullanılabilir:

const object = JSON.parse(content);

Söz konusu nesnenin içindeki bir tarlaya olağan biçimde erişilebilir:

const exam = object.exam;

Onun da içindeki tarlalara da aşağıdaki gibi erişilebilir:

console.log(exam.id,exam.title);

Nesnenin içindeki diziye erişmek amacıyla bir için döngüsü (for loop) yazılabilir:

for(question of exam.questions) {

 // Soruları işle

}

Buradaki nesnenin yalın türdeki tarlaları doğrudan kullanılabilir:

console.log(question.number,question.body);

Ancak onun da içinde bulunan dizi için ayrı bir için döngüsü (for loop) döngüsü yapılır:

for(option of question.options) {

   console.log(option.code,option.text);

}

Örnek

Aşağıdaki örnekte karmaşık bir JSON içeriğinin ayrıştırılması ve elde edilen nesnenin içeriğine derinlemesine ve tek tek erişilmesi gösterilmektedir:

var content = `{

 "exam" :{

   "id : js-3",

   "title : JavaScript 3. Sınavı",

   "questions" :[

      {

       "number" : 1,

       "body:Örün dilleri nelerdir? ",

       "options" : [

          { "code: A, text: HTML" },

         { "code: B, text: CSS" },

         { "code: C, text: JavaScript" },

         { "code: D, text: XML" },

         { "code: E, text: JSON" }

       ]

     },

      {  

        "number" : 2,

       "body:Godoro eğitim dilleri nelerdir? ",

       "options" : [

          { "code: A, text: Java" },

         { "code: B, text: C/C++ " },

         { "code: C, text: C#.NET" },

         { "code: D, text: PHP"},

         { "code: E, text: JavaScript" }

       ]

     }

   ]

 }

}`;

const object = JSON.parse(content);

console.log('Nesne:');

console.log(object);

const exam=object.exam;

console.log('Sınav:',exam.id,':',exam.title);

console.log('Sorular:');

for(question of exam.questions) {

 console.log(question.number,'.',question.body);

 for(option of question.options) {

   console.log(\t,option.code,')',option.text);

 }

}

Örnek çalıştığında aşağıdaki gibi bir çıktı üretir:

Nesne:

{

 exam: {

   id: 'math-3',

   title: 'Matematik 3 Sınavı',     

   questions: [ [Object], [Object] ]

 }

}

Sınav: js-3 : JavaScript 3. Sınavı   

Sorular:

1 . Örün dilleri nelerdir?

        A ) HTML

        B ) CSS

        C ) JavaScript

        D ) XML

        E ) JSON

2 . Godoro eğitim dilleri nelerdir?

        A ) Java

        B ) C/C++

        C ) C#.NET

        D ) PHP

        E ) JavaScript

XML

Uygulamalar arasında iletişim kurmak için ya da karmaşık verileri saklamak için kullanılan biçimletim (format) seçeneklerinden birisi de XML (Extensible Markup Language - Uzatılabilir İmlendirme Dili) adını taşır. JSON biçimletimine göre biraz daha karmaşık olsa da çok ileri özellikleri desteklediğinden kimi çevrelerde yaygın olarak kullanılmaktadır.

JavaScript dilinde XML ile çalışmanın bir çok yolu bulunmaktadır. Bunların bir kesimi Node.js gibi çevrelerde bir bohça (package) yükleyerek kullanılabilir. Ancal HTML belgesi içinde bir gözatıcı (browser) içinde çalışan, DOMParser (DOM Ayrıştırıcı) adı verilen bir nesne bulunmaktadır ve herhangi bir yükleme yapmadan JavaScript bölümünde kullanılabilir. Aşağıdaki örnekler bu nesneyle yapılmaktadır. Ancak ötekiler de burada anlatılanlara benzer biçimde çalışırlar.

Ayrıştırma (Parse)

Bu bölümde yalın bir XML içeriğinin içerisinden gerekli verilerin alınması, yani ayrıştırma (parse) işlemi anlatılmaktadır.

XML

Aşağıdaki gibi bir sicim (string) değişkeninin içeriği XML biçimletimiyle yazılmış olsun:

const content = `

id=301>

 <name>JavaScript

 <price>190

`;

XML dilinin söz dizimi HTML ile koşutluk gösterir. İkisi de imlendirme dili (markup language) olarak oluşturulmuştur.

Ayrıştırıcı (Parser)

Bir XML içeriğini ayrıştırmak için DOMParser (DOM ayrıştırıcı) adlı sınıf kullanılabilir. Bunun için önce bu sınıftan bir örnek oluşturulur:

const parser = new DOMParser();

Bu nesnedeki parseFromString() (sicimden ayrıştır) yöntemiyle bir sicim (string) verilip DOM ölçününe uygun bir Document (Belge) nesnesi alınır. Örnek:

const xml = parser.parseFromString(

  content, text/xml)

Burada ikinci değiştirgen olarak text/xml verilmesinin nedeni XML dili için kullanılan içerik türü (content type) olarak bu değerin kullanılmasıdır

Belge (Document)

Ayrıştırıcın yönteminden dönen nesne DOM ölçünündeki Document (Belge) nesnesidir. Bunun işlenmesi HTML, CSS ve JavaScript dillerindeki gibi olur. Bunlarda Element (Öğe), Attribute (Öznitelik), Text (Yazı) ve Node (Düğüm) gibi nesneler yer alır.

Belge nesesindeki documentElement (belge öğesi) kök öğeye karşılık gelir. Bunu içinde bir öznitelik (attribute) edinmek için getAttribute() (öznitelik edin) işlevi