HTML5 - Guida rapida

HTML5 è la prossima importante revisione dello standard HTML che sostituisce HTML 4.01, XHTML 1.0 e XHTML 1.1. HTML5 è uno standard per la strutturazione e la presentazione di contenuti sul World Wide Web.

HTML5 è una collaborazione tra il World Wide Web Consortium (W3C) e il Web Hypertext Application Technology Working Group (WHATWG).

Il nuovo standard incorpora funzionalità come la riproduzione di video e il trascinamento della selezione che in precedenza dipendevano da plug-in di browser di terze parti come Adobe Flash, Microsoft Silverlight e Google Gears.

Supporto browser

Le ultime versioni di Apple Safari, Google Chrome, Mozilla Firefox e Opera supportano tutte molte funzionalità HTML5 e Internet Explorer 9.0 avrà anche il supporto per alcune funzionalità HTML5.

I browser Web mobili preinstallati su iPhone, iPad e telefoni Android hanno tutti un eccellente supporto per HTML5.

Nuove caratteristiche

HTML5 introduce una serie di nuovi elementi e attributi che possono aiutarti nella creazione di siti web moderni. Ecco una serie di alcune delle funzionalità più importanti introdotte in HTML5.

New Semantic Elements - Questi sono come <header>, <footer> e <section>.
Forms 2.0 - Miglioramenti ai moduli Web HTML in cui sono stati introdotti nuovi attributi per il tag <input>.
Persistent Local Storage - Per ottenere senza ricorrere a plugin di terze parti.
WebSocket - Una tecnologia di comunicazione bidirezionale di nuova generazione per applicazioni web.
Server-Sent Events - HTML5 introduce eventi che fluiscono dal server web ai browser web e sono chiamati eventi inviati dal server (SSE).
Canvas - Supporta una superficie di disegno bidimensionale che puoi programmare con JavaScript.
Audio & Video - Puoi incorporare audio o video nelle tue pagine web senza ricorrere a plugin di terze parti.
Geolocation - Ora i visitatori possono scegliere di condividere la loro posizione fisica con la tua applicazione web.
Microdata - Ciò ti consente di creare i tuoi vocabolari oltre l'HTML5 ed estendere le tue pagine web con semantica personalizzata.
Drag and drop - Trascina e rilascia gli elementi da una posizione a un'altra sulla stessa pagina web.

Retrocompatibilità

HTML5 è progettato, per quanto possibile, per essere retrocompatibile con i browser web esistenti. Le sue nuove funzionalità sono state costruite su funzionalità esistenti e consentono di fornire contenuti di riserva per i browser meno recenti.

Si consiglia di rilevare il supporto per le singole funzionalità HTML5 utilizzando poche righe di JavaScript.

Se non hai familiarità con nessuna versione precedente di HTML, ti consiglio di consultare il nostro HTML Tutorial prima di esplorare le funzionalità di HTML5.

Il linguaggio HTML 5 ha una sintassi HTML "personalizzata" che è compatibile con i documenti HTML 4 e XHTML1 pubblicati sul Web, ma non è compatibile con le caratteristiche SGML più esoteriche di HTML 4.

HTML 5 non ha le stesse regole di sintassi di XHTML dove avevamo bisogno di nomi di tag minuscoli, citando i nostri attributi, un attributo doveva avere un valore e chiudere tutti gli elementi vuoti.

HTML5 è dotato di molta flessibilità e supporta le seguenti funzionalità:

Nomi di tag maiuscoli.
Le virgolette sono facoltative per gli attributi.
I valori degli attributi sono facoltativi.
La chiusura degli elementi vuoti è facoltativa.

Il DOCTYPE

I DOCTYPE nelle versioni precedenti di HTML erano più lunghi perché il linguaggio HTML era basato su SGML e quindi richiedeva un riferimento a un DTD.

Gli autori HTML 5 utilizzerebbero una sintassi semplice per specificare DOCTYPE come segue:

<!DOCTYPE html>

La sintassi precedente non fa distinzione tra maiuscole e minuscole.

Codifica dei caratteri

Gli autori di HTML 5 possono utilizzare una sintassi semplice per specificare la codifica dei caratteri come segue:

<meta charset = "UTF-8">

La sintassi precedente non fa distinzione tra maiuscole e minuscole.

Il tag <script>

È pratica comune aggiungere un attributo di tipo con un valore di "text / javascript" agli elementi di script come segue:

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5 rimuove le informazioni aggiuntive richieste e puoi usare semplicemente la seguente sintassi:

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

Il tag <link>

Finora stavi scrivendo <link> come segue -

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5 rimuove le informazioni aggiuntive richieste e puoi semplicemente utilizzare la seguente sintassi:

<link rel = "stylesheet" href = "stylefile.css">

Elementi HTML5

Gli elementi HTML5 vengono contrassegnati utilizzando tag di inizio e tag di fine. I tag sono delimitati utilizzando parentesi angolari con il nome del tag in mezzo.

La differenza tra tag di inizio e tag di fine è che quest'ultimo include una barra prima del nome del tag.

Di seguito è riportato l'esempio di un elemento HTML5:

<p>...</p>

I nomi dei tag HTML5 non fanno distinzione tra maiuscole e minuscole e possono essere scritti in maiuscolo o in maiuscolo, sebbene la convenzione più comune sia quella di restare con le minuscole.

La maggior parte degli elementi contiene alcuni contenuti come <p> ... </p> contiene un paragrafo. Alcuni elementi, tuttavia, non possono contenere alcun contenuto e questi sono noti come elementi nulli. Per esempio,br, hr, link, meta, eccetera.

Ecco un elenco completo di elementi HTML5 .

Attributi HTML5

Gli elementi possono contenere attributi utilizzati per impostare varie proprietà di un elemento.

Alcuni attributi sono definiti globalmente e possono essere utilizzati su qualsiasi elemento, mentre altri sono definiti solo per elementi specifici. Tutti gli attributi hanno un nome e un valore e hanno l'aspetto mostrato di seguito nell'esempio.

Di seguito è riportato l'esempio di un attributo HTML5 che illustra come contrassegnare un elemento div con un attributo denominato class utilizzando un valore di "example" -

<div class = "example">...</div>

Gli attributi possono essere specificati solo all'interno dei tag di inizio e non devono mai essere utilizzati nei tag di fine.

Gli attributi HTML5 non fanno distinzione tra maiuscole e minuscole e possono essere scritti in maiuscolo o in maiuscolo, sebbene la convenzione più comune sia quella di restare con le minuscole.

Ecco un elenco completo degli attributi HTML5 .

Documento HTML5

I seguenti tag sono stati introdotti per una migliore struttura:

section- Questo tag rappresenta un documento generico o una sezione dell'applicazione. Può essere utilizzato insieme a h1-h6 per indicare la struttura del documento.
article - Questo tag rappresenta una parte indipendente del contenuto di un documento, come un post di blog o un articolo di giornale.
aside - Questo tag rappresenta una parte di contenuto che è solo leggermente correlata al resto della pagina.
header - Questo tag rappresenta l'intestazione di una sezione.
footer - Questo tag rappresenta un piè di pagina per una sezione e può contenere informazioni sull'autore, informazioni sul copyright, ecc.
nav - Questo tag rappresenta una sezione del documento destinata alla navigazione.
dialog - Questo tag può essere utilizzato per contrassegnare una conversazione.
figure - Questo tag può essere utilizzato per associare una didascalia ad alcuni contenuti incorporati, come un'immagine o un video.

Il markup per un documento HTML 5 sarebbe simile al seguente:

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>

<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>HTML5 Document Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

Produrrà il seguente risultato:

Come spiegato nel capitolo precedente, gli elementi possono contenere attributi utilizzati per impostare varie proprietà di un elemento.

Di seguito è riportato l'esempio di un attributo HTML5 che illustra come contrassegnare un elemento div con un attributo denominato class utilizzando un valore di "esempio" -

<div class = "example">...</div>

Gli attributi possono essere specificati solo all'interno di start tags e non deve mai essere utilizzato in end tags.

Gli attributi HTML5 non fanno distinzione tra maiuscole e minuscole e possono essere scritti in maiuscolo o in maiuscolo, sebbene la convenzione più comune sia quella di restare con le minuscole.

Attributi standard

Gli attributi elencati di seguito sono supportati da quasi tutti i tag HTML 5.

Attributo	Opzioni	Funzione
chiave di accesso	Definito dall'utente	Specifica una scorciatoia da tastiera per accedere a un elemento.
allineare	destra, sinistra, centro	Allinea orizzontalmente i tag
sfondo	URL	Posiziona un'immagine di sfondo dietro un elemento
bgcolor	valori numerici, esadecimali, RGB	Posiziona un colore di sfondo dietro un elemento
classe	Definito dall'utente	Classifica un elemento da utilizzare con Cascading Style Sheets.
contenteditable	vero falso	Specifica se l'utente può modificare o meno il contenuto dell'elemento.
menù contestuale	ID menu	Specifica il menu contestuale per un elemento.
data-XXXX	Definito dall'utente	Attributi personalizzati. Gli autori di un documento HTML possono definire i propri attributi. Deve iniziare con "data-".
trascinabile	vero, falso, auto	Specifica se un utente può trascinare o meno un elemento.
altezza	Valore numerico	Specifica l'altezza di tabelle, immagini o celle di tabella.
nascosto	nascosto	Specifica se l'elemento deve essere visibile o meno.
id	Definito dall'utente	Denomina un elemento da utilizzare con Cascading Style Sheets.
articolo	Elenco degli elementi	Utilizzato per raggruppare elementi.
itemprop	Elenco di elementi	Utilizzato per raggruppare gli elementi.
controllo ortografico	vero falso	Specifica se l'elemento deve avere il controllo ortografico o grammaticale.
stile	Foglio di stile CSS	Specifica uno stile in linea per un elemento.
soggetto	L'utente definisce l'ID	Specifica l'elemento corrispondente dell'elemento.
tabindex	Numero di tabulazione	Specifica l'ordine di tabulazione di un elemento.
titolo	Definito dall'utente	Titolo "pop-up" per i tuoi elementi.
valign	in alto, al centro, in basso	Allinea verticalmente i tag all'interno di un elemento HTML.
larghezza	Valore numerico	Specifica la larghezza di tabelle, immagini o celle di tabella.

Per un elenco completo dei tag HTML5 e degli attributi correlati, consulta il nostro riferimento ai tag HTML5 .

Attributi personalizzati

Una nuova funzionalità introdotta in HTML 5 è l'aggiunta di attributi di dati personalizzati.

Un attributo di dati personalizzato inizia con data-e sarebbe denominato in base alle tue esigenze. Ecco un semplice esempio:

<div class = "example" data-subject = "physics" data-level = "complex">
   ...
</div>

Il codice sopra sarà HTML5 perfettamente valido con due attributi personalizzati chiamati datasubject e data-level . Saresti in grado di ottenere i valori di questi attributi utilizzando API JavaScript o CSS in modo simile a quello che ottieni per gli attributi standard.

Quando gli utenti visitano il tuo sito web, eseguono varie attività come fare clic su testo, immagini e link, passare il mouse su elementi definiti, ecc. Questi sono esempi di ciò che JavaScript chiama events.

Possiamo scrivere i nostri gestori di eventi in Javascript o VBscript e puoi specificare questi gestori di eventi come valore dell'attributo del tag di evento. La specifica HTML5 definisce vari attributi dell'evento come elencato di seguito:

Possiamo utilizzare il seguente insieme di attributi per attivare qualsiasi javascript o vbscript codice dato come valore, quando si verifica un evento che si verifica per qualsiasi elemento HTML5.

Tratteremmo eventi specifici dell'elemento discutendo questi elementi in dettaglio nei capitoli successivi.

