5 fondamentali API di HTML5 ~ noframe

Nonostante l'HTML5, il nuovo linguaggio di markup, si stia diffondendo a macchia d'olio tra i web developer, forse non tutti sono a conoscenza di alcune API - Application Programing Interface - poco diffuse, ma molto utili!

Prima di tutto, per chi ancora non lo sapesse, vediamo cos'è un API. Con questa semplice sigla di 3 lettere, si indica ogni insieme di procedure disponibili al programmatore per ottenere un'astrazione tra l'hardware e il programmatore o tra software a basso livello e quello ad alto, semplificando in questo modo il lavoro di programmazione. Le API, in sostanza, evitano ai programmatori di riscrivere ogni volta tutte le funzioni necessarie partendo da zero. Ma adesso parliamo delle API di HTML5 e vediamo quali sono le più utili!

1. Element.classList

L'API classList ci permette di modificare le classi CSS attraverso semplicissimi controlli JavaScript. Ad esempio:

// Aggiungo una classe all'elemento
ilMioElemento.classList.add("nuovaClasse");

// Rimuovo una classe dall'elemento
ilMioElemento.classList.remove("classeEsistente");

// Controllo l'esistenza di una classe
ilMioElemento.classList.contains("unaClasse");

// Eseguo il toggle di un elemento con una classe
ilMioElemento.classList.toggle("altraClasse");

Per capire come funziona quest'API e come utilizzarla, puoi seguire questo articolo bit.ly/Qt7Twi.

2. Element.dataset

L'API Element.dataset fa si che modificare l'attributo data- diventi semplice ed intuitivo. Ad esempio:

/*  Elemento di partenza:
<div data-id="mioID" data-my-custom-key="valore inserito qui" data-name="mioDIV" id="mioDIV">
*/

// Prendo l'elemento

var elemento = document.getElementById("mioDIV");


// Prendo l'ID

var id = elemento.dataset.id;

// Recupero "data-my-custom-key"

var customKey = elemento.dataset.myCustomKey;


// Cambio il valore dell'attributo

elemento.dataset.myCustomKey = "altro valore";


// L'elemento si trasforma in:



<div data-id="mioID" data-my-custom-key="altro valore" data-name="mioDIV" id="mioDIV">

Per saperne di più puoi consultare: http://mzl.la/Ud9GAR.

3. L'attributo autofocus

L'attributo autofocus fa si che un elemento, ad esempio un button o una textarea, venga focalizzato unicamente quando la pagina è pronta per l'animazione. Vediamo come:

<input autofocus="autofocus" />

<button autofocus="autofocus">Prova!</button>

<textarea autofocus="autofocus"></textarea>

Puoi ottenere una maggiore documentazione su questa API a questo indirizzo: http://bit.ly/Xp3pZA.

4. ContextMenu

La nuova API ContextMenu ci permette di modificare il menù contestuale del browser senza necessariamente sovrascrivere gli elementi, ma comodamente aggiungendo degli elementi.

<section contextmenu="ilmioMenu">
  <!-- aggiungo il menu -->
  <menu type="context" id="ilmioMenu">
    <menuitem label="Ricarica il post" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>
    <menu label="Condividi su..." icon="/images/share_icon.gif">
      <menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ':  ' + window.location.href);"></menuitem>
      <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
    </menu>
  </menu>
</section>

Maggiori informazioni a: http://bit.ly/Qtc4YU.

5. window.postMessage

L'API postMessage, che è anche stata sostenuta da IE8, consente l'invio di messaggi tra le finestre e gli elementi dell'iFrame.

// Dalla finestra iframe del dominio principale, invio un messaggio alla finestra iframe ospitata su un altro dominio
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("Questo è un messaggio dal primo dominio!");
// Recupero il messaggio dalla finestra iFrame del secondo dominio
window.addEventListener("message", function(event) {
  // Controllo la provenienza del messaggio
  if(event.origin == "http://www.lucapipolo.it") {
    // Stampo il messaggio
    console.log(event.data);
    // Invio la ricevuta
    event.source.postMessage("Il messaggio è arrivato!");
  }
]);

Ecco giunti alla fine di questo articolo. Vi lascio con un'ultima ma importantissima nota: controllate sempre la compatibilità con i browser prima di adoperare una qualsiasi API! E, sopratutto, leggete le documentazioni ufficiali prima di partire in quarta, eviterete tanti guai futuri!

venerdì 9 novembre 2012