Belajar JQuery : Pengenalan

posted in: Tutorial Pemrograman | 0

JQuery merupakan framework yang dibangun menggunakan JavaScript . Anda dapat menggunakan semua fungsi dan kemampuan lain yang tersedia di JavaScript .
Bab ini akan menjelaskan konsep-konsep dasar yang paling tetapi sering digunakan dalam aplikasi berbasis jQuery .

String

Sebuah string dalam JavaScript adalah obyek kekal yang berisi tidak ada , satu atau banyak karakter .
Berikut ini adalah contoh valid dari String JavaScript -”

This is JavaScript String”
‘This is JavaScript String’
‘This is “really” a JavaScript String’
“This is ‘really’ a JavaScript String”

Numbers

Angka dalam JavaScript yang presisi ganda 64 – bit Format IEEE 754 nilai . Mereka berubah , seperti string .
Berikut ini adalah contoh valid dari Bilangan JavaScript –

5350
120.27
0.26

Boolean

Sebuah boolean di JavaScript dapat benar atau salah. Jika nomor adalah nol , standarnya ke palsu. Jika default string kosong ke false –

Berikut ini adalah contoh valid dari Boolean JavaScript –

true // true
false // false
0 // false
1 // true
“” // false
“hello” // true

Objects

JavaScript mendukung konsep Object dengan sangat baik. Anda dapat membuat sebuah objek menggunakan objek literal sebagai berikut –


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

JavaScript mendukung konsep Object sangat baik. Anda dapat membuat sebuah objek menggunakan objek literal sebagai berikut –

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

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

Arrays

Anda dapat menentukan array menggunakan array literal sebagai berikut –

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

Array memiliki properti panjang yang berguna untuk iterasi –

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

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

Functions

Sebuah fungsi dalam JavaScript dapat berupa nama atau anonim. Sebuah fungsi bernama dapat didefinisikan menggunakan fungsi kunci sebagai berikut –

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

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

Sebuah fungsi anonim dapat diberikan ke variabel atau dilewatkan ke metode seperti yang ditunjukkan di bawah ini.

var handler = function (){
// do some stuff here
}
JQuery membuat penggunaan fungsi anonim sangat sering sebagai berikut –

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

Arguments

JavaScript argumen variabel adalah jenis array yang memiliki properti panjang. Berikut contoh menjelaskan 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
Argumen objek juga memiliki properti callee, yang mengacu pada fungsi Anda dalam. Misalnya –

function func() {
return arguments.callee;
}

func(); // ==> func

Context

Kata kunci this JavaScript selalu mengacu pada konteks saat ini.
Dalam fungsi konteks this dapat berubah, tergantung pada dimana fungsi this dipanggil –

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

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

Anda dapat menentukan konteks untuk fungsi panggilan menggunakan metode fungsi-built-in call () dan menerapkan () metode.
Perbedaan antara mereka adalah bagaimana mereka melewatkan argumen. Call melewatkan semua argumen melalui argumen fungsi, sementara Apply menerima sebuah 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

Scope

Ruang lingkup variabel adalah wilayah yang didefinisikan dari program Anda. variabel JavaScript hanya akan memiliki dua lingkup.

  • Global Variables − Sebuah variabel global memiliki lingkup global yang berarti didefinisikan di seluruh dalam kode JavaScript Anda.
  • Local Variables − Sebuah variabel lokal hanya bisa dilihat dalam fungsi dimana didefinisikan. Fungsi parameter sifatnya selalu lokal untuk fungsi tersebut.

Dalam tubuh fungsi, variabel lokal akan didahulukan dari variabel global jika menggunakan nama yang sama −

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

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

Callback

Sebuah callback adalah fungsi JavaScript polos yang dilewatkan pada beberapa metode sebagai argumen atau option. Beberapa callback hanya berupa event, dipanggil untuk memberikan pengguna kesempatan untuk bereaksi untuk kondisi tertentu.
Berikut adalah sistem jQuery yang menggunakan callback di seluruh body dokumen −

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

Kebanyakan callback memberikan argumen dan konteks. Pada contoh event-handler, callback ini disebut dengan satu argumen, yaitu Event.

Beberapa callback diperlukan untuk return sesuatu, return sifatnya opsional. Berikut untuk mencegah pengiriman formulir, submit event handler dikembalikan sebagai false −

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

The Document Object Model

Document Object Model adalah struktur pohon dari berbagai elemen HTML sebagai berikut −

<html>

<head>
<title>Contoh JQuery</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>

Berikut adalah poin penting tentang struktur pohon di atas −

  • <html> merupakan anchestor dari semua elemen lain; dengan kata lain, semua elemen lain adalah keturunan dari <html>.
  • <head> dan <body> elemen tidak hanya descendant, tetapi children dari <html>, juga.
  • Demikian juga, selain menjadi anchestor <head> dan <body>, <html> parent dari mereka.
  • <p> elemen adalah anak-anak (dan keturunan) dari <div>, keturunan <body> dan <html>, dan saudara satu sama lain <p> elemen

Leave a Reply