[A'dan Z'ye] JavaScript Öğreniyoruz #3

'Execution · 12 May 2020

[A'dan Z'ye] JavaScript Öğreniyoruz #3

Merhabalar,

A'dan Z'ye Javascript Eğitimimizin 3. partıyla karşınızdayım. Bu part ile beraber Javascript eğitimini tamamlamış olacağız. Hazırsanız buyrun başlayalım..

CONSTRUCTORLAR

Bu başlığımızda Constructorları, Türkçesiyle yapıcı fonksiyonları ele alacağız. Constructor dediğimiz fonksiyonlar obje oluşturmak için kullandığımız fonksiyonlardır. Constructorlarlar, object literal yönteminin aksine verilen değerleri kullanarak daha az kod bloğu ile çok sayıda obje oluşturmamızı sağlar. Burada kullanacağımız bir de "this" anahtar kelimesi olacak. Bu this anahtar kelimesi bulunulan objeyi temsil eder ve yine bu anahtar kelime ile objemizin özelliklerini ve metodlarını görebiliriz. Hemen bir örnekle açıklayalım. Aşağıdaki gibi bir obje oluşturuyorum,

Kod:

function Employee(){this.name = "black";}

Yukarıda oluşturduğumuz bu objeden yeni objeler oluşturabiliriz. Bunun için de aşağıdaki gibi bir kod yazıyorum ve böylece yukarıdaki objemden iki tane daha oluşturuyorum,

Kod:

const obje1 = new Employee();
const obje2 = new Employee();

PROTOTYPE

Javascript'in prototype tabanlı bir dil olması sebebiyle javascript üzerindeki her objenin içerisinde prototype özelliği bulunmaktadır. Bu özellik sayesinde objeler ve bu objeye ait özellikleri kullanan yeni objeler oluşturulabilir. Bu şekilde ortak olan özellikler kod fazlalığı oluşturmadan kullanılabilir. Şimdi objelerin içerisinde bulunan prototype özelliğine ve metodlarına bir bakalım. Bunun için ilk olarak bir obje oluşturuyoruz.

Kod:

const obje = new Object();
obje.name = "black";
console.log(obje);

Objemizi yukarıdaki gibi oluşturup console ekranına yazdırdıktan sonra console üzerinde _proto_ özelliğini ve içerisindeki metodları görebiliyoruz,

Object.create Metodu

Bu metod, bir obje oluştururken prototype'ini farklı bir objeden almaya yarayan bir metodtur. Hemen bir örnekle gösterelim. Öncelikle yeni bir obje oluşturuyorum,

Kod:

const obje = {
özellik1:function(){
console.log("Özellik 1");
},
özellik2:function(){
console.log("Özellik 2");
}
}
console.log(obje);

Ardından bu objeyi ve objenin prototype özelliğini içerisine almak istediğimiz objeyi Object.create metoduyla oluşturuyoruz. Ve önceden oluşturuduğumuz objemizin adını aşağıdaki gibi parantez içerisinde belirtiyoruz.

Kod:

const emp = Object.create(obje);
console.log(emp);

Bu şekilde Object.create metodu ile oluşturduğumuz yeni objemizin prototype özelliği, aşağıda da gördüğümüz gibi daha önce oluşturduğumuz objeyi ve o objenin protoype özelliğini gösteriyor.

Call Fonksiyonu

Bu fonksiyon, this anahtar kelimesi ile belirtilen obje değerini ve bağımsız olarak belirtilen argümanları çağırır. İlk argüman daima obje olmalıdır. Hemen bir örnekle inceleyelim. İlk olarak aşağıdaki gibi iki obje oluşturuyorum,

Kod:

const obje1 = {
 number1:10,
 number2:20
};
const obje2 = {
    number1:30,
    number2:40
};

Objeleri oluşturduktan sonra obje içine aşağıdaki gibi dışarıdan yeni değerler gönderiyoruz ve bu değerleri önceki değerlerle toplayacak kodu yazıyoruz. Burada "number1" ve "number2" değerlerini this anahtar kelimesiyle verelim.

Kod:

function addNumbers(number3,number4){
console.log(this.number1 + this.number2 + number3 + number4);}

