Tecnologie lato Client: Javascript Stefano Clemente [email protected] © 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) 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 11 Ottobre 2005 Stefano Clemente 2 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 11 Ottobre 2005 Stefano Clemente 3 Esempio 1 11 Ottobre 2005 Stefano Clemente 4 Esempio 2 11 Ottobre 2005 Stefano Clemente 5 Esempio 3 11 Ottobre 2005 Stefano Clemente 6 Esempio 4 N.B. - JavaScript è case-sensitive 11 Ottobre 2005 Stefano Clemente 7 Esempio 4 11 Ottobre 2005 Stefano Clemente 8 Struttura di un programma JavaScript • Un programma JavaScript deve essere definito nella parte di intestazione <head></head> (X)HTML • Deve essere racchiuso tra i tag <script></script> • 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 è <script language="Javascript“ type="text/javascript"> <!-{dichiarazioni e statement JavaScript} //--> </script> 11 Ottobre 2005 Stefano Clemente 9 Variabili • Locazioni di memoria in cui memorizzare dati • Devono essere dichiarate con uno statement var var <nome_variabile>; var <nome_variabile_1> , … , <nome_variabile_n>; • Una variabile può essere inizializzata nello stesso statement di definizione var <nome_variabile> = <valore>; var <nome_variabile_1> = <valore1> , … , <nome_variabile_n> = <valoren>; 11 Ottobre 2005 Stefano Clemente 10 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 = false, 0, null, NaN, “” • true = 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 11 Ottobre 2005 Stefano Clemente 11 Operazioni sulle variabili • È possibile − interrogare le variabili per conoscerne il valore − eseguire l’operazione di assegnamento <variabile> = <espressione>; • l’espressione alla destra dello statement viene valutata • il valore risultante diventa il nuovo valore assegnato alla variabile − ESEMPI • a = 12 + 3; • a = a + 3; ≡ a += 3; • a = a + 1; ≡ a += 1; ≡ a++; ≡ ++a; attenzione: in alcuni casi a++; ≠ ++a; 11 Ottobre 2005 Stefano Clemente 12 Esempio 5 11 Ottobre 2005 Stefano Clemente 13 Operatori () Operatore [] . ++ -- * / + - < <= == Tipo parentesi/array/punto incremento/decremento/ NOT ! moltiplicazione/divisione/ modulo % addizione/sottrazione > relazionali >= uguaglianza != && AND || OR ?: condizionale = += %= 11 Ottobre 2005 Priorità -= *= /= assegnamento Stefano Clemente 14 Oggetti • JavaScript è un linguaggio di programmazione Objectbased • 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 11 Ottobre 2005 Stefano Clemente 15 L’oggetto Math: i metodi Metodo abs( x ) Descrizione Valore assoluto di x ceil( x ) Arrotonda cos( x ) exp( x ) Coseno di floor( x ) Arrotonda log( x ) Logaritmo naturale di max( x, y ) Massimo tra min( x, y ) Minimo tra pow( x, y ) X alla y (xy) round( x ) Arrotondamento di sin( x ) sqrt( x ) seno di tan( x ) Tangente di 11 Ottobre 2005 x per eccesso x (x in radianti) Metodo esponenziale ex x per difetto x x y e e x (base e) y Esempio abs( 7.2 ) = 7.2 abs( 0.0 ) = 0.0 abs( -5.6 ) = 5.6 ceil( 9.2 ) = 10.0 ceil( -9.8 ) = -9.0 cos( 0.0 ) = 1.0 exp( 1.0 ) = 2.71828 exp( 2.0 ) = 7.38906 floor( 9.2 ) = 9.0 floor( -9.8 ) = -10.0 log( 2.718282 ) = 1.0 log( 7.389056 ) = 2.0 max( 2.3, 12.7 ) = 12.7 max( -2.3, -12.7 ) = -2.3 2.3, 12.7 ) = 2.3 min( -2.3, -12.7 ) = -12.7 pow( 2.0, 7.0 ) = 128.0 pow( 9.0, .5 ) = 3.0 round( 9.75 ) = 10 round( 9.25 ) = 9 sin( 0.0 ) = 0.0 sqrt( 900.0 ) = 30.0 sqrt( 9.0 ) = 3.0 tan( 0.0 ) = 0.0 min( x x (x in radianti) Radice quadrata di x x (x in radianti) Stefano Clemente 16 L’oggetto Math: le proprietà Costante Math.E Descrizione Valore Costante di Eulero (e) Circa 2.718 Math.LN2 Math.LN10 Math.LOG2E Logaritmo naturale di 2 (in base e) Circa 0.693 Logaritmo naturale di 10 (in base e) Circa 2.302 Logaritmo in base 2 della costante di Eulero Circa 1.442 Math.LOG10E Math.PI Logaritmo in base 10 della costante di Eulero Circa 0.434 Circa 3.141592653589793 Math.SQRT1_2 Math.SQRT2 Radice quadrata di 0.5. Circa 0.707 Radice quadrata di 2.0. Circa 1.414 11 Ottobre 2005 Stefano Clemente 17 L’oggetto String: i metodi Metodo charAt( indice ) charCodeAt( indice ) concat( string ) Descrizione e esempi Restituisce una stringa contenente il carattere alla posizione specificata da indice var s = “Tecnologie di Internet”; s.charAt ( 0 ) = “T” s.charAt ( 7 ) = “g” s.charAt ( 100 ) = “” Restituisce il carattere Unicode alla posizione specificata da indice s.charCodeAt ( 0 ) = 84 s.charCodeAt ( 7 ) = 103 s.charCodeAt ( 100 ) = NaN Concatena stringhe s.concat ( “ – CLEI” ); = “Tecnologie di Inernet – CLEI” s1.concat ( s2 ) = s1 + s2 indexOf( substring, indice ) Cerca la prima occorrenza di lastIndexOf( substring, indice ) Cerca l’ultima occorrenza di slice( start, end ) Restitusce la stringa compresa tra start e end. Se end non è specificato, il metodo restituisce la stringa da start alla fine della stringa. Un end negativo specifica un indice a partire dalla fine della stringa (–1 è l’indice dell’ultimo carattere della stringa) s.slice( 1, 14 ) = “ecnologie di ” s.slice( 12 ) = “i Internet” s.slice( 12, -5 ) = “i Int” Separa la stringa proprietaria del metodo in più stringhe nella posizioni specificate da substring s.split( "e" ) = “T” “cnologi” “ di Int” “rn” “t” s.split( "u" ) = “Tecnologie di Internet” Stefano Clemente 18 split( string ) 11 Ottobre 2005 substring a indice in avanti partire dalla posizione specificata da s.indexOf( "di", 4 ) = 11 s.indexOf( "di", 14 ) = -1 substring a partire indice all’indietro dalla posizione specificata da s.lastIndexOf( "di", 4 ) = -1 s.lastIndexOf( "di", 14 ) = 11 L’oggetto String: i metodi Metodo substr( start, n ) Restituisce una da start. Se n Descrizione stringa contenente n caratteri a partire non viene fornito, restituisce una stringa fino alla fine sempre a partire da s.substr( 4 , 3 ) = “olo” s.substr( 4 ) = “ologie di Internet” start. substring( start, end ) toLowerCase() Restituisce la sottostringa da s.substring( 0 , 2 ) = “Te” toUpperCase() Converte i caratteri della stringa in caratteri maiuscoli s.toUpperCase( ) = “TECNOLOGIE DI INTERNET” toString() valueOf() Metodi che generano tag XHTML anchor( name ) Restituisce la stessa stringa end escluso Restituisce la stessa stringa Descrizione Trasforma la stringa in un elemento anchor (<a></a>) con name Trasforma la stringa in un elemento Trasforma la stringa in un elemento Trasforma la stringa in un elemento url strike() sub() sup() 11 Ottobre 2005 a Converte i caratteri della stringa in caratteri minuscoli s.toLowerCase( ) = “tecnologie di internet” nome blink() fixed() link( url ) start <blink></blink> <tt></tt> anchor (<a></a>) con come link Trasforma la stringa in un elemento<strike></strike> Trasforma la stringa in un elemento pedice TrasformaStefano la stringa Clemente in un elemento apice <sub></sub> <sup></sup>19 L’oggetto Date: i metodi var data = new Date; Inizializza la variabile alla data e ora corrente Metodo Descrizione getDate() getUTCDate() getDay() getUTCDay() getFullYear() getUTCFullYear() getHours() getUTCHours() getMilliseconds() getUTCMilliSeconds() getMinutes() getUTCMinutes() getMonth() getUTCMonth() getSeconds() getUTCSeconds() getTime() getTimezoneOffset() setDate( val ) setUTCDate( val ) Restitusce un numero da 1 a 31 che rappresenta il giorno del mese espresso nell’ora locale o UTC (detta anche GMT) 11 Ottobre 2005 Restituisce il giorno della settimana da 0 (Dom) a 6 (Sab) locale o UTC Anno di quattro cifre locale o UTC Ora (0-23) locale o UTC Millisecondi (0-999) ora locale o UTC Minuti (0-59) ora locale o UTC Mese da 0 (Gen) a 11 (Dic) locale o UTC Secondi (0-59) ora locale o UTC Millisecondi trascorsi dal 1.1.1970 all’ora contenuta nell’oggetto Date Differenza tra l’ora locale e l’ora UTC Settano il giorno del mese dell’oggetto Date (valori da 1 a 31) nell’ora locale o UTC Stefano Clemente 20 L’oggetto Date: i metodi Metodo setFullYear( y, m, d ) setUTCFullYear( y, m, d ) setHours( h, m, s, ms ) setUTCHours( h, m, s, ms ) setMilliSeconds( ms ) setUTCMilliseconds( ms ) setMinutes( m, s, ms ) setUTCMinutes( m, s, ms ) Descrizione Settano l’anno (locale o UTC). Il secondo e terzo argomento settano mese e giorno, sono opzionali e se non forniti vengono presi i valori attuali dell’oggetto Date Settano l’ora (locale o UTC). Il secondo, il terzo e il quarto argomento settano minuti, secondi e millisecondi, sono opzionali e se non forniti vengono presi i valori attuali dell’oggetto Date Settano i millisecondi nell’ora locale o UTC setMonth( m, d ) setUTCMonth( m, d ) Settano i minuti (locale o UTC). Il secondo e il terzo e argomento settano secondi e millisecondi, sono opzionali e se non forniti vengono presi i valori attuali dell’oggetto Date Settano il mese (locale o UTC). Il secondo argomento setta il giorno, è opzionale e se non fornito viene preso il valore attuale dell’oggetto Date setSeconds( s, ms ) setUTCSeconds( s, ms ) Settano i secondi (locale o UTC). Il secondo argomento setta i millisecondi, è opzionale e se non fornito viene preso il valore attuale dell’oggetto Date 11 Ottobre 2005 Stefano Clemente 21 L’oggetto Boolean: i metodi var b = new Boolean ( <valore_booleano> ); Metodo Descrizione Restituisce “true” (stringa) se il valore toString() dell’oggetto Boolean corrisponde a vero altrimenti restituisce “false” (stringa) valueOf() Restituisce il valore true se l’oggetto Boolean corrisponde a true altrimenti restituisce 11 Ottobre 2005 Stefano Clemente false 22 L’oggetto Number: i metodi var n = new Number ( <valore_numerico> ); Metodi Descrizione Ritorna la stringa della rappresentazione del numero toString( radix ) in base radix (argomento opzionale numerico da 2 a 36. 2 = binario 8 = ottale 10 = decimale 16 = esadecimale valueOf() Restituisce il valore numerico dell’oggetto Number.MAX_VALUE This property represents the largest value that can be stored in a JavaScript program—approximately 1.79E+308 This property represents the smallest value that can be Stefano storedClemente in a JavaScript program—approximately Number.MIN_VALUE 11 Ottobre 2005 Number 23 L’oggetto Number: le proprietà Proprietà Number.MAX_VALUE Descrizione Il più grande valore che può essere trattato da un programma JavaScript — circa 1.79E+308 Number.MIN_VALUE Il più piccolo valore che può essere trattato da un programma JavaScript — circa 2.22E–308 Number.NaN not a number - valore restituito dalle espressioni aritmetiche che non producono un numero come risultato (es., l’espressione parseInt("hello") non può convertire la stringa "hello" Number.NEGATIVE_INFINITY Number.NaN). Per stabilire se un valore corrisponde a NaN, utilizzare la funzione isNaN che restituisce true se il valore è NaN o false altrimenti “-” qualsiasi valore minore di -Number.MAX_VALUE Number.POSITIVE_INFINITY “+” qualsiasi valore maggiore di Number.MAX_VALUE. 11 Ottobre 2005 in un numero e restituisce Stefano Clemente 24 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) 11 Ottobre 2005 nome dell’array c Il primo elemento ha indice 0 indice dell’elemento dell’array c Stefano Clemente c[ 0 ] -45 c[ 1 ] 6 c[ 2 ] 0 c[ 3 ] 72 c[ 4 ] 1543 c[ 5 ] -89 c[ 6 ] 0 c[ 7 ] 62 c[ 8 ] -3 c[ 9 ] 1 c[ 10 ] 6453 c[ 11 ] 78 25 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; • Un array in JavaScript è un oggetto 11 Ottobre 2005 Stefano Clemente 26 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; 11 Ottobre 2005 Stefano Clemente 27 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) • 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 ] • Una proprietà dell’oggetto array è length, che conta il numero degli elementi dell’array c.length • Un metodo dell’oggetto array è sort(<funzione_confronto>), 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 () 11 Ottobre 2005 Stefano Clemente 28 Esempio 6 11 Ottobre 2005 Stefano Clemente 29 Array multi-dimensionali • Sono anche detti “array di array” • Un elemento può contenere a sua volta un array Co lum n 0 Ro w 0 Ro w 1 Ro w 2 Co lum n 1 Co lum n 2 Co lum n 3 a[ 0 ][ 0 ] a[ 0 ][ 1 ] a[ 0 ][ 2 ] a[ 0 ][ 3 ] a[ 1 ][ 0 ] a[ 1 ][ 1 ] a[ 1 ][ 2 ] a[ 1 ][ 3 ] a[ 2 ][ 0 ] a[ 2 ][ 1 ] a[ 2 ][ 2 ] a[ 2 ][ 3 ] Column sub sc rip t (o r index) Ro w subsc rip t (or inde x) Arra y na me 11 Ottobre 2005 Stefano Clemente 30 Array multi-dimensionali • Esempi di dichiarazioni var b = [ [ 1, 2 ], [ 3, 4 ] ]; var b = [ [ 1, 2 ], [ 3, 4, 5 ] ]; var b = b [ b [ 11 Ottobre 2005 b; new Array ( 2 ); 1 ] = new Array ( 5 ); 2 ] = new Array ( 10 ); Stefano Clemente 31 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 <nome_funzione> ( <lista_argomenti> ); • La funzione esegue le azioni codificate e alla fine restituisce il risultato delle sue elaborazioni • La sintassi della definizione delle funzioni è function <nome_funzione> ( <lista_parametri> ) { dichiarazioni e statement } in cui <nome_funzione> è un identificatore valido, <lista_parametri> è un elenco di nomi di parametri ricevuti con la chiamata; il corpo della funzione è la sequenza di dichiarazioni e statement tra parentesi graffe 11 Ottobre 2005 Stefano Clemente 32 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 − quando l’esecuzione incontra all’interno del corpo uno statement return; • anche in questo caso la funzione non restituisce alcun risultato − quando l’esecuzione incontra all’interno del corpo uno statement return ( <espressione> ); • la funzione restituisce il valore di <espressione> 11 Ottobre 2005 Stefano Clemente 33 Esempio 7 11 Ottobre 2005 Stefano Clemente 34 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à callby-reference 11 Ottobre 2005 Stefano Clemente 35 Esempio 8 11 Ottobre 2005 Stefano Clemente 36 Durata e portata degli identificatori • Durata = ciclo di vita dell’identificatore − periodo per il quale l’identificatore è mantenuto in memoria − 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 − gli identificatori definiti nella parte <head> dell’XHTML hanno durata statica e sono chiamati identificatori globali 11 Ottobre 2005 Stefano Clemente 37 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 11 Ottobre 2005 Stefano Clemente 38 Esempio 9 11 Ottobre 2005 Stefano Clemente 39 Funzioni Globali di JavaScript Funzioni globali escape eval isFinite Descrizione Accetta come argomento una stringa e restituisce una stringa nella quale tutti gli spazi, la punteggiatura, i caratteri accentati e tutti gli altri caratteri non ASCII sono codificati in esadecimale Accetta come argomento una stringa che rappresenta del codice JavaScript da eseguire e invoca l’interprete che si fa carico di eseguire il codice Accetta come argomento un numero e restituisce true se il valore non è NaN, Number.POSITIVE_INFINITY o Number.NEGATIVE_INFINITY altrimenti restituisce false isNaN parseFloat parseInt unescape 11 Ottobre 2005 Accetta come argomento un numero e restituisce true se il valore non è un numero altrimenti restituisce false. Accetta come argomento una stringa e cerca di convertire la parte iniziale della stessa in un numero in virgola mobile. Se la conversione fallisce, la funzione restituisce NaN altrimenti restituisce il valore convertito Accetta come argomento una stringa e cerca di convertire la parte iniziale della stessa in un numero intero. Se la conversione fallisce, la funzione restituisce NaN altrimenti restituisce il valore convertito. Accetta anche un argomento opzionale da 2 a 36 che specifica la radice o base del numero fornito come argomento (2 = binario, 8 = ottale, 10 = decimale, 16 = esadecimale) Accetta come argomento una stringa e restituisce una stringa nella quale tutti i caratteri codificati con la funzione escape sono decodificati Stefano Clemente 40 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 11 Ottobre 2005 Stefano Clemente 41 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 condizione true comando false • Esempio if ( a >= 0 ) document.writeln ( “a è positiva” ); 11 Ottobre 2005 Stefano Clemente 42 Le strutture di selezione: if/else • A differenza della if permette di codificare un’azione da eseguire se la condizione non si verifica comando2 false condizione true comando1 • Esempio if ( a >= 0 ) document.writeln ( “a è positiva” ); else document.writeln ( “a è negativa” ); 11 Ottobre 2005 Stefano Clemente 43 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” ); 11 Ottobre 2005 Stefano Clemente 44 Le strutture di selezione: if/else • Si possono annidare diversi if/else per testare condizioni multiple • Esempio if ( a >= 1 && a <= 10 ) document.writeln ( “1 ≤ a ≤ 10” ); else if ( a >= 11 && a <= 20 ) document.writeln ( “11 ≤ a ≤ 20” ); else if ( a >= 21 && a <= 30 ) document.writeln ( “21 ≤ a ≤ 30” ); else if ( a >= 31 && a <= 40 ) document.writeln ( “31 ≤ a ≤ 40” ); 11 Ottobre 2005 Stefano Clemente 45 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” quando 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” ); 11 Ottobre 2005 Stefano Clemente 46 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 <= document.writeln document.writeln } else { document.writeln document.writeln } 10 ) { ( “a ≥ 1” ); ( “a ≤ 10” ); ( “a < 1 oppure ” ); ( “a > 10” ); • Un insieme di statement racchiuso tra parentesi graffe è detto blocco 11 Ottobre 2005 Stefano Clemente 47 Le strutture di selezione: switch • Permette la selezione multipla • Sintassi switch ( <variabile> ) { case <valore_1>: <lista_statement_1> break; … case <valore_n>: <lista_statement_n> break; default: <lista_statement_default> } 11 Ottobre 2005 Stefano Clemente 48 Esempio 11 11 Ottobre 2005 Stefano Clemente 49 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 comando condizione true • Sintassi false while ( <condizione> ) <lista_statement>; • Esempio var prodotto = 2; while ( prodotto <= 1000 ) prodotto *= 2; 11 Ottobre 2005 Stefano Clemente 50 Esempio 12 11 Ottobre 2005 Stefano Clemente 51 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 comando valuta la condizione: se la condizione è true si esegue nuovamente il corpo, se è false si esce dal ciclo • Sintassi do { condizione true <lista_statement> } while ( <condizione> ); false • 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 11 Ottobre 2005 Stefano Clemente 52 Le strutture di ripetizione: for • È una ripetizione controllata da un contatore • Sintassi for ( <inizializzazione>; <test>; <incremento> ) <lista_statement> • È equivalente a <inizializzazione> while ( <test> ){ <lista_statement> <incremento> } • Esempio for ( var i = 1; i <= 10; i++ ) document.writeln ( i ); 11 Ottobre 2005 Stefano Clemente 53 Esempio 13 11 Ottobre 2005 Stefano Clemente 54 Le strutture di ripetizione: for/in • È una ripetizione eseguita su tutti gli elementi di un insieme • Sintassi for ( <variabile_elemento> in <insieme> ) <lista_statement> • Viene solitamente usata con gli array 11 Ottobre 2005 Stefano Clemente 55 Esempio 14 11 Ottobre 2005 Stefano Clemente 56 Le strutture di ripetizione: break e continue • break e continue, usati nelle strutture di ripetizione, servono per alterare l’esecuzione dei cicli • break − provoca l’uscita immediata dalla struttura di ripetizione − 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 • continue − forza una nuova iterazione − all’interno della struttura i comandi successivi al continue non saranno eseguiti − nei while e do/while la continue forza il test della condizione − nei for e for/in forza l’incremento dell’elemento di conteggio e solo dopo il test della condizione 11 Ottobre 2005 Stefano Clemente 57 Esempio 15 11 Ottobre 2005 Stefano Clemente 58 Esempio 16 11 Ottobre 2005 Stefano Clemente 59 Le strutture di ripetizione: break e continue con uso di etichette • break 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 <etichetta>: <statement> 11 Ottobre 2005 Stefano Clemente 60 Esempio 17 11 Ottobre 2005 Stefano Clemente 61 Esempio 18 11 Ottobre 2005 Stefano Clemente 62 Esempio 19 11 Ottobre 2005 Stefano Clemente 63 Esempio 20 11 Ottobre 2005 Stefano Clemente 64 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) • Esempio: fattoriale di un numero – n! − Caso base: 1! = 1 − Caso generico: n! = n * (n – 1)! 11 Ottobre 2005 Stefano Clemente 65 Esempio 21 11 Ottobre 2005 Stefano Clemente 66 Esempio 22 11 Ottobre 2005 Stefano Clemente 67
Scarica
