Attributi personalizzati in JavaScript

In HTML è consentito aggiungere i propri attributi personalizzati ai tag. Tali attributi devono iniziare con data-, e poi può seguire qualsiasi nome di attributo che trovi conveniente.

Gli attributi personalizzati possono essere utilizzati in un'enorme varietà di modi. Molti di questi modi li studieremo più avanti nel tutorial, e molti altri potrai in seguito inventarne autonomamente.

L'accesso a tali attributi non è implementato in modo standard. Non puoi semplicemente accedere alla proprietà omonima dell'elemento, come facevamo prima, ma dovresti utilizzare una proprietà speciale dataset, dopo la quale, tramite un punto, si scrive il nome dell'attributo senza data-. Ad esempio, se il nostro attributo si chiama data-test, per accedervi scriveremo elem.dataset.test, dove elem è la variabile con il nostro elemento.

Vediamo un esempio. Supponiamo di avere questo elemento:

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

Visualizziamo a schermo il valore del suo attributo data-num:

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

E ora assegniamo a questo attributo un altro valore:

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

Dato il seguente codice:

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

Fai in modo che al click sul div, alla fine del suo testo venga aggiunto il contenuto del suo attributo data-text.

Sono dati dei div, che contengono nel loro attributo data-num il proprio numero d'ordine:

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

Fai in modo che al click su uno qualsiasi dei div, alla sua fine venga scritto il suo numero d'ordine.

Data un pulsante. Fai in modo che questo pulsante conti il numero di click su di esso, registrandoli in un attributo personalizzato. Fai in modo che al click su un altro pulsante venga visualizzato a schermo quanti click sono stati fatti sul primo pulsante.

Dato un input:

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

In questo input, nell'attributo data-length è contenuto il numero di caratteri che devono essere inseriti nell'input. Fai in modo che alla perdita del focus, se il numero di caratteri inseriti non corrisponde a quello impostato, venga visualizzato un messaggio in merito.

Dato un input:

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

In questo input gli attributi data-min e data-max contengono un intervallo. Fai in modo che alla perdita del focus, se il numero di caratteri inseriti non rientra in questo intervallo, venga visualizzato un messaggio in merito.