View Sidebar
Genel Bakış: jQuery ve Veri Tipleri

Genel Bakış: jQuery ve Veri Tipleri

Ekim 7, 2012 13:395 yorum



Tekardan merhabalar. Önümüzdeki haftalarda paylaşacağım konulara ön ayak olması bakımından jQuery’nin tanımını yapmayı ve önemli bir kaç noktasından bahsetmeyi uygun görüyorum.

JQuery nedir sorusunun cevabı aslında çok basit. İnternet programcılığı ile uzun yıllardır uğraşan biri olarak şunu söyleyebilirim: “Hazinedir”. İşin teknik boyutuna gelirsek, jQuery tüm tarayıcılarda sorunsuz çalışan, arama motoru dostu bir JavaScript kütüphanesidir.

2000’li yıllarda internet programcılığı ile uğraşan arkadaşlar anımsayacaktır. Yazdığımız JavaScript kodu Mozilla’da çalışırken, Internet Explorer’da çalışmazdı, veya tam tersi. İşte bu zamanlarda imdadımıza yetişen jQuery sadece tarayıcı uyumluluğu ile değil, beraberinde getirdiği istemci taraflı uygulama geliştirme kolaylığı, eklentileri ve ekstra özellikleriyle öne çıktı. Önümüzdeki haftalarda bahsedeceğim bu ekstra özelliklere geçmeden önce genel bir giriş yapıp veri tiplerinden bahsetmek istiyorum.

JQuery bir çok yerleşik veri tipi sunmaktadır. Bu yerleşik veri tiplerine ek olarak seçiciler (selectors),  olaylar (events) gibi gelişmiş sözde tiplerden bahsedeceğim.

(Not: Bu makaledeki bazı kelimeleri özellikle çevirmedim, çünkü Türkçe’de tam olarak karşılıkları yok)

  1. Dizgi (String)
    • Tırnak Kullanımı
    • Yerleşik Metotlar
    • Length Özelliği
    • Varsayılan Boolean Değerleri
  2. Sayı
    • Varsayılan Boolean Değerleri
    • Math
    • Sayıları Ayrıştırma
    • Sayıdan Stringe Dönüştürme
    • NaN ve Infinity
    • Integer
    • Float
  3. Boolean
  4. Nesne (Object)
    • Nokta Gösterimi
    • Dizi Gösterimi
    • İterasyon (Iteration)
    • Varsayılan Boolean Değerleri
    • Prototip (Prototype)
  5. Dizi
    • İterasyon (Iteration)
    • Varsayılan Boolean Değerleri
    • Array Gösterimi
  6. Düz Nesne (PlainObject)
  7. Fonksiyon
    • Argümanlar
    • Bağlam, Çağırma ve Uygulama
    • Kapsam
    • Kilitler
    • Proxy Pattern
  8. CallBack
  9. Seçici (Selector)
  10. Olay (Event)
  11. Element
  12. jQuery
  13. XMLHttpRequest
  14. jqXHR
  15. Deferred Object
  16. Promise Object
  17. Callbacks Object

Dizgi (String)

"Ben bir String'im";
'Ben de öyle!'
Örnek Uygulama -> https://www.jsfiddle.net/icntfan/uGA3v/

typeof("bir string"); // "string"
typeof('bir string'); // "string"

Tırnak Kullanımı

"Selam. 'Ben' bir kodum."
'Memnun oldum.'

"<a href="\ev\">Ev</a>"

Yerleşik Metotlar

JavaScript’teki String’ler bazı yerleşik metotlara sahiplerdir. Bunlardan dönen değerler, yine string olacaktır. Bazı metotlarda farklı değerler dönebilir (Array gibi).

Örnek Uygulama -> https://www.jsfiddle.net/icntfan/82hbx/

document.write("merhaba".charAt( 0 )) // "m"
document.write("merhaba".toUpperCase()) // "MERHABA"
document.write("Merhaba".toLowerCase()) // "merhaba"
document.write("merhaba".replace( /e|o/g, "x" )) // "mxrhaba"
document.write("1,2,3".split( "," )) // [ "1", "2", "3" ]

length Özelliği

Bütün dizgilerin (string) length özelliği vardır.

Örnek Uygulama -> https://www.jsfiddle.net/icntfan/uy9Zq/

"Merhaba".length // 7
"".length // 0

Varsayılan Boolean Değerleri

!"" // true
!"merhaba" // false
!"true" // false
!new Boolean( false ) // false

Sayı

Sayılar aynı dizgiler olduğu gibi (immutable) değişmezler. C tabanlı dillerdeki tüm yaygın operatörler ile sayılarla çalışılabilir (+, -, *, /, %, =, +=, -=, *=, /=, ++, –). Sayıların JavaScript dilindeki tip karşılığı “number” dır.

typeof 12 // "number"
typeof 3.543 // "number"

Varsayılan Boolean Değerleri

Eğer sayı “0” ise boolean değeri “false” tur.

!0 // true
!1 // false
!-1 // false

Math

JavaScript Math nesnesi ile beraber sayılarla çalışmak üzere faydalı gereçler sunmaktadır.

Math.PI // 3.141592653589793
Math.cos( Math.PI ) // -1

Sayıları Ayrıştırma

parseInt( "123" ) = 123 // (örtülü ondalık)
parseInt( "010" ) = 8 // (örtülü sekizlik)
parseInt( "0xCAFE" ) = 51966 // (örtülü on altılık)
parseInt( "010", 10 ) = 10 // (belirtilmiş ondalık)
parseInt( "11", 2 ) = 3 // (belirtilmiş ikilik)
parseFloat( "10.10" ) = 10.1

Sayıdan Dizgiye Dönüştürme

Sayıları dizgilere eklediğimizde sonuç “string” olacaktır. Operatörler aynı olduğundan dolayı dikkatli olmakta fayda var. Sayıları topladıktan sonra dizgilere eklemek istiyorsak parantez içine almamız gerekecektir.

"" + 1 + 2; // "12"
"" + ( 1 + 2 ); // "3"
"" + 0.0000001; // "1e-7"
parseInt( 0.0000001 ); // 1 (!)

Veya JavaScript dilinin bize sunmuş olduğu “String” sınıfını kullanarak değerleri bir “string” gibi işleyebiliriz.

String( 1 ) + String( 2 ); // "12"
String( 1 + 2 ); // "3"

NaN and Infinity

“NaN: Not a Number” yani “Bir Sayı Değil”
“Infinity” Adından anlaşılacağı üzere sonsuzluğu ifade ediyor.

parseInt( "hello", 10 ) // NaN
isNaN( parseInt("hello", 10) ) // true

Herhangi bir sayıyı sıfıra bölmenin sonucu sonsuzluktur

1 / 0 // Infinity yani Sonsuzluk

NaN ve Infinity değerleri birer sayıdır.

typeof NaN // "number"
typeof Infinity // "number"

Tuhaf karşılaştırmalar:

NaN == NaN // false (!)
ama
Infinity == Infinity // true

Integer

Integer bir sayı tipidir, ancak belirtildiği takdirde tam sayı beklenir

Float

Float bir sayı tipidir, ancak belirtildiği takdirde ondalık sayı beklenir.

Boolean

Boolean değer JavaScript’te “true” veya “false” olabilir.

if (true) console.log("Her zaman!")
if (false) console.log("Asla!")

Nesne

JavaScript’teki her şey birer nesnedir. Ama bazıları daha bir nesnedir :). Bir nesne yaratmanın en temel yolu:

var x = {};
var y = {
  isim: "Osman",
  yas: 27
};

Nokta Gösterimi

Bir nesnenin özelliklerini nokta (.) kullanarak okuyup, yazabiliriz.

y.isim // "Osman"
y.yas // 27
x.isim = y.isim + " Yahya" // "Osman Yahya"
x.yas = y.yas + 1 // 28

Dizi Gösterimi

Bir nesnenin özelliklerini sanki bir diziymiş gibi okuyup, yazabiliriz.

var operasyonlar = {
  arttir: "++",
  azalt: "--"
};
var operasyon= "arttir";
operasyonlar [ operasyon ] // "++"
operasyonlar [ "carpma" ] = "*"; // "*"

İterasyon

İterasyon işlemi şu şekilde yapılabilir.

var nesne = {
  isim: "Osman",
  yas: 27
};
for( anahtar in nesne ) {
  alert( "anahtar  " + [ anahtar ] + ", değer " + nesne[ anahtar] );
}

