Tecnologie lato Client: Javascript © 2005 Stefano Clemente I lucidi sono in parte realizzati con materiale tratto dal libro di testo adottato tradotto.

Presentazione sul tema: "Tecnologie lato Client: Javascript © 2005 Stefano Clemente I lucidi sono in parte realizzati con materiale tratto dal libro di testo adottato tradotto."— Transcript della presentazione:

1 Tecnologie lato Client: Javascript © 2005 Stefano Clemente I lucidi sono in parte realizzati con materiale tratto dal libro di testo adottato tradotto in italiano: © 2002 Prentice Hall H. M. Deitel, P. J. Deitel, T. R. Nieto Internet & World Wide Web – How To Program (Second Edition) Stefano Clemente s.clemente@ei.unibo.it

2 11 Ottobre 2005Stefano Clemente2 Riferimenti bibliografici H. M. Deitel, P. J. Deitel, T. R. Nieto Internet & World Wide Web – How To Program (Second Edition) ed. Prentice Hall 2002 Capitoli 7, 8, 9, 10, 11, 12

3 11 Ottobre 2005Stefano Clemente3 Introduzione JavaScript − Linguaggio di scripting per un approccio disciplinato alla realizzazione di programmi utili per migliorare le funzionalità e la visualizzazione delle pagine Web − È il linguaggio client-side “de facto” per le applicazioni basate sul Web − L’uso di JavaScript non è destinato solo allo scripting lato client, ma è utilizzato anche dal lato server per la creazione di script più complessi

4 11 Ottobre 2005Stefano Clemente4 Esempio 1

5 11 Ottobre 2005Stefano Clemente5 Esempio 2

6 11 Ottobre 2005Stefano Clemente6 Esempio 3

7 11 Ottobre 2005Stefano Clemente7 Esempio 4 N.B. - JavaScript è case-sensitive

8 11 Ottobre 2005Stefano Clemente8 Esempio 4

9 11 Ottobre 2005Stefano Clemente9 Struttura di un programma JavaScript Un programma JavaScript deve essere definito nella parte di intestazione (X)HTML Deve essere racchiuso tra i tag All’interno di questi tag, si può ancora racchiudere in una sezione di commento HTML per evitare che un browser che non è in grado di eseguirlo lo visualizzi nella pagina In sostanza la struttura è <!-- {dichiarazioni e statement JavaScript} //-->

10 11 Ottobre 2005Stefano Clemente10 Variabili Locazioni di memoria in cui memorizzare dati varDevono essere dichiarate con uno statement var var var ; var var, …, ; Una variabile può essere inizializzata nello stesso statement di definizione var var = ; var var =, …, = ;

11 11 Ottobre 2005Stefano Clemente11 Variabili Il tipo di dato della variabile è definito dal valore che le viene assegnato I valori possono essere di tipo − caratteri o stringhe − interi − virgola mobile − date − booleani false, 0, null, NaN, “”false= false, 0, null, NaN, “” qualsiasi altro valoretrue= qualsiasi altro valore Il nome di una variabile può essere una qualsiasi sequenza di caratteri alfa-numerici, caratteri di sottolineatura (_) e dollaro ($), purché non cominci per un numero e non contenga spazi

12 11 Ottobre 2005Stefano Clemente12 Operazioni sulle variabili È possibile − interrogare le variabili per conoscerne il valore − eseguire l’operazione di assegnamento = ; = ; l’espressione alla destra dello statement viene valutata il valore risultante diventa il nuovo valore assegnato alla variabile − ESEMPI a = 12 + 3;a = 12 + 3; a = a + 3; ≡ a += 3;a = a + 3; ≡ a += 3; a = a + 1; ≡ a += 1; ≡ a++; ≡ ++aa = a + 1; ≡ a += 1; ≡ a++; ≡ ++a ; a++; ≠ ++a; attenzione: in alcuni casi a++; ≠ ++a;

13 11 Ottobre 2005Stefano Clemente13 Esempio 5

