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

03 Eylül 2007, 10:05

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: Kodu kopyalamak için üzerine çift tıklayın!

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: Kodu kopyalamak için üzerine çift tıklayın!

<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: Kodu kopyalamak için üzerine çift tıklayın!

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: Kodu kopyalamak için üzerine çift tıklayın!

// 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: Kodu kopyalamak için üzerine çift tıklayın!

// 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.

08 Şubat 2008, 14:59

Konularımın sabitlendiğini bilmiyordum :S Devam edeyim o zaman
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

08 Şubat 2008, 15:38

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: Kodu kopyalamak için üzerine çift tıklayın!

// 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: Kodu kopyalamak için üzerine çift tıklayın!

<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>

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
Search and Replace class ( notepad ki düzen/değiştir işlemi) bul ve değiştir class	hAte	PHP	0	11 Kasım 2014 05:07
C++ 'da Class Kullanımı	CeSaRCripS	C ve C++	0	08 Ağustos 2013 13:09
Php Class Yapısı	Pargali	PHP	0	31 Mart 2012 10:14

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)

5846 sayılı Fikir ve Sanat Eserleri Kanunu gereğince sitemizde telif hakkı bulunan mp3,video v.b. eserlerin paylaşımı yasaktır. Yasal işlem olması halinde paylaşan kişi yada kişilerin bilgileri gerekli kuruma verilecektir.