Tutorial JS

JS RUMAH Pengenalan JS JS Dimana Keluaran JS Pernyataan JS Sintaks JS Komentar JS Variabel JS JS Let JS Const Operator JS JS Aritmatika Tugas JS Tipe Data JS Fungsi JS Objek JS Acara JS String JS Metode String JS Pencarian String JS Template String JS Nomor JS Metode Nomor JS JS Array Metode Array JS Sortir Array JS Iterasi Array JS JS Array Const Tanggal JS Format Tanggal JS Metode Dapatkan Tanggal JS Metode Penetapan Tanggal JS JS Matematika JS Acak JS Boolean Perbandingan JS Ketentuan JS Beralih JS JS Loop Untuk JS Loop Untuk Masuk JS Loop Untuk Of JS Loop Sementara Istirahat JS JS Iterable JS Set Peta JS Tipe JS Konversi Tipe JS JS Bitwise JS RegExp Kesalahan JS Lingkup JS Pengangkatan JS Mode Ketat JS JS Kata Kunci ini Fungsi Panah JS Kelas JS JS JSON Debug JS Panduan Gaya JS Praktik Terbaik JS Kesalahan JS Kinerja JS Kata-kata Cadangan JS

Versi JS

Versi JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Tepi Sejarah JS

Objek JS

Definisi Objek Properti Objek Metode Objek Tampilan Objek Aksesor Objek Konstruktor Objek Prototipe Objek Obyek Iterable Set Objek Peta Objek Referensi Objek

Fungsi JS

Definisi Fungsi Parameter Fungsi Panggilan Fungsi Panggilan Fungsi Fungsi Terapkan Penutupan Fungsi

Kelas JS

Perkenalan Kelas Warisan Kelas Kelas Statis

JS Asinkron

Panggilan Balik JS JS Asinkron JS Janji JS Async/Menunggu

JS HTML DOM

Pengenalan DOM Metode DOM Dokumen DOM Elemen DOM HTML DOM Formulir DOM CSS DOM Animasi DOM Acara DOM Pendengar Acara DOM Navigasi DOM Node DOM Koleksi DOM Daftar Node DOM

JS Browser BOM

Jendela JS Layar JS Lokasi JS Sejarah JS JS Navigator Peringatan Munculan JS Waktu JS JS Cookies

JS Web API

Pengantar API Web API Formulir Web API Riwayat Web API Penyimpanan Web API Pekerja Web API Pengambilan Web API Geolokasi Web

JS AJAX

Pengenalan AJAX AJAX XMLHttp Permintaan AJAX Tanggapan AJAX File XML AJAX AJAX PHP AJAX ASP Basis Data AJAX Aplikasi AJAX Contoh AJAX

JS JSON

Perkenalan JSON Sintaks JSON JSON vs XML Tipe Data JSON Penguraian JSON Stringify JSON Objek JSON Array JSON Server JSON JSON PHP JSON HTML JSON JSONP

JS vs jQuery

Pemilih jQuery jQuery HTML jQuery CSS jQuery DOM

Grafik JS

Grafik JS JS Kanvas JS Plotly JS Chart.js Bagan Google JS JS D3.js

Contoh JS

Contoh JS JS HTML DOM Masukan HTML JS Objek HTML JS Acara HTML JS JS Browser Editor JS Latihan JS kuis JS Sertifikat JS

Referensi JS

Objek JavaScript Objek DOM HTML


Acara JavaScript


Peristiwa HTML adalah "hal" yang terjadi pada elemen HTML.

Ketika JavaScript digunakan di halaman HTML, JavaScript dapat "bereaksi" pada peristiwa ini.


Acara HTML

Peristiwa HTML dapat berupa sesuatu yang dilakukan browser, atau sesuatu yang dilakukan pengguna.

Berikut adalah beberapa contoh peristiwa HTML:

  • Halaman web HTML telah selesai dimuat
  • Bidang input HTML telah diubah
  • Tombol HTML diklik

Seringkali, ketika peristiwa terjadi, Anda mungkin ingin melakukan sesuatu.

JavaScript memungkinkan Anda mengeksekusi kode saat peristiwa terdeteksi.

HTML memungkinkan atribut event handler, dengan kode JavaScript , untuk ditambahkan ke elemen HTML.

Dengan kutipan tunggal:

<element event='some JavaScript'>

Dengan tanda kutip ganda:

<element event="some JavaScript">

Dalam contoh berikut, onclickatribut (dengan kode), ditambahkan ke <button>elemen:

Contoh

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

Pada contoh di atas, kode JavaScript mengubah konten elemen dengan id="demo".

Pada contoh berikutnya, kode mengubah konten elemennya sendiri (menggunakan this.innerHTML):

Contoh

<button onclick="this.innerHTML = Date()">The time is?</button>

Kode JavaScript seringkali panjangnya beberapa baris. Lebih umum untuk melihat atribut acara memanggil fungsi:

Contoh

<button onclick="displayDate()">The time is?</button>


Acara HTML Umum

Berikut adalah daftar beberapa event HTML yang umum:

Peristiwa Keterangan
dalam perubahan Elemen HTML telah diubah
klik Pengguna mengklik elemen HTML
di atas mouse Pengguna menggerakkan mouse di atas elemen HTML
keluar dari mouse Pengguna memindahkan mouse dari elemen HTML
onkeydown Pengguna menekan tombol keyboard
memuat Browser telah selesai memuat halaman

Daftarnya jauh lebih panjang: W3Schools JavaScript Referensi HTML Acara DOM .


Penangan Acara JavaScript

Penangan acara dapat digunakan untuk menangani dan memverifikasi input pengguna, tindakan pengguna, dan tindakan browser:

  • Hal-hal yang harus dilakukan setiap kali halaman dimuat
  • Hal-hal yang harus dilakukan ketika halaman ditutup
  • Tindakan yang harus dilakukan saat pengguna mengklik tombol
  • Konten yang harus diverifikasi saat pengguna memasukkan data
  • Dan lebih ...

Banyak metode berbeda yang dapat digunakan agar JavaScript berfungsi dengan acara:

  • Atribut acara HTML dapat mengeksekusi kode JavaScript secara langsung
  • Atribut acara HTML dapat memanggil fungsi JavaScript
  • Anda dapat menetapkan fungsi pengendali acara Anda sendiri ke elemen HTML
  • Anda dapat mencegah acara dikirim atau ditangani
  • Dan lebih ...

Anda akan belajar lebih banyak tentang event dan event handler di bab DOM HTML.


Uji Diri Anda Dengan Latihan

Olahraga:

Elemen <button>harus melakukan sesuatu ketika seseorang mengkliknya. Cobalah untuk memperbaikinya!

<button ="alert('Hello')">Click me.</button>