sou a inici > el taller > Repetició d'elements

Repetició d'elements

En aquest document s'explica com utilitzar JavaScript per facilitar les tasques d'actualització i manteniment d'una pàgina web, evitant la codificació repetitiva d'elements HTML (taules d'índex, títols, quadres, peus de pàgina, etc...).

i. Introducció

Hi ha moltes vegades en que dintre d'un conjunt de pàgines web tenim molts elements comuns (encapçalaments, menus, peus de pàgina, enllaços...), fins i tot dintre d'una mateixa pàgina hi ha a vegades elements repetits!

Per estalviar temps i esforç a l'hora de codificar tots aquests elements podem utilitzar codi JavaScript per encapsular-los de manera que cada vegada que s'hagin de posar només haguem de realitzar una crida a una funció. Això també ens pot estalviar temps de descàrrega del conjunt de pàgines, i fins i tot es pot personalitzar la crida per cada funció depenent des d'on es faci.

ii. Funció bàsica

El que fa aquesta funció es escriure, mitjançant la instrucció document.writeln() de javascript, el codi HTML que li hem indicat. Té dos passos principals: la creació de la funció JavaScript propiament dita i la crida a aquesta funció des de cada pàgina o lloc on la necessitem. Veiem-ho amb més detall:

Creació del codi de la funció

Definir el codi HTML que volem repetir. Com a exemple, definirem un títol comú a vàries pàgines:
```
<table border="1">
 <tr>
  <td>Títol d'exemple de la pàgina</td>
 </td>
</table>
```
Quan ja tenim això (amb el nivell de complicació que es vulgui en l'HTML, es poden incloure estils CSS, crides a capes, inclús d'altres funcions JavaScript!), agafem tot aquest codi HTML i l'introduim dintre de sentències document.writeln() de JavaScript, tractant-lo com si fóssin simples cadenes de text, i agrupant totes aquestes dins una funció:
```
function cap() {
  document.writeln("<table border=\"1\">");
  document.writeln("<tr><td>");
  document.writeln("Títol d'exemple de la pàgina");
  document.writeln("</td></td>");
  document.writeln("</table>");
}
```
Una vegada tenim aquesta funció, cal incloure-la en un fitxer de funcions JavaScript (ja existent o nou, per exemple, blocs.js).

Enllaç i crida de la funció des del document

Això ho farem a cada una de les pàgnies en les que es vulgui utilitzar la funció, es a dir, posar la capçelera anteriorment definida.

Crear un enllaç a la secció head de la nostra pàgina a aquest fitxer:

<script language="JavaScript" src="blocs.js" type="text/javascript">
</script>

Incloure una crida a la funció al punt del document on es vulgui incloure el codi. Al nostre exemple, essent un títol, l'inclourem al principi de la secció body:

<html>
  <head>
    <script language="JavaScript" src="blocs.js" type="text/javascript">
    </script>
  </head>
  <body>

    <script language="JavaScript" type="text/javascript">
      <!--
      cap();
      //-->
    </script>

    linia 1<br>
    linia 2<br>
    linia 3<br>
    linia 4<br>

  </body>
</html>

Així, aquesta pàgina quedaría com: exemple 1

Podem incloure aquesta crida a qualsevol punt del document, amb el codi HTML que es vulgui al seu interior.

iii. Millores

La funció es pot millorar amb el pas de paràmetres, per exemple, per personalitzar el títol de cada pàgina dins d'un format comú de títol.

En aquest cas, el codi de la funció variará de la següent manera:

function cap (altrafrase) {
    document.writeln("<table border=\"0\">");
    document.writeln("<tr><td>");
    document.writeln("<h1>Títol d'exemple</h1>");
    document.writeln("<h2>"+altrafrase+"</h2>");
    document.writeln("</td></td>");
    document.writeln("</table>");
}

Es poden passar tants paràmetres com volguem, i fins i tot es pot passar com paràmetre més codi HTML per incloure, per exemple, una imatge... al cap i a la fi, la funció el tractarà com qualsevol altra cadena de text!

La pàgina quedarà així:

<html>
  <head>
    <script language="JavaScript" src="blocs.js" type="text/javascript">
    </script>
  </head>
  <body>

  <script language="JavaScript" type="text/javascript">
    <!--
    cap("<font color=\"#ff0000\">Subtítol d'exemple</font>");
    //-->
  </script>

  </body>
</html>

En aquesta crida s'ha inclòs un paràmetre, però dins el paràmetre hi ha un tag html que farà que el subtítol de la pàgina sigui de color vermell.

En aquest cas, la pàgina quedaría així: exemple 2

De la mateixa manera, aquesta personalització es pot fer servir per personalitzacions de menus construits d'aquesta manera, càrrega d'imatges, etc.

iv. Pros i contres

Aquesta tècnica ens permet un cert grau de dinamisme a la pàgina, però sobretot ens permet, com a desenvolupadors, estalviar-nos molta feina tant en l'entrada de codi repetitiu en una pàgina com d'elements comuns a diverses pàgines, i fins i tot pot alleugerir les tasques de manteniment o renovació del lloc en un futur.

També, pel fet de posar la funció dins d'un fitxer de funcions JavaScript exterior a la página html, lligant-lo mitjançant un enllaç ens estalviem temps de descàrrega, ja que el fitxer romandrà a la catxé.

Per contra, s'ha de tenir en compte que no deixa de ser una funció JavaScript i, per tant, si l'usuari té deshabilitada la execució de JavaScript al seu navegador això no funcionarà, pel que és recomanable establir una alternativa (per exemple, un bloc <script></noscript> amb un enllaç a la pàgina principal o un missatge...).