IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası

- Web 2.0 (https://www.ircforumlari.net/web-20/)

- - Javascriptte Class Kullanımı (https://www.ircforumlari.net/web-20/37320-javascriptte-class-kullanimi.html)

Javascriptte Class Kullanımı

Tarih: 03 Eylül 2007 - 13:21:33
Yazar: Nickolas

Javascriptte Class (Sınıf) Kullanımı
Basit olarak şu şekildedir. Bir Fonksiyon oluşturulur.
2 Şekilde Kullanılır.
1-)

Kod:

function First_Class()

{

 this.depo = ''; // Burada değişkenleri verirken başına this koyarak vermemiz gerekiyor.

}

First_Class.prototype.set_depo = function(newdepo)

{

 this.depo = newdepo; // Ana fonksiyondaki this.depo değişkenine değer atıyoruz.

};

First_Class.prototype.get_depo = function()

{

 alert(this.depo); // Ana fonksiyondaki this.depo değişkenini çağrıyoruz.

};

Kodu çalıştırmak için şu kodları kullanalım:

Kod:

<html>

<body>

<script type="text/javascript">

<!--

function First_Class()

{

 this.depo = ''; // Burada değişkenleri verirken başına this koyarak vermemiz gerekiyor.

}

First_Class.prototype.set_depo = function(newdepo)

{

 this.depo = newdepo; // Ana fonksiyondaki this.depo değişkenine değer atıyoruz.

};

First_Class.prototype.get_depo = function()

{

 alert(this.depo); // Ana fonksiyondaki this.depo değişkenini çağrıyoruz.

};

// Nesneyi myclass 'a atadık

var myclass = new First_Class();

//-->

</script>

<div><input type="text" id="deneme" style="font: bold 11px Tahoma" value="" /></div>

<div><input type="button" style="font: bold 11px Tahoma" value="SET" onclick="myclass.set_depo(document.getElementById('deneme').value)" /></div>

<div><input type="button" style="font: bold 11px Tahoma" value="GET" onclick="myclass.get_depo()" /></div>

</body>

</html>

Bu da Kodun ekran görüntüsü:
[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]
Görüldüğü gibi bir zorluğu yok. Genel olarak açıklamak istersek;
[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Bu yukarıdaki örnek sadece Class 'ın fonksiyondan farkını göstermek içindi. Oluşturduğunuz fonksiyonları Sınıf içinde
Depolayıp çağırabiliyor ve değerleri ile oynayabiliyorsunuz.
2-)
Yukarıdaki Sınıfın aynısını;

Kod:

function First_Class()

{

 this.depo = ''; // Burada değişkenleri verirken başına this koyarak vermemiz gerekiyor.

 this.set_depo = function(newdepo)

 {

  this.depo = newdepo;

 };

 this.get_depo = function()

 {

  alert(this.depo);

 };

}

Şeklinde de kullanabilirsiniz. Fakat 1. Kullanım ve 2. kullanım arasında bir fark vardır.
1. Kullanımda

Kod:

// Nesneyi myclass 'a atadık

var myclass = new First_Class();

Atamasını yapmadan direk Fonksiyonlara ulaşabiliriz.
Yani: First_Class.prototype.get_depo(); gibi...
Fakat 2. kullanımda ise

Kod:

// Nesneyi myclass 'a atadık

var myclass = new First_Class();

Ataması zorunludur. Size tavsiyem her ikisini de iyi inceleyin. İkisi de çok işinize yarayacak.

Sizlere Bu konuda mümkün oldukça basitten zora doğru örnekler vermeye çalışacağım.

Cevap: Javascriptte Class Kullanımı

Konularımın sabitlendiğini bilmiyordum :S Devam edeyim o zaman :)

Cevap: Javascriptte Class Kullanımı

Class Kullanımına Bir Kaç Örnek vereyim (Kodların anlaşılabilmesi için değişkenleri türkçe kullanacağım):

1-

