Els bucles for es basen en una variable numèrica que fa d'índex. Comença per un valor, estableix una condició per mantenir-se funcionant i defineix una operació per assignar nous valors a la variable. Comptar fins a 100, seria, en el nostre llenguatge:
 

<script language="javascript">
<!--
for ( var i=1 ; i<101 ; i++ ) {
  document.write( i + ' ' ) ;
}
// -->
</script>
 

L'exemple anterior fa el que volíem, però el resultat és lineal. Cal donar format. Per això, inserim el codi JavaScript dins d'una taula. La farem amb "borde", alineada al centre. Els números s'escriuran en cel·les, alineats a la dreta, i cada 10, començarà una nova fila.

Utilitzem l'operador %, que dóna com a resultat el mòdul (residu) de la divisió, per saber quan hem de començar i acabar la fila (obrir i tancar <td>): si el mòdul de dividir l'índex per 10 és 1, obrim la fila, i si és 0, la tanquem.
 


<table border="1" cellspacing="0" align="center">
<script language="javascript">
<!--
for ( var i=1 ; i<101 ; i++ ) {
  if ( i%10==1 ) document.write( '<tr>') ;
  document.write( '<td width="30" align="right">' + i + '</td>' ) ;
  if ( i%10==0) document.write( '</tr>' ) ;
}
// -->
</script>
</table>

 

 

Bucles enniuats: les taules de multiplicar

Podem fer un bucle dins d'un altre, cadascun amb la seva variable-índex. D'aquesta manera, en cada volta del bucle exterior s'executa tot el bucle interior.

El nostre sistema de numeració es basa en bucles enniuats. Penseu en un comptador, per exemple, el de la llum. Les xifres de les unitats són el bucle més interior. Giren i, després del 9, fan saltar la xifra de les desenes (bucle extern al de les unitats), i tornen a començar per 0. El mateix passa entre desenes i centenes. Imagineu fins on pot arribar el nivell d'enniuament.

En aquest cas, les files de la taula s'inicien i s'acaben al bucle de la variable "i", i les cel·les, al de la variable "x". Utilitzem el mètode writeln per tal de forçar un salt de línia en acabar. El mètode write no ho fa i, en conseqüència, genera un codi font més difícil de llegir

<table border="1" cellspacing="0" align="center">
<script language="javascript">
for ( var i=1 ; i<11 ; i++ ) {
  document.writeln( '<tr>')
  for ( var x=1 ; x<11 ; x++ ) {
    document.writeln( '<td width="30" align="center">' + (i*x) + '</td>' )
  }
  document.writeln( '</tr>' )
}
</script>
</table>

 

Podem fer un bucle dins d'un altre, cadascun amb la seva variable-índex. D'aquesta manera, en cada volta del bucle exterior s'executa tot el bucle interior.