JavaScript

Belajar JavaScript Part 8 : Event Pada JavaScript

Halo teman -teman salam jumpa kembali di pertemuan yang ke-delapan ini, masih di sesi belajar JavaScript. Sebelumnya kita pernah belajar Cara Membuat Function Pada JavaScript. Di pertemuan yang ke-delapan ini saya akan mengulas tentang Event Pada JavaScript.

Teman – teman sudah pada tau belum apa itu event yang terdapat di bahasa pemrograman javascript. Jika belum, pada topik ini akan saya jelaskan tentang Event di JavaScript serta cara membuatnya.


Apa itu Event pada JavaScript.

Event adalah sesuatu yang terjadi pada element, maksudnya bagaimana? Pasti teman – teman bingung ya, jadi begini. Misalnya aplikasi atau suatu program yang sudah kita bangun mempunyai tombol di dalamnya, supaya tombol tersebut bisa di klik, kita harus memberi sebuah aksi.

Nah yang menjadi event disini adalah “klik” Contohnya, tombol tersebut kita atur untuk menampilkan sebuah pesan. Jika kita klik tombolnya, maka pesan pun akan muncul. Maka yang menjadi event adalah klik. Bagaimana sudah paham?

Macam – macam event pada JavaScript.

  • onclick = terjadi jika sebuah element html di klik
  • onchange = terjadi saat element html berubah.
  • onmouseover = jika sebuah element html diletakkan cursor mouse.
  • onmouseout = jika cursor mouse meninggalkan element html.
  • onkeydown = terjadi saat pengetikan pada element html.
  • onload = ketika halaman atau element html dibuka.

Diatas kita sudah bahas pengertian serta macam – macam event pada JavaScript, sekarang kita lanjut ke Contoh dan Cara Membuat Event di JavaScript.


Cara Membuat Event Pada JavaScript

Untuk membuat event kita perlu menambahkan atribut dengan nama – nama event diatas, disini saya akan membuat event onclick.

<button onclick="disini berikan aksi yang ingin dilakukan">TOMBOL</button>

Untuk contohnya saya membuat event klik disebuah tombol, jadi kalau tombol tersebut di klik akan menampilkan sebuah kalimat.

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Javascript Part 8 : Memahami Event Pada JavaScript</title>
</head>
<body>
	<h1>Mengenal Event Pada Javascript</h1>
	<h2>www.irvannurfazri.com</h2>

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

	<!-- id hasil -->
	<div id="hasil"></div>

	<script>		
		// membuat function namaku
		function namaku(){
			document.getElementById("hasil").innerHTML = "<h3>Hallo, Nama saya Irvan senang berkenalan denganmu</h3>";
		}
		
	</script>
</body>
</html>

Teman – teman perhatikan kembali, pada kode program diatas terdapat sebuah tombol yang kita beri event klik.

<button onclick="namaku()">KLIK SAYA</button>

Jika tombol ini di klik, maka ia akan menjalankan function namaku. Nah kemudian kita buat function namaku nya seperti ini.

function namaku(){
document.getElementById("hasil").innerHTML = "<h3>Hallo, nama saya Irvan senang berkenalan denganmu</h3>";
}

Isi dari function namaku() ini akan menampilkan sebuah kalimat “Hallo, nama saya Irvan senang berkenalan denganmu” pada ElementById (“hasil“)

Jika dijalankan hasilnya akan seperti gambar dibawah ini.

Bagaiman teman – teman, apakah sudah paham?


Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini, tentang Pengertian dan Cara Membuat Event Pada JavaScript. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Terima Kasih.

Income Search

  • apa itu event di javascript
  • fungsi onclick di javascript
  • pengertian onload
  • contoh event javascript
  • cara menambahkan atribut event ke html
  • onclick adalah
  • cara menggunakan onclick
  • fungsi onclick dan lain-lain
  • pengertian event javascript
  • belajar onclick javascript
  • memahami event yang ada di javascript
  • macam-macam event bahasa pemrograman
Written by Irvan Nurfazri
No one can bring you true happiness except Allah. Founder Hobigame.net Instagram : ig.com/irvan_gen Profile

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *