Elementi del linguaggio Stefano Bistarelli Thanks to Roberto Bruni e Daniela Giorgetti

Stefano Bistarelli2 Commenti Come in C, C++ e Java es. // singola linea di commento /* commento su una, due, o più righe */

Stefano Bistarelli3 Identificatori iniziano con una lettera o underscore “_” i caratteri seguenti possono essere lettere, cifre e undescore assolutamente vietati gli spazi! lettere vuol dire a—z, A—Z cifre vuol dire 0—9 attenzione alla maiuscole/minuscole certe parole sono però riservate

Stefano Bistarelli4 Parole chiave (riservate) 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

Stefano Bistarelli5 Interi decimali: es ottali (base 8, iniziano con zero): es esadecimali (base 16, iniziano con zero e x): es. 0x33 0X abcdef 0XABCDEF

Stefano Bistarelli6 Floating Point (virgola mobile) numeri decimali con parti frazionarie notazione standard: es notazione scientifica: es e e E-12

Stefano Bistarelli7 Booleani valori possibili: true false rappresentano rispettivamente i valori booleani 1 e 0

Stefano Bistarelli8 Stringhe letterali di 0 o più caratteri racchiusi tra virgolette doppie (“) o singole (‘) “La macchina di Carlo” ‘ comunità \“virtuali\” ’ Caratteri speciali: \’ (apice singolo) \” (apice doppio) \b (backspace) \f (form feed) \n (interruzione di linea) \r (ritorno carrello) \t (tabulazione) \\ (backslash)

Stefano Bistarelli9 Dichiarazioni di variabili Parola chiave var es: var indirizzo ; var n; var i, j, k; Usate il “;” finale

Stefano Bistarelli10 Assegnamenti Si può inizializzare una varibile quando si dichiara (ma non è obbligatorio) es: var indirizzo = var n = 0.00; var i = 1, j = 1, k; var isMouseOverLink = false; r=0;

Stefano Bistarelli11 Tipi number (sia interi che reali) (es. – ) boolean (es. true false ) string (es. “buongiorno!” ) function (metodi, se associate ad oggetti) (es. write ) object (es. window document null )

Stefano Bistarelli12 Dinamicità dei tipi NON devono essere dichiarati esplicitamente JS associa il tipo a seconda dell’ultimo valore assegnato alla variabile es: var carLength; carLength=4+5; document.writeln(carLength); carLength=“5 metri”; document.writeln(carLength);

Stefano Bistarelli13 Scoping L’area del programma in cui una variabile può essere usata nessuna differenza se la variabile è dichiarata nella head piuttosto che nel body: è considerata globale se la variabile è dichiarata all’interno di una funzione allora è locale (creata alla chiamate della funzione, distrutta all’uscita) meglio dichiarare le variabili globali nella head

Stefano Bistarelli14 Costanti variabili… che non variano!! –hanno sempre lo stesso valore durante qualsiasi esecuzione dello script –costanti built-in rappresentano i più comuni valori matematici (accedibili attraverso l’oggetto math ) non vengono dichiarate come tali, e quindi non c’è modo di garantire che si comportino “bene”

Stefano Bistarelli15 Espressioni sequenza di letterali che viene valutata ad un valore il valore di ritorno viene catalogato da JS come uno dei tipi base (boolean, number, string, function e object) es. l’assegnamento x=10 restituisce il valore 10 provate document.writeln(x=10);

Stefano Bistarelli16 Operatori aritmetici x + y (somma) x – y (sottrazione) x * y (moltiplicazione) x / y (divisione) ++i oppure i++ (incrementano i, ma attenzione al valore restituito…) --i oppure i-- (decrementano i, ma attenzione al valore restituito…) -i (nega il valore) x % y (modulo, ovvero il resto della divisione)

Stefano Bistarelli17 Operatori di confronto restituiscono booleani x == y (testa l’uguaglianza) x != y (testa la non uguaglianza) x > y (maggiore di) x >= y (maggiore o uguale a) x < y (minore di) x <= y (minore o uguale a)

Stefano Bistarelli18 Operatori su stringhe s + t (concatenazione) tutti gli operatori di confronto visti

Stefano Bistarelli19 Attenzione ai tipi! Fino a JS1.1 il confronto 7==“7” restituiva true !! Infatti JS usa un casting automatico della stringa “7” nel valore 7 prima del confronto In JS1.2 il casting è compito del programmatore Esempi: per x=“3” e y=7 : –In JS1.0 e 1.1 si ha x==3 : true e y==“7” : true –In JS1.2 si ha x==3 : false e y==“7” : false –In JS1.3+ si ha x==3 : true e y==“7” : true –Ovunque si ha x-0==3 : true e “”+y==“7” : true In JS1.3+ si può usare === (controlla valori E tipi)

Stefano Bistarelli20 Casting Da interi a stringhe: –“”+x “”+123 Da stringhe a interi : –parseInt(“44 gatti”) restituisce il valore 44 : Da stringhe a floating-point: –parseFloat(“ euro”)

Stefano Bistarelli21 Operatori bitwise Lavorano sui bit che rappresentano il dato 0110 & 1100 restituisce 0100 (in binario) –equivale a dire che 6&12 restituisce | 1100 restituisce 1110 (in binario) –equivale a dire che 6|12 restituisce ^ 1100 restituisce 1010 (in binario) –equivale a dire che 6^12 restituisce 10 x << y (shift) equivale a x * 2 y (se y  0) x>>y (shift verso destra) x>>>y (shift verso destra con riempimento di 0)

Stefano Bistarelli22 Operatori di assegnamento x = expr; e 11 combinazioni con op. aritmetici o bitwise –x += y; sta per x = x+y; –x -= y; sta per x = x-y; –x *= y; sta per x = x*y; –x /= y; sta per x = x/y; –x %= y; sta per x = x%y; –x <<= y; sta per x = x<<y; –x >>= y; sta per x = x>>y; –x >>>= y; sta per x = x>>>y; –x &= y; sta per x = x&y; –x |= y; sta per x = x|y;

Stefano Bistarelli23 Operatori booleani Agiscono su valori logici x && y (AND logico) x || y (OR logico) !x (NOT logico) vengono valutate da sinistra verso destra es. true || funzione_complicata(x)  true senza calcolare la funzione “complicata”

Stefano Bistarelli24 Operatori condizionali Analogo al consueto comando strutturato if_else: (condizione) ? expr1 : expr2 –restituisce la valutazione di expr1 se condizione è vera, altrimenti restituisce la valutazione di expr2 –expr1 e expr2 possono avere tipi diversi

Stefano Bistarelli25 Operatore typeof Aggiunto con JS1.1. restituisce (come stringa) il tipo dell’argomento sul quale si sta lavorando typeof parseInt restituisce la stringa “function” typeof undefinedVariable restituisce “undefined” typeof 33 restituisce “number” typeof “Ciao” restituisce “string” typeof true restituisce “boolean” typeof null restituisce “object”

Stefano Bistarelli26 Trucchetto Volete valutare un’espressione complessa? digitate “ javascript:espressione ” nella barra di navigazione di I.E. e osservate il risultato nella pagina… javascript:espressione

Stefano Bistarelli27 Facciamo uno script I Supponiamo di voler visualizzare ora e data –Siccome lo script viene eseguito dal browser, data e ora saranno relative all’utente, oppure –UTC (Universal Coordinated Time), che è il nuovo nome per il vecchio GMT (Greenwich Mean Time) standard. Ora e Data … …

Stefano Bistarelli28 Facciamo uno script II <!-- // -->

Stefano Bistarelli29 Facciamo uno script III <!-- var ora = new Date(); // ora e’ un oggetto con ora e data correnti // -->

Stefano Bistarelli30 Facciamo uno script IV <!-- var ora = new Date(); // ora e’ un oggetto con ora e data correnti var ora_locale = ora.toString(); var ora_UTC = ora.toGMTString(); // variabili di tipo stringa (formato leggibile) // -->

Stefano Bistarelli31 Facciamo uno script V <!-- var ora = new Date(); // ora e’ un oggetto con ora e data correnti var ora_locale = ora.toString(); var ora_UTC = ora.toGMTString(); // variabili di tipo stringa (formato leggibile) document.write(“ Ora locale: ”+ora_locale + “ ”); document.write(“ Ora UTC: ” + ora_UTC + “ ”); // visualizzano i dati sulla pagina // -->

Stefano Bistarelli32 Facciamo uno script VI Ora e Data Correnti

Stefano Bistarelli33 Facciamo uno script VII Ora e Data Correnti <!-- var ora = new Date(); var ora_locale = ora.toString(); var ora_UTC = ora.toGMTString(); document.write(“ Ora locale: ”+ora_locale + “ ”); document.write(“ Ora UTC: ” + ora_UTC + “ ”); // -->

