Sommario
Boost your web application
HTML è un linguaggio di mark-up in cui sono stati definiti molti tag per conferire una semantica al testo. Quindi ci sono i marcatori di titolo h1, …, h6 per definire la gerarchia delle titolazioni nelle sezioni del documento, come i tag per le liste, i paragrafi, le immagini e così via.
Ogni marcatore (tag) è corredato di una serie di attributi standard che vengono utilizzati sia da browser che dai programmi Javascript per interagire con il DOM (Document Object Model).
Nulla vieta però all’occorrenza di definire degli attributi personalizzati (custom) se l’applicazione ne ha bisogno. Il browser ignorerà tali attributi per quanto riguarda la visualizzazione ma li metterà comunque a disposizione nel DOM per poter essere utilizzati dai programmi Javascript. Come esempio di un caso d’uso possiamo aver bisogno di identificare l’icona di un utente del social network che stiamo sviluppando etichettandolo con l’id univoco che rappresenta l’utente nello spazio dati:
<img src="images/placeholder-small.jpg" userid="8zn4938d9z3" ...>
userid non è un attributo standard; nella visualizzazione il browser non lo prederà in considerazione, però potremo accedervi con Javascript:
<script>
console.log(img.getAttribute('userid'));
</script>
Potrebbe esserci un problema di conflitto di nomi, se abbiamo definito un nome attributo che viene utilizzato in modo diverso da più librerie Javascript entrambe agenti sulla stessa pagina HTML.
HTML5 [1] da’ la possibilità di definire una convenzione per cui se i nomi degli attributi personalizzati iniziano con data-
<img src="images/placeholder-small.jpg" data-userid="8zn4938d9z3" ...>
allora i valori sono reperibili direttamente con un accesso all’oggetto img.dataset
console.log(img.dataset.userid);
Oppure con AngularJS è possibile la stessa cosa utilizzando il prefisso ng-* (le cosiddette direttive con le quali AngularJS estende gli attributi HTML):
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<img ng-userid="8zn4938d9z3">
Un esempio più illuminante è il seguente in AngularJS nel quale definisco una direttiva completamente custom:
<div ng-app="coolApp" pippo-directive>
<script>
var app = angular.module("coolApp", []);
app.directive("pippoDirective", function() {
return {
template : "Testo definito nel callback del costruttore della direttiva!"
};
});
</script>
Il tag coolApp (che definisce l’app AngularJS) ha una direttiva completamente custom pippo-directive che viene agganciata da Javascript tramite la directive app.directive, il cui nome è la versione camel-case del nome dell’attibuto HTML.
Commenti recenti