Universit di Pisa Dipartimento di Informatica

Programmazione in JavaScript

Vincenzo Ambriola

Versione 3.1 ~~~ 5 dicembre 2012

Programmazione in JavaScript

Prefazione
Per chi si avvicina alla programmazione gli ostacoli da superare sono tanti: un nuovo linguaggio (artificiale) da imparare, strumenti di sviluppo da provare per capirne la logica di funzionamento, esercizi da risolvere per apprendere i concetti di base e, successivamente, quelli pi avanzati. Ci sono molti modi per insegnare a programmare e ogni docente, nel tempo, ha trovato il suo. Questo libro rivolto agli studenti del primo anno del Corso di laurea in Informatica umanistica che seguono Elementi di programmazione (uno dei due moduli dellinsegnamento di Fondamenti teorici e programmazione) e Programmazione (uno dei due moduli di Progettazione e programmazione web). Lapproccio adottato si basa sullintroduzione graduale dei concetti di JavaScript, un linguaggio di programmazione ampiamente usato per la programmazione web. Questo libro non un manuale di JavaScript. Il linguaggio troppo complesso per insegnarlo a chi non ha mai programmato e, soprattutto, di manuali di questo tipo ce ne sono tanti in libreria. Il libro presenta gli aspetti pi importanti di JavaScript, necessari ma, soprattutto, sufficienti per la soluzione dei problemi proposti. Il lettore interessato agli aspetti pi avanzati di JavaScript e al suo uso professionale invitato a continuare lo studio e la pratica di questo linguaggio. I risultati supereranno di gran lunga le aspettative.

1.1 Struttura del libro

Il libro strutturato in due parti: la prima presenta gli elementi di programmazione necessari per risolvere semplici problemi su numeri e testi; la seconda affronta il tema della programmazione web. Ogni parte strutturata in capitoli, dedicati a un aspetto della programmazione. Alcuni capitoli si concludono con esercizi che il lettore invita-

Programmazione in JavaScript

to a risolvere non solo con carta e matita ma mediante un calcolatore. Gli strumenti necessari sono alla portata di tutti: un browser di nuova generazione pi che sufficiente. La soluzione degli esercizi proposti riportata al termine delle due parti. Nel libro sono state usate le seguenti convenzioni tipografiche, per facilitare la lettura dei programmi presentati: il corsivo usato per indicare la prima volta che un termine rilevante compare nel libro; lindice analitico contiene lelenco di questi termini, con lindicazione della pagina in cui sono introdotti; la sintassi di JavaScript e gli esempi sono riportati allinterno di un riquadro colorato.

1.2 Ringraziamenti
La prima parte di questo libro nasce da una lunga collaborazione con Giuseppe Costa, coautore di 4 passi in JavaScript. Senza le sue preziose indicazioni sarebbe stato praticamente impossibile capire le insidie e la bellezza di un linguaggio di programmazione complesso come JavaScript. La seconda parte stata scritta seguendo i consigli e i suggerimenti di Maria Simi, profonda conoscitrice del web, della sua storia e delle tante tecnologie ad esso collegate.

Programmazione in JavaScript

Indice
Prefazione.............................................................................................3 1.1 Struttura del libro........................................................................3 1.2 Ringraziamenti............................................................................4 2 Linguaggi e grammatiche.................................................................11 2.1 Alfabeto, linguaggio...................................................................12 2.2 Grammatiche.............................................................................13 2.3 Backus-Naur Form....................................................................13 2.4 Sequenze di derivazione............................................................15 2.5 Alberi di derivazione.................................................................16 3 Programmi, comandi e costanti......................................................19 3.1 Programma................................................................................20 3.2 Costanti numeriche e logiche....................................................21 3.3 Costanti stringa.........................................................................22 3.4 Comando di stampa..................................................................24 4 Espressioni.......................................................................................25 4.1 Operatori....................................................................................25 4.2 Valutazione delle espressioni...................................................28 4.3 Casi particolari..........................................................................29 4.4 Conversione implicita...............................................................29 4.5 Esercizi......................................................................................30 5 Variabili e assegnamento.................................................................31 5.1 Dichiarazione di costante..........................................................32 5.2 Variabili ed espressioni.............................................................32 5.3 Comando di assegnamento.......................................................33 5.4 Abbreviazioni del comando di assegnamento.........................34 5.5 Esercizi......................................................................................34 6 Funzioni...........................................................................................37 6.1 Visibilit.....................................................................................39 6.2 Funzioni predefinite..................................................................41 6.3 Esercizi......................................................................................42 7 Comandi condizionali......................................................................43 7.1 Comando condizionale..............................................................43 7.2 Comando di scelta multipla......................................................45 7.3 Anno bisestile............................................................................47 7.4 Esercizi......................................................................................48 8 Comandi iterativi.............................................................................51 8.1 Comando iterativo determinato................................................51

Programmazione in JavaScript

8.2 Comando iterativo indeterminato............................................52 8.3 Primalit....................................................................................53 8.4 Radice quadrata........................................................................54 8.5 Esercizi......................................................................................55 9 Array.................................................................................................57 9.1 Elementi e indici di un array.....................................................57 9.2 Lunghezza di un array..............................................................59 9.3 Array dinamici..........................................................................59 9.4 Array associativi.......................................................................60 9.5 Stringhe di caratteri..................................................................61 9.6 Ricerca lineare..........................................................................62 9.7 Minimo e massimo di un array.................................................63 9.8 Array ordinato..........................................................................64 9.9 Filtro..........................................................................................65 9.10 Inversione di una stringa........................................................66 9.11 Palindromo..............................................................................66 9.12 Ordinamento di array..............................................................67 9.13 Esercizi ...................................................................................69 10 Soluzione degli esercizi della prima parte......................................71 10.1 Esercizi del capitolo 4..............................................................71 10.2 Esercizi del capitolo 5.............................................................72 10.3 Esercizi del capitolo 6.............................................................74 10.4 Esercizi del capitolo 7..............................................................75 10.5 Esercizi del capitolo 8.............................................................78 10.6 Esercizi del capitolo 9.............................................................79 11 Ricorsione........................................................................................85 11.1 Fattoriale..................................................................................85 11.2 Successione di Fibonacci.........................................................86 11.3 Aritmetica di Peano.................................................................87 11.4 Esercizi.....................................................................................89 12 Oggetti.............................................................................................93 12.1 Metodi......................................................................................95 12.2 Array........................................................................................96 12.3 Stringhe...................................................................................97 12.4 Il convertitore di valuta..........................................................98 12.5 Insiemi.....................................................................................99 12.6 Tabelle....................................................................................103 12.7 Esercizi...................................................................................105 13 Alberi.............................................................................................107

Programmazione in JavaScript

13.1 Alberi binari...........................................................................107 13.2 Alberi di ricerca......................................................................111 13.3 Alberi n-ari.............................................................................114 13.4 Alberi n-ari con attributi........................................................116 13.5 Esercizi....................................................................................117 14 HTML.............................................................................................121 14.1 Marche....................................................................................121 14.2 Eventi.....................................................................................122 14.3 Gestione degli eventi.............................................................124 14.4 Script......................................................................................125 14.5 Caricamento di una pagina...................................................126 14.6 Esercizi...................................................................................128 15 Document Object Model...............................................................129 15.1 Struttura e propriet..............................................................129 15.2 Navigazione............................................................................131 15.3 Ricerca....................................................................................132 15.4 Creazione e modifica.............................................................133 15.5 Attributi..................................................................................135 15.6 Eventi.....................................................................................135 15.7 Propriet innerHTML............................................................136 15.8 Generazione dinamica...........................................................136 15.9 Esercizi...................................................................................142 16 XML...............................................................................................145 16.1 Un documento XML..............................................................145 16.2 Il parser XML........................................................................146 16.3 Creazione di oggetti definiti mediante XML........................148 16.4 Esercizi...................................................................................152 17 Un esempio completo....................................................................153 17.1 Il problema.............................................................................153 17.2 Il codice HTML......................................................................153 17.3 Gli oggetti Rubrica e Voce.....................................................155 17.4 Caricamento e inizializzazione..............................................156 17.5 Gestione degli eventi..............................................................157 17.6 Ricerca di voci........................................................................158 17.7 Visualizzazione.......................................................................160 18 Soluzione degli esercizi della seconda parte.................................161 18.1 Esercizi del capitolo 11...........................................................161 18.2 Esercizi del capitolo 12..........................................................163 18.3 Esercizi del capitolo 13..........................................................167

Programmazione in JavaScript

18.4 Esercizi del capitolo 14..........................................................172 18.5 Esercizi del capitolo 15..........................................................173 18.6 Esercizi del capitolo 16..........................................................175 19 Codice degli oggetti.......................................................................181 19.1 Insieme...................................................................................181 19.2 Tabella....................................................................................183 19.3 Albero binario........................................................................184 19.4 Albero di ricerca....................................................................187 19.5 Albero n-ario..........................................................................189 19.6 Albero n-ario con attributi....................................................190 19.7 Ricettario................................................................................192 19.8 Rubrica..................................................................................194 20 Grammatica di JavaScript...........................................................199 20.1 Parole riservate......................................................................199 20.2 Caratteri...............................................................................200 20.3 Identificatore.......................................................................201 20.4 Costante...............................................................................202 20.5 Espressione..........................................................................203 20.6 Programma, dichiarazione, comando, blocco....................204 20.7 Dichiarazione.......................................................................205 20.8 Comando semplice..............................................................206 20.9 Comando composto.............................................................207

Parte prima Elementi di programmazione

Programmazione in JavaScript

Linguaggi e grammatiche

Quando si parla di linguaggio viene subito in mente il linguaggio parlato che usiamo tutti i giorni per comunicare con chi ci circonda. In realt, il concetto di linguaggio molto pi generale. Possiamo individuare due categorie di linguaggi: naturali e artificiali. I primi sono linguaggi ambigui, perch il significato delle parole dipende dal contesto in cui sono inserite. I linguaggi naturali sono inoltre caratterizzati dal fatto di mutare con luso, per lintroduzione di neologismi e di parole provenienti da altri linguaggi (per litaliano il caso dei termini stranieri o delle espressioni dialettali). Un esempio di frase ambigua : Ho analizzato la partita di calcio. La parola calcio pu significare lo sport del calcio nella frase Ho analizzato la partita di calcio dellItalia o il minerale calcio nella frase Ho analizzato la partita di calcio proveniente dallArgentina. A differenza dei linguaggi naturali, i linguaggi artificiali hanno regole e parole che non cambiano con luso e il cui significato non dipende dal contesto in cui sono inserite. A questa famiglia appartengono i linguaggi utilizzati per descrivere le operazioni da far compiere a macchine o apparecchiature. Tali descrizioni non possono essere ambigue perch una macchina non pu decidere autonomamente tra pi possibilit di interpretazione. Un esempio di linguaggio artificiale quello usato per comandare un videoregistratore: una frase del linguaggio una qualunque sequenza di registra, riproduci, avanti, indietro, stop. Le parole hanno un significato preciso e indipendente dal contesto in cui si trovano. Linformatica ha contribuito notevolmente alla nascita di numerosi linguaggi artificiali, i cosiddetti linguaggi di programmazione, usati per la scrittura di programmi eseguibili da calcolatori elettronici.

11

Programmazione in JavaScript

Questo libro dedicato allo studio di uno di essi, il linguaggio JavaScript.

2.1 Alfabeto, linguaggio

Un alfabeto formato da un insieme finito di simboli. Ad esempio, lalfabeto A = {a, b, c} costituito da tre simboli. Una frase su un alfabeto una sequenza di lunghezza finita formata dai simboli dellalfabeto. Ad esempio, con lalfabeto A definito in precedenza si possono formare le frasi aa, abba, caab. Dato un alfabeto A, linsieme di tutte le frasi che si possono formare usando i suoi simboli infinito, anche se ogni frase di lunghezza finita. Per semplicit questo insieme chiamato insieme delle frasi di A. Sempre usando lesempio precedente, possibile formare linsieme delle frasi di A ma non possibile riportarlo in questo libro perch, come gi detto, la sua lunghezza infinita. Ciononostante, possibile mostrarne una parte finita, usando come artificio i puntini di sospensione per indicare la parte infinita: {a, b, c, aa, ab, ac, ba, bb, bc, ca, cb, cc, ...}. Dato un alfabeto A, un linguaggio L su A un sottoinsieme delle frasi di A. Questa definizione diversa da quella data in precedenza: non tutte le frasi di A sono, infatti, anche frasi di L. Abbiamo fatto riferimento a un linguaggio e non del linguaggio su un alfabeto perch pu esistere pi di un linguaggio su un dato alfabeto. Prendiamo come esempio il linguaggio italiano e quello inglese: entrambi si basano sullalfabeto latino (detto anche alfabeto romano), ma sono costituiti da insiemi diversi di frasi. I like walking on the grass una frase del linguaggio inglese, ma non lo di quello italiano. Mi piace camminare sullerba una frase del linguaggio italiano, ma non lo di quello inglese, anche se il significato lo stesso. Sdksfdk skjfsfkj sdkfsakjfd, invece, non una frase n del linguaggio italiano n di quello inglese, nonostante appartenga allinsieme delle frasi sullalfabeto latino.

12

Programmazione in JavaScript

2.2 Grammatiche
Un linguaggio ha due aspetti importanti: sintassi: le regole per la formazione delle frasi del linguaggio (ad esempio, la grammatica italiana);

semantica: il significato da attribuire ad ogni frase del linguaggio (ad esempio, tramite lanalisi logica delle frasi, che permette di individuare il soggetto di una data azione, loggetto e cos via). Esistono formalismi che definiscono i due aspetti di un linguaggio. In questo libro presentiamo un formalismo per la definizione della sintassi. Non trattiamo, invece, gli aspetti relativi alla definizione formale della semantica. Una grammatica un formalismo che permette di definire le regole per la formazione delle frasi di un linguaggio. Una grammatica quindi un metalinguaggio, ovvero un linguaggio che definisce un altro linguaggio. Una grammatica formata da: simboli terminali: rappresentano gli elementi sintattici del linguaggio che, di norma, coincidono con lalfabeto del linguaggio; simboli non-terminali o metasimboli: rappresentano le categorie sintattiche del linguaggio; regole: definiscono le relazioni tra i simboli terminali e i nonterminali; mediante la loro applicazione si ottengono le frasi del linguaggio.

Un linguaggio L le cui frasi rispettano le regole della grammatica G si dice generato da G.

2.3 Backus-Naur Form

La Backus-Naur Form (BNF) uno dei formalismi pi usati per definire le grammatiche. In accordo con la definizione di grammatica, la BNF prevede la definizione di un insieme di simboli non-terminali (di

13

Programmazione in JavaScript

solito racchiusi tra parentesi angolari) e di un insieme di simboli terminali (di solito indicati in corsivo o in grassetto per distinguerli dai simboli non-terminali). Inoltre, deve essere indicato un simbolo iniziale che appartiene allinsieme dei simboli non-terminali. La funzione di questo simbolo sar chiarita nel seguito. Le regole per la formazione delle frasi sono di due tipi: X ::= S si legge X pu essere sostituito con S o X produce S (da cui il nome di produzioni dato alle regole). X un simbolo nonterminale, S una sequenza di simboli terminali e non-terminali. X ::= S1 | S2 | ... | Sn si legge X pu essere sostituito con S1, S2, ..., o Sn. Anche in questo caso X un simbolo non-terminale, mentre S1, S2, ..., Sn sono sequenze di simboli terminali e non-terminali.

Il linguaggio L generato da una grammatica G definita in BNF linsieme di tutte le frasi formate da soli simboli terminali, ottenibili partendo dal simbolo iniziale e applicando in successione le regole di G. Applicare una regola R a una sequenza s di simboli significa sostituire in s unoccorrenza del simbolo non-terminale definito da R con una sequenza della parte sinistra di R . Per rendere concreti i concetti presentati finora, mostriamo la grammatica G1, definita in BNF: A = {a, b} N = {<S>, <A>, <B>} I = <S> <S> ::= <A><B> | <B><A> <A> ::= a | aa <B> ::= b | bb alfabeto simboli non-terminali simbolo iniziale regola di <S> regola di <A> regola di <B>

14

Programmazione in JavaScript

Il linguaggio generato da G1 {ab, aab, abb, aabb, ba, bba, baa, bbaa}. Si noti che, in questo esempio, il linguaggio finito perch la grammatica genera esattamente otto frasi. Una grammatica leggermente pi complicata G2: A = {a, b}, N = {<S>, <A>, <B>} I = <S> <S> ::= <A><B> <A> ::= a | a <A> <B> ::= b | b <B> alfabeto simboli non-terminali simbolo iniziale regola di <S> regola di <A> regola di <B>

Il linguaggio infinito generato da G2 {ab, aab, abb, aabb, aaab, aaabb, aaabbb, abbb, aabbb, aaabbb, ...}.

2.4 Sequenze di derivazione

Il processo di derivazione di una frase si pu rappresentare tramite una sequenza di derivazione, formata da una successione di frasi intermedie, costruite a partire dal simbolo iniziale, con lindicazione della regola usata per passare da una frase alla successiva. Ogni frase, tranne lultima, formata da simboli terminali e non-terminali. Lultima frase formata esclusivamente da simboli terminali e, pertanto, appartiene al linguaggio generato dalla grammatica a cui appartengono le regole di derivazione. A titolo di esempio, consideriamo la sequenza di derivazione della frase aab appartenente al linguaggio generato da G2:

15

Programmazione in JavaScript

<S> => Regola <S> ::= <A> <B> <A> <B> => Regola <A> ::= a | a <A> seconda opzione a <A> <B> => Regola <A> ::= a | a <A> prima opzione a a <B> => Regola <B> ::= b | b <B> prima opzione aab

2.5 Alberi di derivazione

Un metodo alternativo per rappresentare il processo di derivazione si basa sugli alberi di derivazione. Per costruire lalbero sintattico di una frase si parte dal simbolo iniziale della grammatica, che ne costituisce la radice. Successivamente, per ogni foglia che un simbolo non-terminale, si sceglie una regola da applicare sostituendo la foglia con un nodo e generando tanti figli quanti sono i simboli terminali e non-terminali dellopzione scelta. Le foglie possono essere simboli non-terminali solo nelle fasi intermedie di costruzione. Il procedimento termina quando tutte le foglie sono simboli terminali. A differenza del precedente, questo metodo fornisce una visione dinsieme del processo di derivazione ed evidenzia il simbolo non-terminale sostituito ad ogni passo. Anche lalbero sintattico per una data frase viene costruito applicando in sequenza le regole di derivazione a partire dal simbolo iniziale, ma la sua struttura finale non dipende dallordine di applicazione delle regole. Infine, un albero sintattico caratterizzato dal fatto che la radice e tutti i nodi sono simboli nonterminali e le foglie sono simboli terminali. Ecco un esempio di costruzione dellalbero sintattico per la frase aab appartenente al linguaggio generato da G2:

16

Programmazione in JavaScript

<S>

Applichiamo la regola <S> ::= <A> <B> al nodo radice dellalbero di derivazione. Lapplicazione della regola genera due nuovi nodi.
<S> <A> <B>

Applichiamo la regola <A> ::= a | a <A> (seconda opzione) al nodo <A> e la regola <B> ::= b | b <B> (prima opzione) al nodo <B>.
<S> <A> a <A> <B> b

Infine applichiamo la regola <A> ::= a | a <A> (prima opzione) al nodo <A>. La frase aab formata dai simboli terminali presenti sulle foglie dellalbero di derivazione, letti da sinistra a destra.
<S> <A> a <A> a <B> b

17

Programmazione in JavaScript

Programmi, comandi e costanti

JavaScript un linguaggio di programmazione, in particolare un linguaggio di script, cio un linguaggio per definire programmi eseguibili allinterno di altri programmi (chiamati applicazioni). JavaScript usato principalmente per la definizione di programmi eseguibili nei browser, applicazioni per la visualizzazione di pagine web. In questo ambito, JavaScript permette di rendere dinamiche e interattive le pagine web affinch mostrino contenuti diversi in base alle azioni dellutente o a situazioni contingenti, come lora corrente o il tipo di browser utilizzato. Mediante JavaScript anche possibile aggiungere effetti grafici o accedere alle funzionalit del browser in cui le pagine sono visualizzati (lanciare una stampa, aprire una nuova finestra, ridimensionare o spostare sullo schermo una finestra di visualizzazione). Con levoluzione dei browser, JavaScript ha subito numerose modifiche, acquisendo progressivamente nuove funzionalit. Per evitare possibili confusioni, il libro fa riferimento a JavaScript 1.8.2, la versione del linguaggio accettata dal browser Firefox (versione 15.0 e successive). Nella prima parte del libro JavaScript presentato esclusivamente come linguaggio di programmazione, evitando di descriverne il suo uso come linguaggio di script. Questa scelta motivata dalla necessit di presentare gli aspetti di base del linguaggio senza dover introdurre la complessit della programmazione dinamica delle pagine web, argomento trattato nella seconda parte. Per rendere concreta la presentazione del linguaggio, il libro fa riferimento a un ambiente di programmazione chiamato EasyJS1. Questo ambiente consiste in
1 http://www.di.unipi.it/~ambriola/edp/radice.htm

19

Programmazione in JavaScript

una pagina web in cui possibile definire un programma JavaScript, eseguirlo e visualizzare il risultato dellesecuzione.

3.1 Programma
In JavaScript un programma una sequenza di comandi. Un comando pu essere una dichiarazione, un comando semplice o un comando composto.
<Programma> ::= <Comandi> <Comandi> ::= <Comando> | <Comando> <Comandi> ::= <Dichiarazione> | <ComandoSemplice> | <ComandoComposto>

<Comando>

Lesecuzione di un programma consiste nellesecuzione della sua sequenza di comandi. I comandi sono eseguiti uno dopo laltro, nellordine con cui compaiono nella sequenza. Questo comportamento tipico dei linguaggi di programmazione imperativi , classe alla quale appartiene JavaScript. Il punto e virgola indica la fine di una dichiarazione o di un comando semplice. Anche se buona norma terminare, quando previsto, un comando con un punto e virgola, in JavaScript possibile ometterlo se il comando interamente scritto su una riga e sulla stessa riga non ci sono altri comandi. Il ritorno a capo, normalmente ignorato, in questo caso funge da terminatore di comando. JavaScript un linguaggio case sensitive perch fa distinzione tra lettere maiuscole e minuscole. Gli spazi bianchi e le interruzioni di riga servono per migliorare la leggibilit dei programmi. Si possono utilizzare per separare gli elementi del linguaggio, ma non possono essere inseriti al loro interno. Un commento formato da una o pi righe di testo. In JavaScript ci sono due tipi di commenti: su una riga sola, introdotti da //

20

Programmazione in JavaScript

su pi righe, introdotti da /* e chiusi da */.

// questo un commento su una riga /* questo un commento su due righe */

3.2 Costanti numeriche e logiche

In JavaScript una costante pu essere un valore numerico o un valore logico (o booleano). I valori numerici appartengono al tipo primitivo dei numeri, quelli logici al tipo primitivo dei booleani.
<Costante> ::= <Numero> | <Booleano> ::= | | | <Intero> <Intero>.<Cifre> <Intero>E<Esponente> <Intero>.<Cifre>E<Esponente>

<Numero>

<Intero>

::= <Cifra> | <CifraNZ> <Cifre> ::= 0 | <CifraNZ> ::= 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 ::= <Cifra> | <Cifra> <Cifre>

<Cifra> <CifraNZ> <Cifre>

<Esponente> ::= <Intero> | + <Intero> | - <Intero> <Booleano> ::= true | false

Alcuni esempi di costanti numeriche sono i seguenti: 12 159.757 23E5

21

Programmazione in JavaScript

51E+2 630E6 2.321E4 3.897878E+7

9.7777E1 La costante 2 denota il valore due, la costante 159.757 denota il valore centocinquantanove virgola settecentocinquantasette . Le altre costanti, in rappresentazione esponenziale possono essere trasformate in rappresentazione decimale, tenendo presente che lesponente positivo sposta la virgola verso destra e quello negativo verso sinistra: 23E5 equivale a 2 300 000 51E+2 equivale a 5 100 630E6 equivale a 0.000630 2.321E4 equivale a 23 210 3.897878E+7 equivale a 38 978 780

9.7777E1 equivale a 0.97777 La costante 23E5 denota il valore duemilionitrecentomila, la costante 51E+2 denota il valore cinquemilacento, mentre la costante 630E6 denota il valore zero virgola zerozerozeroseicentotrenta. Il valore denotato dalle altre costanti facilmente desumibile. Le costanti booleane, dette anche costanti logiche, sono due. La costante true denota il valore di verit vero, la costante false denota il valore di verit falso.

3.3 Costanti stringa

Una stringa una sequenza di caratteri ed il tipo di dato usato in JavaScript per rappresentare testi. Una stringa che appare esplicitamente in un programma chiamata costante stringa ed una sequenza (anche vuota) di caratteri racchiusi tra apici singoli o apici doppi. I caratteri sono tutti i caratteri stampabili: le lettere alfabetiche minuscole e maiuscole, le cifre numeriche (da non confondere

22

Programmazione in JavaScript

con i numeri), i segni di interpunzione e gli altri simboli che si trovano sulla tastiera di un calcolatore (e qualcuno di pi).
<Costante> <Stringa> ::= <Stringa> ::= | | | "" "<CaratteriStr>" '' '<CaratteriStr>'

<CaratteriStr>

::= <CarattereStr> | <CarattereStr><CaratteriStr> ::= <Lettera> | <Cifra> | <Speciale> ::= | | | | | ::= | | | | a j s A J S | | | | | | b k t B K T | | | | | | c l u C L U | | | | | | d m v D M V | | | | | | e n w E N W | | | | | | f o x F O X | | | | | | g p y G P Y | | | | | | h q z H Q Z | i | r | I | R

<CarattereStr>

<Lettera>

<Speciale>

Space2 ! | " | * | + | = | > | ` | { |

# , ? |

| | | |

$ @ }

| | | |

% | & | ' | ( | ) . | / | : | ; | < [ | \ | ] | ^ | _ ~

In un programma, le costanti stringa devono essere scritte su una sola riga. Per inserire ritorni a capo, tabulazioni, particolari caratteri o informazioni di formattazione si utilizza la barra diagonale decrescente: '\''3 chiamata anche carattere di quotatura. La coppia formata da backslash e da un altro carattere chiamata sequenza di escape. Le principali sequenze di escape sono: \n: nuova riga;

2 Carattere di spaziatura. 3 In inglese questo carattere si chiama backslash.

23

Programmazione in JavaScript

\r: ritorno a capo; \t: tabulazione orizzontale; \': apice singolo; \": apice doppio; \\: backslash.

3.4 Comando di stampa

Il primo comando semplice che prendiamo in considerazione il comando di stampa4:
<ComandoSemplice> ::= print(<Costante>);

Lesecuzione di un comando di stampa ha leffetto di scrivere sulla finestra inferiore di EasyJS la costante racchiusa tra parentesi tonde. Ad esempio, il seguente programma stampa tre costanti.
print(12); print(true); print("alfa");

4 Come vedremo nel seguito, il comando di stampa uninvocazione di funzione. Per semplicit, in questo capitolo trattato come un comando semplice.

24

Programmazione in JavaScript

Espressioni

Unespressione rappresenta un calcolo che restituisce un valore. In JavaScript, come in tutti i linguaggi di programmazione, le espressioni possono essere semplici o composte. Una costante unespressione semplice, il valore della costante coincide con il valore dellespressione, il tipo dellespressione coincide con il tipo del suo valore. Unespressione composta si ottiene combinando una o pi espressioni mediante un operatore, che rappresenta loperazione da effettuare sulle espressioni, dette operandi.
<Espressione> ::= | | | <UnOp> ::= <BinOP> ::= | | <Costante> (<Espressione>) <UnOp> <Espressione> <Espressione> <BinOp> <Espressione> | + | ! - | + | * | / | % && | || | < | <= | > | >= | == | !=

Lintroduzione delle espressioni richiede la modifica della sintassi del comando di stampa.
<ComandoSemplice> ::= print(<Espressione>);

4.1 Operatori
Gli operatori che hanno un unico operando sono detti unari. Gli operatori unari sono: : segno negativo + : segno positivo ! : negazione

25

Programmazione in JavaScript

Loperatore di segno negativo ha un operando il cui valore un numero. Loperatore cambia il segno del valore. Anche loperatore di segno positivo ha un operando il cui valore un numero. In questo caso, per, il segno del valore non modificato. Questi due operatori sono detti numerici, perch il loro risultato un numero. Loperatore di negazione ha un operando il cui valore un booleano. Se il valore delloperando true, il risultato false, se il valore false il risultato true. Questo operatore detto booleano, perch il suo risultato un booleano. Gli operatori che hanno due operandi sono detti binari. Anche gli operatori binari possono essere numerici o booleani. Quelli numerici sono: : sottrazione + : addizione * : moltiplicazione / : divisione

% : modulo I primi quattro operatori (sottrazione, addizione, moltiplicazione, divisione) sono quelli usualmente conosciuti e utilizzati per effettuare i calcoli aritmetici. Il modulo unoperazione su numeri interi, che restituisce il resto della divisione intera del primo operando per il secondo. Il valore dellespressione 5%2 1, cio il resto della divisione intera di 5 per 2. Gli operatori binari booleani si dividono in due gruppi: quelli che hanno due operandi booleani, quelli che hanno due operandi dello stesso tipo. Gli operatori che appartengono al secondo gruppo sono anche detti operatori di confronto. Lelenco dei primi operatori il seguente: && : congiunzione || : disgiunzione Loperatore di congiunzione restituisce true solo se i suoi operandi valgono true, false altrimenti. Se il primo operando vale false il secondo non valutato.

26

Programmazione in JavaScript

Loperatore di disgiunzione restituisce true se almeno uno dei suoi operandi vale true, false altrimenti. Se il primo operando vale true il secondo non valutato. Gli operatori di confronto sono: == : uguaglianza != : disuguaglianza > : maggiore >= : maggiore o uguale < : minore

<= : minore o uguale Come gi detto, gli operandi degli operatori di confronto devono essere dello stesso tipo. Nel caso delluguaglianza, loperatore restituisce true se i valori dei due operandi sono uguali, false altrimenti. Loperatore di disuguaglianza si comporta in maniera simmetricamente opposta. Loperatore maggiore restituisce true se il valore del primo operando maggiore di quello del secondo, false altrimenti. Loperatore di maggiore o uguale leggermente diverso, in quanto restituisce true se il valore del primo operando maggiore o uguale a quello del secondo, false altrimenti. Gli altri due operatori si comportano in maniera simmetricamente diversa. La relazione di ordinamento per i numeri quella usuale, mentre per i booleani si assume che true sia maggiore di false. Per le stringhe vale la relazione di ordinamento lessicografico , basata sulla relazione di ordinamento alfanumerico, in cui le lettere minuscole e quelle maiuscole sono ordinate secondo lalfabeto inglese, tutte le maiuscole precedono le minuscole, le cifre numeriche sono ordinate secondo il loro valore, tutte le cifre numeriche precedono tutte le lettere. Lordinamento lessicografico prevede che una stringa a minore di una stringa b se il primo carattere di a minore del primo carattere di b, secondo la relazione di ordinamento alfanumerico. Se i due caratteri sono uguali si passa al carattere successivo e cos via. Ad esempio, la stringa "alfa" minore sia di "beta" che di "alfio".

27

Programmazione in JavaScript

Lunico operatore sulle stringhe l operatore di concatenazione, rappresentato dal simbolo +. un operatore binario che restituisce la giustapposizione di due stringhe. Ad esempio, il valore di "Java" + "Script" "JavaScript".

4.2 Valutazione delle espressioni

La valutazione di unespressione avviene secondo regole ben precise. Si valutano prima le espressioni pi interne e, utilizzando i valori ottenuti, si valutano le altre. Al termine di questo processo si ottiene il valore dellespressione. Lordine di valutazione delle espressioni pu essere alterato, tenendo in considerazione la precedenza degli operatori. Gli operatori con una precedenza pi alta sono valutati prima degli altri. A parit di precedenza si valuta loperatore pi a sinistra. Queste due regole rendono univoca la valutazione di unespressione, evitando possibili ambiguit. Ad esempio, il valore dellespressione 2 + 3 * 4 pu essere calcolato in due modi diversi. Un modo prevede il calcolo della somma tra 2 e 3 (risultato 5) e poi il prodotto tra 5 e 4 (risultato 20). Un altro, invece, prevede prima il prodotto tra 3 e 4 (risultato 12) e poi la somma tra 2 e 12 (risultato 14). Dando precedenza alloperatore di moltiplicazione rispetto a quello di addizione, si elimina questa ambiguit: il valore dellespressione 2 + 3 * 4 univocamente determinato ed 14. La precedenza degli operatori la seguente, in ordine di precedenza maggiore: segno negativo, segno positivo, negazione moltiplicazione, divisione, modulo, congiunzione, disgiunzione addizione, sottrazione

operatori di confronto. Le parentesi tonde permettono di alterare arbitrariamente lordine di valutazione determinato dalla priorit degli operatori. Ad esempio, il valore dellespressione (2 + 3) * 4 20 anzich 14.

28

Programmazione in JavaScript

4.3 Casi particolari

Laddizione e la moltiplicazione possono dare come risultato il valore Infinity che rappresenta un numero troppo grande per essere rappresentato. Nel caso della moltiplicazione questo valore si pu ottenere valutando lespressione 1E308 * 2 oppure dividendo per zero un numero intero. Il valore Infinity, che rappresenta un numero troppo piccolo per essere rappresentato, si ottiene valutando lespressione 1E308 * 2 oppure dividendo per zero un numero negativo. Il modulo si basa su una versione leggermente modificata della definizione euclidea della divisione, in cui il resto sempre un numero positivo. Se il primo operando negativo il risultato negativo. Ad esempio, valutando lespressione 10%3 si ottiene il valore 1.

4.4 Conversione implicita

Gli operatori numerici assumono che i due operandi siano numerici. Cosa succede se uno di questi operandi appartiene a un altro tipo? La risposta articolata e si basa sul concetto di conversione implicita di tipo. Affrontiamo questo argomento per tutti gli operatori. Un valore booleano che compare come operando di un operatore numerico convertito in un numero. In particolare, il valore true convertito nel valore 1, il valore false convertito nel valore zero. La valutazione dellespressione 1 + true ha come risultato 2, la valutazione dellespressione 1 + false ha come risultato 1. Se una stringa compare come operando di un operatore numerico, di norma il risultato il valore NaN (Not a number). Tuttavia, se la stringa rappresenta un numero, loperatore converte la stringa nel numero corrispondente ed effettua correttamente loperazione, restituendo un numero. Ad esempio, la valutazione dellespressione 2 * '2' restituisce il valore 4, anzich NaN. Loperatore di addizione introduce unulteriore regola: se uno dei due operandi una stringa che non rappresenta un numero, il risultato una stringa ottenuta giustapponendo il valore del primo operando con quello del secondo. Ad esempio, la valutazione dellespressione 200E3 + 'a' restituisce il valore 200000a.

29

Programmazione in JavaScript

Se loperatore booleano di negazione ha come operando un numero diverso da zero o un carattere il risultato false. Se il valore delloperando zero il risultato true. Diverso il comportamento degli operatori di congiunzione e di disgiunzione. Se il primo operando delloperatore di congiunzione (disgiunzione) vale false (true) il risultato sempre false (true). Se il primo operando delloperatore di congiunzione (disgiunzione) vale true (false) il risultato sempre il valore del secondo operando.

4.5 Esercizi
I seguenti problemi devono essere risolti usando costanti e operatori e visualizzando il risultato con il comando di stampa. 1. Calcolare la somma dei primi quattro multipli di 13. 2. Verificare se la somma dei primi sette numeri primi maggiore della somma delle prime tre potenze di due. 3. Verificare se 135 dispari, 147 pari, 12 dispari, 200 pari. 4. Calcolare larea di un triangolo rettangolo i cui cateti sono 23 e 17. 5. Calcolare la circonferenza di un cerchio il cui raggio 14. 6. Calcolare larea di un cerchio il cui diametro 47. 7. Calcolare larea di un trapezio la cui base maggiore 48, quella minore 25 e laltezza 13. 8. Verificare se larea di un quadrato di lato quattro minore dellarea di un cerchio di raggio tre. 9. Calcolare il numero dei minuti di una giornata, di una settimana, di un mese di 30 giorni, di un anno non bisestile. 10. Verificare se conviene acquistare una camicia che costa 63 in un negozio che applica uno sconto fisso di 10 o in un altro che applica uno sconto del 17%.

30

Programmazione in JavaScript

Variabili e assegnamento

Per descrivere un calcolo necessario tener traccia dei valori intermedi, memorizzandoli per usarli in seguito. Nei linguaggi di programmazione questo ruolo svolto dalle variabili. In JavaScript, come negli altri linguaggi di programmazione imperativi, una variabile un identificatore a cui associato un valore.
<Identificatore> ::= <CarIniziale> | <CarIniziale> <Caratteri> ::= <Lettera> | _ | $ ::= <CarNonIniziale> | <CarNonIniziale> <Caratteri> ::= | | | <Lettera> <Cifra> _ $

<CarIniziale>

<Caratteri>

<CarNonIniziale>

Un identificatore formato da una sequenza di lettere e cifre e dai caratteri _ e $. Questa sequenza deve iniziare con una lettera o con uno dei caratteri _ e $ ma non pu iniziare con una cifra. Non tutti gli identificatori sono utilizzabili come variabili. In JavaScript, infatti, le parole riservate non possono essere usate come variabili. Le parole riservate usate nel libro sono le seguenti.

31

Programmazione in JavaScript

break, case, default, else, false, for, function, if, in, new, null, return, switch, this, true, var, while

La dichiarazione di variabile un comando che definisce una variabile associandole un identificatore. Quando la dichiarazione comprende lassegnamento di un valore si parla pi propriamente di inizializzazione. Se la variabile non stata inizializzata il suo valore il valore speciale undefined.
<Dichiarazione> <DicVariabile> ::= <DicVariabile> ::= var <Identificatore>; | var <Identificatore> = <Espressione>;

5.1 Dichiarazione di costante

Una convenzione molto diffusa prevede che le costanti definite in un programma abbiano un identificatore formato solo da lettere maiuscole, da numeri e dal carattere _. Ci permette di distinguerle immediatamente dalle variabili. La costante (pi greco), il cui valore approssimato alle prime dieci cifre decimali 3,1415926535, pu essere dichiarata come una variabile con un valore iniziale.
var PI_GRECO = 3,1415926535

5.2 Variabili ed espressioni

Le variabili possono essere usate nelle espressioni. In particolare, una variabile unespressione semplice il cui valore proprio quello della variabile.
<Espressione> ::= <Identificatore>

La possibilit di dichiarare variabili non inizializzate, il cui valore undefined, richiede di definire il comportamento degli operatori per trattare questo caso particolare. Se almeno uno degli operandi di un operatore numerico il valore undefined, il risultato sar NaN. Molto pi complessa la casistica relativa agli operatori booleani. Se loperatore di negazione ha un operando che vale undefined il risultato true. Se gli operandi delloperatore di congiunzione valgono

32

Programmazione in JavaScript

undefined il risultato undefined, tranne quando il primo operando vale false, nel qual caso il risultato false. Se il primo operando delloperatore di disgiunzione vale undefined il risultato true se il secondo operando vale true, false se il secondo operando vale false. Se, invece, il primo operando vale false il risultato undefined. Infine, se entrambi gli operandi delloperatore di congiunzione o di quello di disgiunzione valgono undefined, il risultato undefined. Gli operatori di confronto seguono una logica pi semplice. Se solo un operando vale undefined, il risultato sempre false, tranne nel caso delloperatore di disuguaglianza, per il quale il risultato true. Se i due operandi valgono undefined, il risultato sempre false.

5.3 Comando di assegnamento

Il comando di assegnamento modifica il valore associato a una variabile, assegnandole quello di unespressione.
<ComandoSemplice> ::= <Assegnamento> <Assegnamento> ::= <Identificatore> = <Espressione>;

Vediamo alcuni esempi di dichiarazione di variabile, di assegnamento e di uso delle variabili nelle espressioni.
var x = 11; print(x); var y; print(y); y = 7; print(x + y); x = y + 10; print(x); x = x + 10; print(x);

La prima dichiarazione definisce la variabile x e le assegna il valore 11. Il comando di stampa successivo stampa il valore di x. La seconda dichiarazione definisce la variabile y, senza assegnarle un valore iniziale. Pertanto, il comando di stampa successivo stampa il valore undefined. Il primo comando di assegnamento assegna il valore 7 a y. Il

33

Programmazione in JavaScript

successivo comando stampa il valore 18, ottenuto sommando 11 a 7. Il secondo comando di assegnamento assegna a x la somma del valore di y e di 10, in questo caso 17, come si pu verificare osservando leffetto del successivo comando di stampa. Lultimo comando di assegnamento assegna a x il suo valore sommato a 10, in questo caso 27, risultato verificabile osservando leffetto dellultimo comando di stampa.

5.4 Abbreviazioni del comando di assegnamento

In JavaScript possibile usare alcune abbreviazioni per incrementare o decrementare il valore di una variabile. Il comando i = i + 1 equivalente a i++ e il comando i = i 1 equivalente a i. Unaltra caratteristica di JavaScript la possibilit di abbreviare la forma del comando di assegnamento, quando riferito a una variabile. Per incrementare il valore della variabile x del valore della variabile i, anzich scrivere x = x + i possibile usare la forma pi compatta x += i, il cui significato : applica loperatore + alla variabile x e allespressione alla destra del segno = e assegna il risultato alla variabile x. Lo stesso ragionamento applicabile agli altri operatori numerici.
<Assegnamento> ::= | | | | | | <Identificatore>++; <Identificatore>--; <Identificatore> += <Identificatore> -= <Identificatore> *= <Identificatore> /= <Identificatore> %=

<Espressione>; <Espressione>; <Espressione>; <Espressione>; <Espressione>;

5.5 Esercizi
Risolvere i seguenti problemi utilizzando variabili, costanti e operatori. Il risultato deve essere visualizzato mediante il comando di stampa print, disponibile nellambiente EasyJS. 1. Calcolare il costo di un viaggio in automobile, sapendo che la lunghezza 750 Km, che il consumo di gasolio 3,2 litri ogni

34

Programmazione in JavaScript

100 Km, che un litro di gasolio costa 1,432 , che due terzi del percorso prevedono un pedaggio pari a 1,2 ogni 10 Km. 2. Calcolare il costo di una telefonata, sapendo che la durata pari a 4 minuti e 23 secondi, che il costo alla chiamata pari a 0,15 , che i primi 30 secondi sono gratis, che il resto della telefonata costa 0,24 al minuto. 3. Calcolare il costo di un biglietto aereo acquistato una settimana prima della partenza, sapendo che il costo di base pari a 200 (se acquistato il giorno della partenza) e che questo costo diminuisce del 2,3% al giorno (se acquistato prima del giorno della partenza). 4. Calcolare il costo di un prodotto usando la seguente formula costo= prezzo prezzo0,20 sconto e sapendo che il prezzo 100 e lo sconto 30 . 5. Calcolare la rata mensile di un mutuo annuale usando la seguente formula importo rata = 1 tasso 12 e sapendo che limporto annuale 240 e il tasso il 5%.

35

Programmazione in JavaScript

Funzioni

Una dichiarazione di funzione un comando che definisce un identificatore a cui associata una funzione. La definizione della funzione comprende unintestazione e un blocco di comandi.
<Dichiarazione> ::= <DicFunzione> <DicFunzione> ::= function <Identificatore>() <Blocco> | function <Identificatore>(<Parametri>) <Blocco> ::= <Identificatore> | <Identificatore>, <Parametri>

<Parametri>

Lintestazione della funzione definisce la lista dei suoi parametri (chiamati anche parametri formali) racchiusi tra due parentesi tonde. La lista dei parametri formali pu essere vuota. Come esempio, definiamo la funzione stampaSomma che stampa la somma dei suoi parametri.
function stampaSomma(n, m) { print(n + m); }

Dopo aver dichiarato una funzione, possibile usarla in un punto qualunque del programma. Il punto in cui si usa una funzione detto punto di chiamata o di invocazione. Quando si invoca la funzione, si assegna a ciascun parametro formale il valore dellespressione utilizzata nel punto di chiamata e poi si esegue il blocco di comandi. Le espressioni utilizzate nel punto di invocazione (chiamate anche parametri attuali) sono valutate prima dellesecuzione del blocco di

37

Programmazione in JavaScript

comandi associato alla funzione e il loro valore associato ai parametri formali. Questo procedimento detto passaggio dei parametri. Lassociazione tra i parametri formali e i valori dei parametri attuali avviene con il sistema posizionale, ovvero ad ogni parametro formale associato il valore del parametro attuale che occupa la medesima posizione nella rispettiva lista. Il primo parametro attuale dunque legato al primo parametro formale, il secondo parametro attuale legato al secondo parametro formale e cos via.
<ComandoSemplice> ::= <Invocazione> <Invocazione> ::= <Identificatore> (); | <Identificatore> (<Espressioni>); ::= <Espressione> | <Espressione>, <Espressioni>

<Espressioni>

Gli esempi che seguono mostrano due invocazioni di funzione con un numero di parametri attuali pari a quello dei parametri formali. Leffetto delle invocazioni , rispettivamente, stampare prima il valore 5 e poi il valore 15.
stampaSomma(10, -5); stampaSomma(10, 5);

Normalmente il numero di parametri attuali uguale a quello dei parametri formali definiti nella dichiarazione. Se il numero dei parametri attuali diverso da quello dei parametri formali, non si ottiene un errore, ma: se il numero dei parametri attuali minore di quello dei parametri formali, il valore undefined assegnato a tutti i parametri formali che non hanno un corrispondente parametro attuale, ovvero agli ultimi della lista;

se il numero di parametri attuali maggiore di quello dei parametri formali, i parametri attuali in eccesso sono ignorati. Una funzione pu restituire un valore al termine della propria esecuzione. possibile invocare una funzione nelle espressioni o assegnare

38

Programmazione in JavaScript

a una variabile il risultato dellinvocazione di una funzione. Per restituire un valore una funzione deve eseguire il comando return.
<ComandoSemplice> ::= return <Espressione>; <Espressione> ::= <Identificatore>() | <Identificatore>(<espressioni>)

Come esempio, definiamo una funzione che restituisce la somma dei suoi parametri.
function calcolaSomma(x, y) { return x + y; }

La funzione pu essere invocata in un qualunque punto di un programma in cui lecito usare unespressione, ad esempio in un comando di assegnamento.
var x = 1; var y = 2; x = calcolaSomma(x, y);

Le funzioni che restituiscono un valore booleano sono chiamate predicati. Come esempio, definiamo il predicato compreso che verifica se x appartiene allintervallo [a, b)5.
function compreso(x, a, b) { return (x >= a) && (x < b); }

6.1 Visibilit
Quando si dichiara una variabile o una funzione necessario tenere in debita considerazione la loro visibilit. In pratica necessario sapere quali variabili sono definite nel programma e quali sono, invece, definite nel corpo della funzione. Il modello adottato da JavaScript complesso, essendo basato sullesecuzione del programma ma anche
5 Lintervallo [a, b) formato dai numeri maggiori o uguali di a e minori di b. Per convenzione si assume che a sia minore o uguale di b. Quando a uguale a b lintervallo vuoto.

39

Programmazione in JavaScript

sulla sua struttura sintattica. Ai fini di questo libro, tuttavia, si ritiene sufficiente presentare una versione semplificata del modello, versione che permette di spiegare il comportamento degli esempi riportati. Un ambiente formato da un insieme di variabili e di funzioni. In un ambiente non possono esserci due variabili che hanno lo stesso identificatore, altrimenti non sarebbe possibile sapere quale dei due dovr essere utilizzato al momento della valutazione della variabile. Allo stesso modo non ci possono essere due funzioni con lo stesso identificatore. Un ambiente modificato dalle dichiarazioni, che introducono nuove variabili e nuove funzioni, e dai comandi, che modificano il valore delle variabili presenti nellambiente. Ogni punto di un programma ha un ambiente, formato dalle variabili definite in quel punto. Al contrario delle variabili, tutte le funzioni dichiarate in un programma fanno parte del suo ambiente. Ogni variabile visibile in una porzione ben definita del programma in cui essa dichiarata. In particolare, la variabile visibile dal punto in cui dichiarata la prima volta (o assegnata la prima volta) fino al termine del programma. Una variabile visibile solo in alcune porzioni del programma detta variabile locale. Una variabile la cui visibilit lintero programma detta variabile globale. Una variabile globale pu essere nascosta da una variabile locale che ha lo stesso identificatore. Un variabile nascosta definita, ma non accessibile. In JavaScript le uniche variabili locali sono quelle dichiarate nel corpo delle funzioni. I parametri formali di una funzione sono trattati come variabili dichiarate al suo interno e quindi locali. Tutte le altre variabili sono globali.

40

Programmazione in JavaScript

var risultato = 0; function calcolaSomma(x, y) { var somma = 0; somma = x + y; return somma; } risultato = calcolaSomma(2, 4);

In questo esempio compaiono le variabili x, y, somma e risultato. Le variabili x, y e somma sono locali al corpo della funzione calcolaSomma. La variabile risultato globale. In base alla definizione di visibilit, le variabili locali sono utilizzabili solo nel corpo di calcolaSomma, mentre la variabile globale risultato utilizzabile sia nel corpo di calcolaSomma, sia nel resto del programma. Il seguente programma sfrutta la visibilit delle variabili per ottenere lo stesso risultato.
var risultato = 0; function calcolaSomma(x, y) { var somma = 0; somma = x + y; risultato = somma; } calcolaSomma(2, 4);

Questo esempio mostra come sia possibile modificare il valore di una variabile globale allinterno del corpo di una funzione. Lutilit di questa tecnica sar apprezzata nella seconda parte del libro, quando presenteremo problemi che richiedono soluzioni complesse.

6.2 Funzioni predefinite

JavaScript mette a disposizione numerose funzioni matematiche di uso corrente, chiamate funzioni predefinite. Un elenco non esaustivo di queste funzioni il seguente: Math.abs (x): restituisce il valore assoluto di x, Math.ceil (x): restituisce il primo intero pi grande di x, Math.floor (x): restituisce il primo intero pi piccolo di x,

41

Programmazione in JavaScript

Math.log (x): restituisce il logaritmo naturale in base e di x, Math.pow (x, y): restituisce x elevato alla potenza di y, Math.random (): restituisce un numero casuale compreso tra zero e uno, Math.round (x): restituisce l'intero pi vicino a x, Math.sqrt (x): restituisce la radice quadrata di x.

6.3 Esercizi
1. Definire in JavaScript un predicato che verifica se lintersezione dellintervallo [a, b) con lintervallo [c, d) vuota. Il predicato ha quattro parametri: a, b, c, d. Invocare il predicato con i seguenti valori: 2, 4, 5, 7; 2, 4, 4, 7; 2, 4, 3, 7; 5, 7, 2, 4; 4, 7, 2, 4; 3, 7, 2, 4. 2. Lequazione di secondo grado ax2 + bx + c = 0 ha due radici [Wikipedia, alla voce Equazione di secondo grado]: b b2 4 ac 2a Definire in JavaScript una funzione che stampa le radici di unequazione i cui coefficienti sono a, b e c (con a diverso da zero). La funzione ha tre parametri:a, b, c. Invocare la funzione con i seguenti valori: 1, -5, 6; 1, 8, 16; 1, 2, 3. 3. Definire in JavaScript una funzione che calcola e restituisce la somma delle cifre di un intero che appartiene allintervallo [ 0, 100). La funzione ha un parametro: n. Invocare la funzione con i seguenti valori: 0, 1, 23, 99. x 1 / 2=

42

Programmazione in JavaScript

Comandi condizionali

Finora abbiamo definito la sintassi di JavaScript che permette di scrivere programmi molto semplici, formati da una sequenza di dichiarazioni di variabili, di assegnamenti e di comandi di stampa. Con questi programmi possibile affrontare solo problemi la cui soluzione richiede una sequenza di calcoli. Problemi pi complessi richiedono luso di comandi composti. In questo capitolo presentiamo i comandi condizionali.

7.1 Comando condizionale

Il comando if un comando composto che consente di scegliere i comandi da eseguire in base al valore di unespressione booleana.
<ComandoComposto> ::= <If> | <Blocco> <If> ::= if (<Espressione>) <Blocco> | if (<Espressione>) <Blocco> else <Blocco> ::= {<Comandi>}

<Blocco>

Il comando inizia con la parola riservata if, seguita da unespressione tra parentesi tonde, detta condizione o guardia. Il valore della condizione deve essere un booleano. Se la condizione vale true (la condizione vera), si esegue il primo blocco di comandi, detto blocco. Se la condizione vale false (la condizione falsa) ci possono essere due casi: se presente ed preceduto dalla parola riservata else, viene eseguito il secondo blocco, altrimenti non si esegue alcun comando.

43

Programmazione in JavaScript

Un blocco costituito da una sequenza di comandi racchiusa tra parentesi graffe. Un blocco considerato un comando unico e permette di utilizzare una sequenza di comandi dove normalmente sarebbe possibile usarne solo uno. Nel seguito mostriamo un programma che usa due comandi condizionali. Nel primo comando la condizione vera se il valore della variabile x maggiore di zero: in tal caso il suo valore decrementato di uno. Non prevista alcuna azione nel caso in cui il valore di x sia minore o uguale a zero. Il secondo comando un esempio che mostra come sia possibile assegnare a x un valore maggiore di zero, indipendentemente dal valore di y. Se il valore di y minore di zero e quindi la condizione vera, a x assegnato tale valore cambiato di segno (e dunque positivo). In caso contrario a x assegnato il valore di y.
if (x > 0){ x--; } if (y < 0){ x = -y; } else { x = y; }

I comandi condizionali possono essere annidati per effettuare una scelta tra pi di due possibilit. Il seguente esempio mostra due comandi condizionali annidati e mostra anche come sia possibile evidenziare la struttura di un programma mediante lindentazione.

44

Programmazione in JavaScript

if (a < 6){ b = 1; } else { if (a < 8){ b = 2; } else { b = 3; } }

Unaltra indentazione la seguente, preferibile alla prima quando sono presenti pi di due alternative.
if (a < 6){ b = 1; } else if (a < 8){ b = 2; } else { b = 3; }

7.2 Comando di scelta multipla

Il comando di scelta multipla un comando composto che rappresenta unalternativa a una sequenza di comandi condizionali annidati. Si usa quando si devono eseguire comandi diversi, associati a determinati valori di unespressione.

45

Programmazione in JavaScript

<ComandoComposto> ::=<Switch> <Switch> ::= switch (<Espressione>) {<Alternative>} | switch (<Espressione>) {<Alternative> default: <Comandi>} ::= case <Costante>: <Comandi> ::= <Alternativa> | <Alternativa> <Alternative>

<Alternativa> <Alternative>

<ComandoSemplice> ::= break;

Lespressione (chiamata anche selettore) valutata e il risultato confrontato con quello delle costanti di ciascuna alternativa, partendo dalla prima. Se il confronto ha esito positivo per unalternativa, si eseguono i comandi ad essa associati e quelli di tutte le alternative successive. Se il confronto ha esito negativo per tutte le alternative, non si esegue alcun comando.
switch (x) { case 5 : y += 5; case 6 : z += 6; }

In questo esempio, se il valore dellespressione x uguale a 6, la variabile z incrementata di 6. Se il valore 5, la variabile y incrementata di 5 e la variabile z incrementata di 6. Se il valore diverso da 5 o da 6, non si esegue alcun comando. In molti casi preferibile che dopo lesecuzione del codice associato a unalternativa lesecuzione passi al comando successivo al comando di selezione multipla. Per ottenere questo comportamento lultimo comando di quelli associati a unalternativa deve essere il comando break.

46

Programmazione in JavaScript

switch (x) { case 5 : y += 5; break; case 6 : z += 6; break; }

Con questa modifica, anche quando il valore del selettore uguale a 5, la variabile z non incrementata. possibile inserire, rigorosamente per ultima, unalternativa speciale i cui comandi sono eseguiti quando il confronto ha avuto esito negativo per tutte le alternative.
switch (x) case 5 case 6 default } { : y += 5; break; : z += 6; break; : z++;

Con questa modifica, in tutti i casi in cui il valore del selettore diverso da 5 o da 6, la variabile z incrementata di uno.

7.3 Anno bisestile

Lanno bisestile un anno solare in cui il mese di febbraio ha 29 giorni anzich 28. Questa variazione evita lo slittamento delle stagioni che ogni quattro anni accumulerebbero un giorno in pi di ritardo. Nel calendario giuliano bisestile un anno ogni quattro (quelli la cui numerazione divisibile per quattro). Nel calendario gregoriano si mantiene questa variazione ma si eliminano tre anni bisestili ogni 400 anni [Wikipedia, alla voce anno bisestile]. Il predicato bisestile verifica se un anno bisestile.

47

Programmazione in JavaScript

function bisestile(anno) { if (anno % 400 == 0) { return true; } else if (anno % 100 == 0) { return false; } else if (anno % 4 == 0) { return true; } else { return false; } }

Una versione pi semplice del predicato bisestile non fa uso del comando condizionale.
function bisestile(anno) { return (anno % 400 == 0) || ((anno % 4 == 0) && (anno % 100 != 0)); }

7.4 Esercizi
1. I giorni di un anno possono essere numerati consecutivamente, assumendo che al primo gennaio sia assegnato il valore 1 e al trentuno dicembre il valore 365 negli anni non bisestili o 366 negli anni bisestili. Definire in JavaScript una funzione che restituisce il numero assegnato a un giorno dellanno, assumendo che i mesi siano numerati da 1 a 12. La funzione ha tre parametri: anno, mese, giorno. Invocare la funzione con i seguenti valori: 1957, 4, 25; 2004, 11, 7; 2000, 12, 31; 2012, 2, 29. 2. Definire in JavaScript una funzione che calcola e restituisce una stringa che rappresenta il valore in lettere di un intero che appartiene allintervallo [0, 100). La funzione ha un parametro: n. Invocare la funzione con i seguenti valori: 0, 1, 12, 21, 32, 43, 70, 88, 90.

48

Programmazione in JavaScript

3. Definire in JavaScript una funzione che calcola il tipo di un triangolo (equilatero, isoscele, rettangolo, scaleno) in base alla lunghezza dei suoi lati. La funzione restituisce una stringa che rappresenta il tipo del triangolo e ha tre parametri : a, b, c. Invocare la funzione con i seguenti valori: 3, 3, 3; 3, 4, 4; 3, 4, 5; 3, 4, 6.

49

Programmazione in JavaScript

Comandi iterativi

Molti problemi richiedono un calcolo che deve essere ripetuto pi volte per ottenere il risultato finale. In JavaScript la ripetizione di un calcolo si ottiene utilizzando un comando iterativo.

8.1 Comando iterativo determinato

Il comando iterativo determinato esegue un blocco di comandi un numero determinato di volte. Il comando formato da unintestazione che contiene un comando di inizializzazione di una variabile (chiamata anche indice di iterazione) che conta il numero delle iterazioni, unespressione che controlla quante volte il blocco di comandi eseguito, un comando che aggiorna il valore dellindice di iterazione. La forma sintattica del comando iterativo determinato molto generale ma in questo libro ne adotteremo una che ci permette di risolvere i problemi che richiedono luso di uniterazione determinata.
<ComandoComposto> ::= <For> <For> ::= for (<Comando>; <Espressione>; <Comando>) <Blocco>

La seguente funzione calcola la somma dei numeri da uno a n.

function somma(n) { var s = 0; for (var i = 1; i <= n; i++) { s += i; } return s; }

La funzione pu essere definita usando un comando iterativo determinato che somma i numeri da n a uno.

51

Programmazione in JavaScript

function somma(n) { var s = 0; for (var i = n; i > 0; i--) { s += i; } return s; }

8.2 Comando iterativo indeterminato

Il comando iterativo indeterminato utilizzato quando un blocco di comandi deve essere eseguito pi volte, ma non possibile sapere a priori quante. Il comando formato da unespressione, chiamata guardia, e un blocco di comandi.
<ComandoComposto> ::= <While> <While> ::= while (<Espressione>) <Blocco>

Lesecuzione di un comando iterativo indeterminato segue il seguente schema: la guardia valutata ad ogni iterazione, prima di eseguire il blocco di comandi; se il valore della guardia true (cio se la guardia verificata), il blocco eseguito e poi si ripete il ciclo;

se il valore della guardia false (cio se la guardia non verificata), il blocco non eseguito e lesecuzione dellintero comando termina. In JavaScript un comando iterativo determinato pu sempre essere espresso mediante un comando iterativo indeterminato (ma non viceversa).

52

Programmazione in JavaScript

function sommaA(n) { var s = 0; var i = 1; while (i <= n) { s += i; i++; } return s; }

Da un punto di vista pratico bene utilizzare il comando iterativo determinato quando il numero di volte che sar eseguito il blocco di comandi noto a priori, usando il comando iterativo indeterminato in tutti gli altri casi.

8.3 Primalit
Un numero primo un numero naturale maggiore di uno, divisibile solamente per uno e per s stesso [Wikipedia, alla voce Numero primo]. I primi dieci numeri primi sono 2, 3, 5, 7, 11, 13, 17, 19, 23, 29. Dato un numero naturale maggiore di uno possibile verificare se primo, cio se soddisfa la condizione di primalit, definendo in JavaScript il predicato ePrimo basato su un comando di iterazione determinata.
function ePrimo var c = 0; for (var i = if (n % i c++; } } return (c == } (n) { 2; i < n; i++) { == 0) {

0);

Una soluzione alternativa si basa su una variabile booleana.

53

Programmazione in JavaScript

function ePrimo (n) { var b = true; for (var i = 2; i < n; i++) { b = b && (n % i != 0); } return b; }

Lespressione usata per aggiornare il valore della variabile booleana pu essere utilizzata come guardia di un comando iterativo indeterminato.
function ePrimo (n) { var i = 2; while ((i < n) && ((n % i) != 0)) { i++; } return (i == n); }

La soluzione basata sul comando iterativo indeterminato pu essere migliorata tenendo conto del fatto che se n primo allora non esiste un divisore d di n minore della sua radice quadrata: d < n d 2< n
function ePrimo (n) { var i = 2; while ((i * i < n) && ((n % i) != 0)) { i++; } return (i * i > n); }

8.4 Radice quadrata

La radice quadrata di un numero razionale non negativo z un numero x, anchesso non negativo, che soddisfa lequazione
x =z
2

54

Programmazione in JavaScript

[Wikipedia, alla voce Radice quadrata]. Ad esempio, la radice quadrata di 2 1,4142135623. La radice quadrata intera di un numero razionale non negativo z un intero positivo x che soddisfa lequazione x z x 1
2 2

Ad esempio, la radice quadrata intera di 5 2. In JavaScript si pu definire una funzione che calcola la radice quadrata intera di un numero razionale non negativo.
function radiceQuadrata(z) { var x = 0; while (x * x <= z) { x++; } return x - 1; }

8.5 Esercizi
1. Un anno perfetto per una persona se un multiplo della sua et in quellanno, assumendo come et massima cento anni. Ad esempio gli anni perfetti per chi nato nel 1984 sono nove: 1985, 1986, 1988, 1992, 2000, 2015, 2016, 2046, 2048. Definire in JavaScript una funzione che stampa gli anni perfetti relativi a un anno di nascita. La funzione ha un parametro: annoDiNascita. Invocare la funzione con i seguenti valori: 1984, 1990, 1992, 2000, 2009. 2. In matematica, con reciproco di un numero x si indica il numero che moltiplicato per x d come risultato 1. Definire in JavaScript una funzione che calcola e restituisce la somma dei reciproci dei primi n numeri interi maggiori di zero. La funzione ha un parametro: n. Invocare la funzione con i seguenti valori: 1, 2, 4, 7.

55

Programmazione in JavaScript

3. Definire in JavaScript una funzione che stampa, se esistono, le radici intere di unequazione di secondo grado di coefficienti a, b, c comprese nellintervallo [l, u). La funzione ha i seguenti parametri: a, b, c, l, u. Invocare la funzione con i seguenti valori: 1, 2, 8, 1, 5 1, 2, 8, 5, 5 1, 2, 8, 5, 10.

56

Programmazione in JavaScript

Array

In JavaScript, oltre ai numeri, i booleani e i caratteri, esistono altri tipi di dato che, per come sono strutturati, sono chiamati tipi composti, per differenziarli da quelli primitivi. In questo capitolo presentiamo gli array, un tipo di dato indispensabile per la soluzione di numerosi problemi.

9.1 Elementi e indici di un array

Un array un tipo composto, formato da una sequenza numerata di valori omogenei tra loro6. Ogni valore detto elemento dellarray e il numero a esso associato detto indice. Il primo elemento di un array ha sempre indice zero. Per dichiarare un array necessario indicarne il nome, un identificatore, e un valore determinato dallespressione a destra del segno di assegnamento. La categoria sintattica delle espressioni cos estesa.
<Espressione> ::= [] | [<Espressioni>]

Vediamo alcuni esempi di dichiarazione di array.

var a = []; var b = [12]; var c = ['f', 'u', 'n', 'e']

Nel primo caso si ottiene un array vuoto. Nel secondo caso un array con un solo elemento, 12. Nel terzo caso un array con quattro elementi, i caratteri f, u, n, ed e.
6 Come vedremo nella seconda parte del libro, in JavaScript gli array possono essere disomogenei. Per semplicit di presentazione, nella prima parte assumiamo che siano omogenei.

57

Programmazione in JavaScript

Una volta creato un array, si pu accedere ai suoi elementi per utilizzarne i valori. Lespressione tra parentesi quadre deve avere un valore maggiore o uguale a zero.
<Espressione> ::= <Identificatore>[<Espressione>]

Vediamo un esempio in cui si dichiara un array e si utilizzano i suoi elementi.

var a = [2, 3, 5, 7, 11]; print(a[0] + a[1] + a[2] + a[3] + a[4]);

Il valore degli elementi di un array pu essere modificato mediante il comando di assegnamento. Anche in questo caso lespressione tra parentesi quadre deve avere un valore maggiore o uguale a zero.
<Assegnamento> ::= <Identificatore>[<Espressione>] = <Espressione>;

Vediamo un esempio in cui si dichiara larray a e si modifica il secondo elemento, il cui indice uno.
var a = [2, 3, 5, 7, 11]; a[1] = 0; print(a[0] + a[1] + a[2] + a[3] + a[4]);

Per scandire tutti gli elementi di un array in JavaScript si usa il comando di iterazione determinata. La funzione stampaElementi stampa tutti gli elementi di un array. La funzione invocata prima con un array di tre elementi e poi con uno di cinque elementi.
function stampaElementi(a) { for (i in a) { print(a[i]); } } var a1 = [2, 3, 5]; stampaElementi(a1); var a2 = [0, -9, 17, 4, 100]; stampaElementi(a2);

58

Programmazione in JavaScript

9.2 Lunghezza di un array

Come vedremo nella seconda parte, in JavaScript possibile definire oggetti, tipi di dato composti caratterizzati da un insieme di propriet e di metodi. Una propriet un valore associato a un oggetto. Per accedere al valore di una propriet si utilizza la cosiddetta notazione a punti (dot notation): loggetto seguito da un punto e dal nome della propriet. Un metodo una funzione associata a un oggetto. Anche per invocare il metodo si utilizza la notazione a punti. Maggiori dettagli su propriet e metodi saranno forniti nella seconda parte. Gli array sono oggetti predefiniti che hanno la propriet length, il cui valore pari al numero degli elementi dellarray. Questa propriet pu essere utilizzata per scandire un array, come mostrato nella funzione stampaElementi.
function stampaElementi(a) { for (var i = 0; i < a.length; i++) { print(a[i]); } }

Anche quando non si intende effettuare una scansione completa di un array spesso utile usare esplicitamente la propriet length. Ad esempio, la funzione stampaElementiIndicePari, cos definita.
function stampaElementiIndicePari(a) { for (var i = 0; i < a.length; i += 2) { print(a[i]); } }

9.3 Array dinamici

In JavaScript, a differenza di altri linguaggi di programmazione, possibile aggiungere dinamicamente nuovi elementi a un array. Per fare ci, si esegue un assegnamento allelemento che si vuole aggiungere, come se gi esistesse. Nellesempio che segue creiamo un array di quattro elementi a cui, dopo, ne aggiungiamo uno.

59

Programmazione in JavaScript

var a = [2, 3, 5, 7, 11]; a[5] = 13; print(a[0] + a[1] + a[2] + a[3] + a[4] + a[5]);

Quando si aggiunge un elemento il cui indice non immediatamente successivo a quello dellultimo elemento definito dellarray, automaticamente tutti gli elementi intermedi sono aggiunti e inizializzati con il valore undefined.
var a = [2, 3, 5, 7, 11]; a[10] = 13;

Nellesempio precedente si aggiunge lelemento di indice 10 a un array il cui ultimo elemento definito ha indice 4. Laggiunta di questo elemento provoca la creazione degli elementi di indice 5, 6, 7, 8 e 9, tutti inizializzati con il valore undefined. Per aggiungere un elemento a un array si usa il metodo push.
var a = [2, 3, 5, 7, 11]; a.push(13);

9.4 Array associativi

In JavaScript possibile utilizzare come indici di un array anche valori di tipo stringa. In questo caso si parla di array associativi. Un array associativo pu essere creato in due modi: esplicitamente, mediante lindicazione dei suoi indici e dei valori associati; implicitamente, mediante assegnamenti che creano dinamicamente larray. La creazione esplicita di un array associativo formato da tre elementi indicata nel seguito.
var a = {"alfa": 10, "beta": 20, "gamma": 30}; print(a["alfa"]); print(a["beta"]); print(a["gamma"]);

La creazione implicita dello stesso array la seguente.

60

Programmazione in JavaScript

var a = {}; a["alfa"] = 10; a["beta"] = 20; a["gamma"] = 30;

Per gli array associativi la propriet length non definita. Per scandire tutti gli elementi di un array associativo si usa una forma particolare di iterazione determinata che prevede un indice e un array. Lindice assume tutti i valori utilizzati per definire larray7.
<For> ::= for (var <Identificatore> in <Espressione>) <Blocco>

Nellesempio che segue lindice i assume, in sequenza, i valori alfa, beta e gamma.
var a = {"alfa": 10, "beta": 20, "gamma": 30}; for (var i in a) { print (i); }

9.5 Stringhe di caratteri

Un caso particolare di array costituito dalle stringhe di caratteri che in JavaScript sono oggetti predefiniti con alcune propriet e metodi. Tutto quanto detto sugli array si applica alle stringhe. In particolare, anche per le stringhe definita la propriet length, il cui valore pari al numero dei caratteri di una stringa.
var alfa = "ciao"; print(alfa.length);

Per selezionare un carattere di una stringa si utilizza la stessa notazione prevista per gli array: la posizione del carattere indicata tra parentesi quadre.
var alfa = "ciao"; print(alfa[0]); print(alfa[1]);

7 Il valore dellindice non di tipo numerico ma di tipo stringa.

61

Programmazione in JavaScript

print(alfa[2]); print(alfa[3]);

La variabile alfa inizializzata con la stringa ciao. I quattro caratteri di alfa sono stampati in sequenza. A differenza degli array, tuttavia, non possibile modificare un carattere di una stringa che, pertanto, trattata in JavaScript come una costante. Per scandire i caratteri di una stringa si usa il comando di iterazione determinata.
function stampaCaratteri(a) { for (var i = 0; i < a.length; i++) { print(a[i]); } } function stampaElementiIndicePari(a) { for (var i = 0; i < a.length; i += 2) { print(a[i]); } }

9.6 Ricerca lineare

Molti problemi di programmazione che prevedono luso di array possono essere risolti utilizzando uno schema chiamato ricerca lineare, che pu essere certa o incerta. Lo schema di ricerca lineare certa si utilizza quando si ha la certezza a priori che il valore cercato sia presente nellarray. Negli altri casi si utilizza lo schema di ricerca lineare incerta. Lo schema di ricerca lineare certa si basa su uniterazione indeterminata in cui la guardia formata da ununica espressione logica che vera se la condizione di ricerca non soddisfatta. Un esempio, molto semplice, di problema che pu essere risolto con questo schema il seguente: dato un array a, definire una funzione che calcola e restituisce il valore dellindice di un elemento di a che vale k, sapendo a priori che un tale elemento appartiene allarray.

62

Programmazione in JavaScript

function indice(a, k) { var i = 0; while ((i < a.length) && (a[i] != k)) { i++; } return i; }

Anche lo schema di ricerca lineare incerta si basa su uniterazione indeterminata e da una guardia formata da due espressioni logiche in congiunzione tra loro: la prima vera se il valore dellindice valido per larray (cio se appartiene allintervallo compreso tra zero e la lunghezza dellarray meno uno), la seconda vera se la condizione di ricerca non soddisfatta. Un problema che pu essere risolto usando questo schema il seguente: definire una funzione che calcola e restituisce il valore dellindice di un elemento di a che vale k, senza sapere a priori che un tale elemento appartiene allarray.
function appartiene(a, k) { var i = 0; while ((i < a.length) && (a[i] != k)) { i++; } return (i < a.length); }

Alcuni problemi si incontrano spesso in varie formulazioni. La loro soluzione considerata un classico della programmazione. Di seguito presentiamo alcuni dei pi conosciuti.

9.7 Minimo e massimo di un array

Dato un array a (non vuoto) di numeri, il minimo di a quellelemento di a minore o uguale a tutti gli altri elementi di a. Analogamente, il massimo di a quellelemento di a maggiore o uguale a tutti gli altri elementi di a. La funzione minimo calcola e restituisce il minimo di a.

63

Programmazione in JavaScript

function minimo(a) { var min = a[0]; for (var i = 1; i < a.length; i++) { if (a[i] < min) { min = a[i]; } } return min; }

La funzione massimo calcola e restituisce il massimo di a.

function massimo(a) { var max = a[0]; for (var i = 1; i < a.length; i++) { if (a[i] > max) { max = a[i]; } } return max; }

9.8 Array ordinato

Un array (non vuoto) ordinato se ogni coppia adiacente di elementi soddisfa una relazione di ordinamento. In un array ordinato in senso crescente (decrescente) lultimo elemento il massimo (minimo) dellarray e il primo elemento il minimo (massimo) dellarray. Per ogni coppia di elementi adiacenti, il primo elemento minore (maggiore) del secondo. Gli array possono essere anche ordinati in senso non decrescente (non crescente). In questo caso la relazione di ordinamento tra gli elementi adiacenti quella di minore o uguale (maggiore o uguale). Il predicato ordinatoCrescente verifica se larray a ordinato in senso crescente.

64

Programmazione in JavaScript

function ordinatoCrescente(a) { var c = 0; for (var i = 1; i < a.length; i++) { if (a[i - 1] < a[i]) { c++; } } return (c == (a.length - 1)); }

La funzione scandisce tutte le coppie adiacenti, incrementando di uno la variabile c per ogni coppia che rispetta lordinamento. Se tutte le coppie rispettano lordinamento, la funzione restituisce il valore true. Una versione basata sullo schema di ricerca lineare incerta mostrata nel seguito.
function ordinatoCrescente(a) { var i = 1; while ((i < a.length) && (a[i - 1] < a[i])) { i++; } return (i == a.length); }

Il predicato ordinatoDecrescente si ottiene a partire da ordinatoCrescente invertendo la relazione di ordinamento.

9.9 Filtro
Un filtro uno strumento per la selezione (filtraggio) delle parti di un insieme [Wikipedia, alla voce Filtro]. Un esempio di filtro, chiamato filtro passa banda, seleziona tutti i valori che appartengono allintervallo [lo, hi). I valori lo e hi sono chiamati livello basso (low level) e livello alto (high level). La funzione filtro ha tre parametri (a, lo, hi) e restituisce un nuovo array formato da tutti gli elementi di a i cui valori sono compresi tra lo e hi.

65

Programmazione in JavaScript

function filtro(a, lo, hi) { var b = []; for (var i = 0; i < a.length; i++) { if ((a[i] >= lo) && (a[i] < hi)) { b.push(a[i]); } } return b; }

9.10 Inversione di una stringa

Data una stringa, la sua stringa inversa si ottiene leggendola al contrario. Ad esempio, la stringa inversa di alfa afla. La funzione inverti ha un parametro (s) e restituisce la stringa inversa di s.
function inverti(s) { var t = ""; for (var i = 0; i < s.length; i++) { t = s[i] + t; } return t; }

Unaltra soluzione utilizza uniterazione determinata che inizia dallindice dellultimo carattere di s e termina con zero.
function inverti(s) { var t = ""; for (var i = s.length - 1; i >= 0; i--) { t += s[i]; } return t; }

9.11 Palindromo
Un palindromo una sequenza di caratteri che, letta al contrario, rimane identica [Wikipedia, alla voce Palindromo]. Alcuni esempi

66

Programmazione in JavaScript

sono il nome Ada, la voce verbale aveva e la frase I topi non avevano nipoti. Il predicato ePalindromo ha un parametro (s) e verifica se la stringa s un palindromo.
function ePalindromo(s) { return s == inverti(s); }

Unaltra soluzione che non fa uso della funzione inverti la seguente.

function ePalindromo(s) { var c = 0; for (var i = 0; i < s.length; i++) { if(s[i] == s[s.length 1 i]) { c++; } } return (c == s.length); }

Per evitare di scandire tutta la stringa quando non un palindromo possibile utilizzare uniterazione indeterminata.
function ePalindromo(s) { var i = 0; while ((i < s.length) && (s[i] == s[s.length 1 i])) { i++; } return (i == s.length); }

9.12 Ordinamento di array

Un array di numeri pu essere ordinato in senso crescente o decrescente utilizzando un algoritmo di ordinamento. Il pi semplice di questi algoritmi si basa sulla ricerca successiva del minimo (ordinamento crescente) o del massimo (ordinamento decrescente).

67

Programmazione in JavaScript

function ordina(a) { for (var i = 0; i < a.length; i++) { for (var j = i + 1; j < a.length; j++) { if (a[j] < a[i]) { var tmp = a[j]; a[j] = a[i]; a[i] = tmp; } } } }

Un altro algoritmo si basa su una scansione che individua e scambia le coppie di elementi che non rispettano lordinamento. La scansione ripetuta fino a quando tutti gli elementi dellarray sono ordinati.
function ordina(a) { var ordinato = false; while (!ordinato) { ordinato = true; for (var i = 1; i < a.length; i++) { if (a[i - 1] > a[i]) { var tmp = a[i 1]; a[i - 1] = a[i]; a[i] = tmp; ordinato = false; } } } }

La stessa funzione pu essere riscritta usando la forma alternativa del comando iterativo indeterminato.
function ordina(a) { do { var scambi = 0; for (var i = 1; i < a.length; i++) { if (a[i - 1] > a[i]) { var tmp = a[i 1]; a[i - 1] = a[i]; a[i] = tmp;

68

Programmazione in JavaScript

scambi++; } } } while (scambi > 0); }

9.13 Esercizi
1. La media aritmetica semplice di n numeri cos definita [Wikipedia, alla voce Media (statistica)]: x x ... x n m= 1 2 n Ad esempio, la media aritmetica semplice di 3, 12, 24 13. Definire in JavaScript una funzione che calcola e restituisce la media aritmetica semplice degli elementi di un array a formato da n numeri. La funzione ha un parametro: a. Invocare la funzione con i seguenti valori: [3, 12, 24] [5, 7, 9, -12, 0]. 2. Dato un array a e un valore k, il numero di occorrenze di k in a definito come il numero degli elementi di a il cui valore uguale a k. Definire in JavaScript una funzione che calcola e restituisce il numero di occorrenze del valore k nellarray a. La funzione ha due parametri: a, k. Invocare la funzione con i seguenti valori: [10, 5, 34, 0], 1 [10, 5, 34, 0], 5. 3. Definire in JavaScript un predicato che verifica se ogni elemento di un array di numeri (tranne il primo) pari alla somma degli elementi che lo precedono. La funzione ha un parametro: a.

69

Programmazione in JavaScript

Invocare la funzione con i seguenti valori: [1, 2, 6, 10, 32] [1, 2, 6, 8, 31]. 4. Definire in JavaScript una funzione che ha come parametro un array a di numeri e che restituisce un nuovo array che contiene le differenze tra gli elementi adiacenti di a. La funzione ha un parametro: a. Invocare la funzione con i seguenti valori: [1, 2, -6, 0, 3] [2, 2, 3, 3, 4, 4].

70

Programmazione in JavaScript

10 Soluzione degli esercizi della prima parte

10.1 Esercizi del capitolo 4
1. Calcolare la somma dei primi quattro multipli di 13.
print((13 * 1) + (13 * 2) + (13 * 3) + (13 * 4));

2. Verificare se la somma dei primi sette numeri primi maggiore della somma delle prime tre potenze di due.
print((2+3+5+7+11+13+17) < (2*1+2*2+2*2*2));

3. Verificare se 135 dispari, 147 pari, 12 dispari, 200 pari.

print(135 print(147 print(12 print(200 % % % % 2 2 2 2 == == == == 1); 0); 1); 0);

4. Calcolare larea di un triangolo rettangolo i cui cateti sono 23 e 17.

print((23 * 17) / 2);

5. Calcolare la circonferenza di un cerchio il cui raggio 14.

print(3.141592 * 2 * 14);

6. Calcolare larea di un cerchio il cui diametro 47.

print(3.141592 * (47 / 2) * (47 / 2));

7. Calcolare larea di un trapezio la cui base maggiore 48, quella minore 25 e laltezza 13.

71

Programmazione in JavaScript

print(((48 + 25) / 2) * 13);

8. Verificare se larea di un quadrato di lato quattro minore dellarea di un cerchio di raggio tre.
print((4 * 4) < (3.141592 * 3 * 3));

9. Calcolare il numero dei minuti di una giornata, di una settimana, di un mese di 30 giorni, di un anno non bisestile.
print(60 print(60 print(60 print(60 * * * * 24); 24 * 7); 24 * 30); 24 * 365);

10. Verificare se conviene acquistare una camicia che costa 63 in un negozio che applica uno sconto fisso di 10 o in un altro che applica uno sconto del 17%.
print((63 10) < (63 63 * (17 / 100)));

10.2 Esercizi del capitolo 5

1. Calcolare il costo di un viaggio in automobile, sapendo che la lunghezza 750 Km, che il consumo di gasolio 3,2 litri ogni 100 Km, che un litro di gasolio costa 1,432 , che due terzi del percorso prevedono un pedaggio pari a 1,2 ogni 10 Km.
var lunghezza = 750; var kmGasolio = 3.2 / 100; var ltGasolio = 1.432; var carburante = lunghezza * kmGasolio * ltGasolio; var lunghezzaAutostrada = lunghezza * (2 / 3); var kmPedaggio = 1.2 / 10; var pedaggio = lunghezzaAutostrada * kmPedaggio; var costoTotale = carburante + pedaggio; print(costoTotale);

2. Calcolare il costo di una telefonata, sapendo che la durata pari a 4 minuti e 23 secondi, che il costo alla chiamata pari a

72

Programmazione in JavaScript

0,15 , che i primi 30 secondi sono gratis, che il resto della telefonata costa 0,24 al minuto.
var minuti = 4; var secondi = 23; var costoFisso = 0.15; var tariffaMinuto = 0.24; var durata = minuti * 60 + secondi; var tariffaSecondo = tariffaMinuto / 60; var costoVariabile = (durata 30) * tariffaSecondo; var costo = costoFisso + costoVariabile; print(costo);

3. Calcolare il costo di un biglietto aereo acquistato una settimana prima della partenza, sapendo che il costo di base pari a 200 (se acquistato il giorno della partenza) e che questo costo diminuisce del 2,3% al giorno (se acquistato prima del giorno della partenza).
var costoBase = 200; var scontoGiornaliero = 2.3 / 100; var giorni = 7; var sconto = costoBase * scontoGiornaliero * giorni; var costo = costoBase sconto; print(costo);

4. Calcolare il costo di un prodotto usando la seguente formula costo= prezzo prezzo0,20 sconto e sapendo che il prezzo 100 e lo sconto 30 .
var prezzo = 100; var sconto = 30; var costo = (prezzo + prezzo * 0.2) sconto; print(costo);

5. Calcolare la rata mensile di un mutuo annuale usando la seguente formula importo rata = 1 tasso 12 e sapendo che limporto annuale 240 e il tasso il 5%.

73

Programmazione in JavaScript

var importo = 240; var tasso = 5 / 100; var rata = (importo / 12) * (1 + tasso); print(rata);

10.3 Esercizi del capitolo 6

1. Definire in JavaScript un predicato che verifica se lintersezione dellintervallo [a, b) con lintervallo [c, d) vuota. Il predicato ha quattro parametri: a, b, c, d. Invocare il predicato con i seguenti valori: 2, 4, 5, 7; 2, 4, 4, 7; 2, 4, 3, 7; 5, 7, 2, 4; 4, 7, 2, 4; 3, 7, 2, 4.
function intersezione(a, b, c, d) { return ((b <= c) || (d <= a)); } print(intersezione(2, 4, 5, 7)); print(intersezione(2, 4, 4, 7)); print(intersezione(2, 4, 3, 7)); print(intersezione(5, 7, 2, 4)); print(intersezione(4, 7, 2, 4)); print(intersezione(3, 7, 2, 4));

2. Lequazione di secondo grado ax2 + bx + c = 0 ha due radici [Wikipedia, alla voce Equazione di secondo grado]: b b2 4 ac x 1 / 2= 2a Definire in JavaScript una funzione che stampa le radici di unequazione i cui coefficienti sono a, b e c (con a diverso da zero). La funzione ha tre parametri:a, b, c. Invocare la funzione con i seguenti valori: 1, -5, 6; 1, 8, 16; 1, 2, 3.

74

Programmazione in JavaScript

function radici(a, b, c) { var delta = b*b 4*a*c; if (delta > 0) { print ((-b + Math.sqrt(delta)) / (2*a)); print ((-b - Math.sqrt(delta)) / (2*a)); } else if (delta == 0) { print (-b / (2*a)); } else { // (delta < 0) print ("radici immaginarie"); } } radici(1, -5, 6); radici(1, 8, 16); radici(1, 2, 3)

La funzione predefinita Math.sqrt calcola la radice quadrata del suo parametro. 3. Definire in JavaScript una funzione che calcola e restituisce la somma delle cifre di un intero che appartiene allintervallo [ 0, 100). La funzione ha un parametro: n. Invocare la funzione con i seguenti valori: 0, 1, 23, 99.
function sommaCifre (n) { var u = n % 10; var d = (n - u) / 10; return u + d; } print(sommaCifre(0)); print(sommaCifre(1)); print(sommaCifre(23)); print(sommaCifre(99));

10.4 Esercizi del capitolo 7

1. I giorni di un anno possono essere numerati consecutivamente, assumendo che al primo gennaio sia assegnato il valore 1 e al trentuno dicembre il valore 365 negli anni non bisestili o 366 negli anni bisestili.

75

Programmazione in JavaScript

Definire in JavaScript una funzione che restituisce il numero assegnato a un giorno dellanno, assumendo che i mesi siano numerati da 1 a 12. La funzione ha tre parametri: anno, mese, giorno. Invocare la funzione con i seguenti valori: 1957, 4, 25; 2004, 11, 7; 2000, 12, 31; 2012, 2, 29.
function numeroGiorno(anno, mese, giorno) { var n = 0; switch (mese) { case 12: n += 30; case 11: n += 31; case 10: n += 30; case 9: n += 31; case 8: n += 31; case 7: n += 30; case 6: n += 31; case 5: n += 30; case 4: n += 31; case 3: if((anno % 400 == 0) || ((anno % 4 == 0) && (anno % 100 != 0))) { n += 29; } else { n += 28; } case 2: n += 31; case 1: n += giorno; } return n; } print(numeroGiorno(1957, 4, 25)); print(numeroGiorno(2004, 11, 7)); print(numeroGiorno(2000, 12, 31)); print(numeroGiorno(2012, 2, 29));

2. Definire in JavaScript una funzione che calcola e restituisce una stringa che rappresenta il valore in lettere di un intero che appartiene allintervallo [0, 100). La funzione ha un parametro: n.

76

Programmazione in JavaScript

Invocare la funzione con i seguenti valori: 0, 1, 12, 21, 32, 43, 70, 88, 90.
function lettere(n) { // da definire } print(lettere(0)); print(lettere(1)); print(lettere(12)); print(lettere(21)); print(lettere(32)); print(lettere(43)); print(lettere(70)); print(lettere(88)); print(lettere(90));

3. Definire in JavaScript una funzione che calcola il tipo di un triangolo (equilatero, isoscele, rettangolo, scaleno) in base alla lunghezza dei suoi lati. La funzione restituisce una stringa che rappresenta il tipo del triangolo e ha tre parametri : a, b, c. Invocare la funzione con i seguenti valori: 3, 3, 3; 3, 4, 4; 3, 4, 5; 3, 4, 6.
function triangolo (a, b, c) { if ((a == b) && (b == c)) { return "equilatero"; } else if (((a == b) && (a != c)) || ((a == c) && (a != b)) || ((b == c) && (a != b))) { return "isoscele"; } else if ((Math.sqrt(a*a + b*b) == c) || (Math.sqrt(a*a + c*c) == b) || (Math.sqrt(b*b + c*c) == a)) { return "rettangolo"; } else { return "scaleno"; } }

77

Programmazione in JavaScript

print(triangolo(3, print(triangolo(3, print(triangolo(3, print(triangolo(3,

3, 4, 4, 4,

3)); 4)); 5)); 6));

10.5 Esercizi del capitolo 8

1. Un anno perfetto per una persona se un multiplo della sua et in quellanno, assumendo come et massima cento anni. Ad esempio gli anni perfetti per chi nato nel 1984 sono nove: 1985, 1986, 1988, 1992, 2000, 2015, 2016, 2046, 2048. Definire in JavaScript una funzione che stampa gli anni perfetti relativi a un anno di nascita. La funzione ha un parametro: annoDiNascita. Invocare la funzione con i seguenti valori: 1984, 1990, 1992, 2000, 2009.
function anniPerfetti(annoDiNascita) { var ETA_MASSIMA = 100; for (var i = 1; i <= ETA_MASSIMA; i++) { if (((annoDiNascita + i) % i) == 0) { print(annoDiNascita + i); } } } anniPerfetti(1984); anniPerfetti(1990); anniPerfetti(1992); anniPerfetti(2000); anniPerfetti(2009);

2. In matematica, con reciproco di un numero x si indica il numero che moltiplicato per x d come risultato 1. Definire in JavaScript una funzione che calcola e restituisce la somma dei reciproci dei primi n numeri interi maggiori di zero. La funzione ha un parametro: n. Invocare la funzione con i seguenti valori: 1, 2, 4, 7.

78

Programmazione in JavaScript

function armonica(n) { var s = 0; for (var i = 1; i <= n; i++) { s += 1 / i; } return s; } print(armonica(1)); print(armonica(2)); print(armonica(4)); print(armonica(7));

3. Definire in JavaScript una funzione che stampa, se esistono, le radici intere di unequazione di secondo grado di coefficienti a, b, c comprese nellintervallo [l, u). La funzione ha i seguenti parametri: a, b, c, l, u. Invocare la funzione con i seguenti valori: 1, 2, 8, 1, 5 1, 2, 8, 5, 5 1, 2, 8, 5, 10.
function radici(a, b, c, l, u) { for (var i = l; i < u; i++) { if (a * i * i + b * i + c == 0) { print(i); } } } radici(1, -2, -8, 1, 5); radici(1, -2, -8, -5, 5); radici(1, -2, -8, 5, 10);

10.6 Esercizi del capitolo 9

1. La media aritmetica semplice di n numeri cos definita [Wikipedia, alla voce Media (statistica)]: x x ... x n m= 1 2 n

79

Programmazione in JavaScript

Ad esempio, la media aritmetica semplice di 3, 12, 24 13. Definire in JavaScript una funzione che calcola e restituisce la media aritmetica semplice degli elementi di un array a formato da n numeri. La funzione ha un parametro: a. Invocare la funzione con i seguenti valori: [3, 12, 24] [5, 7, 9, -12, 0].
function media(a) { var s = 0; for (var i = 0; i < a.length; i++) { s += a[i]; } return s / a.length; } print(media([3, 12, 24])); print(media([5, 7, 9, -12, 0]));

2. Dato un array a e un valore k, il numero di occorrenze di k in a definito come il numero degli elementi di a il cui valore uguale a k. Definire in JavaScript una funzione che calcola e restituisce il numero di occorrenze del valore k nellarray a. La funzione ha due parametri: a, k. Invocare la funzione con i seguenti valori: [10, 5, 34, 0], 1 [10, 5, 34, 0], 5.
function occorrenze(a, k) { var c = 0; for (var i = 0; i < a.length; i++) { if (a[i] == k) { c++; } } return c;

80

Programmazione in JavaScript

} print(occorrenze([10, -5, 34, 0], 1)); print(occorrenze([10, -5, 34, 0], -5));

3. Definire in JavaScript un predicato che verifica se ogni elemento di un array di numeri (tranne il primo) pari alla somma degli elementi che lo precedono. La funzione ha un parametro: a. Invocare la funzione con i seguenti valori: [1, 2, 6, 10, 32] [1, 2, 6, 8, 31].
function verificaSomma (a) { var c = a[0]; var i = 1; while ((i < a.length) && (a[i] == c)) { c += a[i]; i++; } return (i == a.length); } print(verificaSomma([1, 2, 6, 10, 32])); print(verificaSomma([1, 1, 2, 4, 8]));

4. Definire in JavaScript una funzione che ha come parametro un array a di numeri e che restituisce un nuovo array che contiene le differenze tra gli elementi adiacenti di a. La funzione ha un parametro: a. Invocare la funzione con i seguenti valori: [1, 2, -6, 0, 3] [2, 2, 3, 3, 4, 4].

81

Programmazione in JavaScript

function differenze (a) { var b = []; for (var i = 0; i < a.length - 1; i++) { b.push(a[i] - a[i + 1]); } return b; } print(differenze([1, 2, -6, 0, 3])); print(differenze([2, 2, 3, 3, 4, 4]));

82

Parte seconda Programmazione web

Programmazione in JavaScript

11 Ricorsione
In JavaScript possibile definire funzioni ricorsive. Una funzione ricorsiva quando nel suo corpo compare uninvocazione alla funzione stessa. Abbiamo gi visto questo concetto quando abbiamo parlato di grammatiche formali: una regola ricorsiva quando la definizione di un simbolo non-terminale contiene il simbolo non-terminale stesso. Per definire una funzione ricorsiva non necessario modificare le regole sintattiche viste finora. Passiamo, quindi, ad affrontare un problema che pu essere risolto con una funzione ricorsiva.

11.1 Fattoriale
Il fattoriale di n (indicato con !n) il prodotto dei primi n numeri interi positivi minori o eguali di quel numero [Wikipedia, alla voce Fattoriale]. !0 vale 1, !1 vale 1, !2 vale 2, !3 vale 6, !4 vale 24 e cos via. La funzione fattorialeR ha un parametro (n) e restituisce il fattoriale di n. La funzione definita in maniera ricorsiva, sfruttando la definizione matematica del fattoriale.
function fattorialeR (n) { if ((n == 0) || (n == 1)) { return 1; } else { return n * fattorialeR(n 1); } }

Il calcolo del fattoriale pu essere effettuato anche con una funzione iterativa, che non fa uso della ricorsione. Anche in questo caso la funzione ha un parametro (n) e restituisce il fattoriale di n.

85

Programmazione in JavaScript

function fattorialeI (n) { r = 1; for (var i = 1; i <= n; i++) { r *= i; } return r; }

11.2 Successione di Fibonacci

La successione di Fibonacci [Wikipedia, alla voce Successione di Fibonacci] una sequenza di numeri interi naturali cos definita: i primi due termini valgono zero e uno, rispettivamente; i termini successivi sono definiti come la somma dei due precedenti. Storicamente il primo termine della successione non era zero ma uno. La sequenza prende il nome dal matematico pisano del XIII secolo Leonardo Fibonacci e i termini di questa successione sono chiamati numeri di Fibonacci. Definendo questa successione, Fibonacci voleva trovare una legge che descrivesse la crescita di una popolazione di conigli. Fibonacci fece alcune assunzioni: la prima coppia diventa fertile al compimento del primo mese e d alla luce una nuova coppia al compimento del secondo mese; le nuove coppie nate si comportano in modo analogo; le coppie fertili, dal secondo mese di vita, danno alla luce una coppia di conigli al mese. Vediamo in azione la definizione della successione. Partendo con una singola coppia, questa dopo un mese sar fertile. Dopo due mesi avremo due coppie, di cui una sola fertile. Nel mese seguente avremo (2 + 1 = 3) tre coppie, perch solo la coppia fertile ha partorito. Di queste tre, ora saranno due le coppie fertili e, quindi, nel mese seguente ci saranno (3 + 2 = 5) cinque coppie. Come si pu vedere, il numero di coppie di conigli di ogni mese coincide con i valori della successione di Fibonacci. Definiamo una funzione ricorsiva che ha come parametro un intero n, maggiore o uguale a zero, e che restituisce il corrispondente numero della successione di Fibonacci (assumendo che il primo numero della successione abbia indice zero).

86

Programmazione in JavaScript

function fibonacciR(n) { if ((n == 0) | (n == 1)) { return n; } else { return fibonacciR(n 2) + fibonacciR(n 1); } }

Definiamo unaltra funzione equivalente, questa volta iterativa, pi complessa e meno intuitiva ma molto pi efficiente in termini di numero di operazioni elementari (ad esempio le somme) necessarie per effettuare il calcolo.
function fibonacciI(n) { if ((n == 0) | (n == 1)) { return n; } var f1 = 0; var f2 = 1; var f; for (var i = 2; i <= n; i++) { f = f1 + f2; f1 = f2; f2 = f; } return f; }

11.3 Aritmetica di Peano

Gli assiomi di Peano sono stati ideati dal matematico Giuseppe Peano per definire linsieme dei numeri naturali. Informalmente tali assiomi possono essere cos enunciati [Wikipedia, alla voce Assiomi di Peano]: esiste un numero naturale, lo zero ogni numero naturale ha un numero naturale successore numeri diversi hanno successori diversi zero non il successore di alcun numero naturale

87

Programmazione in JavaScript

ogni insieme di numeri naturali che contenga lo zero e il successore di ogni proprio elemento coincide con lintero insieme dei numeri naturali (assioma dellinduzione). Laritmetica di Peano una teoria del primordine basata su una versione degli assiomi di Peano espressi nel linguaggio del primordine [Wikipedia, alla voce Aritmetica di Peano]. In questa aritmetica laddizione e la moltiplicazione sui numeri naturali sono definite per induzione utilizzando esclusivamente luguaglianza, la costante zero e loperatore unario successore8: x 0 = x x y = x y 1 1= x y 1 1 x0=0 xy = x y 1 1= x y 1 x In JavaScript possibile definire ricorsivamente le funzioni che realizzano questi due operatori utilizzando la costante 0, loperatore binario di uguaglianza (==), loperatore di incremento unitario (+1) e loperatore di decremento unitario (-1).
function addizione(x, y) { if (y == 0) { return x; } else { return addizione(x, y -1) +1; } } function moltiplicazione(x, y) { if (y == 0) { return 0; } else { return addizione(moltiplicazione(x, y -1), x); } }

Gli operatori aritmetici di sottrazione, divisione e resto, potenza possono essere definiti per induzione sui numeri naturali utilizzando la costante zero, loperatore binario di uguaglianza (==), loperatore bi8 Per semplicit di presentazione, loperatore unario successore stato sostituito dagli operatori di incremento (+1) e decremento (-1) unitario.

88

Programmazione in JavaScript

nario di disuguaglianza (!=), loperatore di incremento unitario (+1), loperatore di decremento (-1) e gli operatori di addizione e moltiplicazione definiti sopra. La sottrazione cos definita per induzione: x 0= x x y = x y 1 + 1=( x 1 )( y 1) se x y Per definire la divisione necessario dare una definizione induttiva delloperatore di relazione <: x < 0 false 0< y true se y > 0 x < y x 1< y 1 se x > 0 e y > 0 La divisione cos definita per induzione: x = 0 se x < y y x x y+ y x y y x y = = + = + 1 se x y y y y y y Loperatore non definito se y =0. Il resto della divisione cos definito per induzione: x r y = x se x y x r y = x y r y se x y Anche in questo caso loperatore non definito se y =0. La potenza cos definita per induzione: x 0=1 se x > 0 x y = xx( y 1) se x > 0 0 y =0 se y > 0 Da notare che 00 non definito.

11.4 Esercizi
1. Definire in Javascript una funzione ricorsiva che calcola e restituisce la differenza tra due interi maggiori o uguali a zero. La funzione ha due parametri: x, y. Invocare la funzione con le seguenti coppie di valori: 5, 0

89

Programmazione in JavaScript

2.

3.

4.

5.

3, 3 9, 2. Definire in JavaScript una funzione ricorsiva che calcola e restituisce la relazione di minore tra due interi maggiori o uguali a zero. La funzione ha due parametri: x, y. Invocare la funzione con le seguenti coppie di valori: 0, 0 0, 4 3, 0 2, 6 9, 2. Definire in JavaScript una funzione ricorsiva che calcola e restituisce la divisione tra due interi maggiori o uguali a zero. La funzione ha due parametri: x, y. Invocare la funzione con le seguenti coppie di valori: 0, 4 3, 3 9, 2. Definire in JavaScript una funzione ricorsiva che calcola e restituisce il resto della divisione tra due interi maggiori o uguali a zero. La funzione ha due parametri: x, y. Invocare la funzione con le seguenti coppie di valori: 0, 4 3, 3 9, 2. Definire in JavaScript una funzione ricorsiva che calcola e restituisce loperatore potenza definito tra due interi maggiori o uguali a zero. La funzione ha due parametri: x, y.

90

Programmazione in JavaScript

Invocare la funzione con le seguenti coppie di valori: 6, 0 3, 3 0, 2.

91

Programmazione in JavaScript

12 Oggetti
In JavaScript, oltre agli oggetti predefiniti presentati nella prima parte (stringhe e array) possibile usare oggetti personalizzati, con propriet e metodi specifici. Per creare un oggetto personalizzato necessario dichiarare una funzione costruttrice (o costruttore) che ne definisce le propriet e i metodi.
<fun_let> ::= function () <blocco> | function (<parametri>) <blocco> ::= this.<identificatore> = <espressione>; | this.<identificatore> = <fun_let>

<prop_met>

<blocco_costr> ::= <prop_met> | <prop_met> <blocco_costr> <dic_costr> ::= function <identificatore>() {<blocco_costr>} | function <identificatore>(<parametri>) {<blocco_costr>}

La dichiarazione di costruttore simile alla dichiarazione di funzione. Anche il costruttore ha unintestazione con una lista di parametri formali, eventualmente vuota, e un blocco che costituisce la definizione vera e propria del costruttore. A differenza della dichiarazione di funzione, tuttavia, nel blocco del costruttore sono ammesse solo dichiarazioni di propriet e di metodi. Inoltre, nel corpo di un costrut-

93

Programmazione in JavaScript

tore pu essere usata la parola riservata this9, che fa riferimento alloggetto in fase di costruzione. La dichiarazione di una propriet simile alla dichiarazione di una variabile, con lunica differenza che il nome della propriet deve essere preceduto dalla parola riservata this e da un punto. La dichiarazione di un metodo simile alla dichiarazione di una funzione. Anche in questo caso il nome della funzione deve essere preceduto dalla parola riservata this e da un punto. Ci che cambia lintestazione in cui manca il nome della funzione, precedentemente indicato nella dichiarazione. Per convenzione, i nomi dei costruttori iniziano con una lettera maiuscola, al contrario delle variabili e delle funzioni il cui nome inizia sempre con una lettera minuscola.
function Automobile (mar, mod, col, cil){ this.marca = mar; this.modello = mod; this.colore = col; this.cilindrata = cil; }

Il costruttore Automobile definisce un oggetto che ha quattro propriet: marca, modello, colore, cilindrata. Il costruttore non ha metodi associati. Il valore iniziale delle propriet di un oggetto stabilito al momento della sua creazione che pu essere effettuata con le stesse modalit viste per la creazione degli array, utilizzando cio la parola riservata new seguita dal nome del costruttore e da una lista di parametri.
<espressione> ::= new <identificatore>() | new <identificatore>(<espressioni>)

Dopo aver definito il costruttore Automobile possibile utilizzarlo per creare alcuni oggetti.

9 JavaScript non segnala errori se la parola riservata this utilizzata al di fuori della definizione di un costruttore. Questo uso riservato a situazioni particolari e pu causare comportamenti talvolta poco comprensibili.

94

Programmazione in JavaScript

var var var var

a1 a2 a3 a4

= = = =

new new new new

Automobile('Ford', Automobile('Fiat', Automobile('Volvo', Automobile('Lancia',

'Focus', 'Panda', 'V70', 'Libra',

'Grigio', 'Rosso', 'Nero', 'Blu',

1.8); 1.1); 2.4); 1.9);

Dopo aver creato un oggetto, possibile accedere alle sue propriet per utilizzarne o modificarne il valore. Anche per le propriet degli oggetti si utilizza la notazione a punti vista nella prima parte.
var descrizione = a1.marca + ' ' + a1.modello; a2.modello = 'Punto'; a2.colore = 'Nero'; a2.cilindrata = 1.3;

Il primo comando dichiara la variabile descrizione a cui assegnato come valore iniziale una stringa ottenuta concatenando i valori delle propriet marca e modello delloggetto a1. I tre comandi successivi trasformano loggetto a2, facendolo diventare una Punto nera di 1.3 di cilindrata. Il valore della propriet marca resta invariato.

12.1 Metodi
Nella dichiarazione di un costruttore possibile definire, oltre alle propriet, anche i metodi, funzioni che possono utilizzare e modificare il valore delle propriet delloggetto stesso. Per questo motivo, come nel caso dei costruttori, nel corpo dei metodi pu essere utilizzata la parola riservata this, che fa riferimento alloggetto su cui il metodo invocato.
function Automobile (mar, mod, col, cil){ this.marca = mar; this.modello = mod; this.colore = col; this.cilindrata = cil; this.serbatoio = 0; this.rifornisci = function(c){ this.serbatoio += c; } this.descrivi = function() {

95

Programmazione in JavaScript

return this.marca + ' ' + this.modello + ' ' + this.colore + ' ' + this.cilindrata; } }

Al costruttore Automobile stata aggiunta una nuova propriet, serbatoio, inizializzata a zero al momento della creazione delloggetto. Oltre alla nuova propriet, il costruttore definisce due metodi: rifornisci e descrivi. Il primo incrementa il valore della propriet serbatoio, simulando cos il rifornimento effettuato presso una stazione di servizio. Il secondo restituisce una stringa che descrive loggetto.
a1.rifornisci(50); var descrizione = a1.descrivi();

Linvocazione del metodo rifornisci provoca la modifica della propriet serbatoio che passa dal valore zero, assegnato al momento della creazione delloggetto, al valore 50. Linvocazione del metodo descrivi restituisce la stringa Ford Focus Grigio 1.8.

12.2 Array
In JavaScript gli array sono oggetti predefiniti. Come per gli altri oggetti possibile creare un nuovo array usando il costruttore Array, i cui argomenti specificano il numero e il valore degli elementi dellarray. Pi precisamente, sono previsti i seguenti casi: senza parametri: il costruttore crea un array vuoto, un array che contiene zero elementi; con un solo parametro di tipo numerico (un intero maggiore o uguale a zero): il costruttore crea un array con un numero di elementi pari al valore dellargomento numerico; ogni elemento creato inizializzato al valore undefined; con un solo parametro di tipo numerico (un intero minore di zero o un numero reale): il costruttore segnala il verificarsi di un errore;

96

Programmazione in JavaScript

con un solo parametro di tipo non numerico: il costruttore crea un array con un solo elemento il cui valore proprio quello del parametro;

con pi parametri: il costruttore crea un array con tanti elementi quanti sono i parametri; agli elementi dellarray sono assegnati i valori passati come parametri nellordine in cui sono trasmessi; allelemento di indice zero (il primo) assegnato il valore del primo parametro, allelemento di indice uno il valore del secondo parametro e cos via. Vediamo alcuni esempi di dichiarazione di variabili inizializzate con un array.
var var var var var var a1 a2 a3 a4 a5 a6 = = = = = = new new new new new new Array(); Array(3); Array(3.5); Array(true); Array('Mario'); Array(10, 20, 30, 40);

Nel primo caso si ottiene un array vuoto. Nel secondo, si ottiene un array di tre elementi, tutti inizializzati con il valore undefined. Nel terzo caso si ottiene un errore perch, se il costruttore invocato con un solo parametro numerico, questo deve avere come valore un intero maggiore o uguale a zero. Nel quarto e quinto caso si ottengono, rispettivamente, un array con un solo elemento il cui valore true e un array con un solo elemento contenente la stringa Mario. Nellultimo caso si ottiene un array di quattro elementi con i seguenti valori: lelemento di indice 0 ha come valore lintero 10; lelemento di indice 1 ha come valore lintero 20;

lelemento di indice 2 ha come valore lintero 30; lultimo elemento, di indice 3, ha come valore lintero 40.

12.3 Stringhe
In JavaScript le stringhe sono oggetti predefiniti e, come tali, hanno propriet e metodi che permettono di manipolarle. Come per gli ar-

97

Programmazione in JavaScript

ray, le stringhe hanno la propriet length, il cui valore pari al numero di caratteri di una stringa.
var alfa = 'ciao'; print(alfa.length);

Le stringhe hanno molti metodi, usati per svolgere operazioni di manipolazione su testi. Quelli pi comunemente usati sono i seguenti: substr: ha due parametri p e n. Restituisce, a partire dalla posizione indicata dal valore di p, n caratteri della stringa su cui invocato.
// b vale 'fabe'

var a = 'alfabeto' var b = a.substr(2, 4);

indexOf: ha un parametro s. Restituisce lindice della prima occorrenza della stringa s, incontrata a partire da sinistra, nella stringa su cui invocato. Il valore restituito -1 se non vi sono occorrenze di s.
// b vale 4 // c vale -1

var a = 'alfabeto' var b = a.indexOf('beto'); var c = a.indexOf('Alfa');

toLowerCase: non ha parametri. Restituisce una stringa uguale a quella su cui invocato, ma con tutti i caratteri minuscoli.
// b vale 'alfabeto'

var a = 'ALFAbeto' var b = a.toLowerCase();

Questi metodi non modificano la stringa su cui sono invocati.

12.4 Il convertitore di valuta

Un convertitore di valuta permette di calcolare il valore di un importo di denaro espresso in una valuta (ad esempio in Euro) nel corrispondente importo espresso in unaltra valuta (ad esempio in Lire). Nel seguito mostriamo il codice JavaScript di un costruttore personalizzato per oggetti che rappresentano convertitori di valuta. Loggetto ha i seguenti metodi:

98

Programmazione in JavaScript

imposta (valuta, fattore): imposta la sigla della valuta e il fattore di conversione da ; converti (importo): converte limporto, utilizzando il fattore di conversione, e restituisce il valore calcolato preceduto dalla sigla della valuta.

function Convertitore () { this.valutaCorrente; this.fattoreCorrente; this.imposta = function (valuta, fattore) { this.valutaCorrente = valuta; this.fattoreCorrente = fattore; } this.converti = function (importo) { return this.valutaCorrente + " " + importo * this.fattoreCorrente; } }

Per verificare il corretto funzionamento delloggetto, definiamo una funzione che: crea un convertitore di valuta, imposta la valuta in lire con un fattore di conversione pari a 1936.27, converte 100.00 .

function foo() { var c = new Convertitore(); c.imposta("Lira", 1936.27); print(c.converti(100.00)); }

12.5 Insiemi
Un insieme [Wikipedia, alla voce Insieme] una collezione di oggetti chiamati elementi dellinsieme. Il concetto di insieme molto intuitivo, caratterizzato dalle seguenti propriet:

99

Programmazione in JavaScript

un elemento pu appartenere o non appartenere a un insieme; un elemento pu comparire solo una volta in un insieme; gli elementi di un insieme non hanno un ordine di comparizione;

due insiemi coincidono se e solo se hanno gli stessi elementi. La creazione di un oggetto che rappresenta un insieme vuoto avviene mediante linvocazione del costruttore Insieme. Gli elementi di un insieme sono memorizzati in una propriet delloggetto, un array associativo chiamato elementi, inizializzata con un array vuoto al momento della sua creazione.
this.elementi = {};

Loggetto Insieme ha i seguenti metodi: cardinalit, appartiene, aggiungi, intersezione, unione, visualizza. Il metodo cardinalit restituisce il numero di elementi dellinsieme. Il ciclo che conta gli elementi necessario perch la propriet length non definita per gli array associativi.
this.cardinalit = function() { var c = 0; for (var i in this.elementi) { c++; } return c; }

Il metodo appartiene un predicato che verifica se un elemento appartiene a un insieme.

this.appartiene = function(x) { return (x in this.elementi); }

Il metodo aggiungi estende linsieme con un elemento. Il metodo sfrutta le caratteristiche degli array associativi.

100

Programmazione in JavaScript

this.aggiungi = function(k) { this.elementi[k] = k; }

Il metodo intersezione ha un parametro (un altro insieme) e restituisce un insieme formato dagli elementi in comune ai due insiemi.
this.intersezione = function(x) { var n = new Insieme(); for (var i in this.elementi) { if (x.appartiene(i)) { n.aggiungi(i); } } return n; }

Il metodo unione ha un parametro (un altro insieme) e restituisce un insieme formato dagli elementi dei due insiemi. Un elemento comune ai due insiemi compare solo una volta nel nuovo insieme.
this.unione = function(x) { var n = new Insieme(); for (var i in this.elementi){ n.aggiungi(i); } for (var j in x.elementi){ n.aggiungi(j); } return n; }

Il metodo visualizza restituisce una stringa formata dagli elementi dellinsieme separati da virgole. Conformemente alla notazione standard degli insiemi, la stringa delimitata da parentesi graffe.

101

Programmazione in JavaScript

this.visualizza = function() { var s = "{"; var b = true; for (var i in this.elementi) { if (b) { s += i; b = false; } else { s += ", " + i; } } s += "}"; return s; } }

La seguente funzione crea linsieme alfa aggiunge due elementi ad alfa calcola la cardinalit di alfa visualizza alfa verifica lappartenenza di un numero ad alfa crea linsieme beta aggiunge due elementi a beta calcola lintersezione tra alfa e beta calcola lunione tra alfa e beta.

function foo() { var alfa = new Insieme(); alfa.aggiungi(10); alfa.aggiungi(20); print(alfa.cardinalit()); print(alfa.visualizza()); var x = 10; if (alfa.appartiene(x)) { print (x + " appartiene ad alfa");

102

Programmazione in JavaScript

} else { print (x + " non appartiene ad alfa"); } var beta = new Insieme(); beta.aggiungi(10); beta.aggiungi(30); print(alfa.intersezione(beta).visualizza()); print(alfa.unione(beta).visualizza()); }

12.6 Tabelle
Una tabella un insieme di coppie (chiave, valore). Le tabelle si utilizzano per memorizzare linformazione (valore) associate a una chiave. In una tabella una chiave pu comparire solo una volta in una coppia. Per realizzare una tabella si definisce un oggetto, Tabella, che ha una propriet (mappa) e i seguenti metodi: appartiene, aggiungi, valore, visualizza. Le coppie di una tabella sono memorizzate nella propriet mappa, un array associativo, inizializzata con un array vuoto al momento della sua creazione.
this.mappa = {};

Il metodo appartiene un predicato che verifica se nella tabella esiste una coppia corrispondente alla chiave c.
this.appartiene = function (c) { return (c in this.mappa); }

Il metodo aggiungi ha due parametri: una chiave c e un valore v. Se la chiave c non presente nella tabella il metodo aggiunge una nuova coppia, altrimenti sostituisce il vecchio valore della coppia con il nuovo valore v.
this.aggiungi = function (c, v) {

103

Programmazione in JavaScript

this.mappa[c] = v; }

Il metodo valore ha un parametro, la chiave c da cercare nella tabella. Il metodo restituisce il valore associato alla chiave, se questa presente nella tabella, undefined altrimenti.
this.valore = function (c) { return this.mappa[c]; }

Il metodo visualizza restituisce una stringa che rappresenta il contenuto della tabella. Ogni coppia rappresentata da una chiave seguita dal segno = e dal valore della chiave delimitato da doppi apici.
this.visualizza = function () { var s = ''; for (var i in this.mappa) { s += ' ' + i + '="' + this.mappa[i] + '"'; } return s; }

La seguente funzione crea una tabella aggiunge alcune coppie cerca il valore delle coppie visualizza la tabella.

function foo() { var t = new Tabella(); var c1 = "pippo"; t.aggiungi(c1, 12); if (t.appartiene(c1)) { print (c1 + '="' + t.valore(c1) + '"'); } else { print (c1 + ' non in tabella'); }

104

Programmazione in JavaScript

var c2 = "pluto"; t.aggiungi(c2, 13); if (t.appartiene(c2)) { print (c2 + '="' + t.valore(c2) + '"'); } else { print (c2 + ' non in tabella'); } var c3 = "paperino"; if (t.appartiene(c3)) { print (c3 + '="' + t.valore(c3) + '"'); } else { print (c3 + ' non in tabella'); } print(t.visualizza()); t.aggiungi(c2, 3); if (t.appartiene(c2)) { print (c2 + '="' + t.valore(c2) + '"'); } else { print (c2 + ' non in tabella'); } print(t.visualizza()); }

12.7 Esercizi
1. Definire in JavaScript un costruttore personalizzato per oggetti che rappresentano sveglie. Loggetto ha i seguenti metodi: oraCorrente (h, m): imposta lora corrente. Se h maggiore di 23 o m maggiore di 59, i rispettivi valori sono impostati a zero; allarme (h, m): imposta lallarme. Se h maggiore di 23 o m maggiore di 59, i rispettivi valori sono impostati a zero; tic (): fa avanzare di uno i minuti dellora corrente. Se i minuti arrivano a 60, azzera i minuti e fa avanzare di uno le ore. Se le ore arrivano a 24, azzera le ore. Se lora corrente uguale allallarme impostato, restituisce il valore true, false altrimenti.

105

Programmazione in JavaScript

Definire una funzione che crea una sveglia, imposta lora corrente alle 13:00, imposta lallarme alle 13:02,

fa avanzare lora corrente di due minuti. 2. Definire in JavaScript un costruttore personalizzato per oggetti che rappresentano distributori automatici di caff. Loggetto ha i seguenti metodi: carica (n): aggiunge n capsule per erogare n caff; eroga (n, c): verifica se possibile erogare n caff e, in caso positivo, li eroga addebitandoli al codice c;

rapporto (c): restituisce il numero di caff addebitati al codice c e il numero di capsule disponibili. Definire una funzione che: crea un distributore automatico di caff, carica 20 capsule, eroga 12 caff per il codice Carlo, genera il rapporto per il codice Carlo.

106

Programmazione in JavaScript

13 Alberi
Nella teoria dei grafi un albero un grafo non orientato nel quale due vertici qualsiasi sono connessi da uno e un solo cammino (grafo non orientato connesso e privo di cicli) [Wikipedia, alla voce Albero (grafo)]. In questo capitolo presentiamo alcuni oggetti per la rappresentazione e la manipolazione di alberi.

13.1 Alberi binari

Un albero binario un albero i cui nodi possono avere al massimo due sotto-alberi o figli. Un nodo senza figli anche chiamato foglia. Un nodo che non ha un nodo padre chiamato radice. In JavaScript possibile realizzare gli alberi binari mediante loggetto AlberoBinario. Il suo costruttore ha tre parametri: un valore v, un albero sinistro sx, un albero destro dx. Per memorizzare questi valori si utilizzano le propriet valore, sinistro e destro.
this.valore = v; this.sinistro = sx; this.destro = dx;

La seguente funzione crea un albero binario formato da una radice e da due foglie. La creazione dellalbero inizia dalle foglie e procede verso la radice. Il valore null utilizzato per indicare lassenza di un figlio in un albero.
function foo () { var foglia1 = new AlberoBinario(2, null, null); var foglia2 = new AlberoBinario(3, null, null); var radice = new AlberoBinario(1, foglia1, foglia2); }

107

Programmazione in JavaScript

Un albero pu essere visualizzato mostrando i suoi valori in sequenza. La costruzione della sequenza dei valori chiamata visita e, nel caso degli alberi binari, pu essere effettuata in tre modi diversi: visita anticipata, visita differita, visita simmetrica. La visita anticipata costruisce una sequenza in cui prima compare il valore della radice seguito dalla visita anticipata del figlio sinistro e dalla visita anticipata del figlio destro. La visita anticipata dellalbero binario creato nellesempio precedente 1 2 3. Il metodo visitaAnticipata costruisce una stringa che rappresenta la visita anticipata di un albero binario.
this.visitaAnticipata = function() { var vs; if (this.sinistro != null) { vs = this.sinistro.visitaAnticipata(); } else { vs = ""; } var vd; if (this.destro != null) { vd = this.destro.visitaAnticipata(); } else { vd = ""; } return this.valore + " " + vs + vd; }

La visita differita costruisce una sequenza in cui prima compaiono la visita anticipata del figlio sinistro e dalla visita anticipata del figlio destro e, alla fine, il valore della radice. La visita differita dellalbero binario creato nellesempio precedente 2 3 1. Il metodo visitaDifferita costruisce una stringa che rappresenta la visita differita di un albero binario.
this.visitaDifferita = function() { var vs; if (this.sinistro != null) {

108

Programmazione in JavaScript

vs = this.sinistro.visitaDifferita(); } else { vs = ""; } var vd; if (this.destro != null) { vd = this.destro.visitaDifferita(); } else { vd = ""; } return vs + vd + " " + this.valore; }

La visita simmetrica costruisce una sequenza in cui prima compare la visita anticipata del figlio sinistro, poi il valore della radice e, alla fine, la visita anticipata del figlio destro. La visita simmetrica dellalbero binario creato nellesempio precedente 2 1 3. Il metodo visitaSimmetrica costruisce una stringa che rappresenta la visita simmetrica di un albero binario.
this.visitaSimmetrica = function() { var vs; if (this.sinistro != null) { vs = this.sinistro.visitaSimmetrica(); } else { vs = ""; } var vd; if (this.destro != null) { vd = this.destro.visitaSimmetrica(); } else { vd = ""; } return vs + " " + this.valore + vd; }

Laltezza di un albero definita come la lunghezza del massimo cammino dalla radice a una foglia. In base a questa definizione, laltezza

109

Programmazione in JavaScript

di un albero formato solo da un nodo radice uguale a zero. Laltezza dellalbero binario creato nellesempio precedente 1. Il metodo altezza restituisce laltezza di un albero binario.
this.altezza = function() { if (this.sinistro == null && this.destro == null) { return 0; } var as; if (this.sinistro != null) { as = this.sinistro.altezza(); } else { as = 0; } var ad; if (this.destro != null) { ad = this.destro.altezza(); } else { ad = 0; } if (as > ad) { return as + 1; } else { return ad + 1; } }

La frontiera di un albero la sequenza dei valori delle foglie visitate da sinistra verso destra. La frontiera dellalbero binario creato nellesempio precedente 2 3. Il metodo frontiera restituisce la frontiera di un albero binario.
this.frontiera = function() { if (this.sinistro == null && this.destro == null) { return this.valore + " "; } var fs;

110

Programmazione in JavaScript

if (this.sinistro != null) { fs = this.sinistro.frontiera(); } else { fs = ""; } var fd; if (this.destro != null) { fd = this.destro.frontiera(); } else { fd = ""; } return fs + fd; }

La seguente funzione crea un albero binario alfa effettua la visita anticipata di alfa effettua la visita differita di alfa effettua la visita simmetrica di alfa calcola laltezza di alfa costruisce la frontiera di alfa.

function foo() { var alfa = new AlberoBinario(1, new AlberoBinario(2, new AlberoBinario(4, null, null), new AlberoBinario(5, null, null)), new AlberoBinario(3, null, null)); print(alfa.visitaAnticipata()); print(alfa.visitaDifferita()); print(alfa.visitaSimmetrica()); print(alfa.altezza()); print(alfa.frontiera()); }

13.2 Alberi di ricerca

Un albero di ricerca un albero binario la cui visita simmetrica genera una sequenza ordinata di valori. Ci possono essere due tipi di albe-

111

Programmazione in JavaScript

ri di ricerca: con ripetizioni o senza ripetizioni. Nel primo caso lordinamento prevede anche luguaglianza (ad esempio non decrescente), nel secondo caso luguaglianza esclusa (ad esempio crescente). La ricerca di un valore in un albero di ricerca molto efficiente: partendo dalla radice possibile escludere dalla ricerca met dellalbero, perch il valore cercato non pu appartenere a quella met. Anche linserzione di un valore in un albero di ricerca unoperazione efficiente, perch si basa su una ricerca e sulleventuale aggiunta di una nuova foglia. Il costruttore delloggetto AlberoDiRicerca simile a quello delloggetto AlberoBinario in quanto ha un parametro e tre propriet: valore, figlio sinistro, figlio destro. Il metodo aggiungi ha un parametro k e aggiunge un nodo allalbero di ricerca, mantenendo lordinamento crescente. Il metodo definito ricorsivamente.
this.aggiungi = function (k) { if (k < this.valore) { if (this.sinistro == null) { this.sinistro = new AlberoDiRicerca(k); } else { this.sinistro.aggiungi(k); } } if (k > this.valore) { if (this.destro == null) { this.destro = new AlberoDiRicerca (k); } else { this.destro.aggiungi(k); } } }

Il metodo cerca un predicato con un parametro k che verifica se esiste un nodo il cui valore uguale a k. Anche questo metodo definito ricorsivamente.

112

Programmazione in JavaScript

this.cerca = function (k) { if (k == this.valore) { return true; } if (k < this.valore) { if (this.sinistro == null) { return false; } else { return this.sinistro.cerca(k); } } if (k > this.valore) { if (this.destro == null) { return false; } else { return this.destro.cerca(k); } } }

Infine, il metodo visita restituisce una stringa ottenuta visitando lalbero con una visita simmetrica. Questo metodo uguale al metodo visitaSimmetrica definito per gli alberi binari. La seguente funzione crea lalbero di ricerca alfa con il valore 1 aggiunge 5, 3 ed 8 ad alfa effettua una visita simmetrica di alfa cerca 1 e 4 in alfa.

function foo() { var a = new AlberoDiRicerca(1); a.aggiungi(5); a.aggiungi(3); a.aggiungi(8); print(a.visita()); print(a.cerca(1)); print(a.cerca(4)); }

113

Programmazione in JavaScript

13.3 Alberi n-ari

Un albero n-ario un albero i cui nodi, a differenza di quelli degli alberi binari, possono avere un numero qualsiasi di figli. Unaltra differenza con gli alberi binari consiste nel fatto che sono definite solo due visite: anticipata e differita. La visita simmetrica, infatti, non avrebbe senso. Come per gli alberi binari, i nodi di un albero n-ario hanno un valore associato. Il costruttore AlberoNArio ha un solo parametro v, memorizzato nella propriet valore. I figli di un albero n-ario sono memorizzati nella propriet figli, inizializzata con un array vuoto.
this.valore = v; this.figli = [];

Il metodo aggiungiFiglio ha un parametro n, un nodo da aggiungere in coda ai figli di un albero n-ario.

this.aggiungiFiglio = function (n) { this.figli.push(n); }

La visita anticipata di un albero n-ario calcolata dal metodo visitaAnticipata che si comporta analogamente allo stesso metodo definito per gli alberi binari. La scansione dei figli effettuata mediante uniterazione determinata.
this.visitaAnticipata = function() { var visita = ""; for (var i in this.figli) { visita += this.figli[i].visitaAnticipata() + " "; } return this.valore + " " + visita; }

Anche la visita differita, calcolata dal metodo visitaDifferita, simile allanaloga visita definita per gli alberi binari.

114

Programmazione in JavaScript

this.visitaDifferita = function() { var visita = ""; for (var i in this.figli) { visita += this.figli[i].visitaDifferita() + " "; } return visita + this.valore + " "; }

Laltezza di un albero n-ario calcolata dal metodo altezza, che usa lalgoritmo per il calcolo del massimo, gi definito per gli array.
this.altezza = function() { if (this.figli.length == 0) { return 0; } var maxAltezza = this.figli[0].altezza(); for (var i = 1; i < this.figli.length; i++) { var altezzaFiglio = this.figli[i].altezza(); if (altezzaFiglio > maxAltezza) { maxAltezza = altezzaFiglio; } } return maxAltezza + 1; }

Lultimo metodo, frontiera, calcola la frontiera di un albero n-ario. Anche questo metodo simile a quello definito per gli alberi binari.
this.frontiera = function() { if (this.figli.length == 0) { return this.valore + " "; } var f = ""; for (var i in this.figli) { f += this.figli[i].frontiera(); } return f; }

115

Programmazione in JavaScript

La seguente funzione crea lalbero n-ario a1 composto da sette nodi effettua la visita anticipata e differita di a1 calcola laltezza e la frontiera di a1.

function foo() { var a1 = new AlberoNArio(1); var a2 = new AlberoNArio(2); var a3 = new AlberoNArio(3); var a4 = new AlberoNArio(4); var a5 = new AlberoNArio(5); var a6 = new AlberoNArio(6); var a7 = new AlberoNArio(7); a1.aggiungiFiglio(a2); a1.aggiungiFiglio(a3); a1.aggiungiFiglio(a4); a2.aggiungiFiglio(a5); a2.aggiungiFiglio(a6); a3.aggiungiFiglio(a7); print(a1.visitaAnticipata()); print(a1.visitaDifferita()); print(a1.frontiera()); print(a1.altezza()); }

13.4 Alberi n-ari con attributi

Un albero n-ario pu essere esteso associando uno o pi attributi ad ogni nodo. Si ottiene cos un albero n-ario con attributi . Il costruttore AlberoNArioAttr differisce dal costruttore AlberoNArio per la presenza di una propriet attributi il cui valore una tabella, inizialmente vuota. Le propriet del costruttore sono tre: valore, figli, attributi.
this.valore = v; this.figli = []; this.attributi = new Tabella();

Lunico metodo nuovo da definire aggiungiAttributo, con due parametri: il nome dellattributo n, il valore dellattributo v.

116

Programmazione in JavaScript

this.aggiungiAttributo = function (n, v) { this.attributi.aggiungi(n, v); }

La seguente funzione crea lalbero n-ario con attributi a1 composto da due nodi aggiunge lattributo x associandogli il valore 100.

function foo() { var a1 = new AlberoNArioAttr(1); var a2 = new AlberoNArioAttr(2); var a3 = new AlberoNArioAttr(3); a1.aggiungiFiglio(a2); a1.aggiungiFiglio(a3); a1.aggiungiAttributo("x", 100); }

13.5 Esercizi
1. Unespressione aritmetica pu essere rappresentata mediante un albero binario i cui nodi sono operatori (addizione, sottrazione, moltiplicazione, divisione) e le foglie sono valori numerici. Definire in JavaScript un costruttore personalizzato per oggetti che rappresentano espressioni aritmetiche. Loggetto ha i seguenti metodi: calcola (): restituisce il valore dellespressione, visualizza (): restituisce una stringa che rappresenta lespressione. Definire una funzione che crea lespressione 2 * 3 + 5 6 / 2 + 1 stampa la rappresentazione dellespressione

calcola e stampa il valore dellespressione. 2. Lalbero genealogico una rappresentazione (parziale) che mostra i rapporti familiari tra gli antenati di un individuo. Abi-

117

Programmazione in JavaScript

tualmente un albero genealogico realizzato utilizzando delle caselle, quadrate per i maschi e circolari per le femmine, contenenti i nomi di ciascuna persona, spesso corredate di informazioni aggiuntive, quali luogo e data di nascita e morte, occupazione o professione. Questi simboli, disposti dallalto verso il basso in ordine cronologico, sono connessi da vari tipi di linee che rappresentano matrimoni, unioni extra coniugali, discendenza [Wikipedia, alla voce Albero genealogico]. Un albero genealogico patrilineare un particolare tipo di albero genealogico in cui sono rappresentati tutti e soli i discendenti per via paterna. Definire in JavaScript un costruttore personalizzato per oggetti che rappresentano alberi genealogici patrilineari. Il costruttore ha un parametro: persona. Loggetto ha i seguenti metodi: aggiungiConiuge (persona, coniuge): aggiunge, nellalbero genealogico, il coniuge a una persona; aggiungiDiscendente (persona, discendente): aggiunge, nellalbero genealogico, un discendente diretto a una persona; visualizzaPersona (persona): restituisce una stringa contenente le informazioni relative a una persona; grado(persona): calcola il grado di parentela tra una persona e il suo antenato pi anziano nellalbero genealogico;

linea (persona): restituisce una stringa contenente la linea di discendenza tra una persona e il suo antenato pi anziano nellalbero genealogico. Definire una funzione che crea un albero genealogico con queste caratteristiche: Bruno, Carlo e Daniela sono figli di Aldo, Enzo e Fabio sono figli di Bruno, Giacomo figlio di Carlo, Alessia la moglie di Aldo, Beatrice la moglie di Bruno, Cecilia la moglie di Carlo;

118

Programmazione in JavaScript

visualizza le informazioni di Aldo ed Enzo; calcola il grado di parentela di Bruno, Giacomo e Fabio; visualizza la linea di discendenza di Enzo e Giacomo.

119

Programmazione in JavaScript

14 HTML
HTML (HyperText Mark-up Language) un linguaggio per la descrizione strutturale e la formattazione di documenti, usato prevalentemente per le pagine web dei siti internet. La sua descrizione volutamente molto ridotta: il lettore interessato ha a disposizione unampia letteratura su HTML, utile per approfondirne la conoscenza.

14.1 Marche
HTML non un linguaggio di programmazione, in quanto non descrive algoritmi, ma si basa sulluso di etichette o marche (tag) per la marcatura di porzioni di testo. Una marca un elemento inserito nel testo di un documento per indicarne la struttura o la formattazione. Una marca formata da una stringa racchiusa tra parentesi angolari (< e >). Subito dopo la parentesi angolare aperta si trova il nome della marca, seguito da eventuali attributi, che ne specificano le caratteristiche. Poich ogni marca determina la formattazione di una parte del documento necessario che questa parte sia indicata da una marca di apertura, che segna linizio della porzione di testo da formattare, e da una marca di chiusura, che ne segna la fine. La marca di chiusura formata dal nome della marca, preceduto dal simbolo /. Nel testo racchiuso dalle due marche (ovvero compreso tra quella di apertura e quella di chiusura) possono comparire altre marche il cui effetto si aggiunge a quello delle marche pi esterne. Ogni marca ha un diverso insieme di possibili attributi, dipendente dalla funzione del tag stesso. Alcune marche hanno uno o pi attributi obbligatori, senza i quali non possono svolgere la loro funzione. La sintassi della definizione di un attributo : NomeAttributo="valore". Il valore dellattributo racchiuso tra doppi apici.

121

Programmazione in JavaScript

Un documento HTML formato da un testo racchiuso dalla marca html e si divide in due parti: unintestazione e un corpo. Nellintestazione, racchiusa dalla marca head, riportato il titolo del documento, mostrato sulla barra del browser quando il documento visualizzato come una pagina. Il corpo rappresenta il documento vero e proprio e contiene sia il testo da visualizzare nella pagina, sia le marche di formattazione. Il corpo del documento racchiuso dalla marca body. Prima della marca html pu esserci unulteriore marca che riporta alcune informazioni sul tipo di documento e sulla versione di HTML utilizzata per descriverlo. Non tratteremo questa marca, ma importante sapere della sua esistenza perch alcuni strumenti per la scrittura di documenti HTML la inseriscono automaticamente. Ecco un esempio di documento HTML:
<html> <head> <title>Titolo del documento</title> </head> <body> Contenuto del documento </body> </html>

14.2 Eventi
Un evento qualcosa che accade in un documento HTML in seguito a unazione dellutente che lo sta visualizzando mediante un browser. Poich il numero degli eventi grande e in continua crescita, conviene raggrupparli in base ad alcuni aspetti comuni: eventi attivati dai tasti del mouse, eventi attivati dai movimenti del mouse, eventi attivati dal trascinamento del mouse, eventi attivati dalla tastiera, eventi attivati dalle modifiche della pagina, eventi legati al focus, eventi attivati dal caricamento degli oggetti,

122

Programmazione in JavaScript

eventi attivati dai movimenti delle finestre,

eventi legati a particolari bottoni. Nel seguito presentiamo una parte degli eventi, quelli pi comuni. Il lettore interessato pu trovare lelenco completo degli eventi consultando la letteratura su HTML. Gli eventi attivati dai tasti del mouse sono: click: attivato quando si clicca su un oggetto; dblClick: attivato con un doppio click; mouseDown: attivato quando si schiaccia il tasto sinistro del mouse;

mouseUp: attivato quando si alza il tasto sinistro del mouse precedentemente schiacciato. Gli eventi mouseDown e mouseUp sono attivati dai due movimenti del tasto sinistro del mouse, il primo quando si preme il tasto e il secondo quando lo si solleva dopo il click. Il doppio click un evento che ingloba gli altri e, per la precisione, attiva in successione mouseDown, mouseUp, click. Gli eventi attivati dai movimenti del mouse sono: mouseOver: attivato quando il mouse si muove su un oggetto; mouseOut: attivato quando il mouse si sposta da un oggetto; Gli eventi mouseOver e mouseOut sono complementari in quanto il primo attivato nel momento in cui il puntatore posto nellarea delloggetto e il secondo quando ne esce. Gli eventi attivati dalla tastiera sono: keyPress: evento attivato quando si preme e si rilascia un tasto o anche quando lo tiene premuto; keyDown: attivato quando si preme un tasto;

keyUp: evento attivato quando un tasto, che era stato premuto, viene rilasciato. Gli eventi legati al caricamento degli oggetti sono:

123

Programmazione in JavaScript

load: evento attivato quando si carica un oggetto, ad esempio una pagina o unimmagine; unload: lopposto del precedente ed attivato quando si lascia una finestra per caricarne unaltra o anche per ricaricare la stessa (col tasto refresh).

14.3 Gestione degli eventi

Quando un evento si verifica il browser determina lazione da compiere in risposta. La situazione pi comune si verifica con levento click: lutente punta un elemento della pagina e clicca il pulsante sinistro; il browser riconosce lelemento puntato dal mouse nel codice HTML e verifica se tale elemento pu sentire levento click. In caso affermativo, il browser esegue il codice JavaScript associato allevento. Per far s che un elemento HTML possa sentire un evento necessario definire un gestore dellevento, come attributo della marca di apertura dellelemento. Lattributo ha un nome determinato convenzionalmente dal nome dellevento preceduto da on. Ad esempio, lattributo per levento click si chiama onclick. Il valore dellattributo una stringa che rappresenta un frammento di codice JavaScript, che sar eseguito quando si verificher levento sullelemento stesso. Consideriamo un semplice documento HTML che contiene una lista di tre elementi: italiano inglese

messaggio. Quando lutente clicca sulla parola messaggio il browser apre una finestra di alert con il messaggio Ciao mondo!. Allelemento corrispondente alla parola messaggio (in questo caso la marca li) stato associato lattributo onclick e un frammento di programma JavaScript che apre la finestra di alert. Il codice memorizzato nel file CiaoMondo.html.

124

Programmazione in JavaScript

<html> <head> <title>Gestione evento click</title> </head> <body> <ul> <li>italiano</li> <li>english</li> <li onclick="alert('Ciao mondo!');">messaggio</li> </ul> </body> </html>

14.4 Script
Un programma JavaScript pu essere inserito in un documento HTML tramite la marca script, che pu comparire sia nellintestazione (la parte del documento racchiusa dalla marca head), sia nel corpo del documento. In questo libro useremo la marca script solo nellintestazione. Tra i vari attributi della marca script, quelli che ci interessano direttamente sono due: type, che definisce il tipo di script, e src, descritto nel seguito. Per usare JavaScript allinterno di un documento HTML necessario assegnare il valore text/javascript allattributo type. Per inserire un programma JavaScript in un documento HTML si possono usare due tecniche: scrivere il programma tra la marca script di apertura e quella di chiusura;

scrivere il programma in un file separato e indicare il nome del file come valore dellattributo src. Gli esempi presentati in questo libro usano la seconda tecnica. Ci permette di organizzare i programmi JavaScript in librerie, ovvero file contenenti programmi utilizzati frequentemente, scritti una volta sola e usati in pi occasioni. Alcuni dei vantaggi legati allutilizzo delle librerie sono:

125

Programmazione in JavaScript

un programma contenuto in una libreria non mescolato alle marche ed pi semplice da leggere; un documento HTML pi leggibile perch non contiene programmi JavaScript;

la manutenzione di un programma contenuto in una libreria semplificata perch le modifiche al programma possono essere effettuate una sola volta nella libreria, per riflettersi automaticamente sui documenti che includono il programma. Un file che contiene un programma JavaScript ha, per convenzione, lestensione .js. Il file deve contenere esclusivamente un programma JavaScript perch la presenza di altri elementi, come ad esempio marche HTML, provocherebbe un errore e farebbe s che il suo contenuto sia ignorato.

14.5 Caricamento di una pagina

Quando il browser termina il caricamento di una pagina HTML viene generato levento load. Questo evento pu essere associato alloggetto window, che rappresenta la finestra in cui compare la pagina appena caricata. Questa associazione viene effettuata nel programma JavaScript associato al documento HTML mediante la marca script. In pratica, la propriet onload di window viene associata al nome di una funzione senza parametri che sar invocata quando si verificher levento load. Riprendiamo lesempio visto in precedenza e definiamo un programma JavaScript che gestisce levento load. La funzione associata si chiama inizializza. Modifichiamo il comportamento dinamico della pagina aggiungendo la gestione dellevento click agli elementi corrispondenti alle parole italiano e english. Vogliamo far s che dopo aver cliccato sulla parola italiano la stringa che comparir nella finestra di alert associata a messaggio sia in italiano (Ciao mondo!) mentre dopo aver cliccato sulla parola english la stringa sia in inglese (Hello world!). Per ottenere questo comportamento definiamo una variabile globale linguaggio, che pu avere come valore la stringa italiano o la stringa english. Per rendere pi leggibile il codice definiamo del programma JavaScript due funzioni, inItaliano e inEnglish, che invo-

126

Programmazione in JavaScript

chiamo nei gestori dellevento click delle parole italiano e english. Definiamo una terza funzione, messaggio, che invochiamo nel gestore dellevento click della parola messaggio. Il codice HTML della pagina il seguente.
<html> <head> <title>Gestione evento click</title> <script type="text/javascript" src="CiaoMondo.js"> </script> </head> <body> <ul> <li onclick="inItaliano();">italiano</li> <li onclick="inEnglish();">english</li> <li onclick="messaggio();">messaggio</li> </ul> </body> </html>

Il programma JavaScript memorizzato nel file CiaoMondo.js.

var linguaggio; window.onload = inizializza; function inizializza() { linguaggio = "italiano"; } function inItaliano() { linguaggio = "italiano"; } function inEnglish() { linguaggio = "english"; } function messaggio() { if (linguaggio == "italiano") { alert("Ciao mondo!"); } if (linguaggio == "english") { alert("Hello world!");

127

Programmazione in JavaScript

} }

14.6 Esercizi
1. Definire in HTML una pagina relativa a un ristorante. La pagina deve contenere una descrizione e un menu. Il menu deve essere diviso in pi parti: antipasti, primi, secondi, contorni, dolci. Cliccando sul nome di un piatto deve comparire il suo prezzo. Passando il mouse sul nome del proprietario, indicato nella descrizione, deve comparire un breve messaggio. Un doppio clic sul nome del ristorante, indicato nella descrizione, deve far comparire un numero di telefono.

128

Programmazione in JavaScript

15 Document Object Model

Il Document Object Model (spesso abbreviato come DOM), letteralmente modello a oggetti del documento, una forma di rappresentazione dei documenti strutturati. DOM lo standard ufficiale del World Wide Web Consortium (spesso abbreviato come W3C) per la rappresentazione di documenti strutturati in maniera da essere neutrali sia per la lingua che per la piattaforma. DOM inoltre la base per una vasta gamma delle interfacce di programmazione delle applicazioni [Wikipedia, alla voce Document Object Model]. Secondo il DOM, un documento rappresentato da un albero che pu essere visitato, modificato e trasformato mediante strumenti specifici o programmi scritti a tal scopo. Lapplicazione pi importante del DOM la troviamo in Internet, per la rappresentazione e la visualizzazione delle pagine web. In pratica, un documento in formato XML (o HTML) rappresentato mediante un albero DOM. Per semplicit presenteremo solo alcuni aspetti del DOM, quelli che ci serviranno per illustrare i concetti di base della programmazione web. Il lettore interessato pu trovare in linea una documentazione molto ampia per approfondire le sue conoscenze.

15.1 Struttura e propriet

Un albero DOM un albero n-ario con attributi. I nodi dellalbero sono di varia natura: nodi documento (document nodes) nodi elemento (element nodes) nodi testo (text nodes) nodi attributo (attribute nodes).

129

Programmazione in JavaScript

La struttura principale di un albero DOM formata da nodi elemento che possono avere un numero variabile di figli. La radice sempre un nodo documento e i nodi testo possono essere solo foglie di un albero DOM. I nodi attributo definiscono gli attributi dei nodi elemento. La radice dellalbero DOM associato a una pagina HTML corrisponde alloggetto document. Ogni nodo ha le seguenti propriet, oltre ad altre che vedremo nel seguito: nodeType nodeName nodeValue childNodes

attributes. Il tipo di un nodo definito dalla propriet nodeType, che pu avere i seguenti valori: 1: nodo elemento 2: nodo attributo 3: nodo testo

9: nodo documento. Il nome di un nodo, definito dalla propriet nodeName, ha un significato che dipende dal tipo del nodo. Il nome di un nodo elemento corrisponde alla marca del corrispondente documento XML. Il nome di un nodo attributo corrisponde al nome dellattributo. Il nome di un nodo testo predefinito ed sempre #text, cos come il nome di nodo documento sempre #document. Il valore di un nodo, definito dalla propriet nodeValue, ha anchesso un significato che dipende dal tipo del nodo. Il valore di un nodo elemento null. Il valore di un nodo attributo il valore dellattributo Il valore di un nodo testo il testo associato al nodo. Il valore di un nodo documento null. Il valore della propriet childNodes un array che contiene i figli di un nodo elemento o di un nodo documento. Se un nodo non ha fi-

130

Programmazione in JavaScript

gli, il valore della propriet un array vuoto. Il valore della propriet attributes un array che contiene gli attributi di un nodo elemento o di un nodo documento. Se un nodo non ha attributi, il valore della propriet attributes null.

15.2 Navigazione
Il modello DOM prevede diverse tecniche per visitare gli alberi DOM e per muoversi (navigare) tra i suoi nodi. Queste tecniche si basano sul valore della propriet childNodes e di altre propriet che collegano un nodo ai suoi nodi vicini: firstChild lastChild firstSibling lastSibling previousSibling nextSibling

parentNode. Queste propriet, quando sono definite, hanno i seguenti valori: firstChild il primo figlio di un nodo, lastChild lultimo figlio di un nodo, firstSibling il primo fratello di un nodo, lastSibling lultimo fratello di un nodo, previousSibling il fratello precedente di un nodo, nextSibling il fratello successivo di un nodo, parentNode il padre di un nodo. Se una di queste propriet non definita il suo valore null. La tecnica pi comune per visitare i figli di un nodo si basa su uniterazione determinata che fa uso della propriet childNodes.
for (var i = 0; i < n.childNodes.length; i++) { var nodoFiglio = n.childNodes[i]; }

Unaltra tecnica di visita si basa su uniterazione indeterminata e sulle propriet firstSibling e nextSibling.

131

Programmazione in JavaScript

var nodoFiglio = n.firstSibling; while (nodoFiglio != null) { nodoFiglio = nodoFiglio.nextSibling; }

La visita pu essere effettuata anche in ordine inverso, partendo dallultimo figlio e arrivando al primo. In questo caso si usano le propriet lastSibling e previousSibling.
var nodoFiglio = n.lastSibling; while (nodoFiglio != null) { nodoFiglio = nodoFiglio.previousSibling; }

Unaltra tecnica permette di visitare un albero partendo da un nodo fino ad arrivare alla sua radice. In questo caso si usa la propriet parentNode. Nellesempio che segue la visita parte dalla radice, procede scegliendo il primo figlio e poi torna indietro alla radice.
while (n.firstChild != null) { n = n.firstChild; } while (n.parentNode != null) { n = n.parentNode; }

15.3 Ricerca
La ricerca di un nodo si effettua utilizzano i seguenti metodi: getElementsByTagName getElementById. Il metodo getElementsByTagName ha un unico argomento, una stringa t, e pu essere invocato su un nodo elemento o su un nodo documento. Il metodo effettua una visita anticipata dellalbero radicato nel nodo su cui stato invocato e raccoglie in una collezione tutti e soli i nodi la cui propriet nodeName ha un valore uguale a t. Alla fine della visita il metodo restituisce la collezione (possibilmente vuota).

132

Programmazione in JavaScript

Nellesempio che segue la ricerca parte dalla radice dellalbero DOM. Literazione determinata10 scandisce la collezione cos ottenuta.
var l = document.getElementsByTagName("br"); for (var i = 0; i < l.length; i++) { alert (l[i].nodeName); }

Il metodo getElementById ha un unico argomento v, e pu essere invocato su un nodo elemento o su un nodo documento. Il metodo effettua una visita anticipata dellalbero radicato nel nodo su cui stato invocato e restituisce il primo nodo il cui attributo id ha un valore uguale a v, null altrimenti. Nellesempio che segue il valore della variabile n un nodo elemento il cui attributo id vale la stringa alfa. Se un tale nodo non presente il valore della variabile n null.
var n = document.getElementById("alfa"); if (n != null) { alert (n.nodeName); }

15.4 Creazione e modifica

Per modificare un albero DOM si pu procedere in due modi diversi: creare un nuovo nodo e aggiungerlo allalbero, eliminare un nodo esistente. La creazione di un nodo pu essere effettuata usando i seguenti metodi: createElement createTextNode. Il metodo createElement ha un parametro, una stringa, che determina il nome del nodo elemento che si vuole creare. Il metodo createTextNode ha un parametro, una stringa, che determina il valore del

10La scansione deve essere effettuata indicando esplicitamente la lunghezza della collezione.

133

Programmazione in JavaScript

nodo testo che si vuole creare. Questi due metodi devono essere invocati sulloggetto document.
var n1 = document.createElement("br"); var n2 = document.createTextNode("alfa");

Una volta creato un nuovo nodo, possibile aggiungerlo allalbero utilizzando uno dei seguenti metodi: appendChild insertBefore. Il metodo appendChild ha un parametro, un nodo elemento, che aggiunto in coda ai figli del nodo elemento su cui si invoca il metodo.
var n1 = document.createElement("br"); n.appendChild(n1);

Il metodo insertBefore ha due parametri, il nodo che si intende inserire e il nodo prima del quale deve essere inserito. Il metodo invocato sul padre del secondo parametro.
var n2 = document.createTextNode("alfa"); n.insertBefore(n2, n.firstSibling);

La rimozione di un nodo, e di tutto lalbero di cui tale nodo la radice, pu essere effettuata usando i seguenti metodi: removeChild replaceChild. Il metodo removeChild ha un parametro, il nodo che si intende rimuovere. Il metodo deve essere invocato sul padre del nodo che si intende eliminare.
n.removeChild(n.firstSibling);

Il metodo replaceChild ha due parametri, il nodo che si intende inserire e il nodo che si intende sostituire. Il metodo deve essere invocato sul padre del nodo che si intende sostituire.

134

Programmazione in JavaScript

var n1 = document.createElement("br"); n.replaceChild(n1, n.firstChild);

15.5 Attributi
Gli attributi di un nodo sono gestiti dai seguenti metodi: getAttribute setAttribute

removeAttribute. Il metodo getAttribute ha un unico argomento, una stringa a. Pu essere invocato su un nodo elemento o un nodo documento e restituisce il valore dellattributo il cui nome a, undefined altrimenti.
var valore = n.getAttribute("a");

Il metodo setAttribute ha due argomenti: il nome a di un attributo e il valore v. Il metodo modifica il valore dellattributo a assegnandogli il valore v. Se lattributo a non esiste, il metodo lo crea e gli assegna il valore v.
n.setAttribute("a", 123); n.setAttribute("b", true);

Il metodo removeAttribute ha un parametro, il nome a dellattributo che si intende eliminare dagli attributi nel nodo su cui si invoca il metodo.
n.removeAttribute("a");

15.6 Eventi
Nel capitolo precedente abbiamo affrontato il problema della gestione degli eventi. Per reagire a un evento generato dalla pagina definiamo una funzione specifica. A volte necessario conoscere lelemento che ha generato un evento, per far s che la funzione possa navigare a partire dal nodo relativo a quellelemento. Questa informazione disponibile utilizzando il valore delloggetto this. Ad esempio, supponiamo di aver definito una lista di elementi a cui abbiamo associato,

135

Programmazione in JavaScript

in HTML, un attributo alfa con valori distinti per ogni elemento. Levento onclick gestito dalla funzione foo.
<ol> <li alfa="1" onclick="foo();">Uno</li> <li alfa="2" onclick="foo();">Due</li> <li alfa="3" onclick="foo();">Tre</li> </ol>

La funzione foo pu accedere al valore dellattributo alfa dellelemento che stato cliccato.
function foo() { alert(this.getAttribute("alfa")); }

15.7 Propriet innerHTML

La propriet innerHTML non definita nello standard W3C ma, di fatto, gestita dalla maggior parte dei browser attualmente disponibili. Il valore di questa propriet una stringa che rappresenta il codice HTML corrispondente allalbero radicato nel nodo corrispondente. La propriet pu essere modificata, assegnando un valore che deve essere una stringa corrispondente a una sequenza corretta di marche HTML. Leffetto dellassegnamento consiste nella modifica dinamica dellalbero DOM, con linserzione dellalbero corrispondente alla stringa HTML. Un esempio di modifica della propriet innerHTML il seguente:
n.innerHTML = "<ul><li>alfa</li> <li>beta</li></ul>";

15.8 Generazione dinamica

Una pagina pu contenere un modulo per la raccolta di informazioni, definito dalla marca form. Allinterno del modulo sono definiti elementi per linserimento di dati, pulsanti per linterazione con lutente, menu e altri elementi grafici. La definizione di una pagina con queste caratteristiche richiede un attento lavoro di analisi e di progettazione grafica.

136

Programmazione in JavaScript

In alcuni casi necessario generare dinamicamente questi elementi, a partire da informazioni che possono variare a seconda del contesto di uso della pagina. Ad esempio, le voci di un menu possono cambiare in seguito allinserimento di un valore in un campo numerico. Ci rende la pagina pi semplice e pi intuitiva da usare perch capace di adattarsi alle esigenze e alle aspettative dellutente. Per ottenere questo comportamento necessario utilizzare appieno le potenzialit offerte da HTML e da JavaScript, combinandole insieme secondo schemi efficaci e sperimentati. Nel seguito definiremo alcuni problemi e presenteremo le relative soluzioni. Il trattamento di questa tematica non pu essere esaustivo ma copre uno spettro abbastanza ampio di casi. Supponiamo di dovere definire un menu formato da un numero limitato (ad esempio, inferiore a dieci) di voci. Supponiamo, inoltre che la scelta effettuata dallutente debba essere convalidata dalla pressione di un pulsante. Conoscendo a priori le voci possibile definire un modulo formato da un elemento menu e da un pulsante. Il codice HTML della pagina il seguente.
<html> <head> <script type="text/javascript" src="Menu1.js"></script> </head> <body> <form> <select id="selezione"> <option value="alfa">Uno</option> <option value="beta">Due</option> <option value="gamma">Tre</option> </select> <input type="button" value="Conferma" onclick="conferma();"/> </form> </body> </html>

Il programma JavaScript associato alla pagina il seguente.

137

Programmazione in JavaScript

var nodoSelect; function inizializza() { nodoSelect = document.getElementById("selezione"); } function conferma() { alert(nodoSelect.value); } window.onload = inizializza;

Per rendere dinamica la generazione della pagina definiamo gli array selezioni e valori. Larray selezioni inizializzato con le tre voci che compaiono nel menu (le stringhe Uno, Due, Tre). Larray voci inizializzato con i valori associati alle voci del menu (le stringhe alfa, beta, gamma). Utilizzando questi array possibile generare dinamicamente una stringa equivalente al codice che definisce lelemento select e che compare nella pagina HTML. Assegnando la stringa alla propriet innerHTML di un elemento HTML si ottiene dinamicamente lo stesso effetto ottenuto in maniera statica. La pagina cos definita.
<html> <head> <script type="text/javascript" src="Menu2.js"></script> </head> <body> <form> <select id="selezione"></select> <input type="button" value="Conferma" onclick="conferma();"/> </form> </body> </html>

Il programma JavaScript associato alla pagina il seguente.

var nodoSelect; function inizializza() { var selezioni = ["Uno", "Due", "Tre"]; var valori = ["alfa", "beta", "gamma"]; var s = "";

138

Programmazione in JavaScript

for (var i in selezioni) { s += '<option value="' + valori[i] + '">' + selezioni[i] + '</option>'; } nodoSelect = document.getElementById("selezione"); nodoSelect.innerHTML = s; } function conferma() { alert(nodoSelect.value); } window.onload = inizializza;

Come ultimo passaggio, eliminiamo anche il codice JavaScript associato allattributo onclick, gestendo questa associazione nella funzione inizializza. Vedremo che questa tecnica permette di gestire in maniera efficace gli eventi di una pagina. La pagina cos definita.
<html> <head> <script type="text/javascript" src="Menu3.js"></script> </head> <body> <form> <select id="selezione"></select> <input type="button" value="Conferma" id="conferma"/> </form> </body> </html>

Il programma JavaScript associato alla pagina il seguente.

var nodoInput; var nodoSelect; function inizializza() { nodoInput = document.getElementById("conferma"); nodoInput.onclick = conferma; var selezioni = ["Uno", "Due", "Tre"]; var valori = ["alfa", "beta", "gamma"]; var s = ""; for (var i in selezioni) {

139

Programmazione in JavaScript

s += '<option value="' + valori[i] + '">' + selezioni[i] + '</option>'; } nodoSelect = document.getElementById("selezione"); nodoSelect.innerHTML = s; } function conferma() { alert(nodoSelect.value); } window.onload = inizializza;

Un problema pi complesso consiste nella generazione dinamica di una pagina che contiene un numero variabile di pulsanti ognuno dei quali associato a una casella di testo. Quando lutente clicca su un pulsante levento invoca una funzione che ha come argomento il valore della casella di testo associata al pulsante premuto. Come per il problema precedente, definiamo una pagina completamente statica, che contiene due pulsanti e due caselle di testo. La pagina cos definita.
<html> <head> <script type="text/javascript" src="Pulsanti1.js"></script> </head> <body><form> <input type="text" name="testo1"> <input type="button" value="Uno" onclick="pulsante1(testo1.value);"/> <br/> <input type="text" name="testo2"> <input type="button" value="Due" onclick="pulsante2(testo2.value);"/> </form></body> </html>

Il programma JavaScript associato il seguente.

function pulsante1(s) { alert(s); } function pulsante2(s) {

140

Programmazione in JavaScript

alert(s); }

Per rendere dinamica la generazione della pagina definiamo un array, valori, che contiene le stringhe che definiscono lattributo value dellelemento input che definisce un pulsante. Larray inizializzato con le stringhe Uno e Due. Utilizzando questo array possibile generare il codice HTML corrispondente agli elementi. Poich ad ogni pulsante associato una casella di testo, la generazione del codice tiene conto anche di questo elemento. La pagina cos definita.
<html> <head> <script type="text/javascript" src="Pulsanti2.js"></script> </head> <body> <form id="modulo"></form> </body> </html>

Il programma JavaScript il seguente.

var nodoForm; function inizializza() { var valori = ["Uno", "Due"]; var s = ""; for (var i = 0; i < valori.length; i++) { s += '<input type="text" name="testo' + i + '">'; s += '<input type="button" value="' + valori[i] + '"'; s += 'onclick="pulsante' + (i + 1) + '(testo' + i + '.value);"/>'; if (i < valori.length - 1) { s += '<br/>'; } } nodoForm = document.getElementById("modulo"); nodoForm.innerHTML = s; } function pulsante1(s) { alert(s);

141

Programmazione in JavaScript

} function pulsante2(s) { alert(s); } window.onload = inizializza;

La soluzione appena presentata assume che ad ogni pulsante sia associata una funzione specifica. Per generalizzare il problema a un numero variabile di pulsanti necessario definire ununica funzione che ha come parametro il numero del pulsante che ha generato levento click. Al suo interno la funzione gestisce opportunamente questo valore. Il codice HTML resta invariato, mentre cambia il programma JavaScript.
var nodoForm; function inizializza() { var valori = ["Uno", "Due", "Tre"]; var s = ""; for (var i = 0; i < valori.length; i++) { s += '<input type="text" name="testo' + i + '">'; s += '<input type="button" value="' + valori[i] + '"'; s += 'onclick="pulsante' + '(' + (i + 1) + ', testo' + i + '.value);"/>'; if (i < valori.length - 1) { s += '<br/>'; } } nodoForm = document.getElementById("modulo"); nodoForm.innerHTML = s; } function pulsante(i, s) { alert("Pulsante" + i + ": " + s); } window.onload = inizializza;

15.9 Esercizi
1. Definire in HTML una pagina che contiene una lista numerata di nomi di animali. Cliccando sul nome di un animale, il nome viene spostato in fondo alla lista.

142

Programmazione in JavaScript

2. Definire in HTML una pagina che contiene unarea di testo e un pulsante. Cliccando sul pulsante la pagina visualizza la lista delle parole (senza ripetizioni) contenute nellarea di testo.

143

Programmazione in JavaScript

16 XML
XML un linguaggio per la rappresentazione strutturata di dati. Lacronimo XML significa eXtensible Markup Language. Come HTML, anche XML un linguaggio di marcatura ma, a differenza di HTML, le marche non sono predefinite. La loro definizione a carico di chi interessato a rappresentare i propri dati. Unaltra differenza rispetto ad HTML consiste nel fatto che XML non stato progettato per visualizzare documenti ma per rappresentarli ai fini della loro memorizzazione e trasmissione.

16.1 Un documento XML

Un esempio molto semplice di documento XML il seguente.
<?xml version="1.0"?> <ricettario anno="2012"> <ricetta categoria="Primo"> <nome>Gnocchi</nome> <difficolta>media</difficolta> <preparazione>30</preparazione> </ricetta> <ricetta categoria="Secondo"> <nome>Cotoletta</nome> <difficolta>bassa</difficolta> <preparazione>15</preparazione> </ricetta> </ricettario>

Il documento rappresenta un ricettario del 2012 che contiene due ricette: Gnocchi e Cotoletta. Per ogni ricetta indicata la categoria, il grado di difficolt e il tempo di preparazione. Le marche utilizzate sono: ricettario, ricetta, nome, difficolta11, preparazione. Gli attributi
11 Nelle marche XML non si possono usare segni diacritici.

145

Programmazione in JavaScript

utilizzati sono: anno e categoria. Il documento memorizzato nel file Ricettario.xml.

16.2 Il parser XML

Il contenuto di un documento XML pu essere letto mediante un parser, un programma che riconosce la struttura del documento espressa mediante le marche e gli attributi associati e costruisce lalbero DOM corrispondente al documento. Linvocazione del parser pu essere effettuata in modi diversi, che dipendono dal particolare browser utilizzato. Nel seguito presentiamo la funzione caricaXML che funziona correttamente con i principali browser attualmente disponibili.
function caricaXML(nomeFile) { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", nomeFile, false); xmlhttp.send(); return xmlhttp.responseXML; }

La funzione restituisce lalbero DOM che rappresenta il documento XML memorizzato nel file indicato nel parametro nomeFile. Per leggere il contenuto del file Ricettario.xml, che contiene il documento XML descritto in precedenza, si invoca il parser con il seguente comando. Per ragioni di sicurezza, il parser pu accedere solo a file memorizzati nella stessa cartella da cui si attiva EasyJS o in quella in cui memorizzato il file HTML a cui associato il programma JavaScript che contiene linvocazione del parser.
var d = caricaXML("Ricettario.xml");

Per visualizzare il contenuto del file XML usiamo una pagina HTML cos definita.

146

Programmazione in JavaScript

<html> <head> <script type="text/javascript" src="Ricettario.js"> </script> </head> <body> <b>Le mie ricette</b> <br/> <ol id="lista"></ol> </body> </html>

Il file Ricettario.js contiene un programma JavaScript che carica il file Ricettario.xml utilizzando la funzione caricaXML vista in precedenza e modifica dinamicamente la pagina.
function caricaXML() { } function crea(l) { var s = ""; for (var i = 0; i < l.length; i++) { var ln = l[i].getElementsByTagName("nome"); var n = ln[0].firstChild.nodeValue; var ld = l[i].getElementsByTagName("difficolta"); var d = ld[0].firstChild.nodeValue; var lp = l[i].getElementsByTagName("preparazione"); var p = lp[0].firstChild.nodeValue; var r = n + ", difficolt " + d + ", " + p + " minuti di preparazione"; s += "<li>" + r + "</li>"; } return s; } function inizializza() { var nodo = caricaXML("Ricettario.xml"); var l = nodo.getElementsByTagName("ricetta"); var lista = document.getElementById("lista"); lista.innerHTML = crea(l);

147

Programmazione in JavaScript

} window.onload = inizializza;

16.3 Creazione di oggetti definiti mediante XML

In molte situazioni necessario effettuare dei calcoli sui dati caricati dinamicamente da un file XML. Questi calcoli sono richiesti dallutente mediante linterfaccia grafica di una pagina realizzata mediante campi di testo, pulsanti e altri elementi di interazione previsti da HTML. Una tecnica per rendere agevole lesecuzione di questi calcoli consiste nella creazione di oggetti a partire dal contenuto di un file XML. Nel caso del ricettario, per esempio, immediato riconoscere gli oggetti Ricettario e Ricetta, definiti mediante le marche con lo stesso nome. Loggetto Ricettario avr una propriet anno, mentre loggetto Ricetta avr le propriet categoria, nome, difficolt e preparazione. In JavaScript i due costruttori saranno cos (parzialmente) definiti.
function Ricettario (a) { this.anno = a; this.lista = []; } function Ricetta (c, n, d, p) { this.categoria = c; this.nome = n; this.difficolt = d; this.preparazione = p; }

Dopo aver caricato il file Ricettario.xml si procede a creare un oggetto Ricettario e tanti oggetti Ricetta. La creazione di questi oggetti guidata dalla struttura dellalbero DOM costruito dal parser XML che ha letto il file Ricettario.xml. La creazione delloggetto Ricetta effettuata dalla funzione creaRicetta, che ha come parametro un nodo dellalbero DOM creato dal parser XML il cui nome ricetta.
function creaRicetta(nodo) { var c = nodo.getAttribute("categoria");

148

Programmazione in JavaScript

var ln = nodo.getElementsByTagName("nome"); var n = ln[0].firstChild.nodeValue; var ld = nodo.getElementsByTagName("difficolta"); var d = ld[0].firstChild.nodeValue; var lp = nodo.getElementsByTagName("preparazione"); var p = lp[0].firstChild.nodeValue; return new Ricetta(c, n, d, p); }

La creazione delloggetto Ricettario effettuata dalla funzione creaRicettario, che ha come parametro la radice dellalbero DOM creato dal parser XML.
function creaRicettario(radice) { var nodo = radice.getElementsByTagName("ricettario")[0]; var anno = nodo.getAttribute("anno"); var l = nodo.getElementsByTagName("ricetta"); var a = []; for (var i = 0; i < l.length; i++) { a.push(creaRicetta(l[i])); } var r = new Ricettario(anno); r.lista = a; return r; }

La creazione del ricettario avviene mediante linvocazione della funzione creaRicettario, dopo linvocazione della funzione caricaXML. La variabile globale ilRicettario usata per memorizzare loggetto creato.
var ilRicettario; function inizializza() { var nodo = caricaXML("Ricettario.xml"); ilRicettario = creaRicettario(nodo); } window.onload = inizializza;

Una volta creato loggetto Ricettario e gli oggetti Ricetta possibile definire i metodi che generano la stringa HTML da assegnare alla

149

Programmazione in JavaScript

propriet innerHTML dellelemento lista, per modificare dinamicamente la pagina.

this.visualizza = function() { var s = ""; for (var i in this.lista) { s += this.lista[i].visualizza(); } return s; } this.visualizza = function() { return "<li>" + this.nome + ", difficolt " + this.difficolt + ", " + this.preparazione + " minuti di preparazione" + "</li>"; }

La versione definitiva della funzione inizializza la seguente.

function inizializza() { var nodo = caricaXML("Ricettario.xml"); ilRicettario = creaRicettario(nodo); var lista = document.getElementById("lista"); lista.innerHTML = ilRicettario.visualizza(); }

La tecnica appena presentata pu essere migliorata trasformando la funzione creaRicettario nel metodo inizializza delloggetto Ricettario. Anche la funzione creaRicetta pu essere trasformata nel metodo inizializza delloggetto Ricetta. In questo modo la creazione degli oggetti completamente gestita dai metodi degli oggetti stessi.
this.inizializza = function (r) { var nodo = r.getElementsByTagName("ricettario")[0]; this.anno = nodo.getAttribute("anno"); var l = nodo.getElementsByTagName("ricetta"); for (var i = 0; i < l.length; i++) {

150

Programmazione in JavaScript

var ri = new Ricetta(); ri.inizializza(l[i]); this.lista.push(ri); } } this.inizializza = function(nodo) { var c = nodo.getAttribute("categoria"); this.categoria = c; var ln = nodo.getElementsByTagName("nome"); var n = ln[0].firstChild.nodeValue; this.nome = n; var ld = nodo.getElementsByTagName("difficolta"); var d = ld[0].firstChild.nodeValue; this.difficolt = d; var lp = nodo.getElementsByTagName("preparazione"); var p = lp[0].firstChild.nodeValue; this.preparazione = p; }

Anche i due costruttori devono essere opportunamente modificati.

function Ricettario () { this.anno; this.lista = []; } function Ricetta () { this.categoria; this.nome; this.difficolt; this.preparazione; }

La funzione inizializza deve essere modificata per tener conto delle modifiche effettuate.
function inizializza() { var nodo = caricaXML("Ricettario.xml"); ilRicettario = new Ricettario(); ilRicettario.inizializza(nodo); var lista = document.getElementById("lista");

151

Programmazione in JavaScript

lista.innerHTML = ilRicettario.visualizza(); }

16.4 Esercizi
1. Definire in JavaScript una funzione che calcola e restituisce una stringa che rappresenta un documento XML. La funzione ha come argomento lalbero DOM creato dal parser XML a partire dal documento XML stesso. La funzione assume che nel documento XML le parti testuali siano solo allinterno di coppie di marche terminali (che non hanno figli, cio). Invocare la funzione utilizzando il file Ricettario.xml dopo averlo letto mediante la funzione caricaXML. 2. Definire in JavaScript una funzione che calcola e restituisce una stringa che rappresenta un documento XML. La funzione ha come argomento lalbero DOM creato dal parser XML a partire dal documento XML stesso. La funzione assume che nel documento XML le parti testuali siano solo allinterno di coppie di marche terminali (che non hanno figli, cio). Infine, la funzione visualizza anche il valore degli attributi XML, rispettandone la sintassi. Invocare la funzione utilizzando il file Ricettario.xml dopo averlo letto mediante la funzione caricaXML. 3. Definire in HTML una pagina che visualizza un menu a tendina contenente i nomi degli autori (senza ripetizioni) dei libri contenuti in un documento XML.

152

Programmazione in JavaScript

17 Un esempio completo
In questo capitolo presentiamo un esempio che ci serve per mettere in pratica i concetti presentati finora. Abbiamo scelto di mostrare la realizzazione di una rubrica sia per ragioni storiche sia perch con questo esempio possiamo affrontare una buona parte dei problemi che si presentano quando si vuole rendere dinamica una pagina HTML mediante un programma JavaScript.

17.1 Il problema
Una rubrica un elenco di voci, ognuna delle quali contiene informazioni su una persona: nome e cognome, numeri di telefono, indirizzi, data di nascita, tanto per citarne alcune. Tradizionalmente realizzate su carta, le rubriche si sono trasformate in oggetti digitali che troviamo su cellulari, calcolatori, telefoni. Questo esempio affronta il problema di realizzare una rubrica che permette di cercare le voci in base a due criteri di ricerca. Per semplicit, per ogni voce la rubrica memorizza il nome, il cognome, il numero di telefono e il gruppo di appartenenza di una persona.

17.2 Il codice HTML

La rubrica realizzata mediante una pagina HTML. La ricerca per gruppo utilizza un menu a tendina mediante il quale si seleziona uno dei gruppi di appartenenza delle persone. Il pulsante alla destra del menu effettua la ricerca delle voci che saranno poi elencate nella parte bassa della pagina. La ricerca per nome o per cognome utilizza due campi di testo nei quali si inseriscono i valori da usare per la ricerca. Anche in questo caso, il pulsante alla destra dei due campi effettua la ricerca. Lesito negativo della ricerca segnalato da una finestra di

153

Programmazione in JavaScript

alert. Il pulsante Reimposta cancella il contenuto delle caselle e aggiorna la scelta corrente del menu.

La figura mostra il risultato della ricerca delle voci che appartengono al gruppo Amico. Il codice completo del documento Rubrica.html il seguente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="charset=windows-1252"/> <title>Rubrica</title> <script type="text/javascript" src="Rubrica.js"></script> </head> <body> <h2>Rubrica</h2> <form> <select id="selectGruppo" size="1"></select> <input type="button" value="Cerca" id="cercaPerGruppo"/> <br/> <input type="text" id="nome"/> Nome <input type="text" id="cognome"/> Cognome <input type="button" value="Cerca" id="cercaPerNomeCognome"/>

154

Programmazione in JavaScript

<br/> <ol id="elenco"></ol> <input type="reset" id="reimposta"/> </form> </body> </html>

La pagina contiene un modulo al cui interno sono dichiarati un menu, tre pulsanti, due campi di testo, una lista di elementi puntati. Il menu e la lista sono generati dinamicamente, come vedremo nel seguito. Il codice JavaScript contenuto nel file Rubrica.js, come indicato dal tag script.

17.3 Gli oggetti Rubrica e Voce

Le informazioni relative alla rubrica sono mantenute in due oggetti: Voce e Rubrica. Loggetto Voce memorizza le informazioni relative a una voce. Loggetto Rubrica gestisce tutti gli aspetti relativi alla rubrica vera e propria e contiene un array di oggetti Voce. Il costruttore delloggetto Voce ha quattro propriet: nome, cognome, telefono, gruppo.
function Voce() { this.nome; this.cognome; this.telefono; this.gruppo; }

Il costruttore delloggetto Rubrica ha due propriet voci e gruppi, inizializzate entrambi con un array vuoto. La propriet voci contiene le voci della rubrica, la propriet gruppi contiene i gruppi di appartenenza delle voci.
function Rubrica() { this.voci = []; this.gruppi = []; }

155

Programmazione in JavaScript

17.4 Caricamento e inizializzazione

La creazione della rubrica, inizialmente vuota, viene effettuata dal gestore dellevento load (evento generato al termine del caricamento della pagina HTML) che invoca il metodo inizializza del costruttore Rubrica, il cui unico parametro il nome del file ( Rubrica.xml) che contiene la descrizione del contenuto della rubrica.
<?xml version="1.0"?> <rubrica> <voce gruppo="Amico"> <nome>Mario</nome> <cognome>Rosa</cognome> <telefono>050343434</telefono> </voce> <voce gruppo="Parente"> <nome>Carlo</nome> <cognome>Neri</cognome> <telefono>050434343</telefono> </voce> </rubrica>

Il gestore dellevento load il seguente.

var r; function inizializza() { r = new Rubrica(); r.inizializza("Rubrica.xml"); } window.onload = inizializza;

Il metodo inizializza deloggetto Rubrica il seguente.

this.inizializza = function(nomeFile) { var doc = caricaXML(nomeFile); var l = doc.getElementsByTagName("voce"); for (i in l) { var v = new Voce(); v.inizializza(l[i]);

156

Programmazione in JavaScript

this.voci.push(v); var j = 0; while ((j < this.gruppi.length) && (this.gruppi[j].gruppo != v.gruppo)) { j++; } if (j == this.gruppi.length) { this.gruppi.push(v.gruppo); } } }

Questo metodo utilizza il metodo inizializza delloggetto Voce.

this.inizializza = function(nodo) { var l; l = nodo.getElementsByTagName("nome"); this.nome = l[0].firstChild.nodeValue; l = nodo.getElementsByTagName("cognome"); this.cognome = l[0].firstChild.nodeValue; l = nodo.getElementsByTagName("telefono"); this.telefono = l[0].firstChild.nodeValue; this.gruppo = nodo.getAttribute("gruppo"); }

17.5 Gestione degli eventi

La creazione dinamica del menu di selezione per la ricerca basata sul nome del gruppo effettuata dal metodo creaSelect delloggetto Rubrica.
this.creaSelect = function() { var s = ""; s += '<option value="" selected="selected">' + 'Seleziona un gruppo</option>' var l = r.gruppi; for (i in l) { s += '<option value="' + l[i] + '">' + l[i] + '</option>'; }

157

Programmazione in JavaScript

return s; }

La gestione degli eventi click (eventi generati premendo uno dei tre pulsanti presenti nella pagina) viene effettuata estendendo la definizione della funzione inizializza.
function inizializza() { var p1 = document.getElementById("cercaPerGruppo"); p1.onclick = cercaPerGruppo; var p2 = document.getElementById("cercaPerNomeCognome"); p2.onclick = cercaPerNomeCognome; var p3 = document.getElementById("reimposta"); p3.onclick = reimposta; r = new Rubrica(); r.inizializza("Rubrica.xml"); var nodo = document.getElementById("selectGruppo"); nodo.innerHTML = r.creaSelect(); }

17.6 Ricerca di voci

Le funzioni di ricerca previste per la rubrica sono attivate dai due pulsanti che affiancano il menu e le caselle di testo. Per ogni pulsante stata definita una funzione, associata al relativo evento click. Per la ricerca basata sul nome del gruppo la funzione si chiama cercaPerGruppo, per la ricerca basata sul nome o sul cognome la funzione si chiama cercaPerNomeCognome.
function var s var i while cercaPerGruppo() { = document.getElementById("selectGruppo"); = 0; ((i < s.options.length) && !s.options[i].selected) { i++;

} var l = r.cercaGruppo(s.options[i].value); var nodo = document.getElementById("elenco"); if (l == "") { nodo.innerHTML = null; alert("Nessuna voce trovata");

158

Programmazione in JavaScript

} else { nodo.innerHTML = r.visualizza(l); } } function cercaPerNomeCognome() { var n = document.getElementById("nome").value; var c = document.getElementById("cognome").value; var l = r.cercaNomeCognome(n, c); var nodo = document.getElementById("elenco"); if (l == "") { nodo.innerHTML = null; alert("Nessuna voce trovata"); } else { nodo.innerHTML = r.visualizza(l); } }

Per effettuare la ricerca le due funzioni invocano, rispettivamente, il metodo cercaGruppo e cercaNomeCognome delloggetto Rubrica.
this.cercaGruppo = function(g) { var l = []; for (i in this.voci) { if (this.voci[i].gruppo == g) { l.push(this.voci[i]); } } return l; } this.cercaNomeCognome = function(n, c) { var l = []; for (i in this.voci) { if ((this.voci[i].nome == n) || (this.voci[i].cognome == c)) { l.push(this.voci[i]); } }

159

Programmazione in JavaScript

return l; }

17.7 Visualizzazione
La visualizzazione dei risultati utilizza una finestra di alert, in caso di esito negativo, il metodo visualizza delloggetto Rubrica altrimenti.
this.visualizza = function(l) { var s = ""; for (i in l) { s += l[i].visualizza(); } return s; }

La visualizzazione delle informazioni di una voce a carico del metodo visualizza delloggetto Voce.
this.visualizza = function() { var n = this.nome; var c = this.cognome; var g = this.gruppo; var t = this.telefono; return '<li>' + n + ' ' + c + " (" + g + ") " + t + '</li>'; }

Infine, il pulsante Reimposta associato alla funzione reimposta.

function reimposta() { var nodo = document.getElementById("elenco"); nodo.innerHTML = null; }

160

Programmazione in JavaScript

18 Soluzione degli esercizi della seconda parte

18.1 Esercizi del capitolo 11
1. Definire in JavaScript una funzione ricorsiva che calcola e restituisce la differenza tra due interi maggiori o uguali a zero. La funzione ha due parametri: x, y. Invocare la funzione con le seguenti coppie di valori: 5, 0 3, 3 9, 2.
function sottrazione(x, y) { if (y == 0) { return x; } else { return sottrazione(x - 1, y 1); } } print (sottrazione(5, 0)); print (sottrazione(3, 3)); print (sottrazione(9, 2));

2. Definire in JavaScript una funzione ricorsiva che calcola e restituisce la relazione di minore tra due interi maggiori o uguali a zero. La funzione ha due parametri: x, y. Invocare la funzione con le seguenti coppie di valori: 0, 0

161

Programmazione in JavaScript

0, 4 3, 0 2, 6 9, 2.
function minoreDi(x, y) { if (x == 0 && y == 0) { return false; } else if (x != 0 && y == 0) { return false; } else if (x == 0 && y != 0) { return true; } else { return minoreDi(x - 1, y 1); } }

3. Definire in JavaScript una funzione ricorsiva che calcola e restituisce la divisione tra due interi maggiori o uguali a zero. La funzione ha due parametri: x, y. Invocare la funzione con le seguenti coppie di valori: 0, 4 3, 3 9, 2.
function divisione(x, y) { if (minoreDi(x, y)) { return 0; } else { return divisione(sottrazione(x, y), y) + 1; } }

4. Definire in JavaScript una funzione ricorsiva che calcola e restituisce il resto della divisione tra due interi maggiori o uguali a zero. La funzione ha due parametri: x, y. Invocare la funzione con le seguenti coppie di valori:

162

Programmazione in JavaScript

0, 4 3, 3 9, 2.
function resto(x, y) { if (minoreDi(x, y)) { return x; } else { return resto(sottrazione(x, y), y); } }

5. Definire in JavaScript una funzione ricorsiva che calcola e restituisce lesponenziazione tra due interi maggiori o uguali a zero. La funzione ha due parametri: x, y. Invocare la funzione con le seguenti coppie di valori: 6, 0 3, 3 0, 2.
function esponente(x, y) { if (minoreDi(0, x)) { if (y == 0) { return 1; } else { return moltiplicazione(x, esponente(x, y 1)); } } else if (minoreDi(0, y) { return 0; } }

18.2 Esercizi del capitolo 12

1. Definire in JavaScript un costruttore personalizzato per oggetti che rappresentano sveglie. Loggetto ha i seguenti metodi:

163

Programmazione in JavaScript

oraCorrente (h, m): imposta lora corrente. Se h maggiore di 23 o m maggiore di 59, i rispettivi valori sono impostati a zero; allarme (h, m): imposta lallarme. Se h maggiore di 23 o m maggiore di 59, i rispettivi valori sono impostati a zero;

tic (): fa avanzare di uno i minuti dellora corrente. Se i minuti arrivano a 60, azzera i minuti e fa avanzare di uno le ore. Se le ore arrivano a 24, azzera le ore. Se lora corrente uguale allallarme impostato, restituisce il valore true, false altrimenti. Definire una funzione che crea una sveglia, imposta lora corrente alle 13:00, imposta lallarme alle 13:02, fa avanzare lora corrente di due minuti.

function Sveglia () { this.ore; this.minuti; this.oreAllarme; this.minutiAllarme; this.oraCorrente = function (h, m) { if (h > 23) { this.ore = 0; } else { this.ore = h; } if (m > 59) { this.minuti = 0; } else { this.minuti = m; } } this.allarme = function(h, m) { if (h > 23) {

164

Programmazione in JavaScript

this.oreAllarme = 0; } else { this.oreAllarme = h; } if (m > 59) { this.minutiAllarme = 0; } else { this.minutiAllarme = m; } } this.tic = function () { this.minuti++; if(this.minuti == 60) { this.minuti = 0; this.ore++; } if (this.ore == 24) { this.ore = 0; } return ((this.ore == this.oreAllarme) && (this.minuti == this.minutiAllarme)); } } function foo() { var s = new Sveglia(); s.oraCorrente(13, 0); s.allarme(13, 2); print(s.tic()); print(s.tic()); }

2. Definire in JavaScript un costruttore personalizzato per oggetti che rappresentano distributori automatici di caff. Loggetto ha i seguenti metodi: carica (n): aggiunge n capsule per erogare n caff; eroga (n, c): verifica se possibile erogare n caff e, in caso positivo, li eroga addebitandoli al codice c;

165

Programmazione in JavaScript

rapporto (c): restituisce il numero di caff addebitati al codice c e il numero di capsule disponibili. Definire una funzione che: crea un distributore automatico di caff, carica 20 capsule, eroga 12 caff per il codice Carlo, genera il rapporto per il codice Carlo.

function Distributore() { this.capsule = 0; this.crediti = {}; this.carica = function(n) { this.capsule += n; } this.eroga = function(n, c) { if(n < this.capsule){ this.capsule -= n; if (c in this.crediti) { this.crediti[c] = +n; } else { this.crediti[c] = n; } } } this.rapporto = function (c) { return c + " " + this.crediti[c] + " Capsule " + this.capsule; } } function foo() { var d = new Distributore(); d.carica(20); d.eroga(12, "Carlo"); print(d.rapporto("Carlo")); }

166

Programmazione in JavaScript

18.3 Esercizi del capitolo 13

1. Unespressione aritmetica pu essere rappresentata mediante un albero binario i cui nodi sono operatori (addizione, sottrazione, moltiplicazione, divisione) e le foglie sono valori numerici. Definire in JavaScript un costruttore personalizzato per oggetti che rappresentano espressioni aritmetiche. Loggetto ha i seguenti metodi: calcola (): restituisce il valore dellespressione, visualizza (): restituisce una stringa che rappresenta lespressione. Definire una funzione che crea lespressione 2 * 3 + 5 6 / 2 + 1 stampa la rappresentazione dellespressione calcola e stampa il valore dellespressione.

function Espressione(v, sx, dx) { this.valore = v; this.sinistro = sx; this.destro = dx; this.visualizza = function() { var vs; if (this.sinistro != null) { vs = this.sinistro.visualizza (); } else { var vs = ""; } var vd; if (this.destro != null) { vd = this.destro.visualizza (); } else { vd = ""; } return vs + " " + this.valore + vd; }

167

Programmazione in JavaScript

this.calcola = function() { if (this.sinistro == null && this.destro == null) { return this.valore; } switch (this.valore) { case "+": var vs =this.sinistro.calcola(); var vd = this.destro.calcola(); return vs + vd; case "-": var vs =this.sinistro.calcola(); var vd = this.destro.calcola(); return vs vd; case "*": var vs =this.sinistro.calcola(); var vd = this.destro.calcola(); return vs * vd; case "/": var vs =this.sinistro.calcola(); var vd = this.destro.calcola(); return vs / vd; } } } function foo() { var e = new Espressione("+", new Espressione("-", new Espressione("+", new Espressione("*", new Espressione(2, null, null), new Espressione(3, null, null)), new Espressione(5, null, null)), new Espressione("/", new Espressione(6, null, null), new Espressione(2, null, null))), new Espressione(1, null, null)); print(e.visualizza()); print(e.calcola()); }

2. Lalbero genealogico una rappresentazione (parziale) che mostra i rapporti familiari tra gli antenati di un individuo. Abitualmente un albero genealogico realizzato utilizzando delle

168

Programmazione in JavaScript

caselle, quadrate per i maschi e circolari per le femmine, contenenti i nomi di ciascuna persona, spesso corredate di informazioni aggiuntive, quali luogo e data di nascita e morte, occupazione o professione. Questi simboli, disposti dallalto verso il basso in ordine cronologico, sono connessi da vari tipi di linee che rappresentano matrimoni, unioni extra coniugali, discendenza [Wikipedia, alla voce Albero genealogico]. Un albero genealogico patrilineare un particolare tipo di albero genealogico in cui sono rappresentati tutti e soli i discendenti per via paterna. Definire in JavaScript un costruttore personalizzato per oggetti che rappresentano alberi genealogici patrilineari. Il costruttore ha un parametro: persona. Loggetto ha i seguenti metodi: aggiungiConiuge (persona, coniuge): aggiunge, nellalbero genealogico, il coniuge a una persona; aggiungiDiscendente (persona, discendente): aggiunge, nellalbero genealogico, un discendente diretto a una persona; visualizzaPersona (persona): restituisce una stringa contenente le informazioni relative a una persona; grado(persona): calcola il grado di parentela tra una persona e il suo antenato pi anziano nellalbero genealogico;

linea (persona): restituisce una stringa contenente la linea di discendenza tra una persona e il suo antenato pi anziano nellalbero genealogico. Definire una funzione che crea un albero genealogico con queste caratteristiche: Bruno, Carlo e Daniela sono figli di Aldo, Enzo e Fabio sono figli di Bruno, Giacomo figlio di Carlo, Alessia la moglie di Aldo, Beatrice la moglie di Bruno, Cecilia la moglie di Carlo; visualizza le informazioni di Aldo ed Enzo;

169

Programmazione in JavaScript

calcola il grado di parentela di Bruno, Giacomo e Fabio; visualizza la linea di discendenza di Enzo e Giacomo.

function AlberoGenealogico(persona) { this.nome = persona; this.coniuge = ""; this.figli = [] this.aggiungiConiuge = function (p, c) { if (p == this.nome) { this.coniuge = c; } else { for (var i in this.figli) { this.figli[i].aggiungiConiuge(p, c); } } } this.aggiungiDiscendente = function (p, d) { if (p == this.nome) { var n = new AlberoGenealogico(d); this.figli.push(n); } else { for (var i in this.figli) { this.figli[i].aggiungiDiscendente(p, d); } } } this.visualizzaPersona = function (p) { if (p == this.nome) { return(this.nome + " (" + this.coniuge + ")"); } else { var s = "" for (var i in this.figli) { s += this.figli[i].visualizzaPersona(p); } return s; } }

170

Programmazione in JavaScript

this.grado = function (p) { if (p == this.nome) { return 1; } else { var d = 0; for (var i in this.figli) { var df = this.figli[i].grado(p); if (df > d) { d = df; } } if (d > 0) { return d + 1; } else { return 0; } } } this.linea = function (p) { if (p == this.nome) { return this.nome; } var s = ""; for (var i in this.figli) { s += this.figli[i].linea(p) } if (s != "") { return this.nome + " - " + s; } else { return s; } } } function foo() { var ag = new AlberoGenealogico("Aldo"); ag.aggiungiConiuge("Aldo", "Alessia"); ag.aggiungiDiscendente("Aldo", "Bruno"); ag.aggiungiConiuge("Bruno", "Beatrice");

171

Programmazione in JavaScript

ag.aggiungiDiscendente("Aldo", "Carlo"); ag.aggiungiConiuge("Carlo", "Cecilia"); ag.aggiungiDiscendente("Aldo", "Daniela"); ag.aggiungiDiscendente("Bruno", "Enzo"); ag.aggiungiDiscendente("Bruno", "Fabio"); ag.aggiungiDiscendente("Carlo", "Giacomo"); print(ag.visualizzaPersona("Aldo")); print(ag.visualizzaPersona("Enzo")); print("Bruno : grado " + ag.grado("Bruno")); print("Giacomo : grado " + ag.grado("Giacomo")); print("Fabio : grado " + ag.grado("Fabio")); print(ag.linea("Enzo")); print(ag.linea("Giacomo")); }

18.4 Esercizi del capitolo 14

1. Definire in HTML una pagina relativa a un ristorante. La pagina deve contenere una descrizione e un menu. Il menu deve essere diviso in pi parti: antipasti, primi, secondi, contorni, dolci. Cliccando sul nome di un piatto deve comparire il suo prezzo. Passando il mouse sul nome del proprietario, indicato nella descrizione, deve comparire un breve messaggio. Un doppio clic sul nome del ristorante, indicato nella descrizione, deve far comparire un numero di telefono.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="charset=windows-1252"/> <title>Taverna Rossa</title> </head> <body> <h1 ondblclick="alert('050 221133');">Taverna Rossa</h1> Ristorante gestito da <span onmouseover="alert('Nato a Pisa');">Marco</span> <br/> <h3>Antipasti</h3> <ul> <li onclick="alert('5 Euro');">Prosciutto e melone</li> <li onclick="alert('6 Euro');">Crostini di mare</li>

172

Programmazione in JavaScript

</ul> <h3>Primi</h3> <ul> <li onclick="alert('7 <li onclick="alert('8 </ul> <h3>Secondi</h3> <ul> <li onclick="alert('9 <li onclick="alert('8 </ul> <h3>Contorni</h3> <ul> <li onclick="alert('3 <li onclick="alert('2 </ul> <h3>Dolci</h3> <ul> <li onclick="alert('4 <li onclick="alert('5 </ul> </body> </html>

Euro');">Pasta alla carbonara</li> Euro');">Gnocchi</li>

Euro');">Cotoletta</li> Euro');">Frittura di mare</li>

Euro');">Patate</li> Euro');">Carote</li>

Euro');">Torta al limone</li> Euro');">Budino al cioccolato</li>

18.5 Esercizi del capitolo 15

1. Definire in HTML una pagina che contiene una lista numerata di nomi di animali. Cliccando sul nome di un animale, il nome viene spostato in fondo alla lista.
<html> <head> <script type="text/javascript" src="Dinamica.js"> </script> </head> <body> <ol> <li>Cane</li> <li>Gatto</li> <li>Topo</li> </ol> </body> </html>

173

Programmazione in JavaScript

function sposta() { var nodo = this.parentNode; nodo.removeChild(this); nodo.appendChild(this); } function inizializza() { var l = document.getElementsByTagName("li"); for (var i in l) { l[i].onclick = sposta; } } window.onload = inizializza;

2. Definire in HTML una pagina che contiene unarea di testo e un pulsante. Cliccando sul pulsante la pagina visualizza la lista delle parole (senza ripetizioni) contenute nellarea di testo.
<html> <head> <script type="text/javascript" src="Frase.js"> </script> </head> <body> <form> <textarea cols="60" rows="10" id="area"></textarea> <br/> <input type="button" value="Estrai" id="estrai"/> <br/> <ol id="lista"></ol> </form> </body> </html>

function estrai() { var testo = document.getElementById("area").value; var a = []; var i = 0; while (i < testo.length) { var p = ""; while ((i < testo.length) &&

174

Programmazione in JavaScript

(testo[i]!= " ")) { p += testo[i]; i++; } var j = 0; while ((j < a.length) && (a[j] != p)) { j++; } if (j == a.length) { a.push(p); } while ((i < testo.length) && (testo[i]== " ")) { i++; } } var s = ""; for (var k in a) { s += "<li>" + a[k] + "</li>"; } var nodo = document.getElementById("lista"); nodo.innerHTML = s; } function inizializza() { var pulsante = document.getElementById("estrai"); pulsante.onclick = estrai; } window.onload = inizializza;

18.6 Esercizi del capitolo 16

1. Definire in JavaScript una funzione che calcola e restituisce una stringa che rappresenta un documento XML. La funzione ha come argomento lalbero DOM creato dal parser XML a partire dal documento XML stesso. La funzione assume che nel documento XML le parti testuali siano solo allinterno di coppie di marche terminali (che non hanno figli, cio). Invocare la funzione utilizzando il file Ricettario.xml dopo averlo letto mediante la funzione caricaXML.

175

Programmazione in JavaScript

function visitaDOM (nodo, r) { var s = ""; s += rientro + nodo.nodeName + "\n"; for (var i in nodo.childNodes) { s += visitaDOM(nodo.childNodes[i], r + ' '); } return s; } print(visitaDOM(caricaXML("Ricettario.xml"), " "));

2. Definire in JavaScript una funzione che calcola e restituisce una stringa che rappresenta un documento XML. La funzione ha come argomento lalbero DOM creato dal parser XML a partire dal documento XML stesso. La funzione assume che nel documento XML le parti testuali siano solo allinterno di coppie di marche terminali (che non hanno figli, cio). Infine, la funzione visualizza anche il valore degli attributi XML, rispettandone la sintassi. Invocare la funzione utilizzando il file Ricettario.xml dopo averlo letto mediante la funzione caricaXML.
function generaXML (nodo, r) { if (nodo.nodeType == 1) { var s = ""; if ((nodo.childNodes.length == 1) && (nodo.childNodes[0].nodeType == 3)) { s += r + "<" + nodo.nodeName; for (var i in nodo.attributes) { s += nodo.attributes[i].nodeName + '="' + nodo.attributes[i].nodeValue + '"'; } s += ">" s += nodo.childNodes[0].nodeValue; s += "</" + nodo.nodeName + ">\n"; return s; } else { s += r + "<" + nodo.nodeName; for (var i in nodo.attributes) { s += " " + nodo.attributes[i].nodeName +

176

Programmazione in JavaScript

'="' + nodo.attributes[i].nodeValue + '"'; } s += ">\n"; for (var i in nodo.childNodes) { if (nodo.childNodes[i].nodeType == 1) { s += generaXML(nodo.childNodes[i], r + ' '); } } s += r + "</" + nodo.nodeName + ">\n"; return s; } } else if (nodo.nodeType == 3) { return r + nodo.nodeName + " " + nodo.nodeType + "\n"; } else { return generaXML(nodo.childNodes[0], r); } } print(generaXML(caricaXML("Ricettario.xml"), " "));

3. Definire in HTML una pagina che visualizza un menu a tendina contenente i nomi degli autori (senza ripetizioni) dei libri contenuti in un documento XML.
<?xml version="1.0"?> <biblioteca> <libro genere="Narrativa"> <autore>Dan Brown</autore> <titolo>Il codice da Vinci</titolo> </libro> <libro genere="Narrativa"> <autore>Dan Brown</autore> <titolo>Angeli e demoni</titolo> </libro> <libro genere="Poesia"> <autore>Giacomo Leopardi</autore> <titolo>Nelle nozze della sorella Paolina</titolo> </libro>

177

Programmazione in JavaScript

<libro genere="Narrativa"> <autore>Umberto Eco</autore> <titolo>Il nome della rosa</titolo> </libro> </biblioteca>

<html> <head> <script type="text/javascript" src="Biblioteca.js"> </script> </head> <body> <b>La mia biblioteca</b> <br/> <br/> <select id="selectAutori"></select> </body> </html>

function caricaXML(nomeFile) { } function Biblioteca () { this.lista = []; this.autori = {}; this.inizializza = function (r) { var nodo = r.getElementsByTagName("biblioteca")[0]; var l = nodo.getElementsByTagName("libro"); for (var i = 0; i < l.length; i++) { var li = new Libro(); li.inizializza(l[i]); this.lista.push(li); this.autori[li.autore] = true; } } this.listaAutori = function() {

178

Programmazione in JavaScript

var s = ""; for (var i in this.autori) { s += '<option value="' + i + '">' + i + '</option>'; } return s; } } function Libro () { this.autore; this.genere; this.titolo; this.inizializza = function(nodo) { var g = nodo.getAttribute("genere"); this.genere = g; var la = nodo.getElementsByTagName("autore"); var a = la[0].firstChild.nodeValue; this.autore = a; var lt = nodo.getElementsByTagName("titolo"); var t = lt[0].firstChild.nodeValue; this.titolo = t; } } var laBiblioteca; function inizializza() { var nodo = caricaXML("Biblioteca.xml"); laBiblioteca = new Biblioteca(); laBiblioteca.inizializza(nodo); var selectAutori = document.getElementById("selectAutori"); selectAutori.innerHTML = laBiblioteca.listaAutori(); } window.onload = inizializza;

179

Programmazione in JavaScript

19 Codice degli oggetti

In questo capitolo riportato il codice completo degli oggetti presentati nella seconda parte.

19.1 Insieme
function Insieme(){ this.elementi = {}; this.cardinalit = function() { var c = 0; for (var i in this.elementi) { c++; } return c; } this.appartiene = function(x) { return (x in this.elementi); } this.aggiungi = function(k) { this.elementi[k] = k; } this.intersezione = function(x) { var n = new Insieme(); for (var i in this.elementi) { if (x.appartiene(i)) { n.aggiungi(i); } } return n;

181

Programmazione in JavaScript

} this.unione = function(x) { var n = new Insieme(); for (var i in this.elementi){ n.aggiungi(i); } for (var j in x.elementi){ n.aggiungi(j); } return n; } this.visualizza = function() { var s = "{"; var b = true; for (var i in this.elementi) { if (b) { s += i; b = false; } else { s += ", " + i; } } s += "}"; return s; } } function foo() { var alfa = new Insieme(); alfa.aggiungi(10); alfa.aggiungi(20); print(alfa.cardinalit()); print(alfa.visualizza()); var x = 10; if (alfa.appartiene(x)) { print (x + " appartiene ad alfa"); } else { print (x + " non appartiene ad alfa"); }

182

Programmazione in JavaScript

var beta = new Insieme(); beta.aggiungi(10); beta.aggiungi(30); print(beta.visualizza()); print(alfa.intersezione(beta).visualizza()); print(alfa.unione(beta).visualizza()); }

19.2 Tabella
function Tabella() { this.mappa = {}; this.appartiene = function (c) { return (c in this.mappa); } this.aggiungi = function (c, v) { this.mappa[c] = v; } this.valore = function (c) { return this.mappa[c]; } this.visualizza = function () { var s = ''; for (var i in this.mappa) { s += ' ' + i + '="' + this.mappa[i] + '"'; } return s; } } function foo() { var t = new Tabella(); var c1 = "pippo" t.aggiungi(c1, 12); if (t.appartiene(c1)) { print (c1 + '="' + t.valore(c1) + '"'); } else {

183

Programmazione in JavaScript

print (c1 + ' non in tabella'); } var c2 = "pluto"; t.aggiungi(c2, 13); if (t.appartiene(c2)) { print (c2 + '="' + t.valore(c2) + '"'); } else { print (c2 + ' non in tabella'); } var c3 = "paperino"; if (t.appartiene(c3)) { print (c3 + '="' + t.valore(c3) + '"'); } else { print (c3 + ' non in tabella'); } print(t.visualizza()); t.aggiungi(c2, 3); if (t.appartiene(c2, 14)) { print (c2 + '="' + t.valore(c2) + '"'); } else { print (c2 + ' non in tabella'); } print(t.visualizza()); }

19.3 Albero binario

function AlberoBinario(v, sx, dx) { this.valore = v; this.sinistro = sx; this.destro = dx; this.visitaAnticipata = function() { var vs; if (this.sinistro != null) { vs = this.sinistro.visitaAnticipata(); } else { vs = ""; } var vd; if (this.destro != null) {

184

Programmazione in JavaScript

vd = this.destro.visitaAnticipata(); } else { vd = ""; } return this.valore + " " + vs + vd; } this.visitaDifferita = function() { var vs; if (this.sinistro != null) { vs = this.sinistro.visitaDifferita(); } else { var vs = ""; } var vd; if (this.destro != null) { vd = this.destro.visitaDifferita(); } else { vd = ""; } return vs + vd + " " + this.valore; } this.visitaSimmetrica = function() { var vs; if (this.sinistro != null) { vs = this.sinistro.visitaSimmetrica(); } else { var vs = ""; } var vd; if (this.destro != null) { vd = this.destro.visitaSimmetrica(); } else { vd = ""; } return vs + " " + this.valore + vd; } this.altezza = function() { if (this.sinistro == null &&

185

Programmazione in JavaScript

this.destro == null) { return 0; } var as; if (this.sinistro != null) { as = this.sinistro.altezza(); } else { as = 0; } var ad; if (this.destro != null) { ad = this.destro.altezza(); } else { ad = 0; } if (as > ad) { return as + 1; } else { return ad + 1; } } this.frontiera = function() { if (this.sinistro == null && this.destro == null) { return this.valore + " "; } var fs; if (this.sinistro != null) { fs = this.sinistro.frontiera(); } else { fs = ""; } var fd; if (this.destro != null) { fd = this.destro.frontiera(); } else { fd = ""; } return fs + fd;

186

Programmazione in JavaScript

} } function foo() { var alfa = new AlberoBinario(1, new AlberoBinario(2, new AlberoBinario(4, null, null), new AlberoBinario(5, null, null)), new AlberoBinario(3, null, null)); print(alfa.visitaAnticipata()); print(alfa.visitaDifferita()); print(alfa.visitaSimmetrica()); print(alfa.altezza()); print(alfa.frontiera()); }

19.4 Albero di ricerca

Il codice completo del costruttore AlberoDiRicerca il seguente.
function AlberoDiRicerca (n) { this.valore = n; this.sinistro = null; this.destro = null; this.aggiungi = function (k) { if (k < this.valore) { if (this.sinistro == null) { this.sinistro = new AlberoDiRicerca(k); } else { this.sinistro.aggiungi(k); } } if (k > this.valore) { if (this.destro == null) { this.destro = new AlberoDiRicerca (k); } else { this.destro.aggiungi(k); } } } this.cerca =

187

Programmazione in JavaScript

function (k) { if (k == this.valore) { return true; } if (k < this.valore) { if (this.sinistro == null) { return false; } else { return this.sinistro.cerca(k); } } if (k > this.valore) { if (this.destro == null) { return false; } else { return this.destro.cerca(k); } } } this.visita = function () { var vs; if (this.sinistro != null) { vs = this.sinistro.visita(); } else { vs = ""; } var vd; if (this.destro != null) { vd = this.destro.visita(); } else { vd = ""; } return vs + " " + this.valore + " " + vd; } } function foo() { var a = new AlberoDiRicerca(1); a.aggiungi(5); a.aggiungi(3);

188

Programmazione in JavaScript

a.aggiungi(8); print(a.visita()); print(a.cerca(1)); print(a.cerca(4)); }

19.5 Albero n-ario

function AlberoNArio(v) { this.valore = v; this.figli = new Array(); this.aggiungiFiglio = function (n) { this.figli[this.figli.length] = n; } this.visitaAnticipata = function() { var visita = ""; for (var i = 0; i < this.figli.length; i++) { visita += this.figli[i].visitaAnticipata() + " "; } return this.valore + " " + visita; } this.visitaDifferita = function() { var visita = ""; for (var i = 0; i < this.figli.length; i++) { visita += this.figli[i].visitaDifferita() + " "; } return visita + this.valore + " "; } this.altezza = function() { if (this.figli.length == 0) { return 0; } var maxAltezza = this.figli[0].altezza(); for (var i = 1; i < this.figli.length; i++) { var altezzaFiglio = this.figli[i].altezza(); if (altezzaFiglio > maxAltezza) { maxAltezza = altezzaFiglio;

189

Programmazione in JavaScript

} } return maxAltezza + 1; } this.frontiera = function() { if (this.figli.length == 0) { return this.valore + " "; } var f = ""; for (var i = 0; i < this.figli.length; i++) { f += this.figli[i].frontiera(); } return f; } } function foo() { var a1 = new AlberoNArio(1); var a2 = new AlberoNArio(2); var a3 = new AlberoNArio(3); var a4 = new AlberoNArio(4); var a5 = new AlberoNArio(5); var a6 = new AlberoNArio(6); var a7 = new AlberoNArio(7); a1.aggiungiFiglio(a2); a1.aggiungiFiglio(a3); a1.aggiungiFiglio(a4); a2.aggiungiFiglio(a5); a2.aggiungiFiglio(a6); a3.aggiungiFiglio(a7); print(a1.visitaAnticipata()); print(a1.visitaDifferita()); print(a1.frontiera()); print(a1.altezza()); }

19.6 Albero n-ario con attributi

function AlberoNArioAttr(v) { this.valore = v;

190

Programmazione in JavaScript

this.figli = new Array(); this.attributi = new Tabella(); this.aggiungiFiglio = function (n) { this.figli[this.figli.length] = n; } this.aggiungiAttributo = function (n, v) { this.attributi.aggiungi(n, v); } this.visitaAnticipata = function() { var visita = ""; for (var i = 0; i < this.figli.length; i++) { visita += this.figli[i].visitaAnticipata() + " "; } return this.valore + " " + visita; } this.visitaDifferita = function() { var visita = ""; for (var i = 0; i < this.figli.length; i++) { visita += this.figli[i].visitaDifferita() + " "; } return visita + this.valore + " "; } this.altezza = function() { if (this.figli.length == 0) { return 0; } var maxAltezza = this.figli[0].altezza(); for (var i = 1; i < this.figli.length; i++) { var altezzaFiglio = this.figli[i].altezza(); if (altezzaFiglio > maxAltezza) { maxAltezza = altezzaFiglio; } } return maxAltezza + 1; } this.frontiera =

191

Programmazione in JavaScript

function() { if (this.figli.length == 0) { return this.valore + " "; } var f = ""; for (var i = 0; i < this.figli.length; i++) { f += this.figli[i].frontiera(); } return f; } } function foo() { var a1 = new AlberoNArioAttr(1); var a2 = new AlberoNArioAttr(2); var a3 = new AlberoNArioAttr(3); a1.aggiungiFiglio(a2); a1.aggiungiFiglio(a3); a1.aggiungiAttributo("x", 100); }

19.7 Ricettario
function Ricettario (a) { this.anno = a; this.lista = []; this.visualizza = function() { var s = ""; for (var i in this.lista) { s += this.lista[i].visualizza(); } return s; } } function Ricetta (c, n, d, p) { this.categoria = c; this.nome = n; this.difficolt = d; this.preparazione = p;

192

Programmazione in JavaScript

this.visualizza = function() { return "<li>" + this.nome + ", difficolt " + this.difficolt + ", " + this.preparazione + " minuti di preparazione" + "</li>"; } } function creaRicettario(radice) { var nodo = radice.getElementsByTagName("ricettario")[0]; var anno = nodo.getAttribute("anno"); var l = nodo.getElementsByTagName("ricetta"); var a = []; for (var i = 0; i < l.length; i++) { a.push(creaRicetta(l[i])); } var r = new Ricettario(anno); r.lista = a; return r; } function creaRicetta(nodo) { var c = nodo.getAttribute("categoria"); var ln = nodo.getElementsByTagName("nome"); var n = ln[0].firstChild.nodeValue; var ld = nodo.getElementsByTagName("difficolta"); var d = ld[0].firstChild.nodeValue; var lp = nodo.getElementsByTagName("preparazione"); var p = lp[0].firstChild.nodeValue; return new Ricetta(c, n, d, p); }
function caricaXML(nomeFile) { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // IE6, IE5

193

Programmazione in JavaScript

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", nomeFile, false); xmlhttp.send(); return xmlhttp.responseXML; }

var ilRicettario; function inizializza() { var nodo = caricaXML("Ricettario.xml"); ilRicettario = creaRicettario(nodo); var lista = document.getElementById("lista"); lista.innerHTML = ilRicettario.visualizza(); } window.onload = inizializza;

19.8 Rubrica
function Voce(nodo) { this.nome; this.cognome; this.telefono; this.gruppo; this.inizializza = function(nodo) { var l; l = nodo.getElementsByTagName("nome"); this.nome = l[0].firstChild.nodeValue; l = nodo.getElementsByTagName("cognome"); this.cognome = l[0].firstChild.nodeValue; l = nodo.getElementsByTagName("telefono"); this.telefono = l[0].firstChild.nodeValue; this.gruppo = nodo.getAttribute("gruppo"); } this.visualizza = function() { var n = this.nome; var c = this.cognome; var g = this.gruppo;

194

Programmazione in JavaScript

var t = this.telefono; return '<li>' + n + ' ' + c + " (" + g + ") " + t + '</li>'; } } function Rubrica() { this.voci = []; this.gruppi = []; this.inizializza = function(nomeFile) { var doc = caricaXML(nomeFile); var l = doc.getElementsByTagName("voce"); for (i = 0; i < l.length; i++) { var v = new Voce(); v.inizializza(l[i]); this.voci.push(v); var j = 0; while ((j < this.gruppi.length) && (this.gruppi[j].gruppo != v.gruppo)) { j++; } if (j == this.gruppi.length) { this.gruppi.push(v.gruppo); } } } this.creaSelect = function() { var s = ""; s += '<option value="" selected="selected">' + 'Seleziona un gruppo</option>' var l = r.gruppi; for (i in l) { s += '<option value="' + l[i] + '">' + l[i] + '</option>'; } return s; } this.cercaGruppo =

195

Programmazione in JavaScript

function(g) { var l = []; for (i in this.voci) { if (this.voci[i].gruppo == g) { l.push(this.voci[i]); } } return l; } this.cercaNomeCognome = function(n, c) { var l = []; for (i in this.voci) { if ((this.voci[i].nome == n) || (this.voci[i].cognome == c)) { l.push(this.voci[i]); } } return l; } this.visualizza = function(l) { var s = ""; for (i in l) { s += l[i].visualizza(); } return s; } }
function caricaXML(nomeFile) { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", nomeFile, false); xmlhttp.send();

196

Programmazione in JavaScript

return xmlhttp.responseXML; }

function var s var i while

cercaPerGruppo() { = document.getElementById("selectGruppo"); = 0; ((i < s.options.length) && !s.options[i].selected) { i++;

} var l = r.cercaGruppo(s.options[i].value); var nodo = document.getElementById("elenco"); if (l == "") { nodo.innerHTML = null; alert("Nessuna voce trovata"); } else { nodo.innerHTML = r.visualizza(l); } } function cercaPerNomeCognome() { var n = document.getElementById("nome").value; var c = document.getElementById("cognome").value; var l = r.cercaNomeCognome(n, c); var nodo = document.getElementById("elenco"); if (l == "") { nodo.innerHTML = null; alert("Nessuna voce trovata"); } else { nodo.innerHTML = r.visualizza(l); } } function reimposta() { var nodo = document.getElementById("elenco"); nodo.innerHTML = null; } var r; function inizializza() { var p1 = document.getElementById("cercaPerGruppo");

197

Programmazione in JavaScript

p1.onclick = cercaPerGruppo; var p2 = document.getElementById("cercaPerNomeCognome"); p2.onclick = cercaPerNomeCognome; var p3 = document.getElementById("reimposta"); p3.onclick = reimposta; r = new Rubrica(); r.inizializza("Rubrica.xml"); var nodo = document.getElementById("selectGruppo"); nodo.innerHTML = r.creaSelect(); } window.onload = inizializza;

198

Programmazione in JavaScript

20 Grammatica di JavaScript
La seguente grammatica non copre in modo esaustivo la sintassi di JavaScript, ma riporta le regole sintattiche introdotte nel libro. Il lettore interessato pu trovare la sintassi completa in un qualsiasi manuale di JavaScript.

20.1 Parole riservate

false, true, null this, new var, function return, break if, else switch, case, default while, for, in

199

Programmazione in JavaScript

20.2 Caratteri
<Lettera> ::= | | | | | a j s A J S | | | | | | b k t B K T | | | | | | c l u C L U | | | | | | d m v D M V | | | | | | e n w E N W | | | | | | f o x F O X | | | | | | g p y G P Y | | | | | | h q z H Q Z | i | r | I | R

<Cifra>

::= 0 | <CifraNz> ::= 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 Space12 ! | " | * | + | = | > | ` | { |

<CifraNz>

<Speciale> ::= | | | |

# , ? |

| | | |

$ @ }

| | | |

% | & | ' | ( | ) . | / | : | ; | < [ | \ | ] | ^ | _ ~

12 Carattere di spaziatura.

200

Programmazione in JavaScript

20.3 Identificatore
<Identificatore> ::= <CarIniziale> | <CarIniziale> <Caratteri> <CarIniziale> ::= <Lettera> | _ | $ ::= <CarNonIniziale> | <CarNonIniziale> <Caratteri> <Lettera> <Cifra> _ $

<Caratteri>

<CarNonIniziale> ::= | | |

201

Programmazione in JavaScript

20.4 Costante
<Costante> ::= | | | ::= | | | <Numero> <Booleano> <Stringa> null <Intero> <Intero>.<Cifre> <Intero>E<Esponente> <Intero>.<Cifre>E<Esponente>

<Numero>

<Intero>

::= <Cifra> | <CifraNZ> <Cifre> ::= <Cifra> | <Cifra> <Cifre> ::= <Intero> | + <Intero> | - <Intero> ::= true | false ::= | | | "" "<CaratteriStr>" '' '<CaratteriStr>'

<Cifre>

<Esponente>

<Booleano>

<Stringa>

<CaratteriStr>

::= <CarattereStr> | <CarattereStr><CaratteriStr> ::= <Lettera> | <Cifra> | <Speciale>

<CarattereStr>

202

Programmazione in JavaScript

20.5 Espressione
<Espressione> ::= | | | | | | | | | | | | | | | <UnOp> <BinOP> ::= ::= | | <Costante> <Identificatore> (<Espressione>) <UnOp> <Espressione> <Espressione> <BinOp> <Espressione> this <Espressione>.<Identificatore> <Espressione>.<Chiamata> <Espressione>[<Espressione>] <Chiamata> new <Identificatore>() new <Identificatore>(<Espressioni>) [] [<Espressioni>] {} {<Coppie>} && < | | | | + + || <= | ! | * | | >

| /

| %

| >= | == | !=

<Espressioni> ::= <Espressione> | <Espressione>, <Espressioni> <Chiamata> ::= <Identificatore>() | <Identificatore>(<Espressioni>) ::= <Coppia> | <Coppia>, <Coppie> ::= <Espressione>: <Espressione>

<Coppie> <Coppia>

203

Programmazione in JavaScript

20.6 Programma, dichiarazione, comando, blocco

<Programma> <Comandi> ::= <Comandi> ::= <Comando> | <Comando> <Comandi> ::= <Dichiarazione> | <ComandoSemplice> | <ComandoComposto> ::= <DicVar> | <DicFun> | <DicCostr> <Assegnamento> <Invocazione> <Return> <Break> <Blocco> <If> <Switch> <For> <While>

<Comando>

<Dichiarazione>

<ComandoSemplice> ::= | | | <ComandoComposto> ::= | | | | <Blocco>

::= {<Comandi>}

204

Programmazione in JavaScript

20.7 Dichiarazione
<DicVar> ::= var <Identificatore>; | var <Identificatore> = <Espressione>; ::= function <Identificatore>() <Blocco> | function <Identificatore>(<Parametri>) <Blocco> ::= <Identificatore> | <Identificatore>, <Parametri> ::= function <Identificatore>() {<BloccoCostr>} | function <Identificatore>(<Parametri>) {<BloccoCostr>}

<DicFun>

<Parametri>

<DicCostr>

<BloccoCostr> ::= <PropMet> | <PropMet> <BloccoCostr> <PropMet> ::= this.<Identificatore> = <Espressione>; | this.<Identificatore> = <FunLet> ::= function () <Blocco> | function (<Parametri>) <Blocco>

<FunLet>

205

Programmazione in JavaScript

20.8 Comando semplice

<Assegnabile> ::= | | | <Identificatore> <Assegnabile>[<Espressione>] this.<Assegnabile> <Identificatore>.<Assegnabile> <Assegnabile> = <Aspressione>; <Assegnabile> += <Aspressione>; <Assegnabile> -= <Espressione>; <Assegnabile> *= <Espressione>; <Assegnabile> /= <Espressione>; <Assegnabile> %= <Espressione>; <Assegnabile>++; <Assegnabile>--;

<Assegnamento> ::= | | | | | | | <Invocazione>

::= <Assegnabile> (); | <Assegnabile> (<Espressioni>); ::= return <Espressione>; ::= break;

<Return> <Break>

206

Programmazione in JavaScript

20.9 Comando composto

<If> ::= if (<Espressione>) <Blocco> | if (<Espressione>) <Blocco> else <Blocco>

<Alternativa> ::= case <Costante>: <Comandi> <Alternative> ::= <Alternativa> | <Alternativa> <Alternative> <Switch> ::= switch (<Espressione>) {<Alternative>} | switch (<Espressione>) {<Alternative> default: <Comandi>} ::= for (<Comando>; <Espressione>; <Comando>) <Blocco> | for (var <Identificatore> in <Espressione>) <Blocco> ::= while (<Espressione>) <Blocco>

<For>

<While>

207

Programmazione in JavaScript

Indice analitico

Abbreviazione............................................................................................................ 34 Addizione................................................................................................................... 26 Albero....................................................................................................................... 107 Albero binario........................................................................................................... 107 Albero di derivazione................................................................................................. 16 Albero di ricerca........................................................................................................ 111 Albero genealogico.................................................................................................... 117 Albero n-ario............................................................................................................. 114 Albero n-ario con attributi........................................................................................116 Albero sintattico......................................................................................................... 16 Alfabeto....................................................................................................................... 12 Algoritmo di ordinamento.........................................................................................67 Altezza...................................................................................................................... 109 Ambiente.................................................................................................................... 40 Ambiente di programmazione...................................................................................19 Anno bisestile............................................................................................................. 47 Apici doppi................................................................................................................. 22 Applicazione............................................................................................................... 19 Aritmetica di Peano................................................................................................... 88 Array........................................................................................................................... 57 Array associativo........................................................................................................ 60 Assiomi di Peano........................................................................................................ 87 Attributo src.............................................................................................................. 125 Attributo type........................................................................................................... 125 Backslash.................................................................................................................... 23 Backus-Naur Form..................................................................................................... 13 Barra del browser..................................................................................................... 122 Barra diagonale decrescente......................................................................................23 Blocco di comandi...................................................................................................... 43 Booleano..................................................................................................................... 21 Calcolatore elettronico................................................................................................ 11 Calendario giuliano....................................................................................................47 Cammino.................................................................................................................. 107 Carattere..................................................................................................................... 22 Carattere di quotatura............................................................................................... 23 Carattere stampabile.................................................................................................. 22 Case sensitive............................................................................................................. 20 Categoria sintattica..................................................................................................... 13 Chiamata di funzione................................................................................................. 37 Cifra numerica........................................................................................................... 22 Comandi annidati...................................................................................................... 44 Comando.................................................................................................................... 20 Comando break.......................................................................................................... 46 Comando composto................................................................................................... 20 Comando condizionale.............................................................................................. 43 Comando di assegnamento........................................................................................33

209

Programmazione in JavaScript

Comando di scelta multipla.......................................................................................45 Comando di stampa................................................................................................... 24 Comando if................................................................................................................. 43 Comando iterativo...................................................................................................... 51 Comando iterativo determinato.................................................................................51 Comando iterativo indeterminato.............................................................................52 Comando return......................................................................................................... 39 Comando semplice..................................................................................................... 20 Commento.................................................................................................................. 20 Condizione................................................................................................................. 43 Congiunzione............................................................................................................. 26 Convenzione tipografica..............................................................................................4 Conversione implicita di tipo.....................................................................................29 Coppia....................................................................................................................... 103 Corpo........................................................................................................................ 122 Costante..................................................................................................................... 24 Costante booleana...................................................................................................... 22 Costante logica........................................................................................................... 22 Costante numerica...................................................................................................... 21 Costante stringa......................................................................................................... 22 Dichiarazione............................................................................................................. 20 Dichiarazione di funzione..........................................................................................37 Dichiarazione di variabile..........................................................................................32 Disgiunzione.............................................................................................................. 26 Disuguaglianza........................................................................................................... 27 Divisione.................................................................................................................... 26 Document Object Model..........................................................................................129 Documento................................................................................................................ 121 DOM......................................................................................................................... 129 Dot notation............................................................................................................... 59 EasyJS......................................................................................................................... 19 Elemento.................................................................................................................... 57 Elemento sintattico.................................................................................................... 13 Equazione di secondo grado......................................................................................42 Esponente................................................................................................................... 22 Espressione................................................................................................................ 25 Espressione composta................................................................................................ 25 Espressione semplice................................................................................................. 25 Etichetta.................................................................................................................... 121 Evento....................................................................................................................... 122 Evento click.............................................................................................................. 123 Evento dblClick........................................................................................................ 123 Evento keyDown....................................................................................................... 123 Evento keyPress........................................................................................................ 123 Evento keyUp........................................................................................................... 123 Evento load............................................................................................................... 124 Evento mouseDown................................................................................................. 123

210

Programmazione in JavaScript

Evento mouseOut..................................................................................................... 123 Evento mouseOver................................................................................................... 123 Evento mouseUp...................................................................................................... 123 Evento unload.......................................................................................................... 124 false............................................................................................................................ 22 Fattoriale.................................................................................................................... 85 Filtro........................................................................................................................... 65 Filtro passa banda...................................................................................................... 65 Finestra di alert........................................................................................................ 124 Foglia di un albero sintattico.....................................................................................16 Formalismo................................................................................................................. 13 Formattazione............................................................................................................ 23 Frase........................................................................................................................... 12 Frontiera................................................................................................................... 110 Funzione..................................................................................................................... 37 Funzione predefinita.................................................................................................. 41 Funzione ricorsiva...................................................................................................... 85 Giuseppe Peano.......................................................................................................... 87 Giustapposizione di stringhe.....................................................................................28 Grafo non orientato.................................................................................................. 107 Grammatica................................................................................................................ 13 Guardia....................................................................................................................... 43 HTML........................................................................................................................ 121 HyperText Mark-up Language.................................................................................121 Identificatore.............................................................................................................. 31 Indentazione.............................................................................................................. 44 Indice.......................................................................................................................... 57 Indice di iterazione..................................................................................................... 51 Induzione................................................................................................................... 88 Infinity........................................................................................................................ 29 Inizializzazione........................................................................................................... 32 Insieme....................................................................................................................... 99 Insieme delle frasi di un alfabeto...............................................................................12 Interruzione di riga.................................................................................................... 20 Intervallo.................................................................................................................... 39 Intestazione.............................................................................................................. 122 Intestazione di funzione............................................................................................. 37 Invocazione di funzione............................................................................................. 37 JavaScript................................................................................................................... 19 Leonardo Fibonacci................................................................................................... 86 Libreria..................................................................................................................... 125 Linguaggio................................................................................................................... 11 Linguaggio artificiale..................................................................................................11 Linguaggio di programmazione..................................................................................11 Linguaggio di programmazione imperativo..............................................................20 Linguaggio naturale.................................................................................................... 11 Logaritmo................................................................................................................... 42

211

Programmazione in JavaScript

Maggiore..................................................................................................................... 27 Maggiore o uguale...................................................................................................... 27 Marca........................................................................................................................ 121 Marca body............................................................................................................... 122 Marca di apertura..................................................................................................... 121 Marca di chiusura..................................................................................................... 121 Marca form............................................................................................................... 136 Marca head............................................................................................................... 122 Marca html............................................................................................................... 122 Marca script.............................................................................................................. 125 Marcatura.................................................................................................................. 121 Massimo..................................................................................................................... 63 Media aritmetica semplice.........................................................................................69 Metalinguaggio........................................................................................................... 13 Metasimbolo............................................................................................................... 13 Metodo....................................................................................................................... 59 Metodo appendChild................................................................................................134 Metodo createElement............................................................................................. 133 Metodo createTextNode...........................................................................................133 Metodo getAttribute................................................................................................. 135 Metodo getElementById..........................................................................................132 Metodo getElementsByTagName............................................................................132 Metodo indexOf......................................................................................................... 98 Metodo insertBefore................................................................................................. 134 Metodo push.............................................................................................................. 60 Metodo removeAttribute..........................................................................................135 Metodo removeChild................................................................................................ 134 Metodo replaceChild................................................................................................ 134 Metodo setAttribute................................................................................................. 135 Metodo substr............................................................................................................ 98 Metodo toLowerCase................................................................................................. 98 Minimo....................................................................................................................... 63 Minore........................................................................................................................ 27 Minore o uguale......................................................................................................... 27 Modulo....................................................................................................................... 26 Moltiplicazione.......................................................................................................... 26 Negazione................................................................................................................... 25 new............................................................................................................................. 94 Nodo attributo.......................................................................................................... 129 Nodo di un albero sintattico.......................................................................................16 Nodo documento...................................................................................................... 129 Nodo elemento......................................................................................................... 129 Nodo testo................................................................................................................ 129 Not a number............................................................................................................. 29 Notazione a punti....................................................................................................... 59 Numeri di Fibonacci.................................................................................................. 86 Numero primo............................................................................................................ 53

212

Programmazione in JavaScript

Nuova riga.................................................................................................................. 23 Oggetto....................................................................................................................... 59 Oggetto document.................................................................................................... 130 Oggetto personalizzato.............................................................................................. 93 Oggetto predefinito.................................................................................................... 59 Oggetto window........................................................................................................ 126 Operando.................................................................................................................... 25 Operatore................................................................................................................... 25 Operatore binario...................................................................................................... 26 Operatore booleano................................................................................................... 26 Operatore di concatenazione.....................................................................................28 Operatore di confronto.............................................................................................. 26 Operatore numerico................................................................................................... 26 Operatore unario........................................................................................................ 25 Operazione................................................................................................................. 25 Ordine di valutazione................................................................................................. 28 Pagina web.................................................................................................................. 19 Palindromo................................................................................................................ 66 Parametro attuale....................................................................................................... 37 Parametro di funzione................................................................................................ 37 Parametro formale..................................................................................................... 37 Parentesi angolari..................................................................................................... 121 Parentesi graffe.......................................................................................................... 44 Parentesi tonda.......................................................................................................... 24 Parola.......................................................................................................................... 11 Parola riservata........................................................................................................... 31 Parser........................................................................................................................ 146 Passaggio dei parametri.............................................................................................38 Pi greco....................................................................................................................... 32 Precedenza degli operatori........................................................................................28 Predicato.................................................................................................................... 39 Processo di derivazione.............................................................................................. 15 Produzione sintattica................................................................................................. 14 Programma................................................................................................................. 11 Propriet..................................................................................................................... 59 Propriet attributes.................................................................................................. 130 Propriet childNodes............................................................................................... 130 Propriet firstChild...................................................................................................131 Propriet firstSibling................................................................................................ 131 Propriet innerHTML..............................................................................................136 Propriet lastChild.................................................................................................... 131 Propriet lastSibling.................................................................................................131 Propriet length......................................................................................................... 59 Propriet nextSibling................................................................................................ 131 Propriet nodeName................................................................................................ 130 Propriet nodeType.................................................................................................. 130 Propriet nodeValue................................................................................................ 130

213

Programmazione in JavaScript

Propriet parentNode............................................................................................... 131 Propriet previousSibling.........................................................................................131 Punto e virgola........................................................................................................... 20 Radice di un albero sintattico....................................................................................16 Radice quadrata......................................................................................................... 54 Radice quadrata intera...............................................................................................55 Rappresentazione decimale.......................................................................................22 Rappresentazione esponenziale................................................................................22 Regola sintattica......................................................................................................... 13 Relazione di ordinamento.......................................................................................... 27 Relazione di ordinamento alfanumerico...................................................................27 Relazione di ordinamento lessicografico...................................................................27 Ricerca lineare........................................................................................................... 62 Ricettario.................................................................................................................. 145 Ritorno a capo............................................................................................................ 20 Rubrica..................................................................................................................... 153 Script........................................................................................................................... 19 Segno di interpunzione.............................................................................................. 23 Segno negativo........................................................................................................... 25 Segno positivo............................................................................................................ 25 Selettore..................................................................................................................... 46 Semantica................................................................................................................... 13 Sequenza.................................................................................................................... 20 Sequenza di comandi................................................................................................. 44 Sequenza di derivazione............................................................................................. 15 Sequenza di escape.................................................................................................... 23 Simbolo....................................................................................................................... 12 Simbolo iniziale.......................................................................................................... 14 Simbolo non-terminale.............................................................................................. 13 Simbolo terminale...................................................................................................... 13 Sintassi........................................................................................................................ 13 Sistema posizionale................................................................................................... 38 Sito internet.............................................................................................................. 121 Sottrazione................................................................................................................. 26 Spazio bianco............................................................................................................. 20 Stringa........................................................................................................................ 22 Successione di Fibonacci........................................................................................... 86 Successore.................................................................................................................. 87 Tabella...................................................................................................................... 103 Tabulazione................................................................................................................ 23 Tabulazione orizzontale............................................................................................. 24 Tag............................................................................................................................. 121 Tastiera....................................................................................................................... 23 Teoria del primordine............................................................................................... 88 Terminatore di comando........................................................................................... 20 Tipo composto............................................................................................................ 57 Tipo primitivo............................................................................................................. 21

214

Programmazione in JavaScript

true............................................................................................................................. 22 Uguaglianza................................................................................................................ 27 Valore logico............................................................................................................... 21 Valore numerico......................................................................................................... 21 Valore undefined........................................................................................................ 32 Valutazione di un'espressione...................................................................................28 Variabile...................................................................................................................... 31 Variabile globale........................................................................................................ 40 Variabile locale.......................................................................................................... 40 Vertice....................................................................................................................... 107 Visibilit..................................................................................................................... 39 Visita......................................................................................................................... 108 Visita anticipata....................................................................................................... 108 Visita differita.......................................................................................................... 108 Visita simmetrica..................................................................................................... 108 W3C.......................................................................................................................... 129 World Wide Web Consortium..................................................................................129 XML.......................................................................................................................... 145

215