jQuery - Dasar-dasar

jQuery adalah kerangka kerja yang dibangun menggunakan kemampuan JavaScript. Jadi, Anda bisa menggunakan semua fungsi dan kemampuan lain yang tersedia di JavaScript. Bab ini akan menjelaskan sebagian besar konsep dasar tetapi sering digunakan di jQuery.

Tali

String di JavaScript adalah objek tetap yang tidak berisi satu pun, satu atau banyak karakter. Berikut adalah contoh valid dari JavaScript String -

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

Angka

Angka dalam JavaScript adalah nilai IEEE 754 format 64-bit presisi ganda. Mereka tidak bisa diubah, sama seperti string. Berikut adalah contoh valid dari Nomor JavaScript -

5350
120.27
0.26

Boolean

Boolean dalam JavaScript bisa berupa true atau false. Jika angka nol, defaultnya adalah false. Jika string kosong default ke false.

Berikut adalah contoh valid dari JavaScript Boolean -

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

Objek

JavaScript mendukung konsep Objek dengan sangat baik. Anda dapat membuat objek menggunakan literal objek sebagai berikut -

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

Anda dapat menulis dan membaca properti suatu objek menggunakan notasi titik sebagai berikut -

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

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

Array

Anda dapat menentukan array menggunakan literal array sebagai berikut -

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

Sebuah array memiliki length properti yang berguna untuk iterasi -

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

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

Fungsi

Sebuah fungsi dalam JavaScript bisa diberi nama atau anonim. Fungsi bernama dapat didefinisikan menggunakan kata kunci fungsi sebagai berikut -

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

Fungsi anonim dapat didefinisikan dengan cara yang sama seperti fungsi normal tetapi tidak memiliki nama.

Fungsi anonim dapat ditetapkan ke variabel atau diteruskan ke metode seperti yang ditunjukkan di bawah ini.

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

JQuery sangat sering menggunakan fungsi anonim sebagai berikut -

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

Argumen

Argumen variabel JavaScript adalah sejenis larik yang memiliki properti panjang . Contoh berikut menjelaskannya dengan sangat baik -

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

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

Objek argumen juga memiliki properti callee , yang merujuk ke fungsi di dalamnya. Misalnya -

function func() {
   return arguments.callee; 
}

func();                // ==> func

Konteks

Kata kunci terkenal JavaScript thisselalu mengacu pada konteks saat ini. Dalam suatu fungsithis konteks dapat berubah, tergantung pada bagaimana fungsinya dipanggil -

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

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

Anda dapat menentukan konteks untuk panggilan fungsi menggunakan metode fungsi built-in call() dan apply() metode.

Perbedaan di antara mereka adalah bagaimana mereka menyampaikan argumen. Panggilan melewati semua argumen sebagai argumen ke fungsi, sementara apply menerima array sebagai argumen.

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

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

Cakupan

Cakupan variabel adalah wilayah program Anda yang ditentukan. Variabel JavaScript hanya akan memiliki dua cakupan.

Global Variables - Variabel global memiliki cakupan global yang berarti didefinisikan di mana saja dalam kode JavaScript Anda.
Local Variables- Variabel lokal hanya akan terlihat dalam fungsi yang ditentukan. Parameter fungsi selalu lokal untuk fungsi itu.

Di dalam tubuh suatu fungsi, variabel lokal lebih diutamakan daripada variabel global dengan nama yang sama -

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

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

Telepon balik

Callback adalah fungsi JavaScript biasa yang diteruskan ke beberapa metode sebagai argumen atau opsi. Beberapa callback hanyalah peristiwa, yang dipanggil untuk memberi pengguna kesempatan untuk bereaksi ketika keadaan tertentu dipicu.

Sistem acara jQuery menggunakan callback seperti itu di mana-mana misalnya -

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

Kebanyakan callback memberikan argumen dan konteks. Dalam contoh event-handler, callback dipanggil dengan satu argumen, sebuah Event.

Beberapa callback diperlukan untuk mengembalikan sesuatu, yang lain membuat nilai pengembalian itu opsional. Untuk mencegah pengiriman formulir, pengendali event submit dapat mengembalikan false sebagai berikut -

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

Penutupan

Penutupan dibuat setiap kali variabel yang ditentukan di luar cakupan saat ini diakses dari dalam lingkup dalam.

Contoh berikut menunjukkan bagaimana variabel tersebut counter terlihat dalam fungsi create, increment, dan print, tetapi tidak di luarnya -

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

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

Pola ini memungkinkan Anda membuat objek dengan metode yang beroperasi pada data yang tidak terlihat oleh dunia luar. Perlu dicatat itudata hiding adalah dasar dari pemrograman berorientasi objek.

Pola Proksi

Proksi adalah objek yang dapat digunakan untuk mengontrol akses ke objek lain. Ini mengimplementasikan antarmuka yang sama seperti objek lain ini dan meneruskan pemanggilan metode apa pun padanya. Objek lain ini sering disebut subjek nyata.

Sebuah proxy dapat dibuat di tempat subjek nyata ini dan memungkinkan untuk diakses dari jarak jauh. Kita dapat menyimpan metode setArray jQuery dalam closure dan menimpanya sebagai berikut -

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

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

Di atas membungkus kodenya dalam sebuah fungsi untuk menyembunyikan variabel yang diproksikan . Proksi kemudian mencatat semua panggilan ke metode dan mendelegasikan panggilan ke metode asli. Menggunakan apply (this, arguments) menjamin bahwa pemanggil tidak akan dapat melihat perbedaan antara metode asli dan yang diproksikan.

Fungsi Bawaan

JavaScript hadir dengan serangkaian fungsi bawaan yang berguna. Metode ini dapat digunakan untuk memanipulasi String, Angka, dan Tanggal.

Berikut ini adalah fungsi JavaScript penting -

Sr.No.	Metode & Deskripsi
1	charAt() Mengembalikan karakter pada indeks yang ditentukan.
2	concat() Menggabungkan teks dari dua string dan mengembalikan string baru.
3	forEach() Memanggil fungsi untuk setiap elemen dalam array.
4	indexOf() Mengembalikan indeks dalam objek String pemanggil dari kemunculan pertama dari nilai yang ditentukan, atau -1 jika tidak ditemukan.
5	length() Mengembalikan panjang string.
6	pop() Menghapus elemen terakhir dari array dan mengembalikan elemen itu.
7	push() Menambahkan satu atau lebih elemen ke akhir larik dan mengembalikan panjang larik yang baru.
8	reverse() Membalik urutan elemen larik - yang pertama menjadi yang terakhir, dan yang terakhir menjadi yang pertama.
9	sort() Mengurutkan elemen array.
10	substr() Mengembalikan karakter dalam string yang dimulai di lokasi yang ditentukan melalui jumlah karakter yang ditentukan.
11	toLowerCase() Mengembalikan nilai string panggilan yang dikonversi ke huruf kecil.
12	toString() Mengembalikan representasi string dari nilai angka.
13	toUpperCase() Mengembalikan nilai string panggilan yang dikonversi menjadi huruf besar.

Model Objek Dokumen

Model Objek Dokumen adalah struktur pohon dari berbagai elemen HTML sebagai berikut -

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

Ini akan menghasilkan hasil sebagai berikut -

Berikut adalah poin penting tentang struktur pohon di atas -

<html> adalah leluhur dari semua elemen lainnya; dengan kata lain, semua elemen lainnya adalah turunan dari <html>.
Elemen <head> dan <body> bukan hanya turunan, tetapi juga turunan dari <html>.
Begitu juga, selain menjadi nenek moyang dari <head> dan <body>, <html> juga merupakan induknya.
Elemen <p> adalah anak (dan turunan) dari <div>, turunan dari <body> dan <html>, dan saudara satu sama lain <p> elemen.

Saat mempelajari konsep jQuery, akan sangat membantu untuk memiliki pemahaman tentang DOM, jika Anda tidak mengetahui DOM maka saya akan menyarankan untuk melalui tutorial sederhana kami tentang Tutorial DOM .