JQuery Veri Tipleri

Bu sayfada jQuery fonksiyonlarının kullandığı ve jQuery tarafından kısıtlanmış veri tipleri veya JavaScript'in kendi veri tipleri açıklanıyor. Aşağıda verilen örneklerin çoğunu tarayıcınızın geliştirici araçları penceresindeki konsolda direk kopyalayarak deneyebilirsiniz.

Array

JavaScript Array , dahili metodları ile değiştirilebilir bir değerler listesidir. Array değerler şöyle girilir:

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

Bir array'in veri tipi object'dir.

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

Array elemanlarına ulaşmak için köşeli parantez notasyonu kullanılır.

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

İterasyon

Bir array elemanları üzerinde iterasyon yapmak için length özelliği kullanılabilir.

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

Performans önemliyse her turda array uzunluğunu sormak yerine :

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

Bir diğer yaklaşımsa her tur için bir değişkene o anki array elemanını koymak. Ama bu yaklaşım eleman değeri 0 veya boş string olan array'ler için çalışmaz.

for ( var i = 0, item; item = a[i]; i++ ) {
  // item değişkeni ile bir şeyler yapın
}

Elemanlar bittiğinde item = a[i] false değeri döneceğinden döngü biter. JQuery bir nesne ya da array'in elemanları üzerinden iterasyon yapmak için each metoduna sahiptir.

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

Bu callback fonksiyonun dezavantajı döngü esnasında hangi elemandaysa kapsam o olarak callback çağrılacağından, bulunduğunuz yerde this kelimesi anlamı değişir. Eğer gerekliyse dikkat etmelisiniz.

Array'e eleman eklemek için length özelliği de kullanılabilir. Bu .push() metodu ile aynı işi yapar.

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

Her iki kullanımı da JavaScript kütüphanesi kodunda sıklıkla görebilirsiniz.

Diğer dahili metodları ise, reverse, join, shift, unshift, pop, slice, splice ve sort :

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 ]

Boolean Default

Bir array elemanları olsun ya da olmasın asla false vermez

![] // false
!![] // true

Array<Type> Notasyonu

JQuery API dökümanında sıklıkla Array<type> notasyonu karşınıza çıkar.

dragPrevention    Array<String>

Bu parametrenin sadece bir array değil , string değerlerden oluşan bir array olması gerektiğini belirtir. Bu amaçla Java ya da C++ notasyonundan öykünülen bu notasyonla ifade edilir.

Array Benzeri Nesneler

Ya bir JavaScript array ya da negatif olmayan length ve 0'dan length-1'e kadar index özelliği olan nesneler. İkinci çeşit array benzeri nesneler web tabanlı kodlarda çok rastlanır, mesela arguments nesnesi ya da birçok DOM metodundan dönen NodeList nesnesi gibi. JQuery'deki düz nesneler length özelliğine sahipse array benzeri nesne gibi davranabilir.

Boolean

JavaScript'de boolean bir değer true ya da false olabilir.

if ( true ) console.log( "her zaman!" );
if ( false ) console.log( "asla!" );

Düz Nesne

