Cara menggunakan FIREEVENT di JavaScript

Question

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

Table of Contents Show

OnMouseOver & OnMouseOut
Cara Membuat Acara Javascript
Contoh event dalam Javascript
TUTORIAL MENARIK LAINNYA
Membuat Jam Analog dan Digital Dengan Javascript
Membuat Format Rupiah Dengan Javascript
Membuat Grafik Dengan Charts. js
Membuat Form Validasi dengan Javascript - Sebelumnya di www. malas. com, saya sudah membuat tutorial cara membuat form validasi dengan PHP. dan juga membuat formulir validasi

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

Suatu peristiwa dalam javascript adalah sesuatu yang terjadi pada suatu elemen. Teman-teman pasti bingung dengan arti event di javascript. jadi begini, misalkan kita memiliki sebuah tombol di halaman website atau aplikasi yang telah kita buat, dan kita ingin memberikan action jika tombol tersebut di klik. jadi acara disini adalah "klik". misalnya, jika tombol diklik, maka akan ditampilkan pesan yang menonjolkan kalimat. jadi acaranya klik. adapun beberapa event yang terdapat pada javascript adalah sebagai berikut

Berbagai acara di javascript

onclick = adalah peristiwa jika elemen html diklik
onchange = adalah peristiwa jika elemen html berubah
onmouseover = adalah event jika elemen html diletakkan pada kursor mouse
onmouseout = adalah kejadian ketika kursor mouse meninggalkan elemen html
onkeydown = adalah peristiwa ketika terjadi pengetikan pada elemen html
onload = adalah peristiwa ketika elemen atau halaman dibuka

Baiklah kita akan membahas beberapa event javascript yang sudah dijelaskan diatas

Cara Membuat Acara Javascript

Untuk membuat event dengan javascript, kita bisa menambahkan atribut dengan nama event diatas, pada elemen html yang ingin kita beri event. Misalnya

1

<tombol klik = "di sini berikan tindakan yang yang ingin Anda lakukan">BUTTON< / button>

Contoh event dalam Javascript

misalnya saya akan membuat event klik tombol. jadi saya ingin menampilkan kalimat jika tombol diklik

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

< . DOCTYPE html>

<html>

<judul>Pelajari Javascript Bagian 7 . Mengenali Acara Aktif Javascript< / judul>

< / kepala>

<tubuh>

<h1>Kenali Acara Aktif Javascript< / h1>

<h2>www. malas Goding. com< / h2>

< . -- menyediakan acara pada elemen tombol -- >

< . -- id hasil -- >

// buat fungsi display_name

fungsi show_name (){

dokumen. getElementById ( "hasil" ). innerHTML = """""""""""""""""""""""""""""""""" ;

}

< / tubuh>

< / html>

Coba perhatikan sob, pada contoh diatas ada tombol yang kita beri event klik

1

ketika tombol ini diklik, fungsi display_name() akan dijalankan. nah selanjutnya kita buat fungsi display_name

1

2

3

fungsi show_name (){

dokumen. getElementById ( "hasil" ). innerHTML = """""""""""""""""""""""""""""""""""""" ;

}

Isi dari fungsi display_name() adalah menampilkan kalimat “nama saya andi” pada elemen id hasil

lihat gambar berikut

mengenali peristiwa dalam javascript

ketika tombol diklik,

cara membuat acara di javascript

nah, muncul "nama saya andi".

Itu saja untuk tutorial Belajar Javascript Bagian 7. Mengenal Acara di Javascript di www. malas. com semoga bermanfaat

Istilah pencarian masuk

acara dalam javascript
fungsi onclick dalam javascript
bahasa teks/javascript. pengenal
skrip java untuk php menggunakan onclick
https. //www malasngoding com/belajar-javascript-part-7-mengengen-event-pada-javascript/
fungsi klik
belajar javascript onclick
fungsi onclic dalam javascript dan lainnya
contoh acara dalam javascript
contoh acara javascript

MEMBAGIKAN

Diki Alfarabi Hadi

Penggemar koding. Seseorang yang suka mempelajari sesuatu yang baru. terutama tentang pemrograman web dan desain web. senang berbagi ilmu dan belajar dari orang lain

Profil penulis
Semua postingan oleh Diki Alfarabi Hadi

Tag. event javascript, event jquery, event object javascript, event onchange, event onclick, event onkeydown, event onmouseout, event onmouseover, event javascript keydown, javascript event onload, javascript event onscroll, event perubahan teks kotak teks javascript, javascript acara touchstart, javascript acara tutup jendela

Tutorial Javascript Dasar

#1. Pengantar JS
#2. Menulis Dan Menggunakan JS
#3. variabel JS
#4. Operator Aritmatika
#5. Tipe Data JS
#6. fungsi JS
#7. Acara JS
#8. Tali JS
#9. Tanggal JS
#10. Beralih Kasus JS
#11. Perulangan Untuk JS
#12. Manipulasi String JS
#13. Tutorial JS lainnya

Produk

Kode Sumber Website Reservasi Kamar Hotel Dengan PHP dan MySQLi Rp 200.000
Kode Sumber Pengajuan Cuti Karyawan Berbasis Website Rp 200.000
Kode Sumber Toko Sport PHP dan MySQLi Rp 200.000
Kode Sumber Sistem Informasi Kuisioner Berbasis Web Rp 200.000

Tutorial Terbaru

Tutorial Python # 13. Jenis Operator Dalam Python 24 September 2022
Membuat Laporan PDF dengan PHP dan MySQLi 3 September 2022
Ekspor Data ke Excel Dengan PHP dan MySQLi 23 Agustus 2022
Membuat Opsi Pilih Dinamis Menggunakan Ajax 17 Agustus 2022
Membuat Kode QR Dengan PHP 3 Agustus 2022

Toko kami

SOSIAL

Ngoding malas

TUTORIAL MENARIK LAINNYA

JavaScript

Membuat Jam Analog dan Digital Dengan Javascript

10 Oktober 2018

Membuat Jam Analog dan Digital Dengan Javascript Membuat Jam Analog dan Digital Dengan Javascript – Seperti yang sudah kita pelajari dan jelaskan sebelumnya pada tutorial

Diki Alfarabi Hadi

JavaScript

Membuat Format Rupiah Dengan Javascript

18 September 2018

Membuat Format Rupiah Dengan Javascript Membuat Format Rupiah Dengan Javascript Seperti yang telah kita ketahui javascript sangat besar kegunaannya dalam pembangunan sebuah website atau aplikasi.

Diki Alfarabi Hadi

JavaScript