2 – Vaiabili – assegnamenti

Abbiamo visto che l’oggetto window corrisponde alla finestra con la quale apro il browser, mentre al suo interno troviamo l’elemento document che è il contenitore di tutta la mia pagina html cioè del DOM. Il metodo write scrive ciò che è passato come suo argomento, come se lo facessimo noi con la tastiera, in quel punto della pagina in cui è inserito.

for (i=1;i<=5;i++)
    window.document.write(i + "<br />");

In questo caso il metodo write scrive sulla pagina il valore di i e poi aggiunge (+ segno di concatenamento) il tag html <br />

for (i=1;i<=0;i++)

Con questo ciclo, la condizione è falsa, quindi il codice nn viene eseguito nemmeno 1 volta.

for (i=1;;i++)

In questa situazione invece gira all’infinito, fortunatamente il browser ci consiglia di interrompere

for (i=1;i<=5;i+=2)

L’incremento di più unità

for (i=1.5;i<=5;i++)

Inizializzazione decimale

var i=1;
for (alert("che diavolo di for è ??");i<=5;i++)

Addirittura si può eseguire dei comandi all’interno del ciclo for. Da notare l’inizializzazione della variabile viene eseguita prima tramite la dichiarazione var .

for (i=1;i<=5;) 
{
    window.document.write(i + "<br />");
    i++;
}

Qui l’incremento viene effettuato dopo l’istruzione, bisogna quindi concatenare nel ciclo le 2 istruzioni tramite le parentesi graffe, creando un blocco.

for ( i=1; i<=4; alert("strano"))
{
    window.document.write(i + "<br />");
    i++;
}

Il messaggio viene stampato ad ogni ripetizione del ciclo.

for (i=1; i>=6; i++)
{
    var colore = Math.round(Math.random() * 16777215);
    alert (colore);
    window.document.body.bgColor=colore;
}

Un ciclo che per 6 volte mi cambia colore casualmente dell’elemento body (numero casuale compreso tra 0 e 16777215 che è il numero dei colori a 24 bit).

In js non è obbligatorio dichiarare le variabili, ma è fortemente consigliato farlo tramite il comando var.

var x="ciao" , X=200, flag=false;

la dichiarazione di più variabili è separata dal simbolo virgola . I tipi possono essere stringa, interi, decimali e booleani (flag=false) . Inoltre il linguaggio è case sensitive (x=”ciao” , X=200 sono 2 variabili diverse).

Js è in grado di convertire i tipi di dato

var x="ciao" , X=200, flag1=false;
y=100;
var z=1000;
alert(x + ' ' + X + ' ' + y + ' ' + flag1);

Infatti alert mostra una finestra con un messaggio di tipo stringa e js fa le conversioni al volo per mostrarci i valori, nonostante siano tipi diversi.

Nel momento in cui definisco una variabile, essa è disponibile per tutto lo script, ma non prima.

alert y;
y=100;

Questo esempio genera errore. Posso invece chiudere uno script e richiamarla senza problemi in uno aperto successivamente.

<script type="text/javascript">
    var x="ciao" , X=200, flag1=false;
    y=100;
    var z=1000;
</script>
<script type="text/javascript">
    alert(x + ' ' + X + ' ' + y + ' ' + flag1);
</script>

Tutto il codice js inserito nell’ head, sarà visibile anche dopo (body, footer).

Completiamo il discorso visibilità variabili introducendo le funzioni. Una variabile dichiarata fuori da un blocco funzione (esterna) è detta variabile globale , invece se dichiarata dentro una funzione è chiamata variabile locale alla funzione.
    var x=3.14;
    function prova() {
        var y="ciao";
    }
    alert(y);

In questo caso verrà generato un errore : y non definita. Viceversa è possibile usare richiamare una variabile globale dentro una funzione.

var x=3.14;
function prova() {
    var y="ciao";
    alert(x);
}
prova();

Ovviamente bisogna poi lanciare la funzione prova(); . La variabile locale può essere oscurata se viene inserita come argomento della funzione:

var x=3.14;
function prova(x) {
    var y="ciao";
    alert(x);
}
prova("Nascondo la x globale");

Il risultato non è 3.14 ma: Nascondo la x globale ,  perché la variabile globale verrà oscurata da quella locale.

var x=3.14;
function prova(y) {
    var x="la nascondo anche io!!", y="ciao";
    alert(x);
}
prova("Nascondo la x globale");

Questo è il secondo caso in cui una variabile locale nasconde quella globale

Assegnamenti

abbiamo già visto che

x = 0;

viene usato il simbolo uguale per assegnare alla variabile x il valore zero, diverso da:

x == 0;

usato per esempio in un controllo (if) per verificare se il x ha il valore di zero.

Ma ancora più interessante è :

i += 1; /* equivale a: i = i + 1 */

oltre a notare i commenti (/* , */) con questo simbolo (+=) diciamo aumenta di 1 il valore della variabile i, un notevole risparmio di energie e meno errori se per esempio abbiamo nomi di variabili lunghi:

totaleMensile+=1200; /* totaleMensile = totaleMensile + 1200 */

In questa situazione se stampassi il valore della variabile totaleMensile otterrei un errore, in quanto non è stata dichiarata preventivamente

var totaleMensile=0; 
totaleMensile+=1200;

Ora è corretto. analogamente con gli altri operatori:

a -= 600; b *=2; c %= 5

rispettivamente sottrai 600 da a , moltiplica per 2 b, dammi il resto di c diviso 5

a++;

che abbiamo già visto è il post incremento in quanto l’incremento sarà effettuato l’incremento dopo che sarà utilizzata:

var a = 0;
alert(a++);
alert(a);

col primo alert ottengo zero , col secondo 1. Esiste anche il pre incremento

var a = 0;
alert(++a);
alert(a);

Ottengo 2 volte 1. Decremento

var a = 5;
alert(--a);
alert(a);

stampa 2 volte 4

var a = 5;
alert(a--);
alert(a);

stampa prima 5 , poi 4

Sicuramente queste forme risultano molto compatte.