JAVASCRIPT DERSLERİ ANASAYFA ÖNCEKİ DERS SIRADAKİ DERS
Konu başlığına tıklayarak detayları görebilirsiniz!!!
Class'lar yapı olarak değişken tanımlama ile aynı işlevi görüyor. Ama bir class'ı değişken gibi düşünecek olursak içerisinde bu değişkene ait bir kaç özelliği barındırabilir diye düşünebiiriz.
Mesela insan diye bir class oluşturup içerisinde insana ait boy, kilo, yaş vb. gibi bir çok özelliği belirtebiliriz. Javascirpt'te class oluştururken dikkat etmemiz gereken şey html <body> tagleri arasında çalışmıyor olmasıdır. Daha önce derslerimizde öğrendiğimiz kodlar <body> etiketleri arasında çalışabilir ama class'lar <head> etiketleri içerisinde ve yine <script> etiketleri arasında yazılınca çalışacaktır.
Class oluştururken function kelimesini kullanıyoruz. ve parantez içerisinde de almasını istediğimiz özellikleri (attribute) belirtiyoruz.
<html>
<head>
<script type="text/javascript">
function ulke (ad, kod, nufus, kita) {
this.ad = ad;
this.kod = kod;
this.nufus = nufus;
this.kita = kita;
}
</script>
</head>
<body>
<script type="text/javascript">
var ulke1 = new ulke ("Türkiye", 90, 80000000, "Avrupa");
document.write(ulke1.ad + " " + ulke1.kita);
</script>
</body>
</html>
Örneğimizde <head> etiketleri arasında ulke adında bir class oluşturup ad, kod, nufus ve kıta gibi özellikleri olacağını belirtiyorum. Sonrasında ise this. ile he özelliğimiz için bir constructor oluşturuyoruz. Bunu bir kalıp gibi düşünebilirsiniz her seferinde kullanacağınız.
Ardından yeni bir ülke oluşturmak için <body> etiketleri arasında yine <script> etiketlerini oluşturup içerisinde yeni bir ülke oluşturmaya başlıyorum. new ifadesini kullanarak ulke1 adında bir ülke oluşturup ülkeye ait daha önce belirlediğimiz özelliklere karşılık gelen bilgileri giriyorum.
Son olarak da document.write kullanarak ulke1. class'ımı çağırıp sonuna ekrana yazmasını istediğim özelliğini belirtiyorum ve ekrana ülkenin adını ve kıtasını yazmasını sağlıyorum. Benzer şekilde farklı ülkeler oluşturup farklı özelliklerini çağırarak pratik yapabilirsiniz.
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Bir başka class yaratma şekli olarak aşağıdaki şekilde olduğu gibi geçici class'lar da oluşturabilirsiniz. Bu şekilde tek satırda da class oluşturabilirsiniz. Ama daha kapsamlı projelerde yukarıdaki şekliyle kullanmak işinizi daha da kolaylaştıracaktır.
<html>
<head>
</head>
<body>
<script type="text/javascript">
var ulke1 = {ad:"Türkiye", kod:90, nufus:80000000, kita:"Avrupa"};
document.write(ulke1.ad + " " + ulke1.nufus);
</script>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Metod ile class içerisinde oluşturduğumuz özellikler üzerinde fonksiyonlar kullanarak işlem yapma olanağı sağlıyoruz kendimize.
Aşağıdaki örneğimizde yine bir önceki derste olduğu gibi ulke class'ı oluşturup özelliklerini parantez içerisinde yazıyoruz. Bu sefer kacYillik adında bir fonksiyon oluşturup ülkenin kaç yaşında olduğunu hesaplayacağız. Dikkat etmemiz gereken önemli noktalardan biri kacYillik fonksiyonumuzu this. ile belirttiğimiz kısma da yazmamız gerektiğidir.
Sonrasında fonksiyonumuz içerisinde günümüzden ülkenin kuruluş tarihini çıkaran bir yil isimli bir değişken tanımlayarak return ile bu değişkeni çağırıyoruz. En son document.write ile oluşturduğumuz ulke1.kacYillik() fonksiyonunu ekrana yazdırıyoruz. Daha önce de öğrendiğimiz gibi fonksiyonları çağırırken sonundaki parantez aç ve parantez kapa kodunu yazmayı unutmuyoruz. html dosyamızı tarayıcımızda çalıştırdığımızda bize işlemimizin sonucu olan 95 rakamını yazdırdığını göreceğiz.
<html>
<head>
<script type="text/javascript">
function ulke (ad, kod, kurulusTarihi, kita) {
this.ad = ad;
this.kod = kod;
this.kurulusTarihi = kurulusTarihi;
this.kita = kita;
this.kacYillik = kacYillik;
}
function kacYillik () {
var yil = 2018 - this.kurulusTarihi;
return yil;
}
</script>
</head>
<body>
<script type="text/javascript">
var ulke1 = new ulke ("Türkiye", 90, 1923, "Avrupa");
document.write(ulke1.kacYillik());
</script>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
