Javascript Class Kullanımı
Hepinize merhaba dostlarım 😊. Bu yazımda sizlere web geliştirme araçlarında birisi olan ve neredeyse kullanılması olmazsa olmaz olan javascript programlama dilinde class yapılarından bahsedeceğim. Özellikle node.js gibi teknolojilerde yani javascript programlama dili kullanılan projelerde (büyük projeler örneğin) sıklıkla kullanılan ve bir değere ait özelliklerin içerisinde barındırılması gerektiği durumlarda kullanılan ve kullanmamızın da gerektiği class yapısına javascript programlama dili üzerinden gelin bir bakalım derim 😊. Kemerlerinizi bağlamışsanız yavaştan yavaştan uçuşa geçelim 😊. Ama öncelikle class nedir gelin ona bir bakalım
Class Nedir ?
Dostlarım class deyince artık çoğunuz hemen bir değere ait özelliklerin içerisinde belirtildiği yapı olduğunu hızlıca söylüyorsunuz ki tebrik ederim olayı kavramışsınız 😊. Aklına takılan dostlarım içinse ben olayın mantığını hızlıca anlatmak istiyorum 😊. Şimdi bir oto galeri sistemi yazdığınızı varsayalım dostlarım 😊. Bu oto galerinizde sizin sattığınız veya kiraladığınız araçlar olur. İşte konu tam da burada canlanıyor. Bu her arabanın bir markası, fiyatı, rengi, motor gücü, vites türü vs vs bir sürü özelliği olur. İşte bu özellikleri doğru düzgün tutmak ve ileriki zamanlarda da kodun okunabilirliği açısından class oluşturmak oldukça önemlidir 😊. Bu kısma kadar sorun yoksa dostlarım gelin hep beraber class yapımızı oluşturalım 😊
Class Yapımızı Oluşturalım
Veee geldik artık javascript programlama dilindeki class yapımızı oluşturma işlemine 😊. Öncelikle zor veya karışık diye aklınızda bir soru işareti oluşmuş olabilir dostlarım 😊. Hiç kendinizi korkutmayın konumuz o kadar zor değil aksine basit bir konu 😊. Örneğin oluşturacağımız class türümüz ogrenci olsun. Öğrenci bilgilerini tutalım. Gelelim hemen bunu kodlayalım
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>MFSoftware Blog | Javascript Class İşlemleri</title>
</head>
<body>
<script>
// class yapımızı oluşturalım
class ogrenci{
}
</script>
</body>
</html>şeklinde kodlarımızı yazdık 😊. Gördüğünüz gibi hiç zor bir yanı yok dostlarım 😊. Şimdi kodlarımızda bir değişiklik yapalım. Mesela adi değişkenimiz olsun ve buraya "MFSoftware" yazalım, ve buna ek olarak da soyadi değişkenimizi oluşturalım. Buraya da "Blog" değerini aktaralım Daha sonra da ekranımıza bastırma işlemini gerçekleştirelim. Hemen gelin bu kodlarımızı da yazalım 😊
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>MFSoftware Blog | Javascript Class İşlemleri</title>
</head>
<body>
<script>
// class yapımızı oluşturalım
class Ogrenci{
// yapıcı methodumuzu oluşturalım
constructor(){ // class oluşturulur oluşturulmaz çalışacak
this.adi="MFSoftware"; // bu class ın bir değişkeni olduğu için isim kısmında 'MFSoftware' yazdırmak istedik
this.soyadi="Blog"; // bu class ın bir değişkeni olduğu için soyisim kısmında 'Blog' yazdırmak istedik
}
}
var ogrenci = new Ogrenci(); // class tan nesne oluşturduk
alert("İsim: "+ogrenci.adi+" Soyisim: "+ogrenci.soyadi); // sonucu ekranımıza yazdırdık
</script>
</body>
</html>kodumuzu yazdık dostlarım 😊. Dikkat ettiyseniz dostlarım bu kısımda iki adet karşımıza çıkan bir şey gördük. Bunlara bakacak olursak
- constructor Kullanımı
- this Kullanımı
şeklindedir. Şimdi gelelim neden constructor kullandık ilk önce bunu açıklayalım 😊
Dostlarım oop mimarisinde class içerisinde consturctor kullandığımız zaman daha nesne oluşturulur oluşturulmaz çalışacak olan methodumuzdur. Diğer methodlara erişilme isteğimiz olsa dahi öncelikle bu methodumuz çalışır 😊. Biz de örneğimizde diğer method oluşturmadığımız için ve nesnemizi oluştururken önce bu method çalışsın değişkenlerimize şu şu değerler aktarılsın diyoruz 😊. Daha sonrasında ise kodda gördüğümüüz gibi bir nesne oluşturuyoruz ve direkt olarak consturctor methodumuz çalışıyor ve gerekli işlemleri yapıyor, daha sonrasında ise alert methodumuz ile sonucumuzu ekranımıza bastırıyoruz 😊.
Bu kısmda kadar anladık ve her şey normal ilerliyor çok güzel gidiyoruz 💯. Şimdi diğer sorumuz ise neden this kullandık 🤔
Şimdi dostlarım daha önceki yazımda anlattığım this komutu (okumayan dostlarım buradan ulaşabilir) işte bu noktada devreye giriyor 😊. Bu demek oluyor ki bizim oluşturduğumuz class içerisinde kullanılacak yani bizim class ımıza ait olacak değişkenler olarak belirtiyoruz 😊. Şimdi bunun yerine var kullanırsak aşağıdaki gibi bir hata alırız. Bu hata ise şudur
Uncaught SyntaxError: Unexpected identifierşeklinde bir uyarıdır. Bu uyarıda ise kodumuz bize şu uyarıyı veriyor: "Kardeşim sözdizimi hatası yaptın. Class içerisinde bu şekilde değişken tanımı yapamazsın this kullanmanı öneririm 😉". Biz de javascript programlama dilinin gönlünü kırmayıp this komutu ile değişkenlerimizi tanımlıyoruz ve projelerimizde class içerisindeki değişkene rahatlıkla ulaşabiliyoruz 😊. Kodlarımızı browser üzerinde çalıştırdığımızda ise
İsim: MFSoftware Soyisim: Blogşeklinde ekranımıza çıktı verilecektir 💯. Kodlarımız sorunsuz şekilde çalışıyor 😊. Şimdi ise gelelim constructor harici bir method nasıl oluşturulur onu inceleyelim 😊
Class İçerisinde Method Oluşturma (Constructor Harici)
Evet dostlarım geldik artık oluşturduğumuz class içerisinde consturctor haricinde method oluşturma işlemlerine 😊. Bu işlem özellikle projemizde ileriki zamanlarda çok önem arz eden ve kullanmamızın büyük projelerde önem arz edeceği bir durumdur. Class içerisinde her zaman bu yukarıdaki örnekteki gibi tek bir işlem yaptıramayız 😊. Yeri gelir hesaplama yeri gelir veri işleme gibi durumlar ile karşılaşabiliriz 😊. İşte bu sebepten dolayı birden fazla yani ihtiyacımıza göre method tanımlamaları yapmamız gerekebilir 😊. Şimdi gelelim bu constructor harici methodlar nasıl oluşturulur buna bir göz atalım 😊. Hemen kodlama sayfamızı açalım ve
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>MFSoftware Blog | Javascript Class İşlemleri</title>
</head>
<body>
<script>
// class yapımızı oluşturalım
class Ogrenci{
adSoyadGetir(adi,soyadi){ // iki parametremizi alalım
return "Adınız: "+adi+" Soyadınız: "+soyadi; // sonuç çıktısını ekranımıza bastıralım
}
}
var ogrenci = new Ogrenci(); // class tan nesne oluşturduk
var adSoyadGetir = ogrenci.adSoyadGetir("Muhammed Fatih","Bağcıvan"); // değerimizi ekrana bastırdık
alert(adSoyadGetir);
</script>
</body>
</html>şeklinde kodlarımızı yazdık dostlarım 😊. Şimdi kodları incelediğinizde aklınıza şu sorunun takıldığına adım gibi eminim 😊
Hocam peki burada neden this komutunu kullanmadık ?
çok güzel bir soru dostlarım 😊. Öğrenme adı altında bu şekilde soruların gelmesi cidden çok güzel 😊. Şimdi ise gelelim bu soruyu cevaplamaya 😊
Şimdi dostlarım önceki yazımda yani "Javascript This Komutu Kullanımı" yazımda this komutunun genel olarak bir kullanımından bahsetmiştim. Nerede kullanılırsa orada yani o bölgeye ait bir şey taşır. Mesela projenin ana içeriğinde kullanılırsa "Bu Projede.." anlamı taşırken class içerisinde tanımlandığında da "Bu Class İçerisinde..." anlamını taşır 😊. Biz de eğer bu adSoyadGetir() methodu içerisinde this.adi ve this.soyadi yazdığımız durumda bunu gidip class içerisinde arayacaktı. Ve haliyle bu değişkenleri bulamadığı için ekranımıza
Adınız: undefined Soyadınız: undefinedşeklinde bir çıktı basacaktı 😊. Biz de bunun yerine this anahtar kelimesini kullanmayıp direk parametreden gelen değeri kullandığımız ve çalıştırdığımız için
Adınız: Muhammed Fatih Soyadınız: Bağcıvanşeklinde çıktımızı aldık dostlarım 😊. İşlemler bu kadar basit ve kodlarımız sorunsuz bir şekilde çalışıyor 💯
Şimdi gelelim sizlerle beraber konumuzu pekiştirmek adına bir örnek yapalım 😊. Bir araç galerimiz olsun ve buraya araç ekleyip kiralama işlemini yaptıralım 😊. Aracın markasını,modelini,yaşını, kiralama fiyatını girelim. Yaşı 5-10 arasında ise kiralama fiyatına %18 kdv ekleyelim, 10 - 20 arasında ise %8 kdv ekleyelim 😊. Daha sonra kiralayacağımız gün sayısını girelim ve ekranımıza aracın marka,model,yaş bilgisi, günlük kiralama ücreti ve kiralanan gün sayısı kadar bilgisini de ekrana bastırma işlemini yazdıralım 😊. Hemen kodlama sayfamızı açalım ve
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>MFSoftware Blog | Javascript Class İşlemleri</title>
</head>
<body>
<script>
class Araba{
arac_ekle(marka,model,yas,kira_fiyati){
this.marka = marka; // marka bilgisi
this.model = model; // model bilgisi
this.yas = yas; // yaş bilgisi
this.ucret = kira_fiyati; // günlük kira bilgisi
if(yas>=5 && yas<10){
this.ucret *=118/100; // yaş 5 - 10 arasındaysa %18 kdv
}
if(yas>=10 && yas<20){
this.ucret *=108/100; // yaş 10 - 20 arasındaysa %8 kdv
}
}
arac_kirala(kiralanacak_gun){
return "Kiralanacak Araba Markası: "+this.marka+", Modeli: "+this.model+", Yaşı: "+this.yas+", Günlük Kira Bedeli: "+this.ucret+"₺, Kiralama Tutarı: "+this.ucret*kiralanacak_gun+"₺";
}
}
var kirala = new Araba(); // nesne oluşturalım
kirala.arac_ekle("Volkswagen","Polo",8,400); // araç ekle methodumuzu çağırıp araç ekletelim
alert(kirala.arac_kirala(7)); // araç kirala methodumuzu çalıştırdık
</script>
</body>
</html>şeklinde kodlarımızı yazdık dostlarım 😊. Süreç nasıl işledi diye soracak olursanız hemen size hızlıca anlatayım 😊
- Araba isminde bir class oluşturduk
- Daha sonra içerisine arac_ekle() isminde bir method oluşturduk ve eklemek istediğimiz aracımızın marka, model, yaş ve kira bilgilerini aktardık
- Aracımızın yaşına göre kdv oranı eklettik
- Sonrasında ise arac_kirala() şeklinde bir method oluşturduk ve içerisine kiralayacağımız gün sayısını yazdık
- Daha sonra arac_kirala() methodumuz içerisinde gerekli işlemleri yaptırdık ve sonucu return komutu ile geri döndürdük
- En son olarak da gelen sonucumuzu alert() fonksiyonu ile ekranımıza bastırdık
eveeet süreçlerimiz bu şekilde işledi dostlarım 😊. Şimdi browser sayfamız üzerinde kodumuzu çalıştırdığımızda karşımıza gelecek olan sonuç
Kiralanacak Araba Markası: Volkswagen, Modeli: Polo, Yaşı: 8, Günlük Kira Bedeli: 472₺, Kiralama Tutarı: 3304₺şeklindedir 😊. Bütün işlemlerimiz bu kadar ve kodlarımız sorunsuz şekilde çalışıyor 💯.
Eveeeet dostlarım 😊. Bu yazımda sizlere javascript programlama dili üzerinde class oluşturmayı ve bu class lar içerisine methodlar (consturctor methodu, harici methodlar) oluşturmayı dilim döndüğünce anlatmaya çalıştım. Umarırm faydalı olmuşumdur. Eksik veya hatalı bilgi aktarımım olmuş ise benimle iletişime geçmekten çekinmeyin 😊. Konu başlarda biraz karmaşık veya zor gelebilir anlıyorum dostlarım 😊. Bu aşamada yapmanız gereken şey her yazımın altında da dediğim gibi "İstikrarlı ve Azimli Olmak, Bolca Pratik Yapmak 😊". Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır 😊
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer