Selasa, 11 April 2017

Mengenal Event Pada JavaScript

Assalamualaikum Wr.Wb


Event pada Javascript adalah sesuatu yang terjadi pada element . contoh kita memiliki sebuah tombol di halaman website atau aplikasi yang kita bangun dan kita ingin memberikan suatu aksi jika tombol tersebut di klik , jadi yang menjadi event di sini adalah "klik ". misalnya jika tombol di klik maka akan di tampilkan pesan yang menampilkan sebuah kalimat.Adapun beberapa event yang terdapat pada javascript  adalah sebagai berikut:

  •  onclick = adalah Event jika sebuah element html di klik.
  •  onchange = adalah Event jika sebuah element html berubah.
  •  onmouseover =  adalah event jika sebuah element html di letakkan cursor mouse.
  •  onemouseout = adalah event jika saat cursor mouse meninggalkan element html.
  •  onkeydown = adalah event jika saat di terjadi pengetikan pada element html.
  •  onload = adalah event ketika jika saat element atau halaman di buka.
Sekarang mari kita untuk coba untuk membuat salah satu Event yang ada di atas
<button onclick="di sini berikan aksi yang ingin di lakukan">TOMBOL</button>
untuk membuat Event kita tinggal menuliskan Event apa yang kita pilih,sekarang kita terapkan pada HTML,di sini saya akan menggunakan button.
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Event</title>
</head>
<body>
    <h1>Mengenal Event Pada Javascript</h1>
    <h2>Klik Tombol Di Bawah</h2>

    <!-- memberikan event pada element tombol -->
    <button onclick="tampilkan_nama_blog()">KLIK SAYA</button>

    
    <div id="hasil"></div><!-- output akan muncul di sini -->

    <script>       
        // membuat function tampilkan_nama
        function tampilkan_nama_blog(){
            document.getElementById("hasil").innerHTML = "<h3>Nama Blog Saya Adalah Setiyono's Blog</h3>";
        }
       
    </script>
</body>
</html> 

Jika kita perhatikan button di atas terdapat sebuah Event yaitu Event OnClick
 <button onclick="tampilkan_nama_blog()">KLIK SAYA</button>
Lalu setelah button di klik maka Event akan Di jalankan  tepatnya pada function tampilkan_nama_blog().
 <script>       
        // membuat function tampilkan_nama
        function tampilkan_nama_blog(){
            document.getElementById("hasil").innerHTML = "<h3>Nama Blog Saya Adalah Setiyono's Blog</h3>";
        }
       
    </script>

Kemudian output akan di tampilkan pada
<div id="hasil"></div><!-- output akan muncul di sini -->
Hasil sebelum button di klik


Hasil setelah button di klik



Ya itu tadi sedikit pembahasan Event pada JavaScript semoga bermanfaat untuk teman - teman semua

Referensi:http://www.malasngoding.com/belajar-javascript-part-7-mengenal-event-pada-javascript/

Wassalamualaikum Wr.Wb


Share:

0 komentar:

Posting Komentar