Stefano Bistarelli34 Facciamo uno script VIII Testiamo lo scriptTestiamo Modifichiamo lo script aggiungiamo un “orologio” più compattoorologio var ore = ora.getHours(); var minuti = ora.getMinutes(); var secondi = ora.getSeconds(); document.write(“ ”); document.write(ore+“:”+minuti+“:”+secondi); document.write(“ ”);

Stefano Bistarelli35 Facciamo uno script IX Causiamo un erroreCausiamo document.write(“ ”); A seconda del browser: –Riceviamo un messaggio di errore –No? Meglio configurare il browser affinché ci aiuti… in IE4+ selezionare tools->InternetOptions e in Advanced deselezionare Disable script debugging e selezionare Display a notification about every script error in NN4.5+ scrivere javascript: nella barra di navigazione e comparirà una console JavaScript con un’indicazione più precisa dell’errore (e’ anche possibile impostarla automaticamente dalle preferenze). La console ci permette di eseguire dei comandi interattivamente per debuggare più facilmente. Meglio avere anche NN in fase di testing delle pagine!

Stefano Bistarelli36 Quiz riassuntivi I –Quali delle seguenti parole sono identificatori validi? _mia_Var_12 12varMia typeof pippo&pluto –Come si dichiara una costante in JS? Non si può Basta non usare var con il comando x typeof constant –Se x=5 Quali risultati ritornano le seguenti espressioni? x==“5” ? true false dipende dal browser (parseInt(“5gatti”)==x)?1:2 ? 1 2 dipende dal browser x=15 ? 5 15 false null x++ ? “1”+x ? “15” 6 null dipende dal browser

Stefano Bistarelli37 Quiz riassuntivi II –Perché conviene avere anche NN oltre che IE? Perché è gratuito Per testare le pagine sotto browser diversi Perché agevola il debugging Perché è più semplice da usare –Il comando new Date() restituisce: Un oggetto con ora e data correnti sul server dove risiede la pagina Un oggetto con ora e data correnti sul client dove gira il browser Un oggetto con ora e data dell’ultima modifica alla pagina Una stringa con ora e data correnti sul server dove risiede la pagina Una stringa con ora e data correnti sul client dove gira il browser Una stringa con ora e data dell’ultima modifica alla pagina Un intero rappresentante il numero di millisecondi trascorsi dalla data 1 Gennaio 1970 La data del compleanno di Bill Gates 

Stefano Bistarelli38 Esercizi

Comandi Condizionali e Funzioni

Stefano Bistarelli40 Comandi condizionali: if_else Sintassi 1: if (condizione) {comandi} es. if (7!=“7”) {document.write(“JS1.2”)} Sintassi 2: if (condizione) {comandi} else {comandi} es. if (7!=“7”) {vers=“1.2”} else {vers=“1.3”}

Stefano Bistarelli41 Funzioni Racchiudono blocchi di istruzioni Rendono possibile il riuso di funzionalità particolari in più punti dello script Devono essere dichiarate!! (possibilmente nella head)

Stefano Bistarelli42 Funzioni Non occorre dichiarare il tipo return è facoltativo Sintassi function nomefunzione (argomenti) { comandi } es. function lascia_o_raddoppia (n) { if (n==1) {return 0} else {return 2*n} }

Stefano Bistarelli43 Nomi di funzione I nomi delle funzioni vengono visti come identificatori in questo modo l’invocazione di funzione viene vista come applicazione dell’operazione _( _ ) all’identificatore di funzione e agli argomenti che vengono passati: es. f ( a,b,c ) Attenzione a non usare lo stesso nome per una funzione ed una variabile Meglio dichiararle sempre nella head

Stefano Bistarelli44 Argomenti di funzione Il passaggio avviene per valore (ma passando oggetti, si dà la possibilità di modificarne le proprietà) Possono essere passati più argomenti di quelli specificati nella definizione della funzione. E anche di meno.meno Per accedere a tutti gli argomenti passati si può usare (nel corpo della funzione): nomefunzione.arguments[n] variando n.

Stefano Bistarelli45 Variabili globali e locali Le variabili definite al di fuori di funzioni sono globali (possono essere accedute da tutte le funzioni a meno che venga introdotta una variabile locale con lo stesso nome). Le variabili definite all’interno dei blocchi funzione (e gli argomenti delle funzioni) sono invece locali.

Stefano Bistarelli46 var x=10, y=20, z=30; function cambia(x) { x=1; y=2; var z=3; } cambia(x); document.write(x); document.write(y); document.write(z);

