Scarica "Javascript", di Ramac e più Dispense in PDF di Programmazione e Tecnologie Web solo su Docsity!
Javascript
Nozioni di Base
Benvenuto nel wikibook:
JavaScript
Autore : Ramac
Vai ai contenuti >>
Fase di sviluppo :JavaScript (Sviluppo)
JavaScript è un linguaggio di scripting: nel suo utilizzo più frequente, quello della programmazione per il web, consiste in un linguaggio formale che fornisce al browser determinate istruzioni da compiere. Una pagina creata in HTML è infatti statica , in quanto una volta che la pagina è stata interpretata dal browser la disposizione degli elementi rimane immutata, così come il loro contenuto. Tramite il JavaScript, invece, è possibile conferire dinamicità alle pagine web permettendo, ad esempio, di creare rollover sulle immagini, modificare i contenuti in base a input dell'utente o creare applicazioni per il Web.
1 Breve storia di JavaScript
Il linguaggio JavaScript fu sviluppato inizialmente nel 1995 dalla Netscape Communications con il nome di Live- Script e incluso nel browser Netscape Navigator; il nome fu poi cambiato in JavaScript anche per l'assonanza con il linguaggio Java, che rappresentava una delle tecnologie più avanzate per l'epoca, ma con cui JavaScript non ha niente in comune, se non una sintassi similare. Dopo il decollo ed il successo di JavaScript, Microsoft decise di aggiungere al proprio browser Internet Explorer un proprio linguaggio di scriptng, JScript , che aveva però notevoli differenze con la versione sviluppata dalla Netscape. Nacque così la necessità di standardizzare il JavaScript e venne sviluppato lo standard ECMAScript.
2 Strumenti necessari
Gli unici strumenti necessari per la programmazione JavaScript per il Web sono un semplice editor di testi e un browser per vedere il proprio lavoro in azione.
2 4 INSERIRE UN JAVASCRIPT IN UNA PAGINA HTML
Esistono comunque programmi che aiutano lo sviluppatore JavaScript fornendo un'evidenziazione della sintassi Ja- vaScript o finestre di dialogo per velocizzare il lavoro.
3 Limitazione nell'uso di JavaScript
Una delle principali limitazioni di JavaScript è la possibilità che essi vengano facilmente disabilitati dall'utente tramite le impostazioni del browser. Questo è possibile poiché il JavaScript è un linguaggio lato client, interpretato cioè dal computer dell'utente, che ha quindi la possibilità di disabilitarne alcune funzionalità. Anche per questo è meglio non demandare funzioni importanti come la gestione di dati sensibili a JavaScript bensì a linguaggi lato server come PHP o Perl.
3.1 Compatibilità tra browser
Un'altra grande limitazione all'uso dei JavaScript è la compatibilità : più che per la programmazione HTML o CSS, un programmatore JavaScript deve essere molto attento che il suo lavoro sia compatibile con differenti browser e versioni più o meno recenti. Ad esempio, le due versioni parallele di JavaScript sviluppate dalla Microsoft per Internet Explorer e dalla Netscape (ora ereditata dalla Mozilla) hanno ancora oggi molte differenze: nonostante la sintassi fondamentale non cambi, molte funzionalità non sono disponibili o sono differenti a seconda del browser in uso. In questo wikibook si cercherà il più possibile di implementare soluzioni compatibili con Mozilla Firefox, Chrome e Windows Internet Explorer; nei casi in cui ciò non sarà possibile, verranno presi eventuali accorgimenti, segnalando comunque le differenze.
4 Inserire un JavaScript in una pagina HTML
Per inserire un codice JavaScript in una pagina HTML, è necessario semplicemente usare l'etichetta **
Questo accorgimento è tuttavia oggi sconsigliato, oltre ad essere praticamente superfluo in quanto la maggior parte dell'utenza utilizza browser JavaScript-compatibili.
È possibile inoltre usare l'attributo src per inserire un codice JavaScript esterno (solitamente un file con estensione .js ). In questo caso viene lasciato vuoto lo spazio all'interno del tag. Ad esempio:
Il codice JavaScript può essere inserito sia nella sezione head che nella sezione body della pagina HTML, ma le istruzioni vengono comunque eseguite in ordine (a parte nei casi di funzioni che però vedremo più avanti nel corso del libro); la differenza principale è sostanzialmente che il codice dentro head viene eseguito durante il caricamento della pagina, mentre dentro body viene azionato quando richiamato.
Un'altra coppia di attributi, l'uno in alternativa all'altro, che si può usare è async e defer. L'attributo async indica al browser di eseguire lo script in modo asincrono, defer dopo che è stato eseguito il parsing della pagina. E' consigliabile quindi inserire il tag script nella sezione head, e non nel body, e usare questi attributi. Questi attributi non dovrebbero essere usati per script inline, cioè che non hanno l'attributo src, in quanto di norma non hanno effetto su questo tipo di script. L'attributo async è nuovo in HTML5.
4 7 TIPI DI DATI
6 Inserire dei commenti
In JavaScript è possibile inserire dei commenti, ovvero porzioni di testo che verranno ignorate dal parser, di una o più righe delimitandoli da /* e */. È possibile inoltre prevedere commenti di una sola riga utilizzando //. Ad esempio:
questo codice verrà interpretato /* questo verrà ignorato/ questo codice verrà interpretato / questo verrà ignorato anche questo */ questo verrà interpretato //e invece questo no //e questo neppure! mentre questo sì
Un elemento necessario per la programmazione è la possibilità di salvare delle informazioni introdotte dall'utente o elaborate a partire da altre dal programma. In informatica, queste vengono chiamate dati i quali possono essere salvati in celle di memoria identificate da una variabile.
7 Tipi di dati
I dati in JavaScript possono essere di varie tipologie e a seconda della tipologia si potrà lavorare in modo diverso con essi. Il JavaScript è un linguaggio chiamato a tipizzazione debole , in quanto ogni volta che si fa riferimento ad un dato non è necessario specificare il tipo, che viene attribuito automaticamente dal parser in base al contesto. In linguaggi di programmazione come il C, ad esempio, è necessario specificare se una variabile conterrà una stringa di testo o un numero o altri tipi di dati, mentre ciò non è necessario in JavaScript.
7.1 Numeri
I dati numerici possono essere positivi e negativi e si distinguono in integer (numeri interi) e float (numeri a virgola mobile). Per convertire un valore qualsiasi in un valore numerico, JavaScript mette a disposizione due funzioni: parseInt e parseFloat. Per ora ci basti sapere che una funzione è un sottoprogramma (come un metodo) che non è associato ad alcun oggetto ma restituisce comunque un valore in base ad eventuali parametri accettati in ingresso. Per convertire i dati, ad esempio una stringa, queste funzioni analizzano carattere per carattere la stringa fornita come input prendendo in considerazione solo i numeri e, nel caso di parseFloat, anche il separatore decimale_._. Ad esempio:
parseFloat(“34acb”) //restituisce 34. parseInt(“3eac34”) //restituisce 3.
7.1.1 Not a Number
Può tuttavia succedere che il valore passato alle funzioni di parsing dei numeri non possa essere elaborato come numero. In questo caso la funzione restituisce un valore particolare, NaN , che è l'acronimo per N ot a N umber, non un numero. È possibile testare se un valore è NaN usando la funzione isNaN:
isNaN(“123”) //restituisce false o 0. isNaN(“abc”) //restituisce true o 1.
7.2 Stringhe
In informatica una stringa è una sequenza di uno o più caratteri alfanumerici. In JavaScript le stringhe si indicano inserendole all'interno di virgolette doppie (") o apici (') Bisogna però fare attenzione a chiudere una stringa con lo stesso apice con la quale è stata aperta; sono ad esempio stringhe valide:
“Hello, world! 1234” “Peter O'Toole”
ma non lo è ad esempio
'Peter O'Toole'
in quanto il parser analizzerebbe la stringa e, arrivato a O' penserebbe che la stringa si chiuda, senza sapere cosa sia Toole'.
7.3 Dati booleani 5
È possibile anche indicare che caratteri come " e ' non indicano la fine del testo ma un carattere qualsiasi facendole precedere dal carattere di commutazione o backslash . Ad esempio sono stringhe valide:
'Peter O'Toole' “Questo libro è depositato su "it.wikibooks""
In realtà ogni carattere è commutabile in una sequenza esadecimale usando la notazione \xNN dove NN è un numero esadecimale che identifica un carattere nel set Latin-1.
Per forzare la conversione da un numero ad una stringa basta usare la sintassi numero.toString().
7.3 Dati booleani
Il tipo di dato booleano può assumere i soli valori true (vero) e false (falso). Il tipo di dato booleano è fondamentale per la selezione binaria e per il decision-making. Quando è atteso un tipo di dato booleano il parser si comporta in maniere differenti:
- se viene fornito un numero, questo viene convertito in false se è 0 oppure −0, in true se è 1.
- se viene fornito una stringa, questa viene convertito in false se è una delle seguenti:
- null
- ""
- false
- undefined
- NaN
in true negli altri casi.
8 Variabili
Una variabile in JavaScript identifica una porzione di memoria nella quale vengono salvati i dati durante l'esecuzione dello script.
Quando si lavora con le variabili, è necessario per prima cosa indicare al parser il suo nome utilizzando l'istruzione var, nonostante sia equivalente la dichiarazione di una variabile anche senza quest'istruzione:
var nome_variabile;
dichiara una variabile nome_variabile. Essendo JavaScript un linguaggio a tipizzazione debole, non è necessario indicare il tipo di dato della variabile, a meno che non si stia lavorando con oggetti (si vedrà più avanti). In questo caso la variabile appena dichiarata non avrà valore, non è stata cioè ancora inizializzata ; è possibile però inizializzare la variabile direttamente insieme alla dichiarazione:
var nome_variabile = espressione;
dichiara una variabile con il valore di espressione. Per espressione si intende una sequenza di operatori, variabili e/o dati che restituisca a sua volta un valore.
Quando si scelgono dei nomi per le variabili, si faccia attenzione ad alcune regole:
- JavaScript è case-sensitive (sensibile alle maiuscole): var1 e Var1 sono due variabili differenti
- in JavaScript esistono, come in ogni linguaggio formale, delle parole riservate, che identificano cioè particolari comandi per il parser. Non bisogna quindi usare parole riservate come nomi di variabili. Per l'elenco delle parole riservate in JavaScript, si veda l'appendice.
- una variabile non può contenere caratteri particolari (? : ; ,. ecc...), tranne l' underscore , e non può iniziare con un numero
Un esempio di finestra prompt
- la seconda riga calcola il valore della temperatura in gradi Celsius usando l'equazione apposita
- la terza riga mostra una finestra alert (già vista nei precedenti moduli) contenente il valore della temperatura in gradi Celsius.
Si noti che il metodo prompt restituisce sempre un valore stringa ma, nel momento in cui la variabile stringa gradiF viene usata insieme ad operatori numerici, il suo valore viene automaticamente convertito in un valore numerico. Possiamo vedere inoltre che, poiché il metodo alert richiede un valore stringa mentre noi abbiamo passato un valore numerico, JavaScript converte automaticamente il numero in una stringa contenente esattamente il valore richiesto.
Nel comporre le espressioni è necessario tenere conto della precedenza delle operazioni (prima vengono valutate moltiplicazioni e divisioni, poi addizioni e sottrazioni). Nel comporre le espressioni possono risultare utili le parentesi; in questo caso è possibile usare solo parentesi tonde (JavaScript non supporta l'uso di parentesi quadre e graffe nelle espressioni). Ad esempio:
3 + 4 / 2 //restituisce 5 (3 + 4) / 2 //restituisce 3.5 (3 + (2 + 6) * 2) /2 //restituisce 9.
Esistono poi due operatori chiamati unari in quanto lavorano su un solo dato numerico. Sono:
- ++ incrementa di uno il valore della variabile
- -- decrementa di uno il valore della variabile
Questo operatore può essere usato da solo oppure all'interno di un'espressione:
var1++ //corrisponde a var1 = var1 + 1 var1-- //corrisponde a var1 = var1 - 1 var2 = var1++ - 15 // corrisponde a var2 = var1 −15; var1 = var1 +
È possibile inoltre nel caso di istruzioni come
var1 = var1 + n; var2 = var2 / n
Usare la notazione:
var1 += n; var2 /= n;
10 Operatori stringa
L'operazione più utilizzata quando si lavora con le stringhe è la concatenazione , che consiste nell'unire due stringhe accostandole una di seguito all'altra. L'operatore di concatenazioni in JavaScript è +. Vediamo alcuni esempi:
8 12 COMPORRE LE ESPRESSIONI
alert(“Io sono " + “un utente di wikibooks!"); var nome = “Luigi"; alert(“Io mi chiamo " + nome);
L'output di questo breve listato sono due finestre alert contenti il testo Io sono un utente di wikibooks! e Io mi chiamo Luigi. Si noti lo spazio prima delle virgolette. Possiamo quindi ampliare l'esempio precedente modificando l'ultima riga con:
alert(gradiF + " gradi Farhenheit corrispondono a " + gradiC + " gradi Celsisus”);
In questo caso la variabile gradiC viene convertita automaticamente in una stringa.
11 Operatori booleani
Sono chiamati operatori booleani o di confronto quelli che restituiscono un valore booleano ( vero o falso ) e con- frontano due valori dello stesso tipo di dato. Sono:
- < (minore)
- <= (minore o uguale)
- == (uguale)
- >= (maggiore o uguale)
- > (maggiore)
Tranne che per ==, il loro uso è strettamente legato ai dati numerici ed è intuitivo. Ad esempio:
4 > 3 //restituisce true 4 == 5 //restituisce false
È possibile inoltre comparare le stringhe. Ad esempio:
“wikibooks” == “wikibooks” //true “wikibooks” == “it.wikibooks” //false “wikibooks” == “Wikibooks” //false (di- stingue maiuscole e minuscole)
È possibile inoltre comporre le espressioni booleane usando gli operatori della logica, che lavorano con valori booleani e restituiscono a loro volta un valore bollano. Sono:
- && (corrisponde alla congiunzione logica, et )
- || (corrisponde alla disgiunzione logica, vel ) -! (corrisponde alla negazione logica, non )
Anche in questo caso è possibile comporre le espressioni con le parentesi
(a > 0) && (a < 100) // Restituisce true se il valore di a è maggiore di 0 e minore di 100 (a < 0) || (b > 20) // Re- stituisce true se almeno una delle due espressioni è vera !(a < 0) // Restituisce true se il valore di a NON è minore di 0
Se JavaScript si aspetta un dato booleano e riceve un altro tipo di dato, converte in false le stringhe vuote e il numero 0, in true il resto.
12 Comporre le espressioni
Dopo aver analizzato gli operatori, è possibile comporre le espressioni. Un'istruzione è un insieme di uno o più valori legati da operatori che restituisce un valore; per comporre un'espressione possiamo usare quindi qualsiasi istruzioni restituisca un valore, ad esempio:
10 17 OPERATORE TERNARIO
if (cond1) { istruzioni; } else { if (cond2) { istruzioni } else { istruzioni; } }
Se all'interno del blocco else c'è una sola selezione è possibile usare questa sintassi più abbreviata
if (cond1) { istruzioni1; } else if (cond2) { istruzioni2 } else { istruzioni3; }
In questo caso il parser controllerà cond1; se essa è vera vengono eseguite le istruzioni1, se invece è falsa e cond2 è vera, verranno eseguite le istruzioni2; se entrambe le condizioni sono false verranno eseguite le istruzioni3.
16 switch
L'istruzione switch è un tipo particolare di selezione che permette di verificare i possibili valori dell'espressione presa in considerazione. La sintassi è:
switch (espressione) { case val1: istruzioni1; case val2: istruzioni2; ... case val_n: istruzioni_n; default: istruzioni }
Quando il browser incontra questa istruzione, scorre tutti i valori val1, val2, ...val_n fino a che non incontra un valore uguale all'espressione indicata tra parentesi oppure un blocco default. In questo caso inizia ad eseguire il codice che segue i due punti. Se non c'è alcun blocco default e non ci sono valori che soddisfino l'uguaglianza, il parser prosegue eseguendo le istruzioni dopo la chiusura delle parentesi graffe. Si faccia però attenzione a questo spezzone:
var a = 1; switch (a + 1) { case 1: alert(“a = zero”); case 2: alert(“a = uno”); case 3: alert(“a = due”); case 4: alert(“a = tre”); default: alert(“a maggiore di 3”); }
Si potrebbe supporre che l'output di questo codice sia solo una alertbox contenente il messaggio a = 1 in quanto il blocco 2 soddisfa l'uguaglianza (a + 1 = 2). Non è tuttavia così: il parser dopo essersi fermato al blocco 2 prose- guirà leggendo anche i blocchi successivi e il blocco default. Per evitare ciò dobbiamo inserire un'istruzione break. L'istruzione break indica al parser di interrompere la lettura della struttura switch e di proseguire oltre le parentesi graffe. L'esempio corretto è:
switch (a + 1) { case 1: alert(“a = zero”); break; case 2: alert(“a = uno”); break; case 3: alert(“a = due”); break; case 4: alert(“a = tre”); break; default: alert(“a maggiore di 3”); }
Ovviamente il break non è necessario per l'ultimo blocco. Vediamo poi un altro listato:
switch (a + 1) { default: alert(“a maggiore di 3”); break; case 1: alert(“a = zero”); break; case 2: alert(“a = uno”); break; case 3: alert(“a = due”); break; case 4: alert(“a = tre”); }
Bisogna fare attenzione a non porre il blocco default in cima, in quanto il parser si fermerebbe subito lì e, incontrata l'istruzione break, salterebbe alla fine del blocco switch senza valutare le altre espressioni.
Notare che la selezione switch è sostituibile con una selezione di if ed else if.
17 Operatore ternario
Esiste oltre agli operatori già menzionati nel capitolo precedente anche un cosiddetto operatore ternario , che lavora con tre valori. La sua sintassi è:
condizione? esp1 : esp
Quando il parser incontra questa notazione, valuta il valore booleano di condizione. Se è vero, restituisce il valore di esp1 altrimenti quello di esp2. Questo permette di creare semplici selezioni; ad esempio:
var anni = prompt('Quanti anni hai?', 20); var msg = “Ciao, vedo che sei " + (anni >= 18? “maggiorenne” : “mino- renne”) + "!"; alert(msg);
In questo caso l'operatore ternario restituisce “maggiorenne” se anni è maggiore o uguale a 18, altrimenti restituisce “minorenne”.
18 Esercizi
- Scrivere un programma che converta un voto numerico chiesto all'utente (da 0 a 10) in un giudizio (insufficiente, sufficiente, buono, ecc...).
Soluzione var voto = prompt(“Introduci il voto dell'alunno”,6); var msg; switch (voto) { case “0": msg="Il compito non è stato consegnato (non classificabile)"; break; case “1": case “2": msg="Insufficienza grave"; break; case “3": case “4": msg="Insufficienza"; break; case “5": msg="Sufficienza scarsa"; break; case “6": msg="Sufficienza"; break; case “7": msg="Sufficienza piena"; break; case “8": msg="Buono"; break; case “9": msg="Discreto"; break; case “10": msg="Ottimo con lode"; break; default: msg="Dati non validi"; } alert(msg); Analizzando il codice, possiamo vedere che nei casi voto sia uguale ad esempio a 1 e 2 o a 3 e 4 viene eseguita la stessa operazione in quanto non c'è un break per ogni blocco case. Se nessuno dei valori soddisfa l'uguaglianza con a viene restituito un messaggio di errore
- È possibile risolvere il programma precedente usando solo con istruzioni if?
Soluzione
Sì, prevedendo una serie di if, meglio se utilizzando una struttura else if:
//... if (voto == 0) { msg = “Il compito non è stato consegnato (non classificabile)"; } else if (voto == 1 || voto == 2) { msg = “Insufficienza grave"; //così avanti tutti gli altri casi, fino all'ultimo //che corrisponde al default } else { msg = “Dati non validi"; }
L' iterazione è una struttura di controllo (come la selezione) che permette l'esecuzione di una sequenza di una o più istruzioni fino al verificarsi di una data condizione.
19 Cicli con condizione
La forma più semplice di ciclo è composta da una condizione valutata inizialmente e ad un blocco di istruzioni eseguito sino a quando la condizione iniziale non risulti false. In JavaScript usiamo in questo caso un ciclo while la cui sintassi è:
while (condizione) { istruzioni; }
Quando JavaScript incontra questa struttura:
- valuta il valore booleano di condizione. Possiamo avere quindi due casi:
(a) se è vero, esegue il blocco di istruzioni delimitato dalle parentesi graffe e quindi ricomincia dal punto 1 (b) se è falso, salta al punto 2
- prosegue la lettura delle istruzioni successive
Si noti che:
22 break e continue
Le istruzioni break e continue servono per alterare il normale flusso dell'esecuzione di un ciclo:
- break serve per uscire completamente dal ciclo in cui ci si trova riprendendo dalla prima riga dopo la fine del ciclo. Questo è molto utile se ad esempio si sta effettuando una ricerca tra un insieme di valori: una volta trovato il valore che ci interessa, è inutile andare avanti nel ciclo e quindi si usa break.
- continue è leggermene diverso da break. Quando viene inserito in un ciclo, interrompe la ripetizione corrente e l'esecuzione continua con il valore successivo del ciclo. Ad esempio si vogliono stampare tutti i numeri da n a m tranne quelli divisibili per 7:
for (var i = n; i <= m; i++) { if (i % 7 == 0) continue; // se divisibile per 7 interrompe e ricomincia document.write(i); }
Come molti linguaggi di programmazione, anche JavaScript da la possibilità di creare le proprie funzioni persona- lizzate.
Come è stato già accenato in precedenza, una funzione è un sottoprogramma identificato da una sequenza di caratteri che può accettare o meno nessuno o più parametri e può restituire un valore.
23 Creare le proprie funzioni: una panoramica
La sintassi per la creazione di una nuova funzione è la seguente:
function nome_funzione (arg1, arg2, argN...) { ''codice'' }
Ad esempio:
function benvenuto (nome) { alert(“Benvenuto, " + nome); }
Se vogliamo eseguire il codice contenuto nella funzione dobbiamo richiamarla (o invocarla ). Ad esempio:
var n = prompt(“Come ti chiami?"); if (n != "") benvenuto (n);
Con questo breve spezzone chiediamo all'utente di inserire il nome e, se non risponde con una stringa vuota e non ha premuto Annulla, gli porge il benvenuto (si noti che il metodo prompt restituisce una stringa vuota se l'utente fa clic su “Annulla”).
24 Usare i parametri
Come abbiamo visto, è possibile prevedere che l'utente possa passare alcuni parametri alla funzione. Dando una sguardo alla funzione di benvenuto creata precedentemente, vediamo che il parametro nome della funzione diventa poi automaticamente una variabile; se quando viene chiamata la funzione viene omesso, il parametro assumerà un valore nullo (che diventa 0 per i numeri, una stringa vuota per i valori alfanumerici, falso per i valori booleani).
25 Impostare un valore di ritorno
Impostare un valore di ritorno di una funzione è molto semplice, basta seguire la sintassi:
return valore;
Quando incontra l'istruzione return, JavaScript interrompe l'esecuzione della funzione e restituisce il valore indicato. Ad esempio:
14 27 GLI OGGETTI IN JAVASCRIPT
function somma (a, b) { //una semplice funzione return a+b; } var c = somma(3,5); //c assumerà il valore 8 som- ma(4,12); //in questo caso non succede nulla
Una funzione può anche essere utilizzata prima che ne venga dichiarato il contenuto. Il codice precedente e quello riportato qui sotto sono infatti entrambi validi
var c = somma(3,5); //la funzione somma non esiste ancora! function somma (a, b) { //una semplice funzione return a+b; }
Il concetto di oggetto è molto importante nella programmazione in JavaScript. In questo modulo verranno spiegate le caratteristiche comuni degli oggetti; nei moduli seguenti verranno invece trattati nel dettaglio gli oggetti intrinseci di JavaScript.
L'uso degli oggetti e delle loro funzionalità entra a far parte del paradigma della programmazione orientata agli oggetti (abbreviata OOP , O bject O riented P rogramming)
26 Cosa sono gli oggetti
Per avvicinarci al concetto di oggetto in informatica, possiamo pensare al concetto di oggetto nel mondo reale. Per creare un nuovo oggetto è necessario partire da un modello (in JavaScript un oggetto chiamato prototipo ) che indichi come creare altri oggetti dello stesso tipo (ogni oggetto è un' istanza del prototipo).
Gli oggetti possono inoltre possedere delle caratteristiche ( proprietà ): nel caso ad esempio di macchina (per fare un paragone con la realtà), saranno la cilindrata, le dimensioni, il costo, ecc....
Ciascuna istanza espone inoltre la possibilità di effettuare delle operazione su di essi ( metodi ): per la nostra macchina, metterla in moto o guidare. Queste operazioni modificheranno delle caratteristiche come il livello del suo carburante o la velocità.
Una volta introdotto il concetto di oggetto, dobbiamo avere però la capacità di astrarre: gli oggetti dell'informatica non corrispondono a quelli della realtà; hanno però numerosi vantaggi, tra i quali la possibilità di trattare dati più complessi di numeri e stringhe.
27 Gli oggetti in JavaScript
JavaScript permette di creare i propri oggetti personalizzati; tuttavia per imparare è meglio iniziare a lavorare sugli oggetti predefiniti del linguaggio.
Per creare una nuova istanza di un oggetto si utilizza una funzione chiamata costruttore. Di fatto, in realtà, per definire un oggetto prototipo è quindi sufficiente creare un nuovo costruttore.
La sintassi quindi:
var variabile = new nome_oggetto ();
In questo modo la variabile variabile sarà l'unico modo per fare riferimento all'istanza di nome_oggetto appena creata.
I costruttori solitamente prevedono anche una serie di parametri per impostare automaticamente alcune proprietà dell'oggetto creato:
var variabile = new nome_oggetto (parametri_del_costrutture);
Supponiamo di avere a che fare con un oggetto macchina implementato in JavaScript. Per inizializzare la variabile “la_mia_macchina” dobbiamo dunque richiamare la funzione costruttore del prototipo macchina, che per esempio potrebbe prevedere un parametro “modello” e “colore vernice":
var la_mia_macchina = new macchina (“Fiat Bravo”, “Rosso”);
E' possibile creare un oggetto anche assegnando a una variabile delle coppie chiave - valore:
16 32 METODI
L'oggetto String permette di effettuare numerose operazioni sulle stringhe quali ricerca, isolamento di un carattere e altro ancora.
30 Costruttore
Per creare un nuovo oggetto della classe String usiamo la sintassi:
var nome_variabile = new String(stringa);
Il costruttore prende come parametro la stringa che sarà manipolata nel corso dello script.
L'oggetto String è un po' particolare, in quanto, come vi sarete già accorti, corrisponde ad un “doppione” del tipo di dato primitivo stringa, analizzato precedentemente nel corso del libro. Dal momento che JavaScript effettua automaticamente la conversioni dei dati quando necessario, la differenza è dal punto di vista pratico, in quanto:
- se creiamo una stringa con la normale sintassi
var variabile = “testo";
e successivamente volessimo trattarla come un oggetto String usando metodi o proprietà della classe String, JavaScript converte automaticamente la stringa in un oggetto String
- se abbiamo un oggetto String e volessimo recuperare la sua stringa, JavaScript converte automaticamente l'oggetto String in una stringa contente la stringa indicata nel costruttore.
31 Proprietà
L'oggetto String dispone di una proprietà rilevante, la proprietà length che restituisce il numero di caratteri contenuti in una stringa:
var esempio = “Sono una stringa primitiva” alert (esempio.length); //restituisce 26
Nell'esempio appena visto, nella seconda riga la variabile esempio viene convertita in un oggetto String per accedere alla proprietà length. Sempre per quanto appena detto, potremmo semplicemente scrivere:
alert (“Sono una stringa primitiva”.length); //restituisce 26
32 Metodi
I metodi della classe String permettono di eseguire molteplici operazioni sulle stringhe; si noti che questi metodi lavorano sulla stringa contenuta nell'oggetto ma restituiscono il valore desiderato senza modificare il valore dell'oggetto stringa.
32.1 toLowerCase() e toUpperCase()
Questi due metodi restituiscono la stringa forzando la capitalizzazione o tutta minuscola o tutta minuscola. Attenzione:
var t1 = new String (“TeStO”); var t2 = t1.toLowerCase() //restituisce “testo” var t3 = t1.toUpperCase() //Restituisce “TESTO” // attenzione: alla fine di questo codice la variabile t1 contiene ancora “TeStO"!
32.2 charAt() e charCodeAt() 17
32.2 charAt() e charCodeAt()
Il metodo charAt() restituisce il carattere della stringa che si trova alla posizione specificata; il primo carattere è identificato dalla posizione 0. Ad esempio:
var testo = prompt(“Inserisci un testo”, “Hello, world!"); var primoCarattere = testo.charAt(0); var quartoCarattere = testo.charAt(3); var ultimoCarattere = testo.charAt(testo.length - 1);
Questo semplice codice estrapola dalla stringa fornita in input dall'utente l'ultimo carattere. Per fare ciò recupera il carattere alla posizione testo.length - 1: infatti, dal momento che il conteggio dei caratteri parte da 0, nel caso di “Hello, world!" avremo queste posizioni:
Quindi, essendo la stringa sia composta da 13 caratteri, l'ultimo si trova alla posizione 12, ovvero 13-1.
Il metodo charCodeAt() funziona come charAt() ma invece di restituire il carattere alla posizione specificata, resti- tuisce il suo codice ASCII. Ad esempio:
var testo = “Hello, world!"; alert( testo.charCodeAt(1) ); //mostra il codice ASCII del carattere “e”, ovvero 101
32.3 fromCharCode()
Il metodo fromCharCode() è l'opposto di charCodeAt(): infatti prende come argomento un numero qualsiasi di numeri che vengono interpretati come codici Ascii e trasformati in una stringa. Questo metodo è però un po' particolare, in quanto non necessita di lavorare su un oggetto String; per questo viene detto statico. Per utilizzare il metodo sarà sufficiente usare la sintassi:
String.fromCharCode(parametri);
facendo cioè riferimento alla classe String. Vediamo un esempio:
var stringa; for (codice = “0”.charCodeAt(0); codice <= “9”.charCodeAt(0); codice ++ ) { stringa = stringa + String.fromCharCode(codice); }
Questo semplice snippet scorre dal codice del carattere “0” a quello del carattere “9” creando così la stringa:
0123456789
32.4 indexOf() e lastIndexOf()
Uno dei metodi dell'oggetto String che useremo più di frequente sarà indexOf() la cui sintassi è:
oggetto_string.indexOf(search, start);
In pratica, il metodo cerca nella stringa la prima occorrenza della sottostringa search e ne restituisce la posizione (a partire da 0); se la stringa non viene trovata, restituisce −1. Il parametro opzionale start specifica la posizione dalla quale iniziare la ricerca (di default è 0). Ad esempio;
var stringa = “Ma la volpe col suo balzo ha raggiunto il quieto fido” //ricordiamoci che JS converte automaticamente le stringhe var posiz = stringa.indexOf(“v”); //contiene il valore 6) var posiz2 = stringa.indexOf(“k”); // restituisce − 1
Il metodo lastIndexOf() funziona analogamente ad indexOf() ma inizia la ricerca dalla fine della stringa e non dall'inizio
32.5 substr()
Il metodo substr() presenta la sintassi:
- Creare una funzione che fornisca la sottostringa di una stringa data compresa tra due altre sottostringhe, a partire da sinistra. Ad esempio, dati come parametri una@bella&stringa, "@" e "&", restituisca “bella”.
Soluzione function substrChr (string, chr1, chr2) { chr1Pos = string.indexOf(chr1); chr2Pos = string.indexOf(chr2); return string.substr(chr1Pos +1, chr2Pos - chr1Pos - 1); }
L'oggetto Math mette a disposizione dello sviluppatore JavaScript numerose funzioni e costanti matematiche; è un oggetto particolare, in quanto non richiede di lavorare su istanze di oggetti ma permette di accedere ai suoi metodi usando la notazione:
Math.nome_metodo(); Math.nome_proprietà
34 Proprietà
Le proprietà dell'oggetto Math consistono in diverse costanti matematiche:
- PI: restituisce il valore approssimato di Pi greco
- E: restituisce il valore della costante matematica E
- LN2 e LN10: il valore del logaritmo naturale di 2 e di 10
Ovviamente sono tutte proprietà di sola lettura
35 Metodi
Ecco una lista dei metodi corrispondenti alle principali funzioni matematiche e trigonometriche:
- abs(): restituisce il valore assoluto (o modulo) del numero fornito come argomento
- min() e max(): restituiscono il minimo e il massimo tra i due numeri passati come parametri
- sqrt() e pow(b, n ): restituiscono la radice quadrata del numero passato o l'nesima potenza del numero b
- sin(), cos() e tan(): restituiscono il seno, il coseno e la tangente trigonometrica dell'angolo passato in radianti
- log(): restituisce il logaritmo naturale in base e del numero passato come parametro
35.1 Arrotondare i numeri
Per l'arrotondamento l'oggetto Math mette a disposizione tre metodi:
- ceil(): arrotonda il numero al numero intero maggiore più vicino (per eccesso). Ad esempio:
Math.ceil(10.01) //restituisce 11 Math.ceil(−6.3) //restituisce − 6
- floor(): arrotonda l'oggetto al numero intero minore più vicino (per difetto). Ad esempio:
Math.floor(10.01) //restituisce 10 Math.floor(−6.3) //restituisce − 7
- round(): arrotonda l'oggetto per eccesso se la parte decimale è maggiore o uguale a 5, altrimenti arrotonda per difetto:
20 36 UN ESEMPIO PRATICO
Math.round(10.01) //restituisce 10 Math.round(−6.3) //restituisce −6 Math.round(2.5) //restituisce 3
Tutte queste tre funzioni differiscono da parseInt() che non arrotonda i numeri, bensì li tronca. Ad esempio:
Math.parseInt(10.01) //restituisce 10 Math.parseInt(−6.3) //restituisce −6 Math.parseInt(2.5) //restituisce 2
35.2 Generare numeri casuali
L'uso di Math permette anche di generare numeri (pseudo) casuali tramite il metodo:
Math.random()
che restituisce un numero casuale decimale compreso tra 0 (incluso) e 1 (escluso). Nella pratica non è molto utile se non viene trasformato in un numero intero. Ad esempio questo codice simula il lancio di un dado:
var numLanci = prompt (“Quanti lanci vuoi effettuare?", 10); var i; var lancio; for (i = 0; i < numLanci; i++) { lancio = Math.floor(Math.random() * 6 + 1); alert(“Lancio " + (i + 1) + ": " + lancio); }
La riga che ci interessa è quella dell'assegnazione della variabile lancio. Per capire l'algoritmo usato, ragioniamo sul risultato che vogliamo ottenere. Il numero che vogliamo ottenere (che chiameremo d ) deve essere un numero intero compreso tra 1 e 6 inclusi. Dal momento che il generatore restituisce numeri tra 0 incluso e 1 escluso, dovremo:
- moltiplicare per sei il numero casuale ottenuto (che chiameremo n ): in questo modo possiamo ottenere un numero che va da 0 (se n = 0, allora d = 0) fino a sei escluso. Infatti d potrebbe essere uguale a 6 solo se n potesse essere uguale a 1, cosa che non è possibile
- sommare uno al valore ottenuto: in questo modo d sarà compreso tra 1 (incluso) e 7 (escluso)
- arrotondare il valore per difetto: in questo modo d sarà un numero intero compreso tra 1 e 6; infatti, dato che il 7 è escluso, arrotondando per difetto potremo ottenere al massimo 6.
36 Un esempio pratico
Di seguito viene mostrata un'applicazione pratica dei metodi dell'oggetto Math per la creazione di una funzione che arrotondi le cifre alla n esima cifra decimale indicata.
function arrotonda (num, dec, mod) { var div = Math.pow(10, dec); switch (mod) { case 'e': case 'E': //arrotonda per eccesso return Math.ceil(num * div) / div; break; case 'd': case 'D': //arrotonda per difetto return Math.floor(num * div) / div; break; case 't': case 'T': //troncamento return parseInt(num * div) / div; break; case 'a': case 'A': default: //ar- rotonda return Math.round(num * div) / div; } } //per testarla usiamo queste righe di codice... alert(arrotonda(3.43, 1, 't')); alert(arrotonda(3.42, 1, 'e')); alert(arrotonda(3.469, 2, 'd')); alert(arrotonda(3.427, 2, 'e')); alert(arrotonda(3.55, 1, 'a')); alert(arrotonda(3.46, 1, 't'));
La funzione appena mostrata arrotonda il numero fornito come primo parametro alla cifra decimale fornita come secondo parametro usando diversi metodi di arrotondamento. Il tutto sta nel fatto che le funzioni di Math agiscono solo sui numeri interi e non su quelli decimali. Per effettuare gli arrotondamenti, quindi, spostiamo la virgola di n posizioni decimali fornite come parametro ed eseguiamo l'arrotondamento desiderato; successivamente, spostiamo di nuovo la virgola all'indietro. Per spostare la virgola è sufficiente moltiplicare e dividere per una potenza di dieci: per fare ciò ci serviamo del metodo Math.pow()
L'oggetto Date permette di gestire in modo semplice e veloce le date; nella pratica, un'istanza della classe Date identifica una data e le funzionalità della classe permettono di aggiungere o sottrarre anni, mesi o giorni o recuperarne il valore.
