Scarica Guida introduttiva a JavaScript: Elementi di base e controllo del flusso e più Dispense in PDF di Informatica solo su Docsity!
1 - PRIMI PASSI CON JSCRIPT
Come per qualsiasi linguaggio di programmazione, per iniziare a lavorare con JavaScript c’è bisogno di almeno tre strumenti: un editor; un interprete o compilatore; un debugger. Come editor è naturalmente possibile utilizzare un comune editor di testo. Molti hanno ormai funzionalità di supporto allo sviluppo con vari linguaggi di programmazione, tra cui anche JavaScript: evidenziazione della sintassi, completamento automatico, snippet di codice. Grazie anche alla disponibilità di plugin, alcuni editor diventano dei veri e propri ambienti di sviluppo integrati, ad esempio: Notepad++ dispone di plugin per formattare il codice, per effettuare l’analisi statica rispetto a regole di codifica, per generare una versione compatta degli script, etc. (ha l’unico “difetto” di girare solo su Windows); Sublime text consente, tra le altre cose, di definire dei veri e propri build system ed è disponibile per Windows, Linux e Mac. D’altro canto, anche i tradizionali ambienti di sviluppo integrati, come ad esempio Visual Studio ed Eclipse, prevedono ormai un supporto specifico per JavaScript. Addirittura Eclipse prevede un pacchetto specializzato per JavaScript: Eclipse JavaScript Development Tools. Figura 3. Esempio di ambiente di sviluppo avanzato
Alcuni di questi ambienti di sviluppo prevedono un interprete o un compilatore integrato, o come più spesso viene chiamato, un JavaScript engine , ma naturalmente, in base alle nostre esigenze, possiamo sempre sfruttare l’engine di un comune browser. Fino a qualche anno fa JavaScript era un linguaggio esclusivamente interpretato. L’esigenza di performance sempre maggiori ha poi condotto alla creazione di engine che effettuassero una compilazione in tempo reale ( JIT, Just In Time compilation ) in bytecode o addirittura in codice macchina. Ecco alcuni tra i più importanti engine: V8 di Google, utilizzato in Chrome e node.js; Chakra di Microsoft, il motore di Internet Explorer; SpiderMonkey di Mozilla montato su Firefox. Strumenti di sviluppo nei browser Gli ambienti di sviluppo che prevedono un engine hanno in genere un debugger integrato che consente di analizzare il codice durante l’esecuzione. In assenza di un ambiente di sviluppo integrato, possiamo comunque ricorrere a un comune browser, dal momento che i più diffusi prevedono ormai un ambiente di debugging. Ad esempio, la seguente figura mostra una schermata dei DevTools di Chrome: Figura 4. DevTools di Chrome Console Naturalmente anche Internet Explorer e Firefox hanno ambienti analoghi ai DevTools di Chrome e tutti e tre i browser prevedono un ambiente per l’esecuzione diretta di codice JavaScript, la cosiddetta console.
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: Cliccami 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: Cliccami 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
Quando il parser HTML del browser esamina la pagina, riconosce il tag Il tag Il riferimento al file JavaScript può essere relativo alla pagina HTML corrente oppure assoluto:
Non è necessario in questo caso che il file JavaScript risieda sullo stesso server della pagina.
2 - GLI ELEMENTI DI BASE DEL LINGUAGGIO
In questa lezione e nelle successive concentreremo l’attenzione su tipi di dato, variabili, istruzioni, array e funzioni. Ma prima facciamo alcune considerazioni sugli aspetti sintattici.
Il punto e virgola in JavaScript
Anzitutto ricordiamo il codice JavaScript è composto da una sequenza di istruzioni che viene interpretata ed eseguita dall’engine. 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
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). 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" "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"
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. 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 _variabile a$tro mentre quelli che seguono sono nomi di variabili non validi: if 2variabili varia.bile 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.
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 seconda che possano combinare rispettivamente uno, due o tre valori.
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
- moltiplicazione % modulo o resto Le seguenti sono esempi di espressioni che usano operatori aritmetici: 9/ 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
- 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 < 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 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:
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"
Operatore ‘?’, per assegnamenti condizionali
L’unico operatore ternario previsto da JavaScript è l’operatore condizionale. Esso restituisce un valore in base ad una espressione boleana. La sua sintassi è: condizione? valore1 : valore 2 Se condizione è vera viene restituito valore1, altrimenti valore2. Ad esempio, la seguente espressione ha valore "pari" o "dispari" in base alla divisibilità per due della variabile x: x%2 == 0? "pari" : "dispari"
Operatori di assegnamento composti
Oltre all’operatore uguale (=), esistono altri operatori di assegnamento derivanti dalla combinazione degli operatori aritmetici e degli operatori sui bit con il simbolo =. Essi rappresentano una abbreviazione di espressioni di assegnamento la cui espressione da assegnare utilizza lo specifico operatore aritmetico o bitwise. Ad esempio, la seguente espressione: x += 3; è equivalente all’espressione x = x + 3; Analogamente a += abbiamo a disposizione gli operatori come: Forma compatta Scrittura equivalente x += y x = x + y x -= y x = x - y x *= y x = x * y x /= y x = x / y
x %= y x = x % y L’uso di questo tipo di espressioni rende più compatto il codice, ma non sempre altrettanto leggibile.
Operatori su stringhe
Oltre agli operatori di assegnamento, logici e relazionali, che sono previsti per tutti i tipi, l’unico operatore 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 come fa JavaScript a stabilire se deve sommare o concatenare? Vedremo più avanti la risposta a questa domanda e i possibili effetti indesiderati che si possono generare.
Conversioni tra tipi di variabili
Abbiamo detto che le variabili JavaScript possono contenere valori di qualsiasi tipo e cambiare senza problemi il tipo di dato contenuto. Questa flessibilità libera lo sviluppatore dal dover dichiarare esplicitamente il tipo di dato che può contenere una variabile, scaricando però sull’ engine JavaScript il compito di dover prendere delle decisioni in determinate situazioni ed effettuare delle conversioni implicite. Consideriamo il seguente esempio: var x = "12"; var y = "13"; var z = x * y; Il valore che ci aspettiamo nella variabile z è il risultato della moltiplicazione dei valori numerici risultanti dalla conversione delle stringhe contenute in x e y. Ed in effetti questo è il comportamento di JavaScript. Ma vediamo un altro esempio: var x = "12";
Per quanto riguarda la conversione implicita di un valore in stringa, la tabella di conversione è la seguente: Tipo Valore stringa undefined “undefined” null “null” booleano “true” se true “false” se false numero “NaN” se NaN, “Infinity” se Infinity la stringa che rappresenta il numero negli altri casi Anche in questo caso la corrispondenza più complessa è quella con i valori numerici. Le regole di conversione descritte sono facilmente applicabili quando siamo di fronte ad un operatore binario che opera su un solo tipo di dato. Ad esempio, la moltiplicazione opera soltanto sui numeri, per cui la conversione delle variabili coinvolte può avvenire soltanto verso i numeri, senza situazioni di ambiguità. Cioè, in presenza di un’espressione del genere: x * y JavaScript proverà a convertire entrambe le variabili in valori numerici.
Operatori polimorfi
Al contrario, di fronte ad operatori polimorfi , cioè operatori che prevedono operandi di tipo diverso, la situazione è un po’ più complessa. Esempi di operatori polimorfi sono la somma e la concatenazione di stringhe , dato che utilizzano lo stesso simbolo +, oppure gli operatori relazionali. In presenza di espressioni come quelle che abbiamo evidenziato all’inizio di questa sezione e che riproponiamo di seguito, l’engine JavaScript si trova a dover fare una scelta ben precisa per stabilire verso quale tipo di dato convertire gli operandi. var x = "12"; var y = x + 13; Le regole seguite dall’engine JavaScript variano in base agli specifici operatori. Nel caso dell’ operatore + la regola stabilisce che: se almeno uno dei due operandi è una stringa, allora viene effettuata una concatenazione di stringhe, altrimenti viene eseguita una addizione. Alla luce di questa regola possiamo sciogliere il dubbio sull’espressione precedente. Dato che la variabile x contiene una stringa, l’operatore + sarà interpretato come una concatenazione di stringhe e pertanto il valore 13 sarà convertito nella stringa "13". Il valore di y sarà quindi la stringa "1213". Da notare che la regola non cita gli altri tipi di dato di JavaScript. Questo vuol dire che in presenza di espressioni un po’ strane come la seguente: true + null dal momento che non è presente nessuna stringa, l’operatore + viene interpretato come addizione e quindi i valori true e null vengono convertiti in valori numerici, con il risultato finale di 1. Un altro caso molto interessante è quello dell’uso degli operatori logici come operatori polimorfi. Un tipico esempio è quello dell’operatore logico || (OR) spesso utilizzato per impostare una variabile ad un valore predefinito, come nei seguenti esempi:
var x = y || ""; var z = h || 1; In questo caso le espressioni assegnate alle variabili x e z sono il risultato della particolare combinazione di una variabile e di una stringa, nel primo caso, e di un numero, nel secondo caso. La regola generale, in questa situazione, prevede che venga restituito il primo valore se esso è convertibile in una espressione vera, altrimenti viene restituito il secondo valore. Nel primo caso, quindi, se la variabile y contiene un valore non nullo (es.: una stringa non vuota) viene assegnato a x il valore della variabile y, altrimenti viene assegnato il valore "". Analogamente, nel secondo caso, viene assegnato alla variabile z il valore 1 solo se h ha un valore nullo. Facciamo presente che non necessariamente h deve avere un valore numerico e y un valore di tipo stringa. In presenza degli operatori relazionali >, >=, < e <= si applica la seguente regola: se nessuno dei due operandi è un numero, allora viene eseguito un confronto tra stringhe, altrimenti viene eseguito un confronto tra numeri. Questo vuol dire che analizzando la seguente espressione: "12" > 10 JavaScript converte in numero la stringa "12" ed esegue un confronto tra numeri. Mentre di fronte al seguente confronto: true > null non essendo coinvolti numeri il confronto è equivalente a quello della seguente espressione: "true" > "null" Per quanto riguarda gli operatori di confronto == e != viene presa in considerazione la seguente regola: se entrambi gli operatori sono stringhe allora viene effettuato un confronto tra stringhe, altrimenti si esegue un confronto tra numeri; unica eccezione è null == undefined che è vera per definizione In altre parole, a parte il confronto tra stringhe e l’eccezione specificata, in tutti gli altri casi gli operandi vengono convertiti in valori numerici.
Uguaglianza (e disuguaglianza) stretta
Un discorso a parte vale per gli operatori di uguaglianza e disuguaglianza stretta (=== e !==). Questi operatori confrontano gli operandi senza effettuare alcuna conversione. Quindi due espressioni vengono considerate uguali soltanto se sono dello stesso tipo ed rappresentano effettivamente lo stesso valore.
Evitare le conversioni implicite
Le conversioni implicite di JavaScript sono spesso fonte di bug , in particolar modo quando abbiamo a che fare con espressioni complesse. Il modo migliore per non incappare in questi potenziali bug è evitare le conversioni implicite. Ad esempio, è preferibile confrontare espressioni e valori dello stesso tipo ed utilizzare sempre gli operatori di uguaglianza e disuguaglianza stretta invece di quelli ordinari, in modo da essere sicuri di quello che si sta confrontando.
