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

IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası (https://www.ircforumlari.net/)
-   Web 2.0 (https://www.ircforumlari.net/web-20/)
-   -   Javascriptte Class Kullanımı (https://www.ircforumlari.net/web-20/37320-javascriptte-class-kullanimi.html)

Nickolas 03 Eylül 2007 10:05

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.

Nickolas 08 Şubat 2008 14:59

Cevap: Javascriptte Class Kullanımı
 
Konularımın sabitlendiğini bilmiyordum :S Devam edeyim o zaman :)

Nickolas 08 Şubat 2008 15:38

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>



Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şuanki Zaman: 15:40.

Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2025, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO
Copyright ©2004 - 2025 IRCForumlari.Net Sparhawk