JavaScript Chapter 7 - Mengenal Event Pada JavaScript

Nurroin's Blog - Halo teman-teman sekalian. Jumpa lagi di tutorial JavaScript dasar di Nurroin's Blog. Kali ini sesuai dengan judulnya, kita akan membahas tentang event pada JavaScript, langsung saja pada materi.

PENGENALAN DAN PENGERTIAN JAVASCRIPT

Hallo sobat semua. Kali ini sesuai dengan judulnya kita akan membahas Event pada Javascript . Tahukah sobat apa itu Event ? Event adalah sesuatu yang dilakukan oleh pemakai yang memicu jalanya kode . Pasti sobat masih bingung dengan pengertian tadi. Akan saya jelaskan lagi dah, Misalnya kita memiliki sebuah tombol pada website atau aplikasi yang kita bangun. Dan kita ingin mmeberikan suatu aksi ketika tombol tersebut diklik. Jadi yang menjadi event diisni adalah "event". Misalnya ketika tombol diklik akan menampilkan sebuah kalimat. Jadi eventnya adalah klik. Adapun beberapa event yang terdapat pada javascript sebagai berikut

Macam - Macam Event Pada Javascript

• onclick = Adalah event ketika sebuah element html diklik
• onchange = Adalah event jika sebuah element html berubah
• onmouseover = Adalah event jika jika sebuah element html diletakkan cursor mouse
• onmouseout = Adalah event jika saat cursor mouse meninggalkan element html
• onkeydown = Adalah event jika saat terjadi pengetika pada element HTML
• onload = Adalah event jika saat element atau halaman dibuka

Baiklah akan kita bahas beberapa Event Javascript yang sudah dijelaskan diatas

CARA MEMBUAT EVENT JAVASCRIPT
Untuk membuat event dengan javascript, kita bisa menambahkan atribut dengan nama - nama event diatas, pada element html yang ingin kita berikan event contohnya

CONTOH EVENT PADA JAVASCRIPT
Untuk contohnya saya akan membuat event klik pada sebuah tombol. Jadi saya ingin menampilkan sebuah kalimat jika tombol tersebut diklik

index.html

Coba sobat perhatikan pada contoh diatas, terdapat sebuah tombol yang kita berikan ketika event diklik.

<button onclick="tampil_nama()">Klik Disini</button>

Pada saat tombol ini diklik maka akan dijalankan function tampilkan_nama(). Nah lalu kita buat function tampilkan_nama.

function tampil_nama(){dicument.getElementByid("hasil").innerHTML = "<h3>Nama Saya Dzun</h3>";}

 Isi dari function tampilkan_nama() ini adalah menampilkan kalimat "Nama saya adalah Yogi" pada element id hasil.

Perhatikan gambar berikut.

hasil dari index.html

setelah tombol button di klik

Setelah di klik "button-nya" akan muncul dibawah button "Nama saya Dzun"

KESIMPULAN
Kesimpulanya ada 6 event pada javascript dan yang saya contoh diatas adalah event onclick. Jadi ketika tombol kita click maka isi dari function tersebut akan muncul kurang lebihnya seperti itu logikanya dan dapat sobat kembangkan sendiri sesuai kreatifitas sobat. Nah sampai sini artikel belajar Javascript ini Sekian Terima Kasih

Referensi : script-kiddies.org  malasngoding


TUTORIAL BELAJAR JAVASCRIPT LAINNYA

• Javascript Chapter 1 : Pengertian dan Pengenalan Javascript
• Javascript Chapter 2 : Penulisan dan Cara Penggunaan Javascript
• Javascript Chapter 3 : Mengenal Variabel Javascript
• Javascript Chapter 4 : Operator Aritmatika Javascript
• Javascript Chapter 5 : Mengenal Tipe Data Javascript
• Javascript Chapter 6 : Membuat Function Javascript
• Javascript Chapter 7 : Mengenal Event pada Javascript
• Javascript Chapter 8 : Membuat Inputan Angka
• JavaScript Chapter 9 : Menampilkan Tanggal dengan Javascript
• Javascript Chapter 10 : Switch Case di Javascript
• Javascript Chapter 11 : Perulangan For pada Javascript