docProgrammazione web lato client con JavaScript
download 
Reclamo Transcript
Programmazione web lato client con JavaScript
Programmazione web
lato client
con JavaScript
Marco Camurri
1
JavaScript
●
●
●
●
●
E' un LINGUAGGIO DI PROGRAMMAZIONE che
consente di inserire codice in una pagina web
Sintassi simile a Java (e al C) , ma NON E' Java
Codice inserito direttamente nella pagina HTML o in file
collegati ( estensione .js )
E' un linguaggio INTERPRETATO : il browser intepreta ed
esegue il codice presente nella pagina ( se abilitato ... )
E' un linguaggio di programmazione web LATO CLIENT
( al contrario di PHP, che è un esempio di linguaggio LATO SERVER )
Marco Camurri
2
Pagina HTML dinamica con JavaScript
apri esempio
<html> <body>
<img id="lampada" onclick="cambiaImmagine()" src="spenta.gif" >
<script>
function cambiaImmagine()
{
var imm = document.getElementById('lampada');
if ( imm.src.match("accesa.gif") ) {
imm.src = "spenta.gif";
JavaScript può
}
modificare
else {
gli attributi degli
imm.src = "accesa.gif";
elementi HTML
}
a seguito di eventi
}
</script>
(es. click)
</body>
</html>
Marco Camurri
3
Un esempio per iniziare
<html>
<head> </head>
<body>
<h1> PRIMO ESEMPIO </h1>
<button onclick="saluta( )" >
CLICCA QUI
</button>
<script>
function saluta() {
alert( " ciao! " );
}
</script>
apri esempio
</body>
</html>
Marco Camurri
4
JavaScript esterno alla pagina
E' possibile collocare il codice JavaScript in un file esterno:
function saluta() {
<html>
alert( " ciao! " );
<head>
<script src="miofile.js" />
</head>
}
...
function controlla() { ... }
<body>
<h1> PRIMO ESEMPIO </h1>
<button onclick="saluta( )" >
function somma(x,y) { ... }
...
CLICCA QUI
</button>
miofile.js
</body>
</html>
miofile.html
Marco Camurri
5
Librerie JavaScript (Frameworks)
Lo script JavaScript esterno pò trovarsi anche su un
altro server sul web
●
Esistono diverse librerie JavaScript (frameworks):
insiemi di funzioni già scritte che semplificano la
creazione di applicazioni complesse
●
Marco Camurri
6
Ora sappiamo che ...
●
il codice JS va inserito fra i tag <script> e </script>
( all'interno di head o body, ma è buona regola inserirlo SEMPRE alla fine di
body per velocizzare il caricamento della pagina )
●
il codice JS può essere organizzato in funzioni
parola
chiave
●
function nomeFunz( nomePar1, nomePar2, ... ) {
// codice della funzione
}
la funzione può essere associata ad un evento:
<button onclick="nomeFunz()" > clicca qui </button>
Marco Camurri
NON SCORDARE
LE PARENTESI !
7
Uso di variabili e commenti
<html><body>
<script>
var x,y,z;
Apri esempio
le variabili si dichiarano facendo precedere il
nome della variabile dalla parola chiave var
In JS non si specifica il TIPO delle variabili !
x = 5;
y = 6.5;
z = x + y;
alert( z );
x = "mela";
y = 'pera' ;
alert( x + y );
// alert( "fine" );
</script>
</body> </html>
Marco Camurri
In C avremmo dovuto scrivere:
int x,y,z;
oppure float x,y,z;
oppure ...
le stringhe vanno racchiuse tra apici doppi o singoli
(indifferente)
il + tra stringhe effettua la concatenazione.
Prova anche: alert( x + " " + y);
l'istruzione alert non è eseguita poichè è
all'interno di un commento. Per commenti
su più righe: /* ......
.......
*/
8
Tipi di dato in JavaScript
number
x
x
x
x
= 5;
= " ciao ";
= 4.5;
= true;
string
boolean
object
A differenza di linguaggi come il C, in
JavaScript la stessa variabile può
contenere prima un numero, poi una
stringa, poi un boolean , ecc...
il tipo di dato non è legato alla variabile,
ma al valore della variabile in un dato istante.
così il programmatore non deve preoccuparsi
troppo del tipo dei dati
Marco Camurri
....
MA ....
9
Tipi di dato (segue)
apri esempio
.... MA ATTENZIONE: il tipo di dato determina il modo in
cui alcune operazioni sono effettuate!
var x = 5;
var y = 6;
alert(x+y);
mostra:
11
var x = "5";
var y = 5;
if ( x == y )
alert( "vero" );
else
alert( "falso" );
Marco Camurri
var x = "5";
var y = "6";
alert(x+y);
mostra:
56
var x = "5";
var y = 6;
alert(x+y);
mostra:
56
la "somma" tra una stringa e un
numero viene interpretata come
concatenazione tra stringhe.
VERO!
NOTA: esiste anche l'operatore
===
che in questo caso avrebbe
restituito "falso"
10
Confronto alfabetico e numerico
var x = 100;
var y = 2;
if ( x < y )
alert( "vero" );
else
alert( "falso" );
mostra "falso"
( come ci aspettiamo)
Marco Camurri
var x = "100";
var y = "2";
if ( x < y )
alert( "vero" );
else
alert( "falso" );
ATTENZIONE ! ! !
la stringa "100" in
ordine alfabetico
viene prima della
stringa "2"
ordinamento
numerico:
ordinamento
alfabetico:
1
10
50
70
101
691
146572
1
10
101
146572
50
691
70
11
Le funzioni parseInt e parseFloat
la funzione parseInt riceve come argomento una stringa e
restituisce il numero intero corrispodente ( per numeri con virgola
esiste la funzione parseFloat ).
var x = "100", y = "2", a, b ;
a = parseInt( x ); // ora a contiene 100
b = parseInt( y ); // ora b contiene 2
if ( x < y ) confronto alfabetico
alert( "vero" );
else
alert( "falso" );
if ( a < b )
confronto numerico
alert( "vero" );
else
alert( "falso" );
Marco Camurri
apri esempio
Si può usare la stessa variabile
come input e output di parseInt:
x="103";
x = parseInt( x );
// ora x contiene 103 (numero)
12
il valore "Not a Number" ( NaN )
var x = "ciao";
var y = parseInt(x);
alert( y );
apri esempio
Per verificare se una variabile contiene il valore NaN occorre
utilizzare la funzione isNaN .
if ( isNaN(y) )
alert( "la variabile y non contiene un numero" );
else
alert( "la variabile y contiene il numero " + y );
Attenzione: non si può utilizzare l'operatore == o === per confrontare valori NaN,
poichè il confronto restituisce sempre valore falso. Esempio: la condizione ( y==NaN )
è sempre falsa (anche se y contiene il valore NaN).
Marco Camurri
13
Finestre di INPUT/OUTPUT
Con JavaScript è possibile aprire finestre (box) che mostrano un
messaggio all'utente o richiedono un valore all'utente.
apri esempio
alert
confirm
prompt
Marco Camurri
14
Le funzioni alert e confirm
alert:
mostra un messaggio con la sola opzione OK
var x=10, y=20;
alert( "la somma fra " + x + " e " + y + " è " + (x+y) );
confirm:
mostra un messaggio di richiesta con le opzioni OK e ANNULLA
e restituisce true se l'utente ha premuto OK
var risp;
risp = confirm(" Procedere con il pagamento ? ");
if ( risp == true )
{
// fai qualcosa...
}
else { /* fai qualcos'altro...*/ }
Marco Camurri
15
La funzione prompt
prompt: apre una finestra contenente un messaggio e un campo
di testo in cui l'utente può scrivere.
Se l'utente preme ok, la funzione restituisce una stringa
che corrisponde al testo digitato (eventualmente "" ).
Se preme ANNULLA, la funzione restituise il valore null .
var nome = prompt(" Come ti chiami ? ");
if ( nome != null )
alert( "ti chiami" + nome );
else
alert( "hai premuto annulla" );
Marco Camurri
null è un altro valore
speciale presente in
JavaScript (come NaN).
Il valore null indica
assenza di informazione
16
il valore undefined
oltre a NaN e null, esiste un terzo valore "speciale“: undefined
Una variabile contiene il valore undefined quando non le è mai stato
assegnato un valore.
var x;
alert(x); // mostra undefined perchè x non è mai
// stata inizializzata
Marco Camurri
17
Operatori
Aritmetici
Logici
Relazionali
+
addizione
== uguale
!
NOT
-
sottrazione
!=
diverso
&&
AND
*
moltiplicazione
>
maggiore
||
OR
/
divisione
>= maggiore o uguale
% modulo
<
minore
<= minore o uguale
Assegnamento
Incremento / Decremento
=
assegnamento
++
incremento
+=
somma e assegnamento
--
decremento
-=
sottrazione e assegnamento
/=
divisione e assegnamento
*=
moltiplicazione e assegnamento
Marco Camurri
18
Strutture di controllo
if ... else
ciclo for
var punteggio;
if ( punteggio == 100 )
alert( "livello superato" );
else
alert( "hai perso" );
var i;
for( i=0; i<100; i++ ) {
alert( "Conta: " + i );
}
ciclo do-while
apri esempio
var numero;
do {
n = parseInt( prompt("Inserisci un numero fra 1 e 1000") );
}
while( ( isNaN(n) ) || ( n < 0 ) || ( n > 1000) );
Marco Camurri
19