Şimdi, yukarıdaki this anahtar kelimesinin yerine geçecek olan objemizin adını ardından "number3" ve "number4"ün değerlerini call fonksiyonu ile atayacağız. Bu sayede yukarıdaki toplama işlemimiz de çalışmış olacak

Kod:

addNumber.call(obje1,100,200);

Yukarıdaki kodda ilk olarak "obje1" isimli objemizin "this" anahtar kelimesi yerine geçmesini sağladık. Ardından sırasıyla "number3" ve "number4"ün değerlerini atadık

Apply Fonksiyonu

Call fonksiyonu ile aynı işlevi görür. Burada bağımsız argümanları array şeklinde yazmamız gerekiyor. Yani call fonksiyonunda this anahtar kelimesinin yerine geçecek olan objeyi ve bağımsız argümanları aşağıdaki gibi belirtmek yerine,

Kod:

addNumber.call(obje1,100,200);

aşağıdaki şekilde belirtiyoruz,

Kod:

addNumber.apply(obje1,[100,200]);

Bind Fonksiyonu

Bind Fonksiyonu, verilen objenin fonksiyon kopyasını oluşturup bu fonksiyonun diğer argümanlarla birlikte obje içerisinde kullanılmasını sağlayan metodtur. Bir örnekle incelemek gerekirse. İlk olarak aşağıdaki gibi bir obje oluşturuyoruz,

Kod:

const obje = {
 number1:10,
 number2:20
};

Ardından aşağıdaki gibi bir fonksiyon oluşturuyoruz,

Kod:

function addNumbers(number3,number4){
return this.number1 + this.number2 + number3 + number4;}

Ardından bu fonksiyonun kopyasını aşağıdaki gibi oluşturuyoruz ve bağımsız argümanlara değer atayarak console ekranına yazdırıyoruz

Kod:

const kopya = addNumbers.bind(obje);
console.log(kopya(30,40));

Bind fonksiyonunun da kullanımı bu şekilde

ES6 ÖNCESİ PROTOTYPE TABANLI KALITIM

Javascriptte kalıtım, bir objenin başka bir objeden özellik ve metodlarına sahip olmasıdır. Hemen örneklerle göstermeye çalışalım. İlk olarak aşağıdaki gibi bir obje oluşturuyoruz,

Kod:

function Person(name,surname){
this.name = name;
this.surname = surname;}

Ardından objemize prototype'e ait metod ve özellikleri aşağıdaki gibi ekleyelim,

Kod:

Person.prototype.showInfos = function(){
console.log("İsim: " + this.name + "Soyisim: " + this.surname);}

Objemizi ve prototype özelliklerini bu şekilde oluşturduk. Şimdi yukarıdaki objemizden bağımsız yeni bir obje oluşturuyoruz,

Kod:

function Employee(age,salary){
this.age = age;
this.salary = salary;}

Bu "Employee" isimli objemize, "Person" isimli objemizin protoype'ini, kalıtım yolu ile atayacağız. Yani "Employee" objesi "Person" objesine ait prototype'e sahip olacak. Bunun için aşağıdaki kodu yazıyoruz,

Kod:

Employee.prototype = Object.create(Person.prototype);

Yukarıdaki kod ile beraber artık "Employee" objesi "Person" objesine ait prototype'e sahip olmuş oldu. Bunu kanıtlamak için aşağıdaki kodları yazıyoruz,

Kod:

const emp = new Employee(30,4000);
console.log(emp);

Console ekranına baktığımızda Employee objesine ait prototype'in, person objesine ait prototype'i gösterdiğini görmüş oluyoruz

ECMASCRİPT 6 (ES6) SINIFLARI

Bu başlığımızda ES6'da sınıflarımızı nasıl oluşturduğumuzu işleyeceğiz. ES6 ile beraber ES6 öncesine göre kod yazımı biraz daha kolaylaştı. Bu değişimi kodlarımızı yazarken birlikte göreceğiz zaten. Şimdi konumuza giriş yapalım. Obje ve protoype oluştururken ES6 öncesinde bildiğimiz gibi aşağıdaki gibi oluşturuyorduk,

Kod:

function Employee(name,surname,age){
this.name = name;
this.surname = surname;
this.age = age;
}
Employee.prototype.showInfos = function(){
console.log("İsim: " + this.name + "Soyisim: " + this.surname + "Yaş: " + this.age );
}
const emp = new Employee("black","coder",30);
console.log(emp);

