Atribut Pengguna dalam JavaScript

Di HTML diperbolehkan untuk menambahkan atribut kustom sendiri pada tag. Atribut tersebut harus diawali dengan data-, lalu diikuti oleh nama atribut apa saja yang nyaman bagi Anda.

Atribut pengguna dapat digunakan dalam berbagai cara yang sangat banyak. Banyak dari cara-cara ini akan kita pelajari selanjutnya dalam tutorial, dan lebih banyak lagi yang nantinya dapat Anda temukan sendiri.

Cara mengakses atribut tersebut tidak dilakukan secara standar. Kita tidak bisa langsung mengakses properti elemen dengan nama yang sama, seperti yang kita lakukan sebelumnya, melainkan harus menggunakan properti khusus dataset, setelah itu ditulis nama atribut tanpa data- melalui titik. Misalnya, jika atribut kita disebut data-test, maka untuk mengaksesnya kita akan menulis elem.dataset.test, di mana elem adalah variabel yang berisi elemen kita.

Mari kita lihat contohnya. Misalkan kita diberikan elemen berikut:

<div id="elem" data-num="1000"></div>

Mari kita tampilkan nilai atribut data-num-nya ke layar:

let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // akan menampilkan 1000

Dan sekarang mari kita beri nilai lain pada atribut tersebut:

let elem = document.querySelector('#elem');
elem.dataset.num = 123;

Diberikan kode berikut:

<div id="elem" data-text="str">text</div>

Buatlah agar ketika div diklik, di akhir teksnya ditambahkan konten dari atributnya data-text.

Diberikan beberapa div, yang berisi nomor urutnya dalam atribut data-num:

<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>

Buatlah agar ketika salah satu div diklik, nomor urutnya ditulis di akhir teksnya.

Diberikan sebuah tombol. Buatlah agar tombol ini menghitung jumlah klik padanya, dengan menuliskannya ke dalam beberapa atribut pengguna. Misalkan, ketika tombol lain diklik, layar menampilkan berapa kali klik yang telah dilakukan pada tombol pertama.

Diberikan sebuah input:

<input id="elem" data-length="5">

Pada input ini, dalam atribut data-length terdapat jumlah karakter yang perlu dimasukkan ke dalam input. Buatlah agar ketika kehilangan fokus, jika jumlah karakter yang dimasukkan tidak sesuai dengan yang ditentukan, pesan tentang hal itu ditampilkan.

Diberikan sebuah input:

<input id="elem" data-min="5" data-max="10">

Pada input ini, atribut data-min dan data-max berisi rentang. Buatlah agar ketika kehilangan fokus, jika jumlah karakter yang dimasukkan tidak masuk dalam rentang ini, pesan tentang hal itu ditampilkan.