Skip to main content

Introduzione a HTML 5: le novità di JavaScript

Negli ultimi mesi abbiamo scritto alcuni post per approfondire le novità presenti in HTML 5 e CSS 3.

Passiamo ora a una panoramica delle principali novità disponibili in JavaScript, che ci permettono di sfruttare al massimo questa tecnologia.

Aggiungere eventi JavaScript

Come per il CSS, partiamo da un piccolo riepilogo su come aggiungere JavaScript alla nostra pagina HTML.

La modalità più semplice, più diffusa e la più sconsigliata è il JavaScript cosiddetto inline o intrusive che consiste nell’aggiungere attributi ai nostri elementi:

<div>
 <img onclick="alert('Hai cliccato questa immagine!') src="..." alt="..." />
</div>

Questo sistema è da evitare perchè:

  • allunga il nostro documento HTML, che invece dovrebbe racchiudere solo le informazioni di contenuto
  • ci impedisce di avere tutto il JavaScript in un punto unico, in modo da poter avere eventi e funzioni più facilmente sott’occhio
  • è più difficile da estendere contemporaneamente a diversi elementi

E’ preferibile invece aggiungere il tutto dall’esterno, ad esempio nell’head del documento o ancora meglio in un file JavaScript esterno.

<head>
 ...
 <script>
 function showAlert(){
   alert("Hai cliccato questa immagine");
 }
 function addClickToImg(){
   myImg = document.getElementById('myImg');
   myImg.addEventListener('click','showAlert',false);
 }
 window.addEventListener('load','addClickToImg',false);
 </script>
</head>
<body>
 ...
 <img id="myImg" src="..." alt="..." />
</body>

Il concetto di base è identificare l’elemento (qui abbiamo usato un ID, ma vedremo tra breve che ci sono altri modi) e assegnare a tale elemento un evento da monitorare tramite la funzione addEventListener. La funzione accetta come parametri:

  • l’evento da monitorare
  • la funzione da eseguire quando l’evento si realizza
  • l’opzione di fermare o meno l’evento in caso di eventi multipli

Inoltre, tale assegnazione deve essere fatta solo dopo che l’elemento è stato creato, quindi ecco il perchè dell’ulteriore comando

window.addEventListener('load','addClickToImg',false);

In tal modo l’ordine di esecuzione è il seguente:

  1. la finestra viene caricata completamente, quindi viene invocato l’evento load associato alla finestra (oggetto “window“)
  2. a tale evento è associata la funzione addClickToImg che viene quindi eseguita
  3. la funzione addClickToImg aggiunge un event listener al click sull’elemento myImg
  4. da quel momento in poi, quando l’utente clicca su quella immagine verrà avviata la funzione showAlert

Ovviamente, nel caso di un semplice alert, questo sistema sembra eccessivamente complesso.

Ma non appena la logica JavaScript si espande, questa struttura diventerà molto più gestibile rispetto all’alternativa.

Vi assicuro che, con le novità che andremo a scoprire presto, vi verrà senz’altro voglia di espandere la logica del vostro JavaScript.

Come ultima nota, ricordatevi che per inserire un file JavaScript esterno la sintassi è la seguente:

<script src="mycode.js"></script>

Nuovi selettori

Le funzioni di base JavaScript per individuare un elemento sono le seguenti:

  • getElementById
  • getElementsByTagName
  • getElementsByClassName

che si spiegano abbastanza da soli.

A questi si aggiungono:

  • querySelector, che mi permette di utilizzare un qualsiasi selettore CSS per individuare un elemento (in caso siano più di uno, prende solo il primo)
  • querySelectorAll, che è uguale al precedente ma restituisce tutti gli elementi individuati.

La cosa più interessante è che tutte queste funzioni possono essere concatenate, ad esempio:

myImg = document.getElementById(“main_section”).querySelector(“img:first-child”);

Nuove librerie

Con HTML 5 vengono rilasciate una serie di nuove librerie (API) JavaScript che ci offrono una interessantissima varietà di funzionalità aggiuntive.

Vediamo un breve sommario di queste librerie.

  • Canvas API: con questa libreria possiamo disegnare, e creare quindi giochi, animazioni, grafiche avanzate.
  • Drag and Drop API: per gestire il drag and drop nelle nostre applicazioni web.
  • Geolocation API: ora possiamo identificare la posizione dello strumento che ci sta navigando, sia tramite GPS (per i dispositivi che lo supportano) sia tramite la rete.
  • Web Storage API: divisa tra session storage e local storage, è sostanzialmente una evoluzione del concetto dei cookies in un vero e proprio spazio (gestito interamente dal browser) dove poter salvare i dati delle applicazioni.
  • Indexed Database API: il complemento del Web Storage, ci offre un database strutturato per le nostre applicazioni web.
  • File APIs: diverse librerie per leggere e scrivere file e cartelle locali.
  • XMLHttpRequest API: non è una novita – dato che tutta la rivoluzione AJAX si basa su questa libreria – ma la versione 2 è una evoluzione rispetto alla precedente
  • Cross Document Messaging API: per gestire comunicazioni tra diverse applicazioni (es. tra diverse finestre aperte sul nostro browser).
  • Web Sockets API: ora con JavaScript possiamo aprire dei canali (sockets) per avere una comunicazione bidirezionale con il server;. Particolarmente utile per applicazioni che hanno bisogno di aggiornamento real-time (push).
  • Web Workers API: gestisce più processi JavaScript contemporanei.
  • History API: una libreria per gestire dettagliatamente la “cronologia” del browser. Particolarmente utile per avere una cronologia corretta anche nel caso di aggiornamenti via Ajax
  • Offline API: una gestione avanzata della cache per ottenere la visualizzazione offline delle nostre applicazioni (e quindi completare il passaggio che può rendere una applicazione web totalmente idonea a sostituire una applicazione tradizionale).
  • Form API: controlli avanzati e nativi per gestire la validazione delle form
  • Audio e Video API: controlli per gestire la riproduzione Audio e Video nativamente introdotta in HTML 5.

Conclusioni

Come potete vedere, ce n’è davvero per tutti i gusti.

In questo momento più che mai conoscere a fondo JavaScript può portare le nostre applicazioni web a un livello superiore.

Va tenuto inoltre presente che esistono dei framework JavaScript che ci semplificano il lavoro creando scorciatoie verso i comandi e le struttura più complicate.

Nei prossimi post approfondiremo, in ordine sparso, alcune delle API che riteniamo più valide e più utili, in modo da scendere nel dettaglio tecnico e vedere cosa si può fare.