ES6 ile beraber bu yazım daha da kolaylaşmış durumda. Şimdi yukarıdaki kodlarla aynı işlevi gören daha kısa bir kod bloğu yazacağız. Bunun için ES6 sınıflarını kullanıyoruz. ES6 sınıfları ile objemizi aşağıdaki gibi oluşturabiliriz. Burada fark ettiyseniz " function() " parametresini kullanmadım. Çünkü ES6 sınıflarında buna ihtiyaç duymuyoruz.

Kod:

class Employee{
constructor(name,surname,age){
this.name = name;
this.surname = surname;
this.age = age;
}
}

Şimdi prototype'imizi objemize ekleyelim. Burada ES6 öncesinde de kullandığımız showInfos() metodunu kulanabiliriz. Prototype'imizi oluşturup yukarıdaki kod bloğu ile toparladığımızda totalde aşağıdaki gibi bir kod bloğu elde etmiş olacağız,

Kod:

class Employee {
constructor(name,surname,age){
this.name = name;
this.surname = surname;
this.age = age;
}
showInfos(){
console.log("İsim: " + this.name + "Soyisim: " + this.surname + "Yaş: " + this.age);
}
}
emp = new Employee("black","coder",30);
console.log(emp);

ECMASCRİPT 6 (ES6) STATİK METODLAR

Javascriptteki durağan metodlardır. Bu metodlar, herhangi bir class içersinde verildiğinde obje belirtilmese dahi kullanılabilir. Bu başlığımızda da bu olayı göreceğiz. Statik metodlarımızı oluşturmak için "static" anahtar kelimesini kullanıyoruz. Aşağıdaki kod bloğumda bir ES6 sınıfı oluşturdum ve bu sınıfa "cube" metodunu atadım.

Kod:

class Matematik {
static cube(x) {
console.log(x*x*x);
}
}
Matematik.cube(3);

Yukarıda da görmüş olduğunuz gibi herhangi bir obje oluşturmadan bu işlemimi yapabildim. İşte statik metodlar bu şekilde bir class içerisinde kullanıldığında çalıştırılmak için objeye ihtiyaç duymuyorlar.

ECMASCRİPT 6 (ES6) KALITIM

ES6 ile beraber prototype tabanlı kalıtım oldukça kolaylaşmış durumda. Bu başlığımızda da ES6 classları ile birlikte kalıtım konusunu işleyeceğiz. İlk olarak classımızı aşağıdaki şekilde oluşturuyoruz,

Kod:

class Person {
constructor(name,surname){
this.name = name;
this.surname = surname;
}
showInfos(){
console.log("isim: " + this.name + "Soyisim: " + this.surname);}
}

Şimdi ES6 ile birlikte yukarıdaki classımızdan, Employee isimli yeni classımızı aşağıdaki gibi türeteceğiz. Yani "Person" classındaki metodlarını şimdi oluşturacağımız "Employee" classının sahip olmasını sağlayacağız. Bunun için yeni olarak "extends" anahtar kelimesini ullanacağız. Burada ek olarak bir de "super()" anahtar kelimesini kullanıyoruz. Bu anahtar kelime de metodlarına sahip olacağımız sınıfa ait constructorları kullanmamızı sağlıyor. Yani yukarıda "this.name" ve "this.surname" şeklinde verdiğimiz constructorları tekrar yazmaya gerek kalmadan "super()" anahtar kelimesi ile kullanabiliyoruz

Kod:

class Employee extends Person {
constructor(name,surname) {
super(name,surname);
}
}

Ardından aşağıdaki kodlarla objemizi oluşurup console ekranına yazdırıyoruz,

Kod:

const emp = new Employee("black","coder");
consoel.log(emp);

ES6 ile kalıtım konusunu da bu şekilde işlemiş olduk.

ASENKRON PROGRAMLAMA

Bu başlığımıza "Senkron İşlemler"i tanımlayarak başlamak istiyorum. Javascriptte senkron işlemler, yukarıdan aşağı doğru sırasıyla çalışan fonksiyonları tanımlar. Senkron işlemlerde bir fonksiyon bitmeden diğer fonksiyon çalışmaya başlayamaz. Bunun aksine "Asenkron İşlemler" eşzamansız olarak çalışır ve işlemler burada çalışma süresine göre öncelik alırlar. Çalışmasından bitişine kadar olan sürenin en kısa olduğu işlem önce çalışır.

