regole

Introduzione a Javascript
Linguaggio di scripting non di programmazione: può controllare il comportamento del browser e il
suo contenuto (mettendo a disposizione costrutti per implementare algoritmi strutturati) ma non
può effettuare elaborazioni grafiche, realizzare animazioni vere e proprie o gestire la rete per
ragioni di sicurezza:
• può controllare quasi totalmente l’aspetto dei documenti HTML
• può controllare il comportamento del browser e il suo contenuto
• gestisce efficacemente i moduli per mezzo dell’oggetto Form
• gestisce azioni collegate ad eventi generati dagli utenti
• crea e gestisce i cookies (piccoli file di testo ASCII memorizzati lato client:
tecnologia che immagazzina informazioni nel computer del visitatore, e
rimanda le stesse informazioni automaticamente quando il visitatore torna
sulla stessa pagina)
• non può controllare la macchina dell’utente
• non può leggere o scrivere file
• non può controllare periferici di I/O
Le caratteristiche1 peculiari di Javascript sono:
 Linguaggio interpretato;
 Linguaggio basato sugli oggetti: object-based cioè si possono usare proprietà (attributi e
metodi) di oggetti predefiniti e crearne di nuovi (non “orientato” agli oggetti: non si può usare
ad esempio il concetto di ereditarietà e polimorfismo2; JavaScript, infatti, non supporta le classi)
 Linguaggio guidato dagli eventi(event-driven)
 Il nucleo del linguaggio è incorporato nel browser
 Esiste in almeno due varianti: lato client (più comune per rendere dinamiche le pagine Web
cioè inserisce contenuti eseguibili: programmi che interagiscono con l’utente, controllano
browser e creano dinamicamente contenuti HTML nuovi) o lato server.
1
2
da P.Gallo, F.Salerno “ HTML, CSS, Javascript“ Minerva Italica
Per un’introduzione al confronto con un linguaggio Orientato agli Oggetti (Java)
Cosa c’è in Javascript
Gli elementi3 di un programma Javascript possono essere divisi in 5 categorie:
 variabili e valori
 espressioni ed operatori
• per manipolare i valori
 strutture di controllo
• per modificare l’ordine di esecuzione
 funzioni
• per raggruppare blocchi di istruzioni
 oggetti ed array (con dimensione dinamica, anche non omogenei)
• raggruppamenti di dati e funzioni
Commenti in Javascript
Stessa tecnica del C++ o di Java
Commenti su di una singola linea
Commenti su più linee
//
Inizio commento /*
Fine commento */
Punto e virgola opzionale
Ogni istruzione dovrebbe terminare con il punto e virgola (;)
Può essere omesso se due istruzioni sono separate da un invio
Nel seguente caso è obbligatorio
Conviene sempre metterlo
a=3
b=4
a = 3; b = 4;
Identificatori
Un identificatore è semplicemente un nome
In JavaScript gli identificatori si usano per dare un nome a
 Variabili
 Funzioni
 Per fornire delle etichette per alcuni cicli
 I nomi degli identificatori devono seguire delle regole (le vedremo quando tratteremo le
variabili)
Letterali
Un letterale è un valore fissato che compare all’interno di un programma JavaScript
Esempi di letterali
 12
 1.2
 “ciao” //una stringa
 'ciao' // un altro modo per indicare una stringa
 true, false
 null
Ci sono anche letterali funzione, letterali oggetto e letterali array
3
da Carlo Blundo “Tecnologie di Sviluppo per il WEB”
Valori
Javascript riconosce i seguenti tipi di valori
 Numeri
 Valori booleani
 Stringhe
// oggetti interni
 null
// può essere assegnato ad una variabile
• Indica un valore nullo
 undefined
• Indica che una variabile ha un valore indefinito
Numeri interi
decimali: (compresi tra – 253e 253)
 e.g., 77 -9876453
ottali (iniziano con zero):
 e.g., 077 -09876