14 11 Ottobre 2005Stefano Clemente14 Operatori OperatoreTipoPriorità () []. parentesi/array/punto ++ -- ! incremento/decremento/ NOT * / % moltiplicazione/divisione/ modulo + - addizione/sottrazione >= >= relazionali == != uguaglianza && AND || OR ?: condizionale = += -= *= /= %= assegnamento

15 11 Ottobre 2005Stefano Clemente15 Oggetti JavaScript è un linguaggio di programmazione Object- based Il nostro mondo è fatto di oggetti Gli oggetti hanno − attributi – es. colore, peso, forma − comportamenti – es. una palla rotola, rimbalza, si gonfia, ecc. Nel caso dei linguaggi di programmazione − gli oggetti sono parti di codice standardizzate e intercambiabili che consentono il riutilizzo del codice − proprietà – corrispondono agli attributi dell’oggetto e sono le variabili e le costanti dell’oggetto − metodi – corrispondono ai comportamenti e sono le parti di codice richiamabili dall’esterno vale a dire le funzioni dell’oggetto

16 11 Ottobre 2005Stefano Clemente16 L’oggetto Math: i metodi

17 11 Ottobre 2005Stefano Clemente17 L’oggetto Math: le proprietà

18 11 Ottobre 2005Stefano Clemente18 L’oggetto String: i metodi

19 11 Ottobre 2005Stefano Clemente19 L’oggetto String: i metodi

20 11 Ottobre 2005Stefano Clemente20 L’oggetto Date: i metodi

21 11 Ottobre 2005Stefano Clemente21 L’oggetto Date: i metodi

22 11 Ottobre 2005Stefano Clemente22 L’oggetto Boolean: i metodi

23 11 Ottobre 2005Stefano Clemente23 L’oggetto Number: i metodi

24 11 Ottobre 2005Stefano Clemente24 L’oggetto Number: le proprietà

25 11 Ottobre 2005Stefano Clemente25 Array Un array è un gruppo di locazioni di memoria tutte corrispondenti allo stesso nome e con valori solitamente dello stesso tipo (quest’ultima proprietà non è obbligatoria) c[ 6 ] -45 6 0 72 1543 -89 0 62 -3 1 6453 78 c[ 0 ] c[ 1 ] c[ 2 ] c[ 3 ] c[ 11 ] c[ 10 ] c[ 9 ] c[ 8 ] c[ 7 ] c[ 5 ] c[ 4 ] indice dell’elemento dell’array c nome dell’array c Il primo elemento ha indice 0

26 11 Ottobre 2005Stefano Clemente26 Array Un elemento dell’array può essere acceduto fornendo il nome dell’array e l’indice dell’elemento es: c [ 2 ] L’indice può essere il risultato della valutazione di un’espressione es: c [ a + b ] Un elemento di un array può essere trattato come una variabile es: c [ 1 ] += 12; oggettoUn array in JavaScript è un oggetto

27 11 Ottobre 2005Stefano Clemente27 Array La dichiarazione di un array var c = new Array ( 12 ); in cui l’operatore new crea un array di 12 elementi La dichiarazione sopra può essere scritta anche nel modo che segue var c;// dichiara l’array c = new Array ( 12 );// alloca l’array È possibile dichiarare più array nello stesso statement var c = new Array ( 12 ), b = new Array ( 104 ); È possibile dichiarare array vuoti var c = new Array ( ); e in questo caso gli elementi saranno aggiunti ogni volta con un assegnamento all’elemento c [ 0 ] = 12;

28 11 Ottobre 2005Stefano Clemente28 Array Al momento della dichiarazione si può anche inizializzare l’array var c = new Array ( 10, 20, 30, 40, 50 ); crea un array di 5 elementi con i valori 10 per il primo (0), 20 per il secondo (1), …, 50 per il quinto (4) var c = [ 10, 20, 30, 40, 50 ]Un altro modo di dichiarare un array e di inizializzarlo è il seguente: var c = [ 10, 20, 30, 40, 50 ] Non è necessario inizializzare tutti gli elementi var c = [ 10, 20,, 40, 50 ] lengthUna proprietà dell’oggetto array è length, che conta il numero degli elementi dell’arrayc.length sort( ) sortUn metodo dell’oggetto array è sort( ), che ordina gli elementi dell’array; la funzione argomento è opzionale e nel caso in cui non venga fornita sort opera attraverso il confronto delle stringhe c.sort ()