Javascriptte Asenkron işlemlerin yönetilebilmesi için çeşitli yöntemler bulunmaktadır. ES6 öncesinde Callback yapıları, ES6'da promise yapıları ve ES6 sonrası Async & Await yapıları bunlara örnektir.

JSON NEDİR ?

Javascript Object Notation yani JSON, Türkçesiyle javascript obje gösterimi anlamına gelmektedir. Burada değerler "key" ve "value"den oluşur. Yapısı bakımından XML'e benzeyen JSON, XML'e oranla daha rahat okunabilir ve daha hızlı çalışır.

AJAX NEDİR ?

Veri alma ve veri gönderme işlemini asenkron olarak gerçekleştirmeyi ve XHR objesi ile etkileşimli web uygulamaları oluşturmamızı sağlayan bir tekniktir.

AJAX VE TEXT DOSYASI İŞLEMLERİ

Bu başlığımızda, web sayfamızdaki bir butona tıkladığımızda sayfayı yenilemeden text dosyamızdaki veriyi almaya çalışacağız. Aldığımız bu veriyi de oluşturduğumuz div içerisine yazdırmaya çalışacağız. Bunun için index.html'de bir buton oluşturdum. İşlemlerimizi bu butonu kullanarak yapacağız. Ardından app.js isimli javascript dosyamı html dosyama dahil ettim. Yaptığım işlemleri anlamanız açısından kodları buraya bırakıyorum,

Kod:

<!DOCTYPE html>
<html lang="en">
<head>
    <méta charset="UTF-8">
    <méta name="viewport" content="width=device-width, initial-scale=1.0">
    <méta http-equiv="X-UA-Compatible" content="ie=Edge">
    <title>Javascript Ders - 'blackcoder - THT</title>
</head>
<body>
<div id="ajax"> </div>
    <button id="btn">Ajax İşlemini Gerçekleştir</button>
    <script src="app.js"></script>
</body>
</html>

İlk olarak javascriptte butonumuzu aşağıdaki kod ile seçerek click eventi atıyoruz ve click eventi ile çalışacak fonksiyonumuzu süslü parantez içerisine daha sonra yazacağız

Kod:

documént.getElementById("btn").addEventListener("click", function(){
});

Şimdi XMLHttpRequest objesinden bir obje oluşturarak AJAX işlemi gerçekleştirebiliriz. Objemizi aşağıdaki gibi yukarıda boş bıraktığımız süslü parantez içerisinde oluşturuyoruz,

Kod:

const xhr = new XMLHttpRequest();

Şimdi txt dosyamızdan veri almamızı sağlayacak kodu yazacağız. Burada XMLHttpRequest objesinin "open" metodunu kullanarak bu bağlantıyı sağlayabiliriz. Ardından kullanacağımız GET metodunu, hangi dosyadan veri alınacağını ve asenkron olup olmadığını belirteceğiz. Aşağıdaki kodlarda gördüğünüz üzere "true" ifadesini kullandım. Bu ifade işlemimizin asenkron olacağı anlamını taşıyor,

Kod:

xhr.open("GET","example.txt",true);

bağlantımızı açtıktan sonra requestimizi "send()" ile gönderebiliriz. Biz yukarıda GET modunu kullandığımız için parantez içerisini boş bırakıyoruz,

Kod:

xhr.send();

Şimdi textimizi almadan önce alınan verinin değiştirilmesi halinde sayfa üzerinde de yenilenmesini sağlayacak "onreadystatechange" metodunu kullanacağız. onreadystatechange ile fonksiyonumuzu oluşturuyoruz. Ardından işlemimizin hiçbir sorun yaşamadan çalıştığını gösteren "200" durum kodunu ve response'umuzun hazır olması durumunu karşılayan "4" rakamını koşul olarak vereceğiz. Bu sayede kodumuz yalnızca istediğimiz çerçevesinde çalışmış olacak. Koşulumuzu belirttikten sonra console üzerinde verimizi string olarak almamızı sağlayan responseText metodunu kullanıyoruz,

