JS e HTML, librerie e codice JavaScript esterno
Transcript
JS e HTML, librerie e codice JavaScript esterno
JS e HTML, librerie e codice JavaScript esterno JavaScript è nato ed rimasto un importante supporto ad HTML, specie con l’avvento dello standard HTML5. Per questo il browser rimane per esso l’ambiente d’uso privilegiato. Anche se troviamo JavaScript un po’ ovunque dai documenti PDF, nelle applicazioni desktop server e mobile, il browser e la “pagina Web” costituiscono ancora l’ambiente più comodo e disponibile per sperimentare con JavaScript. Inserire codice JavaScript in una pagina HTML Vediamo quindi come è possibile inserire codice JavaScript in una pagina HTML. Esistono essenzialmente tre modi per farlo: inserire codice inline; scrivere blocchi di codice nella pagina; importare file con codice JavaScript esterno. Codice inline Il primo approccio, l’inserimento di codice inline, consiste nell’inserire direttamente le istruzioni JavaScript nel codice di un elemento HTML, assegnandolo ad un attributo che rappresenta un evento. Chiariamo il concetto con un esempio: <button type="button" onclick="alert('Ciao!')">Cliccami</button> Abbiamo assegnato all’attributo onclick dell’elemento button la stringa alert('Ciao!'). L’attributo onclick rappresenta l’evento del clic sul pulsante del mouse, quindi in corrispondenza di questo evento verrà analizzato ed eseguito il codice JavaScript assegnato. Nel caso specifico verrà visualizzato un box con la scritta Ciao! Un altro approccio per l’inserimento di codice inline, utilizzabile però soltanto con i link, è quello mostrato nel seguente esempio: <a href="javascript:alert('Ciao!')">Cliccami</a> In questo caso indichiamo al browser di interpretare il link come la richiesta di esecuzione del codice JavaScript specificato invece che come un collegamento ad un’altra pagina. Blocchi di codice, il tag <script> L’approccio inline può risultare immediato perché mette direttamente in relazione il codice da eseguire con un elemento HTML. Risulta però scomodo quando il codice da eseguire è più complesso o abbiamo necessità di definire variabili e funzioni. In questi casi possiamo ricorrere al tag <script> per inserire blocchi di codice in una pagina HTML, come nel seguente esempio: <script>alert('Ciao!')</script> Possiamo inserire blocchi di codice (e i relativi tag <script>) nella sezione <head> o nella sezione <body> della pagina HTML. Nota: se il codice JavaScript interagisce con un elemento HTML, occorre assicurarsi che tale elemento sia già stato analizzato dal parser HTML: così il corrispondente oggetto sarà disponibile in memoria. Questo spiega il perché talvolta troviamo uno o più blocchi di codice Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 1 JavaScript in fondo alla pagina prima della chiusura del tag </body>. Approfondiremo il concetto più avanti, quando parleremo degli oggetti del browser. Il tag <script> prevede alcuni attributi come language e type, nati per specificare il linguaggio di scripting contenuto al suo interno, ma oggi non più necessari poiché che JavaScript è il linguaggio di scripting standard nelle pagine HTML. JavaScript esterno Il terzo approccio, quello più consigliato, consiste nel collegare alla pagina HTML, codiceJavaScript presente in un file esterno. Questa tencica permette di agganciare script e librerie in modo detto non intrusivo, con il vantaggio di una separazione netta tra la struttura del documento e il codice, come accade per i fogli di stile CSS, che separano struttura e presentazione. Per inserire un file JavaScript esterno ci serviamo sempre del tag <script> in cui specificando l’attributo src, come mostrato dal seguente esempio: <script src="codice.js"></script> Commenti, punti e virgola e maiuscole Dopo aver tratteggiato i caratteri generali di JavaScript, ripassato un po’ di storia, fatto il punto sulle attuali prospettive, visti gli strumenti di sviluppo, possiamo iniziare ad esaminare con maggior dettaglio le caratteristiche di base del linguaggio. Il punto e virgola in JavaScript Anzitutto ricordiamo il codice JavaScript è composto da una sequenza di istruzioni che viene interpretata ed eseguita. In questa sequenza, ciascuna istruzione (o blocco di istruzioni) è delimitata da un punto e virgola (;), come nel seguente esempio: var x = 5; x = x + 1; Terminare un’istruzione con il punto e virgola non è obbligatorio in JavaScript: possiamo scrivere la sequenza precedente anche così: var x = 5 x = x + 1 E’ comunque buona norma inserire sempre la punteggiatura di terminazione per evitare ambiguità e risultati inattesi. Tra le altre cose, mettere il punto e virgola in fondo ad ogni istruzione ci consente di scrivere più istruzioni sulla stessa riga: var x = 5; x = x + 1; JavaScript è case sensitive Un altro aspetto sintattico da tenere in considerazione è il fatto che JavaScript è case sensitive, cioè fa distinzione tra maiuscole e minuscole nei nomi di istruzioni, variabili e costanti. Dimenticare questo aspetto può essere fonte di problemi quando, ad esempio, andiamo a dichiarare una variabile con il nome MiaVariabile e poi la richiamiamo con Miavariabile. Tanto più che normalmente un engine JavaScript non evidenzia alcun errore. Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 2 Commenti in JavaScript Come ogni linguaggio, JavaScript prevede delle sequenze di caratteri per inserire commenti nel codice. Tutto ciò che viene marcato come commento non viene preso in considerazione dall’interprete JavaScript. Possiamo inserire due tipi di commenti nel codice: commento per singola riga; commento multiriga. Il commento a singola riga (inline) inizia con i caratteri // (doppio slash), come mostrato nel seguente esempio: // Questo è un commento var x = 5; Tutto ciò che si trova a destra dei caratteri // fino alla fine della riga verrà considerato commento. Questo ci consente di scrivere anche commenti a fianco alle istruzioni: var x = 5; // Questo è un commento A differenza di quanto accade per i punti e virgola, possiamo utilizzare i commenti inline senza preoccuparci troppo di come sarà miniaturizzato il codice: un buon minificatore tipicamente elimina direttamente tutti tipi di commenti. Il commento multiriga (multiline) prevede la sequenza iniziale /* (slash e asterisco) e si conclude con */ (asterisco e slash). Tutto ciò che viene inserito all’interno di questa coppia di terminazioni sarà considerato un commento, indipendentemente dal numero di righe utilizzate, in classico stile C-like: /* Questo è un commento sulla prima riga Questo è un commento sulla seconda riga Questa è l'ultima riga del commento */ var x = 5; Nota:È bene tener presente che, naturalmente, non possiamo utilizzare all’interno di questo tipo di commento la sequenza di caratteri */, perché verrebbe interpretata come fine commento. In particolare vedremo che bisogna fare attenzione alle Espressioni Regolari in cui la sequenza */ fa parte del linguaggio. Spazi bianchi Gli spazi bianchi in JavaScript non assumono significati particolari nelle espressioni e possiamo utilizzarli per aumentare la leggibilità del codice. Unica eccezione va fatta per gli spazi all’interno delle stringhe (che vedremo). Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 3 Le finestre di dialogo JavaScript è in grado di generare tre differenti tiplogie di “finestre implicite” (dette anche “finestre incorporate”, “finestre modali”, o “finestre di dialogo”), che avremo modo di utilizzare più volte nei nostri script (soprattutto l’alert). Alert L’alert visualizza un avvertimento, un messaggio di errore che blocca qualsiasi azione dell’utente finché egli non dà il suo benestare cliccando sul bottone. Sintassi di alert() alert(messaggio) Il contenuto dell’alert è una stringa (cioè una sequenza di caratteri), il che vuol dire che deve essere racchiuso tra virgolette oppure che deve essere un valore che JavaScript sia in grado di convertire in automatico in un valore letterale (come nel caso dei numeri). Esempi di alert() alert("Ecco il messaggio") // messaggio inserito direttamente var messaggio = "Ecco il messaggio"; alert(messaggio); // messaggio inserito tramite variabile Come per document.write(), in gererale per le stringhe, se bisogna usare le virgolette all’interno del messaggio è bene che usiate i caratteri di escape (cioè il back-slash), onde evitare errori. Testo con sequenze di escape alert("Marco disse "Ciao Mondo!""); Ecco un esempio di alert: <a href="http://www.html.it" onClick="alert('Stai per uscire');" target="_blank">testo link</a> In questo esempio finché l’utente non clicca su “ok”, la pagina non va verso il link indicato. Da notare le virgolette ad apice semplice dentro le virgolette ad apice doppio, per evitare di “chiudere prematuramente” il contenuto dell’evento onClick. Confirm È una finestra che pone una domanda e chiede conferma dando la possibilità di scegliere tra due opzioni (“ok” e “annulla”). La sintassi è: confirm(“messaggio”); Mentre l’alert concede una sola possibilità di scelta (“ok”), il confirm dà la possibilità di scegliere tra due opzioni: <a href="http://www.html.it" onClick="return confirm('Sei sicuro di voler uscire dalla pagina?');" target="_blank">testo link</a> Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 4 Prompt È una finestra che pone una domanda e consente all’utente di dare la risposta che vuole. Può avere anche un valore di risposta predefinito. La sintassi è: prompt("domanda","risposta predefinita"); la risposta predefinita è facoltativa. Ad esempio: <body onLoad="prompt('Come ti chiami?');"> o anche: <body onLoad="prompt('Come ti chiami?','inserisci qui il tuo nome');"> Per visualizzare il nome dell’utente nella pagina dovremo poi “catturarlo” in qualche modo. Vedremo più avanti come fare. Stringhe, numeri e altri tipi di dati JavaScript JavaScript prevede cinque tipi di dato primitivi, numeri, stringhe, booleani, null e undefined, e un un tipo di dato complesso, gli oggetti. Tutti gli altri elementi previsti dal linguaggio, come ad esempio gli array, le espressioni regolari, le funzioni, sono in realtà oggetti. A dire il vero, anche i tipi di dato “primitivi” hanno degli oggetti corrispondenti con relative proprietà e metodi. JavaScript converte automaticamente un tipo primitivo nel corrispondente oggetto quando utilizziamo un suo metodo o una sua proprietà. Consideriamo ad esempio il seguente codice: var nomeMaiuscolo = "Andrea".toUpperCase(); A partire dal tipo primitivo stringa, JavaScript crea il corrispondente oggetto String e invoca il metodo toUppercase() per ottenere la versione in caratteri maiuscoli della stringa. Questo contribuisce a creare non poca confusione nella distinzione tra dati primitivi e oggetti, tanto che non sono in pochi a semplificare sostenendo che in realtà in JavaScript tutto è oggetto. In questa e nelle prossime lezioni ci occuperemo dei tipi di dato primitivi di JavaScript rimandando a quando acquisiremo le nozioni fondamentali sugli oggetti per approfondire la questione e vedere i principali metodi di gestione dei vari tipi di dato. Stringhe in JavaScript Una stringa in JavaScript è una sequenza di caratteri delimitata da doppi o singoli apici. Le seguenti sono esempi di stringhe: "stringa numero uno" 'stringa numero due' Non c’è una regola per stabilire quale delimitatore utilizzare. L’unica regola è che il delimitatore finale deve essere uguale al delimitatore iniziale. Questo ci consente di scrivere stringhe come le seguenti senza incorrere in errori: "l'altro ieri" Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 5 "questa è una 'stringa'" Un tipo speciale di stringa è la stringa vuota, cioè una stringa senza caratteri. Essa può essere rappresentata indifferentemente come "" oppure ''. Per inserire caratteri speciali all’interno di una stringa si fa ricorso al carattere di escaping \(backslash). Ad esempio, per inserire un ritorno a capo possiamo utilizzare la sequenza \n, come mostrato nel seguente esempio: "Ieri pioveva.\nOggi c'è il sole." La stampa di questa stringa avrà il seguente risultato: Ieri pioveva. Oggi c'è il sole. Tra i caratteri speciali che possiamo inserire tramite backslash c’è lo stesso backslash, come nel seguente esempio: "La sequenza \\n indica il ritorno a capo" Il primo backslash è il carattere di escaping mentre il secondo è il carattere da inserire nella stringa. Il risultato sarà quindi: La sequenza \n indica il ritorno a capo Questo meccanismo ci consente di inserire lo stesso delimitatore di stringa all’interno della stringa: 'l\'altro ieri' "questa è una \"stringa\"" Il delimitatore preceduto dal backslash non verrà considerato come delimitatore ma come un normale carattere. È anche possibile inserire caratteri Unicode in una stringa utilizzando la sequenza di escaping \u seguita dal codice esadecimale del carattere. Ad esempio, la seguente stringa contiene al suo interno il carattere ©: "HTML.it\u00A9 2013" Numeri in JavaScript JavaScript ha un unico tipo di dato numerico, cioè non c’è distinzione formale, ad esempio, tra intero e decimale. Internamente tutti i valori numerici sono rappresentati come numeri in virgola mobile, ma se non è specificata la parte decimale il numero viene trattato come intero. I seguenti sono esempi di rappresentazione di numeri interi: var interoNegativo = -10; var zero = 0; var interoPositivo = 123; Per rappresentato un numero non intero facciamo ricorso al punto come separatore della parte decimale: Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 6 var numeroDecimale = 0.52; var altroNumeroDecimale = 12.34; var decimaleNegativo = -1.2; var decimaleZero = 1.0; È possibile rappresentare i valori numerici secondo la notazione scientifica: var primoNumero = 12e3; // equivalente a 12 x 103 cioè 12.000 var secondoNumero = 3.5e-4; // equivalente a 3.5 x 10-4 cioè 0,00035 L’insieme dei numeri rappresentabili in JavaScript cade nell’intervallo compreso tra1.79769*10308 e 1.79769*10308, con una precisione pari a 5*10-324. Ogni valore che va al di fuori dell’intervallo rappresentabile non genera un’eccezione ma viene rappresentato da due valori speciali: Infinity, detto anche infinito positivo, -Infinity, detto infinito negativo. Ogni valore che ha una precisione maggiore di quella rappresentabile viene considerata uguale a zero. Un altro valore numerico speciale è NaN, acronimo di Not a Number, che indica un valore numerico non definito. Nel seguente esempio il valore della variabile x dopo l’assegnamento èNaN: var x = x + 1; I tipi di dato null, undefined e booleano JavaScript prevede due tipi di dato speciali per rappresentare valori nulli e non definiti. Il tipo di dato null prevede il solo valore null, che rappresenta un valore che non rientra tra i tipi di dato del linguaggio, cioè non è un valore numerico valido, né una stringa, né un oggetto. È possibile assegnare il valore null ad una variabile come nel seguente esempio: var x = null; Da notare che il valore null è diverso dal valore numerico 0 o dalla stringa vuota. Infatti, questi ultimi appartengono ai tipi numero e stringa, mentre null è un tipo a se stante. Il tipo di dato undefined rappresenta un valore che non esiste. Anche questo tipo di dato contiene un solo valore: undefined. Questo è il valore di una variabile non inizializzata, a cui non è stato assegnato nessun valore, nemmeno null. Il tipo di dato booleano prevede due soli valori: true (vero) e false (falso). Tipizzazione debole JavaScript è un linguaggio a tipizzazione debole o dinamica. Ciò significa che quando dichiariamo una variabile, non ne specifichiamo il tipo di dato e che il tipo di dato che può contenere una variabile può cambiare durante l’esecuzione dello script. Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 7 Quando dichiariamo una variabile senza specificare un valore, a questa viene assegnato il valore undefined. Il suo valore può cambiare tramite le nostre istruzioni ed assumere tipi di dato diversi, come nel seguente esempio: var miaVariabile; miaVariabile = 1; miaVariabile = null; miaVariabile = "uno"; miaVariabile = true; L’assegnamento di un valore può comunque avvenire direttamente nella dichiarazione: var miaVariabile = 0; Variabili, costanti e dichiarazioni Come per ogni linguaggio, anche con JavaScript possiamo utilizzare le variabili per memorizzare valori o oggetti durante l’esecuzione degli script. Una variabile è identificata da un nome che deve rispettare alcune regole: non deve coincidere con una delle parole chiave del linguaggio; non può iniziare con un numero; non può contenere caratteri speciali come ad esempio: o lo spazio, o il trattino (-), o il punto interrogativo (?), o il punto (.), o ecc. Sono però ammessi: o l’underscore (_) o il simbolo del dollaro ($). I seguenti sono esempi di nomi di variabile validi: variabile _variabile1 a$tro3 mentre quelli che seguono sono nomi di variabili non validi: if 2variabili varia.bile Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 8 Ricordiamo che JavaScript è case sensitive, quindi i nomi Variabile1 e variabile1 indicano due variabili diverse. Dichiarazione implicita delle variabili JavaScript non prevede la dichiarazione obbligatoria delle variabili, cioè un’operazione esplicita di creazione. Il semplice utilizzo di un identificatore indica all’engine di creare implicitamente la variabile, se non esiste già. Tuttavia questa pratica può favorire errori ed ambiguità. Ecco un esempio: variabile = 3; Una variabile non dichiarata viene automaticamente creata al primo utilizzo ed è accessibile da qualsiasi punto di uno script. Questo significa che in script particolarmente complessi si può correre il rischio di utilizzare involontariamente in punti diversi variabili con lo stesso nome generando comportamenti non previsti. È opportuno pertanto dichiarare sempre una variabile tramite la parola chiave var: var miaVariabile; Espressioni e operatori Un’espressione è una combinazione di valori, variabili ed operatori che rappresentano un nuovo valore. Ad esempio, la seguente è un’espressione: x + 1 Nel caso specifico si tratta di un’espressione che combina una variabile x ed il valore numerico 1 tramite l’operatore + (più) per ottenere l’incremento di un’unità del valore di x. È evidente che un ruolo fondamentale nelle espressioni è assunto dagli operatori, dal momento che determinano il valore risultante dell’espressione. Possiamo classificare gli operatori in base al numero di valori che possono combinare e in base al tipo di dati su cui possono operare. JavaScript prevede operatori unari, binari e ternari a rispettivamente uno, due o tre valori. seconda che possano combinare Operatori aritmetici Per quel che riguarda il tipo di dato numerico, abbiamo gli operatori aritmetici, che consentono la combinazione di valori numerici. Si tratta di operatori binari corrispondenti ai classici operatori matematici: Operatore Nome Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 9 + addizione - sottrazione / divisione * moltiplicazione % modulo o resto Le seguenti sono esempi di espressioni che usano operatori aritmetici: 9/4 9%4 + 5 x + 10 Gli operatori aritmetici seguono le regole di precedenza matematiche e, come in matematica, possiamo utilizzare le parentesi (ma soltanto quelle tonde) per modificare il loro ordine di valutazione: 4 + 5 * 6 + 7 (4 + 5) * (6 + 7) Il valore della prima espressione è 41 mentre la seconda espressione vale 117. Gli operatori aritmetici prevedono anche tre operatori unari: Operatore Nome Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 10 - negazione ++ incremento -- decremento La negazione consente di ottenere un valore negativo di un numero. Ad esempio, -x è il valore negativo del valore numerico rappresentato dalla variabile x. Gli operatori di incremento e decremento sono applicabili soltanto a variabili e consentono di ottenere un valore rispettivamente aumentato o diminuito di uno. È molto importante la posizione dell’operatore. Infatti, se l’operatore si trova a sinistra dell’operando, l’operazione di incremento o decremento viene eseguita prima della valutazione dell’espressione, mentre se si trova a destra l’operazione viene eseguita dopo. Chiariamo il concetto con un esempio: var x = 3; var y = ++x; La variabile x verrà prima incrementata di uno ed il risultato verrà assegnato alla variabile y. Quindi la situazione finale vedrà x e y con il valore di 4. Nel seguente caso, invece: var x = 3; var y = x++; il valore della variabile x verrà assegnato alla variabile y e soltanto successivamente x verrà incrementata di uno. Come risultato avremo x con il valore di 4 e y con il valore di 3. Operatori relazionali Gli operatori relazionali sono quegli operatori utilizzati per il confronto tra valori (e stabilire una “relazione d’ordine”): Operatore Nome Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 11 < minore <= minore o uguale > maggiore >= maggiore o uguale == uguale != diverso === strettamente uguale !== strettamente diverso Le espressioni che utilizzano gli operatori relazionali restituiscono un valore booleano in base all’esito del confronto. Ad esempio: 4 > 2 // true 5 != 4 + 1 //false Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 12 Il significato della maggior parte degli operatori dovrebbe essere abbastanza intuitivo. Per quanto riguarda il significato degli operatori === e !==, questi verranno approfonditi quando parleremo delle conversioni di tipo. Gli operatori logici consentono la combinazione di espressioni booleane. JavaScript prevede due operatori binari e un operatore unario: Operatore Nome && and || or ! not Le seguenti sono espressioni che utilizzano operatori logici: 5 > 2 && 3 != 4 true || 4 >= 6 !5==5 // true // true // false La combinazione di operatori logici con altre espressioni può essere insidiosa, nel senso che le regole di precedenza nella valutazione possono generare valori diversi da quelli attesi. È opportuno pertanto utilizzare le parentesi per indicare esplicitamente l’ordine di valutazione e per renderle più leggibili. Le espressioni precedenti diventano pertanto: (5 > 2) && (3 != 4) true || (4 >= 6) // true // true Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 13 !(5==5) // false Operatori di assegnamento Un discorso a parte va fatto per gli operatori di assegnamento. Abbiamo già avuto modo di vedere informalmente l’operatore = che ci consente di assegnare il valore di un’espressione ad una variabile. A prima vista questo operatore non sembrerebbe dar luogo ad alcuna espressione. Esso copia semplicemente il valore di un’espressione nella variabile. In realtà, la copia del valore nella variabile può essere considerata un effetto collaterale. L’espressione di assegnamento restituisce essa stessa un valore: il valore dell’espressione assegnata alla variabile. Il valore del seguente assegnamento, ad esempio: x = 3 + 5; è lo stesso valore dell’espressione 3 + 5. Questo vuol dire che possiamo avere espressioni analoghe alla seguente: y = (x = 3 + 5); dove y assumerà lo stesso valore di x, cioè 8. L’uso di espressioni di questo tipo può essere talvolta fonte di bug molto subdoli, soprattutto per chi si avvicina per la prima volta a JavaScript e non proviene da esperienze di programmazione in C, C# o Java. Ad esempio, la seguente espressione avrà come valore sempre "cinque", indipendentemente dal valore di x: x = 5 ? "cinque" : "diverso da cinque" Operatori su stringhe Oltre agli operatori di assegnamento, logici e relazionali, che sono previsti per tutti i tipi, l’unicooperatore su stringhe specifico è l’operatore di concatenazione. Esso consente di creare una nuova stringa come risultato della concatenazione di due stringhe ed è rappresentato dal simbolo del “più” (+): "piano" + "forte" // "pianoforte" Funziona anche nella sua forma compatta per accodare una stringa ad un’altra: var strumento= "piano"; strumento += "forte"; // strumento = "pianoforte" Il suo utilizzo è abbastanza immediato, ma con le variabili si possono ottenere risultati non previsti dal momento che il simbolo utilizzato è lo stesso dell’addizione. Ad esempio, nella seguente espressione: x + y Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 14 parseInt e parseFloat Se non si può evitare il confronto tra tipi diversi, è opportuno convertire esplicitamente un valore di un tipo in un altro tipo, ricorrendo ad alcune funzioni predefinite. Ad esempio, la funzione parseInt() converte una stringa in un valore intero. La funzione prevede due parametri: il primo è la stringa da convertire, mentre il secondo è opzionale e indica la base del sistema di rappresentazione numerica utilizzato. I seguenti sono esempi di utilizzo della funzione: parseInt("12") // 12 parseInt("12abc") // 12 parseInt("a12bc") // NaN parseInt("12.5") // 12 parseInt("12", 8) (base 8), cioè 10 // il valore di 12 nel sistema di numerazione ottale Da notare come la presenza di caratteri non numerici in coda alla stringa venga ignorata, mentre impedisce di fatto la conversione se questi si trovano all’inizio. La funzione parseFloat() restituisce un valore numerico considerando l’eventuale virgola: parseFloat("12") parseFloat("12.5") //12 //12.5 È possibile effettuare conversioni esplicite tra gli altri tipi di dato ricorrendo agli oggetti, come vedremo più avanti. If, istruzioni condizionali e blocchi di codice Come è noto, un programma (o uno ‘script’) è una sequenza di istruzioni eseguite dall’engine JavaScript. Le istruzioni altro non sono che un flusso di comandi che stabiliscono il comportamento del sistema per portarlo da uno stato iniziale ad uno stato finale. In altre parole il programma ci permette di descrivere un algoritmo che ci permette di raggiungere un certo obiettivo o ottenere un determinato risultato. Abbiamo iniziato ad osservare come assegnare valori alle variabili e come operare su numeri e stringhe con JavaScript per creare espressioni e fare calcoli. In questa lezione e nelle successive esaminiamo alcune istruzioni che ci aiutano a stabilire il flusso di esecuzione del nostro programma, per descrivere al meglio i nostri algoritmi e controllare il flusso dell’esecuzione. Blocchi di codice Più istruzioni possono essere raggruppate in blocchi che fungono come una singola istruzione. I blocchi di codice sono importanti quando si vuole evidenziare che un gruppo di istruzioni deve essere eseguito interamente, ad esempio in seguito alla valutazione di una condizione. Un blocco di codice è racchiuso tra parentesi graffe come nel seguente esempio: Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 15 { x = x + 3; y = x * 2; } Al termine di un blocco di codice non va inserito il punto e virgola. Questa è l’unica eccezione all’uso del punto e virgola come delimitatore di istruzioni. Istruzioni condizionali: if Le istruzioni condizionali sono una categoria di istruzioni che consentono di eseguire blocchi di codice alternativi in base ad una condizione, consentendo ad uno script di prendere, in un certo senso, delle decisioni. JavaScript prevede due istruzioni condizionali: if e switch. Possiamo trovare l’istruzione if in tre forme: if semplice; if con alternativa (if..else); if a cascata (if..else if…else). if semplice La forma if pura esegue un blocco di codice solo se una condizione è vera. Il suo schema sintattico è: if (condizione) { // istruzioni } dove condizione è un’espressione booleana e istruzioni rappresenta appunto la sequenza di istruzioni da eseguire nel caso in cui la condizione sia vera. Il seguente è un esempio di utilizzo di questa forma di if: if (x >= 37) { messaggio = "Hai la febbre.\n"; messaggio = messaggio + "Temperatura: " + x + " gradi." } Se il blocco associato all’if è composto da una sola istruzione è possibile non inserire le parentesi graffe: if (x >= 37) Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 16 messaggio = "Hai la febbre.\nTemperatura: " + x + " gradi."; In questo caso è consigliabile aggiungere il punto e virgola finale. if…else La seconda forma è l’if...else. In questa forma viene eseguito un blocco di codice oppure un altro in base al valore della condizione. Lo schema sintattico si presenta così: if (condizione) { // istruzioni1 } else { //istruzioni2 } Se condizione è vera vengono eseguite le istruzioni del blocco istruzioni1 altrimenti viene eseguito il blocco istruzioni2. Ecco un esempio di uso di questa forma: if (x%2 == 0) { messaggio = x + " è pari"; } else { messaggio = x + " è dispari"; } While e do-while, le iterazioni base Un’altra categoria di istruzioni comunemente usata nei linguaggi di programmazione è rappresentata dalle iterazioni o cicli. JavaScript prevede le classiche istruzioni di iterazione come while e for. Di seguito lo schema sintattico del while: while (condizione) { Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 17 // istruzioni } Finché condizione sarà vera verranno eseguite le istruzioni contenute nel blocco di codice. Requisito fondamentale nell’uso del while è che le istruzioni contenute nel blocco di codice modifichino la condizione, altrimenti si rischia di incorrere in un ciclo infinito. Questo è un esempio di utilizzo dell’istruzione while: var y = 1; var i = 1; while (i <= 4) { y = y * i; i++; } Queste istruzioni calcolano il fattoriale di 4 implementando un ciclo che moltiplica gli interi minori o uguali a 4. Da notare come l’incremento della variabile i garantisca l’uscita dal ciclo, dal momento che al superamento del valore 4 renderà la condizione falsa. do-while Una variante del while è il do…while: do { // istruzioni } while (condizione) La differenza sostanziale rispetto al while classico consiste nel fatto che la condizione viene valutata dopo aver eseguito le istruzioni. Questo garantisce che il blocco di codice verrà eseguito almeno una volta. I cicli for Una alternativa al while è l’istruzione for. Questa istruzione è generalmente intesa per l’esecuzione di un blocco di codice un numero determinato di volte, ma a ben vedere il for in Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 18 JavaScript ha sostanzialmente la stessa semantica del while. Vediamo il suo schema sintattico: for (inizializzazione; condizione; modifica) { // istruzioni } inizializzazione: JavaScript esegue l’istruzione specificata in inizializzazione prima di avviare le iterazioni (il ciclo). condizione: è l’espressione booleana che viene valutata prima di eseguire ciascuna iterazione. Se è falsa non viene eseguito il blocco di istruzioni associato al for. Se invece la condizione è vera viene eseguito il blocco di codice. modifica: al termine di ciascuna iterazione viene eseguita l’istruzione modifica (la più classica è l’incremento di un contatore). Il ciclo poi ricomincia con la valutazione della condizione. Come per il while, anche in questo caso è nostra responsabilità fare in modo che la condizione cambi ad ogni passo per garantire l’uscita dal ciclo. Vediamo come riprodurre l’esempio fatto per il while, utilizzando il costrutto for: var y = 1; var i; for (i = 1; i <=4; i++) { y = y * i; } Abbiamo trasposto gli elementi del while all’interno dello schema sintattico del for. Come abbiamo detto, il for è generalmente comodo per effettuare operazioni sugli array, ciclando tra gli elementi. Vediamo un esempio in cui vengono sommati gli interi contenuti in un array: var quantita = [12, 34, 45, 7, 19]; var totale = 0; var i; Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 19 for (i = 0; i < 5; i++) { totale = totale + quantita[i]; } Inizializzazioni multiple o vuote L’istruzione for è molto flessibile, infatti possiamo inserire nelle sezioni inizializzazione emodifica anche gruppi di istruzioni separati da virgole. Ad esempio, possiamo riscrivere il codice dell’esempio precedente nel seguente modo: var y; var i; for (i = 1, y = 1; i <=4; i++) { y = y * i; } In realtà nessuna sezione è obbligatoria. Possiamo quindi, ad esempio, scrivere il nostro ciclo in questo modo del tutto equivalente: var y = 1; var i = 1; for (; i <=4; i++) { y = y * i; } fino ad arrivare ad una situazione del genere sintatticamente quasi identica al while: var y = 1; var i = 1; for (; i <=4;) { Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 20 y = y * i; i++; } Funzioni in JavaScript: i fondamentali Le funzioni in JavaScript hanno un ruolo importantissimo, sono definite a partire da una modalità (o paradigma) di programmazione che prende le mosse dal concetto di funzione in matematica e come vedremo permettono di definire gli oggetti. Tuttavia tra i tanti modi di definire una funzione scegliamo qui quello forse più pragmatico: una funzione è un insieme di istruzioni racchiuse in un blocco di codice, che può essere contraddistinto da un nome, può accettare argomenti o parametri di ingresso e restituire valori Se la funzione ha un nome, esso servirà come riferimento per richiamare ed eseguire la funzione stessa, in qualunque punto del programma. Esistono però anche funzioni anonime, di cui parleremo più avanti. A questo punto, secondo questa prima definizione, l’utilizzo di una funzione all’interno di uno script prevede due fasi: una fase di definizione o dichiarazione della funzionein cui si assegna un nome ad un blocco di codice; una fase di invocazione o chiamata in cui il blocco di codice viene eseguito. Definire una funzione Lo schema sintattico per la definizione di una funzione in JavaScript è il seguente: function nome(argomenti) { // istruzioni } La parola chiave function evidenzia che stiamo dichiarando una funzione il cui nome segue le stesse regole dei nomi di variabili. Gli argomenti sono una lista opzionale di variabili separati da virgole che verranno utilizzate all’interno del corpo della funzione, cioè il blocco istruzioni. Una volta dichiarata, una funzione non viene eseguita subito. Stiamo semplicemente dicendo all’engine JavaScript che al blocco di codice indicato viene assegnato un nome. Invocare una funzione L’esecuzione vera e propria avviene con l’invocazione o chiamata, il cui schema sintattico è: Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 21 nome(valori); dove nome è il nome della funzione e valori è una lista opzionale di espressioni separata da virgole. Gli eventuali valori inseriti nella chiamata di una funzione vengono passati, cioè assegnati, ai corrispondenti argomenti della definizione della funzione. L’istruzione return Nel corpo della funzione può essere presente l’istruzione return che consente di terminare e restituire un valore al codice che l’ha chiamata. Questo ci consente di assegnare ad una variabile il valore restituito da una funzione o utilizzare una funzione all’interno di una espressione. Esempi di funzioni Vediamo qualche esempio di definizione e chiamata di funzione: function somma() { var z = 11 + 5; return z; } var risultato = somma(); In questo esempio abbiamo definito una funzione senza argomenti che somma due interi e restituisce il risultato. L’invocazione della funzione fa sì che venga eseguita la somma ed il risultato venga assegnato alla variabile risultato. La funzione somma() che abbiamo definito può essere utilizzata in qualsiasi espressione e verrà trattata da JavaScript come un valore numerico: var risultato = 5 + somma() * 2; In questo esempio l’invocazione somma() sarà equivalente al valore 16, per cui la variabile risultato avrà valore 37. Argomenti o parametri di una funzione La funzione somma() che abbiamo definito prima è in grado di sommare soltanto i due numeri fissati nel blocco di istruzioni. Per renderla più generale è opportuno introdurre due argomenti che rappresenteranno i numeri da sommare: function somma(x, y) { var z = x + y; Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 22 return z; } In questo caso i valori da sommare verranno passati alla funzione somma() al momento dell’invocazione: var risultato = somma(11, 5); Parametri opzionali Come abbiamo avuto modo di vedere, JavaScript è un linguaggio molto flessibile e questa sua flessibilità ci consente di fare delle cose che talvolta possono apparire abbastanza strane. Ad esempio, a proposito degli argomenti di una funzione, non è obbligatorio passarli tutti in una chiamata di funzione. In altre parole, data la definizione della funzione somma() con i due argomenti da sommare, possiamo invocare la funzione nei seguenti modi: var risultato1 = somma(11); var risultato2 = somma(); var risultato3 = somma(11, 5, 7, 9); Queste tre invocazioni della funzione somma() potrebbero apparire errate, ma non generano nessun errore in JavaScript. In particolare, nel primo caso specifichiamo un solo argomento, il che assegna automaticamente al secondo argomento mancante il valore undefined restituendo come somma il valore NaN. Lo stesso ragionamento vale per il secondo caso, dove non passiamo alcun argomento. Nel terzo caso, invece, passiamo più argomenti di quelli previsti nella definizione della funzione. JavaScript ignorerà gli argomenti in più restituendo lo stesso risultato di somma(11, 5). Il linguaggio JavaScript – Ultima versione 12/05/2015 Pagina 23