Programmazione Javascript

7/28/2019 Programmazione Javascript

1/215

Universit di PisaDipartimento di Informatica

Programmazione in JavaScript

Vincenzo Ambriola

Versione 3.1 ~~~ 5 dicembre 2012


2/215


3/215


Prefazione

Per chi si avvicina alla programmazione gli ostacoli da superare sonotanti: un nuovo linguaggio (artificiale) da imparare, strumenti di svi-

luppo da provare per capirne la logica di funzionamento, esercizi darisolvere per apprendere i concetti di base e, successivamente, quellipi avanzati. Ci sono molti modi per insegnare a programmare e ognidocente, nel tempo, ha trovato il suo.

Questo libro rivolto agli studenti del primo anno del Corso di lau-rea inInformatica umanistica che seguonoElementi di programma-

zione (uno dei due moduli dellinsegnamento diFondamenti teorici eprogrammazione) e Programmazione (uno dei due moduli di Pro-gettazione e programmazione web). Lapproccio adottato si basasullintroduzione graduale dei concetti di JavaScript, un linguaggio

di programmazione ampiamente usato per la programmazione web.Questo libro non un manuale di JavaScript. Il linguaggio trop-

po complesso per insegnarlo a chi non ha mai programmato e, so-prattutto, di manuali di questo tipo ce ne sono tanti in libreria. Il li-

bro presenta gli aspetti pi importanti di JavaScript, necessari ma,soprattutto, sufficienti per la soluzione dei problemi proposti. Il letto-re interessato agli aspetti pi avanzati di JavaScript e al suo uso pro-fessionale invitato a continuare lo studio e la pratica di questo lin-guaggio. I risultati supereranno di gran lunga le aspettative.

1.1 Struttura del libroIl libro strutturato in due parti: la prima presenta gli elementi diprogrammazione necessari per risolvere semplici problemi su numerie testi; la seconda affronta il tema della programmazione web. Ogniparte strutturata in capitoli, dedicati a un aspetto della programma-zione. Alcuni capitoli si concludono con esercizi che il lettore invita-

3


4/215


to a risolvere non solo con carta e matita ma mediante un calcolatore.Gli strumenti necessari sono alla portata di tutti: un browser di nuovagenerazione pi che sufficiente. La soluzione degli esercizi proposti riportata al termine delle due parti.

Nel libro sono state usate le seguenti convenzioni tipografiche, perfacilitare la lettura dei programmi presentati:

il corsivo usato per indicare la prima volta che un terminerilevante compare nel libro; lindice analitico contiene le-lenco di questi termini, con lindicazione della pagina in cui

sono introdotti; la sintassi di JavaScript e gli esempi sono riportati allinter-

no di un riquadro colorato.

1.2 Ringraziamenti

La prima parte di questo libro nasce da una lunga collaborazione conGiuseppe Costa, coautore di 4 passi in JavaScript. Senza le sue pre-ziose indicazioni sarebbe stato praticamente impossibile capire le in-sidie e la bellezza di un linguaggio di programmazione complessocome JavaScript.

La seconda parte stata scritta seguendo i consigli e i suggerimenti diMaria Simi, profonda conoscitrice del web, della sua storia e delletante tecnologie ad esso collegate.

4


5/215


IndicePrefazione.............................................................................................3

1.1 Struttura del libro........................................................................31.2 Ringraziamenti............................................................................4

2 Linguaggi e grammatiche.................................................................112.1 Alfabeto, linguaggio...................................................................122.2 Grammatiche.............................................................................132.3 Backus-Naur Form....................................................................132.4 Sequenze di derivazione............................................................152.5 Alberi di derivazione.................................................................16

3 Programmi, comandi e costanti......................................................193.1 Programma................................................................................203.2 Costanti numeriche e logiche....................................................213.3 Costanti stringa.........................................................................223.4 Comando di stampa..................................................................24

4 Espressioni.......................................................................................254.1 Operatori....................................................................................254.2 Valutazione delle espressioni...................................................284.3 Casi particolari..........................................................................294.4 Conversione implicita...............................................................294.5 Esercizi......................................................................................30

5 Variabili e assegnamento.................................................................315.1 Dichiarazione di costante..........................................................325.2 Variabili ed espressioni.............................................................325.3 Comando di assegnamento.......................................................335.4 Abbreviazioni del comando di assegnamento.........................345.5 Esercizi......................................................................................34

6 Funzioni...........................................................................................376.1 Visibilit.....................................................................................396.2 Funzioni predefinite..................................................................416.3 Esercizi......................................................................................42

7 Comandi condizionali......................................................................437.1 Comando condizionale..............................................................437.2 Comando di scelta multipla......................................................457.3 Anno bisestile............................................................................477.4 Esercizi......................................................................................48

8 Comandi iterativi.............................................................................518.1 Comando iterativo determinato................................................51

5


6/215


8.2 Comando iterativo indeterminato............................................528.3 Primalit....................................................................................538.4 Radice quadrata........................................................................548.5 Esercizi......................................................................................55

9 Array.................................................................................................579.1 Elementi e indici di un array.....................................................579.2 Lunghezza di un array..............................................................599.3 Array dinamici..........................................................................599.4 Array associativi.......................................................................609.5 Stringhe di caratteri..................................................................619.6 Ricerca lineare..........................................................................629.7 Minimo e massimo di un array.................................................639.8 Array ordinato..........................................................................649.9 Filtro..........................................................................................659.10 Inversione di una stringa........................................................669.11 Palindromo..............................................................................669.12 Ordinamento di array..............................................................679.13 Esercizi ...................................................................................69

10 Soluzione degli esercizi della prima parte......................................7110.1 Esercizi del capitolo 4..............................................................7110.2 Esercizi del capitolo 5.............................................................72

10.3 Esercizi del capitolo 6.............................................................7410.4 Esercizi del capitolo 7..............................................................7510.5 Esercizi del capitolo 8.............................................................7810.6 Esercizi del capitolo 9.............................................................79

11 Ricorsione........................................................................................8511.1 Fattoriale..................................................................................8511.2 Successione di Fibonacci.........................................................8611.3 Aritmetica di Peano.................................................................8711.4 Esercizi.....................................................................................89

12 Oggetti.............................................................................................9312.1 Metodi......................................................................................95

12.2 Array........................................................................................9612.3 Stringhe...................................................................................9712.4 Il convertitore di valuta..........................................................9812.5 Insiemi.....................................................................................9912.6 Tabelle....................................................................................10312.7 Esercizi...................................................................................105

13 Alberi.............................................................................................107

6


7/215


13.1 Alberi binari...........................................................................10713.2 Alberi di ricerca......................................................................11113.3 Alberi n-ari.............................................................................11413.4 Alberi n-ari con attributi........................................................11613.5 Esercizi....................................................................................117

14 HTML.............................................................................................12114.1 Marche....................................................................................12114.2 Eventi.....................................................................................12214.3 Gestione degli eventi.............................................................12414.4 Script......................................................................................12514.5 Caricamento di una pagina...................................................12614.6 Esercizi...................................................................................128

15 Document Object Model...............................................................12915.1 Struttura e propriet..............................................................12915.2 Navigazione............................................................................13115.3 Ricerca....................................................................................13215.4 Creazione e modifica.............................................................13315.5 Attributi..................................................................................13515.6 Eventi.....................................................................................13515.7 Propriet innerHTML............................................................13615.8 Generazione dinamica...........................................................136