Kod:

xhr.onreadystatechange = function(){
    if(this.status == 200 && this.readyState == 4){
        console.log(this.responseText);
    }
}

Bunun ardından artık butonumuza bastığımızda txt dosyamıza yazdığımız metin web sayfamızda görüntülenmiş olacak

AJAX VE JSON İŞLEMLERİ

Bu başlığımızda butona tıkladığımızda json objesindeki verileri almaya çalışacağız. Ben bunun için "employees.json" adında bir json dosyası oluşturdum. İçeriği aşağıdaki gibidir,

Kod:

[
    {
    "name" : "black coder",
    "department" : "Bilişim",
    "salary" : 4500 
    },
    {
    "name" : "white coder",
    "department" : "Bilişim",
    "salary" : 4000
    },
    {
    "name" : "red coder",
    "department" : "Bilişim",
    "salary" : 3500
    }
]

Şimdi yukarıdaki verileri AJAX kullanarak almaya çalışacağız. Bunun için ilk olarak butonumuzu seçip click eventi atayacağız. Ben aşağıdaki gibi butonumu seçiyorum ve click eventimi atıyorum

Kod:

documént.getElementById("ajax").addEventListener("click",func);

Bundan sonra işlemlerimizi "func" isimli fonksiyonumuz içerisinde gerçekleştireceğiz. Fonksiyonumuzu tıpkı önceki başlığımızda yaptığımız gibi oluşturuyoruz. Ardından objemizi oluşturup "GET" metodu ile json dosyamızı gösteriyoruz

Kod:

function func(){
const xhr = new XMLHttpRequest();
xhr.open("GET","employees.json",true);
xhr.send();
}

Response'umuz geldiğinde çalışacak fonksiyonumuzu yukarıdaki fonksiyon içerisine yazacağız. Şimdi verileri aktaracağım listemi seçiyorum. Ardından daha önce de yaptığımız gibi koşulumuzu ekliyoruz ve stringimizi json arrayine çevirecek olan "JSON.parse" metodunu kullanıyoruz. Hemen ardından forEach döngüsünü kullanarak arrayimiz içerisinde gezinmeyi sağlıyoruz. Daha sonra listemizin innerHTML'indeki <tr> ve <td> tagleri arasına bu verilerimizin eklenmesini sağlayan kodumuzu yazıyoruz ve ${employee.name} ile de değerlerimizi berliterek kod bloğumuzu aşağıdaki gibi hazırlıyoruz.

Kod:

xhr.onload = function (){
    let list = documént.getElementById("employees");

    if(this.status == 200) {
        const employees = JSON.parse(this.responseText);

        employees.forEach(function(employee){
            list.innerHTML += 
            `<tr>
                <td>${employee.name}</td>
                <td>${employee.name}</td>
                <td>${employee.name}</td>
            </tr>`;
        })
    }
}

Genel olarak app.js'teki kod bloğumuz aşağıdaki gibi olacak,

Kod:

documént.getElementById("ajax").addEventListener("click",func);


function func(){
const xhr = new XMLHttpRequest();
xhr.open("GET","employees.json",true);

xhr.onload = function (){
    let list = documént.getElementById("employees");

    if(this.status == 200) {
        const employees = JSON.parse(this.responseText);

        employees.forEach(function(employee){
            list.innerHTML += 
            `<tr>
                <td>${employee.name}</td>
                <td>${employee.name}</td>
                <td>${employee.name}</td>
            </tr>`;
        })
    }
}
xhr.send();
}

Bunun ardından artık json dosyamızdaki verileri AJAX tekniği ile almış olduk.

SetTimeout Fonksiyonları

Bu fonksiyonlar sayesinde belirlediğimiz fonksiyonu belirlediğimiz bir zamanda çalıştırabiliyoruz. Hemen bir örnekle gösterelim. Örneğin console üzerine bir string gönderelim. Bu stringimiz konsolda sayfayı yeniledikten 2 saniye sonra çalışsın. Bunun için kodumuzu aşağıdaki gibi yazabiliriz,

Kod:

setTimeout(function(){
console.log("Merhaba");},2000);

SetInterval Fonksiyonları

