Laporan Praktikum 11 jQuery

Laporan Praktikum 11 : jQuery
MATAKULIAH WEB DESIGN & SERVICE ENGINERING

PRAKTIKUM 11
jQuery
jQuery juga menyederhanakan banyak hal-hal yang rumit dari JavaScript, seperti panggilan AJAX dan manipulasi DOM.
1. jquery1.html: menampilkan metode jQuery hide (), menyembunyikan semua elemen <p>
Dengan jQuery, Anda dapat menyembunyikan dan menampilkan elemen HTML dengan hide () dan show () , dimana
perintahnya sebagai berikut :
jQuery.html
<!DOCTYPE html>
<html>
<head>
<script
src="jquery_1_8_3.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Kemudian kita load coding diatas menggunakan webbrowser apa saja, karena jQuery sudah menyesuaikan semua web browser
untuk menjalankan perintahnya, sehingga apapun web browser di pakai semua perintah jQuery bisa berjaan dengan baik. Disini saya
menggunakan web broowser mozilla :
Ketika pengguna mengklik button Click Me maka elemen HTML akan di sembunyikan, implementasinya sebagaimana
gambar berikut :
2. jquery2.html: The #id Selector

Dengan #id dalam jQuery, pengguna dapat menggunakan atribut id dari tag HTML untuk menemukan elemen tertentu untuk
memberikan perintah menyembunyikan dan menampilkan elemen HTML tertentu yang akan di tampilkan dan di sembunyikan,
dimana perintahnya sebagai berikut :
jquery2.html
<!DOCTYPE html>
<html>
<head>
<script src="jquery_1_8_3.js"></script>
<script>
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
</body>
</html>
Dengan menggunakan browser mozilla saya menampilkan perintah pada coding jQuery2.html sebagai berikut :
Ketika pengguna mengklik button Click Me maka elemen HTML akan di sembunyikan sesuai dengan yang sudah diseleksi
berdasarkan perintah coding jQuery diatas <p id="test">This is another paragraph.</p> dimana yang kita seleksi untuk di
sembunyikan adalah yang memiliki tulisa This is another paragraph. Yang kita beri id=test, implementasinya sebagaimana
gambar berikut :
Dapat kita lihat pada gambar diatas bahwa ketika user mengklik tombol Click Me maka pada pragraph terakhir
disembunyikan.
3. jquery3.html: .class Selector
Dengan .class selector dalam jQuery untuuk menemukan elemen dengan kelas tertentu. Untuk menemukan elemen dengan
kelas tertentu, menulis karakter periode, diikuti oleh nama kelas. Contohnya $(".test"). dalam praktikum ini perintah selengkapnya
sebagai berikut :
jquery3.html
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Ketika pengguna mengklik button Click Me maka elemen HTML yang diseleksi berdasarkan berdasarkan class
dan
akan di sembunyikan,
implementasinya sebagaimana gambar berikut :
Dapat kita lihat pada gambar diatas bahwa ketika user mengklik tombol Click Me maka pada pragraph yang telah diseleksi
berdasarkan class disembunyikan.
4. jquery4.html: click().
Dalam jQuery, sebagian besar peristiwa DOM memiliki metode yang setara jQuery. Untuk menetapkan event klik untuk
semua paragraf pada halaman, Anda dapat melakukan ini dengan memberikan coding/ perintah $("p").click(); , dalam praktikum ini
selengkapnya sebagai berikut :
jquery4.html
<!DOCTYPE html>
<html>
<head>
<script>
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
Ketika pengguna mengklik pada pragraph/ baris tulisan tersebut maka elemen HTML yang di klik akan di
sembunyikan, implementasinya event Klik pada baris terakhir :
dan
dan
Jadi, praktikum di atas kita menggunakan event klik untuk menyembunyikan suatu teks berdasarkan dari baris/ pragraph yg
kita klik.
5. jquery5.html: dblclick().
Tidak ada perbedaan mendasar dibandingkan pada praktikum 4 diatas, hanya saja dalam praktikum 5 ini kita menggunakan
event double Click, codingnya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<script>
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
Ketika pengguna mengklik dua kali pada pragraph/ baris tulisan tersebut maka elemen HTML yang di klik akan di
sembunyikan, implementasi event Klik sebagai berikut :
dan
Jadi, praktikum di atas kita menggunakan event double klik untuk menyembunyikan suatu teks berdasarkan dari baris/
pragraph yg kita double klik.
6. jquery6.html: mouseenter()
Dalam praktikum 6 ini kita menggunakan event mousecenter(), dan jika mouse berada pada pragraph yg kita maksud maka
untuk mengujicoba kebenaran perintah kita tambahkan alert sebagai bukti bahwa ketika mouse di arahkan/ berada pragraph yg kita
maksud maka akan muncul alert. codingnya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>
Tampilan jQuery6.html pada browser :
Ketika mouse kita dekatkan dengan tulisan/ pragraph Enter this Pragraph maka akan muncul alert, contohnya
implementasinya sebagai berikut :
10
7. jquery7.html: mouseleave().
Event mouseleave () melekat fungsi event handler ke elemen HTML. Fungsi ini dijalankan ketika pointer mouse
meninggalkan elemen HTML, coding selengkapnya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
Tampilan pertama jQuery7.html dijalankan pada browser :
Ketika mouse kita arahkan dekat dengan tulisan/ pragraph this is a pragraph dan kemudian mouse meninggalkan area tulisan/
pragraph maka akan muncul alert, contohnya implementasinya sebagai berikut :
11
8. jquery8.html: mousedown().
Event mousedown() melekat fungsi event handler ke elemen HTML. Fungsi ini dijalankan ketika tombol kiri mouse di klik
pada saat pointer mouse diatas elemen HTML, coding selengkapnya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
12
});
});
</script>
</head>
<body>
</body>
</html>
Ketika mouse tepat beraada diatas tulisan/ pragraph element HTML this is a pragraph dan kemudian kiri mouse di klik maka
akan muncul alert, contohnya implementasinya sebagai berikut :
13
9. jQuery9.html: mouseup().
Event mouseup() melekat fungsi event handler ke elemen HTML. Fungsi ini dijalankan ketika tombol kiri mouse di klik lalu di
lepas pada saat pointer mouse diatas elemen HTML, coding selengkapnya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
});
</script>
14
</head>
<body>
</body>
</html>
Ketika mouse tepat berada diatas tulisan/ pragraph element HTML this is a pragraph dan kemudian tombol kiri mouse di klik
lalu di lepas maka akan muncul alert, contohnya implementasinya sebagai berikut :
15
10. jquery10.html: hover().