Çalışır Örnek: [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Kod:

// class için önce adını belirleyip fonksiyonunu oluşturduk.

function Sinif()

{

        this.birinci_sira = 'Nickolas';

        this.ikinci_sira = 'Onur';

        this.ucuncu_sira = 'AnsweR';

}

Sinif.prototype.input_a_yaz = function(input_un_id_si, yazilacak_sira)

{

        var input_alani = document.getElementById(input_un_id_si);

        if (!input_alani)

        {

                alert('Böyle bir input alanı sayfada mevcut değil');

                return false; // input yoksa işlemde yok.

        }

        if (yazilacak_sira > 3 || yazilacak_sira < 1)

        {

                alert('Lütfen 1 ile 3 Arasında bir değer girin');

                return false; // Zaten 3 tane ismimiz mevcut... Fazla girmeye gerek yok.

        }

        var yazilacak_isim = '';

        switch (yazilacak_sira)

        {

                case 1:

                        yazilacak_isim = this.birinci_sira;

                        break;

                case 2:

                        yazilacak_isim = this.ikinci_sira;

                        break;

                case 3:

                        yazilacak_isim = this.ucuncu_sira;

                        break;

        }

        input_alani.value = yazilacak_isim;

};

Kodun Kullanımı:

Kod:

<html>

<head>

<style type="text/css">

body

{

        font: 10pt Verdana

}

.input

{

        font: bold 10pt Verdana;

        font-style: italic;

        text-decoration: underline;

        color: red;

        padding: 2px;

}

.button

{

        font: bold 11px tahoma;

}

</style>

</head> 

<body>
 

<script type="text/javascript">

<!--

// class için önce adını belirleyip fonksiyonunu oluşturduk.

function Sinif()

{

        this.birinci_sira = 'Nickolas';

        this.ikinci_sira = 'Onur';

        this.ucuncu_sira = 'AnsweR';

}

Sinif.prototype.input_a_yaz = function(input_un_id_si, yazilacak_sira)

{

        var input_alani = document.getElementById(input_un_id_si);

        if (!input_alani)

        {

                alert('Böyle bir input alanı sayfada mevcut değil');

                return false; // input yoksa işlemde yok.

        }

        if (yazilacak_sira > 3 || yazilacak_sira < 1)

        {

                alert('Lütfen 1 ile 3 Arasında bir değer girin');

                return false; // Zaten 3 tane ismimiz mevcut... Fazla girmeye gerek yok.

        }

        var yazilacak_isim = '';

        switch (yazilacak_sira)

        {

                case 1:

                        yazilacak_isim = this.birinci_sira;

                        break;

                case 2:

                        yazilacak_isim = this.ikinci_sira;

                        break;

                case 3:

                        yazilacak_isim = this.ucuncu_sira;

                        break;

        }

        input_alani.value = yazilacak_isim;

};
 

var sinif = new Sinif(); // Sınıf Nesnesi...

//-->

</script>

<div style="height: 200px;">&nbsp;</div>

<table cellpadding="6" cellspacing="1" border="0" align="center">

<tr>

        <td>

                <div>1. Input Alanı</div>

                <div><input type="text" class="input" id="birinci_input" size="20" /></div>

                <div><input type="button" class="button" value="1. Alana 1. Adı Yaz" onclick="sinif.input_a_yaz('birinci_input', 1)" /></div>

                <div><input type="button" class="button" value="1. Alana 2. Adı Yaz" onclick="sinif.input_a_yaz('birinci_input', 2)" /></div>

                <div><input type="button" class="button" value="1. Alana 3. Adı Yaz" onclick="sinif.input_a_yaz('birinci_input', 3)" /></div>

        </td>

        <td>

                <div>2. Input Alanı</div>

                <div><input type="text" class="input" id="ikinci_input" size="20" /></div>

                <div><input type="button" class="button" value="2. Alana 1. Adı Yaz" onclick="sinif.input_a_yaz('ikinci_input', 1)" /></div>

                <div><input type="button" class="button" value="2. Alana 2. Adı Yaz" onclick="sinif.input_a_yaz('ikinci_input', 2)" /></div>

                <div><input type="button" class="button" value="2. Alana 3. Adı Yaz" onclick="sinif.input_a_yaz('ikinci_input', 3)" /></div>

        </td>

        <td>

                <div>3. Input Alanı</div>

                <div><input type="text" class="input" id="ucuncu_input" size="20" /></div>

                <div><input type="button" class="button" value="3. Alana 1. Adı Yaz" onclick="sinif.input_a_yaz('ucuncu_input', 1)" /></div>

                <div><input type="button" class="button" value="3. Alana 2. Adı Yaz" onclick="sinif.input_a_yaz('ucuncu_input', 2)" /></div>

                <div><input type="button" class="button" value="3. Alana 3. Adı Yaz" onclick="sinif.input_a_yaz('ucuncu_input', 3)" /></div>

        </td>

</tr>

</td>

</table>

</body>

</html>