Differences

This shows you the differences between two versions of the page.

--- es:web_development:tables:javascript [2022/03/16 19:07]
mag [Configuración]
+++ es:web_development:tables:javascript [2023/08/16 09:33] (current)
@@ Line 120: / Line 120: @@
 }</code>
   * Ahora mueva el bloque 'crear texto de fila' dentro de su nueva función.
-<code>funcion crearTextoFila() {
+<code>function crearTextoFila() {
     statsRow = "<tr>";
     statsRow += "<td>" + jugador[0] + "</td>";
@@ Line 131: / Line 131: @@
   * En este punto, la función no sabe qué playeres y el código principal no tendrá acceso a statsRow.
   * Agregue playerbetween ()para decirle al código original que necesitamos esta información.
-  * Agregue una nueva línea al final con return statsRow;para devolver la cadena al código principal. Ahora debería verse así.
+  * Agregue una nueva línea al final con <html>return statsRow;</html> para devolver la cadena al código principal. Ahora debería verse así.
-<code>funcion crearTextoFila(jugador) {
+<code>function crearTextoFila(jugador) {
     statsRow = "<tr>";
     statsRow += "<td>" + jugador[0] + "</td>";
@@ Line 146: / Line 146: @@
   * Realmente queremos que nuestro programa funcione con 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, actualicemos nuestra sección 'generar datos' para mostrar una matriz de matrices (lista de listas).
+<code>    jugadores = [
+        ['David', 'Ospina Ramírez', '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']
+              ];</code>
+  * Tenga en cuenta que cada línea es un elemento en la lista más grande, por lo que los separamos por <html>,</html>.
+  * El único <html>;</html> está al final de toda la declaración.
+  * Entonces estamos diciendo que tenemos una matriz de matrices (lista de listas) llamada <html>jugadores</html>.
+  * Queremos mostrar a cada jugador por turno, por lo que necesitamos datos de 'jugadores[0]', 'jugadores[1]', 'jugadores[2] y 'jugadores[3]'. En lugar de escribir cada uno de estos a su vez, podemos usar un bucle javascript de la siguiente manera.
+<code>    // crear texto
+    for (j = 0; j <jugadores.length; j++) {
+    }</code>
+  * ¿Recuerdas esto de cuando creaste una lista usando Javascript? Hemos reemplazado 'i' con 'j' . Estamos ejecutando el código desde el jugador 1 (<html>j = 0</html>) hasta llegar al último jugador (<html>j < jugadores.length</html>) incrementando cada vez (<html>j++</html>) para llegar a todos los jugadores.
+  * Antes de continuar, verifiquemos que tenemos la información correcta.
+  * Agregue una línea dentro del bucle for de la siguiente manera.
+<code>        console.log(j);</code>
+  * Esto imprimirá el valor de 'j' en la consola, que es una herramienta que le permite interactuar con el código javascript en la página.
+  * Abra su código 'team.html' en Live Server, que aún debería mostrar la fila del encabezado de la tabla.
+  * Ahora abra sus Herramientas de desarrollador (haga clic en el menú en la parte superior derecha, luego seleccione 'Más herramientas' y 'Herramientas de desarrollador') y cambie al panel 'Consola'.
+  * Comprueba que tiene impresos (en verde) los valores del 0 al 3. Si no, mira si puedes averiguar por qué. No dude en pedir ayuda.
+  * Vayamos un paso más allá y cambiemos <html>j</html> a <html>jugadores[j]</html> cuáles deberían ser los datos de cada jugador.
+  * Verifique la consola nuevamente (actualice la página si es necesario) y debería ver 4 matrices, cada una con una lista de datos del jugador. Eso nos dice que tenemos los datos correctos listos para usar.
+  * Ahora, para cada jugador, necesitamos crear statsRow como para un solo jugador.
+  * Ya tenemos una función que hace esto, así que llamémosla.
+<code>        // crea texto de fila
+        statsRow = crearTextoFila(jugadores[j]);</code>
+  * Mantuvimos el nombre de la variable 'statsRow' porque se ajusta a nuestro código para agregar a la tabla, pero esta es una variable diferente a la que está dentro de la función. El que está dentro de la función solo funciona dentro de la función (su 'alcance' es la función).
+  * <html>createRowText(jugadores[j])</html> llama a la función 'createRowText' y le proporciona los datos pertenecientes al jugador actual como vimos en la Consola.
+  * Si revisa la página nuevamente ahora, solo mostrará el último jugador porque estamos sobrescribiendo los datos del jugador cada vez que llamamos a la función (<html>statsRow = createRowText(jugadores[j]</html>)reasignaciones 'statsRow').
+  * Vamos a mover el bloque de código 'agregar fila a la tabla' dentro del 'bucle for' para mostrar cada fila cuando los datos estén listos (y antes de que los perdamos).
+<code>    for (j = 0; j <jugadores.length; j++) {
+        console.log(jugadores[j]);
+        // crea texto de fila
+        statsRow = createRowText(jugadores[j]);
+        // agregar fila a la tabla
+        tableBody = document.getElementsByTagName("tbody")[0];
+        newRow = tableBody.insertRow(0);
+        newRow.innerHTML = statsRow;
+    }</code>
+  * Ejecute el código ahora y verá que todavía no está del todo bien. Todos los jugadores están listados, pero el orden es al revés.
+  * Esto se debe a que siempre agregamos la nueva fila en la ranura superior por encima de todo lo demás (<html>.insertRow[0]</html>).
+  * Queremos que el número de fila aumente al mismo tiempo que los datos del jugador.
+<code>        newRow = tableBody.insertRow(j);</code>
+  * Hay un último cambio que hacer. 'tableBody' nunca cambia, por lo que no hay necesidad de reasignarlo cada vez que pasamos por el bucle. Muevamos esa línea sobre el bucle para que se calcule primero y nunca más.
+  * Nuestro código final se ve así.
+<code>window.onload = funcion () {
+    // generar datos
+    jugadores = [
+        ['David', 'Ospina Ramírez', '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];
+    // mostrar datos
+    for (j = 0; j <jugadores.length; j++) {
+        // console.log(jugadores[j]);
+        // crea texto de fila
+        statsRow = createRowText(jugadores[j]);
+        // agregar fila a la tabla
+        newRow = tableBody.insertRow(j);
+        newRow.innerHTML = statsRow;
+    }
+}
+función crearTextoFila(jugador) {
+    statsRow = "<tr>";
+    statsRow += "<td>" + jugador[0] + "</td>";
+    statsRow += "<td>" + jugador[1] + "</td>";
+    statsRow += "<td>" + jugador[2] + "</td>";
+    statsRow += "<td>" + jugador[3] + "</td>";
+    statsRow += "<td>" + jugador[4] + "</td>";
+    statsRow += "</tr>";
+    return statsRow;
+}</code>
+  * Esto parece mucho más eficiente ahora, pero aún puede pensar que es más fácil crear la tabla en HTML que en Javascript. Está bien. ¿Qué tal si usamos el equipo completo? ¿Te imaginas armar la mesa con 26 jugadores? ¿Qué sucede si está utilizando datos con miles de entradas? Crear la matriz es mucho más fácil.
+==== Final Code ====
+  * [[https://techschool.murraygunn.id.au/webdev/classes/proyecto/2/es.html.php|equipo.html]]
+  * [[https://techschool.murraygunn.id.au/webdev/classes/proyecto/2/style.php|style.css]]
+  * [[https://techschool.murraygunn.id.au/webdev/classes/proyecto/2/es.js.php|equipo.js]]
+  * [[https://techschool.murraygunn.id.au/webdev/classes/proyecto/2/equipo.html|resultado]]
+[[es:web_development:tables:exercise|Siguiente: Ejercicios]]

Tech School

User Tools

Site Tools

Differences

Page Tools