Cara menggunakan .KLIK di JavaScript

Question

hai sobat website sekolah dumet tentunya sobat kali ini kita akan mempelajari salah satu event di javascript yaitu event onclick, event onclick di javascript adalah event ketika mouse mengklik elemen HTML. cara penggunaannya sangat mudah, mari teman-teman praktekkan cara membuat Onclick Event di Javascript

Table of Contents Show

OnMouseOver & OnMouseOut
Apa itu javascript onclick?
Bagaimana cara memanggil fungsi dalam javascript?
Apa itu OnMouseOut?
2 Apa nama peristiwa yang terjadi saat pengguna mengeklik elemen HTML?

ada dua cara penulisan event di javascript, yang pertama kita bisa letakan event di tag html, seperti contoh berikut sobat

<button class ="btn btn-info" onclick=""> klik </button>

Yang kedua kita bisa membuat event di kode javascript seperti contoh berikut ini sob

ok mari kita praktekkan kedua cara ini sob, pertama-tama tentunya kalian membutuhkan html, persisnya berikut struktur html dasar dan simpan dengan nama index. html dan jangan lupa untuk membuat tag tombol yang memiliki event onclick di dalamnya

<!DOCTYPE html>
<html>
	<head>
		<title> Demo </title>
	</head>
	<body>
		<button onclick="klik()"> klik </button>
		
	</body>
</html>

_

dan setelah itu setelah tagging tombolnya buat script tag berikut ini sob

Nah, setelah selesai, Anda bisa membukanya di browser Anda dan coba klik tombolnya. maka event onclick akan bekerja dan akan muncul alert yang kita pasang yaitu alert bertuliskan 'onclick event is pressed'. lihat gambar di bawah ini

cara kedua adalah dengan membuat event di script javascript, sebelumnya misalnya kita masih menggunakan file ini dan kita menghapus event onclick di tag html dan fungsi click() di javacrip bisa kita hapus

oke setelah itu ketik kode berikut di script javascript sobat

setelah selesai anda bisa membukanya di browser anda, lalu klik button atau klik tombol. maka hasilnya akan sama dengan cara pertama

nah itu dia contoh salah satu event dari javascript bisa sobat praktekkan lagi, ini dia tutorial Onclick Event di Javascript semoga bermanfaat ya sobat

Halo teman-teman, kali ini saya ingin membahas pengenalan dan cara menggunakan EVENT di JavaScript. PERISTIWA dalam JavaScript adalah peristiwa yang terjadi pada suatu elemen. Misalnya, Anda memiliki tombol "tampilkan" pada aplikasi, dan ketika tombol tersebut diklik maka akan muncul peringatan/pemberitahuan. Untuk menerapkannya, Anda harus menyertakan atribut onclick EVENT pada elemen tombol dan mengisinya dengan fungsi atau kode JavaScript sebaris yang berisi peristiwa yang Anda inginkan. Itulah penjelasan singkat dan contoh asumsi dari JavaScript EVENT, semoga anda semua mengerti

JavaScript telah menyediakan banyak kata kunci EVENT yang canggih. Namun, dalam artikel ini saya akan memperkenalkan event JavaScript yang paling sering digunakan, di antaranya adalah

OnClick
Dalam perubahan
OnMouseOver & OnMouseOut
OnKeyDown
OnLoad

Yuk kita bahas satu persatu EVENT JavaScript diatas langsung dengan contohnya

OnClick

OnClick adalah peristiwa yang terjadi saat elemen html diklik

<!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>

Dalam perubahan

OnChange adalah peristiwa yang terjadi saat 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 peristiwa yang terjadi ketika elemen html ditempatkan pada kursor mouse. OnMouseOut adalah peristiwa yang terjadi saat kursor 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 peristiwa yang terjadi saat 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 peristiwa yang terjadi saat elemen dan halaman dibuka

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

_

Itulah pembahasan tentang Mengenal dan Cara Menggunakan EVENT di JavaScript, jika ingin mengetahui kata kunci EVENT lainnya bisa mengunjungi link berikut LINK. Semoga artikel ini dapat memberikan manfaat bagi anda yang membacanya. Sampai jumpa di postingan selanjutnya. Terima kasih

Apa itu javascript onclick?

onclick adalah atribut HTML untuk menentukan tindakan saat peristiwa klik pada suatu elemen . Atribut ini dapat diisi dengan nama fungsi atau ekspresi javascript. Selain event onclick, ada juga event lainnya seperti onchange, onmouseover, onkeyup, onload, dll.

Bagaimana cara memanggil fungsi dalam javascript?

Cara Memanggil/Menjalankan Fungsi . Nama fungsi(); Contoh. // buat fungsi function sayHello(){ console. log("Halo Dunia. "); } // panggil fungsi sayHello() // kemudian akan menghasilkan -> Hello World.