Attributo	Valore	Descrizione
disconnesso	script	Si attiva quando il documento va offline
onabort	script	Trigger su un evento di interruzione
onafterprint	script	Si attiva dopo la stampa del documento
onbeforeonload	script	Si attiva prima del caricamento del documento
onbeforeprint	script	Si attiva prima che il documento venga stampato
sfocato	script	Si attiva quando la finestra perde il focus
oncanplay	script	Si attiva quando il supporto può iniziare la riproduzione, ma potrebbe essere necessario interrompere il buffering
oncanplaythrough	script	Si attiva quando i media possono essere riprodotti fino alla fine, senza fermarsi per il buffering
onchange	script	Si attiva quando un elemento cambia
al clic	script	Si attiva con un clic del mouse
oncontextmenu	script	Si attiva quando viene attivato un menu contestuale
ondblclick	script	Trigger su un doppio clic del mouse
ondrag	script	Si attiva quando un elemento viene trascinato
ondragend	script	Si attiva alla fine di un'operazione di trascinamento
ondragenter	script	Si attiva quando un elemento è stato trascinato su una destinazione di rilascio valida
ondragleave	script	Si attiva quando un elemento lascia un obiettivo di rilascio valido
ondragover	script	Si attiva quando un elemento viene trascinato su una destinazione di rilascio valida
ondragstart	script	Trigger all'inizio di un'operazione di trascinamento
ondrop	script	Si attiva quando l'elemento trascinato viene rilasciato
ondurationchange	script	Si attiva quando la lunghezza del supporto viene modificata
svuotato	script	Si attiva quando un elemento di una risorsa multimediale diventa improvvisamente vuoto.
onended	script	Si attiva quando il supporto raggiunge la fine
onerror	script	Si attiva quando si verifica un errore
onfocus	script	Si attiva quando la finestra diventa attiva
onformchange	script	Si attiva quando un modulo cambia
onforminput	script	Si attiva quando un modulo riceve l'input dell'utente
onhaschange	script	Si attiva quando il documento ha subito modifiche
oninput	script	Si attiva quando un elemento riceve l'input dell'utente
oninvalid	script	Si attiva quando un elemento non è valido
onkeydown	script	Si attiva quando viene premuto un tasto
onkeypress	script	Si attiva quando un tasto viene premuto e rilasciato
onkeyup	script	Si attiva quando viene rilasciato un tasto
onload	script	Si attiva quando il documento viene caricato
onloadeddata	script	Si attiva quando vengono caricati i dati del supporto
onloadedmetadata	script	Si attiva quando vengono caricati la durata e altri dati multimediali di un elemento multimediale
onloadstart	script	Si attiva quando il browser inizia a caricare i dati multimediali
onmessage	script	Si attiva quando il messaggio viene attivato
onmousedown	script	Si attiva quando viene premuto un pulsante del mouse
onmousemove	script	Si attiva quando il puntatore del mouse si sposta
onmouseout	script	Si attiva quando il puntatore del mouse esce da un elemento
onmouseover	script	Si attiva quando il puntatore del mouse si sposta su un elemento
onmouseup	script	Si attiva quando viene rilasciato un pulsante del mouse
onmousewheel	script	Si attiva quando la rotellina del mouse viene ruotata
onoffline	script	Si attiva quando il documento va offline
onoine	script	Si attiva quando il documento è online
ononline	script	Si attiva quando il documento è online
onpagehide	script	Si attiva quando la finestra è nascosta
onpageshow	script	Si attiva quando la finestra diventa visibile
in pausa	script	Si attiva quando i dati multimediali vengono messi in pausa
onplay	script	Si attiva quando i dati multimediali stanno per iniziare la riproduzione
onplaying	script	Si attiva quando inizia la riproduzione dei dati multimediali
onpopstate	script	Si attiva quando cambia la cronologia della finestra
onprogress	script	Si attiva quando il browser sta recuperando i dati multimediali
onratechange	script	Si attiva quando la velocità di riproduzione dei dati multimediali cambia
onreadystatechange	script	Si attiva quando cambia lo stato di pronto
onredo	script	Si attiva quando il documento esegue una ripetizione
onresize	script	Si attiva quando la finestra viene ridimensionata
onscroll	script	Si attiva quando viene fatto scorrere la barra di scorrimento di un elemento
onseeked	script	Si attiva quando l'attributo di ricerca di un elemento multimediale non è più vero e la ricerca è terminata
alla ricerca	script	Si attiva quando l'attributo di ricerca di un elemento multimediale è vero e la ricerca è iniziata
onselect	script	Si attiva quando viene selezionato un elemento
onstalled	script	Si attiva quando si verifica un errore durante il recupero dei dati multimediali
onstorage	script	Si attiva quando viene caricato un documento
onsubmit	script	Si attiva quando viene inviato un modulo
onsuspend	script	Si attiva quando il browser sta recuperando i dati multimediali, ma si è arrestato prima che l'intero file multimediale venisse recuperato
ontimeupdate	script	Si attiva quando il supporto cambia la sua posizione di riproduzione
onundo	script	Si attiva quando un documento esegue un annullamento
onunload	script	Si attiva quando l'utente lascia il documento
onvolumechange	script	Si attiva quando il supporto cambia il volume, anche quando il volume è impostato su "muto"
in attesa	script	Si attiva quando la riproduzione del supporto viene interrotta, ma dovrebbe riprendere

Web Forms 2.0 è un'estensione delle funzionalità dei moduli presenti in HTML4. Gli elementi e gli attributi del modulo in HTML5 forniscono un maggior grado di markup semantico rispetto a HTML4 e ci liberano da una grande quantità di noiosi script e stili richiesti in HTML4.

L'elemento <input> in HTML4

Gli elementi di input HTML4 utilizzano l'estensione type attributo per specificare il tipo di dati. HTML4 fornisce i seguenti tipi:

Sr.No.	Tipo e descrizione
1	text Un campo di testo in formato libero, nominalmente privo di interruzioni di riga.
2	password Un campo di testo in formato libero per informazioni riservate, nominalmente privo di interruzioni di riga.
3	checkbox Un insieme di zero o più valori da un elenco predefinito.
4	radio Un valore enumerato.
5	submit Una forma gratuita di pulsante avvia l'invio del modulo.
6	file Un file arbitrario con un tipo MIME e facoltativamente un nome file.
7	image Una coordinata, relativa alla dimensione di una particolare immagine, con la semantica extra che deve essere l'ultimo valore selezionato e avvia l'invio del modulo.
8	hidden Una stringa arbitraria che normalmente non viene visualizzata all'utente.
9	select Un valore enumerato, molto simile al tipo di radio.
10	textarea Un campo di testo in formato libero, nominalmente senza limitazioni di interruzione di riga.
11	button Una forma gratuita di pulsante che può avviare qualsiasi evento relativo al pulsante.

Di seguito è riportato il semplice esempio di utilizzo di etichette, pulsanti di opzione e pulsanti di invio:

... 
<form action = "http://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form> 
 ...

L'elemento <input> in HTML5

Oltre agli attributi sopra menzionati, gli elementi di input HTML5 hanno introdotto diversi nuovi valori per typeattributo. Questi sono elencati di seguito.

NOTE - Prova tutti i seguenti esempi utilizzando l'ultima versione di Opera browser.

Sr.No.	Tipo e descrizione
1	appuntamento Una data e un'ora (anno, mese, giorno, ora, minuto, secondo, frazioni di secondo) codificate secondo ISO 8601 con il fuso orario impostato su UTC.
2	datetime-local Una data e un'ora (anno, mese, giorno, ora, minuti, secondi, frazioni di secondo) codificate secondo ISO 8601, senza informazioni sul fuso orario.
3	Data Una data (anno, mese, giorno) codificata secondo ISO 8601.
4	mese Una data composta da un anno e un mese codificati secondo ISO 8601.
5	settimana Una data composta da un anno e un numero di settimana codificati secondo ISO 8601.
6	tempo Un tempo (ora, minuti, secondi, frazioni di secondo) codificato secondo ISO 8601.
7	numero Accetta solo valori numerici. L'attributo step specifica la precisione, il valore predefinito è 1.
8	gamma Il tipo di intervallo viene utilizzato per i campi di input che dovrebbero contenere un valore da un intervallo di numeri.
9	e-mail Accetta solo valore e-mail. Questo tipo viene utilizzato per i campi di input che dovrebbero contenere un indirizzo e-mail. Se provi a inviare un semplice testo, forza di inserire solo l'indirizzo email nel formato [email protected].
10	url Accetta solo il valore dell'URL. Questo tipo viene utilizzato per i campi di input che dovrebbero contenere un indirizzo URL. Se provi a inviare un testo semplice, viene forzato l'inserimento solo dell'indirizzo URL nel formato http://www.example.com o nel formato http://example.com.

L'elemento <output>

HTML5 ha introdotto un nuovo elemento <output> che viene utilizzato per rappresentare il risultato di diversi tipi di output, come l'output scritto da uno script.

Puoi usare il file forattributo per specificare una relazione tra l'elemento di output e altri elementi nel documento che hanno influenzato il calcolo (ad esempio, come input o parametri). Il valore dell'attributo for è un elenco separato da spazi di ID di altri elementi.

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         
         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
		
   </body>
</html>

Produrrà il seguente risultato:

L'attributo segnaposto

HTML5 ha introdotto un nuovo attributo chiamato placeholder. Questo attributo sugli elementi <input> e <textarea> fornisce un suggerimento all'utente su cosa può essere inserito nel campo. Il testo segnaposto non deve contenere ritorni a capo o avanzamenti riga.

Ecco la semplice sintassi per l'attributo segnaposto:

<input type = "text" name = "search" placeholder = "search the web"/>

Questo attributo è supportato solo dalle ultime versioni dei browser Mozilla, Safari e Crome.

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "[email protected]"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

Questo produrrà il seguente risultato:

L'attributo autofocus

Questo è un semplice pattern in un unico passaggio, facilmente programmabile in JavaScript al momento del caricamento del documento, focalizza automaticamente un particolare campo del modulo.

HTML5 ha introdotto un nuovo attributo chiamato autofocus che verrebbe utilizzato come segue:

<input type = "text" name = "search" autofocus/>

Questo attributo è supportato solo dalle ultime versioni dei browser Mozilla, Safari e Chrome.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

L'attributo richiesto

Ora non è necessario disporre di JavaScript per le convalide lato client come la casella di testo vuota non verrebbe mai inviata perché HTML5 ha introdotto un nuovo attributo chiamato required che verrebbe utilizzato come segue e insisterebbe per avere un valore -

<input type = "text" name = "search" required/>

Questo attributo è supportato solo dalle ultime versioni dei browser Mozilla, Safari e Chrome.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

Produrrà il seguente risultato:

SVG sta per Scalable Vector Graphics ed è un linguaggio per descrivere la grafica 2D e le applicazioni grafiche in XML e l'XML viene quindi reso da un visualizzatore SVG.

SVG è principalmente utile per diagrammi di tipo vettoriale come grafici a torta, grafici bidimensionali in un sistema di coordinate X, Y ecc.

SVG è diventato una raccomandazione W3C il 14 gennaio 2003 e puoi controllare l'ultima versione della specifica SVG in Specifiche SVG .

Visualizzazione di file SVG

La maggior parte dei browser Web può visualizzare SVG proprio come possono visualizzare PNG, GIF e JPG. Gli utenti di Internet Explorer potrebbero dover installare Adobe SVG Viewer per poter visualizzare SVG nel browser.

Incorporamento di SVG in HTML5

HTML5 consente di incorporare SVG direttamente utilizzando <svg>...</svg> tag che ha la seguente sintassi semplice:

<svg xmlns = "http://www.w3.org/2000/svg">
   ...    
</svg>

Firefox 3.7 ha anche introdotto un'opzione di configurazione ("about: config") in cui è possibile abilitare HTML5 utilizzando i seguenti passaggi:

genere about:config nella barra degli indirizzi di Firefox.
Fai clic su "Starò attento, lo prometto!" sul messaggio di avviso che appare (e assicurati di rispettarlo!).
genere html5.enable nella barra dei filtri nella parte superiore della pagina.
Al momento sarebbe disabilitato, quindi fai clic per impostare il valore su true.

Ora il tuo parser HTML5 di Firefox dovrebbe essere abilitato e dovresti essere in grado di sperimentare i seguenti esempi.

HTML5 - SVG Circle

Di seguito è riportata la versione HTML5 di un esempio SVG che disegnerebbe un cerchio utilizzando il tag <circle> -

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Circle</h2>
		
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
      </svg>
   </body>
</html>

Ciò produrrebbe il seguente risultato nell'ultima versione di Firefox abilitata per HTML5.

HTML5 - Rettangolo SVG

