Programming, tutorials, mechatronics, operating systems, and other tech stuff

Tutorial dasar menggunakan jquery untuk mempercantik halaman web

No comments
Jquery adalah library javascript yang sangat berguna di dunia web programming. Mulai dari meng-animasikan content web, hingga melakukan ajax(apa itu ajax? klik disini.), dan masih banyak fitur-fitur lainnya.Ok, langsung saja ke topik utama. Sebelum kita bisa menggunakan jquery, pertama-tama kita harus punya file javascript jquery terlebih dahulu, bisa di download disini. Kemudian taruh file tersebut di sebuah folder. Misalnya saya taruh di folder berikut:




jquery1

Kemudian buat file html(nama terserah anda)

jq3


Edit file html tersebut dengan open with pake notepad++(sangat disarankan, bisa didownload disini:download notepad++) atau editor favorit agan, ketikkan script berikut(variasi terserah agan :D)


[code lang="html"]
<title>Latihan jquery</title>
<script src="&quot;jquery-1.7.2.min.js&quot;" lang="&quot;javascript&quot;"></script>
<style>
#kotak{
font-family:arial;
font-size:14px;
width:200px;
height:50px;
background:#f00;
padding:10px;
color:#fff;
}
</style>
<script lang="&quot;javascript&quot;">
$(document).ready(function(){
//script jquery disini
});
</script>


<div id="&quot;kotak&quot;">
belajar jquery di <br>http://net-crawler.blogspot.com</div>

[/code]

Simpan, lalu buka file html tadi melalui browser(biasanya langsung double-clik).

Hasilnya kurang lebih seperti ini:

jq4
pertama-tama kita panggil file jquery menggunakan tag:

 


[code lang="html"]<script src="jquery-1.7.2.min.js" lang="javascript"></script>[/code]


 



attribut src menunjukkan letak file jquery relative terhadap file html.

Script jquery ada diantara:

$(document).ready(function(){
dan
});
Script diatas adalah constructor jquery, yg maksudnya, script yang ada didalam kurung kurawal {} dieksekusi setelah halaman(document) sudah dimuat(ready).

Sekarang coba agan tambahkan script berikut diantara kurung kurawal tadi.



[code lang="javascript"]$('#kotak').animate({'margin-left':'400px'},1000);[/code]



Simpan dan refresh browser. Apa yang terjadi?
Jika tidak ada kesalahan, seharusnya kotak tadi bergeser kekanan sepanjang 400 pixel.


Apa maksudnya? script tadi adalah fungsi “.animate” jquery yang berfungsi menganimasikan object/elemen yang dipanggil.

dimana:


$(elemen yang dipanggil).fungsi jquery;


Dalam contoh diatas, kita menggunakan tanda # yang diikuti tulisan “kotak”.


lambang # adalah id, jadi maksudnya adalah memanggil elemen yang mempunyai id=kotak, yaitu div yang berisi “belajar jquery bla bla bla” tadi. jika kita ingin memanggil div tersebut menggunakan class(misalnya div tadi bentuknya
) maka kita memanggilnya dengan titik “.abc”.


Setelah elemen terpanggil, kita tinggal menambahkan fungsi-fungsi jquery yang akan kita bahas secara terpisah. untuk setiap fungsi, dipisahkan dengan tanda titik. Misalnya:




[code lang="javascript"]$('#kotak').animate({'margin-left':'400px'},1000).animate({'margin-top':'200px'},1000);[/code]

coba simpan lalu refresh browser dan amati yang terjadi.
Penjelasan tentang fungsi animate, bisa agan baca disini.


Sekian adalah dasar untuk menggunakan jquery pada halaman web. Untuk penjelasan tentang fungsi-fungsi yang ada di jquery, bisa anda lihat di sub menu Jquery yang ada di menu programming.


Resource yang digunakan disini:



Selamat belajar. :) dan jangan lupa +1 ;)


No comments :

Post a Comment