Java Script

Università di Bergamo
Facoltà di Ingegneria
Applicazioni Internet B
Paolo Salvaneschi
B5_2 V1.7
Java Script
Il contenuto del documento è liberamente utilizzabile dagli studenti, per studio personale e per supporto a lezioni universitarie.
Ogni altro uso è riservato, e deve essere preventivamente autorizzato dall’ autore.
Sono graditi commenti o suggerimenti per il miglioramento del materiale
B5 Java Script
Paolo Salvaneschi
1
INDICE
•
•
•
•
•
•
JavaScript nei browser Web - DOM
Finestre e frame
L’oggetto document
L’oggetto form
JavaScript e CSS
Gestione degli eventi
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
2
2
JavaScript nei browser Web - DOM
• Contesto di esecuzione e gerarchia di oggetti
lato client
• L’oggetto window
– Rappresenta la finestra (o frame) in cui è
visualizzato il documento
• L’oggetto document
– Rappresenta il documento HTML
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
3
3
JavaScript nei browser Web - DOM
self, window,
parent, top
vari oggetti window
navigator
oggetto navigator
frames[]
array di oggetti window
location
oggetto location
Finestra
corrente
history
oggetto history
document
oggetto document
screen
oggetto screen
La gerarchia di oggetti JavaScript
DOM Document Object Model
forms[]
array di oggetti form
anchors[]
array di oggetti anchor
links[]
array di oggetti link
images[]
array di oggetti image
applets[]
array di oggetti applet
elements[]
array di elementi
di moduli HTML:
Button
Checkbox
FileUpload
Hidden
Password
Radio
Reset
Select
Submit
Text
Textarea
options[]
array di
oggetti option
enbeds[]
array di oggetti incorporati
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
4
4
JavaScript nei browser Web - DOM
• Nella figura sono rappresentate solo le
proprietà che si riferiscono ad altri oggetti
(esistono altre proprietà)
• Le variabili globali sono proprietà
dell’oggetto window
– Ogni volta che un documento è caricato in una
finestra o frame l’oggetto window è riportato al
suo stato di default
– Tutte le variabili e funzioni definite dagli script
persistono fino a che il documento corrente è
sostituito da uno nuovo
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
5
5
JavaScript nei browser Web - DOM
• DOM Document Object Model
• Interfaccia di programmazione per
rappresentare, accedere e manipolare i vari
elementi che compongono il documento
– DOM Internet Explorer
– DOM Netscape
– DOM W3C
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
6
6
JavaScript nei browser Web - DOM
• Modello di programmazione guidato da
eventi
• Eventi di interazione persona/macchina
definiti in HTML e gestiti dal browser che
attiva codice JavaScript
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
7
7
Finestre e frame
• L’oggetto window
• Proprietà di window
–
–
–
–
self, window riferimento all’oggetto window stesso
status testo visualizzato nella riga di stato del browser
name nome della finestra
document riferimento all’oggetto che rappresenta il
documento HTML visualizzato nella finestra
– frames[] array di oggetti window che rappresentano i
frames presenti nella finestra
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
8
8
Finestre e frame
– history riferimento all’oggetto che rappresenta
l’elenco cronologico delle pagine visualizzate
– navigator riferimento all’oggetto che fornisce
informazioni sul browser utilizzato
– location l’URL del documento attualmente caricato
nella finestra o frame. Se si imposta la proprietà ad un
URL differente, il browser carica il relativo documento
– screen riferimento all’oggetto che fornisce
informazioni sullo schermo utilizzato
–…
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
9
9
Finestre e frame
• Metodi di window
– alert() visualizza messaggio in finestra di
dialogo con pulsante OK di chiusura
– confirm() visualizza domanda in finestra di
dialogo con pulsanti OK e annulla. Restituisce
true / false
– prompt() visualizza una finestra di dialogo che
riceve una stringa
– close() open() print()
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
10
10
Finestre e frame
– moveBy(dx,dy) sposta in una posizione relativa
dx n. pixel per cui spostare verso destra
dy n. pixel per cui spostare verso basso
– moveTo(x,y) sposta in una posizione assoluta
– resizeBy(dw, dh) ridimensiona la finestra
dw n.pixel di cui aumentare la larghezza
dh n.pixel di cui aumentare l’altezza
– resizeTo(width, height) ridimensiona a altezza e
larghezza definita
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
11
11
Finestre e frame
– scrollBy(dx, dy) fa scorrere un documento nella
finestra
dx pixel a destra
dy pixel verso il basso
– scrollTo(x, y)
x, y coordinate orizzontali e verticali del documento che
vengono visualizzate nell’angolo superiore sinistro
– focus() blur() richiedono o cedono il focus di tastiera per la
finestra
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
12
12
Finestre e frame
– setInterval(code, interval) Esegue il codice code
specificato a intervalli interval (in msec). Restituisce un
valore che può essere passato a clearInterval(intervalId)
per rimuovere il timeout
– clearInterval(intervalId)
– setTimeout(code,delay) Esegue il codice code
specificato dopo un tempo delay (in msec). Restituisce un
valore che può essere passato a clearTimeout(timeoutId)
per rimuovere il timeout
– clearTimeout(timeoutId)
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
13
13
Finestre e frame
window.open(url,name,features,replace)
Restituisce il riferimento all’oggetto finestra
url stringa
URL visualizzato nella nuova
finestra (se omesso, finestra vuota)
name stringa
nome della nuova finestra (se
nome finestra già esistente restituisce solo il
riferimento alla finestra e ignora features)
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
14
14
Finestre e frame
features stringa caratteristiche della finestra
“caratteristica = valore,caratteristica = valore ….”
height
width
resizable (= yes,no)
Se la caratteristica non è presente
menubar (= yes,no)
nella stringa si assume no
toolbar (= yes,no)
scrollbars (= yes,no)
status(= yes,no)
…
replace boolean (=true : non crea nuova voce in
cronologia ma sovrascrive)
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
15
15
Finestre e frame
<BODY>
<SCRIPT>
//parametri
var w = 200; // larghezza finestra in pixel
var h = 300; // altezza finestra in pixel
var x = 400 //coordinata orizz. angolo sup sin
var y = 300 //coordinata vert. angolo sup sin
var win1 = window.open
("Es1_js_tagscript.htm", "finestra1","width=" + w + ",height=" + h );
win1.moveTo(x,y);
</SCRIPT>
<form>
<input type="button" value="Chiudi la finestra" onclick="win1.close();">
</form>
</BODY>
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
16
16
Finestre e frame
<BODY>
<SCRIPT>
var w = 400; //larghezza finestra in pixel
var h = 200; //altezza finestra in pixel
var x = 400; //coordinata orizz. angolo sup sin
var y = 300; //coordinata vert. angolo sup sin
var win1 = window.open
("", "finestra1","width=" + w + ",height=" + h+
",menubar=yes, toolbar=yes,status=yes,scrollbars=yes,resizable=yes");
win1.moveTo(x,y);
…scrivi nella nuova finestra………..
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
17
17
Finestre e frame
• Frame
• Ogni window possiede una proprietà
frames[], array di oggetti window
• Relazioni tra frames
– frames[0] così una finestra (frame) si riferisce
al suo primo frame
– parent così il frame si riferisce alla finestra
(frame) genitore
– top così il frame si riferisce alla finestra di più
alto livello nella gerarchia
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
18
18
Finestre e frame
• Relazioni tra frame
window
frames[0]
frames[1]
parent.frames[0]
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
19
19
Finestre e frame
• Riferimento al frame come posizione o
come nome
<frameset cols="200,*">
<frame name="indice" src=“file_indice.htm">
<frame name="contenuto" src=“file_contenuto.htm">
</frameset>
<p><a href="es23_linkinterno.htm" target="contenuto"> TESTO1</a></p>
window
frames[0]
frames[1]
parent.frames[1]
B5 Java Script
B5 Java Script
parent.frames[1]
parent.contenuto
Paolo Salvaneschi
Paolo Salvaneschi
20
20
L’oggetto document
• Ogni oggetto window ha una proprietà
document
• L’oggetto document fornisce a JavaScript
l’accesso interattivo al documento HTML
– Proprietà del documento
– Oggetti che compongono il documento e loro
proprietà
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
21
21
L’oggetto document
• Proprietà di document
–
–
–
–
–
–
–
title
bgcolor fgcolor (colore sfondo, colore testo)
…
images[]
<IMG>
forms[]
<FORM>
anchors[]
<A name=“name”>
links[]
<A href……> (se c’è name è
creato anche un anchors)
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
22
22
L’oggetto document
• Proprietà di document
– applets[]
<APPLET>
–…
– document.all[name] Internet Explorer 4. Array che
contiene nell’ordine tutti gli elementi della pagina
HTML identificati per numero o nome (name, id)
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
23
23
L’oggetto document
• Accesso agli oggetti componenti il
documento
La prima form del documento
<FORM name="f1">
<INPUT type="button" value="premere">
</FORM>
document.forms [0] //si riferisce al modulo per posizione
document.f1
//si riferisce al modulo per nome
document.forms.f1 //si riferisce all’oggetto form
//come proprietà denominata dell’array forms
document.forms["f1"] //idem con sintassi array
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
24
24
L’oggetto document
• Metodi di document
– open() apre un flusso di output su cui scrivere
con write()
– close() chiude il flusso di dati e visualizza
l’output
– write() aggiunge dati ad un documento
– writeln() idem + carattere di nuova riga
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
25
25
L’oggetto document
Documenti generati dinamicamente
<BODY>
<SCRIPT>
var w = 400; //larghezza finestra in pixel
var h = 200; //altezza finestra in pixel
var x = 400; //coordinata orizz. angolo sup sin
var y = 300; //coordinata vert. angolo sup sin
var win1 = window.open
("", "finestra1","width=" + w + ",height=" + h+
",menubar=yes, toolbar=yes,status=yes,scrollbars=yes,resizable=yes");
win1.moveTo(x,y);
…
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
26
26
L’oggetto document
…
win1.document.open();
win1.document.write("<h2>Testo scritto nella nuova finestra</h2>");
win1.document.write("<p>Nel mezzo del cammin di nostra vita.......</p>");
win1.document.close();
</SCRIPT>
<form>
<input type="button" value="Chiudi la finestra" onclick="win1.close();">
</form>
</BODY>
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
27
27
L’oggetto form
• Oggetto form
• Ogni form (<form> </form>) è un elemento
di forms[] nell’ordine in cui appaiono nel
documento
• Proprietà elements[]
– Tutti gli oggetti che rappresentano i vari
elementi di input della form, nell’ordine in cui
appaiono nel documento
– document.forms[0].elements[1] il secondo
campo della prima form
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
28
28
L’oggetto form
• Oggetto form
– document.forms.lenght numero degli elementi
• Metodi
– submit() inoltro della form
– reset() reset della form
• Form e elementi di form possono essere
identificati per nome (attributo tag HTML)
– Form di nome calcola con elemento di nome
numero :
document.calcola.numero
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
29
29
L’oggetto form
• Tutti gli elementi di form hanno le seguenti
proprietà:
– type (lettura) identifica il tipo di elemento
– name (lettura) stringa specificata dall’attributo
HTML name
– form (lettura) riferimento all’oggetto form in
cui è contenuto
– value (lettura/scrittura) valore dell’elemento
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
30
30
L’oggetto form
• Tipi di elementi
<input type="text" name=“cognome" size="30">
<textarea name="Consigli" rows="7" cols="25 wrap>
document.forms[0].cognome.value
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
31
31
L’oggetto form
<select name=“anni">
<option>meno di un anno</option>
<option>da uno a tre anni</option>
<option>da tre a dieci anni</option>
document.forms[0].anni.selectedIndex
Proprietà che specifica per numero l’opzione selezionata
document.forms[0].anni.options[1].text
Testo della seconda opzione
document.forms[0].anni.options[1].selected
Stato di selezione della seconda opzione
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
32
32
L’oggetto form
<input type="radio" name=“tipofoto"
value="tipo1">Bianco/Nero
<br>
<input type="radio" name=“tipofoto" value="tipo2"
checked>Colore
document.forms[0].tipofoto[0].checked
Proprietà che specifica se l’elemento è attivo
(Booleano: true se pulsante attivo)
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
33
33
L’oggetto form
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function eleva_al_quadrato()
{
var x = document.calcola.numero.value;
document.calcola.risultato.value = x*x;
}
</SCRIPT>
</HEAD>
…
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
34
34
L’oggetto form
</HEAD><BODY>
<H1>Funzione eleva al quadrato</H1>
<form name="calcola">
<table>
<tr> <td>Numero:</td>
<td><input type="text" name="numero" size="12"
onchange="eleva_al_quadrato();"></td>
</tr>
<tr><td>Numero al quadrato:</td>
<td><input type="text" name="risultato" size="12"></td>
</tr>
<tr>
<td><input type="button" value="Calcola" onclick="eleva_al_quadrato();"></td>
</tr>
</table>
</form>
</BODY></HTML>
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
35
35
L’oggetto form
Controllo dell’input di una form
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
36
36
L’oggetto form
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
//Funzione di servizio
//Restituisce true se la stringa contiene solo spazi bianchi (blank,a capo, tab)
//string.charAt(n) restituisce l'ennesimo carattere di una stringa
//string.lenght
intero che contiene il n. di caratteri di una stringa
function isblank(s) {
for(var i = 0; i < s.length; i++)
{var c = s.charAt(i);
if ((c != ' ') && (c != '\n') && (c != '\t')) return false;}
return true;
}
…
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
37
37
L’oggetto form
//Funzione di verifica della form
function verify(f) {
var msg;
var empty_fields = "";
//esamina tutti campi della form
//per ogni campo vuoto scrive il nome del campo in una stringa
//f.lenght numero di elementi nella form passata con this
for(var i = 0; i < f.length; i++)
{
var e = f.elements[i];
if ((e.type == "text") && !e.optional)
{
if ((e.value == "") || isblank(e.value)) {
empty_fields += "\n
" + e.name;}
}
}
…
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
NB 1
NB 2
38
38
L’oggetto form
//se la stringa dei campi vuoti è vuota restituisce true
//altrimenti visualizza il messaggio e restituisce false
if (!empty_fields) return true;
if (empty_fields){
msg = "I seguenti campi obbligatori sono vuoti:"
+ empty_fields + "\n";
alert(msg);
return false; }
}
</SCRIPT>
true false
…
Vedi gestione eventi
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
39
39
L’oggetto form
<BODY>
<H2>Controllo dei campi obbligatori</H2>
<FORM onsubmit="
this.Nome.optional = false;
this.Cognome.optional = false;
return verify(this);">
Nome: <INPUT type="text" name="Nome">
Cognome: <INPUT type="text" name="Cognome"><br>
<INPUT type="submit" value="Spedisci i dati">
</FORM>
</BODY>
</HTML>
true false
Vedi gestione eventi
NB 2
Attributo dell’oggetto
“campo di input” di
nome “Nome”
this
Vedi gestione eventi
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
40
40
JavaScript e CSS
• Utilizzare JavaScript per cambiare
dinamicamente gli attributi di stile applicati ai
singoli elementi di un documento
– La proprietà style di un elemento permette di
scrivere gli stili associati all’elemento (stili in
linea-come se fossero associati con l’attributo
style)
– E’ possibile leggere gli stili associati ad un
elemento solo se associati con l’attributo style (non
con i fogli stile)
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
41
41
JavaScript e CSS
<HTML><HEAD>
<SCRIPT language="JavaScript">
function uno()
{document.all.container1.style.visibility="visible";
document.all.container2.style.visibility="hidden";}
function due()
{document.all.container1.style.visibility="hidden";
document.all.container2.style.visibility="visible";}
</SCRIPT>
<STYLE type="text/css">
#container1 {
position:absolute;
top: 2in;
left: 2in;
width: 2in;
visibility: visible;
}
…………
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
42
42
JavaScript e CSS
#container2 {
<FORM>
position:absolute;
<INPUT name="Adamello1" type="button"
top: 2in;
value="Adamello"
left: 2in;
onclick="uno()">
width: 2in;
<INPUT name="Adamello2" type="button"
visibility: hidden;
value="Lobbie"
}
onclick="due()">
</STYLE>
</FORM>
</HEAD>
</BODY>
<BODY>
</HTML>
<H1>Scegli il luogo</H1>
<DIV id="container1">
<IMG src="..\immagini\ada_sal.jpeg" alt="Adamello“ width="300" height="300">
<P><b>l'Adamello da sud</b></P>
</DIV>
<DIV id="container2">
<IMG src="..\immagini\ada_lobbie.jpeg" alt="Corno Bianco“ width="300" height="300" >
<P><b>Le Lobbie da Nord</b></P>
</DIV>
……………………..
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
43
43
Gestione degli eventi
• Schema di gestione degli eventi
– Ogni volta che un fatto significativo definito
(es. fine caricamento) accade ad un documento
o ad una sua parte (es. click sul pulsante di invio
form)
– il browser genera un evento
– Un’applicazione JavaScript può registrare un
gestore di eventi per quell’evento (porzione di
codice o funzione associata all’evento)
– Quando si verifica l’evento il browser richiama
il gestore
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
44
44
Gestione degli eventi
• Eventi e tipi di eventi
– Eventi di base (click del mouse)
– Eventi semantici (inoltro di un modulo)
onclick
onload
onfocus
onsubmit
onblur
…
onkeydown
onkeyup
onchange
onmouseover
onmouseout
…
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
45
45
Gestione degli eventi
• Registrazione del gestore di evento
• Si utilizzano gli attributi degli elementi
HTML che associano eventi a tag
• Il gestore è una stringa di codice JavaScript
utilizzata come valore dell’attributo
<input type="button" value=“Premi qui" onclick="alert("grazie");">
<input type="button" value="Calcola" onclick="eleva_al_quadrato();">
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
46
46
Gestione degli eventi
• Restituzione dello stato
• Il codice del gestore di eventi può contenere
un’istruzione return che valuta un’espressione e
restituisce true / false
<FORM method= POST
action="http://nome.server/cgi.bin/programma"
onsubmit="return validateForm();">
• Significato del valore restituito per il
browser:
– All’accadere dell’evento il browser esegue un’azione di
default (es. inviare la form)
– La restituzione di false al browser evita l’esecuzione
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
47
47
Gestione degli eventi
• this
• Richiamare un gestore di eventi significa
chiamare un metodo dell’elemento su cui si è
verificato l’evento
• this si riferisce all’elemento che ha attivato
l’evento
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
48
48
Gestione degli eventi
//Funzione di verifica della form
function verify(f) {
…
//se la stringa dei campi vuoti è vuota restituisce true
//altrimenti visualizza il messaggio e restituisce false
if (!empty_fields) return true;
if (empty_fields){
msg = "I seguenti campi obbligatori sono vuoti:"
+ empty_fields + "\n";
alert(msg);
return false; }
}
</SCRIPT>
Set a true o false lo
…
stato di ritorno
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
49
49
Gestione degli eventi
<BODY>
<H2>Controllo dei campi obbligatori</H2>
<FORM method= GET
action="http://nome.server/cgi.bin/programma"
onsubmit=
"this.Nome.optional = false;
this.Cognome.optional = false;
return verify(this);">
Nome: <INPUT type="text" name="Nome">
Cognome: <INPUT type="text" name="Cognome"><br>
<INPUT type="submit" value="Spedisci i dati">
</FORM>
</BODY>
</HTML>
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
true false
Gestisce stato ritorno
this
L’oggetto Form
50
50
Gestione degli eventi
• Modelli di gestione di eventi:
–
–
–
–
Modello di base portabile
Modello ad eventi standard DOM Level2
Modello Internet Explorer
Modello Netscape
• Problemi di compatibilità tra browser
diversi
B5 Java Script
B5 Java Script
Paolo Salvaneschi
Paolo Salvaneschi
51
51