15.9 Esercizi...................................................................................14216 XML...............................................................................................14516.1 Un documento XML..............................................................14516.2 Il parser XML........................................................................14616.3 Creazione di oggetti definiti mediante XML........................14816.4 Esercizi...................................................................................152

17 Un esempio completo....................................................................15317.1 Il problema.............................................................................15317.2 Il codice HTML......................................................................15317.3 Gli oggetti Rubrica e Voce.....................................................15517.4 Caricamento e inizializzazione..............................................156

17.5 Gestione degli eventi..............................................................15717.6 Ricerca di voci........................................................................15817.7 Visualizzazione.......................................................................160

18 Soluzione degli esercizi della seconda parte.................................16118.1 Esercizi del capitolo 11...........................................................16118.2 Esercizi del capitolo 12..........................................................16318.3 Esercizi del capitolo 13..........................................................167

7


8/215


18.4 Esercizi del capitolo 14..........................................................17218.5 Esercizi del capitolo 15..........................................................17318.6 Esercizi del capitolo 16..........................................................175

19 Codice degli oggetti.......................................................................18119.1 Insieme...................................................................................18119.2 Tabella....................................................................................18319.3 Albero binario........................................................................18419.4 Albero di ricerca....................................................................18719.5 Albero n-ario..........................................................................18919.6 Albero n-ario con attributi....................................................19019.7 Ricettario................................................................................19219.8 Rubrica..................................................................................194

20 Grammatica di JavaScript...........................................................19920.1 Parole riservate......................................................................19920.2 Caratteri...............................................................................20020.3 Identificatore.......................................................................20120.4 Costante...............................................................................20220.5 Espressione..........................................................................20320.6 Programma, dichiarazione, comando, blocco....................20420.7 Dichiarazione.......................................................................20520.8 Comando semplice..............................................................206

20.9 Comando composto.............................................................207

8


9/215

Parte prima

Elementi di programmazione


10/215


11/215


2 Linguaggi e grammatiche

Quando si parla di linguaggio viene subito in mente il linguaggioparlato 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: naturalie artifi-

ciali. I primi sono linguaggi ambigui, perch il significato delle paro-le dipende dal contesto in cui sono inserite. I linguaggi naturali sonoinoltre caratterizzati dal fatto di mutare con luso, per lintroduzionedi 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 Hoanalizzato la partita di calcio dellItalia o il minerale calcio nella

fraseHo analizzato la partita di calcio proveniente dallArgentina.A differenza dei linguaggi naturali, i linguaggi artificiali hanno re-

gole e parole che non cambiano con luso e il cui significato non di-pende dal contesto in cui sono inserite. A questa famiglia appartengo-no i linguaggi utilizzati per descrivere le operazioni da far compiere amacchine o apparecchiature. Tali descrizioni non possono essere am-

bigue perch una macchina non pu decidere autonomamente tra pipossibilit di interpretazione.

Un esempio di linguaggio artificiale quello usato per comandare

un videoregistratore: una frase del linguaggio una qualunque se-quenza di registra, riproduci, avanti, indietro, stop. Le parole hannoun significato preciso e indipendente dal contesto in cui si trovano.

Linformatica ha contribuito notevolmente alla nascita di numerosilinguaggi artificiali, i cosiddetti linguaggi di programmazione, usatiper la scrittura di programmi eseguibili da calcolatori elettronici.

11


12/215


Questo libro dedicato allo studio di uno di essi, il linguaggio Java-Script.

2.1 Alfabeto, linguaggio

Un alfabeto formato da un insieme finito di simboli. Ad esempio,lalfabetoA = {a, b, c} costituito da tre simboli.

Unafrase su un alfabeto una sequenza di lunghezza finita forma-ta dai simboli dellalfabeto. Ad esempio, con lalfabeto A definito inprecedenza si possono formare le frasi aa, abba, caab.

Dato un alfabetoA, linsieme di tutte le frasi che si possono forma-re usando i suoi simboli infinito, anche se ogni frase di lunghezzafinita. Per semplicit questo insieme chiamato insieme delle frasi di

A. Sempre usando lesempio precedente, possibile formare linsiemedelle frasi diA ma non possibile riportarlo in questo libro perch,come gi detto, la sua lunghezza infinita. Ciononostante, possibilemostrarne una parte finita, usando come artificio i puntini di sospen-sione per indicare la parte infinita: {a, b, c, aa, ab, ac, ba, bb, bc, ca,cb, cc, ...}.

Dato un alfabetoA, un linguaggio L suA un sottoinsieme delle

frasi diA. Questa definizione diversa da quella data in precedenza:non tutte le frasi diA sono, infatti, anche frasi di L.

Abbiamo fatto riferimento a un linguaggio e non del linguaggiosu un alfabeto perch pu esistere pi di un linguaggio su un dato al-fabeto. Prendiamo come esempio il linguaggio italiano e quello ingle-se: entrambi si basano sullalfabeto latino (detto anche alfabeto ro-mano), ma sono costituiti da insiemi diversi di frasi.

I like walking on the grass una frase del linguaggio inglese, manon lo di quello italiano. Mi piace camminare sullerba una frase

del linguaggio italiano, ma non lo di quello inglese, anche se il signi-ficato lo stesso.

Sdksfdk skjfsfkj sdkfsakjfd, invece, non una frase n del linguag-gio italiano n di quello inglese, nonostante appartenga allinsiemedelle frasi sullalfabeto latino.

12


13/215


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 linguag-gio (ad esempio, tramite lanalisi logica delle frasi, che permet-te di individuare il soggetto di una data azione, loggetto e cos

via).

Esistonoformalismiche definiscono i due aspetti di un linguaggio. Inquesto libro presentiamo un formalismo per la definizione della sin-tassi. Non trattiamo, invece, gli aspetti relativi alla definizione forma-le della semantica.

Una grammatica un formalismo che permette di definire le regoleper la formazione delle frasi di un linguaggio. Una grammatica quindi un metalinguaggio, ovvero un linguaggio che definisce un al-tro linguaggio.

Una grammatica formata da:

simboli terminali: rappresentano gli elementi sintatticidel lin-guaggio che, di norma, coincidono con lalfabeto del linguag-gio;

simboli non-terminali o metasimboli: rappresentano le cate-gorie sintattiche del linguaggio;

regole: definiscono le relazioni tra i simboli terminali e i non-terminali; mediante la loro applicazione si ottengono le frasidel linguaggio.

Un linguaggio L le cui frasi rispettano le regole della grammatica G si

dice generatodaG.

2.3 Backus-Naur Form

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

13


14/215


solito racchiusi tra parentesi angolari) e di un insieme di simboli ter-minali (di solito indicati in corsivo o in grassetto per distinguerli daisimboli non-terminali). Inoltre, deve essere indicato un simbolo ini-

ziale che appartiene allinsieme dei simboli non-terminali. La funzio-ne di questo simbolo sar chiarita nel seguito.

Le regole per la formazione delle frasi sono di due tipi:

X::=S

si legge Xpu essere sostituito conSo XproduceS(da cuiil nome di produzionidato alle regole). X un simbolo non-

terminale,S una sequenza di simboli terminali e non-termi-nali.

X::=S1 | S2 | ... | Sn

si legge Xpu essere sostituito con S1, S2, ..., o Sn. Anche inquesto casoX un simbolo non-terminale, mentreS1, S2, ..., Snsono sequenze di simboli terminali e non-terminali.

Il linguaggio L generato da una grammatica G definita in BNF lin-sieme di tutte le frasi formate da soli simboli terminali, ottenibili par-

