Aggiungere numeri e stringhe

JavaScript usa l’operatore + per la somma ed il concatenamento: i numeri vengono sommati, le stringhe concatenate.

Stringhe con contenuto numerico

Prima di analizzare gli esempi è bene ricordare che JavaScript effettua la traduzione e l’esecuzione procedendo da sinistra a destra.

alert

[window.]alert(“messaggio”) visualizza una finestra di messaggio e può essere scritto sia nella modalità: window.alert(messaggio”) che nella modalità alert(“messaggio”) cioè senza specificare l'oggetto al quale appartiene.

Il metodo alert () visualizza una finestra di avviso con un messaggio specificato e un pulsante OK.

Una casella di avviso viene spesso utilizzata se si desidera assicurarsi che le informazioni arrivino all'utente.

Nota: la casella di avviso distoglie l'attenzione dalla finestra corrente e forza il browser a leggere il messaggio. Non utilizzare eccessivamente questo metodo, in quanto impedisce all'utente di accedere ad altre parti della pagina fino a quando la casella non viene chiusa.

Break

La parola chiave break ci consente di uscire da un costrutto come for, for… in, while, o do…while, invece la parola chiave continue serve per forzare l’esecuzione del codice, anche se dovrebbe essere interrotta (per esempio da un if all’interno del ciclo).

Cicli

Ci si può chiedere quando si debba usare while e quando invece usare for. Nella maggior parte dei casi un ciclo di for farà al caso vostro, se però dovete porre delle condizioni multiple sarà meglio usare un while.

Ad esempio:

for (i=0; ( (<condizione 1>)&&(<condizione 2>) ); i++) {
  //istruzioni
}

l’esempio precedente funziona, ma non è molto elegante, né molto chiaro; in questo caso meglio usare un while:

i=0;

while ( (<condizione 1>)&&(<condizione 2>) ) {

  //istruzioni

}

i++;

Continue

La parola chiave continue serve per forzare l’esecuzione del codice, anche se dovrebbe essere interrotta (per esempio da un if all’interno del ciclo). invece la parola chiave break ci consente di uscire da un costrutto come for, for… in, while, o do…while.

L’oggetto Date()

JavaScript offre una serie di utility per il controllo e la gestione della data, più che mai di semplice implementazione logica e sintattica rispetto ad altri linguaggi, ma di potenza di gran lunga superiore rispetto agli stessi, il tutto è reso possibile grazie all’utilizzo dell’oggetto Date().

L’ora che verrà visualizzata sarà:

• l’ora del sistema operativo del browser dell’utente, a questo, con l’utilizzo di un linguaggio di scripting client-side come JavaScript, non c’è rimedio.
• Per visualizzare l’orario del server bisognerà utilizzare una tecnologia server-side, come PHP, ASP, etc.

Utilizzo e metodi dell’oggetto Date()

L’oggetto Date() viene dichiarato in una variabile di tipo new NOME_OGGETTO(), a questa variabile vengono associati dei metodi che, memorizzati a loro volta in una serie di variabili, vengono poi utilizzate, ad esempio, per stampare a video i relativi output.

Ecco un elenco dei principali metodi dell’oggetto Date():

La variabile “data” viene dichiarata come una normale variabile atta ad istanziare un oggetto, ad esempio:

var data = new Date();

Sperimentiamo un semplice codice utile a stampare a video l’orario corrente il formato HH:MM:SS:mm, ovvero ore, minuti, secondi e millisecondi, anche se in genere ci si limita ai secondi, e spesso nemmeno a quelli. Utilizziamo questa forma solo a scopo didattico:

<script type="text/javascript">

<!--

  var data = new Date();
  var Hh, Mm, Ss, mm;
  Hh = data.getHours() + ":";
  Mm = data.getMinutes() + ":";
  Ss = data.getSeconds() + ":";
  mm = data.getMilliseconds() + ":";
  document.write("Sono le ore " + Hh + Mm + Ss + mm);

//-->

</script>

Per quanto semplice possa essere questo script è bene analizzarne i vari passaggi.

In primo luogo dichiariamo la variabile “data” come detto in precedenza, dichiariamo poi quattro variabili, una per ogni valore associato ed aggiungiamo come stringa il classico carattere di separazione dell’orario, i due punti (:), poi ricorriamo alla funzione document.write() per eseguire la stampa a video. Ecco il risultato:

Sono le ore 16:2:3:285

Allo stesso modo possiamo stampare a video i valori associati al giorno, al mese ed all’anno in formato gg/mm/aaaa, con una piccola particolarità per quanto riguarda il mese: l’interprete JavaScript conta i mesi da 0 a 11, quindi, per identificare il mese di Gennaio verrà utilizzato il numero 0.

Per rendere esatta la stampa a video, alla variabile associata al mese verrà addizionata una unità, dato che la data 12/03/1978 per l’interprete JavaScript equivale al 12 Aprile dell’anno 1978, ma il lettore la interpreterà come 12 Marzo. Addizionando l’unità alla variabile associata ai mesi, la stampa a video sarà 12/04/1978, equivalendo al 12 Aprile sia per l’interprete JavaScript sia per il lettore.

Vediamo un esempio:

<script type="text/javascript">

 <!--
  var data = new Date();

  var gg, mm, aaaa;
  gg = data.getDate() + "/";
  mm = data.getMonth() + 1 + "/";
  aaaa = data.getFullYear();
  document.write("Oggi è il " + gg + mm + aaaa);
 //-->
</script>

L’output di questo codice di esempio è il seguente:

Oggi è il 30/1/2018

utilizzando questa volta il carattere slash (/) come separatore tra i valori, più adatto alla visualizzazione della data.

L’oggetto document rappresenta il documento HTML

Alcuni metodi

• document.write(“testo”) scrive nel documento
• document.writeln(“testo”) scrive nel documento ed inserisce un ritorno a capo

Alcune proprietà

• document.title titolo del documento
• document.body elemento body del documento
• document.images[ ] vettore delle immagini
• document.links[ ] vettore dei link
• document.anchors[ ] vettore dei segnalibri
• document.forms[ ] vettore dei moduli
• document.forms[x].elements[ ] vettore dei campi-modulo

Per tutti i vettori è disponibile la proprietà length per rilevare il numero degli elementi contenuti. Gli elementi dei vettori sono indicizzati a partire da 0.

Se agli oggetti (immagini, form, campi-modulo) sono stati attribuiti dei nomi (proprietà name) è possibile usare questi per farvi riferimento. 

document.getElementById("idElemento").value

value rappresenta il valore inviato con  GET o POST

• può essere usato per l’input dagli elementi  “input”
• può essere usata per l’output sugli elementi “input”caselle di testo

Esempio:
<form>
  <table>
    <tr><td><input type="text" id="nome1"/></td></tr>
    <tr><td><input type="text" id="nome2" disabled /></td></tr>
    <tr><td><input type="button" name="ok" id="btn_ok" value="Clicca qui" onclick="mostra()" /></td></tr>
  </table>
</form>
<script>
function mostra()
{
   var nome = document.getElementById("nome1").value;
   document.getElementById("nome2").value = "Ciao " + nome;
}
</script>

document.getElementById(“idElemento”).innerHTML

• innerHtml si applica a tutti gli oggetti che possono contenere HTML (div, span, ed altri) 

Esempio:

<p id="nome3"></p>

<script>
          var nome = "Mario";
         document.getElementById("nome3").innerHTML = "Ciao " + nome + "<br>";
</script>

For

Il ciclo di for è un comodo modo per eseguire in una volta sola: la valutazione di una condizione e l’incremento di un indice fittizio per eseguire le ripetizioni. La sintassi è molto compatta e i programmatori alle prime armi potrebbero avere qualche difficoltà nell’apprendimento di questo costrutto.

La novità rispetto al while è che l’inizializzazione di un indice, la valutazione della condizione e l’aumento dell’indice devono essere indicati già all’interno del costrutto.

Così:

Da notare i punti e virgola che separano le diverse istruzioni all’interno della parentesi. Il ciclo di for con un diagramma di flusso può essere rappresentato in questo modo:

Figura - Diagramma di flusso V

Esempio:

For (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

Dall'esempio sopra, si puo’ leggere:

• L'istruzione 1 imposta una variabile prima dell'avvio del ciclo (var i = 0).
• L'istruzione 2 definisce la condizione per l'esecuzione del ciclo (deve essere inferiore a 5).
• L'istruzione 3 aumenta un valore (i ++) ogni volta che il blocco di codice nel ciclo è stato eseguito.

if

Quando vogliamo che il programma, che stiamo scrivendo, faccia qualche cosa soltanto a una determinata condizione (ad esempio solo nel caso in cui il browser dell’utente sia Internet Explorer).

Potremmo schematizzare così:

• se una determinata condizione è verificata…
• fai questo

Più esattamente si tratta di prendere una determinata condizione, valutarla, e se è vera (cioè se restituisce true), verranno eseguite le istruzioni indicate. Se la condizione non si verifica non verrà fatto alcunché.

Ecco una rappresentazione grafica di quello che abbiamo appena detto:

Figura - Diagramma di flusso

La struttura della sintassi è chiara: la condizione da verificare viene indicata tra le parentesi tonde che seguono l’if (in inglese “se”, appunto). Notare le parentesi graffe, che racchiudono il codice da eseguire nel caso in cui la condizione sia valida. È bene inoltre ricordare, che ogni istruzione deve essere seguita dal punto e virgola.

Per afferrare subito la sintassi per un po’ vedremo alcuni semplici esempi numerici. Non appena saremo padroni dei concetti torneremo ad esaminare esempi pratici, inerenti il webpublishing. Vediamo un esempio di if:

x = 5; // sostituite x con quello che volete
if (x == 5) {
  alert(“la variabile x è uguale a 5”);
}

L’espressione (x == 5) risulta vera, dal momento che la variabile è stata creata appositamente con il valore richiesto dalla condizione (ma d’ora in poi provate a sostituire il valore della variabile creata all’inizio degli esempi per vedere i differenti risultati degli script). Infatti se invece abbiamo:

x = 6;if (x =
= 5) {
  alert(“la variabile x è uguale a 5”);
}

L’espressione dell’esempio viene valuta, ma dal momento che non è vera l’alert non viene visualizzato.

Negli esempi appena esaminati, abbiamo incontrato per la prima volta l’operatore di uguaglianza, cioè ==, che ci permette di verificare che le variabili (o le espressioni) a sinistra e a destra dell’uguale abbiano lo stesso valore.

Le parentesi graffe sono necessarie soltanto nel caso in cui le istruzioni da eseguire siano più di una, altrimenti possono essere anche omesse. Infatti le parentesi graffe indicano sempre l’esistenza di un blocco di istruzioni (le abbiamo già incontrate nelle funzioni con la medesima funzione). Ad esempio:

x=5;
if (x==5)
alert(“la variabile x è uguale a 5”);

o anche tutto su una riga:

x=5;
if (x==5) alert(“la variabile x è uguale a 5”);

mettere le parentesi graffe in presenza di una sola istruzione tuttavia non costituisce errore e di solito conferisce una maggior leggibilità al codice.

Operatori relazionali

Nel capitolo precedente abbiamo introdotto il concetto intuitivo di “condizione da valutare”. In realtà si tratta più esattamente di valutare che la relazione tra due valori (o espressioni) sia vera.

<valore> <operatore di relazione> <valore>

Ad esempio:

x == 5

Gli operatori di confronto vengono utilizzati nelle istruzioni logiche per determinare l'uguaglianza o la differenza tra variabili o valori. Restituiscono vero o falso.

L'operatore uguale a (==) controlla se i valori degli operandi sono uguali:

var num = 10;
document.write(num == 8); // false

Ed ecco gli altri operatori:

Un errore tipico dei principianti è quello di confondere l’operatore di uguaglianza, con il doppio simbolo “=” (==) con l’operatore di assegnamento (=). Ad esempio questo:

x=8;
if (x=5) { //dovrebbe essere ==, non =
  alert(“la variabile x è uguale a 5”);
}

risulterà sempre vero, perché all’interno delle parentesi viene assegnato un valore, e non viene invece eseguito un confronto.

Inserire la relazione tra due valori in un alert è un metodo sbrigativo per sapere se la relazione è vera oppure no:

x = 5;
alert(x >= 5);
alert(x < 5);

Finora abbiamo sempre assegnato il valore delle variabili all’interno della pagina: tuttavia non si tratta di un procedimento molto utile, dal momento che la possibilità di valutare la veridicità di un espressione ci interessa soprattutto quando non conosciamo i valori delle variabili.

Ci interessa sapere ad esempio se:

variabileUtente == variabileImpostataDaMe;

oppure

variabileAmbiente == variabileImpostataDaMe;

negli esempi dei prossimi capitoli vedremo come “catturare” questi valori.

else ed else if

Abbiamo visto che è possibile fare eseguire un’azione se una condizione è vera. Ma se volessimo far eseguire un’altra azione nel caso in cui la condizione sia falsa?

Possiamo allora impostare un programma di questo tipo:

• se una determinata condizione è verificata…
• fai questo
• in tutti gli altri casi…
• fai quest’altro

Possiamo esprimere graficamente questo concetto con i diagrammi di flusso:

Figura - Diagramma di flusso II

Ad esempio:

x = 9;
if (x < 7) {
  alert(“x è minore di 7”);
}
else {
  alert(“x non è minore di 7”);
}

Con una sintassi analoga si possono anche verificare l’esistenza di diverse condizioni. Si tratta di impostare un programma di questo genere:

• se si verifica questa condizione…

fai questo

• altrimenti, se si verifica quest’altra condizione…

fai quest’altro

• in tutti gli altri casi…

fai quest’altro

che graficamente si può rappresentare così:

Figura - Diagramma di flusso III

Ed ecco un esempio:

nome=”Gianni”;
if (nome==”Mario”) {
  alert(“ciao Mario”);
}
else if (nome==”Gianni”) {
  alert(“ciao Gianni”);
}
else {
  prompt(“identificati”,”inserisci il tuo nome”);
}

È possibile anche introdurre più di un else if all’interno dello stesso blocco di codice; è dunque possibile verificare quante condizioni si desidera.

Gli operatori logici

È possibile annidare un if dentro l’altro, in modo da poter valutare anche situazioni particolarmente complesse. Ad esempio:

// provate a cambiare il valore, eventualmente
// indicando anche delle stringhe
valore = 5;
if (isNaN(valore) ) {
  /* isNaN() vuol dire "not a number" e serve per
   * vedere se il tipo di dati in esame è differente
   * da un numero */
  alert(valore + " non è un numero!");
} else {
  if (valore >= 9) {
    alert(valore + " è maggiore o uguale a 9")  
  } else {
    alert(valore + " è minore di 9")
  }
}

Ma oltre ad utilizzare annidamenti particolarmente complessi, possiamo usare gli operatori logici per concatenare diverse espressioni e creare condizioni complesse.

Ad esempio:

x = 6;
if ( (x >= 5) && (x <= 7) ) {
  alert ("x è compresa tra 5 e 7");
}

In questo modo possiamo valutare più condizioni contemporaneamente. Gli operatori logici che utilizzerete maggiormente sono i seguenti:

Gli operatori logici funzionano nel modo seguente:

• viene esaminata l’espressione di sinistra (Questo significa che anche tutte le operazioni previste dall’espressione di sinistra sono eseguite prima)
• se l’operatore è binario (“and” e “or” ad esempio) si passa ad esaminare l’espressione di destra.

Nota.

Se l’espressione di sinistra è sufficiente a determinare il risultato dell’operazione, quella di destra viene ignorata. 

Ad esempio

Se l’operando è un or (||) e l’espressione di sinistra genera un true, non è necessario valutare anche l’espressione destra, perché il risultato sarà comunque true, se abbiamo un and (&&) invece, sarà ignorata l’espressione destra se a sinistra abbiamo già un false.

• viene restituito il risultato

Avrete notato che la rappresentazione grafica di un operatore logico prevede il raddoppiamento del simbolo corrispondente (es: &&).  Nel caso in cui vi dimentichiate di raddoppiare il simbolo (es: &), scrivendo ad esempio:

(x >= 5) & (x <= 7)

non usereste un operatore logico ma un operatore a livello di bit: il che non è scorretto, ma non sempre darà luogo allo stesso risultato.

Uso del "not"

Una menzione particolare la merita l’operatore di negazione(indicato con !), che serve a negare un’espressione. Si tratta di un operatore unario: viene infatti posto di fronte all’espressione da negare, senza essere confrontato con nient’altro.

Utilizzando l’operatore di diversità nel giusto modo possiamo scrivere:

• se la condizione è falsa…
• fai questo

che significa:

• se nego l’espressione e così facendo ho un risultato vero…
• allora fai questo

Ad esempio:

x = 7;
if (!(x == 7) ) {
  alert (“x non è 7”);
}

Ovviamente l’esempio che abbiamo appena esaminato non è di particolare utilità e in questo caso non c’è una grossa differenza rispetto all’utilizzo dell’operatore di diversità (!=) che abbiamo visto nelle lezioni precedenti:

x = 7;
if (x! = 7) {
  alert (“x non è 7”);
}

Ma se teniamo conto che possiamo utilizzare gli operatori logici per creare situazioni molto complesse, combinando fra loro le varie espressioni, allora appare evidente come l’utilizzo del not sia particolarmente utile. Ad esempio:

nome=”Gianni”;

if ( ! ( (nome == “Gianni”) || (nome == “Marco”) ) ) {

  alert (“Non sei né Gianni, né Marco”);

}

Interrompere il flusso del codice con return

In un capitolo precedente abbiamo visto che (se ci troviamo all’interno della funzione) abbiamo la possibilità di interrompere il flusso del codice tramite l’utilizzo dell’istruzione return.

Possiamo applicare questa possibilità all’utilizzo dell’if:

• se entriamo in una determinata casistica
• la funzione restituisce i valori

e, con la restituzione dei valori, il flusso del codice viene interrotto

Ad esempio:

function checkBrowser(){
  // se il browsr non è Internet Explorer
  if (!document.all) {
    alert (“Non stai usando Internet Explorer”);
   return; // Il codice si interrompe qui
  }
  alert (“Il tuo browser è Internet Explorer”);
  nome = prompt(“Scrivi il tuo nome”,”il tuo nome qui”);
}
checkBrowser();

Ovviamente il metodo del return funziona soltanto se ci troviamo all’interno di una funzione. 

MATH.floor()

Il metodo Math.floor(), dell'oggetto Math, restituisce il numero intero, arrotondato per difetto, del numero passato come parametro.

Math.random()

L'uso di Math permette anche di generare numeri (pseudo) casuali tramite il metodo:
Math.random() che restituisce un numero casuale decimale compreso tra 0 (incluso) e 1 (escluso). Nella pratica non è molto utile se non viene trasformato in un numero intero.

Numeri

JavaScript ha solo un tipo di numero. A differenza di molti altri linguaggi di programmazione, JavaScript non definisce diversi tipi di numeri, come interi, brevi, lunghi, virgola mobile, ecc.

I numeri JavaScript vengono sempre memorizzati come numeri in virgola mobile a precisione doppia, seguendo lo standard internazionale IEEE 754.

Questo formato memorizza i numeri in 64 bit, dove il numero (la frazione) è memorizzato nei bit da 0 a 51, l'esponente nei bit 52-62 e il bit di accesso 63:

I numeri possono essere scritti con o senza decimali.

Quando si lavora con i numeri, le funzioni più rilevanti sono:

• Number()         Convertito l’argomento e restituisce un numero,
• parseFloat()     Converte l’argomento e restituisce un numero floating point,
• parseInt()         Converte l’argomento e restituisce un intero.

La funzione Number() converte l'argomento oggetto in un numero che rappresenta il valore dell'oggetto.

Se il valore non può essere convertito in un numero legale, viene restituito NaN.

Il metodo toFixed ()

I valori primitivi (come 3.14 o 2014), non possono avere proprietà e metodi (perché non sono oggetti).

Ma con JavaScript, i metodi e le proprietà sono anche disponibili per i valori primitivi, poiché JavaScript tratta i valori primitivi come oggetti durante l'esecuzione di metodi e proprietà.

toFixed() restituisce una stringa, con il numero scritto con un numero specificato di decimali:

Esempi

var x = 9.656;
x.toFixed(0);     // restituisce 10
x.toFixed(2);     // restituisce 9.66
x.toFixed(4);     // restituisce 9.6560
x.toFixed(6);     // restituisce 9.656000

toFixed(2) è perfetto per lavorare con i soldi.

Switch

Lo switch non è nient’altro che un particolare caso di if particolarmente ramificato, in cui vine presa in esame un’unica variabile che può assumere differenti valori, e conseguentemente esistono molteplici else if. In pratica il diagramma di flusso dello switch è il medesimo dell’else if:

Figura 1. Diagramma di flusso

la sintassi è:

switch(<variabile da valutare>) { 
  case <valore 1>:
    //istruzioni
  break; //si ferma qui 
  case <valore 2>: 
   //istruzioni 
  break; //si ferma qui 
  …
  case <valore n>: 
    //istruzioni 
  break; //si ferma qui 
  default: 
   //istruzioni 
}

da notare la sintassi case (seguita dai due punti) che indica che stiamo entrando in uno dei casi e l’istruzione break, che serve per interrompere lo switch, ogni volta che si rientra nella casistica che ci interessa.

Esempio

Al posto di:

if (screen.width==640) altezzaCella=80;
else if (screen.width==800) altezzaCella=100;
else if (screen.width==1024) altezzaCella=150;
else altezzaCella=200;

potremmo scrivere:

switch (screen.width) { 
  case 640: 
    altezzaCella=80; 
  break; 
  case 800: 
    altezzaCella=100; 
  break; 
  case 1024: 
    altezzaCella=150; 
  break; 
  default: 
   altezzaCella=200; 
}

While

Una delle caratteristiche saliente della programmazione è la possibilità di costruire delle routine che svolgano operazioni ripetitive. Se l’if, lo switch ci consentono di prendere delle decisioni, while, do while, e for in ci permettono invece di eseguire dei cicli di programmazione. Proprio per questo questi costrutti vengono di solito utilizzati insieme agli array: perché le istruzioni vengono eseguite di volta in volta su tutti gli elementi dell’array.

In tutti i casi si tratta di costrutti che eseguono una determinata azione, finché una certa condizione è valida.

Vediamo il diagramma di flusso corrispondente a questa situazione:

• assegno un indice a 0
• finché è valida la condizione:
• eseguo una determina istruzione
• e poi aumento di uno l’indice
• quando l’istruzione non è più valida, esco dal programma

L’indice viene aumentato scrivendo:

i=i+1;

o più sinteticamente:

i++;

Figura - Diagramma di flusso IV

Se volessimo scorrere un array potremmo ad esempio:

• inizializzare un indice con 0
• confrontare l’indice con la lunghezza dell’array
• finché l’indice è minore della lunghezza dell’array
• compiere una determinata azione
• quindi aumentare l’indice di un unità
• in caso contrario:
• proseguire con il codice

Nell'esempio seguente, il codice nel ciclo verrà eseguito, più e più volte, purché una variabile (i) sia inferiore a 10:

while (i < 10) {
    text += "The number is " + i;
    i++;
}

Da notare nell’esempio che sono state eseguite le istruzioni e infine aumentato l’indice. Solo quando l’indice è diventato superiore alla lunghezza a 10 si “esce” dal while.