Lección 3 de desarrollo web - Tablas

Continuaremos construyendo nuestra tabla de estadísticas en el equipo de Colombia, pero lo haremos de manera más eficiente con javascript mediante el uso de matrices y bucles.

• Comenzaremos con el trabajo realizado en la clase anterior en jsfiddle, pero eliminaremos todo el código dentro de la etiqueta <tbody>. es decir. borre todos los datos y deje solo el encabezado.

HTML

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Nationality</th>
      <th class="age">Age</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

CSS

td, th {
  border-width: 1px;
  border-style: solid;
}

td {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

table {
  border-collapse: collapse;
}

#carlos {
  font-style: italic;
}

.age {
  background-color: yellow;
}

#carlos .age {
  font-weight: 900;
}

td.age {
  font-size: 150%;
}

• Piense en una matriz como una lista.
• En Javascript, una matriz es designada por []
• En nuestro ejemplo, cada línea (los datos de cada jugador) es una lista, por lo que podríamos representar los datos de Ospina Ramirez como una matriz. Copie esto en el panel de Javascript.

ospinaRemirez = ['David', 'Ospina Ramirez', 'Colombia', 33, 'Portero'];

• Echemos un vistazo a esta declaración en detalle.
• La primera palabra 'ospinaRemirez' es una variable llamada 'ospinaRemirez'. Es un lugar para almacenar información. Podemos nombrar variables casi todo lo que queramos, pero la convención es comenzar con minúsculas y convertir la primera letra de las palabras subsiguientes en mayúscula.
• Los = significa que se asigna un valor a la variable 'ospinaRemirez'.
• Lo primero que vemos después de =es [que el valor debe ser una matriz.
• La matriz contiene 5 elementos separados por , y termina con ].
• Cada declaración de Javascript debe terminar con ;.
• Ahora mostremos la lista.

statsRow = "<td>" + ospinaRamirez [0] + "</td>";

• Después de crear la matriz, en la línea 2, creamos una cadena (texto) llamada statsRow. Puedes decir que es una cadena debido a los " símbolos.
• La cadena contiene todo el texto de una celda de datos, pero en lugar de escribir el nombre del jugador, nos referimos a la información dentro de la matriz llamada 'ospinaRamirez'.
• Recuerde que en los programas informáticos, el primer elemento se cuenta como 0, por lo que se hace referencia al nombre como ospinaRamirez[0].
• Observe que las cadenas se unen mediante el +símbolo.

statsRow = statsRow + "<td>" + ospinaRamirez [1] + "</td>";

• En la tercera línea, unimos la nueva cadena a la anterior. statsRow (cadena nueva) = statsRow (cadena antigua) + elementos adicionales.

statsRow + = "<td>" + ospinaRamirez [2] + "</td>";
statsRow + = "<td>" + ospinaRamirez [3] + "</td>";
statsRow + = "<td>" + ospinaRamirez [4] + "</td>";

• A partir de la cuarta línea, simplificamos esto para que sean += elementos adicionales de cadena nueva , pero significa lo mismo. Podríamos haber escrito la tercera línea de la misma manera, pero es bueno ver las diferentes opciones para que puedas elegir la que más te guste.

// agregar fila a la tabla

• Ahora, agregue una línea en blanco para mostrar que estamos comenzando algo un poco diferente. La siguiente línea comienza con lo // que significa que es un comentario. Nos dice qué hace la siguiente parte del programa, pero su computadora no lee esta información. Ahora sabemos que la siguiente sección de código está destinada a agregar la fila a nuestra tabla.

tableBody = document.getElementsByTagName ("tbody") [0];

• La siguiente línea muestra otra variable a la que se le asigna un valor. El valor es un elemento con nombre de etiqueta <tbody> en el documento (que es nuestra página).
• Puede haber más de una tabla (y por lo tanto más de una <tbody> en la página), por getElementsByTagName[0] lo que devuelve una lista y necesitamos identificar qué elemento de la lista queremos. En este caso, es el primero que usamos) .
• Luego asignamos ese elemento a una variable llamada tableBodypara que podamos referirnos a él en las siguientes líneas de código.

newRow = tableBody.insertRow (0);

• Aquí insertamos una nueva fila en la posición 0 (inmediatamente después de la etiqueta <tbody>) de nuestro elemento tableBody.
• Luego lo asignamos a una variable llamada newRow

newRow.innerHTML = statsRow;

• En la última línea de este código, seleccionamos nuestra nueva fila con newRow.
• .innerHTML se refiere al código HTML dentro del elemento antes de ., por lo que ahora estamos hablando del código dentro de nuestra nueva fila.
• Luego usamos =para asignar algo a la nueva fila.
• En este caso, es statsRow cuál es la cadena que contiene todas las celdas de datos.
• Entonces, esta línea lo junta todo para decir 'coloque la cadena con nuestros datos en la nueva fila de <tbody>.
• Veamos el código completo hasta ahora.

ospinaRamirez = ['David', 'Ospina Ramirez', 'Colombia', 33, 'Portero'];
statsRow = "<td>" + ospinaRamirez [0] + "</td>";
statsRow + = "<td>" + ospinaRamirez [1] + "</td>";
statsRow + = "<td>" + ospinaRamirez [2] + "</td>";
statsRow + = "<td>" + ospinaRamirez [3] + "</td>";
statsRow + = "<td>" + ospinaRamirez [4] + "</td>";

