docJavaScript Introduzione Introduzione
download 
Reclamo Transcript
JavaScript Introduzione Introduzione
JavaScript
Introduzione
1
Pasqualetti Veronica
Introduzione
2
JavaScript è un linguaggio di scripting, ossia un linguaggio dalle
funzionalità ridotte rispetto a un vero e proprio linguaggio di
programmazione.
JavaScript può essere utilizzato per controllare quasi tutte le
componenti del browser e per rispondere a varie azioni dell'utente,
quali l'immissione nei moduli e la navigazione nella pagina.
È particolarmente
ti l
t utile
til perché
hé ttutti
tti i compiti
iti di elaborazione
l b
i
sono
scritti nello script (incorporato nel documento HTML), e quindi
l'intero processo definito dallo script è eseguito sul lato del
client senza la necessità di fare riferimento a un server
client,
server.
In altri termini, invece di fare eseguire al server dei compiti e fornire
i risultati al browser, quest’ultimo può gestire localmente alcuni
compiti,
i i dando
d d cosìì all’utente
ll’
tempii di risposta
i
più
iù b
brevii e riducendo
id
d
il traffico di rete.
Introduzione
3
Si può utilizzare JavaScript anche per controllare direttamente
oggetti quali la barra di stato del browser, i frame e perfino la
finestra di visualizzazione.
Infine JavaScript offre l'interattività tra plug-in e applet Java. Si
può scrivere uno script di JavaScript, ad es., per verificare che dei
dati numerici siano stati inserti in un modulo che richiede un
numero di telefono.
t l f
Senza alcuna trasmissione in rete, uno script di questo tipo può
p
il testo immesso e avvertire l'utente con una finestra
interpretare
di messaggio appropriata.
Quando un documento HTML con uno script di JavaScript è
caricato in un browser che supporta questo linguaggio,
linguaggio le funzioni
dello script vengono calcolate, memorizzate, ed eseguite quando si
verificano determinati eventi (a es. quando l'utente sposta il
ouse sopra
sop a u
un oggetto o immette
ette u
un testo in u
una
a case
casella).
a).
mouse
Storia
4
Il primo
i
b
browser a supportare
t
JJavascript
i t è stato
t t
Netscape Navigator 2.0. Naturalmente anche le
versioni successive lo supportano
supportano.
Anche Microsoft Internet Explorer (a partire dalla
versione
i
3
3.0)
0) supporta
t JJavascript.
i t
Oggi tutti i browser supportano Javascript
Dynamic
y
HTML ((DHTML))
5
Una
U pagina
i “di
“dinamica”
i ” (DHTML) è una pagina
i
HTML contenente codice JavaScript associato a
determinati eventi che implementa specifiche
funzionalità
Non
N bi
bisogna confondere
f d
una pagina
i DHTML con
una pagina generata dinamicamente dal server (asp,
php,
h jsp,
js etc)
t )
Sintassi
6
Un
U programma JavaScript
J
S i t è composto
t d
da una
sequenza di istruzioni terminate dal punto e virgola
(;)
Un insieme di istruzioni delimitate da parentesi
graffe
ff ({ e }) costituiscono
tit i
un bl
blocco
ECMAScript
p
7
E
E’ un linguaggio di script client
client-side
side
Nato nel 1995 da Netscape con il nome di Mocha e
successivamente di LiveScript
Standardizzato da ECMA International (European
Computer Manufacturers Association - associazione
fondata nel 1961e dedicata alla standardizzazione nel
settore informatico e dei sistemi di comunicazione)
nel 1997
La sintassi lo rende simile a Java,
Java ma sono molto
diversi
7
JavaScript
p e HTML
8
Per inserire codice JavaScript in un documento HTML
esistono tre modi:
elemento <script> contenente il codice JavaScript
<script type=“text/javascript”>
<![CDATA[ ... unescaped script content ... ]]>
</script>
inclusione di script esterni
<script src=
src="script
script_esterno.js
esterno js"></script>
></script>
direttamente nel codice HTML in risposta ad eventi
<input type=“button” onclick=“alert(‘Ciao!’)” …>
<a href=“javascript:nome_funzione()”>Clicca qui!</a>
8
JavaScript:
p Esempio
p
9
<html>
<head>
<script type="text/javascript">
function raddoppia(n)
{
res = 2 * n;
alert("Il doppio di " + n + " è " + res);
}
</script>
/ i
</head>
<body onload="raddoppia(7)">
…
</body>
/b d
</html>
9
JavaScript
p vs Java
10
JavaScript
p non va confuso con Java,, dato che tra i due
linguaggi esistono importanti differenze:
JavaScript
Java
è un linguaggio interpretato
è un linguaggio compilato
viene eseguito sul client
viene eseguito sul server
non consente di scrivere
programmi autonomi
consente di scrivere
programmi autonomi
Introduzione
11
JavaScript si compone di elementi di programmazione quali:
•
•
•
•
oggetti,
proprietà,
metodi,
gestori di eventi.
La sintassi di JavaScript ha due elementi fondamentali:
• espressione
p
((o istruzione):
) combinazione di operatori,
p
,
variabili, letterali e parole chiave di cui si può calcolare il
valore.
• funzione:
f
i
gruppo di enunciati
i ti provvisto
i t di un nome, che
h sii può
ò
usare più volte semplicemente chiamandone il nome.
Sintassi
12
Un
U id
identificatore
tifi t
è una sequenza di simboli
i b li che
h
identifica un elemento all’interno del programma
Un identificatore
id ifi
può
ò essere composto d
da llettere e
numeri, non deve contenere elementi di
punteggiatura
t
i t
o spazii e d
deve cominciare
i i
con una
lettera
Sintassi
13
Q
Questi
ti sono id
identificatori
tifi t i validi
lidi
Nome
Codice_Fiscale
C di
Fi l
a0
Q
Questi
ti sono id
identificatori
tifi t i non validi
lidi
0a
x.y
Partita IVA
Sintassi
14
Il li
linguaggio
i è case-sensitive,
iti ovvero di
distingue
ti
lle
lettere maiuscole dalle minuscole
I commentii sono d
delimitati
li i i d
da /* e */
Il simbolo // indica che il testo seguente sulla
medesima riga è un commento
Variabili
15
Una
U variabile
i bil è un’area
’
di memoria
i contenente
t
t
informazioni che possono “variare” nel corso
dell’esecuzione
dell
esecuzione del programma
Una variabile è caratterizzata da un nome
id tifi ti e d
identificativo
dall ti
tipo d
dell’informazione
ll’i f
i
contenuta
t
t
Definizione variabili
16
Prima
P i
di essere adoperata
d
t una variabile
i bil d
dovrebbe
bb
essere definita
var eta; //non è obbligatorio
La definizione stabilisce il nome della variabile,
mentre
t il ti
tipo di
dipende
d d
dall’assegnazione
ll’
i
eta = 35; //intero
nome = “M
“Mario
i R
Rossi”;
ssi” //stringa
//st i
Definizione variabili
17
Il tipo
ti di una variabile
i bil di
dipende
d d
dall’ultima
ll’ lti
assegnazione, quindi una variabile può cambiare tipo
nel corso del suo ciclo di vita
x = 10; //intero
…
x = “a”; //stringa
JavaScript
J
S i t è un li
linguaggio
i “d
“debolmente
b l
t tipato”
ti t ”
Tipi
p dato p
predefiniti
18
Number
N b
Boolean
Null
String
g
Date
Array
Tipo
p Number
19
Una
U variabile
i bil di tipo
ti Number
N b assume valori
l i numerici
i i
interi o decimali
var x = 10; //valore intero
var y = -5.3; //valore decimale
Sono
S
definite
d fi it le
l operazioni
i i aritmetiche
it ti h ffondamentali
d
t li
ed una serie di funzioni matematiche di base
Tipo
p Boolean
20
Una
U variabile
i bil di tipo
ti Boolean
B l
assume i soli
li valori
l i
della logica booleana vero e falso
var pagato = true; //valore logico vero
var consegnato = false; //valore logico falso
Sono
S
definite
d fi it lle operazioni
i i logiche
l i h ffondamentali
d
t li
(AND, OR e NOT)
Tipo
p Null
21
Si tratta
t tt di un ti
tipo che
h può
ò assumere un unico
i valore
l
var a = null;
Serve
S
ad
d iindicare
di
che
h il contenuto d
della
ll variabile
i bil è
non significativo
var sesso = “f”
“f”;
var militesente = null;
Tipo
p String
g
22
Una
U variabile
i bil di tipo
ti String
St i contiene
ti
una sequenza
arbitraria di caratteri
Un valore
l
di tipo
i Stringa
S i
è delimitato
d li i
d
da apici
i i (‘’) o
doppi-apici (“”)
var nome = “Mario Rossi”;
var empty = “”; //Stringa vuota
var empty2
t = new String();
St i () //St
//Stringa
i
vuota
t
var str = ‘Anche questa è una stringa’;
var str2 = new String(
String(“Un’altra
Un altra stringa
stringa”);
);
Tipo
p Date
23
Una
U variabile
i bil di ti
tipo D
Date
t rappresenta
t un iistante
t t
temporale (data ed ora)
var adesso
d
= new Date();
D t ()
var natale2000 = new Date(2000,11,25);
var capodanno2001 = new Date(
Date(“Gen
Gen 1 2001
2001”);
);
E’ definito l’operatore di sottrazione (-) tra due date
che restituisce la differenza con segno espressa in
millisecondi
Tipo
p Arrayy
24
Un
U array è un vettore
tt
monodimensionale
di
i
l di elementi
l
ti
di tipo arbitrario
var v = new Array();
A
() //V
//Vettore
tt
vuoto
t
var w = new Array(“Qui”, “Quo”, “Qua”);
var u = new Array(
Array(“Lun”
Lun , “Mar”
Mar , “Mer”
Mer , “Gio”
Gio , “Ven”
Ven , “Sab”
Sab ,
“Dom”);
Non è necessario specificare la dimensione
Assegnazione
g
25
L’assegnazione
L’
i
è l’
l’operazione
i
fondamentale
f d
t l neii
linguaggi di programmazione imperativa
id = expr
Prima viene “valutata” l’espressione expr, quindi il
risultato
i lt t viene
i
“
“assegnato”
t ” alla
ll variabile
i bil id
Assegnazione
g
26
Si consideri
id i il seguente
t fframmento
t di codice
di
var x = 10;
var y = 7;
var z = 3*(x-y);
Al ttermine
i d
dell’esecuzione
ll’
i
lla variabile
i bil z assume il
valore 9
Espressioni
p
27
U
Un’espressione
’
i
è composta
t d
da
Identificatori di variabili
Costanti
x nome,
x,
nome eta , importo,
importo …
10 3.14,
10,
3 14 “<HTML>”
<HTML> , …
Operatori
Parentesi (( e )) p
per alterare le regole
g
di p
precedenza tra
operatori
Operatori
p
aritmetici
28
O
Operano tra
t valori
l i ((costanti
t ti o variabili)
i bili) numerici
i i
Somma (1+1)
Sottrazione
S tt i
((3-5))
Moltiplicazione (3*4)
Divisione (6/4)
Modulo (6%5)
Cambiamento di segno (
(-3)
3)
Operatori di pre/post
incremento/decremento
29
Derivano
D i
dal
d l li
linguaggio
i C ((e sono presenti
ti in
i C
C++ e
Java)
Alterano
Al
e restituiscono
i i
il valore
l
di una variabile
i bil
Consentono di scrivere codice compatto ed efficiente
Operatori di pre/post
incremento/decremento
30
var x = 10;
var y = x++; //y=10 e x=11
var z = ++x; //z=12 e x=12
var w = x--;; //w=12
//
e x=11
var v = --x; //v=10 e x=10
Operatori
p
su stringhe
g
31
L’unica
L’ i operazione
i
possibile
ibil tra
t stringhe
t i h in
i
un’espressione è la concatenazione:
nomeCompleto
C
l t = titolo
tit l + “ ” + nome + “ ” + cognome
indirizzo = recapito + “, ” + numCivico + “ ” + CAP + “ - ” +
citta + “ ((” + prov + “)”
)
Operatori
p
su stringhe
g
32
Esiste
E i t una fforma più
iù compatta
tt per esprimere
i
l’accodamento
L’istruzione
’i
i
seguente
str = str + newStr;
è equivalente a
str += newStr;
Operatori
p
su vettori
33
L’operatore
L’
t
d
definito
fi it suii vettori
tt i è l’
l’accesso ad
d un
determinato elemento dato l’indice
v[3]
[ ] = 10;
a[i] = b[i] * c[i];
p = v[1];
Il primo elemento di un vettore ha sempre l’indice 0
(come in C/C++ e Java)
Operatori
p
sui vettori
34
Se
S sii assegna un valore
l
ad
d un elemento
l
t non presente
t
questo viene creato
var v = new Array();
A
()
v[0] = 1;
Se
S sii accede
d all valore
l
di un elemento
l
t non presente
t sii
ottiene un valore indefinito
var v = new Array();
A
()
var a = v[0];
Operatori
p
relazionali
35
Confrontano
C f
t
d
due valori
l i e restituiscono
tit i
l’
l’esito
it come
valore booleano
Uguaglianza
U
li
((==))
Disuguaglianza (!=)
Minore (<)
Maggiore (>)
Minore o uguale (<=)
Maggiore o uguale (>=)
Operatori
p
logici
g
36
O
Operano tra
t valori
l i (costanti
( t ti o variabili)
i bili) b
booleani
l
i
AND (&&)
OR (||)
NOT (!)
Solitamente
S lit
t gli
li operandi
di sono l’
l’esito
it di un confronto
f
t
Condizioni
37
L’utilizzo
L’ tili
di operatori
t i relazionali
l i
li e logici
l i i consente
t di
formulare delle condizioni che possono essere
utilizzate per controllare l’esecuzione
l esecuzione del programma
(metodoPagamento==“contrassegno”)
(metodoPagamento==
contrassegno )
&&(!residenteInItalia)
Controllo dell’esecuzione
38
L’esecuzione
L’
i
di un programma è generalmente
l
t
sequenziale
Tuttavia
i iin d
determinate
i
““condizioni”
di i i” può
ò essere
necessario eseguire solo alcune istruzioni, ma non
altre,
lt oppure ripetere
i t
più
iù volte
lt un’operazione
’
i
IF
39
L’istruzione
L’i t i
i t viene
instr
i
eseguita
it solo
l se la
l
condizione cond risulta vera
if(cond)
instr
L’istruzione instr può essere sostituita da un
gruppo di istruzioni tra parentesi graffe
({ e })
IF - ELSE
40
Una
U costruzione
t i
alternativa
lt
ti prevede
d lla presenza di
una seconda istruzione da eseguire nel caso la
condizione risulti falsa
if(cond)
instr_then
else
instr_else
IF – ELSE esempio
p
41
if (scelta==“NO”)
( lt
“NO”) {
// Se la scelta è NO
…
}
else {
// Altrimenti
…
}
SWITCH
42
Lo switch
s itch è un
n particolare
pa ticola e caso di if particolarmente
pa ticola mente
ramificato, in cui viene presa in esame un'unica variabile
che può assumere differenti valori.
switch(<variabile
i h(
i bil d
da valutare>)
l
){
case <valore 1>:
//istruzioni
b k //si
break;
// i ferma
f
quii
case <valore 2>:
//istruzioni
b k //
break;
//sii ferma
f
quii
...
case <valore n>:
//i t i i
//istruzioni
break; //si ferma qui
default:
//istruzioni
}
FOR
43
Viene
Vi
prima
i
eseguita
it l’istruzione
l’i t i
i it quindi
init,
i di
l’istruzione instr viene ripetuta finché la
condizione cond risulta vera,
vera dopo ogni
ripetizione viene eseguita l’istruzione next
for(init; cond; next)
instr
FOR esempi
p
44
Inizializzare
I i i li
a 0 gli
li n elementi
l
ti del
d l vettore
tt
a
for (var i=0;
i 0; i<n; i++)
a[i]=0;
Copiare gli n elementi del vettore a nel vettore b
for (var i=0; i<n; i++)
b[i] [i]
b[i]=a[i];
WHILE
45
L’istruzione
L’i t i
i t viene
instr
i
eseguita
it finché
fi hé la
l
condizione cond risulta essere verificata
while(cond)
instr
Un’istruzione for può essere espressa come
init;
while(cond) {instr; next;}
DO … WHILE
46
Il do...while
d
hil ha
h un ffunzionamento
i
t del
d l ttutto
tt analogo
l
al while, solo che l'istruzione viene eseguita prima
che la condizione venga valutata: in questo modo si
ha la certezza che l'istruzione venga eseguita almeno
una volta.
volta
do {
//istruzioni
} while (<condizione>);
Funzioni
47
Una
U ffunzione
i
è un elemento
l
t di un programma che
h
calcola un valore che dipende “funzionalmente” da
altri
y=f(x)
y log10(x)
y=log10(x)
L’utilizzo delle funzioni nella programmazione
strutturata aumenta la modularità e favorisce il
riutilizzo
Definizione funzioni
48
In
I JavaScript
J
S i t è possibile
ibil d
definire
fi i una o più
iù ffunzioni
i i
all’interno di un programma
function name(arg0 , arg1 , …, argn-1) {
istruzioni…
istruzioni
}
La funzione definita è identificata da name e
dipende dagli argomenti arg0,
arg0 arg1
arg1, …, argn-1
argn 1
Funzioni esempio
p
49
Somma
S
di due
d numerii
function somma(a,
somma(a b) {
return a+b;
}
La
L funzione
f
i
viene
i
“invocata”
“i
t ” all’interno
ll’i t
di
un’espressione
var s = somma(1, 2);
Invocazione di funzioni
50
Quando
Q
d una ffunzione
i
viene
i
iinvocata
t gli
li argomenti
ti
sono inizializzati con i valori specificati
Quindi
Q i di sii procede
d con l’
l’esecuzione
i
d
delle
ll iistruzioni
i i
costituenti la funzione
L’istruzione return restituisce il valore calcolato al
chiamante
Invocazione di funzioni
51
La
L chiamata
hi
t
x = somma(1, 2)
inizializza gli argomenti a e b
rispettivamente ai valori 1 e 2
L’istruzione
L’i t i
return a+b;
valuta
l t l’
l’espressione
s ssi
e restituisce
stit is il risultato
is lt t
(3) che viene assegnato alla variabile x
Variabili locali e globali
g
52
All’interno
All’i t
di una ffunzione
i
è possibile
ibil d
definire
fi i d
delle
ll
variabili “confinate” all’interno della funzione stessa
Tali
li variabili,
i bili dette
d
“l
“locali”,
li” sono create all’atto
ll’
dell’invocazione della funzione e sono distrutte al
t
termine
i d
dell’esecuzione
ll’
i
Il loro valore non è accessibile dall’esterno della
f
funzione
i
Ogni argomento di una funzione è una variabile
locale definita implicitamente
Variabili locali e globali
g
53
Le
L variabili
i bili definite
d fi it all’esterno
ll’ t
di una ffunzione
i
sono
denominate, invece, “globali”
A diff
differenza delle
d ll variabili
i bili llocali,
li lle variabili
i bili globali
l b li
sono accessibili da qualsiasi punto del programma,
anche
h dall’interno
d ll’i t
di una ffunzione,
i
sempre che
h iin
quest’ultima non sia stata definita una variabile
l l con llo st
locale
stesso
ss nome
Variabili locali e globali
g
54
Si consideri
id i il seguente
t fframmento
t di codice
di
function f(…) {
…
var x = 1;
…
}
var x = -1;
…
f( );
f(…);
La variabile globale x continua a valere -1
Procedure
55
Una
U ffunzione
i
che
h non restituisce
tit i
valori
l i viene
i
d
detta
tt
procedura
Una procedura
d
agisce
i
iin genere su variabili
i bili globali
l b li
(side-effect)
Funzioni predefinite
p
56
In
I JavaScript
J
S i t sono presenti
ti alcune
l
ffunzioni
i i
predefinite, ad esempio:
iisNaN(v)
N N( ) verifica
ifi se v non è un numero
parseFloat(str) converte str in un numero decimale
parseInt(str)
( ) converte str iin un numero iintero
Oggetti
gg
57
JavaScript
J
S i t è un li
linguaggio
i orientato
i t t agli
li oggetti,
tti
tuttavia non possiede il costrutto di classe
Molti
l i tipi
i i di d
dato ffondamentali
d
li sono, iin effetti,
ff i d
degli
li
oggetti
Proprietà
p
e metodi
58
Una
U proprietà
i tà di un oggetto
tt è assimilabile
i il bil ad
d una
variabile
cliente nome = “Carlo
cliente.nome
Carlo Bianchi
Bianchi”;;
x = ordine.aliquotaIVA;
Un
U metodo,
t d iinvece, è simile
i il ad
d una ffunzione
i
tot = ordine.calcolaTotale();
Proprietà
p
e metodi
59
Esistono
E i t
d
due sintassi
i t i alternative
lt
ti per accedere
d
alle
ll
proprietà degli oggetti
oggetto proprieta
oggetto.proprieta
oggetto[“proprieta”]
La
L seconda
d è utile
til quando
d il nome d
della
ll proprietà
i tà
viene determinato durante l’esecuzione del
programma
Oggetti
gg
di tipo
p String
g
60
P
Proprietà
i tà
length lunghezza della stringa
M
Metodi
di
charAt(pos) carattere alla posizione pos
subString(start,
bS i (
end)
d) sottostringa
i
dalla
d ll posizione
i i
start alla
ll
posizione end
toUpperCase()/toLowerCase() converte la stringa in
maiuscolo/minuscolo
indexOf(str,, p
pos) p
posizione della p
prima occorrenza della
string str cercata a partire dalla posizione pos
Oggetti
gg
di tipo
p Arrayy
61
P
Proprietà
i tà
length lunghezza del vettore
M
Metodi
di
sort() ordina gli elementi del vettore
reverse()
() inverte
i
l’
l’ordine
di d
degli
li elementi
l
id
dell vettore
Oggetti
gg
di tipo
p Date
62
M
Metodi
t di
getXXX() restituisce il valore della caratteristica XXX della
data
setXXX(val) imposta il valore della caratteristica XXX della
data
toString() restituisce la data come stringa formattata
Oggetti
gg
di tipo
p Date
63
Oggetto
gg
Math
64
P
Proprietà
i tà
E costante di Eulero
PI pii greco
Metodi
abs(val)
b ( l) modulo
d l
ceil(val)/floor(val) troncamento
exp(val)
e p( al) esponenziale
i l
log(val) logaritmo
pow(base,
pow(base exp) elevamento a potenza
sqrt(val) radice quadrata
