Membuat Aplikasi Ubah Warna Lampu dengan JQuery
Kalo Kemarin kita membahas mengenai cara Membangun Program Ubah Warna Lampu dengan Javascript nah kali ini kita akan membuatnya dengan JQuery yah teman teman, nah JQuery ini yakni library nya Javascript atau pustaka JavaScript lintas-platform yang didesain bagi menyederhanakan client-side scripting di HTML. JQuery adalah pustaka JavaScript yang sangat populer, dengan 65% pemasangan dari 10 juta situs Web dengan pengunjung tertinggi. jQuery itu free, dan bersifat kode sumber terbuka dibawah lisensi MIT. Dengan JQuery kita dapat menyederhanakan penulisan kode Javascript, menjadi lebih sedikit dan mempunyai kegunaan kegunaan javascript yang banyak pastinya. Kalian dapat merancang program yang interaktif dengan JQuery ini, oke penjelananya lumayan yah teman teman, kali ini kita akan mempraktekan Bagaimana Cara Membangun Program Ubah Warna Lampu dengan JQuery.
kalo kalian mengikuti panduan kemarin mengenai Membangun Program Ubah Warna Lampu dengan Javascript, kalian dapat memakai file gambar gambar di sana , dan yang kita rubah hanyalah script Javascriptnya. file tersebut yakni seperti berikut.
ini file file nya. ada folder img bagi letak gambar gambarnya, dan ada file index.html dan style.css yang pastinya klaian tahu apa gunanya.
dan ini gambar gambar yang akan kita bikin pada praktek kali ini.
di pada 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 dapat lihat gambar berikut supaya lebih jelas nya
nah jangan lupa menyambung kan JQuery nya yah teman teman, kalian dapat ketikan kode berikut bagi menyambungkan JQuery ke HTML kalian.
<script src=”http://code.jquery.com/jquery-3.3.1.slim.min.js”></script>
yups program kita siap di jalankan. dan tampilannya selaku berikut
ketika kita klik diantara tombolnya, contohnya disini saya klik tombol kuning, karenanya lampu tersebut akan berubah menjadi kuning. seperti itu pun ketika kita klik tombol merah atau hijau, karenanya lampu akan berubah, dan ketika kita klik tombol matikan lampu, karenanya lampu segala akan mati.
nah gampang bukan teman teman, sekianlah panduan Membangun Program Ubah Warna Lampu dengan JQuery, semoga bermanfaat yah teman teman.
Sumber https://kursuswebsite.org