Varsayılan Boolean Değerleri

Bir nesnenin herhangi bir özelliği olsun veyahut olmasın varsayılan değeri asla “false” olmaz.

!{} // false

Prototip (Prototype)

Her nesne prototip “prototype” özelliğine sahiptir. Yorumlayıcı nesnenin özelliklerini kontrol ederken prototipine de bakar. JQuery nesnelere metotları eklemek için yaygın olarak bunu kullanır.

var form = $("#benimformum");
form.clearForm; // belirtilmemiş
form.fn.clearForm = function() {
  return this.find( ":input" ).each(function() {
    this.value = "";
  }).end();
};
form.clearForm() // Tüm jQuery nesneleri için çalışacaktır. Çünkü yeni metot, nesnenin prototipine eklenmiştir.

Dizi

JavaScript dilindeki diziler değiştirilebilir listelerdir. Gerçek olarak diziler şu şekilde ifade edilir:

var x = [];
var y = [ 1, 2, 3 ];

Dizinin tipi nesne ise:

typeof []; // "object" nesne
typeof [ 1, 2, 3 ]; // "object" nesne

Dizi gösterimi kullanarak dizideki elemanları okumak ve yazmak:

x[ 0 ] = 1;
y[ 2 ] // 3

İterasyon

Diziler iterasyonda da kullanabileceğimiz length özelliğine sahiptirler.

for ( var i = 0; i < a.length; i++ ) {
  // a[i] ile bir şeyler yap
}

Performansın önemli olduğu durumlarda dizinin uzunluğu bir kere almak faydalı olacaktır.

for ( var i = 0, j = a.length; i < j; i++ ) {
  // Do something with a[i]
}

JQuery hem dizilerde hem de nesnelerde kullanılmak üzere “each-function” dediğimiz iterasyon için kullanılan fonksiyonu bize sağlıyor.

var x = [ 1, 2, 3 ];
jQuery.each( x, function( index, value ) {
  console.log( "index", index, "value", value );
});

Dizilere eleman eklemek için length özelliğini şu şekilde kullanabiliriz. Bu yöntem .push() metodu ile aynı işlevi görmektedir.

var dizi = [];
dizi.push( 1 );
dizi[ dizi.length ] = 2;
dizi // [ 1, 2 ]

JavaScript kütüphanesine baktığımızda bu iki yöntemi de görebiliriz. Yerleşik olarak gelen diğer metotlar şunlardır:

var x = [ 0, 3, 1, 2 ];
x.reverse()      // [ 2, 1, 3, 0 ]
x.join(" – ")    // "2 - 1 - 3 - 0"
x.pop()          // [ 2, 1, 3 ]
x.unshift( -1 )  // [ -1, 2, 1, 3 ]
x.shift()        // [ 2, 1, 3 ]
x.sort()         // [ 1, 2, 3 ]
x.splice( 1, 2 ) // [ 2, 3 ]

Not: .unshift() metodu Internet Explorer’da length özelliğini döndürmemektedir.

Varsayılan Boolean Değerleri

Bir dizi dolu veya boş olsun varsayılan değeri asla “false” olmaz.

![] // false

Array Gösterimi

JQuery API’de her zaman karşılaşabileceğiniz bir gösterim, Array:

dragPrevention    Array

Bu kullanım beklenen değerin hem dizi (Array) olması gerektiğini, hemde değerlerin “String” tipinde olması gerektiğini belirtiyor.

Düz Nesne (PlainObject)

Bu veri tipi AJAX fonksiyonu tarafından istenen verileri tutmak için kullandığımız tiptir. Bu tip bir “String” veya Array<form> şeklinde form elemanlarını tutan bir dizi de olabilir. Checkbox’lar gibi aynı isimleri verdiğimiz form elamanlarındaki verileri atamak için şu şekilde kullanabiliriz.

{ 'anahtar[]': [ 'degera', 'degerb' ] }

Sunucu tarafında gelen veri şu şekilde karşılanacaktır.

<!--?php $_REQUEST['key'][0]="degera"; $_REQUEST['key'][1]="degerb"; ?-->

Fonksiyon

