Berikut ini adalah contoh lengkap penggabungan JavaScript functions dan events beserta penjelasan lengkapnya:
<!DOCTYPE html>
<html>
<head>
<title>Penggabungan Functions dan Events</title>
<script>
function greeting() {
alert("Halo! Selamat datang di website kami.");
}
function changeColor() {
document.getElementById("myDiv").style.backgroundColor = "red";
}
</script>
</head>
<body>
<h1>Contoh Penggabungan Functions dan Events</h1>
<button onclick="greeting()">Klik untuk Menampilkan Pesan</button>
<div id="myDiv" style="width: 200px; height: 200px; background-color: yellow;"></div>
<button onclick="changeColor()">Klik untuk Mengubah Warna</button>
</body>
</html>Output:
See the Pen JavaScript Functions and Events by De Orchids (@De-Orchids) on CodePen.
Dalam contoh di atas, terdapat dua buah JavaScript functions yang digunakan dalam penggabungan dengan events.
- Function
greeting()digunakan untuk menampilkan pesan selamat datang menggunakanalert(). Function ini akan dijalankan ketika tombol “Klik untuk Menampilkan Pesan” ditekan. - Function
changeColor()digunakan untuk mengubah warna latar belakang dari elemen dengan id “myDiv” menjadi merah. Function ini akan dijalankan ketika tombol “Klik untuk Mengubah Warna” ditekan.
Kedua functions tersebut dihubungkan dengan events menggunakan atribut onclick pada elemen tombol. Ketika tombol ditekan, function yang terkait akan dijalankan.
Contoh Lain
Berikut ini adalah contoh kode JavaScript untuk membuat fungsi dan menangani event:
// Contoh fungsi JavaScript
function greeting(name) {
console.log("Halo, " + name + "!");
}
// Memanggil fungsi greeting
greeting("John");
// Menambahkan event listener pada tombol
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
console.log("Tombol diklik!");
});Berikut ini adalah contoh kode HTML untuk menggunakan fungsi dan event yang telah dibuat:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Fungsi dan Event</title>
<script src="script.js"></script>
</head>
<body>
<h1>Contoh Fungsi dan Event</h1>
<button id="myButton">Klik Saya</button>
</body>
</html>Pastikan Anda menyimpan kode JavaScript di dalam file dengan ekstensi .js dan menghubungkannya ke file HTML menggunakan tag <script>.
Dengan menggunakan kode di atas, Anda dapat membuat fungsi JavaScript yang dapat dipanggil dan menangani event seperti saat tombol diklik. Anda dapat menyesuaikan kode tersebut sesuai dengan kebutuhan Anda.
Semoga contoh di atas dapat membantu Anda dalam memahami penggabungan JavaScript functions dan event.
Leave a Reply