jQuery sekarang
telah menjadi bahan wajib bagi web desainer maupun blogger. Sebenarnya apa itu jQuery?
jQuery adalah library javascript, jQuery berisi kumpulan kode-kode/fungsi-fungsi yang siap pakai sehingga mempermudah dan mempercepat waktu kita dalam menuliskan kode javascript, karena kita hanya memanggil fungsi-fungsi yang kita butuhkan yang tentu saja sudah ada dalam jQuery tersebut, serta tidak perlu lagi menyusun kode javascript dari nol.Tentunya ini sesuai dengan slogan jQuery itu sendiri, yakni "Write less, do more".
jQuery adalah library javascript, jQuery berisi kumpulan kode-kode/fungsi-fungsi yang siap pakai sehingga mempermudah dan mempercepat waktu kita dalam menuliskan kode javascript, karena kita hanya memanggil fungsi-fungsi yang kita butuhkan yang tentu saja sudah ada dalam jQuery tersebut, serta tidak perlu lagi menyusun kode javascript dari nol.Tentunya ini sesuai dengan slogan jQuery itu sendiri, yakni "Write less, do more".
Menurut pengalaman saya dan
teman-teman lainnya, jQuery sangatlah ringan sehingga dengan menggunakan jQuery
tidak akan membuat halaman web kita menjadi lambat untuk di load, dengan porsi
yang tidak berlebihan, tentunya. Sebelum mempelajari jQuery, ada baiknya Anda
sudah menguasai dasar-dasar HTML, CSS
serta JavaScript. Untuk dapat menggunakan
library ini, Anda dapat mendownload jQuery dari situs resminya yaitu www.jquery.com lalu menaruhnya pada direktori tempat Anda menyimpan
file halaman web, dan jangan lupa pula untuk memanggil file jQuery di setap
halaman web diantara tag <head></head> Anda dengan cara:
<script
type="text/javascript" src="jquery.js"></script>
Tulisan yang berwarna merah
menandakan nama file, nama file tersebut harus di sesuaikan dengan nama file
jQuery yang telah kita download. Untuk lebih lanjut mengenai tutorial dasar
desain web dengan jQuery akan dibahas pada tutorial berikutnya.
|==============|
Sintaks pada jQuery |
|==============|
Penting!
sama seperti PHP, untuk mempraktikkan tutorial ini anda harus mempunyai Localhost dengan cara mengubah komputer / laptop anda menjadi Server terlebih dahulu dan meletakkan file jquery di dalam localhost.
Sintaks pada jQuery |
|==============|
Penting!
sama seperti PHP, untuk mempraktikkan tutorial ini anda harus mempunyai Localhost dengan cara mengubah komputer / laptop anda menjadi Server terlebih dahulu dan meletakkan file jquery di dalam localhost.
jQuery --sama seperti halnya library
lainnya-- juga memiliki sintaks, biasanya sintaks yang dipakai adalah untuk
memilih elemen-elemen HTML lalu melakukan suatu aksi terhadap elemen tersebut
atau elemen lain. Ini mirip dengan gaya bahasa
visual basic yang pada visual basic diistilahkan dengan
konsep 'even driven' dimana suatu reaksi terjadi jika suatu aksi tertentu
dilakukan.
Analoginya begini, misal: kita menuangkan
sirup strawberry kedalam gelas yang berisi air putih, maka air putih tersebut
akan berubah warna dari putih (bening) menjadi merah. Nah, Yang kita lakukan
yakni menuangkan sirup adalah aksi, sedangkan peristiwa berubahnya warna pada
gelas dinamakan reaksi.
Sintaks pada jQuery adalah sebagai
berikut: $(selector).action()
Penjelasan!
$ biasa saya sebut dengan "cash", digunakan untuk mendefinisikan jQuery
selector) digunakan untuk menunjukkan elemen yang dipilih atau dituju
action() adalah aksi yang akan dilakukan terhadap elemen yang telah di seleksi atau dipilih.
$ biasa saya sebut dengan "cash", digunakan untuk mendefinisikan jQuery
selector) digunakan untuk menunjukkan elemen yang dipilih atau dituju
action() adalah aksi yang akan dilakukan terhadap elemen yang telah di seleksi atau dipilih.
agar lebih jelas saya beri contoh sebagai berikut:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Web Design | ilmugrafis.com</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
})
</script>
</head>
<body>
<p>Tulisan ini akan bereaksi</p>
<button>Klik tombol ini</button>
</body>
</html>
<script type="text/javascript" src="jquery.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Web Design | ilmugrafis.com</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
})
</script>
</head>
<body>
<p>Tulisan ini akan bereaksi</p>
<button>Klik tombol ini</button>
</body>
</html>
<script type="text/javascript" src="jquery.js"></script>
Penjelasan!
Seperti yang telah dijelaskan pada tutorial sebelumnya baris ini digunakan untuk memanggil file jquery.js.
$(document).ready(function(){
Ini dimaksudkan kode javascript yang ada pada baris dibawahnya berjalan pada saat halaman web di load.
Seperti yang telah dijelaskan pada tutorial sebelumnya baris ini digunakan untuk memanggil file jquery.js.
$(document).ready(function(){
Ini dimaksudkan kode javascript yang ada pada baris dibawahnya berjalan pada saat halaman web di load.
$("button").click(function(){
$("p").hide(1000);
});
$("p").hide(1000);
});
Baris
diatas bermakna: ketika elemen “button” di klik oleh pengguna, maka elemen “p”
(paragraph) disembunyikan dengan kecepatan selama 1000 mili detik.
Hasilnya:
Hasilnya:
Coba Anda ubah sendiri kode diatas, misalnya
dengan mengganti angka 1000 menjadi 2000, mengubah selector dari “button”
menjadi “p” atau sebaliknya, dan lain-lain. Selamat bereksplorasi.
No comments:
Post a Comment