Bu fonksiyon, çalıştırılacak kod bloğunun verilen süre aralıklarında tekrar çalışmasını sağlayan fonksiyondur. Örneğin aşağıda yazdığımız kod ile çalıştırılacak kod bloğu 2 saniyede bir kendini tekrar edecek

Kod:

setInterval (function(){
console.log("Merhaba");},2000);

CallBack Fonksiyonlar

Fonksiyonları, başka bir fonksiyona parametre olarak gönderebildiğimiz fonksiyonlardır. Bu başlığımıza kadar olan kısımlarda bu fonksiyonları zaten oldukça fazla kullandık. Örnekle açıklamak gerekirse, aşağıda forEach döngüsü içerisinde parametre olarak belirttiğimiz fonksiyona callback fonksiyon diyoruz

Kod:

const langs = ["Python","Javascript","Java"];
langs.forEach(function(lang){
console.log(lang);});

PROMISE YAPISI

Kodlarda istekte bulunurken kullanılabilen yapıdır. Şimdi aşağıya promise objesi döndüren bir fonksiyon oluşturuyorum. Bu fonksiyondan return ile yeni bir promise oluşturuyorum ardından promise'ıma bir callback fonksiyonu gönderiyorum. Bu callback fonksiyonum "resolve" adında olumlu dönütü yani veriyi ve "reject" adındaki olumsuz dönütü diğer adıyla hata mesajlarını döndürecek.

Kod:

function getData(data){
    return getData = new Promise(function(resolve,reject){

    });
}

Şimdi Promise yapımızda pending yani bekleme durumunu beraber görelim. Yukarıdaki fonksiyonum içerisine daha önce gördüğümüz setTimeout fonksiyonunu oluşturuyorum. Ardından settimeout süresi tamamlanmadan kod bloğunu çalıştırmayı deneyeceğim. Böylece kod bloğu pending durumunda kalacak ve biz bunu console üzerinde görebileceğiz.

Kod:

function getData(data){
    return getData = new Promise(function(resolve,reject){

        setTimeout(function(){
           resolve("olumlu sonuç");
        },10000);
    });
}

console.log(getData("merhaba"));

Aşağıda da gördüğünüz gibi yapımız pending durumunda kaldı

Şimdi promise'imizde resolve değeri döndüğünde kod bloğumuzu çalıştıracak kodumuzu yazalım. Bunun için "then" metodunu kullanıyoruz. Burada fonksiyonumuz içerisine "response" yazarak resolve değerini görüntüleyebiliriz

Kod:

function getData(data){
    return getData = new Promise(function(resolve,reject){

        setTimeout(function(){
           resolve("olumlu sonuç");
        },10000);
    });
}

getData("Merhaba").then(function(response){
console.log(response);});

Fonksiyonumuzda reject dönütü gelirse yani olumsuz dönüt dönerse, bu sefer de "catch" metodunu kullanacağız. Ve fonksiyon içerisine "err" yazarak reject değerimizi görüntüleyeceğiz,

Kod:

function getData(data){
    return getData = new Promise(function(resolve,reject){

        setTimeout(function(){
            reject("Olumsuz Sonuç");
         },10000);
     });
}

getData("Merhaba").catch(function(err){
    console.log(err);});

FETCH API KULLANIMI

Ajax yerine kullanılabilen alternetif bir asenkron veri alış-veriş API'sidir. Kullanımı Ajax'a göre oldukça kolaydır. Bu başlığımızda bir text dosyasından veri almaya çalışacağız. Text dosyasını oluşturduktan sonra js kodlarımıza geçebiliriz. İlk olarak fonksiyonumuzu oluşturuyoruz,

Kod:

function getText(){
}
getText();

Ardından bu fonksiyonumuz içerisine "fetch()" metodu ile txt dosyamızı belirtiyoruz

Kod:

fetch("example.txt")

Ardından daha önce öğrendiğimiz then metodu ile resolve halinde olmak üzere console üzerinde txt dosyamızın verisinin görünmesini sağlayacağız. Ardından data ile dosyamızın içersindeki verileri console üzerine yazdıracağız.

Kod:

.then(Response => Response.text())
.then(data => console.log(data))

Kod bloğumuz totalde aşağıdaki gibi olacaktır,

Kod:

function getText(){

    fetch("example.txt")
    .then(Response => Response.text())
    .then(data => console.log(data))
}

