Uporabniški atributi v JavaScript

V HTML je dovoljeno dodajati lastne, uporabniške atribute oznakam. Takšni atributi se morajo začeti s data-, nato pa mora slediti poljubno ime atributa, ki vam ustreza.

Uporabniški atributi se lahko uporabljajo na ogromno različnih načinov. Številne od teh načinov bomo preučili kasneje v učbeniku, še več pa jih boste lahko v prihodnosti izumili sami.

Dostopanje do takšnih atributov ni standardno. Ne moremo se preprosto sklicevati na lastnost elementa z enakim imenom, kot smo to počeli prej, ampak moramo uporabiti posebno lastnost dataset, za katero skozi piko napišemo ime atributa brez data-. Na primer, če se naš atribut imenuje data-test, bomo za dostop do njega pisali elem.dataset.test, kjer je elem - spremenljivka z našim elementom.

Poglejmo si primer. Naj imamo dani takšen element:

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

Izpišimo na zaslon vrednost njegovega atributa data-num:

let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // izpiše 1000

In sedaj priredimo temu atributu drugo vrednost:

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

Dan je naslednji kod:

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

Naredite tako, da se ob kliku na div na konec njegovega besedila doda vsebina njegovega atributa data-text.

Dan so div-i, ki vsebujejo v atributu data-num svojo zaporedno številko:

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

Naredite tako, da se ob kliku na katerikoli od div-ov mu na konec zapiše njegova zaporedna številka.

Dan je gumb. Naredite tako, da ta gumb šteje število klikov nanj, jih zapisuje v neki uporabniški atribut. Naj se ob kliku na drug gumb na zaslon izpiše, koliko klikov je bilo izvedenih na prvi gumb.

Dan je vnosno polje:

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

V tem vnosnem polju v atributu data-length vsebuje število znakov, ki jih je potrebno vnesti v vnosno polje. Naredite tako, da ob izgubi fokusa, če se število vnešenih znakov ne ujema z določenim, izpiše sporočilo o tem.

Dan je vnosno polje:

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

V tem vnosnem polju atributa data-min in data-max vsebujeta obseg. Naredite tako, da ob izgubi fokusa, če število vnešenih znakov ne spada v ta obseg, izpiše sporočilo o tem.