Scribd
Unggah
50 tayangan9 halaman

Lab Modul 05 - JQuery

Dokumen tersebut berisi modul pembelajaran tentang jQuery pada mata kuliah Praktikum Pemrograman Web. Modul tersebut membahas tujuan pembelajaran jQuery dan soal-soal latihan yang berkaitan dengan penggunaan fungsi-fungsi dasar jQuery seperti slideUp, slideDown, fadeIn, fadeOut dan animate untuk mengubah tampilan elemen seperti gambar dan teks.

Diunggah oleh

Phoniex United
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
50 tayangan9 halaman

Lab Modul 05 - JQuery

Dokumen tersebut berisi modul pembelajaran tentang jQuery pada mata kuliah Praktikum Pemrograman Web. Modul tersebut membahas tujuan pembelajaran jQuery dan soal-soal latihan yang berkaitan dengan penggunaan fungsi-fungsi dasar jQuery seperti slideUp, slideDown, fadeIn, fadeOut dan animate untuk mengubah tampilan elemen seperti gambar dan teks.

Diunggah oleh

Phoniex United
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 9

2016 / 2017

IF-3P2
Praktikum Pemrograman Web

Modul 5
jQuery

Departemen Sistem Informasi

Institut Teknologi Harapan Bangsa


Mata kuliah : Praktikum Pemrograman Web

Kode Matakuliah : IF-3P2

SKS : 1 SKS

Waktu : 100’

Modul ke : 1

A. Tujuan

1. TIU : Memahami jQuery

2. TIK : Mahasiswa mampu membuat program dengan jQuery

B. Bahasan : jQuery

C. Sub Pokok Bahasan

1.
D. Perangkat keras yang diperlukan: Komputer

Perangkat lunak yang diperlukan: Editor, Browser


Soal Nomor 1

Buatlah kotak berisi image seperti gambar di atas. Jika tombol “Dua” di-click, image kedua akan
ditampilkan seperti gambar di bawah ini:

Jika tombol “Tiga” di-click, image ketiga akan ditampilkan seperti gambar di halaman berikut:
Jika tombol “Satu” di-click, image pertama akan ditampilkan kembali seperti pada gambar awal.

Catatan:

a. Buatlah 3 kotak yang berisi tiga gambar berbeda (masing-masing dengan id berbeda)
b. Dengan jQuery, gunakan slideDown dan slideUp
c. Jika button kedua di-click, terapkan slideDown pada kotak kedua dan terapkan slideUp
pada kotak=kotak yang lain. (Lakukan hal yang sama untuk button lainnya).

Soal Nomor 2

Buatlah halaman web yang hanya berisi tulisan dan button seperti gambar di atas. Jika button tersebut
di-click, tulisan dan button tersebut akan hilang, berganti menjadi sebuah gambar. Dalam 2 detik,
gambar tersebut memudar. Dalam 5 detik berikutnya perlahan-lahan muncul kembali, kemudian
memudah hingga hilang dalam 5 detik. Catatan: gunakan fadeout dan fadeIn dalam jQuery.
Soal Nomor 3

Buatlah halaman web yang hanya berisi gambar dan button seperti gambar di atas. Jika button
tersebut di-click, gambar tersebut akan mengalami beberapa kali perubahan ukuran dan posisi, yaitu:

- Dalam 5 detik, tingginya menjadi 900 piksel


- Lebar menjadi 300 piksel dan opacity menjadi 0.5 dalam 5 detik berikutnya
- Dalam 3 detik, tinggi menjadi 400 piksel dan posisi menjadi 200 piksel dari sisi kiri
- Lebar menjadi 600 piksel dan posisi menjadi 150 piksel dari atas dalam 4 detik
- Lebar menjadi 300 piksel dan opacity kembali menjadi 1, dalam 5 detik

Catatan: gunakan animate dalam jQuery


Jawaban

[1]
<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

$("#gambar3").slideUp("fast");

});

$(document).ready(function(){

$( xxxxxxxxxx).click(function(){

$("#gambar1").slideDown("slow");

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

$("#gambar3").slideUp("slow");

});

});

$(document).ready(function(){

$( xxxxxxxxxx).click(function(){

$("#gambar1").slideUp("slow");

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

$("#gambar3").slideUp("slow");

});

});

$(document).ready(function(){

$( xxxxxxxx).click(function(){
$("#gambar1").slideUp("slow");

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

$("#gambar3").slideDown("slow");

});

});

</script>

<style type="text/css">

.kotakdalam {

width:350px;

height:250px;

text-align:center;

</style>

</head>

<body>

<div>

<div class="kotakdalam" id="gambar1">

<img src="611.jpg">

</div>

<div class="kotakdalam" id="gambar2">

<img src="612.jpg">

</div>

<div class="kotakdalam" id="gambar3">

<img src="613.jpg">

</div>

<div class="kotakdalam">

<br/>

<button id="button1">Satu</button>

<button id="button2">Dua</button>

<button id="button3">Tiga</button>

</div>
[2]
<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".b1").click(function(){

$("p").html("xxxxxxxxxxxxxxx");

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

$("p").fadeIn(5000);

$("p"). xxxxxxxxxxxxxxxxxxxxxx

});

});

</script>

</head>

<body>

<p style="width:60%; text-align: center;">

<br/>

Perhatikan apa yang akan muncul...

<br/><br/>

<button xxxxxxxxxxxxxxxx>Lihat</button>

</p>

</body>

</html>
[3]
<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$( xxxxxxxxxx).click(function(){

$(".anim").animate({"height":"900"},5000);

$(".anim").animate({width:300,

opacity:0.5,},5000);

$(".anim").animate(xxxxxxxxxxxxxxxxxxxxxxx);

$(".anim").animate({top:150,

width:600},4000);

$(".anim").animate(xxxxxxxxxxxxxxxxxxxxx);

});

});

</script>

</head>

<body>

<button class="but">Animasi</button>

<br /><br />

<img xxxxxxxxxxxxx src="63.jpg" style="position:absolute"/>

<br/><br/>

</body>

</html>

Anda mungkin juga menyukai