esadecimali (iniziano con 0x o 0X):
 e.g., 0x77 oppure 0X123456789abcDEF
Numeri in virgola mobile
Notazione standard
 1234.567 oppure -1.234
Notazione scientifica
(se minori di 1.0e-7 oppure maggiori di 1.0e20)
 1.2345e10
1.1234e-11
9. 87E-21
Valore massimo ±1.7976931348623157x10308
Valore minimo ±5x10-324
Costanti numeriche speciali
Infinity * oppure Number.POSITIVE_INFINITY
- Valore speciale per rappresentare “infinito”
nNaN * oppure Number.NaN
- Valore speciale per rappresentare un “non-numero”
Number.MAX_VALUE
 il più grande numero rappresentabile
Number.MIN_VALUE
 il più piccolo numero rappresentabile
Number.NEGATIVE_INFINITY
 valore speciale per rappresentare “infinito negativo”
* Non implementate prima di JavaScript1.3
Valori booleani
Possono assumere il valore true o false
JavaScript, se è necessario, converte true in 1 e false in 0
Utilizzo
if (a = = 4)
b = b + 1;
else
a = a + 1;
Valori stringa
Sono letterali di zero o più caratteri racchiusi tra virgolette doppie (") o singole (')
Esempi
""
// stringa vuota
"casa"
'cassa'
"1234"
"una riga \n un’altra riga"
'nome= "carlo"'
//stringa nome ="carlo"
Caratteri speciali
Oltre ai caratteri ordinari o a quelli espressi in UNICODE (\uXXXX, dove X è un valore
esadecimale), si possono inserire nelle stringhe i seguenti caratteri speciali
 \' (apice singolo)
 \" (apice doppio)
 \b (backspace)
 \f (form feed) cioè avanzamento di pagina
 \n (interruzione di linea) cioè inizio riga
 \r (ritorno carrello)
 \t (tabulazione)
 \\ (backslash)
 \v (tab. verticale)
 \0 (carattere NUL)

Parole riservate
Sono : abstract / boolean / break / byte / case / catch / char / class / const / continue / debugger /
default / delete / do / double / else / enum / export / extends / false / final / finally / float /for /
function / goto/ if / implements / import /in /instanceof / int / interface /long /native / new /
null / package / private / protected / public / return / short / static /super / switch /
synchronized / this / throw /throws /transient /true /try /typeof /var /void /volatile /while /with
Variabili in Javascript
Le variabili sono nomi simbolici associati a valori in applicazioni Javascript.
I nomi delle variabili devono seguire alcune regole
 Il primo carattere deve essere una lettera, un underscore (_) oppure il segno del dollaro ($)
 I caratteri seguenti possono essere lettere, cifre, oppure il segno del dollaro (non ci possono
essere spazi)
 Non possono essere uguali a parole riservate
Javascript è case sensitive
 Var1 è diverso da var1
Tipo delle variabili
Javascript non è un linguaggio tipato
 Alla stessa variabile possiamo assegnare valori di tipo differente senza generare errori
Esempio
<script type=“ text/javascript” >
<!-var altezza=2+3.4;
document.write(altezza);
/* funzione predefinita o metodo write per scrivere sul documento
con document oggetto browser dipendente o oggetto Navigator */
document.write(“<BR>”);
/* funzione predefinita anche metodo writeln per scrivere nel
browser la stringa di testo passata come parametro con “a capo” */
altezza=“5.4 metri”;
document.write(altezza);
// -->
</script>
Dichiarazione di variabili
Non è necessario dichiarare le variabili anche se è buona norma farlo sempre
Per dichiarare una variabile possiamo semplicemente assegnarle un valore
 i =10;
// a questo punto i è dichiarata
 str = "Ciao \n mondo!";
// a questo punto str è dichiarata
Per dichiarare una variabile si usa la parola chiave var
 var i;
 var r, d;
 var s=“ciao”;
Possiamo dichiarare con var una variabile più di una volta senza causare errori
Se si crea all’interno di una funzione una variabile senza far ricorso a var, allora si crea una
variabile globale
Inizializzazione di variabili
Possiamo inizializzare una variabile quando la dichiariamo
 var i=10;
Una variabile dichiarata ma non inizializzata è indefinita
 Se tentiamo di leggere il suo contenuto otteniamo undefined
 Se tentiamo di accedere ad una variabile non dichiarata otteniamo un errore al runtime
Campo di visibilità di una variabile
Esistono solo due campi di visibilità
Locale – Variabili definite all’interno di una funzione attraverso la parola chiave var
Globale – Variabili definite in qualsiasi punto del documento, ma al di fuori di una funzione;
oppure in una funzione senza utilizzare var
In JavaScript non esiste il campo di visibilità di blocco (block scope)
Esempio
function test(o)
{ var i=0;
if(typeof 0 = = “object”)
{ var j;
for(var k=0; k<10; k++)
{document.write(k);}
document.write(j);
}
document.write(i);
}
Le variabili i j e k hanno lo stesso campo di visibilità (scope), quello della funzione. Sono visibili in
tutto il corpo della funzione non soltanto nei singoli blocchi.
Cenni su oggetti in Javascript
Un oggetto in JavaScript è una collezione4 di valori con nome (named values). JavaScript non
supporta le classi e, a differenza di linguaggi OO, usa oggetti di cui può modificare proprietà o
crea tale insieme di dati (attributi) e di funzioni (metodi) con riferimento ad un prototipo cioè la
funzione costruttore.
Per far riferimento ad una proprietà di un oggetto si fa riferimento al nome dell’oggetto seguito dal
punto (.) e dal nome della proprietà. Con sintassi: nomeOggetto.nomeAttributo
Se la definizione del tipo dell’oggetto contiene una funzione, allora la funzione prende il nome di
metodo dell’oggetto ed il named value diventa il nome del metodo. Per richiedere l’esecuzione di
tale funzione si userà sempre la dot-notation con sintassi nomeOggetto.nomeMetodo(par1, par2,..)
Una variabile è fondamentalmente la stessa cosa di una proprietà di un oggetto
Vediamo un esempio di definizione di prototipo cioè tipo di un oggetto in JavaScript che avviene
tramite l'implementazione di quello che viene chiamato metodo 'costruttore'.
Un costruttore, come nei linguaggi OO, non è altro che un metodo che viene richiamato quando
l'oggetto viene istanziato e ha il compito di inizializzare la nuova istanza dell'oggetto secondo valori
prestabiliti o in base ai parametri ricevuti.
Proviamo a fare una similitudine, così come la matrice rappresenta l'originale da cui stampare le
banconote, così il tipo dell'oggetto, consistente nell'elenco di una serie di proprietà e funzioni che ne
4
Una specie di struttura in C; in genere si fa riferimento ai named values con il nome di proprietà
individuano le caratteristiche ed il comportamento è l'originale da cui, attraverso l'atto dell'istanza
generare una variabile avente le sue stesse caratteristiche.
Come esempio, proviamo a definire un tipo di oggetto che possa poi essere utilizzato come
un'anagrafica e cioè che sia caratterizzato da un nome, un giorno di nascita, un mese, ed un anno. Si
vuole inoltre poter visualizzare nella finestra del browser, all’interno del documento, i dati di quella
particolare istanza.
Procediamo quindi a scrivere il costruttore del tipo Anagrafica:
function Anagrafica (Nome, Giorno, Mese, Anno) {
this.Nome = Nome;
this.Giorno = Giorno;
this.Mese = Mese;
this.Anno = Anno;
this.Visualizza = StampaOggetto;
}
La parola chiave this, utilizzata all'interno del costruttore è un modo per far riferimento ad una
proprietà dell'oggetto sul quale si lavora.
Nell’esempio proposto sarà necessario aver precedentemente definito la funzione StampaOggetto()
<SCRIPT LANGUAGE="javascript">
<!—
function StampaOggetto() {
document.write ("Dati in archivio:");
document.write ("Nome: "+this.Nome);
document.write ("Giorno: "+this.Giorno);
document.write ("Mese: "+this.Mese);
document.write ("Anno: "+this.Anno);
}
function Anagrafica (Nome, Giorno, Mese, Anno) {
this.Nome = Nome;
this.Giorno = Giorno;
this.Mese = Mese;
this.Anno = Anno;
this.Visualizza = StampaOggetto;
}
//-->
</SCRIPT>
In questo modo, per visualizzare le proprietà di un oggetto di tipo Anagrafica, si istanzia ad
esempio con il nome Antonio,
Antonio = new Anagrafica ("Antonio", 11, "Novembre", 1968);
e si chiederà come servizio all’oggetto Antonio di visualizzarle:
Antonio.Visualizza(); // esecuzione del metodo
Codice completo della pagina web:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
<!-function StampaOggetto ()
{
document.write ("Dati in archivio:");
document.write ("<BR>Nome: "+this.Nome);
document.write ("<BR>Giorno: "+this.Giorno);
document.write ("<BR>Mese: "+this.Mese);
document.write ("<BR>Anno: "+this.Anno);
}
function Anagrafica (Nome, Giorno, Mese, Anno) {
this.Nome = Nome;
this.Giorno = Giorno;
this.Mese = Mese;
this.Anno = Anno;
this.Visualizza = StampaOggetto;
}
Antonio = new Anagrafica ("Antonio", 11, "Novembre", 1968);
// crea istanza
Antonio.Visualizza(); // esecuzione del metodo
//-->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Effetto
In JavaScript si può aggiungere una proprietà ad una particolare istanza di un oggetto. Ad
esempio scrivendo:
Antonio.Indirizzo = "Via Parma, Chiavari";
si aggiunge la proprietà Indirizzo all'istanza Antonio dell'oggetto Anagrafica.
Questa operazione non avrà alcun effetto sugli altri oggetti dello stesso tipo che sono già stati
istanziati o che lo saranno in seguito.
Per aggiungere una proprietà ad un oggetto si può utilizzare la parola chiave prototype. In
questo caso la proprietà verrà aggiunta alla definizione del tipo dell'oggetto e quindi avrà effetto su
tutti gli oggetti già istanziati o che istanzieremo. La sintassi è la seguente:
Anagrafica.prototype.NomeProprietà = ValoreProprietà;
potendo inizializzare ad un valore nullo (uso della parola chiave null) come nel seguente esempio:
Anagrafica.prototype.Indirizzo = null;
Antonio.Indirizzo = "Via Parma, Chiavari;
Claudio.Indirizzo = "Via Merano, Mesagne";
Entrambe le possibilità illustrate per aggiungere proprietà non sono un modo consigliato di
procedere; si dovrebbe infatti progettare con attenzione il tipo di oggetto e non modificarne in
seguito la definizione.
Le principali famiglie di oggetti in Javascript:




“Riflessi” da HTML (creati automaticamente dal browser per ogni elemento di un documento
HTML)
Interni o integrati (non legati al browser né al documento HTML: Array, String, Date, Math)
Browser-dipendenti5 (detti oggetti Navigator, “riflessi” dall’ambiente del browser)
Definiti dall’utente (richiedono prima la definizione di una classe cioè una famiglia di oggetti
con le stesse caratteristiche o attributi e comportamenti o metodi tra i quali il costruttore che
servirà ad inizializzare i valori degli attributi poi la creazione con operatore new )
L’oggetto globale
Quando l’interprete JavaScript va in esecuzione una delle prime cose che fa è creare un oggetto
globale.
Le proprietà di questo oggetto globale sono le variabili dichiarate all’interno di programmi
JavaScript.
Quando si dichiara una variabile si sta definendo una proprietà dell’oggetto globale.
L’interprete JavaScript inizializza questo oggetto con altri valori e funzioni predefinite.
Per far riferimento a questo oggetto in codice javaScript che non fa parte di funzioni possiamo usare
la parola chiave this
 All’interno di funzioni this ha un significato differente (è un riferimento all’oggetto corrente)

In JavaScript lato client l’oggetto Window serve da oggetto globale (è il padre della gerarchia
che contiene document che contiene oggetti “riflessi” da HTML quali links, … images, forms
contenitore di elements quali text, button etc… Ogni discendente è una proprietà dell’antenato)
 Per far riferimento a this possiamo usare la proprietà auto-referenziale window dell’oggetto
globale Window
Il call object
Le variabili locali (quelle dichiarate all’interno di una funzione) sono anch’esse proprietà di un
oggetto chiamato call object.
Il “tempo di vita” di un call object è la durata dell’esecuzione della funzione a cui è associato.
Costanti
Variabili a sola lettura
Sono create usando la parola chiave const
 const sconto=0.1;
 const nome=“pippo”;
Esistono in JavaScript anche delle costanti predefinite che rappresentano i più comuni valori
matematici (accessibili attraverso l’oggetto math)
5
Una pagina web viene scomposta da JavaScript in un modello ad oggetti (ognuno con le sue proprietà) in relazione
reciproca. Oggetti “di livello massimo” nella gerarchia degli oggetti JavaScript: Window, document, location,
navigator e history
Espressioni ed operatori
Espressione
Un’espressione è una frase JavaScript che l’interprete JavaScript può valutare per produrre un
valore. Un’espressione è un insieme valido di letterali, variabili, operatori ed espressioni che una
volta valutata produce un singolo valore; il valore può essere un numero, una stringa o un valore
logico (true/false).
Il valore di un’espressione letterale è il valore del letterale stesso
 “casa”
Il valore di un’espressione variabile è il valore che la variabile contiene o a cui fa riferimento
 a = 5;
È possibile combinare delle espressioni attraverso degli operatori per ottenere espressioni più
complesse
Tipi di operatori
Unario
 L’operatore ha un solo operando Ad esempio, -3
Binario
 L’operatore ha due operandi. Ad esempio, 3+4
Ternario
 L’operatore ha tre operandi. Ad esempio, a < 4 ? 3 : 4;
Operatori aritmetici
x + y addizione
x – y sottrazione
x * y moltiplicazione
x / y divisione, restituisce double
++i incremento prefisso
i++ incremento postfisso
--i decremento prefisso
i-- decremento postfisso
-i
negazione
x % y modulo
Operatori relazionali
Restituiscono un valore booleano
x > y maggiore di
x >= y maggiore o uguale a
x < y minore di
x <= y minore o uguale a
a in x vero se a è una proprietà dell’oggetto x
y istanceof x vero se y è un’istanza della classe x
Esempio di in ed istanceof
var point = {x:1, y:1};
// x è un oggetto
if (x in point)
{
// istruzioni da eseguire}
var theDay=new Date(2003, 4, 29)
if (theDay instanceof Date)
{
// istruzioni da eseguire
}
Operatori di uguaglianza
a = = b uguaglianza – Restituisce vero se a e b sono uguali anche dopo conversioni
 3 = = “3”restituisce vero
a = = = b identità – Restituisce vero se a e b sono uguali e sono dello stesso tipo
 3 = = = “3”restituisce falso

Operatori di disuguaglianzana
a != b disuguaglianza
– Restituisce vero se a e b sono diversi anche dopo conversioni
 3 != “2” restituisce vero
 a != = b non-identità – Restituisce vero se a e b non sono identici
 3 != = “3” restituisce vero
Operatori su stringhe
Tutti gli operatori di relazione già visti
+ concatenazione
// conversione implicita : prevale string
"Ciao a voi " + 3; => "Ciao a voi 3"
L’operatore + usato con stringhe e numeri non è associativo:
1 + 2 + "gattini"; produce "3 gattini"
"gattini:" + 1 + 2; produce "gattini: 12"
conversione implicita da stringa a numerico: uso di operatore * che opera solo su operandi
numerici: X = “3” * 5 => X 15
Ancora su stringhe
Fate attenzione al confronto tra stringhe: la stringa “Casa” viene prima di abaco”
 In UNICODE (ma anche in ASCII) le lettere maiuscole vengono prima delle minuscole
Per convertire un numero x nella stringa "x" è sufficiente scrivere ""+x
 ""+3 produce "3"
Operatori logici
&& AND logico. Ad esempio
expr1 && expr2
|| OR logico. Ad esempio
expr1 || expr2
! NOT logico. Ad esempio
!expr
Le espressioni logiche vengono valutate da sinistra verso destra; l’interpretazione si arresta appena
diventa noto il valore dell’espressione
– 7 < 10 || “espressione”
“espressione” non verrà mai valutata
Operatori bitwise
Lavorano sui bit che rappresentano i loro operandi
& AND bitwise
|
OR bitwise
^
XOR bitwise
~
NOT bitwise
<< shift verso sinistra (x << 3;)
// moltiplicare per 2n_posizioni
>> shift verso destra (x >> 4;)
// dividere per 2n_posizioni
>>> shift verso destra con riempimento di 0
Assegnamento
Il più semplice tipo di operatore =
Esempi
– x=3; str=“casa”;
Assegnamento multiplo
 x = y = z = 0;
Esistono altri operatori di assegnamento che sono la forma abbreviata di operazioni standard
– E.g., x+=3; equivalente a x=x+3;
Forma abbreviata
x += y equivale a x = x + y
x -= y equivale a x = x - y
x *= y equivale a x = x * y
x /= y equivale a x = x / y
x %= y equivale a x = x % y
x <<= y equivale a x = x << y
x >>= y equivale a x = x >> y
x >>>= y equivale a x = x >>> y
x &= y equivale a x = x & y
x ^= y equivale a x = x ^ y
x |= y equivale a x = x | y
Operatore condizionale
Unico operatore ternario in JavaScript
Sintassi :
(condizione) ? expr1 : expr2
 restituisce la valutazione di expr1 se condizione è vera, altrimenti restituisce la valutazione di
expr2
 expr1 e expr2 possono avere tipi diversi
Operatore typeof
L’operatore typeof restituisce una stringa che indica il tipo dell’operando
Sintassi:
typeof operando
oppure
typeof (operando)
Esempio
if (typeof a = = "string")
// tipo di dato primitivo string
document.write(a + " &egrave; una stringa");
Esempi di typeof
– typeof parseInt
 typeof undefinedVariable
 typeof 33
 typeof "Ciao"
 typeof true
 typeof null
restituisce la stringa "function"
restituisce "undefined"
restituisce "number"
restituisce "string"
restituisce "boolean"
restituisce "object"
Operatore void
L’operatore void specifica un’espressione che deve essere valutata senza restituire un valore
Sintassi:
void espressione oppure void (espressione)
Esempio di uso di void
Il seguente codice crea un link che fa aprire una nuova finestra del browser:
<a href=“ javascript:void window.open();” >Apri una nuova finestra </a>
Usato in concomitanza degli eventi (onClick, onMouseOver, … .)
Operatore virgola
Valuta il suo operando sinistro poi quello destro e restituisce il valore del suo operando destro
Esempio
 i=0, j=1, k=2;
assegna 0 ad i, 1 a j, e 2 a k e restituisce il valore 2
Altri operatori
new
– Serve a creare istanze di oggetti
delete – Serve a rimuovere proprietà di oggetti
()
– Operatore chiamata a funzione
[] e . – Operatori di accesso ad array ed oggetti. Si ricordi che gli oggetti array in JavaScript hanno
dimensione dinamica e possono essere anche non omogenei.
Istruzioni
Istruzioni JavaScript
In JavaScript la più semplice istruzione è un’espressione che ha un effetto collaterale
 s = 4 + i;
oppure cont++;
In JavaScript possiamo combinare, usando le parentesi graffe più istruzioni in una singola istruzione
o istruzione blocco
{ x = Math.PI;
cx = Math.cos(x);
alert("cos(" + x + ") = " + cx);
}
Istruzioni condizionali
Un’istruzione condizionale è un insieme di comandi che vengono eseguiti se una condizione
specificata è vera
if
con sintassi: if (espressione) istruzioni
if else
con sintassi: if (espressione) istruzioni1 else istruzioni2
if else if con sintassi: if (espressione1) istruzioni1else if (espressione2) istruzioni2 else istruzioni3
Istruzione switch
Un’istruzione switch permette ad un programma di valutare un espressione e confrontare il valore
dell’espressione con un’etichetta (label) case.
Se si trova una corrispondenza, allora il programma esegue l’istruzione associata
La label può essere una qualsiasi espressione arbitraria, non necessariamente una costante al
tempo di compilazione come accade per il C, C++ o Java
Sintassi
switch (espressione)
{
case label1 :istruzione1;
break;
case label2 :istruzione2;
break;
...
default : istruzionen;
}
Può essere:
case 60*60*24:
case Math.PI:
case n+1:
case a[0]:
Esempio
switch (fruits)
{
case "Oranges" :document.write("Oranges are $0.59 a pound.<BR>");
break;
case "Apples" :document.write("Apples are $0.32 a pound.<BR>");
break;
case "Bananas" :document.write("Bananas are $0.48 a pound.<BR>");
break;
case "Cherries" :document.write("Cherries are $3.00 a pound.<BR>");
break;
default :document.write("Sorry, we are out of " + i + ".<BR>");
}
Istruzioni di ciclo
Un ciclo è un insieme di comandi che vengono eseguiti ripetutamente fino a quando una condizione
specificata è soddisfatta. Semplificano azioni ripetitive:
while
do while
for
for in
Ciclo for
Sintassi
for (assegnamento; condizione; incremento) istruzioni
Esempi
for (count = 0; count < 10; count++)
document.write(count + "<br>");
for (i = 0, j = 10 ; i < 10 ; i++, j--)
sum += i * j;
// opzionali
Ciclo while
Sintassi:
while (condizione) {istruzioni}
Esempio
var count = 0;
while (count < 10)
{
document.write(count + "<br>");
count++;
}
Ciclo do while
Sintassi:
do {istruzione} while (condizione );
Esempio
var i=0;
do {
i+=1;
document.write(i);
} while (i<5);
Ciclo for in
Sintassi:
for (variable in object) statement
Esempio
for (prop in my_object)
{
nome= "Nome: " + prop;
valore= "Valore: " + my_object[prop];
document.write(nome + " - " +valore+ "<br>");
}
label
Con una label possiamo fornire un identificativo ad un’istruzione. È usata in un ciclo in
concomitanza con break o continue
Sintassi
label:istruzione
Esempio
markLoop: while (theMark = = true) doSomething();
break
Con break forziamo l’uscita dal ciclo più interno che lo racchiude o da uno switch
Sintassi:
break
oppure
break label;
Esempio
for (i = 0; i < a.length; i++)
{
if (a[i] == target)
break;
}
continue
È usato solo all’interno di un ciclo, interrompe il ciclo e va a controllare la condizione
Sintassi:
continue
Esempio
oppure continue label;
i = 0;
n = 0;
while (i < 5) {
i++;
if (i = = 3)
continue;
n += i;
}
Esempio di continue con label
checkiandj :while (i<4) {
document.write(i + "<BR>");
i+=1;
checkj :while (j>4) {
document.write(j + "<BR>");
j-=1;
if ((j%2)= =0)
continue checkiandj;
document.write(j + " is odd.<BR>");
}
document.write("i = " + i + "<br>");
document.write("j = " + j + "<br>");
}
Istruzione with
L’istruzione with stabilisce l’oggetto di default per un insieme di istruzioni
Sintassi:
with (oggetto){istruzioni }
Per identificativo che compare in istruzioni si verifica se è una proprietà di oggetto
L’uso di with rallenta l’esecuzione
Esempio di with
x = Math.sin(i * Math.PI / 20);
y = Math.cos(i * Math.PI / 30);
Può essere trasformato in
with(Math) {
x = sin(i * PI / 20);
y = cos(i * PI / 30);
}
Istruzioni non ancora esaminate
function
throw
try/catch/finally
– Definizione di funzioni
– Generazione di un’eccezione
– Meccanismo di gestione delle eccezioni
Modalità per inserire in pagine web ed eseguire JavaScript:

Esistono due fondamentali modi per inserire uno script in un documento HTML:

Con tag <script> </script> nell’intestazione o nel corpo
consigliato <script Language=”JavaScript”> per versione 1.0
<script Language=”JavaScript1.2”> versione 1.2 leggibile da NN 4.0 ed IE 4.0
oppure <script type=”text/javascript”>
esempio:
<head><title>….</title>
<script >
<!-document.write(“Sono uno script interno”)
//-->
</script>
</head>

// istruzione di output
Caricandolo da file esterno (con estensione .js) con attributo src nel tag <script src=
“nomefile.js”></script>
esempio:
<head>
<title>….</title>
<script src=”primo.js”>
<!-//-- >
</script>
</head>
con primo.js
alert (“Sono uno script esterno”)
// istruzione di output con OK
oppure primo.js
confirm (“Sono uno script esterno”) // istruzione di output con OK e Annulla
Modalità per eseguire JavaScript:

Si possono immettere istruzioni direttamente nel campo URL di un Browser:
esempio: per scrivere “Ciao” in bianco, sfondo blue digitare nel box indirizzo
javascript: document.write(“Ciao”); document.bgColor=”blue”; document.fgColor=”white”;
e premere INVIO



Eseguire uno script in luogo di link <a href=”JavaScript: ..”>…</a>
esempio:
<body>….
<a href= “JavaScript: alert(‘Hai cliccato’)”>clicca</a>
<!-- attenzione: alternare “ con ‘ -->
</body>
Altro modo: in seguito all’attivazione di un evento
esempi:
<a href= “nomerisorsa.htm” onClick = “alert(‘Hai cliccato’)”>clicca</a>
<!-- attenzione: alternare “ con ‘ -->
Altra modalità: creazione dinamica
esempio: creo un nuovo documento HTML che esegue alert()
function CreaHtml (){
document.open()
document.writeln(“<script Language= ‘JavaScript’>”)
document.writeln(alert(“Ciao”) + “</script>”)
document.close()
}
La chiamata ad una funzione può essere ad esempio all’interno dell’attributo action di un tag form:
<form action =”javascript: CreaHtml()“>
<input type=”submit” value=”Crea”>
</form>
NB: non si possono definire funzioni all’interno di altre funzioni
Modalità di esecuzione: sintesi
Le istruzioni JavaScript possono essere eseguite in modi diversi:
1. In seguito all'attivazione di un evento, solitamente come gestore di eventi all’interno di certi tag
HTML .Gli eventi si possono attivare, forzandoli, anche all'interno degli script, come se fossero
delle proprietà dell'oggetto:
Oggetto.gestore_evento = handler_code;
Ad un evento può essere associata un’unica istruzione, ma di solito l'associazione viene fatta con un blocco
di istruzioni: tale funzione, attivata dal gestore di evento (event handler del tipo onNome_Evento) è detta
handler code facendo riferimento alla funzione implementata dall’utente che realizza la risposta all’evento.
2. in luogo di un link nella forma <A HREF:"javascript: comando">, inserendo un’espressione
JavaScript come valore di un attributo HTML
3. valori JavaScript possono essere richiamati dall'HTML “al volo” includendoli tra i caratteri &{ e
};%. Occorre osservare che sotto Internet Explorer queste espressioni non sono gestite.