Modul 7

LAPORAN PRAKTIKUM
PEMROGRAMAN WEB
MODUL 7
JQUERY
ERRAS LINDIARDA MAHENTAR

3411191102
D
PROGRAM STUDI INFORMATIKA

FAKULTAS SAINS DAN INFORMATIKA
UNIVERSITAS JENDRAL ACHMAD YANI
2020
PEMBAHASAN :
jQuery adalah pustaka JavaScript lintas-platform yang didesain untuk menyederhanakan
client-side scripting pada HTML. Dewasa ini, jQuery merupakan pustaka JavaScript yang
paling populer, dengan 65% pemasangan dari 10 juta situs Web dengan pengunjung tertinggi.
jQuery adalah gratis, dan bersifat kode sumber terbuka dibawah lisensi MIT.
Sintaks pada jQuery didesain untuk memudahkan dalam navigasi sebuah dokumen, pemilihan
elemen DOM, pembuatan animasi, penanganan event, dan pengembangan aplikasi berbasis
Ajax. jQuery juga menyediakan kemampuan bagi para pengembang untuk dapat membuat
plug-in pada pustaka JavaScript ini. Ini memungkinan mereka untuk membuat abstraksi pada
interaksi dan animasi tingkat-rendah, efek lanjutan, serta tampilan widget yang dapat
dimodifikasi. Pendekatan modular pada jQuery memungkinkan kita dalam pembuatan
halaman Web yang dinamis dan aplikasi berbasis Web yang ajib.
Sekumpulan fitur inti jQuery—yakni pemilihan elemen DOM, transferal dan
manipulasi—dimungkinkan berkat adanya selector engine yang bernama Sizzle (sejak versi
1.3), yang membuat sebuah "gaya pemrograman baru", memadukan antara algoritme dan data
struktur DOM. Gaya ini dipengaruhi oleh arsitektur JavaScript lainnya seperti YUI v3 dan
Dojo, yang nantinya menstimulasi pembuatan standar Selector API.
jQuery pada intinya merupakan pustaka untuk memanipulasi DOM (Document Object
Model). Dom adalah struktur-pohon representasi dari semua elemen yang terdapat dalam
sebuah halaman Web, dan jQuery menyederhanakan sintaks untuk mencari, menyeleksi, dan
memanipulasi elemen-elemen DOM tersebut. Sebagai contoh, jQuery dapat digunakan untuk
mencari elemen dalam dokumen dengan properti tertentu (mis: semua elemen dengan tag h1),
mengubah satu atau lebih atribut tersebut (mis: warna, keterlihatan), atau membuatnya
merespon sebuah event (mis: ketika mouse diklik).
jQuery juga menyediakan sebuah paradigma untuk penanganan event yang diluar pemilihan
dan manipulasi elemen dasar DOM. Event assignment dan event callback function dapat
dilakukan dengan hanya satu langkah atau satu baris kode. jQuery juga bertujuan
menggabungkan fungsional JavaScript yang serting digunakan (mis: fade in dan fade out
ketika menyembunyikan elemen, animasi dengan memanipulasi property CSS).
Pemasangan dan Pemanggilan