Di seguito è riportata la versione HTML5 di un esempio SVG che disegnerebbe un rettangolo utilizzando il tag <rect> -

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Rectangle</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <rect id = "redrect" width = "300" height = "100" fill = "red" />
      </svg>
   </body>
</html>

Ciò produrrebbe il seguente risultato nell'ultima versione di Firefox abilitata per HTML5.

HTML5 - Linea SVG

Di seguito è riportata la versione HTML5 di un esempio SVG che traccerebbe una linea utilizzando il tag <line> -

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Line</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <line x1 = "0" y1 = "0" x2 = "200" y2 = "100" 
            style = "stroke:red;stroke-width:2"/>
      </svg>
   </body>
</html>

Puoi usare il file style attributo che ti consente di impostare ulteriori informazioni di stile come i colori di tratto e riempimento, larghezza del tratto, ecc.

Ciò produrrebbe il seguente risultato nell'ultima versione di Firefox abilitata per HTML5.

HTML5 - Ellisse SVG

Di seguito è riportata la versione HTML5 di un esempio SVG che disegnerebbe un'ellisse utilizzando il tag <ellipse> -

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Ellipse</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <ellipse cx = "100" cy = "50" rx = "100" ry = "50" fill = "red" />
      </svg>
		
   </body>
</html>

Ciò produrrebbe il seguente risultato nell'ultima versione di Firefox abilitata per HTML5.

HTML5 - SVG Polygon

Di seguito è riportata la versione HTML5 di un esempio SVG che disegnerebbe un poligono utilizzando il tag <polygon> -

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Polygon</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polygon  points = "20,10 300,20, 170,50" fill = "red" />
      </svg>
   </body>
</html>

Ciò produrrebbe il seguente risultato nell'ultima versione di Firefox abilitata per HTML5.

HTML5 - SVG Polyline

Di seguito è riportata la versione HTML5 di un esempio SVG che disegnerebbe una polilinea utilizzando il tag <polyline> -

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Polyline</h2>
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polyline points = "0,0 0,20 20,20 20,40 40,40 40,60" fill = "red" />
      </svg>
   </body>
</html>

Ciò produrrebbe il seguente risultato nell'ultima versione di Firefox abilitata per HTML5.

HTML5 - Sfumature SVG

Segue la versione HTML5 di un esempio SVG che disegnerebbe un'ellisse usando il tag <ellipse> e userebbe il tag <radialGradient> per definire un gradiente radiale SVG.

Allo stesso modo, puoi usare il tag <linearGradient> per creare un gradiente lineare SVG.

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Gradient Ellipse</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <defs>
            <radialGradient id="gradient" cx = "50%" cy = "50%" r = "50%" fx = "50%" 
               fy = "50%">
               <stop offset = "0%" style = "stop-color:rgb(200,200,200); stop-opacity:0"/>
               <stop offset = "100%" style = "stop-color:rgb(0,0,255); stop-opacity:1"/>
            </radialGradient>
         </defs>
         <ellipse cx = "100" cy = "50" rx = "100" ry = "50" 
            style = "fill:url(#gradient)" />
      </svg>
		
   </body>
</html>

Ciò produrrebbe il seguente risultato nell'ultima versione di Firefox abilitata per HTML5.

HTML5 - SVG Star

Di seguito è riportata la versione HTML5 di un esempio SVG che disegnerebbe una stella usando il tag <polygon>.

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>	
      <h2 align = "center">HTML5 SVG Star</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polygon points = "100,10 40,180 190,60 10,60 160,180" fill = "red"/>
      </svg>
    </body>
</html>

Ciò produrrebbe il seguente risultato nell'ultima versione di Firefox abilitata per HTML5.

La sintassi HTML di HTML5 consente di utilizzare elementi MathML all'interno di un documento utilizzando i tag <math> ... </math>.

La maggior parte dei browser web può visualizzare tag MathML. Se il tuo browser non supporta il MathML, ti suggerirei di utilizzare l'ultima versione di Firefox.

Esempi MathML

Di seguito è riportato un documento HTML5 valido con MathML -

<!doctype html>

<html>
   <head>
      <meta charset = "UTF-8">
      <title>Pythagorean theorem</title>
   </head>
	
   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
				
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo> = </mo>
				
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>
			
      </math>
   </body>
</html>

Questo produrrà il seguente risultato:

Usare i caratteri MathML

Considera, il seguente è il markup che fa uso dei caratteri & InvisibleTimes; -

<!doctype html>

<html>
   <head>
      <meta charset = "UTF-8">
      <title>MathML Examples</title>
   </head>
	
   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
         <mrow>			
            <mrow>
				
               <msup>
                  <mi>x</mi>
                  <mn>2</mn>
               </msup>
					
               <mo>+</mo>
					
               <mrow>
                  <mn>4</mn>
                  <mo>⁢</mo>
                  <mi>x</mi>
               </mrow>
					
               <mo>+</mo>
               <mn>4</mn>
					
            </mrow>
				
            <mo>=</mo>
            <mn>0</mn>
				 
         </mrow>
      </math>
   </body>
</html>

Ciò produrrebbe il seguente risultato. Se non sei in grado di vedere risultati corretti come x ² + 4x + 4 = 0, usa Firefox 3.5 o versione successiva.

Questo produrrà il seguente risultato:

Esempi di presentazione a matrice

Considera il seguente esempio che verrebbe utilizzato per rappresentare una semplice matrice 2x2:

<!doctype html>

<html>
   <head>
      <meta charset = "UTF-8">
      <title>MathML Examples</title>
   </head>
	
   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
         <mrow>
            <mi>A</mi>
            <mo>=</mo>
			
            <mfenced open = "[" close="]">
			
               <mtable>
                  <mtr>
                     <mtd><mi>x</mi></mtd>
                     <mtd><mi>y</mi></mtd>
                  </mtr>
					
                  <mtr>
                     <mtd><mi>z</mi></mtd>
                     <mtd><mi>w</mi></mtd>
                  </mtr>
               </mtable>
               
            </mfenced>
         </mrow>
      </math>

   </body>
</html>

Questo produrrà il seguente risultato:

Ciò produrrebbe il seguente risultato. Se non riesci a vedere il risultato corretto, utilizza Firefox 3.5 o versione successiva.

HTML5 introduce due meccanismi, simili ai cookie di sessione HTTP, per la memorizzazione dei dati strutturati sul lato client e per superare i seguenti inconvenienti.

I cookie sono inclusi in ogni richiesta HTTP, rallentando così la tua applicazione web trasmettendo gli stessi dati.
I cookie sono inclusi in ogni richiesta HTTP, inviando così dati non crittografati su Internet.
I cookie sono limitati a circa 4 KB di dati. Non abbastanza per memorizzare i dati richiesti.

I due magazzini sono session storage e local storage e sarebbero utilizzati per gestire situazioni diverse.

Le ultime versioni di quasi tutti i browser supportano l'archiviazione HTML5, incluso Internet Explorer.

Archiviazione della sessione

Il Session Storage è progettato per gli scenari in cui l'utente sta effettuando una singola transazione, ma potrebbe eseguire più transazioni in diverse finestre contemporaneamente.

Esempio

Ad esempio, se un utente acquista biglietti aerei in due finestre diverse, utilizzando lo stesso sito. Se il sito utilizzava i cookie per tenere traccia del biglietto che l'utente stava acquistando, quando l'utente faceva clic da una pagina all'altra in entrambe le finestre, il biglietto attualmente acquistato "perdeva" da una finestra all'altra, causando potenzialmente compra due biglietti per lo stesso volo senza davvero accorgertene.

HTML5 introduce l' attributo sessionStorage che verrebbe utilizzato dai siti per aggiungere dati all'archiviazione della sessione e sarà accessibile a qualsiasi pagina dello stesso sito aperta in quella finestra, ovverosession e non appena si chiude la finestra, la sessione andrebbe persa.

Di seguito è riportato il codice che imposta una variabile di sessione e accede a quella variabile:

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( sessionStorage.hits ) {
            sessionStorage.hits = Number(sessionStorage.hits) +1;
         } else {
            sessionStorage.hits = 1;
         }
         document.write("Total Hits :" + sessionStorage.hits );
      </script>
	
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

Questo produrrà il seguente risultato:

Memoria locale

L' archivio locale è progettato per l'archiviazione che si estende su più finestre e dura oltre la sessione corrente. In particolare, le applicazioni Web potrebbero voler memorizzare megabyte di dati utente, come interi documenti creati dall'utente o la cassetta postale di un utente, sul lato client per motivi di prestazioni.

Anche in questo caso, i cookie non gestiscono bene questo caso, perché vengono trasmessi con ogni richiesta.

Esempio

HTML5 introduce l' attributo localStorage che verrebbe utilizzato per accedere all'area di archiviazione locale di una pagina senza limiti di tempo e questa archiviazione locale sarà disponibile ogni volta che useresti quella pagina.

Di seguito è riportato il codice che imposterebbe una variabile di archiviazione locale e accederà a quella variabile ogni volta che si accede a questa pagina, anche la volta successiva, quando si apre la finestra -

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
      </script>
		
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

Questo produrrà il seguente risultato:

Elimina archivio web

La memorizzazione dei dati sensibili sulla macchina locale potrebbe essere pericolosa e potrebbe lasciare una falla di sicurezza.

I dati di archiviazione della sessione verranno eliminati dai browser immediatamente dopo la conclusione della sessione.

Per cancellare un'impostazione di archiviazione locale è necessario chiamare localStorage.remove('key'); dove "chiave" è la chiave del valore che desideri rimuovere. Se vuoi cancellare tutte le impostazioni, devi chiamarelocalStorage.clear() metodo.

Di seguito è riportato il codice che cancellerebbe la memoria locale completa -

<!DOCTYPE HTML>

<html>
   <body>

      <script type = "text/javascript">
         localStorage.clear();

         // Reset number of hits.
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
			
      </script>
		
      <p>Refreshing the page would not to increase hit counter.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

Questo produrrà il seguente risultato:

L'API del database SQL Web non fa effettivamente parte della specifica HTML5, ma è una specifica separata che introduce una serie di API per manipolare i database lato client utilizzando SQL.

Presumo che tu sia un ottimo sviluppatore web e se questo è il caso, senza dubbio, saresti ben consapevole dei concetti SQL e RDBMS. Se vuoi ancora avere una sessione con SQL, puoi seguire il nostro tutorial SQL .

Il database SQL Web funzionerà nell'ultima versione di Safari, Chrome e Opera.

I metodi fondamentali

Ci sono i seguenti tre metodi principali definiti nelle specifiche che tratterò in questo tutorial:

openDatabase - Questo metodo crea l'oggetto database utilizzando il database esistente o creandone uno nuovo.
transaction - Questo metodo ci dà la possibilità di controllare una transazione e di eseguire il commit o il rollback in base alla situazione.
executeSql - Questo metodo viene utilizzato per eseguire la query SQL effettiva.

Database di apertura

Il metodo openDatabase si occupa di aprire un database se già esiste, questo metodo lo creerà se già non esiste.

Per creare e aprire un database, utilizzare il codice seguente:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

Il metodo sopra ha preso i seguenti cinque parametri:

Nome del database
Numero della versione
Descrizione del testo
Dimensioni del database
Richiamata creazione

L'ultimo e il quinto argomento, il callback di creazione verrà chiamato se il database viene creato. Senza questa funzionalità, tuttavia, i database vengono ancora creati al volo e con versione corretta.

Esecuzione di query

Per eseguire una query si utilizza la funzione database.transaction (). Questa funzione necessita di un singolo argomento, che è una funzione che si occupa di eseguire effettivamente la query come segue:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
});

La query precedente creerà una tabella chiamata LOGS nel database "mydb".

Operazione INSERT

Per creare entrate nella tabella aggiungiamo una semplice query SQL nell'esempio sopra come segue:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});

Possiamo trasmettere valori dinamici durante la creazione dell'inserimento come segue:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?'), [e_id, e_log]; 
});

Qui e_id e e_log sono variabili esterne ed executeSql associa ogni elemento nell'argomento dell'array agli "?".

Operazione READ

Per leggere i record già esistenti utilizziamo un callback per acquisire i risultati come segue:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});  

