Modul Web Programming - Pertemuan 5-6
Diunggah oleh
cloud.085730102088Modul Web Programming - Pertemuan 5-6
Diunggah oleh
cloud.085730102088Modul Pertemuan 5
JAVASCRIPT & JQUERY
Tujuan
1. Siswa dapat memahami tentang bahasa pemrograman javascript
2. Memahami penggunaan javascript
3. Memahami library jQuery
4. Memahami penggunaan jQuery untuk memanipulasi halaman website
A. Apa itu Javascript & jQuery ?
JavaScript atau yang biasa disingkat menjadi JS adalah bahasa pemrograman paling populer di dunia
dan menjadi salah satu dari 3 (tiga) bahasa pemrograman yang harus dipelajari oleh web developer.
JavaScript dirilis pada tahun 1995 yang diciptakan oleh seorang programmer bernama Brandan Eich. Dalam
pengembangan website, Javascript digunakan untuk membuat halaman website yang dinamis dan interaktif
sehingga website menjadi lebih hidup. Berikut ini adalah fungsi-fungsi dari Javascript:
• Membuat aplikasi mobile.
• Menciptakan aplikasi desktop.
• Mengembangkan game.
• Membuat website lebih interaktif.
• Menyusun slide atau halaman-halaman presentasi.
• Back-end web development.
Berikut ini adalah beberapa kelebihan JavaScript:
• Menghemat lalu-lintas server dengan memvalidasi input user sebelum mengirim data ke server.
• Feedback yang cepat sehingga user tidak harus menunggu halaman reload untuk melihat jika mereka
lupa menginput sesuatu.
• Meningkatkan interaktivitas.
• Membuat interface menjadi lebih menarik.
Selama bertahun-tahun JavaScript menjadi bahasa yang banyak digunakan oleh web developer.
Terdapat banyak library dan framework yang dibangun di atas JavaScript. Tujuan dari dikembangkannya
library dan framework ini di antaranya adalah untuk memperluas kemampuan JavaScript dan mempermudah
pekerjaan developer.
jQuery adalah salah satu JavaScript library yang paling populer dan paling extendable. jQuery
merupakan open-source library di bawah Lisensi MIT yang ditemukan oleh John Resign dan dirilis pada
Januari 2006 di BarCamp NYC. jQuery membungkus kode JavaScript dalam method yang dapat dipanggil
hanya dengan satu baris kode. jQuery memiliki plugin untuk hampir semua tugas di luar sana. Tujuan dan
manfaat penggunaan jQuery adalam mempermudah penggunaan JavaScript di website sehingga hal-hal
rumit dari JavaScript menjadi lebih sederhana. Berikut ini adalah fitur-fitur pada jQuery library:
• HTML/DOM manipulation.
• CSS manipulation.
• HTML event methods.
• Effects and animations.
• AJAX (Asynchronous JavaScript and XML).
Sumber : https://binus.ac.id/
Modul Pertemuan 5.docx 1
B. Aturan Penulisan Javascript & JQuery
Penulisan kode Javascript menggunakan tag <script> adalah cara umum yang digunakan. Tag <script> dapat
kita buat di dalam tag <head> maupun <body>. Contoh :
Berdasarkan kode pada gambar di atas, terdapat perintah untuk menampilkan / menuliskan teks
“Saya mulai belajar Javascript!”, dalam satu baris perintah tersebut terdiri dari beberapa bagian, yaitu : nama
objek, metode, dan parameter. Berikut penjelasannya :
Nama Objek : document
Nama Metode : write
Parameter : Saya mulai belajar Javascript!
Dokumentasi penggunaan javascript dapat anda kunjungi melalui url https://id.javascript.info/
Sepanjang penggunaan jQuery, hampir selalu didahului tanda $. Tanda dollar ‘$’ (dollar sign) adalah
sebuah shortcut untuk mengakses jQuery Object. Di dalam jQuery Object inilah seluruh fungsi-fungsi jQuery
berada. Sebagai contoh, untuk mencari element HTML yang memiliki atribut id=”tombol”, kita bisa menulis:
$("#tombol")
Jika karena sesuatu hal kita tidak bisa menggunakan tanda $ (biasanya karena bentrok dengan library lain),
bisa menggunakan jQuery(), seperti berikut:
jQuery("#tombol")
Jika kita bandingkan penulisan kode menggunakan bahasa javascript (native) dengan jQuery sebagai berikut:
JavaScript
Document.getElementById(“demo”).innerHTML = “Welcome to Our Website!”;
jQuery
$(“#demo”).html(“Welcome to Our Website!”);
Dari contoh tersebut, dapat diketahui bahwa dengan belajar jQuery, kamu bisa menghasilkan output
yang sama menggunakan baris kode yang lebih sederhana. Hal ini tentu sangat menguntungkan dari segi
waktu dan tenaga. Sebagai informasi, task menggunakan jQuery biasanya ditulis dalam sintaks: $ (selector)
.action()
Tanda dolar ($) digunakan untuk menunjukkan penggunaan library jQuery. Sintaks (selector)
menandakan elemen yang kamu pilih atau akan dituju. Sedangkan, .action() menunjukkan action atau task
yang akan kamu lakukan terhadap elemen yang telah dipilih. Jadi, jika merujuk pada contoh di atas, (“#demo)
merupakan selector, sedangkan tulisan (“Welcome to Our Website!”) merupakan action. Dokumentasi
penggunaan jQuery dapat anda kunjungi melalui url : https://api.jquery.com/.
Modul Pertemuan 5.docx 2
C. Instruksi Praktik
Praktikum di modul ini akan menggunakan file dari tugas 4, yaitu form & tabel yang telah didesain
menggunakan bootstrap, berikut contoh tampilan dari tugas 4 : (sesuaikan dengan milik masing – masing
siswa)
Modul Pertemuan 5.docx 3
Contoh kode untuk tampilan halaman web di atas :
Sebelum menuliskan kode jQuery, kita harus menghubungkan (include) jquery dengan file html kita dengan
cara memasukkan link yang disediakan oleh CDN, kali ini akan menggunakan CDN yang disediakan oleh google
(https://developers.google.com/speed/libraries?hl=id#jquery). Berikut scriptnya :
Taruh script / tag tersebut sebelum tag script milik bootstrap & penutup tag body (</body>).
Modul Pertemuan 5.docx 4
Selanjutnya untuk memanipulasi halaman web menggunakan javascript, tambahkan tag <script> sebelum
akhir dari tag body. Berikut contohnya :
Lakukan refresh pada halaman web anda, kemudian amati apa yang dihasilkan dengan perintah “alert”.
Selanjutnya kita akan melakukan manipulasi elemen form yang sudah kita buat, sebagai contoh kita akan
membatasi user / pendaftar untuk mengisi kolom nomor telfon hanya dengan angka (tidak bisa huruf /
simbol) dan membuat validasi password yang diinput oleh user. Sebelum itu, silakan pelajari tentang
Javascript Event di situs berikut :
https://www.petanikode.com/javascript-event/
Jika sudah memahami bagaimana konsep event pada javascript, langkah selanjutnya adalah kita berikan
attribute “id” pada elemen input nomor telfon, misalkan id=”notelp”, dan atribut onkeypress=””. Contoh :
Dari gambar diatas dapat kita pahami bahwa onkeypress merupakan event yang akan terjadi jika user
menekan keyboard pada elemen input dengan id=”notelp’, event tersebut akan mengembalikan /
mengeksekusi fungsi javascript yang kita buat. Jika anda belum memahami apa itu fungsi dalam javascript ?
Silakan kunjungi situs https://www.petanikode.com/javascript-fungsi. Selanjutnya kita akan membuat custom
function di dalam tag <script>, perhatikan gambar berikut :
Modul Pertemuan 5.docx 5
Setelah membuat fungsi di javascript, silakan reload halaman web anda kemudian coba isikan kolom nomor
telpon menggunakan huruf, angka, dan simbol. Apa yang terjadi ?
Langkah selanjutnya kita akan membuat validasi konfirmasi password dengan asumsi jika inputan password
tidak sama / sesuai maka akan menampilkan peringatan password tidak sesuai. Tambahkan atribut
onkeypress pada elemen input konfirmasi password seperti langkah sebelumnya, dengan memanggil fungsi
konfirmPassword. Perhatikan gambar berikut kemudian lakukan ujicoba pada halaman web anda !
Selanjutnya kita akan memberikan event click pada tombol simpan, dengan asumsi jika user menekan tombol
simpan, maka data yang diinput akan kita tampilkan pada console web browser. Untuk mengakses console
web browser silakan tekan shortcut CTRL + SHIFT + I. Pertama silakan tambahkan atribut id pada tombol
simpan, misalkan id=”simpandata”, kemudian buatlah event untuk tombol tersebut.
Modul Pertemuan 5.docx 6
D. Tugas 5
1. Lakukan instalasi software xampp-7.4 pada laptop / komputer anda.
2. Software dapat diunduh melalui link : link.mansidoarjo.sch.id/prereq-inf-ti
