Introduzione al linguaggio Javascript

Transcript

Appunti a cura del Prof. G.Tombolini
La programmazione Web – Linguaggio JavaScript
La programmazione Web
6-Linguaggio JavaScript
6) Sommario
0. Introduzione
1. Tag <Script>
Il tag HTML per l'inserimento di script all'interno di pagine Web
2. Richiamo degli script
Due modi per inserire script nella pagina: richiamo da un file esterno o direttamente nel documento
3. Browser non compatibili
Il tag <NOSCRIPT> per browser non compatibili con Javascript
4. Il linguaggio
Commenti e punteggiatura, Istruzioni, Dati
5. Oggetti predefiniti
String, Math e Date
6. DOM (Documento Object Model)
Modello ad oggetti del documento
7. Gli eventi
Gli eventi sono utilizzati per richiamare delle istruzioni.
8. Elementi specifici
Proprietà principali di elementi specifici.
9. L’oggetto Form
Gli elementi dei moduli.
10. I Cookie
Gestione dei cookie.
6.0) Introduzione
JavaScript è un linguaggio di programmazione interpretato e leggero, che dispone di funzionalità orientate agli oggetti.
Il nucleo del linguaggio è stato incorporato all'interno del browser. Esso permette di accedere agli oggetti
rappresentativi della finestra di navigazione e del suo contenuto. Esistono tre varianti JavaScript: Lato client, lato server
ed embedded. Quando si parla di JavaScript generalmente si ci riferisce alla variante lato client che è quella più
comune. La versione di JavaScript lato client permette l'inserimento di contenuti eseguibili all'interno di pagine Web;
così le pagine Web non sono più pagine HTML statiche, ma possono comprendere programmi che interagiscono con
l'utente, controllando il browser e creando dinamicamente nuovi contenuti HTML. Sintatticamente JavaScript somiglia
al linguaggio C, C ++ e Java.
6.1) Tag SCRIPT
I browser ricevono le pagine HTML con tutto il contenuto, quando si incontra il tag <SCRIPT> questo viene eseguito
(dal browser lato client) come tutti gli altri tag, dall'alto in basso, ma il suo contenuto è interpretato secondo un codice
diverso. Il formato del tag <SCRIPT> è:
<SCRIPT Language="Javascript"><!-//--></SCRIPT>
6.2) Richiamo degli script
In linea di principio uno script può essere inserito in due modi all'interno di pagina HTML :
• inserendo il codice nel documento;
• caricandolo da un file esterno.
l'uso del file esterno, infatti, è dettato dal limite di dimensione di 32K che deve rispettare una pagina web.
Script esterni
In quest'ultimo caso (è anche quello più semplice a spiegarsi) lo script è salvato in un file con estensione .js. Viene
richiamato con l'attributo SRC del tag SCRIPT:
1
<SCRIPT Language=”Javascript” SRC="nomefile.js">
<!-//-->
</SCRIPT>
Script interni
Se lo script è all'interno del documento, può essere immesso sia nella sezione di intestazione (tra i tag
<HEAD></HEAD>) sia in quella del corpo del documento (tra i tag <BODY></BODY>). Occorre tener presente che
la pagina HTML viene eseguita in ordine sequenziale: dall'alto in basso, per cui la differenza tra le due alternative
esiste: lo script dell'intestazione viene caricato prima degli altri, quello nella sezione body, invece, viene eseguito
secondo l'ordine di caricamento. Bisogna considerare che una variabile o qualsiasi altro elemento di Javascript può
essere richiamato solo se caricato in memoria: tutto ciò che si trova nell'intestazione è quindi visibile agli altri script,
quello che si trova nella sezione BODY è visibile agli script che lo seguono.
ESEMPIO N.1
<HTML>
<HEAD>
<SCRIPT Language="Javascript"> x=1;alert('TESTA='+x); </SCRIPT>
</HEAD>
<BODY>
<SCRIPT Language="Javascript"> x++;alert('CORPO='+x); </SCRIPT>
<SCRIPT Language="Javascript"> x++;alert('CORPO='+x); </SCRIPT>
</BODY>
</HTML>
Esecuzione degli script
Le istruzioni in Javascript possono essere eseguite in diverso modo:
• all'interno degli script, individuati dai tag <SCRIPT>, in maniera sequenziale, per cui l'esecuzione è
automatica;
• caricandoli da file esterni;
• in seguito all'attivazione di un evento (handler) come un click del mouse o la pressione di un tasto;
• in luogo di un nella forma: <A HREF="Javascript:comando">
Esempio
<HTML><HEAD></HEAD>
<BODY>
<SCRIPT Language="Javascript"><!-alert('Script');
//--></SCRIPT>
<a href="#" onmouseover="alert('Hai passato il mouse')">Passa il mouse</a>
<a href="javascript:alert('Hai cliccato')">Clicca qui</a>
</BODY></HTML>
6.3) Browser non compatibili
Potrebbero essere utilizzati anche browser non compatibili con Javascript oppure quelli in cui Javascript è disabilitato.
In questo caso ci viene in aiuto il tag <NOSCRIPT></NOSCRIPT> che può contenere testo e grafica alternativi oppure
un reindirizzamento in pagine statiche, che non usano Javascript, mediante la sequenza:
<NOSCRIPT>
<META HTTP-EQUIV REFRESH CONTENT="0; URL=altrapagina.htm">
</NOSCRIPT>
6.4) Il linguaggio
Javascript è un linguaggio interpretato, l’interprete è incorporato nel browser. E’ un linguaggio orientato agli oggetti.
Un oggetto è formato da un insieme di variabili che costituiscono le proprietà dell’oggetto e di funzioni che
costituiscono i metodi.
Commenti e punteggiatura
I commenti sono racchiusi tra barre e asterischi come nell'esempio sotto riportato:
/*commento*/
e può essere posto su più righe o su una riga singola. Un altro tipo di commento è la doppia barra( // ), presa a prestito
dal linguaggio C, ma è valida solo per commenti posti su una singola riga, anche se non la occupano per intero:
int x: //commento
E’ ammesso l’uso del commento HTML per racchiudere tutti gli script nei tag di commento, facendoli aprire dopo il tag
di script e chiudere prima della chiusura del tag:
<script language="JavaScript">
<!-2
alert("Welcome!");
//-->
</script>
in tal modo si maschera il codice javascript ai vecchi browser che non lo leggono.
Spazi bianchi
Javascript non bada agli spazi bianchi, tranne che per quelli che si trovano nelle stringhe, per cui si possono omettere o
anche aumentare. Il loro uso, tuttavia, con l'identazione aumenta la leggibilità del programma per cui sono vivamente
consigliati.
Apici
Importanti sono gli apici, sia singoli (' ') che doppi (" ").
I doppi apici si adoperano per racchiudere parti di codice Javascript, e, insieme a quelli singoli, a racchiudere anche le
stringhe (sequenze di caratteri), per cui occorre fare attenzione ad annidare due stringhe racchiuse da apici simili, come
ad utilizzare i doppi apici per le stringhe se questi già servono a racchiudere codice Javascript.
Se si desidera che in una stringa appaiano apici doppi o singoli come parte integrante della stringa stessa, si fanno
precedere da una barra rovesciata (\).
Istruzioni
Le istruzioni hanno la responsabilità di controllare il flusso di elaborazione del codice. Esse possono:
• eseguire iterazioni, cioè ripetere una parte di codice per un certo numero di volte;
• eseguire decisioni condizionate;
• richiamare funzioni (si vedrà in seguito cosa sono);
• consentire al percorso dell'esecuzione di essere modificato dinamicamente.
In Javascript ogni istruzione inizia ad ogni nuova riga o con il punto e virgola.
Blocchi di istruzioni
Un'istruzione composta, invece, è formata da un gruppo di due o più istruzioni che formano un gruppo logico, nel senso
che l'esecuzione delle stesse è legata, ad esempio, al verificarsi di una condizione: tali istruzioni sono raggruppate in
blocchi individuati dalle parentesi graffe.
Dati
Sono ammessi dati di tipo stringa come sequenze di caratteri racchiusi tra virgolette o apici. Nelle stringhe si possono
inserire caratteri speciali facendoli precedere dalla barra rovesciata \ (escape). I caratteri sono in Unicode. Le stringhe
sono oggetti della classe string.
Non è obbligatorio dichiarare le variabili; esse verranno instanziate al momento dell’uso. Esse sono di tipo variant. Per
dichiarare una variabile si usa:
var nome[=valore];
è ammessa l’assegnazione multipla: j=k=i=0;
Le variabili definite negli script sono globali. Esistono tipi di dati primitivi (numeri o boolean), tipi riferimento (oggetti)
e stringhe. Gli array sono tipi speciali di oggetti. Si può determinare il tipo di una variabile usando l’operatore typeof
che restituisce il tipo (number, string, boolean, function, object o undefined).
Tipi primitivi
I numeri possono essere interi o reali. I valori booleani sono true (1) o false (0). Alcune conversioni di tipo sono
effettuate automaticamente : da interi a stringhe, da stringhe a valori booleani, da numeri a booleani.
Altre conversioni sono esplicite:
parseInt(s) da stringa a numero
parseFloat(s) da stringa a float
String(n) o toString() da numero a stringa s=string(n) o s=n.toString()
La funzione eval è abbastanza complessa e cerca qualsiasi espressione Javascript valida per trasformarla in numerico:
x=10; y=20; z=30; eval("x+y+z+900")=960
Un numero intero Può essere fornito in tre varianti: decimale, esadecimale e ottale secondo la base con cui viene
rappresentato. Per rappresentare un ottale lo si fa precedere da uno 0, per rappresentare un esadecimale lo
si fa precedere da 0x.
Il valore nullo si ha quando le variabili sono indefinite, cioè quando non vi si assegna nessun valore all'atto della
dichiarazione.
Importante è sottolineare che ad una variabile può essere assegnato anche un oggetto e si può anche creare un oggetto
generico tramite l'enunciato:
nomeoggetto=new Object();
Operatori
Sono gli stessi del linguaggio C (+, -, *, /, % , +=, -=, *=, /=, %=, ++ --) .
3
Per concatenare stringhe occorre l’operatore +.
Anche nei confronti si hanno gli stessi operatori del linguaggio C (==,!=, <, >, <=, >=, &&, ||, ! ).
Operatori sui bit (&, |, ^, ~, <<, >>)
Operatore ternario ? ( esempio max = k > j ? k : j; )
Scope
Le variabili si distinguono in variabili globali e variabili locali.
1. le variabili globali hanno valore per tutto il documento HTML e vanno dichiarate all'inizio dello script e fuori da
ogni funzione: il posto preferibile è nei tag <SCRIPT> della sezione <HEAD> in modo tale da creare i contenitori
dei valori prima di ogni loro utilizzo;
2. le variabili locali hanno valore solo all'interno della funzione in cui sono dichiarate, cioè all'interno del blocco di
codice compreso tra function(){ e la chiusura della parentesi } e vanno dichiarate entro questi blocchi.
Da ciò si ricava che le variabili dichiarate all'interno di parentesi graffe possono essere utilizzate solo in quel
blocco perchè sono variabili locali.
Parole chiave
In Javascript ci sono delle parole chiave che non si possono utilizzare come identificatori di dati, eccone l'elenco:
abstract
do
if
package throw
catch
final
int
short
var*
boolean
double implements private
break
else
import
byte
extends
in
case
false
instanceof
default
throws
char
protected transient
public
true
finally interface
static
void
class
float
long
super
while
const*
for
native
switch
with
return
try
continue function new
goto
null
this
synchronized
Espressioni al volo
Le espressioni possono essere calcolate anche all'interno di tag HTML permettendo di costruire valori "al volo": la
sintassi è:
&{espressione};
un esempio é:
<script>
<!-var tabWidth=50;
//-->
</script>
<table width="&{tabWidth};%">
Istruzioni condizionali
if(espressione) istruzione
[else istruzione]...
switch (espressione) {
case costante1: istruzioni
break;
case costante 2: istruzioni
break;
....
default istruzioni
}
Espressione1 ? Espressione2 :Espressione3
Un esempio molto elegante di operatore ternario è quello che serve a determinare il browser utilizzato:
ie=document.all?1:0
n=document.layers?1:0
Explorer sa interpretare il comando document.all, Netscape sa interpretare document.layers e non viceversa per cui se il
browser interpreta il comando allora sarà la variabile ie oppure n uguale ad 1.
Istruzioni di iterazione
for (inizializzazione; condizione; incremento) istruzione;
Un altro tipo di ciclo è for...in che lavora con le proprietà di un oggetto.
for (indice in oggetto) {istruzioni}
Tale funzione è utilizzata per analizzare le proprietà di un oggetto indicato. E' un'istruzione un po' complessa ma
utilissima per conoscere il valore che in un certo momento posseggono le proprietà di un oggetto.
4
for (i in navigator){
document.write("Proprieta\' :"+i);
document.writeln (" valore: ": +navigator[i]);
}
while (condizione) espressione
che esegue l'espressione finchè la condizione è vera. Per creare un ciclo infinito può andare molto bene l'istruzione:
while (true) {...}
do {istruzioni} while (condizione)
I comandi break e continue servono ad ottimizzare i cicli for e while oltre che all'operatore condizionale if.
Il comando break, infatti, interrompe un blocco di istruzioni saltando alla prima istruzione seguente il blocco
contenente il break.
Il comando continue, invece, indica di continuare il blocco ma interrompendo l'iterazione in quel punto e riprendendo
dall'inizio del blocco.
Array
Gli array sono liste numerate di oggetti, che in Javascript possono anche essere di tipo diverso. Javascript non supporta
le matrici come variabili, ma come oggetti per cui si crea una matrice solo se si dichiara e tale dichiarazione va fatta
come istanza dell'oggetto Array:
nomematrice=new Array(num elementi)
Per accedere ad un elemento della matrice si utilizza l'indice che indica la posizione dell'elemento all'interno della
stessa. Tale posizione si inizia a conteggiare da 0 e non da 1.
Esempio di dichiarazione:
GiornSett = new Array(7)
Per accedere ad ogni singolo elemento:
GiornSett[0] = "Domenica"
GiornSett[1] = "Lunedì"
GiornSett[2] = "Martedì"
GiornSett[3] = "Mercoledì"
GiornSett[4] = "Giovedì"
GiornSett[5] = "Venerdì"
GiornSett[6] = "Sabato"
per cui il primo elemento è "Domenica" ed ha indice 0.
La seguente sintassi dichiara e assegna i valori agli elementi della matrice:
GiornSett = new Array("Domenica","Lunedì","Martedì","Mercoledì","Giovedì","Venerdì","Sabato")
In Javascript gli array sono array associativi, cioè permettono di usare delle stringhe come indici (o leggi di accesso).
Per accedere agli elementi si usa l’operatore [ ] o . :
riga[“nome”] o anche riga.nome
La proprietà più importante dell’oggetto array è length che fornisce il numero di elementi dell’array.
Quando si è definita una matrice, i suoi elementi vengono riempiti con valore null, per la lunghezza specificata nella
dichiarazione. È possibile modificare la dimensione di una matrice in modo dinamico, assegnando un valore alla
proprietà LENGTH.
Le matrici hanno tre metodi:
• Join( ) Unisce tutti gli elementi di una matrice, dando come risultato una stringa.
• Reverse ( ) Restituisce una versione capovolta della matrice.
• Sort ( ) Restituisce una versione ordinata della matrice.
• toString( ) Converte tutti gli elementi di una matrice in una stringa, separandoli con virgole.
Funzioni
Le funzioni sono oggetti Function che hanno proprietà e metodi. Si può dichiarare una funzione, come in C, con:
function(){
//istruzioni
}
e si richiama con
function();
Il passaggio di parametri avviene per valore. La funzione può restituire un valore con
return espressione
L’oggetto Function ha due metodi interessanti che permettono di avere funzioni con numero di parametri variabile:
arguments
è un array contenente i parametri passati alla funzione (length indica quanti ne sono)
caller
riferimento alla funzione chiamante (null se il rimo livello)
5
6.5) Oggetti predefiniti
Oggetto String: le stringhe di caratteri sono oggetti string.
Proprietà: Length lunghezza della stringa in numero dei caratteri.
Metodi:
charAt(i)
restituisce il carattere che si trova nella posizione i.
concat(s)
concatena la stringa specificata alla fine
indexOf(s)
restituisce la prima posizione della stringa dove inizia la stringa specificata
lastindexOf(s) restituisce l’ultima posizione della stringa dove inizia la stringa specificata
replace(s1,s2) sostituisce la prima stringa con la seconda
search(s)
restituisce true se la stringa è presente, false altrimenti
split(s)
restituisce un array che contiene le parti della stringa separate dalla stringa specificata
substr(i)
restituisce la sottostringa che inizia dalla posizione i
substring(i,j)
restituisce la sottostringa che inizia dalla posizione i e termina alla posizione j
toLowerCase() trasforma in minuscolo
toUpperCase() trasforma in maiuscolo
Oggetto Math: offre metodi utili per calcoli matematici e alcune costanti
Proprietà: PI =pi greco, E=base dei logaritmi naturali
Metodi:
abs(a), exp(a), log(a), pow(a,b), sqrt(a), max(a,b), min(a,b), sin(a), cos(a), tan(a) di ovvio utilizzo
round(a)
numero intero più vicino ad a
ceil(a)
numero intero più piccolo >= a
floor(a)
numero intero più grande <=a
random()
numero casuale tra 0 e 1
esempio: n=Math,pow(5,2); // n vale 25
Oggetto Date: contiene informazioni riguardanti la data e l’ora di sistema lato client.
Costruttori: Date() : restituisce la data di sistema.
Metodi:
toLocaleString() trasforma la data nel formato locale in base alle impostazioni di sistema
getDate()
restituisce il giorno del mese
getMonth()
restituisce il mese (0-11)
getFullYear()
restituisce l’anno (4 cifre)
getHours()
restituisce l’ora
getMinutes()
restituisce i minuti
getSeconds()
restituisce i secondi
un esempio:
<SCRIPT LANGUAGE="JavaScript">
Mesi = new Array("Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno",
"Luglio",
"Agosto", "Settembre", ”Ottobre", "Novembre", "Dicembre");
Data = new Date()
Giorno = Data.getDate()
Mese = Data.getMonth()
Anno = Data.getYear()
if (Anno < 2000) Anno = Anno + 1900;
Datario = Data.toGMTString()
GiorSet = Datario.substring(0,3)
if (GiorSet == "Sun") GiorSet = "Domenica"
if (GiorSet == "Mon") GiorSet = "Lunedì"
if (GiorSet == "Tue") GiorSet = "Martedì"
if (GiorSet == "Wed") GiorSet = "Mercoledì"
if (GiorSet == "Thu") GiorSet = "Giovedì"
if (GiorSet == "Fri") GiorSet = "Venerdì"
if (GiorSet == "Sat") GiorSet = "Sabato"
Ore = Data.getHours()
Minuti = Data.getMinutes()
Secondi = Data.getSeconds()
if ((Ore > 6) && (Ore < 13)) Saluto = "Buongiorno"
if ((Ore > 12) && (Ore < 18)) Saluto = "Buon pomeriggio"
if ((Ore > 17) && (Ore < 22)) Saluto = "Buona sera"
if (Ore > 21) Saluto = "Buona notte"
if (Ore < 7) Saluto = "Buona notte"
if (Minuti < 10) Minuti = "0" + Minuti
if (Secondi < 10) Secondi = "0" + Secondi
document.write("<font face = Elephant color=0xFF00AA size = 4><align=center>",
Saluto, ", sono le ore ",Ore, ":", Minuti, ".", Secondi," di ",GiorSet, ", ", Giorno, " ",
Mesi[Mese], " ",
Anno,"</font>")
6
</script>
6.6) Il DOM (Document Object Model)
La vita di Javascript lato client è strettamente legata al DOM (modello ad oggetti del documento). Lo scopo del DOM è
quello di fornire al programmatore una chiara interfaccia per controllare e modificare il contenuto, lo stile e la forma di
un documento html e di tutti i suoi elementi. L'oggetto principale del DOM è rappresentato dalla finestra corrente del
browser (oggetto window). Il modello di programmazione usato è quello basato su gli eventi. Si può fare in modo che
uno script venga eseguito quando si verifica un particolare evento. Si può fare riferimento ad ogni oggetto seguendo la
gerarchia; tutti gli oggetti sono accessibili come proprietà di altri oggetti.
Gerarchia degli oggetti:
window
Event
Frames[]
Location
History
Navigator
Screen
Document
All[]
Anchors[]
Applets[]
Body
Frames[]
Images[]
Links[]
Selection
Scripts[]
styleSheets[]
Forms[]
Elements[]
Rappresenta la finestra del browser
Rappresenta l'evento che si è verificato
Collezione dei premi se nella finestra corrente
Rappresenta l'url corrente che il browser sta visualizzando
Rappresenta l’history list del browser
Rappresenta il browser stesso
Rappresenta uno schermo
Rappresenta il documento correntemente visualizzato
Collezione di tutti gli elementi (tag) del documento
Collezione delle ancore
Collezione delle applet
Corpo del documento
Collezione dei frames definiti dal documento
Collezione delle immagini
Collezione dei link
Rappresenta il testo selezionato nel documento
Collezione di script
Collezione dei fogli stile
Collezione dei moduli
Collezione di elementi di un modulo
Oggetto Window:
è l'oggetto di primo livello della gerarchia; il suo nome può essere omesso dato che dovrebbe essere presente in tutti i
riferimenti.
Proprietà:
name
nome della finestra che può essere usato nell'attributo target di un collegamento ipertestuale; se il
nome specificato in target non esiste, viene creata una nuova finestra con questo nome.
Status
Contenuto corrente della barra di stato; permette di visualizzare messaggi
DefaultStatus
Non presenta il contenuto di default della barra di stato; può essere sostituito da altri messaggi ma poi
viene ripristinato
Self
Riferimento alla finestra corrente
Opener
Riferimento ad un altro oggetto Windows che ha aperto la finestra; se la finestra è stata aperta
dall'utente contiene null
Closed
ha valore true se la finestra chiusa
Metodi:
alert( )
Confirm()
Prompt()
Open()
Genera una finestra di dialogo con testo e pulsante OK; serve per visualizzare un messaggio
Genera una finestra di dialogo con testo e pulsante OK e Annulla; permette la scelta tra due alternative
Genera una finestra di dialogo con testo, e pulsante che è annulla e un campo di testo per inserire una
stringa
Gestione della finestra
Apre una nuova finestra del browser restituendo un oggetto Window che rappresenta la finestra aperta;
questa finestra può essere completamente controllata mediante parametri del metodo; ha 4 parametri
• l'url del documento da visualizzare (o finestra vuota se non specificato)
• il nome nella finestra che può essere utilizzato nell'attributo target dai collegamenti
• una stringa che specifica le caratteristiche della finestra:
o fullscreen (yes/no) indica se la finestra deve essere tutto schermo
7
o toolbar (yes/no) specifica se visualizzare della barra degli strumenti
o location (yes/no) specifica se visualizzare la barra indirizzo
o status (yes/no) specifica se visualizzare la barra di stato
o menubar (yes/no) specifica se visualizzare la barra dei menu
o scrollbars (yes/no) specifica se visualizzare le barre di scorrimento
o resizable (yes/no) specifica se la finestra è ridimensionabile
o width,height impostano le dimensioni della finestra in pixel
o top,left specificano la posizione del vertice superiore sinistro della finestra in pixel
• un valore booleano che indica se l'url indicato deve creare un nuovo elemento (false)
nell'elenco cronologico o sostituire quello corrente (true)
Close()
Chiude una finestra; si possono chiudere sono le finestre create dal proprio codice; la finestra chiusa
continua ad esistere (indicato dalla proprietà closed). Occorre quindi controllare sempre se le finestre
che si vogliono chiudere sono effettivamente aperte.
MoveTo(x,y)
Sposta la finestra alle coordinate specificate
MoveBy(x,y) Sposta la finestra del numero specificato di pixel
ResizeTo(x,y) Imposta le dimensioni della finestra ai valori specificati
ResizeBy(x,y) Modifica le dimensioni della finestra aggiungendo ai valori specificati positivi o negativi
ScrollTo(x,y) Sposta il documento della finestra alla posizione specificata (gli oggetti anchor hanno proprietà x e y
che possono essere usate per spostarsi direttamente su un’ancora
ScrollBy(x,y) Trascorrere il documento della finestra del numero di pixel specificato
Altri metodi
Focus()
Richiede il focus
Blur()
Cede il focus
ExecScript()
Esegue uno script
SetTimeout()
Esegue una funzione dopo che è trascorso un intervallo di tempo in millisecondi; ha due parametri di
primo e indica la funzione da eseguire, il secondo dopo quanti millisecondi viene eseguita; una
funzione in esecuzione può usarlo per ripetersi senza intervento da parte dell'utente; il metodo
restituisce un identificatore che va passato come parametro al metodo clearTimeout() per annullare il
richiamo della funzione
ClearTimeout() Annulla la chiamata alla fusione effettuata con setTimeout()
SetInterval()
Esegue ripetutamente una funzione con un ritardo specificato fra una esecuzione e l'altra; ha due
parametri: il primo indica la funzione eseguire, il secondo dopo quanti millisecondi viene eseguita; il
metodo restituisce un identificatore che va passato come parametro al metodo clearInterval() per
terminare la ripetizione
ClearInterval() Termina le chiamate ripetute alla funzione impostata con setInterval()
L’oggetto window contiene un discreto numero di oggetti (come si vede dalla gerarchia degli oggetti).
Oggetto Location:
La barra degli indirizzi era presentata da window.location: grande questo riferimento possibile interagire con essa.
Proprietà:
href
Contiene l'indirizzo mostrato dalla barra. È una proprietà di lettura e scrittura. L'assegnazione di un
valore a questa proprietà permette di spedire il visitatore alla pagina specificata
Protocol, host, Specificano le singole parti dell'Url. Search indica la parte dopo il punto di domanda
pathname,
search
Metodi:
replace()
Reload()
Sostituisce il documento corrente numero specificato; non si può più accedere al documento corrente
con il pulsante indietro
Aggiorna la pagina
Oggetto History:
Da la possibilità di muoversi lungo la cronologia. La proprietà length restituisce il numero di posizioni visitate
dall'utente.
Metodi:
back()
pulsante indietro del browser
Forward()
pulsanti avanti del browser)
go()
manda a una specifica posizione dell'elenco storico
A HREF="javascript:history.back();"><IMG BORDER = 0 SRC="Immagini/Freccia%20sinistra.gif" width="100" height="60">
         
