Προσαρμοσμένα Χαρακτηριστικά στο JavaScript

Στο HTML επιτρέπεται να προσθέτετε τα δικά σας, προσαρμοσμένα χαρακτηριστικά στις ετικέτες. Τέτοια χαρακτηριστικά πρέπει να ξεκινούν με data-, και στη συνέχεια μπορεί να ακολουθήσει οποιοδήποτε όνομα χαρακτηριστικού που σας βολεύει.

Τα προσαρμοσμένα χαρακτηριστικά μπορούν να χρησιμοποιηθούν με έναν τεράστιο αριθμό διαφορετικών τρόπων. Πολλοί από αυτούς τους τρόπους θα τους μελετήσουμε αργότερα στο φροντιστήριο, και ακόμη περισσότερους θα μπορείτε να ανακαλύψετε αυτοστιγμεί στο μέλλον.

Η πρόσβαση σε τέτοια χαρακτηριστικά δεν είναι τυπική. Δεν μπορούμε απλά να απευθυνθούμε στην ιδιότητα του στοιχείου με το ίδιο όνομα, όπως κάναμε στο παρελθόν, αλλά πρέπει να χρησιμοποιήσουμε μια ειδική ιδιότητα dataset, μετά από την οποία μέσω μιας τελείας γράφεται το όνομα του χαρακτηριστικού χωρίς το data-. Για παράδειγμα, αν το χαρακτηριστικό μας ονομάζεται data-test, τότε για να απευθυνθούμε σε αυτό θα γράφουμε elem.dataset.test, όπου elem είναι η μεταβλητή με το στοιχείο μας.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι μας δίνεται το ακόλουθο στοιχείο:

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

Ας εμφανίσουμε στην οθόνη την τιμή του χαρακτηριστικού του data-num:

let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // θα εμφανίσει 1000

Και τώρα ας αντιστοιχίσουμε σε αυτό το χαρακτηριστικό μια διαφορετική τιμή:

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

Δίνεται ο ακόλουθος κώδικας:

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

Κάντε έτσι ώστε με το κλικ στο div στο τέλος του κειμένου του να προστεθεί το περιεχόμενο του χαρακτηριστικού του data-text.

Δίνονται divs, που περιέχουν στο χαρακτηριστικό 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>

Κάντε έτσι ώστε με το κλικ σε οποιοδήποτε από tα divs, στο τέλος του να εγγράφεται ο τακτικός του αριθμός.

Δίνεται ένα κουμπί. Κάντε έτσι ώστε αυτό το κουμπί να μετράει τον αριθμό των κλικ πάνω του, καταγράφοντας τα σε κάποιο προσαρμοσμένο χαρακτηριστικό. Έστω ότι με το κλικ σε ένα άλλο κουμπί στην οθόνη εμφανίζεται πόσα κλικ έγιναν στο πρώτο κουμπί.

Δίνεται ένα πεδίο εισαγωγής (input):

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

Σε αυτό το πεδίο εισαγωγής, στο χαρακτηριστικό data-length περιέχεται ο αριθμός των χαρακτήρων που πρέπει να εισαχθούν στο πεδίο. Κάντε έτσι ώστε κατά την απώλεια εστίασης (focus), εάν ο αριθμός των εισαγμένων χαρακτήρων δεν συμπίπτει με τον καθορισμένο, να εμφανίζεται μήνυμα για αυτό.

Δίνεται ένα πεδίο εισαγωγής (input):

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

Σε αυτό το πεδίο εισαγωγής, τα χαρακτηριστικά data-min και data-max περιέχουν ένα εύρος. Κάντε έτσι ώστε κατά την απώλεια εστίασης, εάν ο αριθμός των εισαγμένων χαρακτήρων δεν εμπίπτει σε αυτό το εύρος, να εμφανίζεται μήνυμα για αυτό.