Tämän blogikirjoituksen tarkoituksena on selventää sekaannuksia data-attribuutin käytössä Javascriptissä. Ohjelmistotekniikan opiskelijana joskus bootcamp-maailma ja reaalimaailma tuntuvat olevan läheisessä yhteydessä toisiinsa, mutta silti galaksien päässä toisistaan. Eräällä luennollamme muokkasimme luokkia ja lisäsimme tunnuksia suoraan html:ään ja eräs opiskelija mainitsi, että ei ole erityisen viisasta muokata näitä juttuja, koska suunnittelutiimillä voi olla ongelmia.

Tämä oli täysin järkevää. Enter, HTMLElement.dataset. Dataset-ominaisuus tarjoaa JS-ohjelmoijille mahdollisuuden lukea/kirjoittaa elementin mukautettuja attribuutteja. Etuna on se, että se on käytettävissä sekä DOM:ssa että HTML:ssä.

Hämmentävää tässä on se, että HTML:n data-attribuutilla ja sitä vastaavalla DOM:n dataset.propertyllä ei ole samaa nimeä. Tämän olen löytänyt lukiessani MDN-sivustolta.

Tässä kohtaa suurin osa ongelmista tulee esiin. Uutena JS-ohjelmoijana ajattelin tämän olevan erityisen hyödyllinen, kun asetetaan attribuutteja elementteihin samalla kun lisätään tapahtumakuuntelijoita. Varoituksen sana:

Kunhan olemme lukeneet läpi tämän aiheen nimeämissäännöt, voimme sitten siirtyä käyttökelpoisiin asioihin, arvojen käyttämiseen ja asettamiseen, jota seuraa muutama esimerkki.

Arvojen käyttäminen antaa mielestäni meille enemmän vaihtoehtoja manipulointiin, toisin kuin pelkkä kutsuminen classNameen tai id:hen. Tämä on tehokasta, koska meidän ei tarvitse huolehtia siitä, tuleeko suunnitteluryhmä jonain päivänä ja sanoo, että arvaa mitä, olemme nimenneet kaikki luokkamme uudelleen. Tässä muutamia esimerkkejä syntaksista:

Tässä on esimerkki, jonka Mozilla antaa:

Ja kollegoilleni kohortin ”kaverit.” Tämän pitäisi todella osua kohdalleen. Pariohjelmoinnillamme Toylandia käytimme Alexin kanssa näin:

Keskusteltuamme ystäväni kanssa, joka nyt opettelee Reactia, tulemme huomaamaan, jos luet tämän koodin läpi, että .innerText on IE-metodi, ja meidän pitäisi käyttää .textContent-metodia, mutta se on toista postausta varten.

Kun käytämme niin paljon aikaa uuden materiaalin opetteluun, joskus tärkeät seikat jäävät huomaamatta. Kun projektiviikko koittaa, uskon, että meistä kaikista tulee paljon parempia hyödyntämään näitä mukautettuja työkaluja DOM:n manipuloimiseksi ja puhtaan koodin kirjoittamiseksi. Toivottavasti nautitte lukemisesta!