jQuery - Temeller

jQuery, JavaScript yetenekleri kullanılarak oluşturulmuş bir çerçevedir. Böylece, JavaScript'te bulunan tüm işlevleri ve diğer yetenekleri kullanabilirsiniz. Bu bölüm, jQuery'de sıklıkla kullanılan ancak çoğu temel kavramı açıklayacaktır.

Dize

JavaScript'teki bir dize, hiçbir karakter, bir veya daha fazla karakter içeren değişmez bir nesnedir. Aşağıda bir JavaScript Dizesinin geçerli örnekleri verilmiştir -

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

Sayılar

JavaScript'teki sayılar, çift duyarlıklı 64 bit IEEE 754 değerleridir. Tıpkı dizeler gibi değişmezler. Aşağıda JavaScript Numaralarının geçerli örnekleri verilmiştir -

5350
120.27
0.26

Boole

JavaScript'teki bir boole, şunlardan biri olabilir: true veya false. Bir sayı sıfırsa, varsayılan olarak yanlış olur. Boş bir dize varsayılan olarak yanlışsa.

Aşağıda JavaScript Boolean için geçerli örnekler verilmiştir -

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true

Nesneler

JavaScript, Object konseptini çok iyi desteklemektedir. Nesne değişmezini kullanarak aşağıdaki gibi bir nesne oluşturabilirsiniz -

var emp = {
   name: "Zara",
   age: 10
};

Aşağıdaki gibi nokta notasyonunu kullanarak bir nesnenin özelliklerini yazabilir ve okuyabilirsiniz -

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

Diziler

Dizi hazır bilgisini kullanarak dizileri aşağıdaki gibi tanımlayabilirsiniz -

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

Bir dizide bir length yineleme için yararlı olan özellik -

var x = [1, 2, 3, 4, 5];

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

Fonksiyonlar

JavaScript'teki bir işlev adlandırılmış veya anonim olabilir. Adlandırılmış bir işlev, function anahtar sözcüğü kullanılarak aşağıdaki gibi tanımlanabilir -

function named(){
   // do some stuff here
}

Anonim bir işlev, normal bir işlevle benzer şekilde tanımlanabilir, ancak herhangi bir adı olmayacaktır.

Anonim bir işlev, bir değişkene atanabilir veya aşağıda gösterildiği gibi bir yönteme aktarılabilir.

var handler = function (){
   // do some stuff here
}

JQuery, aşağıdaki gibi anonim işlevleri çok sık kullanır -

$(document).ready(function(){
   // do some stuff here
});

Argümanlar

JavaScript değişken argümanları , length özelliğine sahip bir dizi dizidir . Aşağıdaki örnek bunu çok iyi açıklıyor -

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

Arguments nesnesinin içinde bulunduğunuz işleve başvuran bir callee özelliği de vardır . Örneğin -

function func() {
   return arguments.callee; 
}

func();                // ==> func

Bağlam

JavaScript ünlü anahtar kelime thisher zaman geçerli bağlama başvurur. Bir işlev içindethis işlevin nasıl çağrıldığına bağlı olarak bağlam değişebilir -

$(document).ready(function() {
   // this refers to window.document
});

$("div").click(function() {
   // this refers to a div DOM element
});

Yerleşik işlev yöntemlerini kullanarak bir işlev çağrısı için bağlam belirtebilirsiniz call() ve apply() yöntemler.

Aralarındaki fark, argümanları nasıl ilettikleridir. Call, argümanlar olarak tüm argümanları işleve iletirken, apply bir diziyi argümanlar olarak kabul eder.