29 11 Ottobre 2005Stefano Clemente29 Esempio 6

30 11 Ottobre 2005Stefano Clemente30 Array multi-dimensionali Sono anche detti “array di array” Un elemento può contenere a sua volta un array

31 11 Ottobre 2005Stefano Clemente31 Array multi-dimensionali Esempi di dichiarazioni var b = [ [ 1, 2 ], [ 3, 4 ] ]; var b = [ [ 1, 2 ], [ 3, 4, 5 ] ]; var b; b = new Array ( 2 ); b [ 1 ] = new Array ( 5 ); b [ 2 ] = new Array ( 10 );

32 11 Ottobre 2005Stefano Clemente32 Funzioni Un programmatore può scrivere delle funzioni per codificare delle azioni che possono essere eseguite in più punti dello script Una funzione è invocata da una chiamata, uno statement del tipo ( ); ( ); La funzione esegue le azioni codificate e alla fine restituisce il risultato delle sue elaborazioni La sintassi della definizione delle funzioni è function ( ) { dichiarazioni e statement } corpo della funzione in cui è un identificatore valido, è un elenco di nomi di parametri ricevuti con la chiamata; il corpo della funzione è la sequenza di dichiarazioni e statement tra parentesi graffe

33 11 Ottobre 2005Stefano Clemente33 Funzioni Il corpo della funzione è anche un blocco: un blocco è in generale in JavaScript una sequenza di dichiarazioni e statement Le funzioni terminano − quando l’esecuzione raggiunge la parentesi graffa finale in questo caso la funzione non restituisce alcun risultato return; − quando l’esecuzione incontra all’interno del corpo uno statement return; anche in questo caso la funzione non restituisce alcun risultato return ( ); − quando l’esecuzione incontra all’interno del corpo uno statement return ( ); la funzione restituisce il valore di

34 11 Ottobre 2005Stefano Clemente34 Esempio 7

35 11 Ottobre 2005Stefano Clemente35 Passaggio argomenti Gli argomenti possono essere passati alle funzioni in due modi − call-by-value si passa alla funzione una copia del valore dell’argomento − call-by-reference la funzione accede direttamente ai dati (variabili) di chi la invoca In JavaScript tutti gli oggetti sono passati alle funzioni nella modalità call- by-reference

36 11 Ottobre 2005Stefano Clemente36 Esempio 8

37 11 Ottobre 2005Stefano Clemente37 Durata e portata degli identificatori Durata = ciclo di vita dell’identificatore − periodo per il quale l’identificatore è mantenuto in memoria durata automatica identificatori locali − variabili dichiarate nelle funzioni e i parametri delle funzioni hanno durata automatica e sono chiamati identificatori locali creati quando il controllo passa alla funzione in cui sono dichiarati distrutti quando la funzione termina la sua esecuzione durata statica identificatori globali − gli identificatori definiti nella parte dell’XHTML hanno durata statica e sono chiamati identificatori globali

38 11 Ottobre 2005Stefano Clemente38 Durata e portata degli identificatori Portata = è la porzione del programma in cui l’identificatore può essere riferito − portata globale − portata locale – sono le variabili locali alle funzioni la cui portata è limitata ai delimitatori “{” e “}” del corpo della funzione gli identificatori locali alle funzioni hanno portata limitata alla funzione alla quale appartengono e se hanno lo stesso nome di una variabile globale, nascondono per la loro durata la visibilità della variabile globale

39 11 Ottobre 2005Stefano Clemente39 Esempio 9

40 11 Ottobre 2005Stefano Clemente40 Funzioni Globali di JavaScript

