En el disseny de pàgines sovint hem de repetir la mateixa estructura moltes vegades, amb lleugeres variacions de contingut o format. Copiem el bocí que ens interessa i l'enganxem en un altre lloc o, si volem repetir l'estructura en pàgines diferents, utilitzem plantilles.

Els bucles permeten escriure fragments de codi només un cop i repetir-los mentre es compleixi una condició, tot inserint-hi elements variables. Són al nucli de tots els llenguatges de programació i constitueixen una eina molt poderosa. En aquesta pràctica proposem quatre exercicis per entendre els bucles for, un dels recursos més usats en JavaScript.

Al primer mòdul ja vam tenir la primera experiència amb el llenguatge i, si hem arribat fins aquí sense errades, ens podem sentir afortunats. Escriure codi és, bàsicament, cometre errades. Bé, potser no cal exagerar, però, per si un cas, en acabar aquesta pràctica hi ha uns consells útils. (Si no podeu esperar, feu clic aquí)

  Conceptes JavaScript en aquest capítol
Declaració for() : determina quantes vegades s'han de repetir les instruccions.
Declaració var : declara una variable i li assigna un valor.
Declaració if() : condicional que avalua si una expressió o comparació és certa.
Mètodes document.write() , document.writeln() : escriuen a la pàgina.
Assignació = : estableix el valor d'una variable.
Comparacions == , < , >= :igual, menor que, major o igual que.
Operacions ++ , + , - , * , % : increment, suma, resta, multiplicació i residu de la divisió.

Fixeu-vos: utilitzem "=" per assignar i "==" per comparar. Confondre-les pot resultar fatal.

  1.- Comptar fins a 100
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:

  - Començar per 1 i, mentre el número sigui menor que 101, incrementar un.

La declaració del bucle for té tres elements, entre parèntesi i separats per punt i coma:
- Inicialització de la variable i assignació del primer valor: var i=1
- Condició per mantenir-se dins del bucle: i<101
- Incrementar un: i++
La declaració queda, doncs: for ( var i=1 ; i<101 ; i++ )

En cada volta s'executen les instruccions que hi ha entre les claus { }. Normalment, aquest bocí del codi s'escriu tabulat (més a la dreta) per tal de facilitar la lectura. Aquest és un hàbit que cal adquirir. En estructures més complexes o scripts més llargs, resulta imprescindible.

En el cas que ens ocupa, el que fem és, senzillament, escriure a la pàgina el valor que té la variable, seguit d'un espai en blanc: document.write( i + ' ' )

<script language="javascript">
<!--

for ( var i=1 ; i<101 ; i++ ) {
  document.write( i + ' ' ) ;
}
// -->
</script>
 
2.- Donar format
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.

La funció if executa el codi que s'escriu a continuació si és veritat l'expressió que avalua. Si i%10 és 1, escriu un <tr>. document és la representació interna de la pàgina - un objecte - que maneja el navegador i write és el mètode per escriure-hi. Així, doncs:

  - quan escrivim   if ( i%10==1 ) document.write( '<tr>')
  - estem dient:  si el residu de dividir per 10 és 1 escriu a la pàgina "<tr>"

A la línia central del bucle, que s'executarà en totes les passades, utilitzem els dos tipus de cometes. Les simples (apòstrof) delimiten el text que s'envia al document. Les dobles formen part d'aquest text, que no és més que llenguatge HTML. La variable ( i ), evidentment, queda fora de qualsevol tipus de cometes.

<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>
 
3.- Ordre Invers, només parells, deu a cada fila
Un bucle també pot anar decreixent, i no cal que ho faci d'un en un. El tercer element de la declaració pot ser qualsevol operació vàlida, en aquest cas, restar-ne dos: i = i - 2

Mantindrem el bucle mentre sigui més gran o igual que 0. Hem d'ajustar les condicions d'inici i fi de cada fila. Tornem a utilitzar l'operador mòdul, %, ara dividint per vint. Comencem pel 98. El primer residu és, doncs,18, i l'últim, 0. Aquest cop, a més, pintem les cel·les.

for(), if(), write(), ... tenen forma de funció (veurem les funcions més endavant). Pràcticament totes les accions en JavaScript utilitzen aquest format: instrucció seguida de parèntesis i, a dins, els arguments, o paràmetres, sobre els quals s'executa l'acció. Aquests arguments poden ser variables, codi HTML, altres funcions, ...

<table border="0" cellspacing="1" align="center">
<script language="javascript">
<!--

for ( var i=98 ; i>=0 ; i=i-2 ) {
  if ( i%20==18 ) document.write( '<tr>') ;
  document.write( '<td align="center" bgcolor="#FFCC99" >' + i + '</td>' ) ;
  if ( i%20==0) document.write( '</tr>' ) ;
}
// -->
</script>
</table>
 
4.- 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>
 
A l'exemple anterior no hem utilitzat els signes d'ocultar el codi als navegadors anteriors a la versió 4, <!-- per començar i //--> per acabar. Tampoc hem usat el ; per acabar les línies. Si tenim navegadors actuals, funciona, si no ... què hi fem en un curs de JavaScript?
 
5.- Com localitzar les errades
Informació sobre errades amb Netscape 4.7Quan escrivim codi Javascript és normal cometre errades. Sortosament, el propi navegador ens ajuda a localitzar-les. Netscape ho posa fàcil: esborrem la barra d'adreces i escrivim: javascript: (atenció als : finals). Premem Intro i s'obrirà una finestra que ens informa.

Internet Explorer mostra un triangle groc i una descripció a l'esquerra de la barra d'estat. Si fem doble clic sobre el triangle, s'obrirà una finestra amb més informació. I, encara més fàcil, el podem configurar per tal que la finestra s'obri tota sola:

  1.- Anem el menú Herramientas, Opciones de Internet, Opciones Avanzadas.
  2.- Marquem Mostrar una notificación sobre cada error de secuencia de comandos.
  3.- Acceptem. Quan aparegui l'errada, potser haurem de fer clic Mostrar detalles.

Informació sobre errades amb Internet ExplorerSi el nostre navegador i/o sistema operatiu disposen d'un depurador de codi, no cal utilitzar-lo, de moment. Serà més ràpid i còmode fer-ho a mà. Si utilitzem l'Explorer i el tenim activat, tornem a les Opciones Avanzadas i marquem Deshabilitar depuración de secuencias de comandos.

Una de les errades freqüents es produeix per manca de "paritat" entre els signes (cometes, parèntesis). Si, per exemple, escrivim una frase amb un apòstrof entre cometes simples ('), s'interpretarà l'apòstrof com a fi de cadena. Es pot solucionar escrivint una antibarra davant l'apòstrof (\'). Aquesta tècnica farà que s'interpreti com a part de la cadena.

Tots dos navegadors ens diuen el tipus d'errada i la línia on s'ha produït, a partir de l'inici de l'arxiu, de manera que és fàcil localitzar-la. El problema és que, sovint, una errada en provoca una altra, i la llista pot ser llarga. En aquest cas, hem de localitzar i arreglar primer la primera errada, i provar. Potser les altres hauran desaparegut.


Si utilitzem Dreamweaver com a editor, ja devem saber que disposa d'una excel·lent eina., un depurador de codi JavaScript en temps de disseny. S'explica a la propera pràctica.