From 440cee55898ddbb75436e67adbe1360bc8e13747 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aykut=20=C5=9Eahin?= <59021102+sahinaykkt@users.noreply.github.com> Date: Mon, 18 Jan 2021 19:43:53 +0300 Subject: [PATCH 1/3] Update README.md --- .../README.md | 82 ++++++++++++++++++- 1 file changed, 81 insertions(+), 1 deletion(-) diff --git a/javascript/javascript-temel/object-ve-array-destructuring-kullanimi/README.md b/javascript/javascript-temel/object-ve-array-destructuring-kullanimi/README.md index 40b5f7866..9ef5ae17c 100644 --- a/javascript/javascript-temel/object-ve-array-destructuring-kullanimi/README.md +++ b/javascript/javascript-temel/object-ve-array-destructuring-kullanimi/README.md @@ -1 +1,81 @@ -# Object ve Array Destructuring Kullanımı \ No newline at end of file +# Object/Array Destructuring + +Obje ve dizilerin parçalarına ayrılıp değişkenlere atanmasıdır. Büyük yapılardan kullanışlı ve küçük parçalar çıkarmak için kullanılır. + +### Object Destructuring + +Aşağıdaki *ayarlar* nesnesini kullanarak konuyu anlamaya çalışalım. + +```javascript +let ayarlar = { + userName: "kodluyoruz", + password: "kodladik", + isActive: false, + ip: "127.0.0.1", + domainName: "kodluyoruz.org" +} +``` + +##### Obje içerisindeki bilgilerin tek seferde çıkarılılmasına ve kullanılmasına olanak sağlar. + +```javascript +let {userName: user, password, isActive, ip, domainName} = ayarlar; +``` + +Yukarıda yaptığımız işlem sayesinde ihtiyacımız olan değişkenleri daha rahat kullanabileceğiz. + +Ek olarak *"userName: user"* şeklindeki kullanım userName değişkenini user olarak kullanmak istediğim anlamına geliyor. + +```javascript +console.log(user); //"kodluyoruz" +console.log(ip); //"127.0.0.1" +``` + +##### Bazı bilgileri aldıktan sonra kalanları yeni bir objeye eklemek için de kullanılır. + +```javascript +let {userName, password, isActive, ...yeniObje} = ayarlar; +``` + +Yukarıdaki kullanımda *ayarlar* nesnesindeki ilk üç değişkeni alıp kalanları *yeniObje* isminde yeni nesneye atadık. + +```javascript +console.log(yeniObje); //{ip: "127.0.0.1", domainName: "kodluyoruz.org"} +``` + +##### Destructuring ile kopyalama işlemi + +```javascript +let ayarlar2 = {...ayarlar}; +``` + +Yukarıdaki işlem ile *ayarlar* nesnesini olduğu gibi *ayarlar2* ismindeki yeni nesneye kopyalamış olduk. + +### Array Destructuring + +Object destructuring ile aynı şekilde kullanılır. + +Aşağıdaki *puan* ismindeki diziyi kullanarak durumu gösterelim. + +```javascript +let puan = [50, 60, 70, 80, 90, 100]; +``` + +*puan* değişkeninin 1. ve 2. indexini tek seferde kullanmak istesek; + +```javascript +let [ilkPuan, ikinciPuan, ...kalanPuanlar] = puan; +``` + +Yukarıdaki kullanımda ilk puanı *ilkPuan*, ikinci puanı *ikinciPuan* ismiyle kullanabileceğimizi belirttik. Kalan punları ise *kalanPuanlar* ismindeki yeni diziye yolladık. + +```javascript +console.log(ilkpuan); //50 +console.log(kalanPuanlar); //[70, 80, 90 100] +``` + +Kopyalama işlemi de aynı şekilde yapılır; + +```javascript +let puan2 = [...puan]; +``` From 6efa91d1759315a3d34b2d123472f05c5c66ea15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aykut=20=C5=9Eahin?= <59021102+sahinaykkt@users.noreply.github.com> Date: Mon, 18 Jan 2021 20:15:42 +0300 Subject: [PATCH 2/3] Update README.md --- .../README.md | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/javascript/javascript-temel/object-ve-array-destructuring-kullanimi/README.md b/javascript/javascript-temel/object-ve-array-destructuring-kullanimi/README.md index 9ef5ae17c..29adc3b68 100644 --- a/javascript/javascript-temel/object-ve-array-destructuring-kullanimi/README.md +++ b/javascript/javascript-temel/object-ve-array-destructuring-kullanimi/README.md @@ -79,3 +79,29 @@ Kopyalama işlemi de aynı şekilde yapılır; ```javascript let puan2 = [...puan]; ``` + +### Sorular + +Aşağıdaki soruları kendiniz yaparak konuyu pekiştirin. + +```javascript +let mevsimler = [ilkbahar, yaz, sonbahar, kış]; +``` + +##### Soru 1: Yukarıdaki *mevsimler* dizisinin ilk ve ikinci elemanını "ilkMevsim" ve "ikinciMevsim" ismiyle kullanıma açın, kalanını ise "kalanMevsimler" isminde yeni bir diziye atayın. + +[Soru 1 Çözüm](https://codepen.io/sahinaykkt/pen/KKgJeoM?editors=0011) + +```javascript +let bilgisayar = { + monitor: "philips", + klavye: "microsoft", + mouse: "logitech", + kulaklık: "kingston" +}; +``` + +##### Soru2: Yukarıdaki *bilgisayar* objesini *bilgisayar2* adındaki yeni bir objeye kopyalayın ve yeni objenin monitörünün markasını "viewsonic" olarak değiştirin. + +[Soru 2 Çözüm](https://codepen.io/sahinaykkt/pen/ExgrRrE?editors=0011) + From cb29f97c611ad160f714105e915512fffc308742 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aykut=20=C5=9Eahin?= <59021102+sahinaykkt@users.noreply.github.com> Date: Wed, 20 Jan 2021 16:34:32 +0300 Subject: [PATCH 3/3] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Soruları ve cevapları can ekleyecek. --- .../fetch-api-ile-calismak/README.md | 63 ++++++++++++++++++- 1 file changed, 62 insertions(+), 1 deletion(-) diff --git a/javascript/javascript-temel/fetch-api-ile-calismak/README.md b/javascript/javascript-temel/fetch-api-ile-calismak/README.md index 6cd4d4063..918209fb9 100644 --- a/javascript/javascript-temel/fetch-api-ile-calismak/README.md +++ b/javascript/javascript-temel/fetch-api-ile-calismak/README.md @@ -1 +1,62 @@ -# Fetch API ile Çalışmak \ No newline at end of file +# Fetch API ile Çalışmak +Bir veri sunucudan geldikten sonra işlem yapmaya olanak sağlayan asenkron bir yapıdır. + +Konuyu anlamak için ilk olarak bir JSON dosyasından veri çekeceğiz, daha sonra bir API üzerinden veri çekeceğiz. + +### JSON Dosyasından Veri Çekmek + +data isminde bir dosya üzerinde çalıştığımızı varsayalım. İçerisinde **database.json** isminde bir dosyamız var ve aşağıdaki bilgileri içeriyor. + +```json +{ + "username": "kodluyoruz", + "password": 123456, + "domainName": "kodluyoruz.org", + "IDs": [1, 2, 3, 4, 5] +} +``` + +Bu dosyadaki bilgileri almak için aşağıdaki şekilde bir kullanım yaparız. + +```javascript +fetch("data/database.json").then(response => { + return response.json() +}) +``` + +Yukarıdaki kullanımda ilk olarak *fetch* ile **database.json** dosyasına istek attık, daha sonra *then* ile isteğimize yanıt geldikten sonra aldığımız cevabı, *response* ile json dosyası olarak olarak dönmek (return etmek) istedik. + +```javascript +fetch("data/database.json").then(response => { + return response.json() +}).then(responseJson => { + console.log(responseJson.username); //kodluyoruz +}) +``` + +Daha sonra ise *responseJson* ile return ettiğimiz bilgileri kullandık. + +### API Üzerinden Veri Çekmek + +```javascript +fetch("https://jsonplaceholder.typicode.com/users").then(response => { + return response.json() +}).then(responseJson => { + responseJson.forEach(element => { + if(element.id === 1) { + console.log(element.name) //Leanne Graham + } + }); +}) +``` + +Yukarıda yaptığımız işlemleri sırasıyla anlamaya çalışalım. + +Öncelikli olarak sahte online bir API'a istek attık ve rastgele bir kullanıcı listesi aldık. + +Daha sonra oradan gelen cevabı *response.json* olarak döndük (return etmek). + +Daha sonra return ettiğimiz bilgiler birden fazla olduğundan dolayı kullanmak için forEach döngüsü kullandık. + +Daha sonra şöyle dedik, "eğer döndüğümüz bilginin id'si 1 ise, o kullanıcının adını konsola yazdır." +