41 11 Ottobre 2005Stefano Clemente41 Strutture di controllo Normalmente l’esecuzione di un programma procede uno statement dopo l’altro seguendo l’ordine in cui questi sono scritti A volte è necessario alterare questa sequenza imponendo che il comando successivo da eseguire non sia quello staticamente successivo (trasferimento del controllo) Le strutture di controllo sono − strutture sequenze prevedono l’esecuzione dei comandi secondo la sequenza in cui sono stati scritti − strutture di selezione prevedono la possibilità si scegliere se eseguire o meno alcune righe di programma − strutture di ripetizione prevedono la possibilità di ripetere più volte uno o più righe di programma

42 11 Ottobre 2005Stefano Clemente42 Le strutture di selezione: if È la struttura più semplice e permette di scegliere se eseguire o meno uno o più comandi in base al verificarsi di una condizione Esempio if ( a >= 0 ) document.writeln ( “a è positiva” ); condizione comando true false

43 11 Ottobre 2005Stefano Clemente43 Le strutture di selezione: if/else A differenza della if permette di codificare un’azione da eseguire se la condizione non si verifica Esempio if ( a >= 0 ) document.writeln ( “a è positiva” ); else document.writeln ( “a è negativa” ); condizione comando1 true false comando2

44 11 Ottobre 2005Stefano Clemente44 Le strutture di selezione: if/else ?:JavaScript dispone di un operatore ternario “ ?: ” equivalente al costrutto if/else L’esempio precedente potrebbe essere riscritto nel modo seguente document.writeln ( a >= 0 ? “a è positiva” : “a è negativa” );

45 11 Ottobre 2005Stefano Clemente45 Le strutture di selezione: if/else Si possono annidare diversi if/else per testare condizioni multiple Esempio if ( a >= 1 && a = 1 && a <= 10 ) document.writeln ( “1 ≤ a ≤ 10” ); else if ( a >= 11 && a = 11 && a <= 20 ) document.writeln ( “11 ≤ a ≤ 20” ); else if ( a >= 21 && a = 21 && a <= 30 ) document.writeln ( “21 ≤ a ≤ 30” ); else if ( a >= 31 && a = 31 && a <= 40 ) document.writeln ( “31 ≤ a ≤ 40” );

46 11 Ottobre 2005Stefano Clemente46 Le strutture di selezione: if/else L’else è associato sempre all’ultimo if, per esempio if ( a >= 1 ) if ( b >= 1 ) document.writeln ( “a e b sono ≥ 1” ); else document.writeln ( “a < 1” ); produrrà il risultato “a = 1 e b < 1 Per evitare questo tipo di errori bisogna ricorrere all’uso delle parentesi graffe if ( a >= 1 ) { if ( b >= 1 ) document.writeln ( “a e b sono ≥ 1” ); }else document.writeln ( “a < 1” );

47 11 Ottobre 2005Stefano Clemente47 Le strutture di selezione: if/else L’uso delle parentesi graffe è utile anche quando si vuole associare l’esecuzione di più comandi a un ramo if o else if ( a >= 1 && a = 1 && a <= 10 ) { document.writeln ( “a ≥ 1” ); document.writeln ( “a ≤ 10” ); } else { document.writeln ( “a < 1 oppure ” ); document.writeln ( “a > 10” ); } bloccoUn insieme di statement racchiuso tra parentesi graffe è detto blocco

48 11 Ottobre 2005Stefano Clemente48 Le strutture di selezione: switch Permette la selezione multipla Sintassi switch ( ) { case : <lista_statement_1>break;… <lista_statement_n>break;default:<lista_statement_default>}

49 11 Ottobre 2005Stefano Clemente49 Esempio 11

50 11 Ottobre 2005Stefano Clemente50 Le strutture di ripetizione: while Permette di ripetere un comando o una sequenza di comandi fino a quando un data condizione è vera La condizione è valutata all’ingresso nella struttura e il comando eseguito solo se la condizione è true Sintassi while ( ) <lista_statement>; Esempio var prodotto = 2; while ( prodotto <= 1000 ) prodotto *= 2; condizione comando true false

