Javascript Part 7 : Mengenal Event Pada Javascript

Rabu, 11 Januari 2017

Javascript Part 7 : Mengenal Event Pada Javascript

    1 komentar

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


<!DOCTYPE html>
<html>
<head>
    <title>Belajar Javascript Part 7 : Mengenal Event Pada Javascript</title>
</head>
<style type="text/css">
    body {
        font-family: raleway;
    }
    button{
        background: red;
        padding: 10px 15px;
        color: white;
        border-radius: 6px;
        border-style: none;
    }
    button:hover{
        background: crimson
    }
</style>

<body>
    <h1>Mengenal Event Pada Javascript</h1>
    <h2><a href="www.script-kiddies.org">Script Kiddies</a></h2>

    <!-- Memberikan event pada element tombol -->
    <button onclick="tampil_nama()">Klik Disini</button>

    <!-- Id Hasil -->
    <div id="hasil"><h3>Script Kiddies</div>

    <script type="text/javascript">
        // Membtuan funtcion tampil_nama
        function tampil_nama(){
            document.getElementById("hasil").innerHTML = "<h3> Nama saya adalah Yogi </h3>";
        }
    </script>
</body>
</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(){
            document.getElementById("hasil").innerHTML = "<h3> Nama saya adalah Yogi </h3>";
        }
Isi dari function tampilkan_nama() ini adalah menampilkan kalimat "Nama saya adalah Yogi" pada element id hasil.

Perhatikan gambar berikut
TAMPILAN AWAL
KETIKA TOMBOL DIKLIK
Nah, Munculnya "Nama saya adalah Yogi"

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 : Malas Ngoding

TUTORIAL BELAJAR JAVASCRIPT DASAR LAINYA

1 komentar :

Langganan: Posting Komentar ( Atom )