Stefano Bistarelli47 Funzioni dentro funzioni Si possono dichiarare funzioni ricorsive e mutuamente ricorsive (ovvero una funzione che contiene chiamate alla funzione stessa) Esempio: Fattoriale (classico dei classici)Fattoriale Però non si può definire una funzione all’interno di un’altra funzione (tutte definite allo stesso livello)

Stefano Bistarelli48 Facciamo uno script I Usiamo il comando condizionale e quello che abbiamo imparato sulle funzioni per costruire una pagina che: –proponga una lista di siti numerati progressivamente; –chieda all’utente di scegliere il numero del sito che vuole visitare; –apra la pagina del sito;

Stefano Bistarelli49 Facciamo uno script II … <!-- function sito(numero) { if (numero == 1) { return “ } if (numero == 2) { return “ } if (numero == 3) { return “ } if (numero == 4) { return “ } alert(“Scelta inesistente: Riprova!”); return “sitiNumerati.html”; } // -->

Stefano Bistarelli50 Facciamo uno script III Ecco l'elenco dei tuoi siti preferiti Netscape Microsoft Yahoo Google <!-- var scelta = prompt(“Dove vuoi andare oggi?”,1); scelta = parseInt(scelta);//nota uso di parseInt!! window.location = sito(scelta);//nota il nuovo metodo!! // -->

Stefano Bistarelli51 Confronti con switch Con JS1.2+ si può confrontare un valore con una lista di altri valori senza usare una serie di if Sintassi: switch (espressione) { case val 1 : comandi; break; case val 2 : comandi; break; … case val n : comandi; break; default: comandi; break; }

Stefano Bistarelli52 Facciamo uno script IV function function sito(numero) { switch (numero) { case 1: return “ break; case 2: return “ break; case 3: return “ break; case 4: return “ break; default: alert(“Scelta inesistente: Riprova!”); } return “sitiSwitch.html”; }

Stefano Bistarelli53 Note sull’uso di switch Evita di ripetere tante volte il nome della variabile testata Ricordarsi di usare break, altrimenti l’esecuzione prosegue con i comandi successivi Aggiungere sempre una scelta di default

Stefano Bistarelli54 Quiz riassuntivi I –Se una funzione è definita con due parametri, possiamo invocarla passandole: Un valore/oggetto Due valori/oggetti Tre valori/oggetti Un qualsiasi numero di valori/oggetti, anche nessuno –Il comando switch serve per: Cambiare il browser Cambiare la risoluzione del video per vedere meglio la pagina Chiudere lo script Scegliere tra più alternative

Stefano Bistarelli55 Quiz riassuntivi II Cosa fa il comando if (5===“5”) alert(“uguali”); else alert(“diversi”); ? Apre una finestra con la scritta “uguali” Apre una finestra con la scritta “diversi” Apre entrambe le finestre Provoca un errore E il comando if (5===5) alert(“uguali”); else alert(“diversi”); ? Apre una finestra con la scritta “uguali” Apre una finestra con la scritta “diversi” Apre entrambe le finestre Provoca un errore

Stefano Bistarelli56 Esercizi

Cicli e Array

Stefano Bistarelli58 Cicli Prerogativa dei cicli: –semplificare azioni ripetitive Tipicamente impiegano un indice o contatore che viene “incrementato” ad ogni iterazione

Stefano Bistarelli59 Cicli: for Sintassi: for (assegnamento;condizione;incremento) {comandi} es. for (i=0;i<20;i++) {document.write(i+” “)} for (i=0;i<20;i++) {document.writeln(i)} for (i=0;i ”)}

Stefano Bistarelli60 Cicli: while Sintassi: while (condizione) {comandi} es. i=0; while (i<20) { document.write(i+” “); i++; } Bisogna ricordarsi di fare in modo di uscire dal ciclo! Altrimenti si crea un ciclo infinito

Stefano Bistarelli61 Cicli: do_while Sintassi: do {comandi} while (condizione) Rispetto al “while” semplice: la condizione viene controllata alla fine del ciclo si eseguono i comandi almeno una volta

Stefano Bistarelli62 Uscire dai Cicli break : esce dal ciclo continue : invece di passare al comando successivo, ritorna a controllare la condizione: se risulta vera, si esegue una nuova iterazione se risulta falsa si esce dal ciclo

