Les pàgines es llegeixen i s'executen de forma seqüencial, de dalt a baix i d'esquerra a dreta. HTML no té cap més possibilitat. Si utilitzem capes i fulls d'estils, podem situar elements a qualsevol lloc de la pàgina, però, com abans, tot està decidit.

Amb JavaScript, en canvi, podem dirigir el flux en funció de què es compleixin, o no, unes condicions. Ja ho hem vist en pràctiques anteriors. Ara hi tornem amb més profunditat.

Un condicional fa una comparació o, si ho volem més precís, "avalua una expressió". Si el resultat és cert (true), s'executa una instrucció, un bloc de codi o tota una pàgina, el que vulguem. Opcionalment, si el resultat és fals (false) es pot tirar per un altre camí.

Sovint, però, dues opcions són poques. L'expressió que s'avalua pot tenir diversos resultats i cal un mecanisme que permeti triar sense haver de fer eleccions binàries. Els selectors ens ofereixen, precisament, aquesta funcionalitat.

  Conceptes JavaScript en aquest capítol
Declaració if() ... else : avalua una expressió i dirigeix el flux segons el resultat.
Operador ? : avalua una expressió i retorna (assigna) un valor segons el resultat.
Mètode confirm() : presenta un missatge i permet triar entre dues respostes.
Declaració switch() ... case : estructura que permet seleccionar entre diverses opcions.
Objecte Math : proporciona una interfície per treballar amb números.
Mètode random() : genera un número aleatori entre 0 i 1.
Mètode floor() : elimina els decimals d'un número.
Mètode location.reload() : torna a carregar la pàgina.

  1.- Paper de llistat
Recordeu el paper d'impressora a ratlles blanques i blaves? De vegades, va bé tenir colors alterns, sobretot, quan visualitzem llistats de dades. Veurem com es pot fer.

Necessitem un interruptor, alguna cosa que només tingui dues possibilitats. Alguna idea? Naturalment, el mòdul de dividir per 2, parells i senars. Tornem a utilitzar una taula i pintem les cel·les. Al mateix temps, veurem com es poden escriure instruccions dinàmiques, a bocinets, en funció d'una decisió.

"Si es compleix la condició, per aquí, si no, per allà", en JavaScript seria:

  if ( condició ) {
      ... bloc cert ...
  }
  else {

      ... bloc fals ...
  }


Al codi, utilitzem el mètode document.write() quan no volem fer un salt de línia, és a dir, quan volem que el text d'una instrucció s'escrigui a la pàgina "enganxat" al següent. En canvi, utilitzem el mètode document.writeln() per fer un salt de línia després d'escriure. Cal recordar que HTML reconeix els salts de línia i que és HTML el que escrivim al document.

Aplicarem els colors a les files (<tr>), no pas a les cel·les (<td>). Això també ho podem fer amb Dreamweaver, si sabem usar la barra d'estat, tal com s'explica al mòdul 1. Cada fila, tindrà dues cel·les del mateix color. La de l'esquerra ens servirà per numerar les línies.

<table border="0" cellspacing="0" width="100%">
<script language="javascript">
<!--

for ( var i=1 ; i<21 ; i++ ) {
  document.write( '<tr bgcolor="#' ) ;
  if ( i%2==1 ){
    document.write( 'FFFFFF') ;
  }
  else {
    document.write( 'DDEEFF') ;
  }
  document.writeln( '"><td width="20" align="right">' + i + '</td>' ) ;
  document.writeln( '<td>&nbsp;</td></tr>' ) ;
}
// -->
</script>
</table>
 
2.-
Més compacte
Per fer això, però, no cal tant codi. JavaScript disposa d'un operador ternari (és l'únic que té tres elements), que pot resoldre aquesta situació de forma més compacta i elegant. És un "condicional en línia" que actua com un "if ... else ...", però de manera més breu:

  ( condició ) ? bloc cert : bloc fals

Si es compleix la condició s'executa el primer bloc, si no, el segon. Això resulta molt útil, sobretot quan tots dos, cert i fals, són curts o només s'ha de retornar un valor.

L'expressió: ( i%2==1 ) ? 'EEFFDD' : 'EEDDFF'
es llegeix: Si el residu de dividir i per 2 és 1, retorna 'EEFFDD', si no, retorna 'EEDDFF'

<table border="0" cellspacing="0" width="100%">
<script language="javascript">
for ( var i=1 ; i<21 ; i++ ) {
  document.writeln( '<tr bgcolor="#' + ( ( i%2==1 ) ? 'EEFFDD' : 'EEDDFF' ) + '">' )
  document.writeln( '<td width="20" align="right">' + i + '</td>' )
  document.writeln( '<td>&nbsp;</td></tr>' )
}
</script>
</table>
 
3.- Tu tries
Als exemples anteriors, l'usuari fa d'espectador. Si li volem donar l'oportunitat de triar, necessitem un mecanisme que retorni cert o fals. El tenim. Es tracta de la funció "confirm", germana d'alert i cosina de prompt, que hem vist al mòdul anterior. Tots tres són mètodes de l'objecte window. Si no s'especifica la finestra, es suposa l'actual.

La seva sintaxi és molt senzilla: confirm ( missatge ) Es pot usar de dues maneres:

1.- Assignem el resultat a una variable: var tu_tries = confirm ( missatge )
2.- Avaluem el resultat a la pròpia estructura condicional:

  if ( confirm ( missatge ) ) { ... resposta afirmativa ... }
  else { ... resposta negativa ... }

Com es pot veure, és una forma ràpida i eficaç de consultar l'usuari. Això sí, només té dues opcions i obliga a redactar de manera que s'hagi de triar entre Acceptar o Cancel·lar.

<script language="javascript">
if ( confirm ( 'Vols veure una bona imatge?' ) ) {
  document.writeln( '<img src="images/foto01.jpg">' )
}
else {
  document.writeln( 'Tu t'ho perds !' )
}
</script>
 
4.- Joc d'atzar
Un selector (switch) és una estructura que permet dirigir el flux del programa en diverses direccions, depenent del valor d'una variable. Cada cas (case) executa un bloc d'instruccions. Si aquest bloc es tanca amb la instrucció de ruptura (break), salta a l'acabament de l'estructura; si no, llegeix el cas següent.

Opcionalment, podem utilitzar la paraula default per indicar què s'ha de fer si no s'ha donat cap dels casos previstos. Això només té sentit si els blocs anteriors acabaven amb "break", en cas contrari, sempre s'executaria el bloc de "default".

Vols jugar?switch ( expressió ) {
  case
cas1 :

    bloc d'instruccions per al cas1;
    break;
  case
cas2 :

    bloc d'instruccions per al cas 2;
    break;
    ...

  default :

    bloc d'instruccions per defecte;
}

Si els blocs d'instruccions no són massa llargs, es pot escriure cada cas en una línia. A l'exemple següent ho hem fet així. Cal recordar que JavaScript interpreta el punt i coma (;) com a salts de línia. Atenció, també, amb els dos punts (:) obligatoris que porta cada cas.

L'exemple proposa un senzill joc d'atzar. Es tracta d'aconseguir quatre quadres del mateix color. Dins d'un bucle es crea, a cada volta, un número aleatori entre 0 i 3. Segons quin sigui, es pintarà una cel·la d'un color o un altre. Finalment, posem un enllaç per repetir la jugada.

JavaScript té l'objecte Math per treballar amb números. Un dels seus mètodes, random(), proporciona un número aleatori entre 0 i 1, sempre diferent. Si el multipliquem per 4, tenim un número decimal entre 0 i 4. Com que només ens interessa la part sencera, ho "passem" pel mètode floor(), que descarta els decimals. El resultat l'assignem a la variable rnd:

  var rnd = Math.floor( Math.random() * 4 );
  r n d   serà la part sencera d'un número aleatori multiplicat per quatre.

A continuació posem el selector. Als casos 0, 1 i 2, assignem a la variable clr els codis de color roig, groc i verd, respectivament, i trenquem l'estructura. Per defecte, assignem el blau.

Un cop feta la selecció (una per cada volta del bucle) tenim la variable "rnd" amb un número i la variable "clr" amb un codi de color. Dibuixem una cel·la d'aquest color i escrivim el número.

Finalment, tanquem la fila i en fem una altra, de quatre cel·les d'amplada, amb un enllaç que torni a carregar la pàgina. D'això se n'encarrega el mètode reload() de l'objecte location. Per acabar-ho, tanquem cel·la, fila i taula.

<table border="0" cellspacing="4" cellpadding="30"><tr>
<script language="javascript">
for ( var i=0 ; i<4 ; i++ ) {
  var rnd = Math.floor( Math.random() * 4 );
  switch ( rnd ) {
    case 0: clr = 'FF6666'; break;
    case 1: clr = 'DDCC00'; break;
    case 2: clr = '00CC00'; break;
    default: clr = '0099FF';
  }
  document.writeln( '<td bgcolor = "#' + clr + '">' + rnd + '</td>' );
}
document.writeln( '</tr><tr><td colspan="4" align="center">' );
document.writeln( '<a href="javascript:location.reload()">Tornar-ho a provar</a>' );
document.writeln( '</td></tr>' );
</script>
</table>
 
5.- Noms de variables
Les normes són ben simples: una variable (o una funció, les veurem al mòdul següent) ha de tenir un nom, format per lletres i números - sense espais en blanc -, que no pugui entrar en conflicte amb qualsevol altre.

Tot i que no és norma, els noms de variables i funcions han de ser curts i significatius. Una tècnica, força efectiva, és l'anomenada "mescla de paraules" (wordmixing), que es basa en encadenar bocins de paraules abreujades. Hi ha qui, a més, comença amb una inicial minúscula que identifica el tipus de variable: a (Arrays), o (objectes), n (números), c (cadenes de text) , b (booleans, lògics), ... : aLnk, oWin, nInd, cTxt, bLog, ...

En general, els noms més curs es reserven per a variables amb un àmbit petit. Per exemple, s'utilitzen noms d'una lletra ( i, j, k ) per als índex dels bucles - que es declaren dins del bucle - i, en canvi, noms més significatius per a variables que afecten tota la pàgina.