getText();

FETCH VE PROMİSE İLE HTTP GET REQUESTLERİ

Bu başlığımızda fetch ve promise ile http get requestlerini göreceğiz. Burada bir url belirterek belirttiğimiz url'de bulunan arrayleri console üzerine göndereceğiz. Bunun için ilk olarak classımızı oluşturuyoruz. Ardından requestimizi belirtiyoruz. Son olarak fonksiyonumuzdan yeni bir fonksiyon oluşturarak arrayleri alacağımız url'i belirtiyoruz

Kod:

class Request{

get(url){
    fetch(url)
    .then(response => response.json())
    .then(data => console.log(data))
}
}

const request = new Request();

request.get("https://jsonplaceholder.typicode.com/albums");

FETCH VE PROMİSE İLE HTTP POST REQUESTLERİ

Burada bir data göndererek gönderiğimiz datayı string olarak görüntüleyeceğiz. Örnek kullanımı aşağıdaki gibidir,

Kod:

class Request {
    post(url,data){
        return new Promise((resolve,reject) => {
            fetch(url,{
                method: 'POST',
                body: JSON.stringify(data),
                headers: {
                  "Content-type": "application/json; charset=UTF-8"
                }
            })
            .then(response => response.json())
            .then(data => resolve(data))
            })
    }
}
const request = new Request();
 request.post("https://jsonplaceholder.typicode.com/albums",{userId:1,title:"Thriller"})
 .then(newAlbum => console.log(newAlbum))

FETCH VE PROMİSE İLE HTTP PUT REQUESTLERİ

Bu metodda sağlayıcı üzerindeki kaynağı güncelleyebiliriz. Örnek kullanımı aşağıdaki gibidir,

Kod:

class Request {
    put(url,data){
        return new Promise((resolve,reject) => {
            fetch(url,{
                method: 'PUT',
                body: JSON.stringify(data),
                headers: {
                "Content-type": "application/json; charset=UTF-8"
                }
            })
            .then(response => response.json())
            .then(data => resolve(data))
        })
    }
}
const request = new Request();
 request.put("https://jsonplaceholder.typicode.com/albums/10",{userId:10,title:"Tarkan Karma"})
 .then(album => console.log(album))

FETCH VE PROMISE İLE HTTP DELETE REQUESTLERİ

Bu metod ile sunucudaki herhangi bir veriyi silebiliriz. Örnek kullanımı aşağıdaki gibidir,

Kod:

class Request {
    delete(url){

        return new Promise((resolve,reject) => {
            fetch('https://jsonplaceholder.typicode.com/albums/1', {
            method: 'DELETE'
            }).then(response => resolve("Veri silme işlemi başarılı"))
        });
    }
}
const request = new Request();
 request.delete("https://jsonplaceholder.typicode.com/albums/1")
 .then(message => console.log(message) )

A'dan Z'ye Javascript Öğreniyoruz #3 konuma ve Javascript eğitimine burada nokta koyuyorum. Teşekkür eder iyi forumlar dilerim...

[A'dan Z'ye] Javascript Öğreniyoruz #1 Konusuna Gitmek İçin;

https://www.turkhackteam.org/javascript/1904171-adan-zye-javascript-ogreniyoruz-1-a.html

[A'dan Z'ye] Javascript Öğreniyoruz #2 Konusuna Gitmek İçin;

https://www.turkhackteam.org/javascript/1909434-adan-zye-javascript-ogreniyoruz-2-a.html

'Execution · 19 May 2020

Güncel

ARSEF7 · 19 May 2020

Hocam gözüm yolda kaldı çok şükür attınız Ellerinize Sağlık

Panda Winson · 19 May 2020

Sayenizde Java Scripte sardım hocam elinize sağlık bu arada.

Codx · 19 May 2020

Ellerine sağlık.

'Execution · 19 May 2020

Teşekkür ederim arkadaşlar

[A'dan Z'ye] JavaScript Öğreniyoruz #3

'Execution

Kıdemli Üye

'Execution

Kıdemli Üye

ARSEF7

Katılımcı Üye

Panda Winson

Katılımcı Üye

Codx

Katılımcı Üye

'Execution

Kıdemli Üye

Sosyal medya sayfalarımız