Vlastné atribúty v JavaScripte

V HTML je povolené pridávať vlastné, používateľské atribúty elementom. Takéto atribúty musia začínať s data-, za ktorým nasleduje ľubovoľný názov atribútu, ktorý vám vyhovuje.

Vlastné atribúty môžu byť použité obrovským množstvom rôznych spôsobov. Mnohé z týchto spôsobov budeme študovať neskôr v učebnici a ešte viac ich môžete v budúcnosti vymyslieť sami.

Prístup k takýmto atribútom nie je štandardný. Nemožno jednoducho pristupovať k rovnomennej vlastnosti elementu, ako sme to robili predtým, ale treba použiť špeciálnu vlastnosť dataset, za ktorou cez bodku je napísaný názov atribútu bez data-. Napríklad, ak sa náš atribút nazýva data-test, potom pre prístup k nemu budeme písať elem.dataset.test, kde elem je premenná s naším elementom.

Pozrime sa na príklad. Predpokladajme, že máme daný takýto element:

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

Vypíšme na obrazovku hodnotu jeho atribútu data-num:

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

A teraz priraďme tomuto atribútu inú hodnotu:

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

Daný je nasledujúci kód:

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

Urobte tak, aby po kliknutí na div sa na koniec jeho textu pridalo obsah jeho atribútu data-text.

Sú dané divy, obsahujúce v atribúte data-num voje poradové číslo:

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

Urobte tak, aby po kliknutí na ktorýkoľvek z divov sa mu na koniec zapísalo jeho poradové číslo.

Dané je tlačidlo. Urobte tak, aby toto tlačidlo počítalo počet kliknutí naň, zapisujúc ich do nejakého používateľského atribútu. Nech po kliknutí na iné tlačidlo sa na obrazovku vypíše, koľko kliknutí bolo vykonaných na prvé tlačidlo.

Daný je input:

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

V tomto inpute v atribúte data-length je obsiahnutý počet znakov, ktoré je potrebné zadať do inputu. Urobte tak, aby po strate fokusu, ak sa počet zadaných znakov nezhoduje so zadaným, sa vypísala správa o tom.

Daný je input:

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

V tomto inpute atribúty data-min a data-max obsahujú rozsah. Urobte tak, aby po strate fokusu, ak počet zadaných znakov nespadá do tohto rozsahu, sa vypísala správa o tom.