regola carattere

programmare

• introduzione
• primi passi
• selezione
• iterazione
• i vettori

primi passi

• i commenti
• varibili e assegnazione
• operatore +
• operatori aritmetici
• script esterni
• finestre di dialogo
• leggere le istruzioni
• le funzioni
• input/output

primi passi

Fatte tutte le premesse, è il momento di muovere i primi passi:

i commenti

Per commento si intende una porzione di codice nascosta al browser, cioè che il browser non interpreta.

Resta implicito che, se il browser non li interpreta, per vedere i commenti bisogna necessariamente visualizzare il codice della pagina.

I commenti utilizzabili in javascript sono due:

• commento su una riga (basta il codice di apertura perché è chiuso dall'invio)
• commento su più righe (necessita di codice di apertura e chiusura)

	// questo è un commento su una riga (si chiude andando a capo)

	/* questo commento invece
	continua su più righe */
	window.alert('questa pagina contiene solo commenti')

note

Ovviamente in questa pagina non vedremo niente.

variabili e assegnazione

Come si è già capito l'operatore = (detto operatore di assegnazione) assegna alla variabile scritta alla sua sinistra il valore dell'espressione alla sua destra.

Quando nel programma si usa una variabile (si indica il suo nome), si fa sempre riferimento al dato che essa contiene:

var a = 10; // dichiarazione della variabile "a" e sua inizializzazione al valore numerico 10
var b = null; // dichiarazione di "b" inizializzata al valore speciale null
var c; //  "c" soltanto dichiarata (il valore è undefined)
document.write('a = ');
document.write(a);
document.write(' - ');
document.write('b = ');
document.write(b);
document.write(' - ');
document.write('c = ');
document.write(c);
document.write('<br />');
a = a * 2; // a -> 20 ; b -> null ; c -> null
b = a; //  a -> 20 ; b -> 20 ; c -> null
b = b + 10; // a -> 20 ; b -> 30 ; c -> null
c = a + b; // a -> 20 ; b -> 30 ; c -> 50
document.write('a = ');
document.write(a);
document.write(' - ');
document.write('b = ');
document.write(b);
document.write(' - ');
document.write('c = ');
document.write(c);

operatore +

L'operatore preposto alla concatenazione del testo (unire più stringhe) è + (più).

Lo stesso è pure l'operatore aritmetico che produce la somma.

Nei casi di operandi omogenei, il risultato è il seguente:

• numero + numero = numero (somma) 1+2=3
• stringa + stringa = stringa (concatenazione) 'a'+'b'='ab'

Nei casi di operatori ibridi il risultato è invece sempre di tipo stringa, ossia quando si prova a sommare numeri con una stringa, i numeri vengono automaticamente considerati come stringa e si produce la loro concatenazione:

• numero + stringa = stringa (concatenazione) 1+'a'='1a'
• stringa + numero = stringa (concatenazione) 'a'+1='a1'
• numero + stringa numerica = stringa (concatenazione) 1+'2'='12'
• stringa numerica + numero = stringa (concatenazione) '1'+2='12'

//operatore + con operandi omogenei
var operOmo1 = 1 + 2;
var operOmo2 = 'a' + 'b';
document.write('<p> 1 + 2 = ' + operOmo1 + ' (' + typeof(1 + 2) + ')</p>');
document.write('<p> \'a\' + \'b\' = ' + operOmo2 + ' (' + typeof('a' + 'b') + ')</p>');

//operatore + con operandi eterogenei
var operEte1 = 1 + 'a';
var operEte2 = 'a' + 1;
var operEte3 = 1 + '2';
var operEte4 = '1' + 2;
document.write('<p> 1 + \'a\' = ' + operEte1 + ' (' + typeof(1 + 'a') + ')</p>');
document.write('<p> \'a\' + 1 = ' + operEte2 + ' (' + typeof('a' + 1) + ')</p>');
document.write('<p> 1 + \'2\' = ' + operEte3 + ' (' + typeof(1 + '2') + ')</p>');
document.write('<p> \'1\' + 2 = ' + operEte4 + ' (' + typeof('1' + 2) + ')</p>');

note

Per scrivere un paragrafo in una pagina HTML si usa il tag <P> (vedi l'esercitazione)

operatori aritmetici

Nell'esercitazione precedente, si è visto un operatore aritmetico: il + (più).

In generale, gli operatori aritmetici che JavaScript mette a disposizione del programmatore sono i seguenti :

operatori aritmetici

operatore	operazione	esempio
+	addizione	10 + 2 restituisce 12
-	sottrazione	10 -2 restituisce 8
*	moltiplicazione	10 +2 restituisce 20
/	divisione	10 /2 restituisce 5
%	resto della divisione	10 % 2 restituisce 0
++	incremento	vedi note
--	decremento	vedi note

note

L'operatore di incremento ++, produce un incremento di uno, e -- un decremento di 1, quindi l'istruzione:

• a++ equivale ad a = a + 1
• a-- equivale ad a = a - 1

Questa semplice esercitazione mostra il loro uso:

document.write('<font face="Courier New, Courier, monospace">');
ris = a + b; // addizione -> 5 + 2 = 7
document.write('<p>a + b = ' + ris + '</p>');
ris = a - b; // sottrazione -> 5 - 2 = 3
document.write('<p>a - b = ' + ris + '</p>');
ris = a * b; // moltiplicazione -> 5 * 2 = 10
document.write('<p>a * b = ' + ris + '</p>');
ris = a / b; // divisione -> 5 / 2 = 2.5
document.write('<p>a / b = ' + ris + '</p>');
ris = a % b; // resto della divisione -> il 2 nel 5 ci sta 2 volte col resto di 1 
document.write('<p>a % b = ' + ris + '</p>');
a++; // incremento -> 5 + 1 = 6
document.write('<p>a++ = ' + a + '</p>');
a--; // decremento -> 6 - 1 = 5
document.write('<p>a-- = ' + a + '</p>');
document.write('</font>');

note

Si noti che nell'uso del metodo write(), si sono concatenate stringhe di testo come '<p>a + b = ' con variabili di tipo numerico come a e b, senza bisogno di convertirle prima in stringhe.

Il metodo write() provvede automaticamente alla loro conversione.

script esterni

Se si avesse bisogno di uno stesso script in diverse pagine, ripetendolo in ciascuna pagina, si avrebbero due problemi:

• ridondanza di dati (si chiama così la non auspicabile ripetizione del medesimo dato)
• coerenza (nel caso di una modifica dello script, si dovrebbe porre particolare attenzione a ripeterla in tutte le pagine che lo usano, per non avere pagina incoerenti (pagine con versioni diverse dello script).

Il problema si risolve usando gli script esterni.

Basta infatti salvare lo script (soltanto il codice e neussun tag html) in un file di testo non formattato al quale non si darà estesione .txt, ma .js,che sta ovviamente per JavaScript.

Per richiamarlo dalle pagine interessate, basta usare il tag script, specificando (oltre all'attributo type), l'attributo src per indicare il file contenente lo script.

Creiamo ad esempio il file js04-script esterno.js contenente lo script:

str = 'Sono uno script esterno';
document.write('<p>' + str + '</p>');

E richiamiamolo dall nostra pagina html:

<script type="text/javascript" src='js04-script esterno.js'></script>

Come si nota, quando con il tag script si richiama uno script esterno, esso resta senza contenuto.

finestre di dialogo

Le finestre incorporare che JavaScript mette a disposiizone dei programmatori sono tre (tutti metodi dell'oggetto window):

• alert
• confirm
• prompt

il metodo alert

Come già visto, il metodo alert dell'oggetto window si fa apparire una finestra di avvertimento che presenta all'utente il messaggio voluto ed il solo pulsante ok.

La sintassi è:

window.alert(messaggio)

e questo il risultato:

L'argomento del metodo alert, dovrebbe essere una stringa, ma anche se di diverso tipo, alert, provvede automaticamente a convertirlo in stringa (senza che debba farlo il programmatore).

//metodo alert di window con una stringa come argomento
window.alert('stringa');

//metodo alert di window con un numero come argomento
window.alert(1);

//metodo alert di window con un logico come argomento
window.alert(true);

//metodo alert di window con più variabil di diversa natura come argomento
var stringa = 'Benvenuto nel sito';
var numero = 100;
var logico = false;
window.alert(stringa + numero + logico);

il metodo confirm

Il metodo confirm di windows propone all'utente una finestra di conferma contenente il queesito indicato come argomento e con i pulstanti ok e annulla.

Grazie alla finestra di conferma, l'utente può operare scelte del tipo si/no, infatti questo metodo restituisce un valore logico.

La sintassi è:

window.confirm(quesito)

e questo il risultato:

scelta = window.confirm('quesito');
document.write(scelta);

Evitando di assegnare ad una variabile quanto restituito dal metodo confirm, lo si può direttamente porre come argomento del metodo write. Così:

document.write(window.confirm('quesito'));

il metodo prompt

Per una interazione maggiore con l'utente e perché possa immettere valori, utilizzeremo il metodo prompt di window.

Esso consta di due argomenti di tipo stringa (separati da una virgola): il primo è il quesito da porre all'utente ed il secondo è la risposta predefinita.

La sintassi è:

window.prompt(quesito,risposta predefinita)

e questo il risultato:

Se non si volesse nessuna risposta predefinita, si dovrebbe impostare il secondo argomento come stringa nulla: basta aprire le virgolette e richiuderle subito (''), ovvero due delimitarori di stringa che non contengono nulla:

window.prompt('digitare il proprio nome','')

Il metodo prompt:

• se l'utente preme il tasto , restituisce il valore speciale null.
• se l'utente preme il tasto senza aver digitato niente, restituisce una stringa nulla.
• se l'utente preme il tasto dopo aver digitato qualcosa, restituisce sempre una stringa.

Quindi, nel caso si usi il metodo prompt per chiedere all'utente di immettere valori numerici, anche questi verrebbero restituiti come stringa.

Non ricordarselo potrebbe creare qualche problema:

var n1 = window.prompt('1° numero:','10');
var n2 = window.prompt('2° numero:','2');
document.write('<p>tipo di n1 (' + n1 + '): ' + typeof(n1) + '</p>');
document.write('<p>tipo di n2 (' + n2 + '): ' + typeof(n1) + '</p>');

var somma = n1 + n2;
document.write('<p>' + n1 + ' + ' + n2 + ' = ' + somma + '</p>');
var confronto = n1 > n2;
document.write('<p>' + n1 + ' > ' + n2 + ' = ' + confronto + '</p>');

Che succede?

Visto che i numeri vengono restituiti come stringhe:

• con l'operatore + vengono concatenati
• visto che '10' comincia per '1', in ordine alfabetico precede il '2' è cioè minore

Per risolvere questo problema, bisogna convertire la stringa in numero. JavaScript offre due funzioni:

leggere le istruzioni

È importante notare che le istruzioni vanno lette al contrario (da destra verso sinistra).

per esempio, nell'esercizio sopra riguardante il ,metofo confirm:

• In primo luogo si passa la stringa quesito al metodo confirm.
• Il metodo fa apparire la finestra di conferma ed attende che l'utente operi la sua scelta.
• Quindi il metodo restituisce un valore logico true o false.
• Questo dato viene assegnato dall'operatore = alla variabile scelta.

Nel secondo caso, il valore logico viene restituito dal metodo confirm al metodo write che loscrive nella pagina.

le funzioni

Una funzione è come un metodo e svolge un'azione, ma non appartiene a nessun oggetto.

Tra le funzioni figurano:

• parseInt
• parseFloat
• isNaN

la funzione parseInt

La funzione parseInt (attenzione alla i maiuscola) converte in numero intero la stringa che posta come argomento (tra le parentesi).

Più precisamente, cerca il primo numero intero in una stringa.

La sua sintassi è:

parseInt(stringa[,base])

Essa prevede due argomenti:

• stringa: è la stringa che si suppone contenga un numero
• base: argomento opzionale per specificare la base numerica (da 2 a 36) del numero da cercare

Se vuoi capire perché la funzione parseInt trova un numero esaminando la stringa '18 anni', ma in 'annata 1997' no, controlla l'approfondimento, altrimenti passa pure oltre.

approfondimento

Questa funzione esamina la stringa scorrendo tutti i caratteri da sinistra verso destra, quindi:

• se il primo carattere utile (ignora gli spazi) è un numero, continua a "raccogliere" i numeri seguenti e smette appena il caratte che incontra non è un numero (punto decimale, spazio, lettera ecc.). Quindi restituisce il numero esaminato.
• negli altri casi restituisce il valore speciale NaN.

Provando:

document.write(parseInt('111') + '<br />'); // restituisce il numero 111
document.write(parseInt('50.123') + '<br />'); // restituisce il numero 50
document.write(parseInt('9.99') + '<br />'); // restituisce il numero 9
document.write(parseInt('9,99') + '<br />'); // restituisce il numero 9
document.write(parseInt('9.99 10.00 10.01') + '<br />'); // restituisce il numero 9
document.write(parseInt('18 anni') + '<br />'); // restituisce il numero 18
document.write(parseInt('       99.5+0.5=100') + '<br />'); // restituisce il numero 99
document.write(parseInt('annata 1997') + '<br />'); // restituisce NaN (not a number)
var a; // a = undefined
document.write(parseInt(a) + '<br />'); // restituisce NaN (not a number)
var b = null;
document.write(parseInt(b) + '<br />'); // restituisce NaN (not a number)

la funzione parseFloat

La funzione parseFloat (attenzione alla f maiuscola) converte una stringa in numero (considerando anche le cifre decimali).

Più precisamente, cerca il primo un numero in una stringa. La sua sintassi è:

parseFloat(stringa)

Essa prevede un argomento:

• stringa: è la stringa che si suppone contenga un numero

Se vuoi capire perché la funzione parseFloat trova un numero reale esaminando la stringa '9.99', ma un intero in '9,99', controlla l'approfondimento, altrimenti passa pure oltre.

approfondimento

Questa funzione esamina la stringa scorrendo tutti i caratteri da sinistra verso destra, quindi:

• se il primo carattere utile (ignora gli spazi) è un numero, continua a "raccogliere" i numeri seguenti (compreso l'eventuale punto decimale) e smette appena il caratte che incontra non è un numero (spazio, lettera ecc.). Quindi restituisce il numero esaminato.
• negli altri casi restituisce il valore speciale NaN.

Provando:

document.write(parseFloat('111') + '<br />'); // restituisce il numero 111
document.write(parseFloat('50.123') + '<br />'); // restituisce il numero 50.123
document.write(parseFloat('9.99') + '<br />'); // restituisce il numero 9.99
document.write(parseFloat('9,99') + '<br />'); // restituisce il numero 9
document.write(parseFloat('9.99 10.00 10.01') + '<br />'); // restituisce il numero 9.99
document.write(parseFloat('18 anni') + '<br />'); // restituisce il numero 18
document.write(parseFloat('       99.5+0.5=100') + '<br />'); // restituisce il numero 99.5
document.write(parseFloat('annata 1997') + '<br />'); // restituisce NaN (not a number)
var a; // a = undefined
document.write(parseFloat(a) + '<br />'); // restituisce NaN (not a number)
var b = null;
document.write(parseFloat(b) + '<br />'); // restituisce NaN (not a number)

curiosità

Le funzioni parseInt e parseFloat analizzano una stringa alla ricerca di un numero, infatti, il verbo inglese to parse, in italiano significa analizzare.

la funzione isNaN

Per determinare se un valore è NaN (not a number) si usa la funzione isNaN (attenzione alle n maiscole).

La sua sintassi è:

isNaN(valore)

Questa restiruisce vero (true) se il valore è NaN e falso (false) in caso contrario.

Vediamo qualche esempio:

var a = 1;
var b = parseFloat('7.5 di media'); // restituisce 7.5
var c = parseInt('             33 trentini'); // restituisce 33
var d = parseFloat('y = 3x - 1'); // restituisce NaN
var e = parseInt('euro 10'); // restituisce NaN
var f = 0/0; // restituisce NaN
document.write(a + ' non &egrave; numericamente valido? ' + isNaN(a) + '<br />')
document.write(b + ' non &egrave; numericamente valido? ' + isNaN(b) + '<br />')
document.write(c + ' non &egrave; numericamente valido? ' + isNaN(c) + '<br />')
document.write(d + ' non &egrave; numericamente valido? ' + isNaN(d) + '<br />')
document.write(e + ' non &egrave; numericamente valido? ' + isNaN(e) + '<br />')
document.write(f + ' non &egrave; numericamente valido? ' + isNaN(f) + '<br />')

input/output

Quello che negli algoritmi è raffigurato come input/output, cosi:

in JavaScript corrisponde:

input:

• metodo confirm di window
• metodo prompt di window

output:

• metodo alert di window
• metodo write di document

Rappresentiamo l'interazione con l'utente :