I cicli per creare i programmi e script in javascript, descrizione e utilizzo.
ALLWEB free
Directory Web Script Linguaggi
Italiano Inglese Tutte
 
 26 Mar 2017
aggiungi in preferiti  
Home    Mappa directory    Script




Cicli Javascript:

Prima di iniziare dobbiamo introdurre una regola:
Tutte le matrici in linguaggio JavaScript iniziano dal numero 0 (zero), pertanto tutti gli elenchi generati (se non indicato diversamente) iniziano dal numero zero (array inclusi).


loop

Il loop non è un ciclo, è l'errore generato da un ciclo infinito.
La causa del loop è una variabile che non raggiunge mai il valore che interrompe il ciclo, gli effetti generati possono essere due:
  • Il codice non crea gli effetti desiderati.
  • Il pc si blocca e dobbiamo uscire dal browser.
Non c'è cosa peggiore di assistere ad un loop mentre stiamo tranquillamente navigando...


Argomenti trattati:



Come in ogni linguaggio di programmazione anche JavaScript possiede i cicli, ossia delle istruzioni che ciclicamente possono modificare o interagire con tutti gli oggetti dello script. Vediamo come si chiamano e cosa possono fare.


IF

Vedi anche l'operatore di confronto ?:
Il ciclo IF (in italiano SE) pone una scelta, ossia 'se vero' esegui in un modo oppure 'se falso' esegui in un altro modo. I cicli IF si possono annidare fra loro, ossia un ciclo IF ne può contenere un altro.

Esempio:
if (a==b){
document.write("uguali")
}
else{
document.write("diversi")
}
Le parentesi graffe si usano per raggruppare più informazioni, quindi se ci sono più azioni da fare in una delle ipotesi mettiamo le graffe, se c'è solo un'azione le possiamo anche omettere.
La clausola Else { } è facoltativa, va usata nel caso ci sia un'alternativa al ciclo IF.
A
B


Questo è l'esempio pratico, anche se con l'aiuto di un form, vediamo il codice:
<script>
<!--
function confronto(form){ //dichiariamo la funzione confronto
if (form.a.value && form.b.value) //chiediamo se A e B sono inseriti
{ //racchiude tutte le azioni attivate se A e B sono inseriti
if (form.a.value==form.b.value) //sono inseriti e ora chiediamo se A e B sono uguali
form.c.value="uguali" //sono uguali e lo scriviamo
else //se non sono uguali....
form.c.value="diversi" //sono diversi e lo scriviamo
} //Conclude tutte le azioni
else //se non sono inseriti....
alert("devi inserire i valori") //manda l'alert con il messaggio
}
-->
</script>
Ed adesso il codice del form:
<form name="d" action="#">
<b>A</b> <input size="10" name="a"><br>
<b>B</b> <input size="10" name="b"><br>
<textarea name="c" rows="1" cols="10"></textarea><br>
<input onclick=confronto(this.form); type="button" value="Aziona la funzione confronto"><br>
<input type="reset" value="Reset" name="cancella">
</form>


Uno strano esempio:
if (!ciao) {
ciao = 5
}
In questo strano esempio chiediamo se la variabile 'ciao' esiste, se non esiste la creiamo e la inizializiamo a 5.


FOR

Il ciclo for esegue un ciclo di informazioni fino a quando la condizione iniziale non diviene falsa.
La sintassi è la seguente:
for (espressione iniziale; condizione; aggiornamento){
....operazioni....
}
Facciamo un esempio pratico per rendere meglio l'idea:
<script>
for (a=0; a<=10; a++){
document.writeln("ciao "+a)
}
</script>
Ottiene come risultato:




FOR IN

Il ciclo for in serve per vedere tutte le proprietà di un oggetto.
La sua sintassi è la seguente:
for (var in nomeoggetto) {
...operazioni...
}
Anche qui sarà utile un esempio per capire come funziona:
Questo è il codice:
<script>
function abc(oggetto, nomeOggetto){
var risultato = ""
var contatore=1
for (var ciascunElemento in oggetto) {
if (contatore <= 4) {
risultato = risultato + (nomeOggetto
+ "." + ciascunElemento + " = "
+ oggetto[ciascunElemento]
+ "n")
}
contatore++
}
alert("Ecco il contenuto dell'oggetto "
+ nomeOggetto
+ ": n"
+ risultato)
}

