A. PENDAHULUAN
- Pengertian
- Latar belakang masalah
B. MAKSUD DAN TUJUAN
Memahami dan mempraktikkan Event pada Jquery dan tujuannya adalah dapat menjalankan Efek efek yang ada pada Event Jquery.
C. BATASAN DAN RUANG LINGKUP PEKERJAAN
- Pengertian Jquery
- Cara menggunakannya
D. TARGET DAN HASIL YANG DIHARAPAKAN
Dapat mengerti dan memahami serta dapat mempraktikkan langsung event event pada Jquery.
E. METODE PELAKSANAAN
- Membaca referensi
- Mempraktikkannya
F. ALAT DAN BAHAN
- Laptop
- Text editor
- Koneksi internet
G. TARGET WAKTU
08.00 - 16.00
H. TAHAPAN PELAKSANAAN
Di dalam javascript, event adalah suatu hal yang bisa dilakukan user ke sebuah element HTML, misalnya di click, double click, mouseover (cursor mouse berada diatas element), mouseout (cursor mouse sudah keluar dari atas element), dll.
Disini saya akan mencontohkan semisal mau membuat pesan alert() ketika sebuah paragraf di klik, dengan javascript ini bisa dilakukan dengan kode program seperti berikut :
<!DOCTYPE html>
<html>
<head>
<title>AdelwinNL</title>
</head>
<body>
<p id="paragraf" onclick="alert('Halaman ini akan memunculkan popup')">
</p>
</body>
</html>
atribut onclick dalam tag <p> diatas adalah sebuah event. Ketika di klik, akan tampil pesan popup: 'Halaman ini akan memunculkan popup'. Hasil ini didapat dengan fungsi alert()Javascript.
Selain onclick, didalam Javascript juga banyak event-event yang lain, seperti ondblclick, onmouseover, onmouseout, dll.
Penulisan seperti sangat praktis namun tidak "rapi". Bagaimana cara memisahkannya?
Didalam javascript, ini bisa di lakukan menggunakan fungsi addEventListener(). Hasil yang sama bisa dihasilkan dengan kode program berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Jquery AdelwinNL</title>
<meta charset="UTF-8">
<script type="text/javascript" src=
"jquery.js"></script>
<script>
window.onload = funciton()
{
document.getElementById("paragraf").
addEventListener("click", function(){alert ('Halaman ini akan memunculkan popup')}
}
</script>
</head>
<body>
<p id="paragraf">
Klik disini
</p>
</body>
</html>
Sekarang, didalam bagian <body> tidak ada kode Javascript apapun. Event click saya tambahkan dengan fungsi addEventListener(). Nah itu ketika anda menggunakan javascript disini saya akan bandingkan dengan kode jquery apakah nanti kalian akan bisa memilih manakan yang lebih simple!!.
<!DOCTYPE html>
<html>
<head>
<title>Menggunakan Jquery</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#paragraf').click(function() {
alert('Halaman ini akan memunculkan popup');
});
});
</script>
</head>
<body>
<p id="paragraf">
Silahkan klik saya
</p>
</body>
</html>
Perhatikan bagaimana Jquery memudahkan penulisan event ini, sangat sederhana kan?!!. Format penyulisannya adalah :
$("jQuery_Selector").jQuery_Event(function() { ...isi event disini... })
Selain event click, masih banyak lagi event event yang di sediakan dari jquery tersendiri, kalian bisa cek event event nya di website resminnya langsung yaitu di : https://jquery.com
Disini saya akan mencontohkan beberapa event javascript yang dibuat dengan Jquery :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery</title>
<style>
#paragraf {
width:600px;
height:80px;
background-color:tomato;
line-height:80px;
text-align:center;
font-size:30px;
}
</style>
<script src="adelwin-wesite/jquery/jquery.js"></script>
<script>
$( document ).ready(function() {
$( "#paragraf" ).click(function() {
$( "#paragraf" ).css( "color", "green" );
});
$( "#paragraf" ).mouseover(function() {
$( "#paragraf" ).css( "background-color", "yellow" );
});
$( "#paragraf" ).mouseout(function() {
$( "#paragraf" ).css( "background-color", "blue" );
});
$( "#paragraf" ).dblclick(function() {
$( "#paragraf" ).css( "border", "solid 2px black" );
});
});
</script>
</head>
<body>
<center>
<p id="paragraf">
Mempelajari Jquery Event
</center>
</p>
</body>
</html>
Maka hasilnya akan seperti ini :
jika kalian mengarahkan mouse/crosor kalian ke elementnya maka akan berubah warna menjadi kuning, dan ketika anda meninggalkan mouse dari situ nanti akan berubah warna menjadi biru.
I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA
Penulisan kodenya salah saat membuat sebuah mouseout, hingga ketika crushor Saya ketika di keluar dari element tetep seperti biasa ngga bisa menjadi biru
Solusi :
Dengan menambahkan ";" setelah kurung penutup
J. KESIMPULAN YANG DIDAPAT
Dengan event ini kalian bisa memberi efek efek animasi yang sudah di sediakan oleh pihak jquery dari mulai hide(), click(), fadeit(), css() dan lain sebagainya, untuk event selengkapnya kalian bisa cari di website resminya langsung yaitu https://jquery.com