</A><A HREF="history.forward();"><IMG BORDER = 0 SRC="Immagini/Freccia%20destra.gif" width="100" height="60"></A>
8
Oggetto Navigator:
fornisce informazioni relative al browser utilizzato
Proprietà:
appName
e Nome e versione del browser
appVersion
Platform
Piattaforma usata
Oggetto Screen:
fornisce informazioni sulla risoluzione e numero di colori dello schermo
Proprietà:
width e height
Risoluzione dello schermo in pixel
ColorDepth
Profondità di colore
Oggetto Document:
Insieme all'oggetto window, è sicuramente l'oggetto più importante del DOM. Esso permette di generare documenti o di
modificarne dinamicamente il contenuto e l'aspetto.
Metodi:
write(s)
Scrive nel documento il codice html specificato nella stringa. Richiamato in uno script, inserisce il
codice nel documento; se richiamato in un gestore di evento, crea un nuovo documento che
sostituisce il precedente.
Proprietà:
location o URL
title
referrer
lastModified
ESEMPIO
restituisce la URL del documento corrente
titolo del documento in corso
restituisce la URL del documento che l'utente visualizzava prima della pagina in corso
restituisce l'ultima data di modifica del documento
document.write("<p>Proprietà <b>location</b> restituisce la URL del documento corrente")
Doc = document.location
document.write("<br>___ Esempio: <u>",Doc,"</u>")
document.write("<p>Proprietà <b>title</b> visualizza un testo nella barra del titolo del documento in corso")
Doc = document.title
document.write("<br>___ Esempio: <u>",Doc,"</u> Testo prima della codifica JavaScript")
document.title = "Questo testo è scritto con Javascript"
Doc = document.title
document.write("<br>___ Esempio: <u>",Doc,"</u> Testo dopo la codifica JavaScript")
document.write("<p>Proprietà <b>referer</b> restituisce la URL del documento che l'utente visualizzava prima della pagina in corso (funzione non
attiva)")
Doc = document.referer
document.write("<p>Proprietà <b>lastModified</b> restituisce l'ultima data di modifica del documento")
Doc = document.lastModified
</script>
bgcolor
fgcolor
linkColor
vlinkColor
controlla il colore dello sfondo della pagina corrente.
controlla il colore del testo.
controlla il colore per i collegamenti non visitati
controlla il colore per i collegamenti visitati
parentWindow
Cookie
Riferimento aslla finestra che contiene il documento
Permette di leggere e scrivere cookie (si vedrà in seguito)
L’oggetto document contiene un discreto numero di collezioni/elementi (come si vede dalla gerarchia degli oggetti).
Tutti questi elementi sono a loro volta degli oggetti ed hanno delle proprietà. Alcune di queste proprietà sono comuni a
tutti gli oggetti (come ad esempio la proprietà id che serve ad assegnare un nome all’elemento, con il quale javascript
può accedervi per cambiare le relative proprietà). Le collezioni più comuni saranno trattate singolarmente (images,
links, anchors, forms). Una volta che si è avuto accesso al singolo elemento, è possibile accedere alle proprietà
(attributi) dello stesso per conoscerle e/o cambiarle. Più avanti si approfondirà questo argomento.
Proprietà comuni agli elementi del documento:
id
Nome dell’elemento (sola lettura)
tagName
Nome del tag html che ha creato l’elemento
Style
Permette di accedere alla proprietà di stile
Document
Riferimento al documento che contiene l’elemento
parentElement
Riferimento all’elemento genitore nella gerarchia
Sourceindex
Indice dell’elemento nella collezione document.all
Proprietà che permettono di modificare il contenuto degli elementi
innerText
Testo contenuto tra i tag dell’elemento
9
innerHtml
Testo contenuto tra i tag dell’elemento, può contenere tag html
outerText
Rappresenta tutto il testo dell’elemento, inclusi i tag
outerHtml
Rappresenta tutto il testo dell’elemento, inclusi i tag
Metodi comuni agli elementi del documento:
scrollIntoView() Fa scorrere il documento in modo che l’elemento compaia in cima alla finestra.
Un esempio di uso di alcune funzioni: EFFETTO TERREMOTO
<head>
function terremoto(x) {
brie4 = (navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4);
if (brie4) {
for (i = 12; i > 0; i--) {
for (j = x; j > 0; j--) {
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);
}
}
}
else window.alert ("L'effetto terremoto non è visibile con questo tipo di browser")
}
</script>
</head>
<body>
document.write("<p>Questo effetto è visibile solo sui browser della Microsoft con versione superiore alla 3°")
document.write("<br>Il browser che stai utilizzando è ", navigator.appName)
document.write("<br>La versione di questo browser è ", navigator.appVersion.substring(0,4))
document.write("<h3 align=center>")
Timer = 4
Scosse = 1
Intensit = 2
ID = setTimeout("Aggiorn();",1000);
function Aggiorn() {
Timer = Timer - 1
if (Timer > -1) {
}
else {
ID = setTimeout("Tempo();",100);
terremoto(Intensit)
}
if ((Timer > -1) && (Scosse == 1)) document.all.clock.innerHTML = "Mancano <h1>" + Timer + " secondi <h3> al terremoto
nel browser";
if ((Timer > -1) && (Scosse > 1)) document.all.clock.innerHTML = "Alla " + Scosse + "° scossa mancano <h1>" + Timer + "
secondi <h3>";
}
function Tempo() {
Timer = 4
Scosse = Scosse + 1
document.all.clock.innerHTML = "<p><h4>La scossa sismica è stata pari a " + Intensit + " secondi"
Intensit = Intensit + 2
//
ID = setTimeout("Aggiorn();",(Intensit + 2) * 1000);
}
</script>
<span id="clock"></span>
</body>
-------------------------------------------------------------------------------------------------------------------------
6.7) Gli eventi
Gli eventi sono utilizzati per richiamare delle istruzioni. Gli script vengono eseguiti in maniera sequenziale; per fare in
modo di inserire dinamicità e interattività occorre che questi vengano attivati o richiamati solo quando si verificano
particolari situazioni come il passaggio del mouse, il caricamento di un documento, ecc. Normalmente ad un evento
viene associata una sola istruzione, per cui il più delle volte l'associazione è fatta con un blocco di istruzioni e, quindi,
con le funzioni che prendono il nome di handler o gestori di eventi. Un esempio:
<A HREF="pagina.html" onclick="alert('ciao')">Link</A>
notiamo come l'evento onClick sia inserito nel Tag come se fosse un atributo dello stesso.
Anche se meno comune, gli eventi possono essere attivati direttamente all'interno degli Script, richiamandoli come se
fossero una proprietà dell'oggetto. La sintassi è:
10
Oggetto.evento=handler;
Ripeto che questa modalità è raramente nella normale attività. Esempio:
document.images[num].onload=carica();
dove la funzione carica() serve a caricare una immagine successiva.
Prima della descrizione degli eventi attivabili, anticipiamo che tutti gli eventi hanno la propria sintassi, composta dal
loro nome col prefisso on, ad esempio l'evento click è richiamato con l'handler onclick.
Gli eventi che possono essere attivati dipendono dall’oggetto che li scatena, per cui ne daremo ora una classificazione in
base all’oggetto.
Gestori di eventi relativi agli oggetti contenuti nei FORM
onBlur
onChange
onClick
onDblClick
onFocus
onMouseDown
onMouseMove
onMouseOver
onMouseOut
onMouseUp
onKeydown
onKeypress
onKeyup
onSelect
onSubmit
Si verifica quando un oggetto perde il focus
Si verifica quando un campo o un'area di testo vengono modificati e si preme il tasto di tabulazione
Si verifica quando l'utente fa clic su un elemento
Si verifica quando l'utente fa doppio clic su un elemento
Si verifica quando un elemento acquisisce il focus
Si verifica quando si preme un tasto del mouse sull'oggetto
Si verifica quando il puntatore attraversa un elemento
Si verifica quando il puntatore si sposta su un elemento
Si verifica quando il puntatore si allontana da un elemento
Si verifica quando si rilascia un tasto del mouse
Si verifica quando si preme un tasto e il focus è sul campo di testo
Si verifica quando si preme un tasto codificato come ASCII
Si verifica quando si rilascia un tasto e il focus è sul campo di testo
Si verifica quando l'utente seleziona un testo
Si verifica quando si preme un pulsante SUBMIT ossia di "Invio dati"
onAbort
onBlur
onError
onFocus
onLoad
onResize
onUnload
Si verifica quando l'utente interrompe il caricamento di un'immagine
Si verifica quando la finestra perde il focus
Si verifica se il documento non può essere caricato
Si verifica quando la finestra riceve il focus
Si verifica quando termina il caricamento del documento (nel tag Body)
Si verifica quando l'utente ridimensiona una finestra
Si verifica quando l'utente abbandona il documento o esce
onClick
onMouseOut
onMouseOver
Si verifica quando l'utente fa clic sul collegamento
Si verifica quando il puntatore si allontana da un collegamento
Si verifica quando il puntatore si sposta sul collegamento
onLoad
onAbort
onError
Si verifica quando un'immagine viene caricata completamente
Si verifica se l'utente chiude bruscamente la pagina prima che l'immagine sia stata completamente
caricata
Si verifica se non si trova il file immagine
onClick
onDblClick
onMouseDown
onMouseMove
onMouseOver
onMouseOut
onMouseUp
Si verifica quando l'utente fa clic su un elemento
Si verifica quando l'utente fa doppio clic su un elemento
Si verifica quando si preme un tasto del mouse
Si verifica quando il puntatore attraversa un elemento
Si verifica quando il puntatore si sposta su un elemento
Si verifica quando il puntatore si allontana da un elemento
Si verifica quando si rilascia un tasto del mouse
onKeydown
onKeypress
onKeyup
Si verifica quando si preme un tasto
Si verifica quando si preme un tasto codificato come ASCII
Si verifica quando si rilascia un tasto
Gestori di eventi dell'oggetto WINDOW
Gestori di eventi dell'oggetto LINK o Anchor
Gestori di eventi dell'oggetto IMAGES
Gestori di eventi abbinati al MOUSE
Gestori di eventi eventi abbinati alla TASTIERA
11
6.8) Elementi specifici
Image
La matrice IMAGES contiene un elemento per ogni immagine esistente sulla pagina.
È possibile creare un oggetto IMAGES indipendente nel quale inserire più immagini, le quali verranno caricate e
sistemate nella memoria Cache del computer client.
Una volta precaricate le immagini è possibile utilizzarle per sostituire qualsiasi altra immagine presente nella pagina.
Fotogramma = new Array (4);
Creazione matrice per l' oggetto IMAGES.
Fotogramma[0] = "Immagini/Cavallo.gif";
Definizione elementi della matrice per le immagini precaricate.
Fotogramma[1] = "Immagini/Attenzione computer.gif";
Fotogramma[2] = "Immagini/Cervello.gif";
Fotogramma[3] = "Immagini/Ancora.gif";
Fotogramma[4] = "Immagini/Compressione programmi.gif";
border
complete
height - width
hspace- vspace
name
lowsrc
src
Ciascun oggetto IMAGES ha le seguenti proprietà:
stabilisce se è stato disegnato un bordo intorno a un'immagine collegata.
Indica se l'immagine è stata caricata completamente. Attributo con valore booleano ( True o False ).
Rappresentano rispettivamente altezza e larghezza dell'immagine.
Rappresentano rispettivamente la spaziatura orizzontale e verticale dell'immagine e servono per
definire la posizione sulla pagina. Attributi di sola lettura.
Nome dell'immagine.
Consente di definire un'immagine a bassa risoluzione che viene caricata prima di quella effettiva.
Origine o sorgente dell'immagine .
Esempio Rollover:
<script>
var corrente=0;
var immagini=new Array();
var collegamenti=new Array();
collegamenti[0]="http://ginotombolini.interfree.it";
immagini[0]="0.JPG";
collegamenti[1]="http://www.tiscali.it";
collegamenti[2]="http://www.tin.it";
collegamenti[3]="http://www.tin.it";
function ruota(){
corrente++;
if (corrente >= immagini.length) corrente=0;
document.banner.src = immagini[corrente];
setTimeout('ruota()',5000);
}
function clicca(){
window.open(collegamenti[corrente]);
}
</script>
<body onload="setTimeout('ruota()',3000)">
<a href="javascript:clicca();">
<img name="banner" src="0.JPG" border="0" heigth="300" width="300">
</a>
</body>
Anchor
Hanno le stesse proprietà dell’oggetto Location (href, protocol, host, pathname, search).
Style
permette di modificare gli stili applicati ai vari tag. Tutti gli attributi di stile corrispondono a proprietà dell'oggetto di
stile. Si accede alla proprietà di stile con la notazione
oggetto.style. proprietà
12
6.9) L’oggetto Form
I moduli sono insiemi di elementi (caselle di testo, pulsanti di selezione, menu a discesa, pulsanti di comando, ecc.) che
permettono all'utente di inserire nei dati; facendo click su un pulsante (di solito invia o submit) si richiede l'esecuzione
di una azione. Per poter far riferimento agli elementi del modulo è importante assegnare un nome ad ogni elemento
(attributo name o id) attraverso il nome si può fare riferimento al contenuto o valore dell’elemento negli script. Si può
fare riferimento al form assegnandogli un nome (name o id). L'attributo action permette di specificare l'applicazione da
eseguire sul server. I possibili eventi gestibili dal form sono stati descritti nel paragrafo relativo agli eventi.
Proprietà del Form:
action
specifica la pagina del server che si occupa di elaborare il form
elements[]
collezione degli elementi contenuti nel form
encoding
codifica delle informazioni del form
method
metodo di invio dati
name
nome del form
Prendiamo ora in esame le proprietà degli elementi del form.
Text / Password / Textarea
value
Il testo inserito
defaultValue
Valore predefinito
name
Nome dell’elemento
form
Riferimento al form contenitore
type
Tipo di elemento
Hidden / Button / Submit /Reset / File
form
name
type
Tipo di elemento
value
Il testo inserito
Checkbox / Radio
checked
defaultChecked
form
name
type
value
Select
form
name
Options[ ]
Indica se il pulsante è selezionato
Valore predefinito
Tipo di elemento
Indica il valore corrispondente al pulsante
selectedIndex
type
Rappresenta la collezione delle scelte; specificando come indice selectedIndex si può
accedere ad una specifica scelta
Indice della opzione selezionata
Tipo di elemento
Option
defaultSelected
selected
text
value
Valore della opzione
13
6.10) I Cookie
HTTP e' un protocollo stateless; per ricordare qualcosa delle precedenti connessioni sono stati inventati i 'cookie' (
biscotto in inglese). Un cookie è un pezzo di informazione (un piccolo file di testo) inviato dal server, che può essere
memorizzato nell’hard disk del client, dove vengono memorizzate informazioni di vario genere sulle abitudini e i gusti
dell'utente (personalizzazione delle pagine, numero visite, ecc), per essere successivamente recuperate. Sono una sorta
di promemoria depositati sui nostri hard disk per tenere memoria di informazioni che altrimenti andrebbero perse al
momento dell'uscita dal sito
Per consentirne la memorizzazione (in JavaScript) è necessario settare alcuni parametri, di cui solo due sono quelli
essenziali.
- Il valore che interessa conservare per il suo successivo riutilizzo.
- La data di scadenza del cookie.
Se si omette questo parametro viene presa come data di scadenza la data attuale di collegamento e il browser cancellerà
il cookie nel momento in cui si chiuderà la sua sessione.
È necessario, pertanto, inserire una data successiva alla data di collegamento per consentire al cookie di permanere sul
disco fisso dell'utente.
L'istruzione per scrivere un cookie è document.cookie più una stringa cosi composta:
Valore ; EXPIRES = Data di scadenza espressa in millisencondi.
Per leggerlo si deve assegnare la proprietà document.cookie ad una variabile che assumerà il valore del cookie.
Nota: Un file cookie si riferisce all'intero sito e non a una specifica pagina dello stesso, quindi nel caso in cui si gestisce
più di un valore è necessario spezzare la stringa ed inserirla in più variabili quanti sono i valori da gestire.
Esempio:
<html><head>
<script language="JavaScript">
<!-var utente;
var chisei;
function getCookie(Name) {
var search = Name + "=";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1){
end = document.cookie.length;
return unescape(document.cookie.substring(offset, end));
}
}
}
}
function cercanome(){
if (document.cookie.length == 0) {
utente = prompt('Per favore, digita il tuo nome (altrimenti premi cancel)',"Navigatore");
salvaCookie();
}
chisei=getCookie('visitatore');
}
function SetCookie (name, value) {
var todayDate = ExpDate = new Date ();
ExpDate.setTime(todayDate.getTime() + 365 * 24 * 3600 * 1000);
document.cookie = name+'='+escape(value)+'; expires=' + ExpDate.toGMTString();
}
function salvaCookie(){SetCookie('visitatore', utente)}
//-->
</script></head>
<body>
<script>
<!-cercanome();
document.write("Ciao, "+chisei+"!");
//-->
</script>
</body></html>
Per la gestione dei cookie sono utili alcune funzioni:
split( separatore ) : il metodo, applicato ad una stringa, ritorna un array di sottostringhe dividendole in base al separatore
escare(s) e unescape(s) serve ad evitare qualsiasi conflitto tra il valore del cookie e la sintassi della sua dichiarazione.
Ad esempio se nel valore fossero presenti dei punti e virgola questo causerebbe problemi di interpretazione.
14
Tabella dei colori
aliceblue
"#F0F8FF"
antiquewhite
"#FAEBD7"
aqua
"#00FFFF"
aquamarine
"#FFFD4"
azure
"#F0FFFF"
beige
"#F5F5DC"
bisque
"#FFE4C4"
black
"#000000"
blanchedalmond
"#FFEBCD"
blue
"#0000FF"
blueviolet
"#8A2BE2"
brown
"#A52A2A"
burlywood
"#DEB887"
cadetblue
"#5F9EA0"
chartreuse
"#7FFF00"
chocolate
"#D2691E"
coral
"#FF7F50"
cornflowerblue
"#6495ED"
cornsilk
"#FFF8DC"
crimson
"#DC143C"
cyan
"#00FFFF"
darkblue
"#00008B"
darkcyan
"#008B8B"
darkgoldenrod
"#D2691E"
darkgray
"#A9A9A9"
darkgreen
"#006400"
darkkhaki
"#BDB76B"
darkmagenta
"#8B008B"
darkolivegreen
"#556B2F"
darkorange
"#FF8C00"
darkorchid
"#993214"
darkred
"#8B0000"
darksalmon
"#E9967A"
darkseagreen
"#2BBC2B"
darkslateblue "#483D8B"
darkslategray "#2F4F4F"
darkturquoise
"#001414"
darkviolet
"#9400D3"
deeppink
"#FF1493"
deepskyblue
"#00BFFF"
dimgray
"#696969"
dodgerblue
"#1E90FF"
firebrick
"#B22222"
floralwhite
"#FFFAF0"
forestgreen "#228B22"
fuchsia
"#FF00FF"
gainsboro
"#DCDCDC"
ghostwhite
"#F8F8FF"
gold
"#FFD700"
goldenrod
"#DAA520"
gray
"#808080"
green
"#008000"
greenyellow
"#ADFF00"
honeydew
"#F0FFF0"
hotpink
"#FF6950"
indianred
"#145C5C"
indigo
"#4B001E"
ivory
"#FFFF0"
khaki
"#F01E8C"
lavender
"#1E1EFA"
15
lavenderblush
"#FFF0F5"
lawngreen
"#7FCC00"
lemonchiffon "#FFFA14"
lightblue
"#ADD81E"
lightcoral
"#F08080"
lightcyan
"#E0FFFF"
lightgoldenrodyellow
"#FAFAD2"
lightgreen
"#90EE90"
lightgrey
"#D3D3D3"
lightpink
"#FFB6C1"
lightsalmon
"#FFA07A"
lightseagreen
"#20B2AA"
lightskyblue
"#8714FA"
lightslategray "#778899"
lightsteeblue "#B0C4DE"
lightyellow "#FFFFB0"
lime
"#00FF00"
limegreen
"#321432"
linen
"#F0F01E"
magenta
"#FF00FF"
maroon
"#800000"
mediumaquamarine
"#6614AA"
mediumblue
"#000014"
mediumorchid
"#BA55D3"
mediumpurple
"#9370DB"
mediumseagreen
"#3CB371"
mediumslateblue
"#7B68EE"
mediumspringgreen
"#00FA9A"
mediumturquoise
"#481414"
mediumvioletred
"#C71585"
midnightblue
"#191970"
mintcream
"#F5FFFA"
mistyrose
"#FFE4E1"
moccasin
"#FFE4B5"
navajowhite
"#FFDEAD"
navy
"#000080"
oldlace
"#FDF51E"
olive
"#808000"
olivedrab
"#6B2A23"
orange "#FFA500"
orangered
"#FF4500"
orchid
"#DA70D6"
palegoldenrod
"#EEE8AA"
palegreen
"#98FB98"
paleturquoise
"#AFEEEE"
palevioletred "#DB7093"
papayawhip
"#FFEFD5"
peachpuff
"#FFDAB9"
peru
"#14853F"
pink
"#FFC014"
plum
"#DDA0DD"
powderblue "#B0E01E"
purple
"#800080"
red
"#FF0000"
rosybrown
"#BC2B2B"
royalblue
"#4169E1"
saddlebrown
"#8B4513"
salmon
"#FA8072"
sandybrown
"#F4A460"
seagreen
"#2E8B57"
seashell
"#FFF5EE"
sienna
"#A0522D"
silver
"#C0C0C0"
skyblue
"#8714EB"
16
slateblue
"#6A5A14"
slategray
"#708090"
snow
"#FFFAFA"
springgreen
"#00FF7F"
steelblue
"#461E50"
tan
"#D2508C"
teal
"#008080"
thistle
"#D8BfD8"
tomato
"#FF6347"
turquoise
"#40E014"
violet
"#EE1EEE"
wheat
"#F5DEB3"
white
"#FFFFFF"
whitesmoke
"#F5F5F5"
yellow
"#FFFF00"
yellowgreen
"#9A1432"
17

Introduzione al linguaggio Javascript

Transcript

Documenti analoghi

Il debugger: trovare gli errori

Informatica 2 (WEB) Esercitazione n. 2: Cambio dello sfondo

il browser deve avere javascript attivo

Google Maps API

javascript area del triangolo

APPENDICE A - Hardware e software utilizzati.

WEB MARKETING CODE by scamurra.it

dhtml

Per accedere a Telemaco si raccomanda di installare un browser

Browser AOL – Attivazione dei Cookie