51 11 Ottobre 2005Stefano Clemente51 Esempio 12

52 11 Ottobre 2005Stefano Clemente52 Le strutture di ripetizione: do/while Come il comando while, ma la condizione è valutata dopo l’esecuzione del corpo − il corpo è eseguito almeno una volta All’ingresso nella struttura si esegue il corpo dopo si valuta la condizione: se la condizione è true si esegue nuovamente il corpo, se è false si esce dal ciclo Sintassi do { <lista_statement> } while ( ); Esempio var prodotto = 2; do { prodotto *= 2; } while ( prodotto <= 1000 ); NB – le parentesi graffe in caso di un unico statement sono opzionali e vengono solitamente messe al solo fine di migliorare la leggibilità del programma condizione comando true false

53 11 Ottobre 2005Stefano Clemente53 Le strutture di ripetizione: for È una ripetizione controllata da un contatore Sintassi for ( ; ; ) <lista_statement> È equivalente a<inizializzazione> while ( ){ <lista_statement><incremento>} Esempio for ( var i = 1; i <= 10; i++ ) document.writeln ( i );

54 11 Ottobre 2005Stefano Clemente54 Esempio 13

55 11 Ottobre 2005Stefano Clemente55 Le strutture di ripetizione: for/in È una ripetizione eseguita su tutti gli elementi di un insieme Sintassi for ( in ) <lista_statement> Viene solitamente usata con gli array

56 11 Ottobre 2005Stefano Clemente56 Esempio 14

57 11 Ottobre 2005Stefano Clemente57 Le strutture di ripetizione: break e continue breakcontinuebreak e continue, usati nelle strutture di ripetizione, servono per alterare l’esecuzione dei cicli breakbreak − provoca l’uscita immediata dalla struttura di ripetizione break − all’interno della struttura i comandi successivi al break non saranno eseguiti − nessun ciclo verrà più eseguito − si esegue il primo comando successivo alla struttura di ripetizione continuecontinue − forza una nuova iterazione continue − all’interno della struttura i comandi successivi al continue non saranno eseguiti whiledo/whilecontinue − nei while e do/while la continue forza il test della condizione forfor/in − nei for e for/in forza l’incremento dell’elemento di conteggio e solo dopo il test della condizione

58 11 Ottobre 2005Stefano Clemente58 Esempio 15

59 11 Ottobre 2005Stefano Clemente59 Esempio 16

60 11 Ottobre 2005Stefano Clemente60 Le strutture di ripetizione: break e continue con uso di etichette breakcontinuebreak e continue, interrompono l’esecuzione del ciclo al quale appartengono Nel caso di strutture di ripetizione annidate, l’uscita da una non provoca l’uscita dalle altre Si può controllare il salto attraverso l’uso di etichette : Un’etichetta non è altro che un identificatore di uno statement o di un blocco di statement :

61 11 Ottobre 2005Stefano Clemente61 Esempio 17

62 11 Ottobre 2005Stefano Clemente62 Esempio 18

63 11 Ottobre 2005Stefano Clemente63 Esempio 19

64 11 Ottobre 2005Stefano Clemente64 Esempio 20

65 11 Ottobre 2005Stefano Clemente65 Funzioni ricorsive Una funzione ricorsiva è una funzione che richiama se stessa − direttamente − indirettamente attraverso un’altra funzione L’uso delle funzioni ricorsive è utile in quei casi in cui − si conosce il caso base − gli altri casi sono riconducibili attraverso casi più semplici al caso base (chiamata ricorsiva) n!Esempio: fattoriale di un numero – n! 1! = 1 − Caso base: 1! = 1 n! = n * (n – 1)! − Caso generico: n! = n * (n – 1)!

66 11 Ottobre 2005Stefano Clemente66 Esempio 21

67 11 Ottobre 2005Stefano Clemente67 Esempio 22