jQuery adalah sebuah file javascript (jquery-x.x.x.js) yang perlu dipanggil layaknya
memanggil
javascript external yang lain. Contoh:
<head>
<script src="jquery-3.2.0.min.js"></script>
</head>
Bisa juga dipanggil secara online tanpa perlu didownload dan diletakkan didalam project
anda. Anda
tinggal memanggil lewat CDN (Content Delivery Network) bisa lewat server Google ataupun
Microsoft.
Contoh dari Google:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
Bila dipanggil secara online, kelebihannya adalah waktu loading web menjadi lebih cepat.
Sebab bila
javascript pernah dipanggil secara online maka akan tersimpan dalam cache, dan tentusaja di
internet
hampir semua website telah menggunakan jQuery maka otomatis web yang dibuka berikutnya
akan
loading lebih cepat.
Event Document Ready
Bila anda perhatikan, jQuery dijalankan dalam
$(document).ready(function(){
// jQuery diletakkan disini...
}
)
;
Tujuannya adalah untuk menjaga agar jQuery tidak dijalankan dulu sebelum seluruh
dokumen selesai di load atau siap (ready). Javascript baru dapat bekerja bila seluruh bagiah
HTML telah selesai diload. Artinya bila seluruh elemen sudah diload maka javascript akan
dapat bekerja dengan menemukan elemen HTML.
LATIHAN
Latihan 1
a. Sorce Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>latihan 1</title>
<script type="text/javascript" src="Jquery.js"></script>
<script type="text/javascript">
$("document").ready (function () {
alert ("selamat datang");
});
</script>
</head>
<body>
<h1>hello word</h1>
</body>
</html>
b. Hasil Eksekusi
Latihan 2
a. Sorce Code
<!DOCTYPE html>
<html>
<head>
<title>Latihan 2</title>
<script lang="javascript" src="Jquery.Js"></script>
<script lang="javascript">
$(document).ready(function () {
$("input").click(function () {
alert("hello jquery");
});
});
</script>
</head>
<body>
<input type="submit" value="click me"/>
</body>
</html>
b. Hasil Eksekusi
Latihan 3
a. Sorce Code
<!DOCTYPE html>
<html>
<head>
$("document").ready(function () {
$("#p1").css("color","red");
});
</script>
</head>
<body>
<p id="p1"> ini isi paragraf 1</p>
<p id="p2"> ini isi paragraf 2</p>
</body>
</html>
b. Hasil Eksekusi
Latihan 4
a. Sorce code
<!DOCTYPE html>
<html >
<head>
$("document").ready(function () {
$(".Mulai").click(function () {
$("#kotak").animate({left:300},"slow")
});
});
</script>
<style type="text/css">
#kotak{
position: relative;
width: 100px;
height: 100px;
background: red;
}
</style>
<title>Animasi dengan funsi animate</title>
</head>
<body>
<input type="submit" class="Mulai" value="Jalankan"/>
<div id="kotak"></div>
</body>
</html>
b. Hasil Eksekusi
TUGAS
Tugas 1
a. Sorce code
!DOCTYPE html>
<html >
<head>
<title>Tugas 1</title>
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">di paragraf ini ada <b>bold</b></p>
<button id="btn1">Text</button>
<button id="btn2">HTML</button>
</body>
</html>
b. Hasil eksekusi
Tugas 2
a. Sorce code
<!DOCTYPE html>
<html >
<head>
<title>Tugas 2</title>
$("#test1").text("ADUH LUPA");
});
$("#test2").html("<b>ADUH EUY</b>");
});
$("#test3").val("Dolly Duck");
});
});
</script>
</head>
<body>
<p id="test1">bimsalabim ganti text</p>

<p id="test2">abra kadabra jadi <b>bold</b>semua</p>
<p ><input id="test3" type="text"></p>
<button id="btn1">Text</button>
<button id="btn2">HTML</button>
<button id="btn3">Val</button>
</body>
</html>
b. Hasil eksekusi
Tugas 3
a. Sorce code
<!DOCTYPE html>
<html lang="en">
<head>
<title>tugas 3</title>
$(".tombol1").click(function(){
$("p").hide(1000);
});
$(".tombol2").click(function () {
$("p").show(1000);
});
});
</script>
</head>
<body>
<p>hello word</p>
<button class="tombol1">sembunyikan</button>
<button class="tombol2">tampilkan</button>
</body>
</html>
b. Hasil Eksekusi
Demikian laporan modul 7 ini di buat dengan sebenar-benarnya.

Sekian terima kasih!

Modul 7

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul 7

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIKUM

ERRAS LINDIARDA MAHENTAR

PROGRAM STUDI INFORMATIKA

Pemasangan dan Pemanggilan

<p id="test">di paragraf ini ada <b>bold</b></p>

<p id="test1">bimsalabim ganti text</p>

Demikian laporan modul 7 ini di buat dengan sebenar-benarnya.

Anda mungkin juga menyukai