function scope() {
   console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar", [1,2]);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

Dürbün

Bir değişkenin kapsamı, içinde tanımlandığı programınızın bölgesidir. JavaScript değişkeninin yalnızca iki kapsamı olacaktır.

• Global Variables - Global bir değişkenin genel kapsamı vardır, bu da JavaScript kodunuzun her yerinde tanımlandığı anlamına gelir.

• Local Variables- Yerel bir değişken, yalnızca tanımlandığı bir işlev içinde görünür olacaktır. İşlev parametreleri her zaman bu işlev için yereldir.

Bir fonksiyonun gövdesi içinde, yerel bir değişken, aynı ada sahip bir global değişkene göre önceliklidir -

var myVar = "global";     // ==> Declare a global variable

function ( ) {
   var myVar = "local";   // ==> Declare a local variable
   document.write(myVar); // ==> local
}

Geri aramak

Geri arama, bir yönteme bağımsız değişken veya seçenek olarak iletilen düz bir JavaScript işlevidir. Bazı geri aramalar, kullanıcıya belirli bir durum tetiklendiğinde tepki verme şansı vermek için çağrılan olaylardır.

jQuery'nin olay sistemi bu tür geri aramaları her yerde kullanır, örneğin -

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

Çoğu geri çağırma, bağımsız değişkenler ve bir bağlam sağlar. Olay işleyici örneğinde, geri çağırma bir bağımsız değişkenle, bir Olayla çağrılır.

Bazı geri aramalar bir şeyi döndürmek için gereklidir, diğerleri bu dönüş değerini isteğe bağlı yapar. Bir form gönderimini önlemek için, bir gönderme olay işleyicisi aşağıdaki gibi false değerini döndürebilir -

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

Kapanışlar

Kapanışlar, geçerli kapsamın dışında tanımlanan bir değişkene bazı iç kapsamlardan erişildiğinde oluşturulur.

Aşağıdaki örnek, değişkenin nasıl counter oluşturma, artırma ve yazdırma işlevlerinde görünür, ancak bunların dışında görünmez -

function create() {
   var counter = 0;
	
   return {
      increment: function() {
         counter++;
      },
	   print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();     // ==> 1

Bu desen, dış dünya tarafından görülemeyen veriler üzerinde çalışan yöntemlerle nesneler oluşturmanıza olanak tanır. bu not alınmalıdata hiding nesne yönelimli programlamanın temelidir.

Proxy Kalıbı

Proxy, başka bir nesneye erişimi kontrol etmek için kullanılabilen bir nesnedir. Bu diğer nesne ile aynı arabirimi uygular ve herhangi bir yöntem çağrısını ona iletir. Bu diğer nesneye genellikle gerçek özne denir.

Bu gerçek konu yerine bir vekil örneklenebilir ve ona uzaktan erişilmesine izin verilebilir. JQuery'nin setArray metodunu bir closure'a kaydedebilir ve üzerine aşağıdaki gibi yazabiliriz -

(function() {
   // log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };
	
})();

Yukarıdaki kod, proxy yapılan değişkeni gizlemek için kodunu bir işlevin içine sarar . Proxy daha sonra yönteme yapılan tüm çağrıları günlüğe kaydeder ve çağrıyı orijinal yönteme delege eder. Kullanılması uygulamak (bu, argümanlar) garantiler arayan orijinal ve vekalet edilen yöntemle arasındaki fark görebiliyorsunuz olmayacaktır.

Yerleşik İşlevler

JavaScript, kullanışlı bir dizi yerleşik işlevle birlikte gelir. Bu yöntemler Dizeleri, Sayıları ve Tarihleri ​​değiştirmek için kullanılabilir.

Aşağıda önemli JavaScript işlevleri verilmiştir -

Sr.No.	Yöntem ve Açıklama
1	charAt() Belirtilen dizindeki karakteri döndürür.
2	concat() İki dizenin metnini birleştirir ve yeni bir dize döndürür.
3	forEach() Dizideki her öğe için bir işlev çağırır.
4	indexOf() Belirtilen değerin ilk oluşumunun çağıran String nesnesi içindeki dizini veya bulunamazsa -1'i döndürür.
5	length() Dizenin uzunluğunu döndürür.
6	pop() Bir diziden son öğeyi kaldırır ve o öğeyi döndürür.
7	push() Bir dizinin sonuna bir veya daha fazla öğe ekler ve dizinin yeni uzunluğunu döndürür.
8	reverse() Bir dizinin öğelerinin sırasını tersine çevirir - ilki sonuncu olur ve sonuncusu da ilk olur.
9	sort() Bir dizinin öğelerini sıralar.
10	substr() Bir dizedeki karakterleri, belirtilen konumda başlayan ve belirtilen sayıda karakterle döndürür.
11	toLowerCase() Küçük harfe dönüştürülmüş çağıran dize değerini döndürür.
12	toString() Sayının değerinin dize olarak temsilini döndürür.
13	toUpperCase() Çağıran dize değerini büyük harfe dönüştürülmüş olarak döndürür.

Belge Nesne Modeli

Belge Nesne Modeli, aşağıdaki gibi çeşitli HTML öğelerinin bir ağaç yapısıdır -

<html>
   <head>
      <title>The jQuery Example</title>
   </head>
	
   <body>
      <div>
         <p>This is a paragraph.</p>
         <p>This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

Bu, aşağıdaki sonucu verecektir -

Yukarıdaki ağaç yapısıyla ilgili önemli noktalar aşağıdadır -

• <html>, diğer tüm öğelerin atasıdır; başka bir deyişle, diğer tüm öğeler <html> 'nin soyundan gelir.

• <head> ve <body> öğeleri yalnızca nesiller değil, aynı zamanda <html> alt öğesidir.

• Aynı şekilde, <head> ve <body> 'nin atası olmanın yanı sıra, <html> de onların ebeveynidir.

• <p> öğeleri, <div> öğesinin çocukları (ve soyundan gelenler), <body> ve <html> soyundan gelenler ve birbirlerinin kardeşleridir <p> öğeler.

JQuery kavramlarını öğrenirken, DOM hakkında bilgi sahibi olmanız faydalı olacaktır, eğer DOM'un farkında değilseniz, DOM Eğitimi ile ilgili basit öğreticimizi incelemenizi öneririm .