Stefano Bistarelli63 Una questione di “etichetta” Con JS1.2+ Si può etichettare un certo costrutto che offre possibilità di annidamento in modo da riferire l’etichetta con break e continue anche quando ci sono cicli e condizioni annidate es. mainloop: for (i=0;i<10;i++) { { for (j=0;j<10;j++) { if (i+j==12) {break mainloop;} }

Stefano Bistarelli64 Oggetto Array Aggiunto in JS1.1 Costrutto fondamentale nei linguaggi di programmazione Permette di iterare su insiemi di oggetti Gli elementi possono avere tipi diversi non occorre dimensionare l’array basta var pippo = new Array( ); la proprietà length è read-only pippo.length = 12;

Stefano Bistarelli65 Creare e riempire un Array var valori = new Array(); for (i=0;i<10;i++) { valori[i] = i*i; } var nomi = new Array(50); nomi[187] = “ultimo arrivato”; nomi[12] = ; nomi[187] = new Date(); var pari = new Array(2,4,6,8,10,12,14,16,18,20); var primi = [1,3,5,7,11,13,17,19,23,29]; alert(primi[0]); // visualizza 1 var matrice = new Array(10); for (i=0;i<10;i++) { matrice[i] = new Array(10); } … alert(matrice[5][6]);

Stefano Bistarelli66 Visualizzare gli elementi var valori = new Array(); … // si riempie l’array a piacere for (i=0 ; i < valori.length ; i++) { document.write(valori[i]); } // per le matrici servono cicli annidati for (i=0; i<matrice.length ; i++) { for (j=0 ; j<matrice[i].length ; j++) {document.write( matrice[i][j]); }

Stefano Bistarelli67 Operazioni su Array I valori.sort(); // restituisce un array con gli stessi elementi di valori, ma ordinati per valore (modifica anche valori) valori.reverse(); // restituisce un array con gli stessi elementi di valori, ma nell’ordine inverso a quello di valori (modifica anche valori) valori.join(separa); // restituisce una stringa formata da tutti gli elementi dell’array valori, separati dalla stringa separa // data una stringa testo possiamo anche fare il contrario valori = testo.split(“ ”);

Stefano Bistarelli68 Operazioni su Array II valori1.concat(valori2); // crea e restituisce un nuovo array con gli stessi elementi di valori1 seguiti dagli elementi di valori2 valori.slice(i,j); // restituisce un array con gli elementi di valori compresi tra l’i-esimo (incluso) e il j-esimo (escluso) valori.slice(0,valori.length); // tutti i valori Altri EsempiEsempi

Stefano Bistarelli69 Cicli: for_in Scorre le proprietà di un oggetto (solo JS1.1+) Sintassi: for (property in object) {comandi} es. <!-- function stampa_prop(oggetto) {var propInfo= “”; for (var propName in oggetto) {propInfo=propName + “ = ” + oggetto[propName]; document.write(propInfo+” ”) } //-->

Stefano Bistarelli70 Array e ciclo for_in var valori = new Array(); … // si riempie l’array a piacere for (i in valori) { document.write(valori[i]); } // stampa tutti gli elementi dell’array

Stefano Bistarelli71 Gli errori più comuni dimenticare parseInt confondere =, == e === confrontare valori di tipo diverso dimenticarsi di aggiornare l’indice di un ciclo “while” sbagliare di una posizione/iterazione dimenticarsi di inserire break usando switch confondere || con && scrivere <> invece di != scrivere funzioni ricorsive che si richiamano all’infinito –es. function f(x) { if (x>0) return f(x+1); else return f(x-1); }

Stefano Bistarelli72 Quiz riassuntivi I Il comando for serve per: Ripetere molte volte un blocco di comandi Dichiarare le costanti Scegliere tra più alternative Il comando while (3===3) {…} è: Un errore di battitura Un ciclo infinito Dipende da cosa c’è al posto di {…} Cosa fa il metodo join() ? concatena due stringhe concatena due array restituisce la stringa formata da tutti gli elementi di un array restituisce un array formato da tutte le parole di una stringa

Stefano Bistarelli73 Quiz riassuntivi II Quale comando incrementa i almeno una volta? while (i<10) { i++; } do { i++; } while (i<10); for (j in vettore) { i++; } Il comando break : Causa la rottura del computer sul quale gira il browser Disconnette il server Permette l’uscita da un blocco di comandi Se var numeri = new Array(10) : numeri.length vale 9 numeri[0] è definito numeri[9] è definito numeri[10] è definito

Stefano Bistarelli74 Esercizi