PlainObject tipi sıfır ya da daha fazla key/value çifti değer içeren JavaScript nesnesidir. JQuery dökümanında plain denmesi sebebi, onu diğer JavaScript nesnelerden ( null, kullanıcı tanımlı array'ler, document gibi typeOf deyince object denen diğerleri vs. ) ayırt etmek içindir. jQuery.isPlainObject() metodu aşağıda gösterildiği gibi parametrelerin düz nesne olup olmadığını test için kullanılabilir.

  var a = [];
  var d = document;
  var o = {};
 
  typeof a; // object
  typeof d; // object
  typeof o; // object
 
  jQuery.isPlainObject( a ); // false
  jQuery.isPlainObject( d ); // false
  jQuery.isPlainObject( o ); // true

Eleman

Document Object Model (DOM) içinde bir elemanın bağlı özellikleri , yazısı ve alt elemanları olabilir. Üst elemanı ve alt elemanlarına erişip özelliklerini değiştirmek için metodlara sahiptir. DOM API özellikleri ve uyarlamalarındaki tutarsızlıklar yüzünden kullanımları sorun üretebilir. JQuery size bu elemanların DOM etkileşimlerinde yardımcı olacak bir "wrapper" sağlar.

JQuery'nin .each() metodunu veya olay işleyici metodlardan birini bir jQuery kolleksiyonunda kullandığınızda , callback metodunun kapsamında this kelimesi bir DOM elemanını gösterir.

Aşağıdaki örnekte bir text input elemanında bir şey yazmadan başka yere geçince bir alert mesajı veriliyor.

$( "input[type='text']" ).on( "blur", function() {
  if( !this.value ) {
    alert( "Lütfen bir şeyler yazınız!" );
  }
});

Burada standart this.value yerine jQuery şekliyle $(this).val() de yazabilirsiniz, ama bu size artı bir şey kazandırmaz.

Function

JavaScript'de bir fonksiyon (function) isimli ya da anonim olabilir. Herhangi bir fonksiyon bir değişkene atanabilir ya da bir metoda parametre olarak verilebilir. Örnek:

function named() {}
var handler = function() {}

JQuery kodlarında çok fazla sıklıkta anonim fonksiyonlara rastlarsınız

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

Bir fonksiyonun veri tipi "function" dur.

arguments

Bir fonksiyon tanımı içinde arguments özel değişkeni her zaman kullanılabilir. Bir array gibidir ve length özelliği vardır, ancak array metodlarının çoğu ile çalışmaz. Fonksiyon çağrılırken girilen argümanların (parametrelerin) oluşturduğu bir sahte array gibidir.

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

arguments nesnesi aynı zamanda callee adında bir özelliğe sahiptir. Bu özellik aslında o fonksiyonun tanımıdır. Örnek:

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

Context, Call ve Apply

JavaScript'de this değeri her zaman bulunulan bağlamı (context) ifade eder. Default olarak this ana eleman olan window nesnesidir. Bir fonksiyon içerisinde bağlam o fonksiyonun nasıl çağrıldığına göre değişir.

JQuery'de olay işlerken o olayın oluştuğu eleman bağlam olur ve böylece olay işleyici fonksiyon içinde this kelimesi olayın gerçekleştiği eleman olur.

$( document ).ready(function() {
  // this kelimesi window.document'i gösterir
});
$( "a" ).on( "click", function() {
  // this kelimesi DOM elemanı <a>'dır
});

Bir fonksiyon için bağlamı .call() ve .apply() metodlarını kullanarak değiştirebilirsiniz. Aralarındaki fark parametreleri fonksiyona nasıl geçirdikleri ile alakalıdır. .call() verilen parametreleri virgülle ayrılmış olarak fonksiyona verirken , .apply() bir array içinde verilen değerleri parametre olarak fonksiyona geçirir.

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

Kapsam (scope)

JavaScript'de bir fonksiyon içinde tanımlanmış tüm değişkenler o fonksiyon kapsamı içinde kullanılabilir. Örneğe bakalım:

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

Global kapsamda bir x değişkeni tanımlanıyor, hemen çalışacak bir anonim fonksiyon tanımı içinde (fonksiyon tanımı sonrası gelen parantez açıp kapama hemen çalışması için konulur) bir diğer x değişkeni başka bir değerle tanımlanıyor. Dikkat ederseniz fonksiyon içinde başka değer , dışında başka değer veriyor konsola.

Kapalı Değerler (closures)

Kapalı değerler bir değişken bulunulan kapsam dışında tanımlanıp daha iç bir kapsamdan erişildiğinde oluşur. Aşağıdaki örnekte üret fonksiyonu kapsamındaki sayaç değişkeni arttır ve yazdır metodları tarafından görülebilir, ama onların haricinden görünemez.

function üret() {
  var sayaç = 0;
  return {
    arttır: function() {
      sayaç++;
    },
    yazdır: function() {
      console.log( sayaç );
    }
  }
}
var c = üret();
c.arttır();
c.yazdır(); // 1

Bu patern size dışarıdan görünmeyen özellik verilerini işleyebilen metodları olan nesneler üretme imkanı verir. Nesne yönelimli programlamanın temeli (oop).

Herhangi bir şey

JQuery dökümanında Anything şeklinde yazılan veri tipi orada herhangi tip bir veri olabileceğini anlatır.

Integer - Tamsayı

Integer düz sayı bir değerdir. Matematikte tam sayı diye bildiğimiz değerdir. Noktalı olmayan sayı demek. İşlem yapılması için emin olunabilecek limitleri:

Number.MAX_SAFE_INTEGER
Number.MIN_SAFE_INTEGER

jQuery Nesnesi

Bir jQuery nesnesi bir HTML string ile üretilmiş veya dökümandan seçilerek bulunmuş DOM elemanlarından bir kolleksiyondur. JQuery metodları elemanları bulmak için sıklıkla CSS seçicilerini kullandığı için jQuery nesneleri genellikle "eşleşen elemanlar" ya da "seçilen elemanlar" olarak adlandırılır.

JQuery nesnesi bir array gibi davranış sergiler, length özelliği vardır ve üyelerine [0]'dan [length - 1]'e kadar index değerleri ile erişilebilir. Dikkatinizi çekerim jQuery nesneleri standart JavaScript Array nesneleri ile aynı değildir, mesela .join() gibi birçok array metodu çalışmaz.

Çoğunlukla jQuery() (yada "$()") metodunu kullanarak jQuery nesneleri oluşturursunuz. jQuery.noConflict() ile engellemediğiniz müddetçe jQuery() yerine eşleniği olan $() metodunu da kullanabilirsiniz. Birçok jQuery nesne metodları yine jQuery nesnesi döndüğü için metodlar zincirleme arka arkaya bağlanabilir.

$( "p" ).css( "color", "red" ).find( ".special" ).css( "color", "green" );

örnekte .css() metodu sadece bir özelliğini değiştirip bize aynı jQuery nesnesini ( $("p") ) geri döner. Ama .find() metodu yeni bir eleman seti oluşturarak bize yeni bir jQuery nesnesi döner, o noktadan sonra bu yeni jQuery nesnesi geçerli olacaktır. Bir önceki jQuery nesnesine (önceki eleman setine) geri dönmek için .end() metodu kullanarak zinciri bozmadan devam edilebilir.

Bir jQuery nesnesi boş olabilir, yani içinde hiç bir DOM elemanı olmaz. Boş bir jQuery nesnesini $() metodunu parametresiz olarak kullanarak üretebilirsiniz. Bir jQuery nesnesi eğer sorgu hiç bir eleman seçemediyse veya bir zincir metod elemanları filtrelerken tüm elemanlar dışarda kalırsa da boş nesne olabilir. Bu bir hata değildir, sadece sonrasında gelecek metodlar eleman olmadığı için hiç bir şey yapamaz. Örneğin aşağıdaki kodda eğer .badEntry sınıfında eleman bulunamazsa hiç bir elemanın rengi kırmızı olamaz.

$( ".badEntry" ).css({ color: "red" });

jqXHR

JQuery versiyon 1.5 sonrası $.ajax() metodu jqXHR nesnesi dönmeye başladı. Bu nesne XMLHTTPRequest JavaScript nesnesinin bir süperseti. Daha fazla bilgi için $.ajax() metodu jqXHR başlığına bakınız.

Object - Nesne

JavaScript^de her şey bir nesnedir. Bir nesne üretmenin yolu nesne literal kullanmaktır.

var x = {};
var y = {
  name: "Pete",
  age: 15
};

Nesnelerin veri tipi Object'tir.

typeof {} // "object"

Nokta Notasyonu

Bir nesnenin özelliklerine nokta notasyonu ile ulaşılır.

y.name // "Pete"
y.age // 15
x.name = y.name + " Pan" // "Pete Pan"
x.age = y.age + 1 // 16

Array Notasyonu

Array notasyonu ile de nesne özelliklerine erişilebilir. Bu sayede dinamik erişimler mümkün olur.

var işlemler = {
  arttır: "++",
  azalt: "--"
};
var işlem = "arttır";
işlemler[ işlem ] // "++"
işlemler[ "çarp" ] = "*"; // "*"

İterasyon

Nesne özellikleri üzerinden iterasyon for-in döngüsü ile kolayca yapılır.

var obj = {
  name: "Pete",
  age: 15
};
for( key in obj ) {
  alert( "key : " + [ key ] + ", value : " + obj[ key ] );
}

JQuery'nin each() metodu nesne özelliklerinde iterasyon için kullanılabilir.

jQuery.each( obj, function( key, value ) {
  console.log( "key", key, "value", value );
});

Callback fonksiyonu nesnenin her özelliği için tek tek çalışır.

Default Boolean

Bir nesne özellikleri olsun ya da olmasın asla false default vermez.

!{} // false
!!{} // true

Olay - Event

JQuery'nin olay sistemi , olayları W3C standartlarına göre düzenler. Olay işleyiciye olay nesnesinin gönderilmesi sağlanır. target, relatedTarget, which, metaKey ve pageX/Y özelliklerini ve stopPropagation() ve preventDefault() metodlarını içerir.

Bu özellikler hepsi örneklerle Event Nesnesi başlığında anlatılmıştır.

--------------------- TO DO ----------------------

Sayı - Number

JavaScript'te sayılar double-precision 64-bit format IEEE 754 standardı değerlerdir. string'ler gibi temel basit tiplerdendir. c-temelli dillerde kullanılan tüm operatörler JAvaScript sayılarda kullanılır. (+, -, *, /, %, =, +=, -=, *=, /=, ++, --)

12
3.543

Bir sayının veri tipi number olur

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

Boolean Default

Bir sayı değeri sıfırsa false default verir.

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

Sayılar double-precision format olduğu için aşağıdaki örnek bir hata değildir.

0.1 + 0.2 // 0.30000000000000004

Seçici Deyimler

Seçici deyim bir DOM dökümanından jQuery'nin DOM elemanları seçmesi için kullanılır. Bu döküman birçok durumda tüm tarayıcıların verdiği DOM dökümanıdır, ama bazen Ajax ile alınan bir XML dökümanı da olabilir.

Seçici deyimler standart CSS seçicileri ve bazı ilave şeylerdir. JQuery'deki olası tüm seçiciler Seçiciler API Sayfasında görülebilir.

--------------------- TO DO ---------------------

Math

JavaScript Math nesnesi içinde sayılarla işler yapmak için birçok yardımcı metod sunar.

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

Sayıları Ayrıştırma - Parsing

parseInt ve parseFloat metodları ile string değerler sayıya dönüştürülür. Her ikisi de ayrıca belirtilmemişse örtülü (implicit) olarak dönüşümü yaparlar.

parseInt( "123" ) = 123 // (implicit decimal)
parseInt( "010" ) = 8 // (implicit octal)
parseInt( "0xCAFE" ) = 51966 // (implicit hexadecimal)
parseInt( "010", 10 ) = 10 // (explicit decimal)
parseInt( "11", 2 ) = 3 // (explicit binary)
parseFloat( "10.10" ) = 10.1

Sayıdan String'e

Bir string'e sayı eklediğinizde sonuç her zaman bir string olur. Eğer önce sayıları toplayıp sonra bir string'e eklemek isterseniz, sayıları parantez içine alın. Çünkü opeartör aynı olduğu için sırayla string'e dönerler.

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

Ya da JavaScript'in String sınıfı yardımıyla sayıları string'e dönüştürebilirsiniz.

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

NaN ve Sonsuz

Bazen ayrıştırma (parsing) işlemi sayı sonuç vermiyorsa NaN değeri döner. isNaN metodu bunu algılamak için kullanılır.

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

Sıfıra bölmek sonsuz (Infinity) değer döner

1 / 0 // Infinity

NaN ve Infinity her ikisi de veri tipi olarak "number" verir.

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

Not olarak NaN değerlerini karşılaştırmak ilginçtir.

NaN === NaN // false (!)

Fakat

Infinity === Infinity // true

String

JavaScript'in temel veri tiplerinden olan String, boş, tek karakter ya da bir çok karakterden oluşan yazı dizisidir.

"I'm a String in JavaScript!"
'So am I!'

typeof "Bir string"; // string

Tırnak İşaretleri

Bir string değer tek ya da çift tırnak içinde yazılmalıdır. Yazı değer içinde tek tırnak kullanmak gerekirse çift tırnak ile , çift tırnak kullanmak gerekirse tek tırnak içinde verilir. Eğer çift tırnak içinde yine çift tırnak gerekirse (ya da tek tırnak içinde tek tırnak gerekirse) ters slash ( \ ) ile beraber yazılır.

"You make 'me' sad."
'That\'s "cranking" good fun!'
"<a href=\"home\">Home</a>"

Dahili Metodları

Bir JavaScript string'in onu işlemek için birkaç dahili tanımlı metodu vardır. Genellikle yine bir string değer dönerler - ya da örneğin split bir Array değer döner.

"hello".charAt( 0 ) // "h"
"hello".toUpperCase() // "HELLO"
"Hello".toLowerCase() // "hello"
"hello".replace( /e|o/g, "x" ) // "hxllx"
"1,2,3".split( "," ) // [ "1", "2", "3" ]

length Özelliği

Tüm string'lerde length özelliği vardır.

"Hello".length // 5
"".length // 0

Boolean Default

Boş bir string false değere karşılıkdır

!"" // true
!!"" // false
!"hello" // false
!"true" // false