tendo dal simbolo iniziale e applicando in successione le regole diG

.Applicare una regola Ra una sequenza s di simboli significa sosti-tuire in s unoccorrenza del simbolo non-terminale definito da Rconuna sequenza della parte sinistra di R.

Per rendere concreti i concetti presentati finora, mostriamo la gram-matica G1, definita in BNF:

A = {a, b} alfabeto

N = {, , } simboli non-terminali

I = simbolo iniziale ::= | regola di

::= a | aa regola di

::= b | bb regola di

14


15/215


Il linguaggio generato da G1 {ab, aab, abb, aabb, ba, bba, baa,bbaa}. Si noti che, in questo esempio, il linguaggio finito perch lagrammatica genera esattamente otto frasi.

Una grammatica leggermente pi complicata G2:

A = {a, b}, alfabeto

N = {, , } simboli non-terminali

I = simbolo iniziale

::= regola di ::= a | a regola di

::= b | b regola di

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 tramiteuna sequenza di derivazione, formata da una successione di frasi in-termedie, costruite a partire dal simbolo iniziale, con lindicazionedella regola usata per passare da una frase alla successiva. Ogni frase,tranne lultima, formata da simboli terminali e non-terminali. Lul-tima frase formata esclusivamente da simboli terminali e, pertanto,appartiene al linguaggio generato dalla grammatica a cui appartengo-no le regole di derivazione.

A titolo di esempio, consideriamo la sequenza di derivazione dellafrase aab appartenente al linguaggio generato da G2:

15


16/215


=> Regola ::=

=> Regola ::= a | a seconda opzione

a

=> Regola ::= a | a prima opzione

a a

=> Regola ::= b | b prima opzione

a a b

2.5 Alberi di derivazione

Un metodo alternativo per rappresentare il processo di derivazione sibasa sugli alberi di derivazione. Per costruire lalbero sintattico diuna frase si parte dal simbolo iniziale della grammatica, che ne costi-

tuisce la radice. Successivamente, per ogni foglia che un simbolonon-terminale, si sceglie una regola da applicare sostituendo la fogliacon un nodo e generando tanti figli quanti sono i simboli terminali enon-terminali dellopzione scelta. Le foglie possono essere simbolinon-terminali solo nelle fasi intermedie di costruzione. Il procedi-mento termina quando tutte le foglie sono simboli terminali.

A differenza del precedente, questo metodo fornisce una visionedinsieme del processo di derivazione ed evidenzia il simbolo non-ter-minale sostituito ad ogni passo. Anche lalbero sintattico per una datafrase viene costruito applicando in sequenza le regole di derivazione a

partire dal simbolo iniziale, ma la sua struttura finale non dipendedallordine di applicazione delle regole. Infine, un albero sintattico caratterizzato dal fatto che la radice e tutti i nodi sono simboli non-terminali e le foglie sono simboli terminali.

Ecco un esempio di costruzione dellalbero sintattico per la fraseaab appartenente al linguaggio generato da G2:

16


17/215


Applichiamo la regola ::= al nodo radice dellalbero diderivazione. Lapplicazione della regola genera due nuovi nodi.

Applichiamo la regola ::= a | a (seconda opzione) al nodo e la regola ::= b | b (prima opzione) al nodo .

Infine applichiamo la regola ::= a | a (prima opzione) al

nodo . La frase aab formata dai simboli terminali presenti sullefoglie dellalbero di derivazione, letti da sinistra a destra.

17

ba

ba

a


18/215


19/215


3 Programmi, comandi e costanti

JavaScript un linguaggio di programmazione, in particolare unlinguaggio di script, cio un linguaggio per definire programmi ese-

guibili allinterno di altri programmi (chiamati applicazioni).JavaScript usato principalmente per la definizione di programmi

eseguibili nei browser, applicazioni per la visualizzazione di pagineweb. In questo ambito, JavaScript permette di rendere dinamiche einterattive le pagine web affinch mostrino contenuti diversi in basealle azioni dellutente o a situazioni contingenti, come lora corrente oil tipo di browser utilizzato. Mediante JavaScript anche possibileaggiungere effetti grafici o accedere alle funzionalit del browser incui le pagine sono visualizzati (lanciare una stampa, aprire una nuovafinestra, ridimensionare o spostare sullo schermo una finestra di vi-

sualizzazione).Con levoluzione dei browser, JavaScript ha subito numerose mo-

difiche, acquisendo progressivamente nuove funzionalit. Per evitarepossibili confusioni, il libro fa riferimento a JavaScript 1.8.2, la ver-sione del linguaggio accettata dal browser Firefox (versione 15.0 esuccessive).

Nella prima parte del libro JavaScript presentato esclusivamentecome linguaggio di programmazione, evitando di descriverne il suouso come linguaggio di script. Questa scelta motivata dalla necessi-t di presentare gli aspetti di base del linguaggio senza dover intro-durre la complessit della programmazione dinamica delle pagine

web, argomento trattato nella seconda parte. Per rendere concreta lapresentazione 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


20/215


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 coman-do pu essere una dichiarazione, un comando semplice o un coman-do composto.

::=

::=

|

::=

|

|

Lesecuzione di un programma consiste nellesecuzione della sua se-quenza di comandi. I comandi sono eseguiti uno dopo laltro, nellor-dine con cui compaiono nella sequenza. Questo comportamento ti-pico dei linguaggi di programmazione imperativi, classe alla qualeappartiene JavaScript.

Il punto e virgola indica la fine di una dichiarazione o di un co-mando semplice. Anche se buona norma terminare, quando previ-sto, un comando con un punto e virgola, in JavaScript possibileometterlo se il comando interamente scritto su una riga e sulla stes-sa riga non ci sono altri comandi. Il ritorno a capo, normalmenteignorato, in questo caso funge da terminatore di comando.

JavaScript un linguaggio case sensitive perch fa distinzione tralettere maiuscole e minuscole. Gli spazi bianchi e le interruzioni diriga servono per migliorare la leggibilit dei programmi. Si possono

utilizzare per separare gli elementi del linguaggio, ma non possonoessere inseriti al loro interno.

Un commento formato da una o pi righe di testo. In JavaScriptci sono due tipi di commenti:

su una riga sola, introdotti da //

20


21/215


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 valo-re logico (o booleano). I valori numerici appartengono al tipo primi-tivo dei numeri, quelli logici al tipo primitivo dei booleani.

::=

|

::=

| .

| E

| .E

::=

|

::= 0 |

::= 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

::=

|

::=

| +

| -

::= true | false

Alcuni esempi di costanti numeriche sono i seguenti:

12

159.757

23E5

21


22/215


51E+2

630E6

2.321E4

3.897878E+7

9.7777E1

La costante 2 denota il valore due, la costante 159.757denota il valorecentocinquantanove virgola settecentocinquantasette. Le altre co-stanti, in rappresentazione esponenziale possono essere trasformate

in rappresentazione decimale, tenendo presente che lesponente po-sitivo sposta la virgola verso destra e quello negativo verso sinistra:

23E5equivale a 2 300 000

51E+2 equivale a5 100

630E6 equivale a 0.000630

2.321E4 equivale a 23 210

3.897878E+7equivale a38 978 780

9.7777E1 equivale a 0.97777

La costante 23E5denota il valore duemilionitrecentomila, la costante51E+2 denota il valore cinquemilacento, mentre la costante 630E6denota il valorezero virgola zerozerozeroseicentotrenta. Il valore de-notato dalle altre costanti facilmente desumibile.

Le costanti booleane, dette anche costanti logiche, sono due. Lacostante true denota il valore di verit vero, la costantefalse denota il

valore di veritfalso.

3.3 Costanti stringa

Una stringa una sequenza di caratteried il tipo di dato usato inJavaScript per rappresentare testi. Una stringa che appare esplicita-mente in un programma chiamata costante stringa ed una se-quenza (anche vuota) di caratteri racchiusi tra apici singoli o apicidoppi. I caratteri sono tutti i caratteri stampabili: le lettere alfabeti-che minuscole e maiuscole, le cifre numeriche (da non confondere

22


23/215


con i numeri), i segni di interpunzione e gli altri simboli che si trova-no sulla tastiera di un calcolatore (e qualcuno di pi).

::=

::= ""

| ""

| ''

| ''

::=

|

::=

|

|

::= a |b | c | d| e | f | g | h | i

| j | k | l |m| n | o |p | q| r

| s | t | u | v |w | x | y | z

| A| B | C | D | E | F | G | H | I

| J| K | L |M|N | O | P | Q | R

| S | T | U |V|W| X | Y | Z

::= Space2

| ! | " | # | $ | % | & | ' | ( | )

| * | + | , | - | . | / | : | ; || ? | @ | [ | \ | ] | ^ |_

