Cenni su ECMAscript/Javascript

Transcript

Cenni su ECMAscript/Javascript
Vincenzo Della Mea
(PWLS Appendice B)
Complementi di Tecnologie Web A.A. 2011-2012 – M. Franceschet,V.Della Mea e I.Scagnetto - 1
Sommario
•  Scripting client e server side
– principi
•  Scripting client-side
– Javascript
– a cosa serve? •  Il linguaggio Javascript
– Basi
– Esempi
Linguaggi di scripting
•  linguaggi di programmazione per automazione,
manipolazione, e personalizzazione delle funzioni fornite da
un sistema software –  (che di solito incorpora il linguaggio di scripting stesso) •  Web scripting: il sistema software è costituito da client e
server Web (browser, server http)
–  client-side: il linguaggio fornisce costrutti per interagire con ciò
che appare nel browser (finestre, documenti HTML e CSS) e per
gestire input/output utente
–  server-side: il linguaggio fornisce costrutti per interagire con le
informazioni disponibili al server http (dati client, richieste,risorse
locali)
•  i programmi sono contenuti, direttamente o
indirettamente, nei file HTML (ed interpretati
rispettivamente dal browser o da un modulo del server) Complementi di Tecnologie Web A.A. 2011-2012 – M. Franceschet,V.Della Mea e I.Scagnetto - 3
Schema globale di funzionamento
CLIENT
SERVER
http script FILE XHTML
server->client
FILE XHTML
interpretato
FILE XHTML
contenente:
contenente:
contenente:
da un script output
script output
script
modulo
(xhtml)
(xhtml)
server
side
del server
script output,
dhtml,
script
script
interpretato interazione,
...
client
side
client
side
nel browser
script
output
script
output
script
(xhtml)
(xhtml)
server
side
ECMAScript/Javascript
•  in principio, sia client- che server-side
–  usato essenzialmente lato client
•  ECMAScript è il nome standard (~) di Javascript
(Netscape) e Jscript (Microsoft)
•  specifica ECMA-262: http://www.ecmainternational.org/
•  Caratteristiche:
–  linguaggio orientato agli oggetti (con semplificazioni)
–  sintassi simile a Java
–  in congiunzione con DOM (Document Object Model)
permette il cosiddetto Dynamic HTML (DHTML): pagine
interattive e contenuto modificabile
•  Nuova vita con
AJAX
A cosa serve?
•  a controllare ed elaborare l’input utente nei form,
prima che venga spedito al server;
•  a creare pagine che funzionano diversamente su
browser diversi (per venire incontro alle varie
incompatibilità);
•  a creare piccole animazioni (es “rollover images”,
ecc.)
•  a interagire con l’utente in generale;
•  a interagire con aspetti del browser
(dialoghi,nuove finestre, ecc.)
•  ... •  Applicazioni Complementi
web “ricche”
con
AJAX
di Tecnologie Web A.A. 2011-2012 – M. Franceschet,V.Della Mea e I.Scagnetto - 6
ECMAscript: basi
•  Un programma è una collezione di oggetti comunicanti.
•  Gli oggetti sono insiemi di proprietà con attributi che
spiegano come usarle (es.: ReadOnly).
•  Proprietà: contengono oggetti, valori primitivi o metodi.
•  Valori primitivi: tipi predefiniti Undefined, Null, Boolean,
Number, String.
•  Oggetti predefiniti: Global, Object, Function, Array, String,
Boolean, Number, Math, Date, RegExp, Error,
–  DOM: oggetti associati al browser ed alle pagine visualizzate,
input/ouput.
• 
• 
• 
• 
Metodi: funzioni associate agli oggetti.
Usuali operatori predefiniti (operazioni, confronti, ecc.).
Funzioni definibili dall’utente.
Niente input/output (dato dall’ambiente ospite, es.: DOM).
Dove vanno gli script?
•  un programma ECMAscript si chiama script;
•  di solito è costituito da una o più funzioni
richiamate in base all’input dell’utente;
•  è possibile inserire gli script:
– nell’intestazione o nel corpo di un documento
XHTML (tag <script>), – in un file esterno da richiamare tramite URI,
– direttamente in appositi attributi degli elementi
XHTML.
Il solito primo programma...
...
<html>
<head>
<title>Esempi ECMAscript</title>
</head>
<body>
che linguaggio usiamo?
<h1>Primo esempio</h1>
<p>testo scritto con ECMAscript:</p>
<script type="text/javascript">
document.writeln("<p>Buongiorno, mondo</p>");
</script>
</body>
writeln è un suo metodo,
</html>
e scrive una linea di testo
document è un oggetto definito nel DOM,
e si riferisce al documento HTML o XHTML
Secondo esempio
<h2>Secondo esempio</h2>
<p>Viene mostrato un dialog box...</p>
window.alert("Buongiorno, mondo");
</script>
alert è un suo metodo,
e visualizza un dialogo
window è un oggetto definito nel DOM,
e si riferisce alla finestra corrente
Terzo esempio
<h2>Terzo esempio</h2>
<p>Usiamo delle variabili...</p>
var oggi = new Date(); + è un operatore predefinito
var testo="Oggi è il : "
+oggi.toString();
document.writeln(testo);
</script>
toString è un operatore per la conversione
Date è un oggetto predefinito; se il costruttore new
è usato senza argomenti, restituisce la data corrente
Visibilità delle variabili
•  In Javascript le variabili possono essere:
–  globali (una variabile dichiarata al di fuori di tutte le funzioni,
con o senza parola chiave var, è globale: può essere usata
ovunque nel documento);
–  locali (una variabile dichiarata all’interno di una funzione è
locale: può essere usata solo all’interno della funzione in cui è
definita).
•  Eccezione: una variabile dichiarata all’interno di una
funzione senza parola chiave var è accessibile
globalmente (ma solo dopo che la funzione che la
dichiara viene richiamata).
Quarto esempio
<h2>Quarto esempio</h2>
<p>Un possibile input dell'utente...</p>
<p onmouseover='window.alert("Non
farlo...")'>Cosa succede quando passo con
il mouse su questo paragrafo?</p>
onmouseover è un attributo comune (come onclick, onload, ecc.).
Il suo valore permette di richiamare una funzione Javascript
quando il mouse passa sull’elemento.
Quinto esempio
<head><title>Esempi ECMAscript</title>
function quintoesempio() {
definisco una funzione
var adesso = new Date();
nello head
window.alert(adesso.toString());
}
la richiamo nell’elemento
</script>
</head>
<body>
<h2>Quinto esempio</h2>
<p>Come prima, più elegante...</p>
<p onclick="quintoesempio()">Per favore, che
ora è?</p>
DOM - Document Object Model
•  è un’interfaccia indipendente da piattaforma e
linguaggio di programmazione che permette di
accedere a struttura, contenuto e stile di un
documento web (XHTML, XML)
•  due raccomandazioni W3C
•  scopo:
–  accedere ai documenti caricati dal browser
–  modificare dinamicamente il contenuto delle pagine
(struttura, contenuto, stile)
•  in ECMAscript, viene implementata da una serie di
oggetti che rappresentano documenti, finestre,
eventi, ecc.
W3C DOM
•  Diversi livelli:
–  Level 1: Core, HTML
–  Level 2: Core, Viewes, Events, Style, etc
•  i browser non implementano tutto
correttamente!
–  ma si stanno adeguando alla versione W3C
•  Compatibilità dei diversi browser:
http://www.quirksmode.org/compatibility.html
Oggetti importanti
•  document: documento HTML/XHTML, contenuto in
un oggetto di tipo window e contenente un numero
arbitrario di elementi
–  childNodes, doctype, URL, title, StyleSheets, ...
•  element : elementi XHTML (XML) in un documento.
Alcuni elementi speciali hanno metodi speciali (body,
table)
–  attributes, className, childNodes, style, ...
•  nodeList: array di elementi
•  attribute: attributi di un elemento
•  window: finestra in cui è visualizzato il documento
–  name, location, document, locationBar, history, ...
•  event: evento di input (gestione mouse, tastiera, …)
Sesto esempio: head <head><title>Esempi DOM</title>
function elemento(el) {
testo = document.createTextNode(el.tagName);
tipo = document.getElementById("tipo");
tipo.replaceChild(testo,tipo.firstChild);
}
</script>recupero l’elemento
con id=tipo
</head>
creo un nodo testuale
rimpiazzo il primo (e unico)
con contenuto uguale
figlio di tipo con il nome del tag
al nome del tag di el
Sesto esempio: body
<body>
<h1 onclick="elemento(this);">Esempi DOM</h1>
<h2 onclick="elemento(this);">Primo esempio</h2>
<p>Sei posizionato su un elemento di tipo <strong
id="tipo">-</strong>.</p>
<p onclick="elemento(this);">Questo è un
paragrafo.</p>
<ul>
<li onclick="elemento(this);">questo è un elemento
di una lista</li>
<li onclick="elemento(this);">anche questo</li>
</ul>
<h3 onclick="elemento(this);">Una intitolazione di terzo
livello</h3>
<p onclick="elemento(this);">seguita da un paragrafo</p>
ho associato l’azione “elemento(this)” tramite evento onclick.”this”
è l’elemento stesso, che viene passato come argomento
Sesto esempio: discussione
•  la funzione elemento(el) ricava il nome del tag
dell’elemento el (come stringa) e lo sostituisce al
contenuto dell’elemento il cui id è “tipo”.
–  è diverso dall’uso di document.writeln!
•  per fare ciò, estrae l’elemento il cui id è “tipo” dalla
lista degli elementi del documento
•  se la richiamo tramite onclick=“elemento(this)”,
l’argomento è uguale all’elemento chiamante e
quindi viene stampato il suo tag.
Settimo esempio: rollover
•  tipica applicazione di Javascript
•  quando passo con il mouse su un’immagine,
essa cambia
•  si può fare in tanti modi
– ne vediamo uno compatibile con W3C DOM
– non adatto ai browser più vecchi
Settimo esempio: head
<head><title>Esempi DOM</title>
function normale() {
imm = document.getElementById("cambia");
imm.setAttribute("src", "http://
latoserver.dimi.uniud.it/~vdm/icona1.png ");
}
function sparisci() {
imm = document.getElementById("cambia");
imm.setAttribute("src", "http://
latoserver.dimi.uniud.it/~vdm/icona2.png ");
}
</script>
Settimo esempio: body
<body>
<h1>Esempio di rollover image</h1>
<p>Utilizzando il DOM W3C</p>
<img id="cambia" src="icona1.png"
onmouseover="sparisci();"
onmouseOut="normale();">
</body>
•  dichiaro due funzioni che impostano l’attributo src
dell’elemento con id “cambia” all’una o l’altra
immagine
•  utilizzando i due attributi onMouseOver e
onMouseOut, associo le due funzioni prima
dichiarate all’elemento img con id “cambia”
DOM e Javascript (2)
Form, esempi
Strutture di controllo
•  Sequenza: {istr1; istr2; ….}
•  if(condizione) istruzione else if (cond2) istruzione2
else istruzione3;
•  for(varespr; espr1;espr2) istruzione;
–  es: for(var i=0; i<max; i++) document.writeln(i);
•  do istruzione while(condizione);
–  es: do x=x+1 while (x<75);
•  while(condizione) istruzione; –  es: while (x<75) do x=x+1;
•  (break, continue, for-in, …..)
Attenzione!
•  ai cicli infiniti… non c’è modo di uscirne
facilmente!
Input utente: i form
•  un form è un elemento XHTML che
contiene elementi speciali, detti controlli,
che permettono l’input dall’utente:
– campi di testo, bottoni, radio button,
checkbox, etc.
– l’utente “completa” il form
– i dati così ottenuti vengono di solito inviati
ad un server per elaborazioni successive
<form>
•  <form action=“URI della risorsa che manipolerà i
dati”
method=“post|get” (metodo http di invio)
enctype=“tipo codifica” (es. “application/xwww-form-urlencoded”)
id=“…” name=“….”
… >controlli</form>
Controlli/1
•  <label for=“controllo” accesskey=“carattere”…>
–  etichetta per il controllo con id specificato in for=...
•  <input type=“text|password|checkbox|radio|submit|
reset|file|hidden|image|button” id=“…” name=“…”
value=“valoreiniziale” …. />
–  type=“text”: campo di testo
–  type = “submit’: bottone di invio
–  type=“reset”: bottone di cancellazione
–  type=hidden: valori “nascosti” passati al server
–  ….
Controlli/2
<select …size="dimensione" multiple="">
<option selected="" value="val1">Valore 1</
option>
<option value="val2">Valore 2</option>
…
</select>
–  selezione tra più item (es. tramite menu popup o lista di
selezione), eventuale selezione multipla ed eventuale
opzione preselezionata
•  <textarea ….rows="righe" cols="colonne">testo
editabile</textarea>
–  input di testo su più linee
Esempio 8: un form
<form action="" method="post" id="modulo" ><p>
<label for="nome">Nome:</label>
<input type="text" id="nome" />
<label for="cognome">Cognome:</label>
<input type="text" id="cognome" />
<br />
<label for="eta">Età</label>
<input type="text" id="eta" />
<label for="via">Indirizzo</label>
<input type="text" id="via" size="40" />
<br />
<input type="submit" value="Spedisci" /></p>
</form>
Es.8: aggiungiamo una selezione
<label for="condizione">Condizione:</label>
<select name="condizione" id="condizione">
<option value="studente">Studente</option>
<option value="lavoratore">Lavoratore</option>
<option value="pensionato">Pensionato</option>
<option value="disoccupato">Disoccupato</option>
</select>
<br />
Form e Javascript
•  attributi che permettono di agire in
corrispodenza di eventi utente che
accadono nel form o nei controlli:
•  in <form>: – i soliti + onsubmit, onreset, onkeypress,
onkeydown, onkeyup, …
•  nei controlli: – i soliti + onfocus, onblur, onselect, onchange,
onkeypress, onkeydown, onkeyup,...
Es.8: aggiungiamo delle verifiche
•  In head:
function controlla() {
f = document.forms["modulo"];
c = f.elements;
if(!c["nome"].value) window.alert("Attenzione: manca il nome!");
if(!c["cognome"].value) window.alert("Manca il cognome!");
anni = (c["eta"].value)/1;
if(!anni||(anni<=0)||(anni>120)) window.alert("eta sbagliata");
}
•  In <form >:
...onsubmit=“controlla();return false” quando si cerca di spedire il form, viene verificata la presenza di
nome cognome ed età numerica <120
•  In head:
Es.8-2: modifica
function controlla() {
c = f.elements;
errore="";
if(!c["nome"].value) errore=errore+"Attenzione: manca il nome!\n";
if(!c["cognome"].value) errore=errore+"Manca il cognome!\n";
anni = (c["eta"].value)/1;
if(!anni||(anni<=0)||(anni>120)) errore=errore+”Eta' sbagliata";
if(errore) window.alert(errore);
}
•  In <form >:
...onsubmit=“controlla();return false” quando si cerca di spedire il form, viene verificata la presenza di nome
cognome ed età numerica <120
Es.8-3: configurare la selezione...
•  In head:
function impostaopzioni()
{
c = f.elements;
anni=(c["eta"].value)/1;
if(anni<=16) c["condizione"].selectedIndex = 0;
if(anni>=65) c["condizione"].selectedIndex = 2;
}
•  Nel form:
<input type="text" id="eta" onBlur="impostaopzioni();" />
Quando si esce dal campo eta, con Javascript si pre-seleziona
un elemento del menu condizione
•  In head:
Esempio 9: lo stile
function cambia() {
f = document.forms["modulo2"];
c = f.elements;
dove = document.getElementById("qui");
dove.style.color = c["colore"].value; }
•  In body:
<form action="" method="post" id="modulo2">
<p id="qui">
<label for="colore">Colore:</label>
<select id="colore" size="1" onchange="cambia()">
<option selected="" value="black">Nero</option>
<option value="yellow">Giallo</option>
<option value="red">Rosso</option>
<option value="green">Verde</option>
</select></p></form>
Trucco utile…
Per nascondere gli script Javascript ai browser
che non li supportano:

</script>

Cenni su ECMAscript/Javascript

Transcript

Documenti analoghi

Reindirizzamento di Url

Mash-up ovvero l`arte (postmoderna) del

ILPAGE RANK EISUOIANTENATI

I Com`è stata la prova?

immagine

Lezione I Lezione II Lezioni III Lezioni IV Lezione V Lezione VI

UMORISMO e la Chiesa in Italia - in preparazione

Complementi di Chimica (6 CFU)

Cavalletto Porta