// agregar fila a la tabla
tableBody = document.getElementsByTagName ("tbody") [0];
newRow = tableBody.insertRow (0);
newRow.innerHTML = statsRow;

• Es mucho trabajo solo para mostrar una línea, pero no tenemos que pasar por lo mismo cada vez.

• Realmente queremos que nuestro programa se ejecute en todos nuestros jugadores. Así que tenemos una lista de jugadores, cada uno con una lista de estadísticas. En otras palabras, tenemos una matriz de matrices o una matriz multidimensional. Comencemos con los datos que ya conocemos.
• Primero, elimine el código Javascript que creamos arriba.

jugadores = [
  ['David', 'Ospina Ramirez', 'Colombia', 33, 'Portero'],
  ['Carlos', 'Eccehomo Cuesta Figueroa', 'Colombia', 22, 'Defensa'],
  ['Juan Guillermo', 'Cuadrado Bello', 'Colombia', 33, 'Centrocampista'],
  ['Radamel Falcao', 'García Zárate', 'Colombia', 35, 'Delantero']
          ];

• Tenga en cuenta que cada línea es un elemento en la lista más grande, por lo que los separamos por ,.
• El único ;está al final de toda la declaración.
• Entonces estamos diciendo que tenemos una matriz de matrices (lista de listas) llamada players.
• Queremos mostrar a cada jugador, a su vez, por lo que necesitamos los datos de players[0], players[1], players[2] y players[3]. En lugar de escribir cada uno de estos a su vez, podemos usar un bucle javascript de la siguiente manera.

// recorrer todos los jugadores
for (p = 0; p < players.length; p++) {
}

• Se llama bucle porque recorrerá (iterará) cualquier código dentro del {}tantas veces como sea necesario. Definimos cuántas veces con la estructura antes del {.
• Hay algunas formas de hacer esto, pero comenzaremos con un for ciclo, usando pcomo nuestro iterador.
• Dentro de () podemos ver tres elementos de código separados por ;.
• El primero p = 0 le dice a la computadora por dónde empezar, asignando un valor de 0 a la variable p.
• El tercero dice que cada vez que finaliza el ciclo, debemos incrementar p (sumar 1).
• El segundo dice que sigas adelante mientras p < players.length sea ​​verdad. Recuerde que el elemento después de . pertenece al elemento antes de players.length, por lo que aquí está la longitud de la matriz llamada reproductores, que es 4. Por lo tanto, el ciclo debe ejecutarse mientras p < 4, es decir, 0, 1, 2 y 3.
• Ahora, para cada jugador, necesitamos crear la statsRow como para el jugador individual.
• Ya no tenemos la variable llamada ospinaRamirez, por lo que tenemos que encontrar la línea correcta en la matriz de jugadores. Es el primer elemento de la matriz, por lo que el índice es 0, por lo que players[0] es el mismo que ospinaRamirez.

  // crear cadena de estadísticas
  statsRow = "<td>" + jugadores [p] [0] + "</td>";
  statsRow + = "<td>" + jugadores [p] [1] + "</td>";
  statsRow + = "<td>" + jugadores [p] [2] + "</td>";
  statsRow + = "<td>" + jugadores [p] [3] + "</td>";
  statsRow + = "<td>" + jugadores [p] [4] + "</td>";

• Coloque este código dentro del bucle for entre el {}
• Finalmente, podemos agregar la fila a la tabla.

  tableBody = document.getElementsByTagName ("tbody") [0];
  newRow = tableBody.insertRow(p);
  newRow.innerHTML = statsRow;

• Observe que hemos cambiado el 0 después insertRow a p. Si lo dejamos como 0, agregaremos la nueva línea en la parte superior cada vez. Al ponerlo como índice del jugador en la lista, la lista en pantalla será la misma que la lista en nuestra matriz.
• Hay un último cambio que hacer. tableBody nunca cambia, por lo que no es necesario reasignarlo cada vez que recorremos el ciclo. Muevamos esa línea por encima del ciclo para que se calcule primero y nunca más.
• Nuestro código final se ve así.

jugadores = [
  ['David', 'Ospina Ramirez', 'Colombia', 33, 'Portero'],
  ['Carlos', 'Eccehomo Cuesta Figueroa', 'Colombia', 22, 'Defensa'],
  ['Juan Guillermo', 'Cuadrado Bello', 'Colombia', 33, 'Centrocampista'],
  ['Radamel Falcao', 'García Zárate', 'Colombia', 35, 'Delantero']
          ];
          
tableBody = document.getElementsByTagName ("tbody") [0];

// recorrer todos los jugadores
para (p = 0; p <jugadores.longitud; p ++) {
  // crear cadena de estadísticas
  statsRow = "<td>" + jugadores [p] [0] + "</td>";
  statsRow + = "<td>" + jugadores [p] [1] + "</td>";
  statsRow + = "<td>" + jugadores [p] [2] + "</td>";
  statsRow + = "<td>" + jugadores [p] [3] + "</td>";
  statsRow + = "<td>" + jugadores [p] [4] + "</td>";
  
  // agregar fila a la tabla
  newRow = tableBody.insertRow (p);
  newRow.innerHTML = statsRow;
}

• Esto parece mucho más eficiente ahora, pero aún podría pensar que es más fácil crear la tabla en HTML que en Javascript. Está bien. ¿Y si usamos el equipo completo? ¿Te imaginas construir la mesa con 26 jugadores? Crear la matriz es mucho más fácil.

Siguiente: Ejercicio