ALCUNE API HTML5 UTILI

Quando si sente parlare di HTML5, molte sono le persone che non sanno descriverne la vera utilità e molte di più sono quelle che ancora non hanno letto ne usato le API introdotte.
Questo post vuole mostrare agli sviluppatori alcune utili API HTML5, ed è scritto per incoraggiare l’utilizzo di questa nuova tecnologia.
Nonostante le molte funzionalità HTML5 siano implementate da tempo nei browser moderni, molti sviluppatori ancora ignorano le potenzialità offerte da questa nuova versione.

Element.classList

Questa classe ci fornisce la maggior parte delle librerie utilizzate dagli sviluppatori negli ultimi anni mediante javascript. Ci consente di aggiungere, rimuovere,  controllare e disabilitare le classi di un elemento html.
Struttura:

 {
	length: {number}, /* # of class on this element */
	add: function() { [native code] },
	contains: function() { [native code] },
	item: function() { [native code] }, /* by index */
	remove: function() { [native code] },
	toggle: function() { [native code] }
}

Esempi:

// Add a class to an element
myElement.classList.add("newClass");

// Remove a class to an element
myElement.classList.remove("existingClass");

// Check for existence
myElement.classList.contains("oneClass");

// Toggle a class (add/remove)
myElement.classList.toggle("anotherClass");

ContextMenu API

Come potrete immaginare questa API ci consente di aggiungere voci al menu di contesto nel nostro browser! Si tratta del menu che appare ogni qual volta facciamo click destro su un elemento della pagina.

<section contextmenu="mymenu">
  <!--
    For the purpose of cleanliness,
    I'll put my menu inside the element that will use it
  -->

  <!-- add the menu -->
  <menu type="context" id="mymenu">
	  <menuitem label="Refresh Post" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>
	  <menu label="Share on..." 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>

Element.dataset

Le API dataset consentono allo sviluppatore di ottenere e impostare l’attributo data-:


/*  Assuming element:

	<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>

*/

// Get the element
var element = document.getElementById("myDiv");

// Get the id
var id = element.dataset.id;

// Retrieves "data-my-custom-key"
var customKey = element.dataset.myCustomKey;

// Sets the value to something else
element.dataset.myCustomKey = "Some other value";

	// Element becomes:
	//    <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="Some other value"></div>

window.postMessage API

Le API postMessage, che sono state sviluppate e supportate in IE8 per anni, permettono di inviare messaggi tra IFRAME element.

I messaggi possono essere solamente stringhe, ma è possibile utilizzare come sempre JSON.stringify e JSON.parse per strutture dati diverse.

// From window or frame on domain 1, send a message to the iframe which hosts another domain
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("Hello from the first window!");

// From inside the iframe on different host, receive message
window.addEventListener("message", function(event) {
 // Make sure we trust the sending domain
 if(event.origin == "http://davidwalsh.name") {
 // Log out the message
 console.log(event.data);

 // Send a message back
 event.source.postMessage("Hello back!");
 }
]);

Attributo autofocus

Auesto attributo permette di ottenere l’autofocus dell’elemento HTML selezionato, al caricamento della pagina:

<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell'universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.