A la pràctica anterior hem treballat amb números. Està bé per entendre com funcionen els bucles. La seva utilitat, però, no es limita a fer operacions aritmètiques i escriure'n el resultat. En aquesta pràctica veurem com es treballa amb matrius i objectes.

Índex basat en un ArrayUna matriu (Array) és una col·lecció de dades indexades, per exemple, una llista. És un objecte predefinit de JavaScript que té elements, propietats i mètodes.

- Els elements són els valors de la llista.
- Les propietats són les característiques d'aquests elements o de la pròpia llista.
- Els mètodes són les accions que es poden executar.

Si pensem en l'Array "Dies de la setmana", un element seria "dijous", una propietat d'aquest element seria "està format per lletres", una propietat de la llista seria el nombre d'elements (7) i un mètode seria "escriure la llista en ordre invers".

Un objecte (object) té una definició una mica més àmplia i abstracta, però similar. Pensem, per exemple, en el concepte "bombeta". Coneixem les seves propietats (potència, forma, color, ...) i mètodes (s'encén, s'apaga, es fon, ... ). Sabem tot això, en general, però només ho podem aplicar a bombetes concretes, no pas al concepte.

Pel que fa als llenguatges de programació, el concepte s'anomena "objecte" i la realitat concreta, "instància". En el cas d'abans, "matriu (Array)" era l'objecte i "dies de la setmana", la instància que hem triat. I, al paràgraf anterior, podríem dir que "bombeta" és un objecte i "la meva bombeta de 60w marca Acme" és la nostra instància concreta.

Sovint, però, s'utilitza la paraula "objecte" per referir-se a una instància, igual com diem "el cotxe" per referir-nos a un vehicle en particular. JavaScript no fa distincions.

El navegador crea una jerarquia d'objectes per tal de poder manejar la pàgina i JavaScript pot manipular aquesta estructura. Els enllaços, per exemple, són objectes d'aquesta jerarquia, com ho són les imatges, els estils, els formularis, la finestra o el mateix navegador.

  Conceptes JavaScript en aquest capítol