| ` | { | | | } | ~

In un programma, le costanti stringa devono essere scritte su unasola riga. Per inserire ritorni a capo, tabulazioni, particolari caratterio informazioni diformattazione si utilizza la barra diagonale decre-scente: '\''3 chiamata anche carattere di quotatura. La coppia forma-

ta da backslash e da un altro carattere chiamata sequenza di esca-pe. Le principali sequenze di escape sono:

\n: nuova riga;

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

23


24/215


\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 co-

mando di stampa

4

: ::=print();

Lesecuzione di un comando di stampa ha leffetto di scrivere sulla fi-nestra inferiore diEasyJSla costante racchiusa traparentesi 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


25/215


4 Espressioni

Unespressione rappresenta un calcolo che restituisce un valore. InJavaScript, come in tutti i linguaggi di programmazione, le espressio-

ni possono essere semplicio composte. Una costante unespressio-ne semplice, il valore della costante coincide con il valore dellespres-sione, il tipo dellespressione coincide con il tipo del suo valore. Une-spressione composta si ottiene combinando una o pi espressionimediante un operatore, che rappresenta loperazione da effettuaresulle espressioni, dette operandi.

::=

| ()

|

|

::= | + | ! ::= - | + | * | / | %

| && | || |

| < | | >= | == | !=

Lintroduzione delle espressioni richiede la modifica della sintassi delcomando di stampa.

::=print();

4.1 Operatori

Gli operatori che hanno un unico operando sono detti unari. Gli ope-ratori unari sono:

: segno negativo

+ : segno positivo

! : negazione

25


26/215


Loperatore di segno negativo ha un operando il cui valore un nu-mero. Loperatore cambia il segno del valore. Anche loperatore di se-gno positivo ha un operando il cui valore un numero. In questocaso, per, il segno del valore non modificato. Questi due operatorisono detti numerici, perch il loro risultato un numero.

Loperatore di negazione ha un operando il cui valore un boolea-no. Se il valore delloperando true, il risultato false, se il valore

false il risultato true. Questo operatore detto booleano, perch ilsuo risultato un booleano.

Gli operatori che hanno due operandi sono detti binari. Anche glioperatori binari possono essere numerici o booleani. Quelli numericisono:

: sottrazione

+ : addizione

* : moltiplicazione

/ : divisione

% : modulo

I primi quattro operatori (sottrazione, addizione, moltiplicazione, di-visione) sono quelli usualmente conosciuti e utilizzati per effettuare icalcoli aritmetici. Il modulo unoperazione su numeri interi, che re-stituisce il resto della divisione intera del primo operando per il se-condo. Il valore dellespressione 5%2 1, cio il resto della divisioneintera di5per 2.

Gli operatori binari booleani si dividono in due gruppi: quelli chehanno due operandi booleani, quelli che hanno due operandi dellostesso tipo. Gli operatori che appartengono al secondo gruppo sonoanche detti operatori di confronto.

Lelenco dei primi operatori il seguente: && : congiunzione

|| : disgiunzione

Loperatore di congiunzione restituisce true solo se i suoi operandivalgono true, false altrimenti. Se il primo operando vale false il se-condo non valutato.

26


27/215


Loperatore di disgiunzione restituisce true se almeno uno dei suoioperandi vale true,false altrimenti. Se il primo operando vale true ilsecondo non valutato.

Gli operatori di confronto sono:

== : uguaglianza

!= : disuguaglianza

> : maggiore

>= : maggiore o uguale

< : minore


28/215


Lunico operatore sulle stringhe loperatore di concatenazione,rappresentato dal simbolo +. un operatore binario che restituisce lagiustapposizione 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 ot-tenuti, si valutano le altre. Al termine di questo processo si ottiene il

valore dellespressione.

Lordine di valutazione delle espressioni pu essere alterato, te-nendo in considerazione la precedenza degli operatori. Gli operatoricon una precedenza pi alta sono valutati prima degli altri. A paritdi precedenza si valuta loperatore pi a sinistra. Queste due regolerendono univoca la valutazione di unespressione, evitando possibiliambiguit. Ad esempio, il valore dellespressione 2 + 3 * 4 pu esserecalcolato in due modi diversi. Un modo prevede il calcolo della som-ma tra 2 e3 (risultato5) e poi il prodotto tra 5e 4 (risultato 20). Unaltro, invece, prevede prima il prodotto tra 3 e 4 (risultato 12) e poi la

somma tra 2 e 12 (risultato 14). Dando precedenza alloperatore dimoltiplicazione rispetto a quello di addizione, si elimina questa ambi-guit: il valore dellespressione 2 + 3 * 4 univocamente determinatoed 14.

La precedenza degli operatori la seguente, in ordine di preceden-za maggiore:

segno negativo, segno positivo, negazione

moltiplicazione, divisione, modulo, congiunzione, disgiun-zione

addizione, sottrazione operatori di confronto.

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

28


29/215


4.3 Casi particolari

Laddizione e la moltiplicazione possono dare come risultato il valoreInfinity che rappresenta un numero troppo grande per essere rappre-sentato. Nel caso della moltiplicazione questo valore si pu ottenere

valutando lespressione 1E308 * 2 oppure dividendo per zero un nu-mero intero. Il valore Infinity, che rappresenta un numero troppopiccolo per essere rappresentato, si ottiene valutando lespressione1E308 * 2 oppure dividendo per zero un numero negativo.

Il modulo si basa su una versione leggermente modificata della de-

finizione euclidea della divisione, in cui il resto sempre un numeropositivo. Se il primo operando negativo il risultato negativo. Adesempio, 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? Larisposta articolata e si basa sul concetto di conversione implicita ditipo. 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 valorefalse convertito nel valore zero. La

valutazione dellespressione 1 + true ha come risultato 2, la valutazio-ne 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 lastringa rappresenta un numero, loperatore converte la stringa nelnumero corrispondente ed effettua correttamente loperazione, resti-tuendo un numero. Ad esempio, la valutazione dellespressione 2 * '2'restituisce il valore 4, anzichNaN. Loperatore di addizione introdu-ce unulteriore regola: se uno dei due operandi una stringa che nonrappresenta un numero, il risultato una stringa ottenuta giustappo-nendo il valore del primo operando con quello del secondo. Ad esem-pio, la valutazione dellespressione 200E3 + 'a' restituisce il valore200000a.

29


30/215


Se loperatore booleano di negazione ha come operando un nume-ro diverso da zero o un carattere il risultato false. Se il valore dello-perando zero il risultato true.

Diverso il comportamento degli operatori di congiunzione e didisgiunzione. Se il primo operando delloperatore di congiunzione(disgiunzione) valefalse (true) il risultato sempre false (true). Se ilprimo operando delloperatore di congiunzione (disgiunzione) valetrue (false) il risultato sempre il valore del secondo operando.

4.5 Esercizi

I seguenti problemi devono essere risolti usando costanti e operatorie 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 maggio-re 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 e17.

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, quellaminore 25 e laltezza 13.

8. Verificare se larea di un quadrato di lato quattro minore del-larea di un cerchio di raggio tre.

9. Calcolare il numero dei minuti di una giornata, di una settima-na, di un mese di 30 giorni, di un anno non bisestile.

10. Verificare se conviene acquistare una camicia che costa 63 inun negozio che applica uno sconto fisso di 10 o in un altroche applica uno sconto del 17%.

30


31/215


5 Variabili e assegnamento

Per descrivere un calcolo necessario tener traccia dei valori inter-medi, memorizzandoli per usarli in seguito. Nei linguaggi di pro-

grammazione questo ruolo svolto dalle variabili. In JavaScript,come negli altri linguaggi di programmazione imperativi, una varia-bile un identificatore a cui associato un valore.

::=

|

::=

| _

| $

::=

|

::=

|

| _

| $

Un identificatore formato da una sequenza di lettere e cifre e dai ca-ratteri _ e $. Questa sequenza deve iniziare con una lettera o con unodei caratteri _ e $ ma non pu iniziare con una cifra.

Non tutti gli identificatori sono utilizzabili come variabili. In Java-Script, infatti, leparole riservate non possono essere usate come va-riabili. Le parole riservate usate nel libro sono le seguenti.

31


32/215


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 varia-bile associandole un identificatore. Quando la dichiarazione com-prende lassegnamento di un valore si parla pi propriamente di ini-

zializzazione. Se la variabile non stata inizializzata il suo valore ilvalore speciale undefined.

::=

::= var ;| var = ;

5.1 Dichiarazione di costante

Una convenzione molto diffusa prevede che le costanti definite in unprogramma abbiano un identificatore formato solo da lettere maiu-scole, da numeri e dal carattere _. Ci permette di distinguerle imme-diatamente dalle variabili. La costante (pi greco), il cui valore ap-prossimato alle prime dieci cifre decimali 3,1415926535, pu esseredichiarata 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, unavariabile unespressione semplice il cui valore proprio quello dellavariabile.

::=

La possibilit di dichiarare variabili non inizializzate, il cui valore undefined, richiede di definire il comportamento degli operatori pertrattare questo caso particolare. Se almeno uno degli operandi di unoperatore numerico il valore undefined, il risultato sarNaN.

Molto pi complessa la casistica relativa agli operatori booleani.Se loperatore di negazione ha un operando che vale undefinedil ri-sultato true. Se gli operandi delloperatore di congiunzione valgono

32


33/215


undefinedil risultato undefined, tranne quando il primo operandovalefalse, nel qual caso il risultato false. Se il primo operando del-loperatore di disgiunzione vale undefinedil risultato true se il se-condo operando vale true, false se il secondo operando valefalse. Se,invece, il primo operando valefalse il risultato undefined. Infine, seentrambi gli operandi delloperatore di congiunzione o di quello di di-sgiunzione valgono undefined, il risultato undefined.

Gli operatori di confronto seguono una logica pi semplice. Se soloun operando vale undefined, il risultato sempre false, tranne nelcaso delloperatore di disuguaglianza, per il quale il risultato true.Se i due operandi valgono undefined, il risultato semprefalse.

5.3 Comando di assegnamento

Il comando di assegnamento modifica il valore associato a una varia-bile, assegnandole quello di unespressione.

::=

::= = ;

Vediamo alcuni esempi di dichiarazione di variabile, di assegnamentoe 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 xe le assegna il valore11. Il comando di stampa successivo stampa il valore di x. La secondadichiarazione definisce la variabile y, senza assegnarle un valore ini-ziale. Pertanto, il comando di stampa successivo stampa il valore un-defined. Il primo comando di assegnamento assegna il valore 7a y. Il

33


34/215


successivo comando stampa il valore 18, ottenuto sommando 11 a 7. Ilsecondo comando di assegnamento assegna a x la somma del valoredi y e di 10, in questo caso 17, come si pu verificare osservando lef-fetto del successivo comando di stampa. Lultimo comando di asse-gnamento assegna a xil suo valore sommato a 10, in questo caso 27,risultato verificabile osservando leffetto dellultimo comando distampa.

5.4 Abbreviazioni del comando di assegnamento

In JavaScript possibile usare alcune abbreviazioniper incrementa-

re 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 laforma del comando di assegnamento, quando riferito a una variabi-le. Per incrementare il valore della variabile xdel valore della variabi-le i, anzich scriverex = x + i possibile usare la forma pi compatta

x += i, il cui significato : applica loperatore + alla variabile xe alle-spressione alla destra del segno = e assegna il risultato alla variabile

x. Lo stesso ragionamento applicabile agli altri operatori numerici.

::= ++;| --;

| += ;

| -= ;

| *= ;

| /= ;

| %= ;

5.5 Esercizi

Risolvere i seguenti problemi utilizzando variabili, costanti e operato-

ri. Il risultato deve essere visualizzato mediante il comando di stampaprint, disponibile nellambienteEasyJS.

1. Calcolare il costo di un viaggio in automobile, sapendo che lalunghezza 750 Km, che il consumo di gasolio 3,2 litri ogni

34


35/215


100 Km, che un litro di gasolio costa 1,432 , che due terzi delpercorso 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 a0,15 , che i primi 30 secondi sono gratis, che il resto della te-lefonata costa 0,24 al minuto.

3. Calcolare il costo di un biglietto aereo acquistato una settima-na prima della partenza, sapendo che il costo di base pari a200 (se acquistato il giorno della partenza) e che questo co-

sto diminuisce del 2,3% al giorno (se acquistato prima delgiorno della partenza).

4. Calcolare il costo di un prodotto usando la seguente formula

costo=prezzoprezzo0,20sconto

e sapendo che il prezzo 100 e lo sconto 30 .

5. Calcolare la rata mensile di un mutuo annuale usando la se-guente formula

rata=importo

121tasso

e sapendo che limporto annuale 240 e il tasso il 5%.

35


36/215


37/215


6 Funzioni

Una dichiarazione di funzione un comando che definisce un identi-ficatore a cui associata una funzione. La definizione della funzione

comprende unintestazione e un blocco di comandi. ::=

::= function ()

| function ()

::=

| ,

Lintestazione della funzione definisce la lista dei suoi parametri(chiamati anche parametri formali) racchiusi tra due parentesi ton-de. La lista dei parametri formali pu essere vuota.

Come esempio, definiamo la funzione stampaSomma che stampala 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 dettopunto di chiamata o di invocazione. Quando si invoca la funzione, siassegna a ciascun parametro formale il valore dellespressione utiliz-zata nel punto di chiamata e poi si esegue il blocco di comandi.

Le espressioni utilizzate nel punto di invocazione (chiamate ancheparametri attuali) sono valutate prima dellesecuzione del blocco di

37


38/215


comandi associato alla funzione e il loro valore associato ai parame-tri formali. Questo procedimento detto passaggio dei parametri.Lassociazione tra i parametri formali e i valori dei parametri attualiavviene con il sistema posizionale, ovvero ad ogni parametro formale associato il valore del parametro attuale che occupa la medesimaposizione nella rispettiva lista. Il primo parametro attuale dunquelegato al primo parametro formale, il secondo parametro attuale le-gato al secondo parametro formale e cos via.

::=

::= ();

| ();

::=

| ,

Gli esempi che seguono mostrano due invocazioni di funzione con unnumero di parametri attuali pari a quello dei parametri formali. Lef-fetto delle invocazioni , rispettivamente, stampare prima il valore 5epoi il valore 15.

stampaSomma(10, -5);stampaSomma(10, 5);

Normalmente il numero di parametri attuali uguale a quello dei pa-rametri formali definiti nella dichiarazione. Se il numero dei parame-tri attuali diverso da quello dei parametri formali, non si ottiene unerrore, ma:

se il numero dei parametri attuali minore di quello dei pa-rametri formali, il valore undefined assegnato a tutti i pa-rametri formali che non hanno un corrispondente parame-

tro attuale, ovvero agli ultimi della lista; se il numero di parametri attuali maggiore di quello dei

parametri formali, i parametri attuali in eccesso sono igno-rati.

Una funzione pu restituire un valore al termine della propria esecu-zione. possibile invocare una funzione nelle espressioni o assegnare

38


39/215


a una variabile il risultato dellinvocazione di una funzione. Per resti-tuire un valore una funzione deve eseguire il comando return.

::= return ;

::= ()

| ()

Come esempio, definiamo una funzione che restituisce la somma deisuoi parametri.

function calcolaSomma(x, y) {

return x + y;}

La funzione pu essere invocata in un qualunque punto di un pro-gramma in cui lecito usare unespressione, ad esempio in un co-mando di assegnamento.

var x = 1;

var y = 2;

x = calcolaSomma(x, y);

Le funzioni che restituiscono un valore booleano sono chiamate pre-dicati. Come esempio, definiamo il predicato compreso che verificasexappartiene 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 tenerein debita considerazione la loro visibilit. In pratica necessario sa-

pere 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. Perconvenzione si assume che a sia minore o uguale di b. Quando a uguale a b lin-tervallo vuoto.

39


40/215


sulla sua struttura sintattica. Ai fini di questo libro, tuttavia, si ritienesufficiente presentare una versione semplificata del modello, versioneche permette di spiegare il comportamento degli esempi riportati.

Un ambiente formato da un insieme di variabili e di funzioni. Inun ambiente non possono esserci due variabili che hanno lo stessoidentificatore, altrimenti non sarebbe possibile sapere quale dei duedovr essere utilizzato al momento della valutazione della variabile.

Allo stesso modo non ci possono essere due funzioni con lo stessoidentificatore.

Un ambiente modificato dalle dichiarazioni, che introducononuove variabili e nuove funzioni, e dai comandi, che modificano il va-lore delle variabili presenti nellambiente. Ogni punto di un program-ma ha un ambiente, formato dalle variabili definite in quel punto. Alcontrario delle variabili, tutte le funzioni dichiarate in un programmafanno parte del suo ambiente.

Ogni variabile visibile in una porzione ben definita del program-ma in cui essa dichiarata. In particolare, la variabile visibile dalpunto 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 cuivisibilit lintero programma detta variabile globale. Una variabi-le globale pu essere nascosta da una variabile locale che ha lo stessoidentificatore. Un variabile nascosta definita, ma non accessibile.

In JavaScript le uniche variabili locali sono quelle dichiarate nelcorpo delle funzioni. I parametri formali di una funzione sono trattaticome variabili dichiarate al suo interno e quindi locali. Tutte le altre

variabili sono globali.

40


41/215


var risultato = 0;


var somma = 0;

somma = x + y;

return somma;

}

risultato = calcolaSomma(2, 4);

In questo esempio compaiono le variabili x, y, somma e risultato. Levariabili x, y e somma sono locali al corpo della funzione calcola-Somma. La variabile risultato globale. In base alla definizione di vi-

sibilit, le variabili locali sono utilizzabili solo nel corpo di calcola-Somma, mentre la variabile globale risultato utilizzabile sia nel cor-po di calcolaSomma, sia nel resto del programma.

Il seguente programma sfrutta la visibilit delle variabili per otte-nere lo stesso risultato.

var risultato = 0;


var somma = 0;

somma = x + y;

risultato = somma;

}calcolaSomma(2, 4);

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

6.2 Funzioni predefinite

JavaScript mette a disposizione numerose funzioni matematiche di

uso corrente, chiamatefunzioni predefinite. Un elenco non esaustivodi queste funzioni il seguente:

Math.abs (x): restituisce il valore assoluto dix,

Math.ceil(x): restituisce il primo intero pi grande dix,

Math.floor (x): restituisce il primo intero pi piccolo dix,

41


42/215


Math.log (x): restituisce il logaritmo naturale in base e dix, Math.pow (x, y): restituiscexelevato alla potenza di y,

Math.random (): restituisce un numero casuale compresotra zero e uno,

Math.round(x): restituisce l'intero pi vicino ax,

Math.sqrt(x): restituisce la radice quadrata dix.

6.3 Esercizi

1. Definire in JavaScript un predicato che verifica se lintersezio-ne 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 gradoax2 + bx+ c = 0 ha due radici[Wikipedia, alla voceEquazione di secondo grado]:

x1 /2=bb24 ac

2 a

Definire in JavaScript una funzione che stampa le radici diunequazione i cui coefficienti sono a, b e c (con a diverso dazero).

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

42


43/215


7 Comandi condizionali

Finora abbiamo definito la sintassi di JavaScript che permette di scri-vere programmi molto semplici, formati da una sequenza di dichiara-

zioni di variabili, di assegnamenti e di comandi di stampa. Con questiprogrammi possibile affrontare solo problemi la cui soluzione ri-chiede una sequenza di calcoli. Problemi pi complessi richiedonoluso di comandi composti. In questo capitolo presentiamo i comandicondizionali.

7.1 Comando condizionale

Il comando if un comando composto che consente di scegliere i co-mandi da eseguire in base al valore di unespressione booleana.

::=

|

::= if()

| if()

else

::= {}

Il comando inizia con la parola riservata if, seguita da unespressione

tra parentesi tonde, detta condizione o guardia. Il valore della condi-zione deve essere un booleano. Se la condizione vale true (la condi-zione vera), si esegue il primo blocco di comandi, detto blocco. Se lacondizione vale false (la condizione falsa) ci possono essere duecasi: se presente ed preceduto dalla parola riservata else, vieneeseguito il secondo blocco, altrimenti non si esegue alcun comando.

43


44/215


Un blocco costituito da una sequenza di comandi racchiusa traparentesi graffe. Un blocco considerato un comando unico e per-mette di utilizzare una sequenza di comandi dove normalmente sa-rebbe possibile usarne solo uno.

Nel seguito mostriamo un programma che usa due comandi condi-zionali. Nel primo comando la condizione vera se il valore della va-riabilex maggiore di zero: in tal caso il suo valore decrementato diuno. Non prevista alcuna azione nel caso in cui il valore di xsia mi-nore o uguale a zero. Il secondo comando un esempio che mostracome sia possibile assegnare axun valore maggiore di zero, indipen-dentemente dal valore di y. Se il valore di y minore di zero e quindila condizione vera, ax assegnato tale valore cambiato di segno (edunque positivo). In caso contrario ax 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 unascelta tra pi di due possibilit. Il seguente esempio mostra due co-mandi condizionali annidati e mostra anche come sia possibile evi-denziare la struttura di un programma mediante lindentazione.

44


45/215


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 rappre-senta unalternativa a una sequenza di comandi condizionali annida-ti. Si usa quando si devono eseguire comandi diversi, associati a de-terminati valori di unespressione.

45


46/215


::=

::= switch ()

{}

| switch ()

{ default: }

::= case :

::=

|

::=break;

Lespressione (chiamata anche selettore) valutata e il risultato confrontato con quello delle costanti di ciascuna alternativa, parten-do dalla prima. Se il confronto ha esito positivo per unalternativa, sieseguono i comandi ad essa associati e quelli di tutte le alternativesuccessive. 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 va-riabile z incrementata di 6. Se il valore 5, la variabile y incre-mentata di5e la variabilez incrementata di 6. Se il valore diversoda5o da 6, non si esegue alcun comando.

In molti casi preferibile che dopo lesecuzione del codice associa-to a unalternativa lesecuzione passi al comando successivo al co-mando di selezione multipla. Per ottenere questo comportamento

lultimo comando di quelli associati a unalternativa deve essere il co-mando break.

46


47/215


switch (x) {

case 5 : y += 5; break;

case 6 : z += 6; break;

}

Con questa modifica, anche quando il valore del selettore uguale a5, la variabileznon incrementata.

possibile inserire, rigorosamente per ultima, unalternativa spe-ciale i cui comandi sono eseguiti quando il confronto ha avuto esitonegativo per tutte le alternative.

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

case 6 : z += 6; break;

default : z++;

}

Con questa modifica, in tutti i casi in cui il valore del selettore di-verso da5o da 6, la variabilez incrementata di uno.

7.3 Anno bisestile

Lanno bisestile un anno solare in cui il mese di febbraio ha 29 gior-

ni anzich 28. Questa variazione evita lo slittamento delle stagioniche ogni quattro anni accumulerebbero un giorno in pi di ritardo.Nel calendario giuliano bisestile un anno ogni quattro (quelli la cuinumerazione divisibile per quattro). Nel calendario gregoriano simantiene questa variazione ma si eliminano tre anni bisestili ogni400 anni [Wikipedia, alla voce anno bisestile].

Il predicato bisestile verifica se un anno bisestile.

47


48/215


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 co-mando 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 consecutivamen-

te, assumendo che al primo gennaio sia assegnato il valore 1 eal trentuno dicembre il valore 365 negli anni non bisestili o

366 negli anni bisestili.

Definire in JavaScript una funzione che restituisce il numeroassegnato a un giorno dellanno, assumendo che i mesi sianonumerati 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 restituisceuna stringa che rappresenta il valore in lettere di un intero cheappartiene 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


49/215


3. Definire in JavaScript una funzione che calcola il tipo di untriangolo (equilatero, isoscele, rettangolo, scaleno) in basealla lunghezza dei suoi lati.

La funzione restituisce una stringa che rappresenta il tipo deltriangolo 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


50/215


51/215


8 Comandi iterativi

Molti problemi richiedono un calcolo che deve essere ripetuto pivolte 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 unnumero determinato di volte. Il comando formato da unintestazio-ne che contiene un comando di inizializzazione di una variabile (chia-mata anche indice di iterazione) che conta il numero delle iterazioni,unespressione che controlla quante volte il blocco di comandi ese-guito, un comando che aggiorna il valore dellindice di iterazione.

La forma sintattica del comando iterativo determinato molto ge-

nerale ma in questo libro ne adotteremo una che ci permette di risol-vere i problemi che richiedono luso di uniterazione determinata.

::=

::= for(; ; )

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

function somma(n) {

var s = 0;

for (var i = 1; i


52/215


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 apriori quante. Il comando formato da unespressione, chiamataguardia, e un blocco di comandi.

::=

::=while()

Lesecuzione di un comando iterativo indeterminato segue il seguenteschema:

la guardia valutata ad ogni iterazione, prima di eseguire il

blocco di comandi; se il valore della guardia true (cio se la guardia verifica-

ta), il blocco eseguito e poi si ripete il ciclo;

se il valore della guardia false (cio se la guardia non ve-rificata), il blocco non eseguito e lesecuzione dellinterocomando termina.

In JavaScript un comando iterativo determinato pu sempre essereespresso mediante un comando iterativo indeterminato (ma non vi-ceversa).

52


53/215


function sommaA(n) {

var s = 0;

var i = 1;

while (i


54/215


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 booleanapu essere utilizzata come guardia di un comando iterativo indeter-minato.


var i = 2;

while ((i < n) && ((n % i) != 0)) {

i++;

}

return (i == n);

}

La soluzione basata sul comando iterativo indeterminato pu esseremigliorata tenendo conto del fatto che se n primo allora non esisteun divisore ddi n minore della sua radice quadrata:

d< n

d2< 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 nu-merox, anchesso non negativo, che soddisfa lequazione

x2

= z

54


55/215


[Wikipedia, alla voce Radice quadrata]. Ad esempio, la radice qua-drata di 2 1,4142135623.

La radice quadrata intera di un numero razionale non negativo z un intero positivoxche soddisfa lequazione

x2zx12

Ad esempio, la radice quadrata intera di 5 2. In JavaScript si pudefinire una funzione che calcola la radice quadrata intera di un nu-mero razionale non negativo.

function radiceQuadrata(z) {var x = 0;

while (x * x


56/215


3. Definire in JavaScript una funzione che stampa, se esistono, leradici 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


57/215


9 Array

In JavaScript, oltre ai numeri, i booleani e i caratteri, esistono altritipi di dato che, per come sono strutturati, sono chiamati tipi compo-

sti, per differenziarli da quelli primitivi. In questo capitolo presentia-mo gli array, un tipo di dato indispensabile per la soluzione di nume-rosi problemi.

9.1 Elementi e indici di un array

Un array un tipo composto, formato da una sequenza numerata divalori omogenei tra loro6. Ogni valore detto elemento dellarray e ilnumero a esso associato detto indice. Il primo elemento di un arrayha sempre indice zero.

Per dichiarare un array necessario indicarne il nome, un identifi-

catore, e un valore determinato dallespressione a destra del segno diassegnamento. La categoria sintattica delle espressioni cos estesa.

::= []

| []

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 arraycon un solo elemento, 12. Nel terzo caso un array con quattro elemen-ti, i caratterif, u, n, ed e.

6 Come vedremo nella seconda parte del libro, in JavaScript gli array possono es-sere disomogenei. Per semplicit di presentazione, nella prima parte assumiamoche siano omogenei.

57


58/215


Una volta creato un array, si pu accedere ai suoi elementi per utiliz-zarne i valori. Lespressione tra parentesi quadre deve avere un valoremaggiore o uguale a zero.

::= []

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

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 ilcomando di assegnamento. Anche in questo caso lespressione tra pa-rentesi quadre deve avere un valore maggiore o uguale a zero.

::= []=

;

Vediamo un esempio in cui si dichiara larraya e si modifica il secon-do 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 co-mando di iterazione determinata. La funzione stampaElementistampa tutti gli elementi di un array. La funzione invocata primacon 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


59/215


9.2 Lunghezza di un array

Come vedremo nella seconda parte, in JavaScript possibile definireoggetti, tipi di dato composti caratterizzati da un insieme di proprie-t e di metodi.

Una propriet un valore associato a un oggetto. Per accedere alvalore di una propriet si utilizza la cosiddetta notazione a punti(dotnotation): loggetto seguito da un punto e dal nome della propriet.

Un metodo una funzione associata a un oggetto. Anche per invo-care il metodo si utilizza la notazione a punti. Maggiori dettagli su

propriet e metodi saranno forniti nella seconda parte.Gli array sono oggetti predefinitiche hanno la propriet length, il

cui valore pari al numero degli elementi dellarray. Questa proprietpu essere utilizzata per scandire un array, come mostrato nella fun-zione 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 unarray spesso utile usare esplicitamente la propriet length. Adesempio, la funzione stampaElementiIndicePari, cos definita.

function stampaElementiIndicePari(a) {

for (var i = 0; i < a.length; i += 2) {

print(a[i]);

}

}

9.3 Array dinamiciIn JavaScript, a differenza di altri linguaggi di programmazione, possibile aggiungere dinamicamente nuovi elementi a un array. Perfare ci, si esegue un assegnamento allelemento che si vuole aggiun-gere, come se gi esistesse. Nellesempio che segue creiamo un arraydi quattro elementi a cui, dopo, ne aggiungiamo uno.

59


60/215


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 immediatamentesuccessivo a quello dellultimo elemento definito dellarray, automati-camente tutti gli elementi intermedi sono aggiunti e inizializzati conil valore undefined.

var a = [2, 3, 5, 7, 11];

a[10] = 13;

Nellesempio precedente si aggiunge lelemento di indice 10 a un ar-ray il cui ultimo elemento definito ha indice 4. Laggiunta di questoelemento 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 va-lori di tipo stringa. In questo caso si parla di array associativi.

Un array associativo pu essere creato in due modi: esplicitamen-te, mediante lindicazione dei suoi indici e dei valori associati; impli-citamente, mediante assegnamenti che creano dinamicamente lar-ray. La creazione esplicita di un array associativo formato da tre ele-menti 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


61/215


var a = {};

a["alfa"] = 10;

a["beta"] = 20;

a["gamma"] = 30;

Per gli array associativi la propriet length non definita. Per scandi-re tutti gli elementi di un array associativo si usa una forma particola-re di iterazione determinata che prevede un indice e un array. Lindi-ce assume tutti i valori utilizzati per definire larray7.

::= for(var in )

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 chein 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 parial numero dei caratteri di una stringa.

var alfa = "ciao";

print(alfa.length);

Per selezionare un carattere di una stringa si utilizza la stessa nota-zione 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


62/215


print(alfa[2]);

print(alfa[3]);

La variabile alfa inizializzata con la stringa ciao. I quattro caratteridi 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 iterazio-ne determinata.

function stampaCaratteri(a) {


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 pos-sono essere risolti utilizzando uno schema chiamato ricerca lineare,che pu essere certa o incerta. Lo schema di ricerca lineare certa siutilizza quando si ha la certezza a priori che il valore cercato sia pre-sente nellarray. Negli altri casi si utilizza lo schema di ricerca lineareincerta.

Lo schema di ricerca lineare certa si basa su uniterazione indeter-minata in cui la guardia formata da ununica espressione logica che vera se la condizione di ricerca non soddisfatta. Un esempio, mol-

to semplice, di problema che pu essere risolto con questo schema il seguente: dato un arraya, definire una funzione che calcola e resti-tuisce il valore dellindice di un elemento di a che vale k, sapendo apriori che un tale elemento appartiene allarray.

62


63/215


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 in -determinata e da una guardia formata da due espressioni logiche incongiunzione tra loro: la prima vera se il valore dellindice valido

per larray (cio se appartiene allintervallo compreso tra zero e lalunghezza dellarray meno uno), la seconda vera se la condizione diricerca non soddisfatta. Un problema che pu essere risolto usandoquesto schema il seguente: definire una funzione che calcola e resti-tuisce il valore dellindice di un elemento di a che vale k, senza saperea 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 lorosoluzione considerata un classico della programmazione. Di seguitopresentiamo alcuni dei pi conosciuti.

9.7 Minimo e massimo di un array

Dato un arraya (non vuoto) di numeri, il minimo di a quellelemen-

to di a minore o uguale a tutti gli altri elementi di a. Analogamente, ilmassimo di a quellelemento di a maggiore o uguale a tutti gli altrielementi di a. La funzione minimo calcola e restituisce il minimo di a.

63


64/215


function minimo(a) {

var min = a[0];


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];


if (a[i] > max) {

max = a[i];

}

}

return max;

}

9.8 Array ordinato

Un array (non vuoto) ordinato se ogni coppia adiacente di elementisoddisfa una relazione di ordinamento. In un array ordinato in sensocrescente (decrescente) lultimo elemento il massimo (minimo) del-larray e il primo elemento il minimo (massimo) dellarray. Per ognicoppia di elementi adiacenti, il primo elemento minore (maggiore)del secondo. Gli array possono essere anche ordinati in senso non de-crescente (non crescente). In questo caso la relazione di ordinamentotra gli elementi adiacenti quella di minore o uguale (maggiore ouguale).

Il predicato ordinatoCrescente verifica se larray a ordinato insenso crescente.

64


65/215


function ordinatoCrescente(a) {

var c = 0;


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 tuttele coppie rispettano lordinamento, la funzione restituisce il valoretrue. 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 ordinatoCre-scente invertendo la relazione di ordinamento.

9.9 Filtro

Unfiltro uno strumento per la selezione (filtraggio) delle parti di uninsieme [Wikipedia, alla voce Filtro]. Un esempio di filtro, chiamato

filtro passa banda, seleziona tutti i valori che appartengono allinter-vallo [lo, hi). I valori lo e hisono chiamati livello basso (low level) elivello alto (high level).

La funzionefiltro ha tre parametri (a, lo, hi) e restituisce un nuovoarray formato da tutti gli elementi di a i cui valori sono compresi tralo e hi.

65


66/215


function filtro(a, lo, hi) {

var b = [];


if ((a[i] >= lo) && (a[i] < hi)) {

b.push(a[i]);

}

}

return b;

}

9.10Inversione di una stringa

Data una stringa, la sua stringa inversa si ottiene leggendola al con-trario. Ad esempio, la stringa inversa di alfa afla.

La funzione invertiha un parametro (s) e restituisce la stringa in-versa 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 dal-lindice 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

Unpalindromo una sequenza di caratteri che, letta al contrario, ri-mane identica [Wikipedia, alla voce Palindromo]. Alcuni esempi

66


67/215


sono il nomeAda, la voce verbale aveva e la fraseI topi non avevanonipoti.

Il predicato ePalindromo ha un parametro (s) e verifica se la strin-ga s un palindromo.

function ePalindromo(s) {

return s == inverti(s);

}

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


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.


var i = 0;

while ((i < s.length) &&

(s[i] == s[s.length 1 i])) {

i++;

}

return (i == s.length);

}

9.12Ordinamento di array

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

67


68/215


function ordina(a) {


for (var j = i + 1; j < a.length; j++) {

if (a[j] < a[i]) {

var tmp = a[j];

a[j] = a[i];

a[i] =

Programmazione Javascript

Documents

Transcript of Programmazione Javascript