rachmat

Current Date:27 May, 2020

Mengenal dan Cara Menggunakan EVENT pada JavaScript

JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Google Chrome, Internet Explorer, Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.
4.9
(7)

Hallo sobat, tulisan kali ini Saya ingin membahas tentang pengenalan dan bagaimana cara menggunakan EVENT pada JavaScript. EVENT pada JavaScript adalah sebuah kejadian yang terjadi pada suatu elemen. Misalnya, Anda mempunyai sebuah button “show” pada aplikasi, dan saat button tersebut di klik akan menampilkan sebuah alert/notifikasi. Untuk menerapkan itu, Anda harus memasukan atribut EVENT onclick pada elemen button tersebut dan mengisinya dengan sebuah function atau kode JavaScript inline yang berisi kejadian yang Anda inginkan. Itulah penjelasan singkat dan contoh pengandaian dari EVENT JavaScript, mudah-mudahan sobat semua paham ya.

JavaScript telah menyediakan banyak keyword EVENT canggih. Namun pada tulisan ini Saya akan mengenalkan event-event JavaScript yang paling sering digunakan saja, di antaranya yaitu:

  • OnClick
  • OnChange
  • OnMouseOver & OnMouseOut
  • OnKeyDown
  • OnLoad

Yuk, mari kita bahas satu persatu EVENT JavaScript di atas langsung dengan contohnya.

OnClick

OnClick adalah suatu kerjadian yang terjadi ketika sebuah elemen html di klik.

<!DOCTYPE html>
<html>
<body>
<p>This example demonstrates how to assign an "onclick" event to a p element.</p>
<p id="demo" OnClick="myFunction()">Click me.</p>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>
</body>
</html>

OnChange

OnChange adalah suatu kejadian yang terjadi ketika sebuah elemen html berubah.

<!DOCTYPE html>
<html>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" OnChange="myFunction()">
  <option value="Audi">Audi</option>
  <option value="BMW">BMW</option>
  <option value="Mercedes">Mercedes</option>
  <option value="Volvo">Volvo</option>
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>

Baca Juga: Membuat RESTful API Sederhana dengan PHP

OnMouseOver & OnMouseOut

OnMouseOver adalah suatu kejadian yang terjadi ketika sebuah elemen html di letakkan cursor mouse. OnMouseOut adalah suatu kejadian yang terjadi ketika cursor mouse meninggalkan elemen html.

<!DOCTYPE html>
<html>
<body>
<p>This example demonstrates how to assign an "onmouseover" and "onmouseout" event to a h1 element.</p>
<h1 id="demo" OnMouseOver ="mouseOver()" OnMouseOut="mouseOut()">Mouse over me</h1>
<script>
function mouseOver() {
  document.getElementById("demo").style.color = "red";
}
function mouseOut() {
  document.getElementById("demo").style.color = "black";
}
</script>
</body>
</html>

OnKeyDown

OnKeyDown adalah suatu kejadian yang terjadi ketika ada pengetikan pada elemen html.

<!DOCTYPE html>
<html>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" id="input" onkeydown="myFunction()">
<div id="text"></div>
<script>
function myFunction() {
   var inputText = document.getElementById("input").value;
   document.getElementById("text").innerHTML = inputText;
}
</script>
</body>
</html>

OnLoad

OnLoad adalah suatu kejadian yang terjadi ketika elemen dan halaman di buka.

<!DOCTYPE html>
<html>
<body OnLoad="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
  alert("Page is loaded");
}
</script>
</body>
</html>

Demikian pembahasan tentang Mengenal dan Cara Menggunakan EVENT pada JavaScript, jika ingin mengetahui keyword EVENT lainnya Anda bisa kunjungi link berikut ini LINK dan silahkan tinggalkan komentar pada tulisan ini bila ingin bertanya atau memberi masukan. Semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca, sampai bertemu di tulisan berikutnya. Terima Kasih

Apakah artikel ini membantu Anda?

klik bintang untuk memberikan nilai

Total nilai 4.9/5 dari 7 suara

Tidak ada suara sejauh ini! Jadilah yang pertama memberi nilai pada tulisan ini.

Leave a Reply

Your email address will not be published. Required fields are marked *