regola carattere

programmare

primi passi

primi passi

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

i commentifreccia per tornare ad inizio pagina

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:

	// 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')

apri l'esercitazioneapri l'esercitazione in formato pdf

note

Ovviamente in questa pagina non vedremo niente.

variabili e assegnazionefreccia per tornare ad inizio pagina

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

apri l'esercitazioneapri l'esercitazione in formato pdf

operatore +freccia per tornare ad inizio pagina

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:

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:

//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)

apri l'esercitazioneapri l'esercitazione in formato pdf

operatori aritmeticifreccia per tornare ad inizio pagina

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
operatoreoperazione 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:

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.

apri l'esercitazioneapri l'esercitazione in formato pdf

script esternifreccia per tornare ad inizio pagina

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

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.

apri l'esercitazioneapri l'esercitazione in formato pdf

finestre di dialogofreccia per tornare ad inizio pagina

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

il metodo alertfreccia per tornare ad inizio pagina

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:

esempio di finestra di avvertimento

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

apri l'esercitazioneapri l'esercitazione in formato pdf

il metodo confirmfreccia per tornare ad inizio pagina

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:

esempio della finestra di conferma

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'));

apri l'esercitazioneapri l'esercitazione in formato pdf

il metodo promptfreccia per tornare ad inizio pagina

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:

esempio della finestra di dialogo prompt

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:

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>');

apri l'esercitazioneapri l'esercitazione in formato pdf

Che succede?

Visto che i numeri vengono restituiti come stringhe:

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

leggere le istruzionifreccia per tornare ad inizio pagina

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

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

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

le funzionifreccia per tornare ad inizio pagina

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

Tra le funzioni figurano:

la funzione parseIntfreccia per tornare ad inizio pagina

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:

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:

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)

apri l'esercitazioneapri l'esercitazione in formato pdf

la funzione parseFloatfreccia per tornare ad inizio pagina

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:

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:

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)

apri l'esercitazioneapri l'esercitazione in formato pdf

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 isNaNfreccia per tornare ad inizio pagina

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 />')

apri l'esercitazioneapri l'esercitazione in formato pdf

input/outputfreccia per tornare ad inizio pagina

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

raffigurazione dell'elemento input/output negli algoritmi

in JavaScript corrisponde:

input:
output:

Rappresentiamo l'interazione con l'utente :

diagramma ad albero delle funzioni che consentono l'interazione con l'utente