1 / 74

Elementi del linguaggio

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 */. Identificatori. iniziano con una lettera o underscore “_”

walda
Download Presentation

Elementi del linguaggio

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. 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

  4. 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 Bistarelli

  5. 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 0XABCDEF Stefano Bistarelli

  6. Floating Point (virgola mobile) • numeri decimali con parti frazionarie • notazione standard: • es. 2405.673 -1.958 • notazione scientifica: • es. 8.3200e+11 8.3200e11 9.98E-12 Stefano Bistarelli

  7. Booleani • valori possibili: truefalse • rappresentano rispettivamente i valori booleani 1 e 0 Stefano Bistarelli

  8. 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

  9. Dichiarazioni di variabili • Parola chiave var • es: • var indirizzoEmail; • var n; • var i, j, k; • Usate il “;” finale Stefano Bistarelli

  10. Assegnamenti • Si può inizializzare una varibile quando si dichiara (ma non è obbligatorio) • es: • var indirizzoEmail = “bista@sci.unich.it”; • var n = 0.00; • var i = 1, j = 1, k; • var isMouseOverLink = false; • r=0; Stefano Bistarelli

  11. 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 null) Stefano Bistarelli

  12. 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

  13. 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

  14. 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

  15. 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

  16. 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

  17. 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

  18. Operatori su stringhe • s + t (concatenazione) • tutti gli operatori di confronto visti Stefano Bistarelli

  19. 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

  20. 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

  21. 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 y0) • x>>y (shift verso destra) • x>>>y (shift verso destra con riempimento di 0) Stefano Bistarelli

  22. 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

  23. 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

  24. 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

  25. 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

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

  27. 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

  28. Facciamo uno script II <script language=“JavaScript”> <!-- // --> </script> Stefano Bistarelli

  29. Facciamo uno script III <script language=“JavaScript”> <!-- var ora = new Date(); // ora e’ un oggetto con ora e data correnti // --> </script> Stefano Bistarelli

  30. 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

  31. 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

  32. Facciamo uno script VI <body> <h1>Ora e Data Correnti</h1> </body> </html> Stefano Bistarelli

  33. 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

  34. 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

  35. 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

  36. 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

  37. 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

  38. Esercizi Stefano Bistarelli

  39. Comandi Condizionali e Funzioni

  40. 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

  41. 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

  42. 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

  43. 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

  44. 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

  45. 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

  46. 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); 10 2 30 Stefano Bistarelli

  47. 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

  48. 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

  49. 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

  50. 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

More Related