HTML5 and Next RIA Apps - Esplorazione di Javascript - Seconda Parte
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
HTML5 and Next RIA Apps Esplorazione di Javascript – Seconda Parte
HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte Esplorazione di Javascript – Seconda Parte Nella scorsa lezione abbiamo iniziato l'esplorazione di Javascript, del suo ruolo fondamentale per dominare e gestire gli elementi della pagina, di come questo viene incluso, sia inline, che su file esterni locali e remoti. La lezione si è conclusa con la presentazione degli array: su questo argomento (gli array) ci fermiamo qui e verrà ripreso quando si parlerà di JSON. Adesso ci occupiamo degli aspetti generali della pagina, di come catturare gli elementi e di come gestire gli eventi, quindi gli argomenti di questa lezione sono: - Tipologie di oggetti - Gestione degli eventi in JavaScript - BOM - Oggetto window: proprieta e metodi - BOM - Oggetto navigator - DOM - Interfaccia element: metodi e attributi - DOM - Oggetto document: metodi e attributi Infine ci occuperemo della feature detection con Modernizr Pagina 1
HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte Tipologie di oggetti Gli oggetti disponibili per l'utilizzo negli script delle pagine HTML5 e (X)HTML possono essere di tre diversi tipi: – nativi sono quelli messi a disposizione dal linguaggio; – appartenenti al BOM (Browser Object Model) Sono oggetti forniti dall'ambiente del browser e che permettono di interagire con quest'ultimo, quindi NON a LIVELLO DELLA PAGINA; – appartenenti al DOM (Documet Object Model): Sono oggetti che operano sugli elementi presenti all'interno della pagina visualizzata dal browser. Gli oggetti appartenenti al DOM appaiono quindi integrati all'interno del BOM. Pagina 1
HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte
Gestione degli eventi in JavaScript
JavaScript interagisce con gli attributi di evento definiti in (X)HTML per permettere di
invocare funzioni in risposta alle azioni dell'utente sugli elementi della pagina.
Ecco i principali tipi di evento:
– Eventi di documento: Apertura e chiusura di documenti
– Link: Chiamate di link
– Eventi di form:
• Eventi dovuti alla pressione di bottoni, caselle di controllo, bottoni di invio o di reset
• Eventi di disattivazione, attivazione e modifica in campi di testo, aree di testo e liste
di selezione
– Eventi di selezione in campi e aree di testo
– Eventi di immagini: caricamento di immagini
– Eventi del mouse: ingresso o uscita del cursore dal box di un elemento
In HTML5 ambito mobile abbiamo anche gli eventi relativi al “touch” : “touchstart”,
“touchmove”, “touchend” tra i principali
Pagina 1HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte
Gestione degli eventi in JavaScript
Ecco una tabella che riassume i principali eventi intercettabili all'interno di una pagina
EVENTO ATTRIBUTO SI PRODUCE QUANDO
Blur onBlur l'input di un elemento di un form non è più evidenziato
Change onChange cambia il valore di un campo di testo, di un'area di testo
o di un elemento di una lista di selezione
Click onClick si fa click su un elemento
Focus onFocus l'input di un elemento di un form viene evidenziato
Load onLoad un documento viene caricato correttamente
Mouse over onMouseOver il puntatore del mouse entra nel box di un elemento
Mouse out onMouseOut il puntatore del mouse esce dal box di un elemento
Select onSelect si seleziona un campo di input di un form
Submit onSubmit si invia un form
Unload onUnload viene chiuso il documento corrente, oppure viene
caricato un nuovo documento
Pagina 1HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte
Gestione degli eventi in JavaScript
Ad esempio considerare ed eseguire sul browser il seguente codice:
Lezione 3: Gestione degli eventi in Javascript
Esempio di onClick
Esempio di onFocus e onBlur
Pagina 1HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte BOM - Oggetto window: proprieta L'oggetto “window” è un oggetto del BOM che rappresenta la finestra del browser. E' caratterizzato da un insieme di proprietà, metodi e gestori degli eventi. E' globale, quindi non è necessario usare il nome per accedere alle proprietà e ai metodi. Principali proprietà: – defaultStatus: stringa contenente il messaggio predefinito visualizzato nella barra di stato della finestra – frames: array contenente i frame associati alla finestra – parent: fa riferimento alla finestra o al frame il cui frameset contiene il frame corrente – self: la finestra corrente – status: messaggio di stato della finestra o frame corrente Pagina 1
HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte BOM - Oggetto window: metodi ed eventi I principali metodi dell'oggetto “window” sono: - alert(): crea una finestra di dialogo contenente un messaggio ed un pulsante “OK” - close(): chiude la finestra corrente. Da non confondere con document.close() - confirm(): è simile ad alert() ma ha due pulsanti: “OK” e “Cancel”. Se l'utente seleziona “OK” ritorna true, altrimenti false - open(url [, titolo ,attributi]): apre una nuova finestra. Da non confondere con document.open() Tra i principali eventi, abbiamo: - onLoad: intercetta il caricamento della finestra - onUnLoad: intercetta la chiusura della finestra Pagina 1
HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte BOM - Oggetto window: metodi ed eventi Inoltre “navigator” è un oggetto del BOM che rappresenta il browser. E' accessibile come proprietà dell'oggetto window e consente di accedere ad informazioni sulla configurazione attuale del browser e del sistema attraverso alcune proprietà: – appName: nome del browser – appVersion: informazioni relative alla versione – mimeTypes: array con i tipi MIME supportati – oscpu: stringa che identifica il sistema operativo (supportato dai Mozilla-like) – plugins: array con i plug-in installati nel browser – userAgent: header HTTP dell'agente browser Ecco un esempio: 1) al caricamento della pagina chiamo una funzione Javascript “detectBrowser” 2) ricavo i dettagli le proprietà del browser creando una stringa HTML 3) visualizzo la stringa dentro un DIV Pagina 1
HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte
BOM - Oggetto window: metodi ed eventi
Ecco il codice:
Lezione 3: Gestione degli eventi in Javascript
function detectBrowser()
{
// --- Catturo l'oggetto del DOM che mi indentifica il DIV con id="browserDetails"
var divObj = document.getElementById('browserDetails');
// --- Creo la stringa con codice HTML
var details =
'appName:' + window.navigator.appName +
'appVersion:' + window.navigator.appVersion +
'oscpu:' + window.navigator.oscpu + // --- Supportato dai browser Mozilla-like
'userAgent:' + window.navigator.userAgent +
'';
// --- Inserisco/disegno tale codice HMTL nel div
divObj.innerHTML = details;
}
Pagina 1HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte BOM - Oggetto window: metodi ed eventi Una rappresentazione grafica del Browser Object Model può essere la seguente: Pagina 1
HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte
Interfaccia "element": i principali metodi
Adesso un elenco dei principali metodi dell'interfaccia “element”:
1) getElementsByTagName("tag"):
restituisce un array di tutti gli elementi tipo tag nel sottoalbero (X)HTML avente come
radice l'elemento corrente
2) attr = element.getAttribute(attributeName)
legge il valore di un attributo dell'elemento
3) element.setAttribute(name, value)
imposta il valore di un attributo dell'elemento
4) var newElem = element.appendChild(child)
aggiunge un nuovo nodo figlio (dopo tutti gli altri)
Altri metodi: insertBefore,replaceChild,removeChild
Pagina 1HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte
Interfaccia "element": i principali metodi
Consideriamo il seguente codice:
Demo sull'interfaccia "element"
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Testo Link 1
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled
Ascolta Radio 105
it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
Musica di Gran Classe
remaining essentially unchanged. It was popularised in the 1960s ...
Pagina 1HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte
Interfaccia "element": i principali metodi
Consideriamo il seguente codice:
/**
* al "document ready" modifico il DOM
*/
function elementDemo()
{
// === Catturo tutti i link della pagina
var links = document.getElementsByTagName('a');
alert('Ho trovato ' + links.length+' link nella pagina');
// === Visualizzo il contenuto di ogni link
for(var i=0; iHTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte Interfaccia "element": i principali metodi L'oggetto document à un'oggetto del DOM che rappresenta un intero documento (X)HTML, caricato in una finestra del browser ed è un oggetto globalmente accessibile. L'oggetto "document" nel DOM rappresenta il nodo body del documento (X)HTML, quindi possiede i metodi e gli attributi definiti dall'interfaccia "element" A partire dalla versione DOM 0 (così chiamata perché non è stata mai standardizzata), sono disponibili array che contengono tutti gli elementi di un certo tipo presenti nel documento (nell'ordine in cui compaiono nel documento): – applets[]: array di tutte le applets – anchors[]: array di tutte le ancore – embeds[]: array di tutti gli oggetti incorporati – forms[]: array di tutti i forms – images[]: array di tutte le immagini – links[]: array di tutti i link Un oggetto particolare è "document.body" oggetto che rappresenta il body del documento (X)HTML; manipolabile come ogni altro nodo tramite l'interfaccia element Pagina 1
HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte
Interfaccia "element": i principali metodi
Dell'oggetto “body” sono disponibili i seguenti attributi:
– cookie: legge o modifica i cookie associati alla pagina
– lastModified: data di ultima modifica
– location: URI del documento
– referrer: URI del documento che ha portato l'utente al documento corrente
– title: titolo del documento
Inoltre è disponibile il metodo “document.createElement('tag'); ” che crea un nuovo
elemento (da associare a un nodo preesistente con i metodi del DOM visti)
Pagina 1HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte Interfaccia "element": i principali metodi Esercitazione 1: A partire da un array che contiene 10 nomi di persone creare dinamicamente un elenco puntato ul/li che continene questi nomi; Esercitazione 2: Creare una form HTML che contiene i campi di testo Nome,Cognome,Email e un pulsante per validare i dati (che tutti i campi siano popolati); in base al risultato della validazione creare dinamicamente un DIV con la frase “Dati corretti” o in alternativa “Compilare tutti i campi” Pagina 1
HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte Feature Detection con Modernizr Uno degli aspetti più importanti per la costruzione di pagine HTML5 robuste, cioè che possano gestire le condizioni più diverse di esecuzione, è la feature detection: ci interessa sapere se il browser che sta eseguendo la pagina supporta effetivamente quello che vogliamo farli eseguire, senza intoppi e senza errori. Abbiamo due strade da seguire: - l'interpretazione dello User Agent - l'utilizzo di Modernizr Interpretazione dello UserAgent Lo UserAgent è un'applicazione installata sul computer dell'utente che si connette ad un processo server. [http://it.wikipedia.org/wiki/User_agent] Nel nostro caso l'applicazione è il browser che inserisce le seguenti informazioni: - Nome in codice del browser seguito dalla versione - Sistema Operativo - Versione del motore di rendering - Altre informazioni sul motore di rendering - Nome e versione del browser Pagina 1
HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte Feature Detection con Modernizr Interpretazione dello UserAgent Sono esempi di User Agent: [Google Chome su MacOSX] Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.65 Safari/535.11 [Firefox 10 su Mac OSX] Mozilla/5.0 (Macintosh; I; Intel Mac OS X 11_7_9; de-LI; rv:1.9b4) Gecko/2012010317 Firefox/10.0a4 [Firefox su Linux con Architettura a 64bit] Mozilla/5.0 (X11; Linux x86_64; rv:5.0) Gecko/20100101 Firefox/5.0 Firefox/5.0 [Internet Explorer 6 su Windows XP e .NET 2.0] Mozilla/4.0 (compatible; MSIE 6.1; Windows XP; .NET CLR 1.1.4322; .NET CLR 2.0.50727) Pagina 1
HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte Feature Detection con Modernizr Interpretazione dello UserAgent L'interpretazione dello UserAgent non è la soluzione migliore per capire quali features supporta il nostro browser per diversi motivi: - per ricavare con precisione la versione e il sistema operativo in uso occorre scrivere script complessi con espressioni regolari; - in caso di nuove versioni dei browser, può cambiare il contenuto della stringa - vi sono strumenti che possono cambiare UserAgent, facendo fingere il browser di essere qualcun altro Quindi per recupare lo UserAgento dovremmo “smontare” la stringa “window.navigator.userAgent” interprentandone il contenuto o con “indexOf” oppure mediante espressioni regolari: vediamo entrambe le soluzioni. Pagina 1
HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte
Feature Detection con Modernizr
Interpretazione dello UserAgent: metodo indexOf
Il metodo javascript “indexOf(frase)” applicato ad una stringa ci dice in che posizione è
contenuta la “frase” dentro la stringa, ad esempio: se nella stringa “Castro Gianfranco”
cerco il punto dove comincia la frase “Gianfranco” avrò:
var stringa = 'Castro Gianfranco';
alert(stringa.indexOf('Gianfranco'));
Mentre se cerco una frase che non c'è dentro la stringa avrò come risultato “-1”
var stringa = 'Castro Gianfranco';
alert(stringa.indexOf('EMIT'));
Pagina 1HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte
Feature Detection con Modernizr
Interpretazione dello UserAgent: metodo indexOf
Utilizzando tale tecnica, si può quindi intercettare quale browser sta eseguendo la pagina,
con vari “trucchetti” appoggiandosi, nel caso di indexOf maggiore di -1, al punto di
partenza trovato e contando determinati caratteri:
var UserAgent = window.navigator.userAgent;
var indice = UserAgent.indexOf("MSIE");
if(var versione = parseInt(navigator.appVersion.substr(indice+5) != -1 )
{
alert('Si tratta di Internet Explorer, ricavo la versione');
var versione = parseInt(navigator.appVersion.substr(indice+5));
alert('Versione di Explorer:' + versione);
}
Come è facile intuire tale codice diventa molto articolato e difficile da gestire nell'andare a
considerare le tutte le versioni di un determinato browser a patto che non cambi la
stringa... ma non è una procedura molto affidabile.
Pagina 1HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte
Feature Detection con Modernizr
Interpretazione dello UserAgent: metodo delle Regular Expression
Con questa tecnica si può analizzare un modo più dettagliato una stringa attraverso le
espressioni regolari, che indicano e verificano un “modello” di stringa da rispettare; non ci
addentreremo nel significato di ogni dettaglio, ma vi mostro il codice:
var chrome = (/Chrome/.test(navigator.userAgent))?1:0;
var safari = (/safari/.test(navigator.userAgent))?1:0;
var firefox = (/firefox/.test(navigator.userAgent))?1:0;
var ie=(/MSIE (\d+\.\d+);/.test(navigator.userAgent))?1:0;
if (chrome || (chrome && safari)){
alert('Chrome o Safari');
}
if (ie){
var str = navigator.userAgent;
var index = str.search(/MSIE/);
var vers = str.substring(index+5,index+6);
if (vers == 8 ) {
alert('Exlorer 8');
}
if (vers == 7) {
alert('Exlorer 7');
}
}
if(safari){
alert('Safari');
}
if(firefox){
alert('Firefox');
}
Pagina 1HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte
Feature Detection con Modernizr
Uso di Modernizr
Con questa libreria si ha un approccio più preciso all'individuazione delle features
disponibili sul browser e il principio di funzionamento è: se qualcosa la posso correttamente
utilizzare/visualizzare allora la disegno nel browser, altrimenti non la faccio neanche
visualizzare nascondendola via CSS; possiamo sovrascrivere questo comportamento del
“nascondere” offrendo un contenuto alternativo.
Nell'utilizzo si procede in questo modo:
1) includo la libreria
A questo punto ho a disposizione un oggetto “Modernizr” che posso utilizzare per la
feature detection ad esempio:
// === Verifico il canvas // === Verifico LocalStorage e Session Storage
if (Modernizr.canvas) { if (Modernizr.localstorage && Modernizr.sessionstorage)
// canvas feature {
} // storage feature
else { }
// fallback else {
} // fallback
}
Pagina 1HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte
Feature Detection con Modernizr
Uso di Modernizr
Gli elementi che consente di controllare Modernizr si possono riassumere nella seguente
tabella:
HTML5 features Modernizr property HTML5 features Modernizr property
(class) (class)
Application cache applicationcache SVG svg
Audio audio.type (ogg, mp3, SVG clip paths svgclippaths
wav, m4a) Touch events touch
Canvas canvas
Video video.type (ogg, webm,
Canvas text canvastext h264)
Drag and drop draganddrop WebGL webgl
Form input attributes input.attributeName Web sockets websockets
Form input elements inputtypes.elementName Web SQL database websqldatabase
Geolocation geolocation Web workers webworkers
IndexedDB indexeddb
Inline SVG inlinesvg
Local storage localstorage
Session storage sessionstorage
Pagina 1HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte
Feature Detection con Modernizr
Uso di Modernizr
Ovviamente possiamo sapere la disponibilità quando l'oggetto “window” è totalmente
inizializzato, quindi:
window.onload = function() {
// === Codice da eseguire per la verifica
};
...
Pagina 1HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte
Feature Detection con Modernizr
Uso di Modernizr
Ovviamente possiamo sapere la disponibilità quando l'oggetto “window” è totalmente
inizializzato, quindi:
window.onload = function() {
// === Devo verificare se ho l'autofocus supportato
// --- Recupero gli elementi HTML-Form e HMTL-Input
var form = document.forms[0],
inputs = form.elements;
// --- Verifoco che ho questa funzionalità
if (!Modernizr.input.autofocus) {
inputs[0].focus();
}
// --- Se non è supportata tento di emularla (se posso farlo ...)
};
Pagina 1HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte
Feature Detection con Modernizr
Uso di Modernizr
Inoltre possiamo utilizzare un altro metodo interessante di Modernizr è “load” che è un
resource loader (CSS e JavaScript) che è stato fatto appositamente per lavorare fianco a
fianco con Modernizr.
Ci permette agevolmente di gestire il javascript e il CSS alternativo in caso di “failure” di
una “feature”, ad esempio il seguente codice, ci dice se includere jQuery da remoto o
locale (nel caso fossimo offline):
Modernizr.load([
// === Gestisco il caricamento da remoto o locale
{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
complete: function () {
if ( !window.jQuery ) {
Modernizr.load('js/libs/jquery-1.7.1.min.js');
}
}
},
// === Verifico dell'autofocus
{
test: Modernizr.input.autofocus,
nope: 'js/feature-emulation.js',
complete: function() {
// --- Richiamo un eventuale codice di inizializzazione
}
}
]);
Pagina 1HTML5 and Next RIA Apps – Esplorazione di Javascript – Seconda Parte
Feature Detection con Modernizr
Uso di Modernizr
Il metodo “load” è un'estenzione di un altro framework “inglobato” in Modernizr che è
YepNope.js: http://yepnopejs.com/
I meccanismi implementabili sono:
Modernizr.load([{
test : /* boolean(ish) - Something truthy that you want to test */,
yep : /* array (of strings) | string - The things to load if test is true */,
nope : /* array (of strings) | string - The things to load if test is false */,
both : /* array (of strings) | string - Load everytime (sugar) */,
load : /* array (of strings) | string - Load everytime (sugar) */,
callback : /* function ( testResult, key ) | object { key : fn } */,
complete : /* function */
},
...
]);
Pagina 1Puoi anche leggere