db.transaction(function (tx) { 
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
      var len = results.rows.length, i; 
      msg = "<p>Found rows: " + len + "</p>"; 
      document.querySelector('#status').innerHTML +=  msg; 
  
      for (i = 0; i < len; i++) { 
         alert(results.rows.item(i).log ); 
      } 
  
   }, null); 
});

Esempio finale

Quindi, infine, manteniamo questo esempio in un documento HTML5 completo come segue e proviamo a eseguirlo con il browser Safari.

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 
         var msg; 
    
         db.transaction(function (tx) { 
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
            msg = '<p>Log message created and row inserted.</p>'; 
            document.querySelector('#status').innerHTML =  msg; 
         })

         db.transaction(function (tx) { 
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
               var len = results.rows.length, i; 
               msg = "<p>Found rows: " + len + "</p>"; 
               document.querySelector('#status').innerHTML +=  msg; 
      
               for (i = 0; i < len; i++) { 
                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; 
                  document.querySelector('#status').innerHTML +=  msg; 
               } 
            }, null); 
         }); 
      </script> 
   </head> 
  
   <body> 
      <div id = "status" name = "status">Status Message</div> 
   </body> 
</html>

Questo produrrà il seguente risultato:

Le applicazioni web convenzionali generano eventi che vengono inviati al server web. Ad esempio, un semplice clic su un collegamento richiede una nuova pagina dal server.

Il tipo di eventi che fluiscono dal browser web al server web può essere chiamato eventi inviati dal client.

Insieme a HTML5, WHATWG Web Applications 1.0 introduce eventi che fluiscono dal server web ai browser web e sono chiamati eventi inviati dal server (SSE). Utilizzando SSE puoi inviare continuamente eventi DOM dal tuo server web al browser del visitatore.

L'approccio dello streaming di eventi apre una connessione persistente al server, inviando dati al client quando sono disponibili nuove informazioni, eliminando la necessità di polling continuo.

Gli eventi inviati dal server standardizzano il modo in cui trasmettiamo i dati dal server al client.

Applicazione Web per SSE

Per utilizzare gli eventi inviati dal server in un'applicazione Web, è necessario aggiungere un elemento <eventsource> al documento.

Il src l'attributo dell'elemento <eventsource> dovrebbe puntare a un URL che dovrebbe fornire una connessione HTTP persistente che invia un flusso di dati contenente gli eventi.

L'URL punta a uno script PHP, PERL o qualsiasi script Python che si occuperà di inviare i dati degli eventi in modo coerente. Di seguito è riportato un semplice esempio di applicazione web che richiede tempo del server.

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         /* Define event handling logic here */
      </script>
   </head>
   
   <body>
      <div id = "sse">
         <eventsource src = "/cgi-bin/ticker.cgi" />
      </div>
		
      <div id = "ticker">
         <TIME>
      </div>
   </body>
</html>

Script lato server per SSE

Dovrebbe inviare uno script lato server Content-typeintestazione che specifica il tipo text / event-stream come segue.

print "Content-Type: text/event-stream\n\n";

Dopo aver impostato Content-Type, lo script lato server invierà un file Event: tag seguito dal nome dell'evento. L'esempio seguente invierà Server-Time come nome dell'evento terminato da un nuovo carattere di riga.

print "Event: server-time\n";

Il passaggio finale consiste nell'inviare i dati dell'evento utilizzando Data: tag che sarebbe seguito da un numero intero di valore stringa terminato da un nuovo carattere di riga come segue -

$time = localtime();
print "Data: $time\n";

Infine, il seguente è ticker.cgi completo scritto in Perl -

#!/usr/bin/perl  
print "Content-Type: text/event-stream\n\n";  

while(true) { 
   print "Event: server-time\n"; 
   $time = localtime(); 
   print "Data: $time\n"; 
   sleep(5); 
}

Gestisci eventi inviati dal server

Modifichiamo la nostra applicazione web per gestire gli eventi inviati dal server. Di seguito è riportato l'ultimo esempio.

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         document.getElementsByTagName("eventsource")[0].addEventListener("server-time", 
         eventHandler, false); 
    
         function eventHandler(event) { 

            // Alert time sent by the server 
            document.querySelector('#ticker').innerHTML = event.data; 
         } 
      </script> 
   </head> 
  
   <body> 
      <div id = "sse"> 
         <eventsource src = "/cgi-bin/ticker.cgi" /> 
      </div> 
   
      <div id = "ticker" name = "ticker"> 
         [TIME] 
      </div> 
   </body> 
</html>

Prima di testare gli eventi inviati dal server, ti suggerisco di assicurarti che il tuo browser web supporti questo concetto.

WebSockets è una tecnologia di comunicazione bidirezionale di nuova generazione per applicazioni web che opera su un singolo socket ed è esposta tramite un'interfaccia JavaScript nei browser compatibili con HTML 5.

Una volta ottenuta una connessione Web Socket con il server Web, è possibile inviare dati dal browser al server chiamando un file send() e ricevere i dati dal server al browser da un onmessage gestore di eventi.

Di seguito è riportata l'API che crea un nuovo oggetto WebSocket.

var Socket = new WebSocket(url, [protocal] );

Qui il primo argomento, url, specifica l'URL a cui connettersi. Il secondo attributo, protocollo è facoltativo e, se presente, specifica un sottoprotocollo che il server deve supportare affinché la connessione abbia esito positivo.

Attributi WebSocket

Di seguito sono riportati gli attributi dell'oggetto WebSocket. Supponendo di aver creato l'oggetto Socket come menzionato sopra -

Sr.No.	Attributo e descrizione
1	Socket.readyState L'attributo readonly readyState rappresenta lo stato della connessione. Può avere i seguenti valori: Un valore di 0 indica che la connessione non è stata ancora stabilita. Un valore di 1 indica che la connessione è stata stabilita e la comunicazione è possibile. Un valore di 2 indica che la connessione sta attraversando l'handshake di chiusura. Un valore di 3 indica che la connessione è stata chiusa o che non è stato possibile aprire.
2	Socket.bufferedAmount L'attributo readonly bufferedAmount rappresenta il numero di byte di testo UTF-8 che sono stati accodati utilizzando il metodo send ().

Eventi WebSocket

Di seguito sono riportati gli eventi associati all'oggetto WebSocket. Supponendo di aver creato l'oggetto Socket come menzionato sopra -

Evento	Gestore di eventi	Descrizione
Aperto	Socket.onopen	Questo evento si verifica quando viene stabilita la connessione socket.
Messaggio	Socket.onmessage	Questo evento si verifica quando il client riceve i dati dal server.
errore	Socket.onerror	Questo evento si verifica quando si verifica un errore di comunicazione.
vicino	Socket.onclose	Questo evento si verifica quando la connessione viene chiusa.

Metodi WebSocket

Di seguito sono riportati i metodi associati all'oggetto WebSocket. Supponendo di aver creato l'oggetto Socket come menzionato sopra -

Sr.No.	Metodo e descrizione
1	Socket.send() Il metodo send (data) trasmette i dati utilizzando la connessione.
2	Socket.close() Il metodo close () verrebbe utilizzato per terminare qualsiasi connessione esistente.

Esempio di WebSocket

Un WebSocket è un socket TCP bidirezionale standard tra il client e il server. Il socket inizia come una connessione HTTP e quindi "Aggiorna" a un socket TCP dopo un handshake HTTP. Dopo la stretta di mano, entrambe le parti possono inviare dati.

Codice HTML e JavaScript lato client

Al momento della stesura di questo tutorial, ci sono solo pochi browser web che supportano l'interfaccia WebSocket (). Puoi provare a seguire l'esempio con l'ultima versione di Chrome, Mozilla, Opera e Safari.

<!DOCTYPE HTML>

