Event Handling
Hai para pembaca pada artikel kali ini kita akan membahas tentng event handling Java Script
1. Function
Ketika JavaScript mencapai pernyataan kembali, fungsi akan berhenti dijalankan. Jika fungsi dipanggil dari pernyataan, JavaScript akan "kembali" untuk mengeksekusi kode setelah pernyataan pemanggilan. Fungsi sering menghitung nilai balik. Nilai pengembalian "dikembalikan" kembali ke "pemanggil":
<!DOCTYPE html>
<html>
<head>
<script>
function Hello() {
return alert("Hello Guys");
}
</script>
</head>
<body>
<script>
Hello();
</script>
</body>
</html>
2. Onclik
onclick terjadi ketika pengguna mengklik sebuah elemen.
<!DOCTYPE html>
<html>
<head>
<script>
//Membuat fungsi Hello()
function Hello() {
document.getElementById("halo").innerHTML = "Halo Guys";
}
</script>
</head>
<body>
<a href="#" onclick="Hello()">Klik Saya</a>
<div id="halo"></div>
</body>
</html>
3. Onload
Onload terjadi ketika sebuah objek telah dimuat. Onload paling sering digunakan dalam elemen <body> untuk mengeksekusi skrip setelah halaman web memuat semua konten (termasuk gambar, file skrip, file CSS, dll.). onload dapat digunakan untuk memeriksa jenis browser pengunjung dan versi browser, dan memuat versi halaman web yang tepat berdasarkan informasi.
<!DOCTYPE html>
<html>
<head>
<script>
//Membuat fungsi Hello()
function Hello() {
document.getElementById("halo").innerHTML = "Halo Guys";
}
</script>
</head>
<body onload="Hello()">
<div id="halo"></div>
</body>
</html>
4. DOM
Objek dokumen mewakili halaman web Anda.
Jika Anda ingin mengakses elemen apa pun di halaman HTML, Anda selalu mulai dengan mengakses objek dokumen.
Di bawah ini adalah beberapa contoh bagaimana Anda dapat menggunakan objek dokumen untuk mengakses dan memanipulasi HTML.
<!DOCTYPE html>
<html>
<head>
<script>
//Membuat fungsi Hello()
function tambah() {
var angka1 = document.getElementById("angka1").value;
var angka2 = document.getElementById("angka2").value;
document.getElementById("jumlah").value = angka1 + angka2;
}
</script>
</head>
<body>
<p><input type="text" id="angka1" /> Angka 1</p>
<p><input type="text" id="angka2" /> Angka 2</p>
<p><button onclick="tambah()">Tambah</button></p>
<p><input type="text" id="jumlah" /> Jumlah</p>
</body>
</html>
Terimakasih telah membaca artikel berikut sampai akhir semoga para pembaca bisa mendapat ilmu yang bermanfaat.
Komentar
Posting Komentar