Transcript HTML
Elementi del linguaggio Stefano Bistarelli Thanks to Roberto Bruni e Daniela Giorgetti Commenti • Come in C, C++ e Java • es. // singola linea di commento /* commento su una, due, o più righe */ Stefano Bistarelli 2 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 Bistarelli 3 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 • Stefano Bistarelli null • package • private • protected • public • return • short • static • super • switch • synchronized• this throw throws transient true try typeof var void volatile while with 4 Interi • decimali: • es. 33 1234567890 • ottali (base 8, iniziano con zero): • es. 033 01234567 • esadecimali (base 16, iniziano con zero e x): • es. 0x33 0X123456789abcdef Stefano Bistarelli 0XABCDEF 5 Floating Point (virgola mobile) • numeri decimali con parti frazionarie • notazione standard: • es. 2405.673 -1.958 • notazione scientifica: • es. 8.3200e+11 8.3200e11 Stefano Bistarelli 9.98E-12 6 Booleani • valori possibili: true false • rappresentano rispettivamente i valori booleani 1 e 0 Stefano Bistarelli 7 Stringhe • letterali di 0 o più caratteri racchiusi tra virgolette doppie (“) o singole (‘) • “La macchina di Carlo” • ‘ comunità \“virtuali\” ’ • “#@12-34” • Caratteri speciali: • \’ (apice singolo) \” (apice doppio) • \b (backspace) \f (form feed) • \n (interruzione di linea) \r (ritorno carrello) • \t (tabulazione) \\ (backslash) Stefano Bistarelli 8 Dichiarazioni di variabili • Parola chiave var • es: • var indirizzoEmail; • var n; • var i, j, k; • Usate il “;” finale Stefano Bistarelli 9 Assegnamenti • Si può inizializzare una varibile quando si dichiara (ma non è obbligatorio) • es: • var indirizzoEmail = “[email protected]”; • var n = 0.00; • var i = 1, j = 1, k; • var isMouseOverLink = false; • r=0; Stefano Bistarelli 10 Tipi • number (sia interi che reali) • (es. –12 3.14159) • boolean • (es. true false) • string • (es. “buongiorno!”) • function (metodi, se associate ad oggetti) • (es. write) • object • (es. window document Stefano Bistarelli null) 11 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 Bistarelli 12 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 Bistarelli 13 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 Bistarelli 14 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 Bistarelli 15 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 Bistarelli 16 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 Bistarelli 17 Operatori su stringhe (concatenazione) • tutti gli operatori di confronto visti • s + t Stefano Bistarelli 18 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 Bistarelli 19 Casting • Da interi a stringhe: – “”+x “”+123 • Da stringhe a interi : – parseInt(“44 gatti”) restituisce il valore 44: • Da stringhe a floating-point: – parseFloat(“123.44 euro”) Stefano Bistarelli 20 Operatori bitwise • Lavorano sui bit che rappresentano il dato • 0110 & 1100 restituisce 0100 (in binario) – equivale a dire che 6&12 restituisce 4 • 0110 | 1100 restituisce 1110 (in binario) – equivale a dire che 6|12 restituisce 14 • 0110 ^ 1100 restituisce 1010 (in binario) – equivale a dire che 6^12 restituisce 10 • x << y (shift) equivale a x * 2y (se y0) • x>>y (shift verso destra) • x>>>y (shift verso destra con riempimento di 0) Stefano Bistarelli 21 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 Bistarelli 22 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 Bistarelli 23 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 Bistarelli 24 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 Bistarelli 25 Trucchetto • Volete valutare un’espressione complessa? • digitate “javascript:espressione” nella barra di navigazione di I.E. e osservate il risultato nella pagina… Stefano Bistarelli 26 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. <html> <head><title>Ora e Data</title></head> <body> … <script> … </script> </body></html> Stefano Bistarelli 27 Facciamo uno script II <script language=“JavaScript”> <!-- // --> </script> Stefano Bistarelli 28 Facciamo uno script III <script language=“JavaScript”> <!-var ora = new Date(); // ora e’ un oggetto con ora e data correnti // --> </script> Stefano Bistarelli 29 Facciamo uno script IV <script language=“JavaScript”> <!-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) // --> </script> Stefano Bistarelli 30 Facciamo uno script V <script language=“JavaScript”> <!-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(“<p><b>Ora locale:</b> ”+ora_locale + “<br />”); document.write(“<b>Ora UTC:</b> ” + ora_UTC + “</p>”); // visualizzano i dati sulla pagina // --> </script> Stefano Bistarelli 31 Facciamo uno script VI <body> <h1>Ora e Data Correnti</h1> </body> </html> Stefano Bistarelli 32 Facciamo uno script VII <body> <h1>Ora e Data Correnti</h1> <script type=“text\javascript”> <!-var ora = new Date(); var ora_locale = ora.toString(); var ora_UTC = ora.toGMTString(); document.write(“<p><b>Ora locale:</b> ”+ora_locale + “<br />”); document.write(“<b>Ora UTC:</b> ” + ora_UTC + “</p>”); // --> </script> </body> </html> Stefano Bistarelli 33 Facciamo uno script VIII • Testiamo lo script • Modifichiamo lo script • aggiungiamo un “orologio” più compatto var ore = ora.getHours(); var minuti = ora.getMinutes(); var secondi = ora.getSeconds(); document.write(“<font size=‘+5’>”); document.write(ore+“:”+minuti+“:”+secondi); document.write(“</font>”); Stefano Bistarelli 34 Facciamo uno script IX • Causiamo un errore document.write(“</font>”); • 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 Bistarelli 35 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++ ? 5 6 7 “1”+x ? “15” 6 null dipende dal browser Stefano Bistarelli 36 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 Bistarelli 37 Esercizi Stefano Bistarelli 38 Comandi Condizionali e Funzioni 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 Bistarelli 40 Funzioni • Racchiudono blocchi di istruzioni • Rendono possibile il riuso di funzionalità particolari in più punti dello script • Devono essere dichiarate!! (possibilmente nella head) Stefano Bistarelli 41 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 Bistarelli 42 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 Bistarelli 43 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. • Per accedere a tutti gli argomenti passati si può usare (nel corpo della funzione): nomefunzione.arguments[n] • variando n. Stefano Bistarelli 44 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 Bistarelli 45 var x=10, y=20, z=30; function cambia(x) { x=1; y=2; var z=3; } cambia(x); document.write(x); 10 document.write(y); 2 document.write(z); 30 Stefano Bistarelli 46 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) • Però non si può definire una funzione all’interno di un’altra funzione (tutte definite allo stesso livello) Stefano Bistarelli 47 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 Bistarelli 48 Facciamo uno script II <head> … <script language=“JavaScript”> <!-function sito(numero) { if (numero == 1) { return “http://www.netscape.com”; } if (numero == 2) { return “http://www.microsoft.com”; } if (numero == 3) { return “http://www.yahoo.com”; } if (numero == 4) { return “http://www.google.com”; } alert(“Scelta inesistente: Riprova!”); return “sitiNumerati.html”; } // --> </script> </head> Stefano Bistarelli 49 Facciamo uno script III <body> <h1>Ecco l'elenco dei tuoi siti preferiti</h1> <ol><li>Netscape</li> <li>Microsoft</li> <li>Yahoo</li> <li>Google</li></ol> <script language=“JavaScript”> <!-var scelta = prompt(“Dove vuoi andare oggi?”,1); scelta = parseInt(scelta);//nota uso di parseInt!! window.location = sito(scelta);//nota il nuovo metodo!! // --> </script> </body> Stefano Bistarelli 50 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 val1: comandi; break; case val2: comandi; break; … case valn: comandi; break; default: comandi; break; } Stefano Bistarelli 51 Facciamo uno script IV function sito(numero) { switch (numero) { case 1: return “http://www.netscape.com”; break; case 2: return “http://www.microsoft.com”; break; case 3: return “http://www.yahoo.com”; break; case 4: return “http://www.google.com”; break; default: alert(“Scelta inesistente: Riprova!”); } return “sitiSwitch.html”; } Stefano Bistarelli 52 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 Bistarelli 53 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 Bistarelli 54 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 Bistarelli 55 Esercizi Stefano Bistarelli 56 Cicli e Array Cicli • Prerogativa dei cicli: – semplificare azioni ripetitive • Tipicamente impiegano un indice o contatore che viene “incrementato” ad ogni iterazione Stefano Bistarelli 58 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<20;i++) {document.write(i+”<br />”)} Stefano Bistarelli 59 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 Bistarelli 60 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 Bistarelli 61 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 Bistarelli 62 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 Bistarelli 63 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 Bistarelli 64 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] = 15626.23; 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 Bistarelli 65 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 Bistarelli 66 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 Bistarelli 67 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 Esempi Stefano Bistarelli 68 Cicli: for_in • Scorre le proprietà di un oggetto (solo JS1.1+) • Sintassi: • for (property in object) {comandi} • es. <script type=“text/javascript”> <!-function stampa_prop(oggetto) { var propInfo= “”; for (var propName in oggetto) { propInfo=propName + “ = ” + oggetto[propName]; document.write(propInfo+”<br />”) } } //--> </script> Stefano Bistarelli 69 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 Bistarelli 70 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 Bistarelli 71 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 Bistarelli 72 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 Bistarelli 73 Esercizi Stefano Bistarelli 74