<html>
   <head>
      
      <script type = "text/javascript">
         function WebSocketTest() {
            
            if ("WebSocket" in window) {
               alert("WebSocket is supported by your Browser!");
               
               // Let us open a web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
				
               ws.onopen = function() {
                  
                  // Web Socket is connected, send data using send()
                  ws.send("Message to send");
                  alert("Message is sent...");
               };
				
               ws.onmessage = function (evt) { 
                  var received_msg = evt.data;
                  alert("Message is received...");
               };
				
               ws.onclose = function() { 
                  
                  // websocket is closed.
                  alert("Connection is closed..."); 
               };
            } else {
              
               // The browser doesn't support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }
      </script>
		
   </head>
   
   <body>
      <div id = "sse">
         <a href = "javascript:WebSocketTest()">Run WebSocket</a>
      </div>
      
   </body>
</html>

Installa pywebsocket

Prima di testare il programma client sopra, è necessario un server che supporti WebSocket. Scarica mod_pywebsocket-xxxtar.gz da pywebsocket che mira a fornire un'estensione Web Socket per Apache HTTP Server e installalo seguendo questi passaggi.

Decomprimere e decomprimere il file scaricato.
Andare all'interno pywebsocket-x.x.x/src/ directory.
$ python setup.py build
$ sudo python setup.py install
Quindi leggi il documento di -
- $ pydoc mod_pywebsocket

Questo lo installerà nel tuo ambiente Python.

Avvia il server

Vai al pywebsocket-x.x.x/src/mod_pywebsocket cartella ed esegui il seguente comando:

$sudo python standalone.py -p 9998 -w ../example/

Questo avvierà il server in ascolto sulla porta 9998 e utilizzerà l'estensione handlers directory specificata dall'opzione -w dove risiede il nostro echo_wsh.py.

Ora usando il browser Chrome apri il file html che hai creato all'inizio. Se il tuo browser supporta WebSocket (), riceverai un avviso che indica che il tuo browser supporta WebSocket e infine quando fai clic su "Esegui WebSocket" riceverai un messaggio di Arrivederci inviato dallo script del server.

L'elemento HTML5 <canvas> ti offre un modo semplice e potente per disegnare grafica utilizzando JavaScript. Può essere utilizzato per disegnare grafici, creare composizioni fotografiche o fare animazioni semplici (e non così semplici).

Ecco un semplice elemento <canvas> che ha solo due attributi specifici width e height oltre a tutti gli attributi HTML5 di base come id, nome e classe, ecc.

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

Puoi facilmente trovare l'elemento <canvas> nel DOM usando il metodo getElementById () come segue:

var canvas = document.getElementById("mycanvas");

Vediamo un semplice esempio sull'utilizzo dell'elemento <canvas> nel documento HTML5.

<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

Questo produrrà il seguente risultato:

Il contesto di rendering

La <canvas> è inizialmente vuota e per visualizzare qualcosa, uno script deve prima accedere al contesto di rendering e disegnarci sopra.

L'elemento canvas ha un metodo DOM chiamato getContext, utilizzato per ottenere il contesto di rendering e le sue funzioni di disegno. Questa funzione accetta un parametro, il tipo di contesto2d.

Di seguito è riportato il codice per ottenere il contesto richiesto insieme a un controllo se il tuo browser supporta l'elemento <canvas> -

var canvas  = document.getElementById("mycanvas");

if (canvas.getContext) {   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

Supporto browser

Le ultime versioni di Firefox, Safari, Chrome e Opera supportano tutte HTML5 Canvas ma IE8 non supporta nativamente canvas.

È possibile utilizzare ExplorerCanvas per avere il supporto della tela tramite Internet Explorer. Devi solo includere questo JavaScript come segue:

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

Esempi di canvas HTML5

Questo tutorial copre i seguenti esempi relativi all'elemento <canvas> HTML5.

Sr.No.	Esempi e descrizione
1	Rettangoli di disegno Scopri come disegnare un rettangolo utilizzando l'elemento <canvas> HTML5
2	Tracciati di disegno Scopri come creare forme utilizzando i percorsi nell'elemento <canvas> HTML5
3	Linee di disegno Scopri come disegnare linee utilizzando l'elemento <canvas> HTML5
4	Disegno di Bezier Scopri come disegnare la curva di Bézier utilizzando l'elemento <canvas> HTML5
5	Disegno quadratico Scopri come disegnare una curva quadratica utilizzando l'elemento <canvas> HTML5
6	Utilizzo delle immagini Scopri come utilizzare le immagini con l'elemento <canvas> HTML5
7	Crea sfumature Scopri come creare sfumature utilizzando l'elemento <canvas> HTML5
8	Stili e colori Scopri come applicare stili e colori utilizzando l'elemento <canvas> HTML5
9	Testo e caratteri Impara a disegnare un testo straordinario utilizzando caratteri diversi e le loro dimensioni.
10	Pattern e ombra Impara a disegnare diversi modelli e ombre esterne.
11	Stati della tela Scopri come salvare e ripristinare gli stati della tela mentre esegui disegni complessi su una tela.
12	Traduzione della tela Questo metodo viene utilizzato per spostare la tela e la sua origine in un punto diverso della griglia.
13	Rotazione della tela Questo metodo viene utilizzato per ruotare la tela attorno all'origine corrente.
14	Ridimensionamento della tela Questo metodo viene utilizzato per aumentare o diminuire le unità in una griglia canvas.
15	Trasformazione tela Questi metodi consentono modifiche direttamente alla matrice di trasformazione.
16	Composizione della tela Questo metodo viene utilizzato per mascherare alcune aree o cancellare sezioni dalla tela.
17	Animazione su tela Scopri come creare un'animazione di base utilizzando la tela HTML5 e JavaScript.

Le funzionalità HTML5 includono il supporto nativo di audio e video senza la necessità di Flash.

I tag HTML5 <audio> e <video> semplificano l'aggiunta di contenuti multimediali a un sito web. Devi impostaresrc attributo per identificare la sorgente multimediale e includere un attributo di controllo in modo che l'utente possa riprodurre e mettere in pausa il supporto.

Incorporamento di video

Ecco la forma più semplice per incorporare un file video nella tua pagina web:

<video src = "foo.mp4"  width = "300" height = "200" controls>
   Your browser does not support the <video> element.   
</video>

L'attuale bozza di specifica HTML5 non specifica quali formati video i browser dovrebbero supportare nel tag video. Ma i formati video più comunemente usati sono:

Ogg - File Ogg con codec video Thedora e codec audio Vorbis.
mpeg4 - File MPEG4 con codec video H.264 e codec audio AAC.

È possibile utilizzare il tag <source> per specificare il supporto insieme al tipo di supporto e molti altri attributi. Un elemento video consente più elementi sorgente e il browser utilizzerà il primo formato riconosciuto -

<!DOCTYPE HTML>

<html>
   <body>
      
      <video  width = "300" height = "200" controls autoplay>
         <source src = "/html5/foo.ogg" type ="video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the <video> element.
      </video>
      
   </body>
</html>

Questo produrrà il seguente risultato:

Specifica degli attributi video

Il tag video HTML5 può avere una serie di attributi per controllare l'aspetto grafico e varie funzionalità del controllo:

Sr.No.	Attributo e descrizione
1	autoplay Questo attributo booleano, se specificato, inizierà automaticamente la riproduzione del video non appena può farlo senza interrompersi per completare il caricamento dei dati.
2	autobuffer Questo attributo booleano, se specificato, inizierà automaticamente il buffering del video anche se non è impostato per la riproduzione automatica.
3	controls Se questo attributo è presente, consentirà all'utente di controllare la riproduzione del video, inclusi volume, ricerca e pausa / ripresa della riproduzione.
4	height Questo attributo specifica l'altezza dell'area di visualizzazione del video, in pixel CSS.
5	loop Questo attributo booleano, se specificato, consentirà al video di tornare automaticamente all'inizio dopo aver raggiunto la fine.
6	preload Questo attributo specifica che il video verrà caricato al caricamento della pagina e pronto per essere eseguito. Ignorato se è presente la riproduzione automatica.
7	poster Questo è l'URL di un'immagine da mostrare fino a quando l'utente non gioca o cerca.
8	src L'URL del video da incorporare. Questo è facoltativo; puoi invece utilizzare l'elemento <source> all'interno del blocco video per specificare il video da incorporare.
9	width Questo attributo specifica la larghezza dell'area di visualizzazione del video, in pixel CSS.

Incorporamento dell'audio

HTML5 supporta il tag <audio> che viene utilizzato per incorporare contenuto audio in un documento HTML o XHTML come segue.

<audio src = "foo.wav" controls autoplay>
   Your browser does not support the <audio> element.   
</audio>

L'attuale bozza di specifica HTML5 non specifica quali formati audio i browser dovrebbero supportare nel tag audio. Ma i formati audio più comunemente usati sonoogg, mp3 e wav.

Puoi utilizzare <source & ggt; tag per specificare il supporto insieme al tipo di supporto e molti altri attributi. Un elemento audio consente più elementi sorgente e il browser utilizzerà il primo formato riconosciuto -

<!DOCTYPE HTML>

<html>
   <body>
      
      <audio controls autoplay>
         <source src = "/html5/audio.ogg" type = "audio/ogg" />
         <source src = "/html5/audio.wav" type = "audio/wav" />
         Your browser does not support the <audio> element.
      </audio>
      
   </body>
</html>

Questo produrrà il seguente risultato:

Specifica dell'attributo audio

Il tag audio HTML5 può avere una serie di attributi per controllare l'aspetto grafico e varie funzionalità del controllo -

Sr.No.	Attributo e descrizione
1	autoplay Questo attributo booleano se specificato, l'audio inizierà automaticamente a essere riprodotto non appena può farlo senza fermarsi per completare il caricamento dei dati.
2	autobuffer Questo attributo booleano se specificato, l'audio inizierà automaticamente il buffering anche se non è impostato per la riproduzione automatica.
3	controls Se questo attributo è presente, consentirà all'utente di controllare la riproduzione audio, inclusi volume, ricerca e pausa / ripresa della riproduzione.
4	loop Questo attributo booleano, se specificato, consentirà all'audio di tornare automaticamente all'inizio dopo aver raggiunto la fine.
5	preload Questo attributo specifica che l'audio verrà caricato al caricamento della pagina e pronto per essere eseguito. Ignorato se è presente la riproduzione automatica.
6	src L'URL dell'audio da incorporare. Questo è facoltativo; puoi invece utilizzare l'elemento <source> all'interno del blocco video per specificare il video da incorporare.

Gestione degli eventi multimediali

Il tag audio e video HTML5 può avere una serie di attributi per controllare varie funzionalità del controllo utilizzando JavaScript:

S.No.	Descrizione dell'evento
1	abort Questo evento viene generato quando la riproduzione viene interrotta.
2	canplay Questo evento viene generato quando sono disponibili dati sufficienti per la riproduzione del supporto.
3	ended Questo evento viene generato al termine della riproduzione.
4	error Questo evento viene generato quando si verifica un errore.
5	loadeddata Questo evento viene generato quando il primo fotogramma del supporto ha terminato il caricamento.
6	loadstart Questo evento viene generato quando inizia il caricamento del supporto.
7	pause Questo evento viene generato quando la riproduzione è in pausa.
8	play Questo evento viene generato quando la riproduzione inizia o riprende.
9	progress Questo evento viene generato periodicamente per informare lo stato di avanzamento del download del supporto.
10	ratechange Questo evento viene generato quando la velocità di riproduzione cambia.
11	seeked Questo evento viene generato quando viene completata un'operazione di ricerca.
12	seeking Questo evento viene generato quando inizia un'operazione di ricerca.
13	suspend Questo evento viene generato quando il caricamento del supporto viene sospeso.
14	volumechange Questo evento viene generato quando il volume dell'audio cambia.
15	waiting Questo evento viene generato quando l'operazione richiesta (come la riproduzione) viene ritardata in attesa del completamento di un'altra operazione (come una ricerca).

Di seguito è riportato l'esempio che consente di riprodurre il video dato:

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         function PlayVideo() {
            var v = document.getElementsByTagName("video")[0];  
            v.play(); 
         }
      </script>
   </head>
   
   <body>
   
      <form>         
         <video width = "300" height = "200" src = "/html5/foo.mp4">
         Your browser does not support the video element.
         </video>
         <br />
         <input type = "button" onclick = "PlayVideo();" value = "Play"/>
      </form>
      
   </body>
</html>

Questo produrrà il seguente risultato:

Configurazione dei server per il tipo di supporto

La maggior parte dei server per impostazione predefinita non fornisce supporti Ogg o mp4 con i tipi MIME corretti, quindi è probabile che sia necessario aggiungere la configurazione appropriata per questo.

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4

L'API di geolocalizzazione HTML5 ti consente di condividere la tua posizione con i tuoi siti web preferiti. Un JavaScript può catturare la tua latitudine e longitudine e può essere inviato al server web di backend e fare cose fantasiose che riconoscono la posizione come trovare attività commerciali locali o mostrare la tua posizione su una mappa.

Oggi la maggior parte dei browser e dei dispositivi mobili supporta l'API di geolocalizzazione. Le API di geolocalizzazione funzionano con una nuova proprietà dell'oggetto navigatore globale, ovvero. Oggetto di geolocalizzazione che può essere creato come segue:

var geolocation = navigator.geolocation;

L'oggetto di geolocalizzazione è un oggetto di servizio che consente ai widget di recuperare informazioni sulla posizione geografica del dispositivo.

Metodi di geolocalizzazione

L'oggetto di geolocalizzazione fornisce i seguenti metodi:

Sr.No.	Metodo e descrizione
1	getCurrentPosition () Questo metodo recupera la posizione geografica corrente dell'utente.
2	watchPosition () Questo metodo recupera gli aggiornamenti periodici sulla posizione geografica corrente del dispositivo.
3	clearWatch () Questo metodo annulla una chiamata watchPosition in corso.

Esempio

Di seguito è riportato un codice di esempio per utilizzare uno dei metodi precedenti:

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler);
}

Qui showLocation e errorHandler sono metodi di callback che verrebbero utilizzati per ottenere la posizione effettiva come spiegato nella sezione successiva e per gestire gli errori se ce ne sono.

Proprietà posizione

I metodi di geolocalizzazione getCurrentPosition () e getPositionUsingMethodName () specificano il metodo di callback che recupera le informazioni sulla posizione. Questi metodi vengono chiamati in modo asincrono con un oggettoPosition che memorizza le informazioni complete sulla posizione.

Il Positionoggetto specifica la posizione geografica corrente del dispositivo. La posizione è espressa come un insieme di coordinate geografiche insieme a informazioni su direzione e velocità.

La tabella seguente descrive le proprietà dell'oggetto Position. Per le proprietà facoltative, se il sistema non è in grado di fornire un valore, il valore della proprietà è impostato su null.

Proprietà	genere	Descrizione
coords	oggetti	Specifica la posizione geografica del dispositivo. La posizione è espressa come un insieme di coordinate geografiche insieme a informazioni su direzione e velocità.
coords.latitude	Numero	Specifica la stima della latitudine in gradi decimali. L'intervallo di valori è [-90,00, +90,00].
coords.longitude	Numero	Specifica la stima della longitudine in gradi decimali. L'intervallo di valori è [-180,00, +180,00].
coords.altitude	Numero	[Facoltativo] Specifica l'altitudine stimata in metri sopra l'ellissoide WGS 84.
coords.accuracy	Numero	[Facoltativo] Specifica la precisione delle stime di latitudine e longitudine in metri.
coords.altitudeAccuracy	Numero	[Facoltativo] Specifica la precisione della stima dell'altitudine in metri.
coords.heading	Numero	[Facoltativo] Specifica la direzione di movimento corrente del dispositivo in gradi contando in senso orario rispetto al nord geografico.
coords.speed	Numero	[Facoltativo] Specifica la velocità al suolo corrente del dispositivo in metri al secondo.
timestamp	Data	Specifica l'ora in cui le informazioni sulla posizione sono state recuperate e l'oggetto Posizione creato.

Esempio

Di seguito è riportato un codice di esempio che utilizza l'oggetto Position. Qui il metodo showLocation è un metodo di callback -

function showLocation( position ) {
   var latitude = position.coords.latitude;
   var longitude = position.coords.longitude;
   ...
}

Gestione degli errori

La geolocalizzazione è complicata ed è molto richiesta per rilevare qualsiasi errore e gestirlo con garbo.

I metodi di geolocalizzazione getCurrentPosition () e watchPosition () fanno uso di un metodo di callback del gestore degli errori che fornisce PositionErroroggetto. Questo oggetto ha le seguenti due proprietà:

Proprietà	genere	Descrizione
codice	Numero	Contiene un codice numerico per l'errore.
Messaggio	Corda	Contiene una descrizione leggibile dell'errore.

La tabella seguente descrive i possibili codici di errore restituiti nell'oggetto PositionError.

Codice	Costante	Descrizione
0	ERRORE SCONOSCIUTO	Il metodo non è riuscito a recuperare la posizione del dispositivo a causa di un errore sconosciuto.
1	PERMESSO NEGATO	Il metodo non è riuscito a recuperare la posizione del dispositivo perché l'applicazione non dispone dell'autorizzazione per utilizzare il servizio di localizzazione.
2	POSITION_UNAVAILABLE	Non è stato possibile determinare la posizione del dispositivo.
3	TEMPO SCADUTO	Il metodo non è stato in grado di recuperare le informazioni sulla posizione entro l'intervallo di timeout massimo specificato.

Esempio

Di seguito è riportato un codice di esempio che utilizza l'oggetto PositionError. Qui il metodo errorHandler è un metodo di callback -

function errorHandler( err ) {
   
   if (err.code == 1) {
      
      // access is denied
   }
   ...
}

Opzioni di posizione

Di seguito è riportata la sintassi effettiva del metodo getCurrentPosition ():

getCurrentPosition(callback, ErrorCallback, options)

Qui il terzo argomento è il PositionOptions oggetto che specifica una serie di opzioni per il recupero della posizione geografica del dispositivo.

Di seguito sono riportate le opzioni che possono essere specificate come terzo argomento:

Proprietà	genere	Descrizione
enableHighAccuracy	Booleano	Specifica se il widget desidera ricevere la stima della posizione più accurata possibile. Per impostazione predefinita, questo è falso.
tempo scaduto	Numero	La proprietà timeout è il numero di millisecondi che la tua applicazione web è disposta ad attendere per una posizione.
maximumAge	Numero	Specifica l'ora di scadenza in millisecondi per le informazioni sulla posizione memorizzata nella cache.

Esempio

Di seguito è riportato un codice di esempio che mostra come utilizzare i metodi sopra menzionati:

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler, {maximumAge: 75000});
}