JavaScript’te fonksiyonlar bir isme sahip olabileceği gibi isimsiz de olabilirler.

function isimli() {}
var isimsiz = function() {}

JQuery’de bir çok isimsiz fonksiyonla karşılaşabilirsiniz.

$( document ).ready(function() {});
$( "a" ).click(function() {});
$.ajax({
  url: "birdosya.php",
  success: function() {}
});

Argümanlar

Fonksiyonların içerisinde iken özel bir değişken olan “arguments” değişkenini her zaman kullanabiliriz. Bu yönüyle dizilerdeki length özelliğine benzetebiliriz. Ancak bu değişken, dizilerle beraber yerleşik olarak gelen metotlardan yoksundur. Sözde dizimizin elemanları fonksiyon çağrımızın argümanıdır. Örneğe bakarsak daha iyi anlaşılacağını düşünüyorum.

function log( x ) {
  console.log( typeof x, arguments.length );
}
log(); // "undefined", 0
log( 1 ); // "number", 1
log( "1", "2", "3" ); // "string", 3

Nesne argümanları artı olarak “callee” özelliğine sahiptirler. Bu özellik içinde bulunduğumuz fonksiyona işaret eder.

var cokguzel= function() { return arguments.callee; }
cokguzel() == cokguzel// true

Bağlam, Çağırma ve Uygulama

JavaScript’teki “this” değişkeni her daim bulunduğu bağlama işaret eder. “This” değişkeni varsayılan olarak “window” nesnesine işaret eder. Fonksiyonu çağırma şeklimize göre, işaret ettiği bağlamı değiştirebiliriz.

$( document ).ready(function() {
  // window.document e işaret ediyor
});
$( "a" ).click(function() {
  // bir çapa DOM elemanına işaret ediyor
});

Fonksiyonları değişik şekillerde çağırabiliriz. Her birinin arasındaki fark argüman geçirme tarzı olacaktır.

function scope() {
  console.log( this, arguments.length );
}
scope() // window, 0
scope.call( "seyler", [ 1, 2 ] ); // "seyler", 1
scope.apply( "seyler", [ 1, 2 ] ); // "seyler", 2

Kapsam

JavaScript’teki tüm değişkenler bulunduğu fonksiyon kapsamı içerisinde geçerlidir. Örneğin:

// global
var a = 0;
(function() {
  // private
  var a = 1;
  console.log( a ); // 1
})();
console.log( a ); // 0

Kilitler

Kilit mekanizmalarını bir sınıf içerisinde tanımlanmış, “private” değişkenlere benzetebiliriz. Sadece bulunduğu fonksiyonlar tarafından değiştirilebilirler. Örnek daha iyi anlamamıza yardımcı olacaktır.

function yarat() {
  var sayac = 0;
  return {
    arttir: function() {
      sayac++;
    },
    yazdir: function() {
      console.log( sayac );
    }
  }
}
var c = yarat();
c.arttir();
c.yazdir(); // 1

Proxy Pattern

Bir “proxy pattern” dediğimiz yapıyı uygulamak için (AOP) Aspect Oriented Programming’in temellerini uygulayabiliriz.

(function() {
  // Tüm setArray çağırmalarını kütükle (log)
  var proxied = jQuery.fn.setArray;
  jQuery.fn.setArray = function() {
    console.log( this, arguments );
    return proxied.apply( this, arguments );
  };
})();

Callback

Callback’ler temel olarak birer JavaScript fonksiyonudur. Metotlara argüman veya seçenek olarak geçirilirler. Bulunan durum tetiklendiğinde kullanıcıya tepki şansı vermek için kullanılan olaylardır. JQuery’deki yapı şu şekildedir.

$( "body" ).click(function( event ) {
  console.log( "tıklandı: " + event.target );
});

Bazı Callback’ler ise sadece bir şeyler döndürmek için kullanılır.

$( "#formum" ).submit(function() {
  return false;
});

Bu kullanımda sürekli olarak “false” döndürmek yerine, gerekli doğrulama işlemlerinin ardından “true” değeri de döndürülebilir.

Seçici (Selector)