Event hover() melekat fungsi event handler ke elemen HTML. Fungsi ini pertama dijalankan ketika mouse memasuki
elemen HTML, dan fungsi kedua dijalankan ketika mouse meninggalkan elemen HTML, coding selengkapnya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
</body>
</html>
Fungsi pertama dijalankan ketika mouse diarahkan tepat berada diatas tulisan/ pragraph element HTML this is a pragraph dan
fungsi kedua di jalankan ketika mouse meninggallkan element HTML yang kemudian maka akan muncul alert, contohnya
implementasinya sebagai berikut :
Mouse di arahkan pada Element HTML
16
Mouse meninggalkan pada Element HTML
11. jQuery11.html: focus() dan blur().

Event focus() dan blur() melekat fungsi event handler ke elemen HTML. Fungsi focus() ini dijalankan ketika Fungsi ini
dijalankan ketika formulir isian mendapat fokus, dan fungsi blur() dijalankan ketika formulir isian kehilangan fokus, coding
selengkapnya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<script>
$("input").focus(function(){
$(this).css("background-color","#cccccc");
17
18
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
Tampilan pertama jQuery11.html dijalankan pada browser dapat kita lihat bahwa background pada masing-masing input text
berwarna putih:
(a)event focus(), Ketika mouse focus diarahkan pada input box yang paling atas maka secara otomatis background pada
input box berwarba abu-abu, dan (b) event blur(), ketika focus di pindahkan ke input box ke dua atau lepaskan maka
background akan kembali berwarna putih. Contohnya implementasinya sebagai berikut :
(a)
(b)
12. jquery12.html: hide()

Dengan jQuery, kita dapat menyembunyikan elemen HTML dengan hide(), coding selengkapnya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<script>
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>Island Trading</h3>
<div class="ex">
<button class="hide">Hide me</button>
<p>Contact: Helen Bennett<br>
Garden House Crowther Way<br>
London</p>
</div>
<h3>Paris spcialits</h3>
<div class="ex">
<button class="hide">Hide me</button>
19
<p>Contact: Marie Bertrand<br>

265, Boulevard Charonne<br>
Paris</p>
</div>
</body>
</html>
Dari coding diatas kita dapat lihat bahwa ada Parameter speed opsional menentukan kecepatan menyembunyikan /
menunjukkan, dan dapat mengambil nilai-nilai berikut: "slow", "fast", atau milidetik. Sedangkan Parameter callback optional adalah
fungsi yang akan dieksekusi setelah hide ().Contoh diatas menunjukkan parameter kecepatan dengan hide() yaitu pada :
$("p").hide(1000);
});
Tampilan pertama jQuery12.html dijalankan pada browser mozilla :
20
21
Pada saat kita klik tombol Hide Me maka area tabel yang sudah kita seleksi akan disembunyikan bersama dengan element HTML
text dan buttonnya. Contohnya implementasinya sebagai berikut :
dan
13. jquery13.html : hide() dan show()
Dengan jQuery, kita dapat menyembunyikan dan menampilkan elemen HTML dengan hide() show(), coding selengkapnya
sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<script>
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
22
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Tampilan pertama jQuery12.html dijalankan pada browser mozilla :
Pada saat kita klik tombol Hide maka element HTML Text akan disembunyikan, dan sebaliknya ketika kita kelik tombol Show
maka akan kembali menampilkan Element HTML text sebelumnya. Contohnya implementasinya sebagai berikut :
Dan kita klik tombol show, maka akan tampil kembali text yang di sembunyikan :
<<<<<<<<<<<<<<<<END>>>>>>>>>>>>>>
23

Laporan Praktikum 11 jQuery

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Laporan Praktikum 11 jQuery

Uploaded by

Copyright:

Available Formats

Laporan Praktikum 11 : jQuery

MATAKULIAH WEB DESIGN & SERVICE ENGINERING