Constructor new Array() : crea una instància de matriu i, opcionalment, li assigna valors.
Propietat lenght: numèrica, indica la longitud (nombre d'elements) d'un objecte o Array.
Declaració for ... in : bucle per recórrer un objecte.
Constructor new String() : crea una instància de cadena i li assigna un valor.
Propietat href : informació sobre l'adreça.
Mètode indexOf() : retorna la posició d'un caràcter o una subcadena en una cadena.

Atenció: Hem d'utilitzar majúscules i minúscules tal com s'han escrit aquí.

  1.- Els dies de la setmana
Utilitzarem l'exemple del principi. Farem la llista i l'escriurem en una taula amb l'ajut d'un bucle. Per això, declarem la variable dies i li assignem un Array:: var dies = new Array( ... ).

Dins dels parèntesis escrivim els elements entre cometes, separats per comes (després de l'últim, no). Ho podem fer en una mateixa línia, però, si ho fem com a l'exemple, es millora la llegibilitat. Quan ens volem referir a un element utilitzem la sintaxi element [ índex ]. El primer element té l'índex 0, no 1. La propietat lenght ens indica quants elements hi ha.

Un cop acabada la declaració, fem un bucle que llegeixi l'Array des de la posició 0 (dilluns) i mentre l'índex sigui menor que la longitud (lenght, 7). Cada volta del bucle crea una fila amb una cel·la de 140 píxels, alineada al centre, que conté un element de l'Array.

<table border="1" cellspacing="0" bgcolor="#CCDDEE">
<script language="javascript">
<!--

var dies = new Array(
"Dilluns",
"Dimarts",
"Dimecres",
"Dijous",
"Divendres",
"Dissabte",
"Diumenge" ) ;
for( var i=0; i<dies.length; i++ ){
    document.writeln('<tr><td width="140" align="center">' + dies[i] + '</td></tr>') ;
}
// -->
</script>
</table>

 
2.- Llista d'enllaços
JavaScript pot manejar Arrays de més d'una dimensió. De fet, cada element d'un Array pot ser, al seu torn, un altre Array. Imaginem-nos fins on podem arribar. L'exemple més senzill seria un bidimensional, que el podem imaginar situat en una graella o un full de càlcul.

Per fer una llista d'enllaços, però, en tenim prou amb tractar l'Array com a parelles, és a dir, incrementar el comptador del bucle de dues en dues (o de tres en tres, si, per exemple, volem que cada enllaç tingui una imatge diferent).

Això sí, és necessari que les parelles segueixin un ordre i, al bucle, que cada element del parell vagi on ha d'anar. Per tal de visualitzar-ho millor, utilitzarem dues variables dins del bucle, url i nom, tot i que no caldria.

 
3.- Mostrar els enllaços d'una pàgina
Ara plantegem la qüestió gairebé oposada a l'anterior, en lloc de fer una llista d'enllaços, comprovarem els que hi ha en una pàgina. Els enllaços, com hem dit abans, són objectes dins del document. Farem un bucle que els mostrarà.

Utilitzarem el bucle for ... in, una variant dels bucles for, ideal per recórrer objectes. La seva sintaxi és més senzilla: for ( variable in objecte ). En cada volta la variable pren el valor de l'objecte recorregut, de manera que ens hi podem referir fàcilment.

El navegador coneix l'objecte document.links de la pàgina i ho aprofitarem. La sintaxi dels objectes es basa en escriure la jerarquia de dalt a baix, o de general a particular, amb els noms separats per punts. Quan un dels elements és un altre objecte, utilitzem els claudàtors per assenyalar l'índex, com fèiem als Arrays.

Com que, d'entrada, no sabem quin tipus de dades ens proporcionarà el recorregut, a cada volta crearem una variable, url, i li assignarem el valor que ens proporcioni l'objecte, convertit en cadena. "Cadena" significa literal, format per lletres.

- La línia
  var url = new String( document.links[item].href )

- Vol dir.
la variable url serà una nova cadena, amb el valor que té la propietat href de l'objecte links de l'item que està passant en aquesta volta, i que pertany a document (la pàgina actual).

Un cop fet això, comprovem si url conté el text ".htm", per saber si li hem de posar un enllaç. Per això, utilitzem el mètode url.indexOf(), que ens informa sobre la posició que ocupa una subcadena en una cadena. Si és major que 0, aleshores és un enllaç. L'escrivim al document, preparat per obrir-se en una finestra nova (target="_blank").

<script language="javascript">
for( var item in document.links ){
  var url = new String( document.links[item].href )
  if( url.indexOf(".htm")>0 ){
    document.writeln('<a href="' + url + '" target="_blank">' + url + '<br>')
  }
}
</script>
 
4.- La sintaxi del punt
Com hem vist, la sintaxi per accedir a les propietats dels objectes és relativament senzilla, es basa en separar la jerarquia amb punts. Per executar els seus mètodes hem d'afegir, a més, el parell de parèntesis i, a dins, els paràmetres, si cal.

Sense aprofundir més en el tema, veurem algunes propietats d'objectes. Quins? Intentem esbrinar-ho ... Més endavant hi tornarem.

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

document.writeln( document.title + '<br>');
document.writeln( document.lastModified + '<br>');
document.writeln( navigator.appName + '<br>');
document.writeln( window.screen.width + 'x' + window.screen.height + '<br>');
document.writeln( document.forms[0].method + '<br>');
document.writeln( document.images[1].src + '<br>');
// -->
</script>

 
5.- Depuració d'errades amb Dreamweaver
Si utilitzem Dreamweaver com a editor, disposem d'un depurador de codi JavaScript que ens permet detectar les errades en temps de disseny (bé, no és del tot cert, ja que obliga a guardar l'arxiu, però el codi queda editable).

Per iniciar la depuració obrim el menú "Archivo - Depurar en navegador" o fem clic a la barra d'eines el botó "Vista previa / Depurar en navegador" i triem el que ens calgui.

Si hi ha errades de sintaxi, apareix la finestra "Errores de sintaxi JavaScript". Quan ens situem sobre un element de la llista, mostra l'explicació al quadre inferior i un botó "Ir a línea" que ens permet anar al punt del codi que conté l'errada.

Si el depurador localitza errades de lògica, en canvi, apareix la finestra "Depurador JavaScript", que ens permet, per exemple, definir punts d'aturada, executar el codi línia a línia, veure l'estat de les variables, ... Però, tot això i més ho tenim a l'ajuda del Dreamweaver, a la secció "Depurar código JavaScript".