</script>
<form name="mioForm">
<input type="button" value="ispeziona l'oggetto document utilizzando for...in" onClick='abc(document, "document")'>
</form>
Il ciclo dell'esempio osserva alcune caratteristiche della nostra pagina.


WHILE

Il ciclo while dura fino a quando la condizione è vera. Per far questo dobbiamo necessariamente far variare la condizione all'interno del ciclo.
La sua sintassi è la seguente:
while(variabile condizione valore){
..operazioni..
modificavariabile}


Vediamo un nuovo esempio:
A Inserisci un valore da 0 a 5

Questo è il codice:
<script>
<!--
function confronto(){
var b = h.a.value
if (b<=5 && b!=''){
while(b<=5){
h.c.value=h.c.value+("num"+b)
b++}
}
else
alert("inserire un valore numerico non superiore a 5")
}
-->
</script>

<form name="h" action="#">
<b>A</b><input size="10" name="a">Inserisci un valore da 0 a 5
<input onclick=confronto(); type="button" value="Aziona">
<input type="reset" value="Reset" name="cancella">
</form>
In questo caso abbiamo inserito un ciclo while all'interno di un ciclo if, utilizzando i dati che abbiamo inserito in un form.

Nell'esempio il ciclo while è costituito dalle seguenti righe:
while(b<=5){
h.c.value=h.c.value+("num"+b)
b++}
In sostanza chiediamo se la variabile b è minore o uguale a 5, eseguiamo l'operazione ed infine aumentiamo b di 1. Fino a quando b sarà sempre minore od uguale a 5 eseguiremo l'operazione.


DO WHILE

Il ciclo do while è molto simile al ciclo while. La differenza sostanziale è che il ciclo while può non essere eseguito, questo accade se la condizione risulta falsa fin dall'inizio. Il ciclo do while si esegue sempre, almeno per una volta.
Questo perché il ciclo do while inserisce prima le azioni da fare e dopo la condizione. Il browser esegue le prime istruzioni, poi legge la condizione e se è sempre vera riesegue le istruzioni.
Vediamo il codice:
do {
...azioni...
}
while(condizione)



SWITCH

L'istruzione switch non è un vero e proprio ciclo. Switch viene usato quando abbiamo più alternative da vagliare e non vogliamo inserire più cicli if annidati fra loro.
Supponiamo per esempio di inserire una variabile e di dover agire in maniera diversa se questa variabile corrisponde a due valori. Con l'istruzione if dovremo scrivere due cicli annidati, con switch ne basta uno.
Questo è il codice:
switch (variabile) {
case "x":
azioni
break
case "xx":
azioni
break
}

Vediamo un esempio pratico:
A
Questo è il codice:
<script>
<!--
function inserire(){
var b = g.a.value
switch (b){
case"a":
alert("hai inserito a")
break
case"b":
alert("hai inserito b")
break
case"c":
alert("hai inserito c")
break
default:
alert("non hai inserito ne a, ne b, ne c")
break
}
}
-->
</script>

<form name="g" action="#">
<b>A</b> <INPUT size="10" name="a"> <input onclick=inserire(); type="button" value="Aziona"> </form>
DEFAULT racchiude tutte le alternative che non sono state vagliate dal ciclo.


CONTINUE

Continue interrompe il ciclo ma ritorna al suo inizio ripetendolo. Non azzera però il valore delle variabili, si può usare se uno o più valori non devono influire.
Vediamo l'esempio del ciclo FOR:



Come vedete i primi cinque cicli non vengono scritti. Perché? basta guardare il codice:
<script>
<!--
for (a=0; a<=10; a++){
if (a<5)
continue
else
document.writeln("ciao "+a)
}
-->
</script>



BREAK

Break interrompe il ciclo e riprende dalla prima riga sotto il ciclo.
Esempio:



Come vediamo non scriviamo gli ultimi 5 cicli ma c'è una nuova riga, vediamo il codice:
<script>
<!--
for (a=0; a<=10; a++){
if (a<5)
break
else
document.writeln("ciao "+a)
}
document.writeln("riga fuori ciclo")
-->
</script>