Pengenalan Javascript
JavaScript ibarat seorang konduktor yang mengatur orkestra di dalam komputer Anda 🎻. Dia mengambil perintah dari Anda dan menerjemahkannya ke dalam serangkaian langkah-langkah yang bisa dimengerti oleh mesin. Seperti konduktor yang memimpin musisi untuk menciptakan sebuah karya seni, JavaScript memastikan setiap elemen pada halaman web bergerak dengan harmonis sesuai dengan keinginan Anda. 🎶
Apa itu Javascript ?
- Inti dari teknologi Web : Javascript (JS) adalah sebuah bahasa pemograman, disamping HTML dan CSS, yang membentuk fondasi web kamu
- Bisa buat website kamu dinamis : Tidak seperti halaman HTML static, Javascript dapat mengaktifkan fitur interaktif seperti: animasi, manipulasi data, dlln.
- Client Side Scriping : kode JS berjalan langsung pada Web browser kamu, tidak di server, memungkinkan interaksi yang lebih cepat dan responsif.
- Termasuk bahasa tingkat tinggi dan serbaguna :
- JS dianggap sebagai bahasa tingkat tinggi atau lebih mudah dipelajari dan digunakan dibandingkan dengan bahas mesin yang kompleks
- sangat berguna, bisa digunakan untuk pengembangan web, pengembangan mobile, maupun pengembangan game
- Populer dan besar penggunanya
Bagaimana Javascript bekerja ?
dalam kasus kali ini kita akan membuat sebuah fungsi dengan javascript untuk menyalakan dan mematikan lampu.
<!DOCTYPE html>
<html>
<body>
<h2>Apa yang dapat dilakukan oleh Javascript?</h2>
<p>Javascript dapat merubah nilai attribute.</p>
<p>Dalam kasus ini Javascript merubah nilai pada attribute src dari sebuah gambar</p>
<button onclick="document.getElementById('myImage').src='https://toppng.com/uploads/preview/light-bulb-on-off-png-11553940319kdxsp3rf0i.png'">Menyalakan Lampu</button>
<img id="myImage" src="https://toppng.com/uploads/preview/light-bulb-on-off-png-115539402943y50vxr5yi.png" style="width:100px">
<button onclick="document.getElementById('myImage').src='https://toppng.com/uploads/preview/light-bulb-on-off-png-115539402943y50vxr5yi.png'">Mematikan Lampu</button>
</body>
</html>
Bedah Kode
- Elemen Tombol Pertama
<button onclick="document.getElementById('myImage').src='https://toppng.com/uploads/preview/light-bulb-on-off-png-11553940319kdxsp3rf0i.png'">Menyalakan Lampu</button>:
Ini adalah sebuah tombol dengan teks "Menyalakan Lampu". Saat tombol ini diklik, JavaScript akan dieksekusi. Pada atribut onclick, kita menetapkan perintah JavaScript document.getElementById('myImage').src='https://toppng.com/uploads/preview/light-bulb-on-off-png-11553940319kdxsp3rf0i.png'.
Perintah ini mengubah sumber gambar dari elemen gambar dengan attribute id myImage menjadi URL gambar yang baru, yaitu lampu menyala.
- Elemen Gambar
<img id="myImage" src="https://toppng.com/uploads/preview/light-bulb-on-off-png-115539402943y50vxr5yi.png" style="width:100px">:
Ini adalah sebuah elemen gambar <img> dengan ID myImage.
Gambar default yang ditampilkan adalah lampu mati.
Saat tombol "Menyalakan Lampu" diklik, JavaScript akan mengubah sumber gambar pada elemen ini menjadi lampu menyala.
- Elemen Tombol Kedua
<button onclick="document.getElementById('myImage').src='https://toppng.com/uploads/preview/light-bulb-on-off-png-115539402943y50vxr5yi.png'">Mematikan Lampu</button>:
Ini adalah tombol kedua dengan teks "Mematikan Lampu". Saat tombol ini diklik, JavaScript akan dieksekusi. Pada atribut onclick, kita memiliki perintah yang sama dengan tombol pertama, yaitu mengubah sumber gambar elemen gambar dengan ID myImage menjadi URL gambar lampu mati.
Jadi, dengan mengklik tombol "Menyalakan Lampu", gambar lampu pada halaman akan berubah menjadi lampu menyala, dan dengan mengklik tombol "Mematikan Lampu", gambar lampu akan kembali menjadi lampu mati.
🎉Yeayy! step pengenalan Javascript telah dilalui, nantikan perjalanan berikutnya.
Referensi :