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.
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 caramengubah 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.
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>
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.
Sintaks pada jQuery |
|==============|
Penting!
sama seperti PHP, untuk mempraktikkan tutorial ini anda harus mempunyai Localhost dengan caramengubah 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.
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>
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.
$("button").click(function(){
$("p").hide(1000);
});
Baris diatas bermakna: ketika elemen “button” di
klik oleh pengguna, maka elemen “p” (paragraph) disembunyikan dengan kecepatan
selama 1000 mili detik.$("p").hide(1000);
});
0 Comment "JQUERY PEMBELAJARAN"
Post a Comment