I microdati sono un modo standardizzato per fornire semantica aggiuntiva nelle tue pagine web.

Microdata ti consente di definire i tuoi elementi personalizzati e iniziare a incorporare proprietà personalizzate nelle tue pagine web. Ad un livello elevato, i microdati sono costituiti da un gruppo di coppie nome-valore.

I gruppi vengono chiamati itemse ogni coppia nome-valore è un file property. Gli elementi e le proprietà sono rappresentati da elementi regolari.

Esempio

Per creare un elemento, il itemscope viene utilizzato l'attributo.
Per aggiungere una proprietà a un elemento, il itemprop l'attributo è utilizzato su uno dei discendenti dell'articolo.

Qui ci sono due elementi, ognuno dei quali ha la proprietà "nome":

<html>
   <body>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Zara</span>.</p>
      </div>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Nuha</span>.</p>
      </div>
      
   </body>
</html>

Produrrà il seguente risultato:

Le proprietà generalmente hanno valori che sono stringhe ma possono avere i seguenti tipi di dati:

Attributi globali

Microdata introduce cinque attributi globali che sarebbero disponibili per qualsiasi elemento da utilizzare e forniscono un contesto per le macchine sui dati.

Sr.No.	Attributo e descrizione
1	itemscope Viene utilizzato per creare un oggetto. L'attributo itemscope è un attributo booleano che dice che ci sono Microdati su questa pagina, ed è qui che inizia.
2	itemtype Questo attributo è un URL valido che definisce l'elemento e fornisce il contesto per le proprietà.
3	itemid Questo attributo è l'identificatore globale dell'articolo.
4	itemprop Questo attributo definisce una proprietà dell'articolo.
5	itemref Questo attributo fornisce un elenco di elementi aggiuntivi di cui eseguire la scansione per trovare le coppie nome-valore dell'elemento.

Tipi di dati delle proprietà

Le proprietà generalmente hanno valori che sono stringhe come menzionato nell'esempio precedente, ma possono anche avere valori che sono URL. L'esempio seguente ha una proprietà, "immagine", il cui valore è un URL:

<div itemscope>
   <img itemprop = "image" src = "tp-logo.gif" alt = "TutorialsPoint">
</div>

Le proprietà possono anche avere valori che sono date, ore o date e ore. Ciò si ottiene utilizzando iltime elemento e il suo datetime attributo.

<html>
   <body>
      
      <div itemscope>
         My birthday is:
         <time itemprop = "birthday" datetime = "1971-05-08">
            Aug 5th 1971
         </time>
      </div>
      
   </body>
</html>

Produrrà il seguente risultato:

Le proprietà possono anche essere gruppi di coppie nome-valore, inserendo l'attributo itemscope sull'elemento che dichiara la proprietà.

Supporto API per microdati

Se un browser supporta l'API dei microdati HTML5, sarà presente una funzione getItems () sull'oggetto documento globale. Se il browser non supporta i microdati, la funzione getItems () non sarà definita.

function supports_microdata_api() {
   return !!document.getItems;
}

Modernizr non supporta ancora il controllo dell'API dei microdati, quindi dovrai utilizzare la funzione come quella sopra elencata.

Lo standard dei microdati HTML5 include sia il markup HTML (principalmente per i motori di ricerca) che una serie di funzioni DOM (principalmente per i browser).

Puoi includere markup dei microdati nelle tue pagine web e i motori di ricerca che non comprendono gli attributi dei microdati li ignoreranno. Tuttavia, se devi accedere o manipolare i microdati tramite il DOM, dovrai verificare se il browser supporta l'API DOM dei microdati.

Definizione del vocabolario dei microdati

Per definire il vocabolario dei microdati è necessario un URL dello spazio dei nomi che punti a una pagina web funzionante. Ad esempio, https://data-vocabulary.org/Person può essere utilizzato come spazio dei nomi per un vocabolario di microdati personale con le seguenti proprietà denominate:

name - Nome della persona come una semplice stringa
Photo - Un URL a un'immagine della persona.
URL - Un sito web appartenente alla persona.

L'utilizzo delle proprietà dei microdati di una persona potrebbe essere il seguente:

<html>
   <body>
   
      <div itemscope>
         <section itemscope itemtype = "http://data-vocabulary.org/Person">
            <h1 itemprop = "name">Gopal K Varma</h1>
         
            <p>
               <img itemprop = "photo" 
                  src = "http://www.tutorialspoint.com/green/images/logo.png">
            </p>
            
            <a itemprop = "url" href = "#">Site</a>
         </section>
      </div>
      
   </body>
</html>

Produrrà il seguente risultato:

Google supporta i microdati come parte del proprio programma Rich Snippet. Quando il web crawler di Google analizza la tua pagina e trova le proprietà dei microdati conformi al vocabolario http://datavocabulary.org/Person, analizza tali proprietà e le memorizza insieme al resto dei dati della pagina.

Puoi testare l'esempio sopra utilizzando lo strumento di test dei rich snippet utilizzando http://www.tutorialspoint.com/html5/microdata.htm

Per ulteriori sviluppi su Microdata puoi sempre fare riferimento a HTML5 Microdata .

Drag and Drop (DnD) è un potente concetto di interfaccia utente che semplifica la copia, il riordino e l'eliminazione di elementi con l'aiuto dei clic del mouse. Ciò consente all'utente di fare clic e tenere premuto il pulsante del mouse su un elemento, trascinarlo in un'altra posizione e rilasciare il pulsante del mouse per rilasciare l'elemento lì.

Per ottenere la funzionalità di trascinamento della selezione con HTML4 tradizionale, gli sviluppatori dovrebbero utilizzare una programmazione JavaScript complessa o altri framework JavaScript come jQuery ecc.

Ora HTML 5 ha sviluppato un'API Drag and Drop (DnD) che porta il supporto DnD nativo al browser rendendo molto più semplice la creazione del codice.

HTML 5 DnD è supportato da tutti i principali browser come Chrome, Firefox 3.5 e Safari 4 ecc.

Trascina e rilascia eventi

Esistono numerosi eventi che vengono generati durante le varie fasi dell'operazione di trascinamento. Questi eventi sono elencati di seguito:

Sr.No.	Eventi e descrizione
1	dragstart Viene eseguito quando l'utente inizia a trascinare l'oggetto.
2	dragenter Attivato quando il mouse viene spostato per la prima volta sull'elemento di destinazione durante un trascinamento. Un listener per questo evento dovrebbe indicare se è consentito il rilascio su questa posizione. Se non sono presenti listener o se i listener non eseguono alcuna operazione, per impostazione predefinita non è consentita l'eliminazione.
3	dragover Questo evento viene generato quando il mouse viene spostato su un elemento durante un trascinamento. La maggior parte delle volte, l'operazione che si verifica durante un listener sarà la stessa dell'evento dragenter.
4	dragleave Questo evento viene generato quando il mouse lascia un elemento durante un trascinamento. Gli ascoltatori dovrebbero rimuovere qualsiasi evidenziazione o indicatore di inserimento utilizzato per il feedback di rilascio.
5	drag Si attiva ogni volta che il mouse viene spostato mentre l'oggetto viene trascinato.
6	drop L'evento di rilascio viene generato sull'elemento in cui si è verificato il rilascio al termine dell'operazione di trascinamento. Un ascoltatore sarebbe responsabile del recupero dei dati trascinati e dell'inserimento nel punto di rilascio.
7	dragend Si attiva quando l'utente rilascia il pulsante del mouse durante il trascinamento di un oggetto.

Note- Nota che vengono attivati solo gli eventi di trascinamento; eventi del mouse come mousemove non vengono attivati durante un'operazione di trascinamento.

L'oggetto DataTransfer

I metodi del listener di eventi per tutti gli eventi di trascinamento della selezione accettano Event oggetto che ha un attributo di sola lettura chiamato dataTransfer.

Il event.dataTransfer ritorna DataTransfer oggetto associato all'evento come segue:

function EnterHandler(event) {
   DataTransfer dt = event.dataTransfer;
   .............
}

L' oggetto DataTransfer contiene i dati sull'operazione di trascinamento della selezione. Questi dati possono essere recuperati e impostati in termini di vari attributi associati all'oggetto DataTransfer come spiegato di seguito -

Sr.No.	Attributi DataTransfer e loro descrizione
1	dataTransfer.dropEffect [ = value ] Restituisce il tipo di operazione attualmente selezionata. Questo attributo può essere impostato per modificare l'operazione selezionata. I valori possibili sono none, copy, link e move.
2	dataTransfer.effectAllowed [ = value ] Restituisce i tipi di operazioni che devono essere consentite. Questo attributo può essere impostato per modificare le operazioni consentite. I valori possibili sono none, copy, copyLink, copyMove, link, linkMove, move, all e uninitialized.
3	dataTransfer.types Restituisce un DOMStringList che elenca i formati impostati nell'evento dragstart. Inoltre, se vengono trascinati file, uno dei tipi sarà la stringa "File".
4	dataTransfer.clearData ( [ format ] ) Rimuove i dati dei formati specificati. Rimuove tutti i dati se l'argomento viene omesso.
5	dataTransfer.setData(format, data) Aggiunge i dati specificati.
6	data = dataTransfer.getData(format) Restituisce i dati specificati. Se non ci sono tali dati, restituisce la stringa vuota.
7	dataTransfer.files Restituisce un FileList dei file trascinati, se presenti.
8	dataTransfer.setDragImage(element, x, y) Utilizza l'elemento specificato per aggiornare il feedback di trascinamento, sostituendo qualsiasi feedback specificato in precedenza.
9	dataTransfer.addElement(element) Aggiunge l'elemento dato all'elenco di elementi utilizzati per eseguire il rendering del feedback di trascinamento.

Processo di trascinamento della selezione

Di seguito sono riportati i passaggi da eseguire per implementare l'operazione Drag and Drop:

Passaggio 1: rendere trascinabile un oggetto

Ecco i passaggi da intraprendere:

Se vuoi trascinare un elemento, devi impostare il file draggable attribuire a true per quell'elemento.
Imposta un listener di eventi per dragstart che memorizza i dati trascinati.
L'ascoltatore di eventi dragstart imposterà gli effetti consentiti (copia, spostamento, collegamento o qualche combinazione).