Seçiciler bir DOM (Belge Nesnesi Modeli) belgedeki DOM elemanına ulaşmak için kullanılır. Bu konunun bir ucuna jQuery ve CSS makalesinde değineceğim. Bu konu hakkında daha fazla bilgiye https://api.jquery.com/category/selectors/ adresinden ulaşabilirsiniz.

Element

Bir DOM belgedeki tüm elementler niteliklere ve çocuklara sahiptirler. Bu yöntem bunlara kolayca ulaşmamızı sağlıyor.

$( ":text" ).blur(function() {
  if( !this.value ) {
    alert( "Lütfen bir şeyler girin!" );
  }
});

JQuery

JQuery nesnesi HTML veya bir belgeden seçilen tüm DOM elemanları içerir. jQuery() kullanımı uzun olduğundan $() şeklinde de kullanımı mümkün kılınmıştır. jQuery.noConflict() kullanarak istediğiniz karakteri, kelimeyi $() yerine kullanabilirsiniz.

var $j = jQuery.noConflict();

XMLHttpRequest

AJAX metodu kullanılırken işlem sonucunu ele alıp ona göre işlem yapmamızı sağlayan nesnedir.

jqXHR

JQuery 1.5 ile birlikte gelen $.ajax() metodu jqXHR nesnesini döndürmektedir. Daha fazla bilgi için https://api.jquery.com/jQuery.ajax/#jqXHR adresini ziyaret ediniz.

Deferred Object

JQuery 1.5 ile birlikte gelen Deferred nesnesi bir çok callback oluşturmamızı sağlar. Daha fazla bilgiye https://api.jquery.com/category/deferred-object/ adresinden ulaşabilirsiniz.

Promise Object

Deferred nesnesinin alt metotlarını sağlar (then, done, fail, always, pipe. isResolved, ve isRejected). Amacı, kullanıcının deferred nesnenin durumunu değiştirmesini engellemektir.

Callbacks Object

Çok yönlü bu nesnenin en güçlü tarafı callback listleri yönetmektir. Callback’leri ekleme, silme, ateşleme ve iptal etmek özelliği vardır. Callback nesnesi $.Callbacks tarafından yaratılır ve geri döndürülür.

Faydalanılan kaynaklar:
1-) JQuery documentation -> Types | https://api.jquery.com/Types/

5 Yorum

  • Çok güzel bir yazı olmuş, tebrik ederim. Okumak oldukça zevkliydi. Yoğun bir şekilde verilmiş bilgileri anlamak biraz yorucu (brain-teasing) oluyor ama asıl keyif de buradan geliyor 🙂

    Yazında “sözde değişken” ve “sözde dizi” gibi iki terim kullanmışsın. “Sözde” kelimesinin buralardaki anlamı nedir?

    Sonraki yazılarını heyecanla bekliyorum.

    Muzaffer.

  • Ulvi

    Merhabalar. Güzel düşünceleriniz ve yorumunuz için teşekkür ediyorum.

    Kullanmış olduğum terimleri (sözde tip ve sözde dizi) örneklerle açıklamanın anlaşılması bakımınından daha faydalı olacağını düşünüyorum. İngilizce karşılığı pseudo-array ve pseudo-type olan bu iki terimin açıklamaları:

    Event’lerin kendi içinde tipleri vardır. Örnek verecek olursak:

    // buradaki olay tipimiz tıklama yani "click" tir.
    $("a").click(function(event) {
      alert(event.type);
    }); 
    

    Sözde dizi: Argümanlar konusunda geçiyor. Fonksiyona gelen elemanlar, aslında bizim tanımlamadığımız, JavaScript kütüphanesi tarafından bize sağlanan “arguments” dizisine atanıyor. Bu diziyi kullanarak gelen argüman sayısını belirleyebiliyoruz.

  • Sitende daha yeniyim birşeyler yazmadan çıkmak istemedim eline emeğine sağlık tekrar gözatıcağım çok şey var gibi gördüm kolay gelsin…

  • Sitende daha yeniyim birşeyler yazmadan çıkmak istemedim eline emeğine sağlık tekrar gözatıcağım çok şey var gibi gördüm kolay gelsin…

  • Müslüm

    Bişey anladıysam arap olayım. Biraz okuyunca acemiler için sanıyorsun ama profesyoneller yada enazından acemi olmayanlar için yazılmış 🙂

Yanıtla Emre Işık