LAPORAN AKHIR PRAKTKUM
Mata Praktikum : Pemrograman WEB
Kelas : 4IA13
Praktikum
ke : 2 (Dua)
Tanggal : 13 Oktober 2015
Materi : JavaScript
Npm : 52412862
Nama : Febriansyah Handoni
Ketua
Asisten :
Nama
Asisten :
Paraf
Asisten :
Jumlah
lembar : 5 Lembar
LABORATORIUM TEKNIK INFORMATIKA
UNIVERSITAS GUNADARMA
2015
LAPPORAN AKHIR
PRAKTIKUM
Membuat animasi
gambar bergerak menggunakan JavaScript
Pada laporan kali ini saya akan membuat animasi gambar
bergerak. Seperti contoh gambar dibawah ini :
Di tampilan gambar diatas, terdapat tombol jalan. Jika kita
klik button “JALAN” maka mobil akan bergerak kearah kanan.
Logika Program :
Editor yang saya gunakan adalah noteped++ dan di test run di
browser google chrome. Pada kali ini dibutuhkan gambar dengan format “.gif”,
untuk itu saya mengambil gamabar seperti gambar diatas yaitu mobil.gif, seperti
dibawah ini :
Untuk membuat animasi tersebut dibutuhkan 3 dokumen yaitu :
html,css, dan javascript. Selanjutnya, kita jabarkan script dan logika programnya
:
A.
Dokumen HTML
Script di html:
|
|
|
1. Untuk membuat sebuah dokumen html.
2. Digunakan untuk membuat infomasi tentang dokumen.
3. Untuk membuat judul dari sebuah halaman.
4. memanggil skrip javascript dengan namafile jquery.js
5. untuk membuat javascript internal yaitu fungsi tombol
dengan gambar animasi bergerak dengan jarak bergerak 400px dengan kecepatan
bergerak 5000
6. untuk memanggil dokumen css dengan nama file
halaman.css
7. membuat teks di H1 dengan nama ANIMASI
8. untuk memasukan gambar id citra yaitu mobil.gif
9. membuat tombol button dengan nama JALAN
|
<!DOCTYPE html>
1.<html>
2.<head>
3.<title>JavaScript</title>
4.<script type
="text/javascript" src="jquery.js"></script>
5.<script>
$(document).ready(function() {
$("#tombol").click(function()
{
$("#citra").animate({left:"400px"},
5000,"swing");
});
});
</script>
6.<link
rel="stylesheet" href="halaman.css">
</head>
<body>
7. <H1> ANIMASI
CAR</H1>
<div id="area">
8. <img id="citra"
src="mobil.gif">
</div>
<br><br><br>
9. <button
id="tombol"> JALAN </button>
</body>
</html>
Save dengan nama file animasi
dengan format “.html”
B.
Dokumen CSS
Script di css :
|
Tipe sector H1 dengan atribut warna background hitam,
dan warna teks putih.
Tipe sector area dengan panjang 200px dan warna
background abu-abu muda.
Tipe sector citra dengan posisi relative dengan tinggi
40px.
|
background-color:
black;
color:
white;
}
#area {
height:
200px;
background-color:
lightgrey;
}
#citra {
position:
relative;
top:
40px;
}
Save dengan nama halaman dengan
format .css .
C.
Dokumen JavaScript
Simpan dokumen yang tadi telah
dibuat beserta file image .gif nya kedalam satu folder.
Output
:
Ketika klik tombol jalan maka
mobil bergerak perlahan kearah kanan, seperti gambar dibawah ini :
Tidak ada komentar:
Posting Komentar