Di seguito è riportato l'esempio per rendere un oggetto trascinabile:

<!DOCTYPE HTML>

<html>
   <head>
      
      <style type = "text/css">
         
         #boxA, #boxB {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      
      <script type = "text/javascript">
         
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed = 'move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            
            return true;
         }
      </script>
      
   </head>
   <body>
      
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to drag the purple box around.</div>
         
         <div id = "boxA" draggable = "true" 
            ondragstart = "return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         
         <div id = "boxB">Dustbin</div>
      </center>
      
   </body>
</html>

Questo produrrà il seguente risultato:

Passaggio 2: rilascio dell'oggetto

Per accettare un rilascio, il target di rilascio deve ascoltare almeno tre eventi.

Il dragenterevento, che viene utilizzato per determinare se l'obiettivo di rilascio deve accettare o meno il rilascio. Se la consegna deve essere accettata, questo evento deve essere annullato.
Il dragoverevento, che viene utilizzato per determinare quale feedback deve essere mostrato all'utente. Se l'evento viene annullato, il feedback (in genere il cursore) viene aggiornato in base al valore dell'attributo dropEffect.
Infine, il drop evento, che consente di eseguire la caduta effettiva.

Di seguito è riportato l'esempio per rilasciare un oggetto in un altro oggetto:

<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
         function dragEnter(ev) {
            event.preventDefault();
            return true;
         }
         function dragOver(ev) {
            return false;
         }
         function dragDrop(ev) {
            var src = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            return false;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to move the purple box into the pink box.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>

Questo produrrà il seguente risultato:

JavaScript è stato progettato per essere eseguito in un ambiente a thread singolo, il che significa che più script non possono essere eseguiti contemporaneamente. Considera una situazione in cui devi gestire eventi dell'interfaccia utente, eseguire query ed elaborare grandi quantità di dati API e manipolare il DOM.

JavaScript bloccherà il browser in situazioni in cui l'utilizzo della CPU è elevato. Facciamo un semplice esempio in cui JavaScript passa attraverso un grande ciclo:

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         function bigLoop() {
            
            for (var i = 0; i <= 10000; i += 1) {
               var j = i;
            }
            alert("Completed " + j + "iterations" );
         }
         
         function sayHello(){
            alert("Hello sir...." );
         }
      </script>
      
   </head>
   
   <body>
      <input type = "button" onclick = "bigLoop();" value = "Big Loop" />
      <input type = "button" onclick = "sayHello();" value = "Say Hello" />
   </body>
</html>

Produrrà il seguente risultato:

Quando fai clic sul pulsante Big Loop, viene visualizzato il seguente risultato in Firefox:

Che cosa sono i web worker?

La situazione spiegata sopra può essere gestita utilizzando Web Workers che eseguirà tutte le attività computazionalmente costose senza interrompere l'interfaccia utente e in genere verrà eseguito su thread separati.

I Web Worker consentono script di lunga esecuzione che non vengono interrotti da script che rispondono ai clic o ad altre interazioni dell'utente e consentono l'esecuzione di attività lunghe senza cedere per mantenere la pagina reattiva.

I web worker sono script in background e sono relativamente pesanti e non sono destinati ad essere utilizzati in gran numero. Ad esempio, sarebbe inappropriato avviare un worker per ogni pixel di un'immagine da quattro megapixel.

Quando uno script è in esecuzione all'interno di un Web Worker, non può accedere all'oggetto finestra della pagina Web (window.document), il che significa che i Web Worker non hanno accesso diretto alla pagina Web e all'API DOM. Sebbene i Web Worker non possano bloccare l'interfaccia utente del browser, possono comunque consumare cicli della CPU e rendere il sistema meno reattivo.

Come lavorano i web worker?

I web worker vengono inizializzati con l'URL di un file JavaScript, che contiene il codice che il worker eseguirà. Questo codice imposta i listener di eventi e comunica con lo script che lo ha generato dalla pagina principale. La seguente è la semplice sintassi:

var worker = new Worker('bigLoop.js');

Se il file javascript specificato esiste, il browser genererà un nuovo thread di lavoro, che viene scaricato in modo asincrono. Se il percorso del tuo lavoratore restituisce un errore 404, il lavoratore fallirà silenziosamente.

Se la tua applicazione ha più file JavaScript di supporto, puoi importarli importScripts() metodo che accetta i nomi dei file come argomenti separati da virgola come segue:

importScripts("helper.js", "anotherHelper.js");

Una volta che il web worker è stato generato, la comunicazione tra il web worker e la sua pagina principale viene eseguita utilizzando il file postMessage()metodo. A seconda del browser / della versione, postMessage () può accettare una stringa o un oggetto JSON come singolo argomento.

Si accede al messaggio passato da Web Worker utilizzando onmessageevento nella pagina principale. Ora scriviamo il nostro esempio bigLoop utilizzando Web Worker. Di seguito è la pagina principale (ciao.htm) che genererà un web worker per eseguire il ciclo e per restituire il valore finale della variabilej -

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         var worker = new Worker('bigLoop.js');
         
         worker.onmessage = function (event) {
            alert("Completed " + event.data + "iterations" );
         };
         
         function sayHello() {
            alert("Hello sir...." );
         }
      </script>
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello();" value = "Say Hello"/>
   </body>
</html>

Di seguito è riportato il contenuto del file bigLoop.js. Questo fa uso dipostMessage() API per ritrasmettere la comunicazione alla pagina principale -

for (var i = 0; i <= 1000000000; i += 1) {
   var j = i;
}
postMessage(j);

Questo produrrà il seguente risultato:

Fermare i web worker

I web worker non si fermano da soli ma la pagina che li ha avviati può fermarli chiamando terminate() metodo.

worker.terminate();

Un Web Worker terminato non risponderà più ai messaggi né eseguirà calcoli aggiuntivi. Non puoi riavviare un lavoratore; invece, puoi creare un nuovo lavoratore utilizzando lo stesso URL.

Gestione degli errori

Di seguito viene mostrato un esempio di una funzione di gestione degli errori in un file JavaScript di Web Worker che registra gli errori nella console. Con il codice di gestione degli errori, l'esempio precedente diventerebbe il seguente:

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         var worker = new Worker('bigLoop.js');
         
         worker.onmessage = function (event) {
            alert("Completed " + event.data + "iterations" );
         };
         
         worker.onerror = function (event) {
            console.log(event.message, event);
         };
         
         function sayHello() {
            alert("Hello sir...." );
         }
      </script>
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello();" value = "Say Hello"/>
   </body>
</html>

Verifica del supporto del browser

Di seguito è riportata la sintassi per rilevare il supporto di una funzionalità di Web Worker disponibile in un browser:

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      <script src = "/js/modernizr-1.5.min.js"></script>
      
      <script>
      function myFunction() {
         
         if (Modernizr.webworkers) {
            alert("Congratulation!! you have web workers support." );
         } else {
            alert("Sorry!! you do not have web workers support." );
         }
      }
      </script>
   </head>
   
   <body>
      <button onclick = "myFunction()">Click me</button>
   </body>
</html>

Questo produrrà il seguente risultato:

L'indexeddb è un nuovo concetto HTML5 per memorizzare i dati all'interno del browser dell'utente. indexeddb è più potente dell'archiviazione locale ed è utile per le applicazioni che richiedono l'archiviazione di grandi quantità di dati. Queste applicazioni possono essere eseguite in modo più efficiente e caricate più velocemente.

Perché usare indexeddb?

Il W3C ha annunciato che il database Web SQL è una specifica di archiviazione locale deprecata, quindi gli sviluppatori Web non dovrebbero più utilizzare questa tecnologia. indexeddb è un'alternativa al database SQL web ed è più efficace delle tecnologie precedenti.

Caratteristiche

memorizza i valori delle coppie di chiavi
non è un database relazionale
L'API IndexedDB è per lo più asincrona
non è un linguaggio di query strutturato
ha supportato per accedere ai dati dallo stesso dominio

IndexedDB

Prima di entrare in un indexeddb, dobbiamo aggiungere alcuni prefissi di implementazione come mostrato di seguito

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || 
window.msIndexedDB;
 
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || 
window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || 
window.webkitIDBKeyRange || window.msIDBKeyRange
 
if (!window.indexedDB) {
   window.alert("Your browser doesn't support a stable version of IndexedDB.")
}

Apri un database IndexedDB

Prima di creare un database, dobbiamo preparare alcuni dati per il database. Iniziamo dai dettagli dei dipendenti dell'azienda.

const employeeData = [
   { id: "01", name: "Gopal K Varma", age: 35, email: "[email protected]" },
   { id: "02", name: "Prasad", age: 24, email: "[email protected]" }
];

Aggiunta dei dati

Qui aggiungendo alcuni dati manualmente nei dati come mostrato di seguito -

function add() {
   var request = db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .add({ id: "01", name: "prasad", age: 24, email: "[email protected]" });
   
   request.onsuccess = function(event) {
      alert("Prasad has been added to your database.");
   };
   
   request.onerror = function(event) {
      alert("Unable to add data\r\nPrasad is already exist in your database! ");
   }
}

Recupero dati

Possiamo recuperare i dati dal database usando con get ()

function read() {
   var transaction = db.transaction(["employee"]);
   var objectStore = transaction.objectStore("employee");
   var request = objectStore.get("00-03");
   
   request.onerror = function(event) {
      alert("Unable to retrieve daa from database!");
   };
   
   request.onsuccess = function(event) {
      
      if(request.result) {
         alert("Name: " + request.result.name + ", Age: 
            " + request.result.age + ", Email: " + request.result.email);
      } else {
         alert("Kenny couldn't be found in your database!");  
      }
   };
}

Usando get (), possiamo memorizzare i dati in object invece di che possiamo memorizzare i dati nel cursore e possiamo recuperare i dati dal cursore.

function readAll() {
   var objectStore = db.transaction("employee").objectStore("employee");
   
   objectStore.openCursor().onsuccess = function(event) {
      var cursor = event.target.result;
      
      if (cursor) {
         alert("Name for id " + cursor.key + " is " + cursor.value.name + ", 
            Age: " + cursor.value.age + ", Email: " + cursor.value.email);
         cursor.continue();
      } else {
         alert("No more entries!");
      }
   };
}

Rimozione dei dati

Possiamo rimuovere i dati da IndexedDB con remove (). Ecco come appare il codice

function remove() {
   var request = db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .delete("02");
   
   request.onsuccess = function(event) {
      alert("prasad entry has been removed from your database.");
   };
}

Codice HTML

Per mostrare tutti i dati abbiamo bisogno di utilizzare l'evento onClick come mostrato di seguito codice -

<!DOCTYPE html>

<html>
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <title>IndexedDb Demo | onlyWebPro.com</title>
   </head>
   
   <body>
      <button onclick = "read()">Read </button>
      <button onclick = "readAll()"></button>
      <button onclick = "add()"></button>
      <button onclick = "remove()">Delete </button>
   </body>
</html>

Il codice finale dovrebbe essere come -

<!DOCTYPE html>

<html>
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <script type = "text/javascript">
         
         //prefixes of implementation that we want to test
         window.indexedDB = window.indexedDB || window.mozIndexedDB || 
         window.webkitIndexedDB || window.msIndexedDB;
         
         //prefixes of window.IDB objects
         window.IDBTransaction = window.IDBTransaction || 
         window.webkitIDBTransaction || window.msIDBTransaction;
         window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || 
         window.msIDBKeyRange
         
         if (!window.indexedDB) {
            window.alert("Your browser doesn't support a stable version of IndexedDB.")
         }
         
         const employeeData = [
            { id: "00-01", name: "gopal", age: 35, email: "[email protected]" },
            { id: "00-02", name: "prasad", age: 32, email: "[email protected]" }
         ];
         var db;
         var request = window.indexedDB.open("newDatabase", 1);
         
         request.onerror = function(event) {
            console.log("error: ");
         };
         
         request.onsuccess = function(event) {
            db = request.result;
            console.log("success: "+ db);
         };
         
         request.onupgradeneeded = function(event) {
            var db = event.target.result;
            var objectStore = db.createObjectStore("employee", {keyPath: "id"});
            
            for (var i in employeeData) {
               objectStore.add(employeeData[i]);
            }
         }
         
         function read() {
            var transaction = db.transaction(["employee"]);
            var objectStore = transaction.objectStore("employee");
            var request = objectStore.get("00-03");
            
            request.onerror = function(event) {
               alert("Unable to retrieve daa from database!");
            };
            
            request.onsuccess = function(event) {
               // Do something with the request.result!
               if(request.result) {
                  alert("Name: " + request.result.name + ", 
                     Age: " + request.result.age + ", Email: " + request.result.email);
               } else {
                  alert("Kenny couldn't be found in your database!");
               }
            };
         }
         
         function readAll() {
            var objectStore = db.transaction("employee").objectStore("employee");
            
            objectStore.openCursor().onsuccess = function(event) {
               var cursor = event.target.result;
               
               if (cursor) {
                  alert("Name for id " + cursor.key + " is " + cursor.value.name + ", 
                     Age: " + cursor.value.age + ", Email: " + cursor.value.email);
                  cursor.continue();
               } else {
                  alert("No more entries!");
               }
            };
         }
         
         function add() {
            var request = db.transaction(["employee"], "readwrite")
            .objectStore("employee")
            .add({ id: "00-03", name: "Kenny", age: 19, email: "[email protected]" });
            
            request.onsuccess = function(event) {
               alert("Kenny has been added to your database.");
            };
            
            request.onerror = function(event) {
               alert("Unable to add data\r\nKenny is aready exist in your database! ");
            }
         }
         
         function remove() {
            var request = db.transaction(["employee"], "readwrite")
            .objectStore("employee")
            .delete("00-03");
            
            request.onsuccess = function(event) {
               alert("Kenny's entry has been removed from your database.");
            };
         }
      </script>
      
   </head>
   <body>
      <button onclick = "read()">Read </button>
      <button onclick = "readAll()">Read all </button>
      <button onclick = "add()">Add data </button>
      <button onclick = "remove()">Delete data </button>
   </body>
</html>

Produrrà il seguente output:

La messaggistica Web è la capacità di inviare messaggi in tempo reale dal server al browser del client. Ignora il problema di comunicazione tra domini in diversi domini, protocolli o porte

Ad esempio, se desideri inviare i dati dalla tua pagina a un contenitore di annunci che si trova in iframe o voce al contrario, in questo scenario il browser genera un'eccezione di sicurezza. Con la messaggistica web possiamo trasmettere i dati come un evento di messaggio.

Evento messaggio

Gli eventi dei messaggi vengono attivati Messaggistica tra documenti, messaggistica di canale, eventi inviati dal server e web sockets.it ha descritto dall'interfaccia Evento messaggio.

Attributi

Sr.No.	Attributi e descrizione
1	data Contiene dati di stringa
2	origin Contiene il nome di dominio e la porta
3	lastEventId Contiene un identificatore univoco per l'evento del messaggio corrente.
4	source Contiene un riferimento alla finestra del documento di origine
5	ports Contiene i dati inviati da qualsiasi porta di messaggi

Invio di un messaggio di documenti incrociati

Prima di inviare un messaggio di documenti incrociati, dobbiamo creare un nuovo contesto di navigazione web creando un nuovo iframe o una nuova finestra. Possiamo inviare i dati usando postMessage () e ha due argomenti. Sono come ...

message - Il messaggio da inviare
targetOrigin - Nome di origine

Esempi

Invio messaggio da iframe a pulsante

var iframe = document.querySelector('iframe');
var button = document.querySelector('button');

var clickHandler = function() {
   iframe.contentWindow.postMessage('The message to send.',
      'https://www.tutorialspoint.com);
}
button.addEventListener('click',clickHandler,false);

Ricezione di un messaggio di documenti incrociati nel documento ricevente

var messageEventHandler = function(event){
   
   // check that the origin is one we want.
   if(event.origin == 'https://www.tutorialspoint.com') {
      alert(event.data);
   }
}
window.addEventListener('message', messageEventHandler,false);

Messaggi di canale

La comunicazione bidirezionale tra i contesti di navigazione è chiamata messaggistica di canale. È utile per la comunicazione tra più origini.

Gli oggetti MessageChannel e MessagePort

Durante la creazione di messageChannel, crea internamente due porte per inviare i dati e inoltrarli a un altro contesto di navigazione.

postMessage() - Pubblica il canale di lancio del messaggio
start() - Invia i dati
close() - Chiude le porte

In questo scenario, inviamo i dati da un iframe a un altro iframe. Qui stiamo invocando i dati in funzione e passando i dati a DOM.

var loadHandler = function() {
   var mc, portMessageHandler;
   mc = new MessageChannel();
   window.parent.postMessage('documentAHasLoaded','http://foo.example',[mc.port2]);
   
   portMessageHandler = function(portMsgEvent) {
      alert( portMsgEvent.data );
   }
   
   mc.port1.addEventListener('message', portMessageHandler, false);
   mc.port1.start();
}
window.addEventListener('DOMContentLoaded', loadHandler, false);

Sopra il codice, sta prendendo i dati dalla porta 2, ora passerà i dati al secondo iframe

var loadHandler = function() {
   var iframes, messageHandler;
   iframes = window.frames;
   
   messageHandler = function(messageEvent) {
      
      if( messageEvent.ports.length > 0 ) {
         
         // transfer the port to iframe[1]
         iframes[1].postMessage('portopen','http://foo.example',messageEvent.ports);
      }
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

Ora il secondo documento gestisce i dati utilizzando la funzione portMsgHandler.

var loadHandler() {
   
   // Define our message handler function
   var messageHandler = function(messageEvent) {
   
      // Our form submission handler
      
      var formHandler = function() {
         var msg = 'add <[email protected]> to game circle.';
         messageEvent.ports[0].postMessage(msg);
      }
      document.forms[0].addEventListener('submit',formHandler,false);
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

Cross-origin resource sharing (CORS) è un meccanismo per consentire le risorse limitate da un altro dominio nel browser web.

Supponiamo, se fai clic su HTML5- video player nelle sezioni demo html5. chiederà il permesso della fotocamera. se l'utente consente l'autorizzazione, solo aprirà la fotocamera oppure non aprirà la fotocamera per le applicazioni web.

Effettuare una richiesta CORS

Qui Chrome, Firefox, Opera e Safari utilizzano tutti l'oggetto XMLHttprequest2 e Internet Explorer utilizza l'oggetto, oggetto XDomainRequest simile.

function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   
   if ("withCredentials" in xhr) {
      
      // Check if the XMLHttpRequest object has a "withCredentials" property.
      // "withCredentials" only exists on XMLHTTPRequest2 objects.
      xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {
      
      // Otherwise, check if XDomainRequest.
      // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
      xhr = new XDomainRequest();
      xhr.open(method, url);
   } else {
      
      // Otherwise, CORS is not supported by the browser.
      xhr = null;
   }
   return xhr;
}

var xhr = createCORSRequest('GET', url);

if (!xhr) {
   throw new Error('CORS not supported');
}

Maniglie degli eventi in CORS

Sr.No.	Gestore e descrizione dell'evento
1	onloadstart Avvia la richiesta
2	onprogress Carica i dati e invia i dati
3	onabort Annulla la richiesta
4	onerror richiesta non riuscita
5	onload richiesta di caricamento con successo
6	ontimeout il timeout è scaduto prima che la richiesta potesse essere completata
7	onloadend Quando la richiesta è completa o riuscita o non riuscita

Esempio di evento onload o onerror

xhr.onload = function() {
   var responseText = xhr.responseText;
   
   // process the response.
   console.log(responseText);
};

xhr.onerror = function() {
   console.log('There was an error!');
};

Esempio di CORS con gestore

L'esempio seguente mostrerà l'esempio di makeCorsRequest () e del gestore onload

// Create the XHR object.
function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   
   if ("withCredentials" in xhr) {
      
      // XHR for Chrome/Firefox/Opera/Safari.
      xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {
      
      // XDomainRequest for IE.
      xhr = new XDomainRequest();
      xhr.open(method, url);
   } else {
      
      // CORS not supported.
      xhr = null;
   }
   return xhr;
}

// Helper method to parse the title tag from the response.
function getTitle(text) {
   return text.match('<title>(.*)?</title>')[1];
}

// Make the actual CORS request.
function makeCorsRequest() {
   
   // All HTML5 Rocks properties support CORS.
   var url = 'http://www.tutorialspoint.com';
   
   var xhr = createCORSRequest('GET', url);
   
   if (!xhr) {
      alert('CORS not supported');
      return;
   }
   
   // Response handlers.
   xhr.onload = function() {
      var text = xhr.responseText;
      var title = getTitle(text);
      alert('Response from CORS request to ' + url + ': ' + title);
   };
   
   xhr.onerror = function() {
      alert('Woops, there was an error making the request.');
   };
   xhr.send();
}

Web RTC introdotto dal World Wide Web Consortium (W3C). Supporta applicazioni browser per chiamate vocali, chat video e condivisione di file P2P.

Se vuoi provare? Web RTC disponibile per Chrome, Opera e Firefox. Un buon punto di partenza è la semplice applicazione di chat video qui . Web RTC implementa tre API come mostrato di seguito:

MediaStream - accedi alla videocamera e al microfono dell'utente.
RTCPeerConnection - ottenere l'accesso alla funzione di chiamata audio o video.
RTCDataChannel - ottenere l'accesso alla comunicazione peer-to-peer.

MediaStream

Il MediaStream rappresenta flussi di media sincronizzati, per un esempio, fare clic su lettore video HTML5 nella sezione demo HTML5 oppure fare clic qui .

L'esempio precedente contiene stream.getAudioTracks () e stream.VideoTracks (). Se non ci sono tracce audio, restituisce un array vuoto e controllerà il flusso video, se la webcam è collegata, stream.getVideoTracks () restituisce un array di un MediaStreamTrack che rappresenta il flusso dalla webcam. Un semplice esempio sono le applicazioni di chat, un'applicazione di chat riceve lo streaming da webcam, fotocamera posteriore, microfono.

Codice di esempio di MediaStream

function gotStream(stream) {
   window.AudioContext = window.AudioContext || window.webkitAudioContext;
   var audioContext = new AudioContext();
   
   // Create an AudioNode from the stream
   var mediaStreamSource = audioContext.createMediaStreamSource(stream);
   
   // Connect it to destination to hear yourself
   // or any other node for processing!
   mediaStreamSource.connect(audioContext.destination);
}
navigator.getUserMedia({audio:true}, gotStream);

Cattura dello schermo

È anche possibile nel browser Chrome con mediaStreamSource e richiede HTTPS. Questa funzione non è ancora disponibile in Opera. La demo di esempio è disponibile qui

Controllo della sessione, rete e informazioni sui media

Web RTC richiedeva la comunicazione peer-to-peer tra i browser. Questo meccanismo richiedeva segnalazioni, informazioni di rete, controllo della sessione e informazioni sui media. Gli sviluppatori Web possono scegliere un meccanismo diverso per comunicare tra i browser come SIP o XMPP o qualsiasi comunicazione bidirezionale. Un esempio di XHR è qui .

Codice di esempio di createSignalingChannel ()

var signalingChannel = createSignalingChannel();
var pc;
var configuration = ...;

// run start(true) to initiate a call
function start(isCaller) {
   pc = new RTCPeerConnection(configuration);
   
   // send any ice candidates to the other peer
   pc.onicecandidate = function (evt) {
      signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));
   };
   
   // once remote stream arrives, show it in the remote video element
   pc.onaddstream = function (evt) {
      remoteView.src = URL.createObjectURL(evt.stream);
   };
   
   // get the local stream, show it in the local video element and send it
   navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
      selfView.src = URL.createObjectURL(stream);
      pc.addStream(stream);
      
      if (isCaller)
         pc.createOffer(gotDescription);
      
      else
         pc.createAnswer(pc.remoteDescription, gotDescription);
         
         function gotDescription(desc) {
            pc.setLocalDescription(desc);
            signalingChannel.send(JSON.stringify({ "sdp": desc }));
         }
      });
   }
   
   signalingChannel.onmessage = function (evt) {
      if (!pc)
         start(false);
         var signal = JSON.parse(evt.data);
      
      if (signal.sdp)
         pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));
      
      else
         pc.addIceCandidate(new RTCIceCandidate(signal.candidate));
};