Kalo Kemarin kita membahas tentang cara Membuat Aplikasi Ubah Warna Lampu dengan Javascript nah kali ini kita akan membuatnya dengan JQuery yah teman teman, nah JQuery ini adalah library nya Javascript atau pustaka JavaScript lintas-platform yang didesain untuk menyederhanakan client-side scripting pada HTML. JQuery merupakan pustaka JavaScript yang paling populer, dengan 65% pemasangan dari 10 juta situs Web dengan pengunjung tertinggi. jQuery itu gratis, dan bersifat kode sumber terbuka dibawah lisensi MIT. Dengan JQuery kita bisa menyederhanakan penulisan kode Javascript, menjadi lebih sedikit dan mempunyai fungsi fungsi javascript yang banyak tentunya. Kalian bisa membuat aplikasi yang interaktif dengan JQuery ini, oke penjelananya cukup yah teman teman, kali ini kita akan mempraktekan Bagaimana Cara Membuat Aplikasi Ubah Warna Lampu dengan JQuery.
kalo kalian mengikuti tutorial kemarin tentang Membuat Aplikasi Ubah Warna Lampu dengan Javascript, kalian bisa memakai file gambar gambar di sana , dan yang kita rubah hanyalah script Javascriptnya. file tersebut adalah seperti berikut.
ini file file nya. ada folder img untuk letak gambar gambarnya, dan ada file index.html dan style.css yang tentunya klaian tahu apa gunanya.
dan ini gambar gambar yang akan kita buat dalam praktek kali ini.
di dalam index.html kita rubah script javascript nya seperti berikut.
<script>
$(document).ready(function(){
$(‘#btn1’).click(function() {
$(‘#merah’).show();
$(‘#kuning’).hide()
$(‘#hijau’).hide()
});
$(‘#btn2’).click(function() {
$(‘#kuning’).show();
$(‘#merah’).hide();
$(‘#hijau’).hide();
});
$(‘#btn3’).click(function() {
$(‘#hijau’).show();
$(‘#merah’).hide();
$(‘#kuning’).hide();
});
$(‘#btn4’).click(function() {
$(‘#merah’).hide();
$(‘#kuning’).hide()
$(‘#hijau’).hide()
});
});
</script>
atau bisa lihat gambar berikut supaya lebih jelas nya
nah jangan lupa menyambung kan JQuery nya yah teman teman, kalian bisa ketikan kode berikut untuk menyambungkan JQuery ke HTML kalian.
<script src=”http://code.jquery.com/jquery-3.3.1.slim.min.js”></script>
yups aplikasi kita siap di jalankan. dan tampilannya sebagai berikut
ketika kita klik salah satu tombolnya, contohnya disini saya klik tombol kuning, maka lampu tersebut akan berubah menjadi kuning. begitu pun ketika kita klik tombol merah atau hijau, maka lampu akan berubah, dan ketika kita klik tombol matikan lampu, maka lampu semua akan mati.
nah mudah bukan teman teman, sekian tutorial Membuat Aplikasi Ubah Warna Lampu dengan JQuery, semoga bermanfaat yah teman teman.