es:web_development:tables:javascript
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
|
es:web_development:tables:javascript [2022/03/15 17:26] mag created |
es:web_development:tables:javascript [2023/08/16 09:33] (current) |
||
|---|---|---|---|
| Line 7: | Line 7: | ||
| * Cree un archivo llamado ' | * Cree un archivo llamado ' | ||
| * Configure la plantilla usando ' | * Configure la plantilla usando ' | ||
| - | * También agregue un archivo Javascript usando ' | + | * También agregue un archivo Javascript usando ' |
| * Cree la tabla y agregue la fila de encabezado. | * Cree la tabla y agregue la fila de encabezado. | ||
| + | |||
| + | **equipo.html** | ||
| + | < | ||
| + | < | ||
| + | <tr> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <th class=" | ||
| + | < | ||
| + | </tr> | ||
| + | </ | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | * Copie el CSS relevante de ' | ||
| + | |||
| + | **style.css** | ||
| + | < | ||
| + | border-width: | ||
| + | border-style: | ||
| + | } | ||
| + | |||
| + | td { | ||
| + | padding: 10px; | ||
| + | } | ||
| + | |||
| + | table { | ||
| + | border-collapse: | ||
| + | } | ||
| + | |||
| + | #carlos { | ||
| + | font-style: italic; | ||
| + | } | ||
| + | |||
| + | .age { | ||
| + | background-color: | ||
| + | } | ||
| + | |||
| + | #carlos .age { | ||
| + | font-weight: | ||
| + | } | ||
| + | |||
| + | td.age { | ||
| + | font-size: 150%; | ||
| + | }</ | ||
| + | * Agregue el siguiente código a ' | ||
| + | |||
| + | **equipo.js** | ||
| + | < | ||
| + | |||
| + | }</ | ||
| + | |||
| + | ==== Matrices ==== | ||
| + | * Así como una lista se puede representar mediante una matriz en Javascript, una tabla (que es una lista de listas) se puede representar como una matriz de matrices. Primero configuremos una sola fila. | ||
| + | * Cada fila es una lista/ | ||
| + | < | ||
| + | // generar datos del jugador | ||
| + | jugador = [' | ||
| + | }</ | ||
| + | * Ahora vamos a mostrar la lista. | ||
| + | < | ||
| + | statsRow = "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "</ | ||
| + | * Espero que esto te resulte familiar. Hicimos algo muy similar al crear una lista en Javascript. | ||
| + | * Estamos creando una larga cadena de código en una variable de texto llamada ' | ||
| + | * El texto contiene el código de una fila que incluye todas las etiquetas apropiadas < | ||
| + | * < | ||
| + | * Ahora que la cadena está lista, podemos agregarla a la tabla. | ||
| + | < | ||
| + | tableBody = document.getElementsByTagName(" | ||
| + | newRow = tableBody.insertRow(0); | ||
| + | newRow.innerHTML = statsRow;</ | ||
| + | * También debe reconocer este código. | ||
| + | * La primera línea (después del comentario) muestra el elemento con el etiqueta < | ||
| + | * Luego insertamos una nueva fila en la posición 0 (inmediatamente después de la etiqueta < | ||
| + | * En la línea final de este código, llenamos nuestra nueva fila con < | ||
| + | * Veamos el código completo hasta ahora. | ||
| + | < | ||
| + | // generar datos | ||
| + | jugador = [' | ||
| + | |||
| + | // crea texto de fila | ||
| + | statsRow = "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "</ | ||
| + | |||
| + | // agregar fila a la tabla | ||
| + | tableBody = document.getElementsByTagName(" | ||
| + | newRow = tableBody.insertRow(0); | ||
| + | newRow.innerHTML = statsRow; | ||
| + | }</ | ||
| + | * Eso es mucho trabajo para solo mostrar una línea, pero no tenemos que pasar por lo mismo cada vez. | ||
| + | |||
| + | ==== Funciones ==== | ||
| + | * Queremos usar la sección 'crear texto de fila' varias veces (una para cada jugador), así que vamos a moverla a su propia función Javascript. | ||
| + | * Una función es un bloque de código que se puede llamar haciendo clic en un botón o desde cualquier otro lugar del código Javascript. ¿Recuerdas que hicimos esto para nuestras listas de verificación en la lección anterior? | ||
| + | * Agregue esta función debajo del código existente. | ||
| + | < | ||
| + | | ||
| + | }</ | ||
| + | * Ahora mueva el bloque 'crear texto de fila' dentro de su nueva función. | ||
| + | < | ||
| + | statsRow = "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "</ | ||
| + | }</ | ||
| + | * 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 < | ||
| + | < | ||
| + | statsRow = "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "</ | ||
| + | return statsRow; | ||
| + | }</ | ||
| + | |||
| + | ==== Matrices Multidimensionales ==== | ||
| + | * 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 ' | ||
| + | < | ||
| + | [' | ||
| + | [' | ||
| + | ['Juan Guillermo', | ||
| + | [' | ||
| + | ];</ | ||
| + | * Tenga en cuenta que cada línea es un elemento en la lista más grande, por lo que los separamos por < | ||
| + | * El único < | ||
| + | * Entonces estamos diciendo que tenemos una matriz de matrices (lista de listas) llamada < | ||
| + | * Queremos mostrar a cada jugador por turno, por lo que necesitamos datos de ' | ||
| + | < | ||
| + | for (j = 0; j < | ||
| + | |||
| + | }</ | ||
| + | * ¿Recuerdas esto de cuando creaste una lista usando Javascript? Hemos reemplazado ' | ||
| + | * Antes de continuar, verifiquemos que tenemos la información correcta. | ||
| + | * Agregue una línea dentro del bucle for de la siguiente manera. | ||
| + | < | ||
| + | * Esto imprimirá el valor de ' | ||
| + | * Abra su código ' | ||
| + | * Ahora abra sus Herramientas de desarrollador (haga clic en el menú en la parte superior derecha, luego seleccione 'Más herramientas' | ||
| + | * 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 < | ||
| + | * 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. | ||
| + | < | ||
| + | statsRow = crearTextoFila(jugadores[j]);</ | ||
| + | * Mantuvimos el nombre de la variable ' | ||
| + | * < | ||
| + | * 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 (< | ||
| + | * Vamos a mover el bloque de código ' | ||
| + | < | ||
| + | console.log(jugadores[j]); | ||
| + | // crea texto de fila | ||
| + | statsRow = createRowText(jugadores[j]); | ||
| + | |||
| + | // agregar fila a la tabla | ||
| + | tableBody = document.getElementsByTagName(" | ||
| + | newRow = tableBody.insertRow(0); | ||
| + | newRow.innerHTML = statsRow; | ||
| + | }</ | ||
| + | * 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 (< | ||
| + | * Queremos que el número de fila aumente al mismo tiempo que los datos del jugador. | ||
| + | < | ||
| + | * Hay un último cambio que hacer. ' | ||
| + | * Nuestro código final se ve así. | ||
| + | < | ||
| + | // generar datos | ||
| + | jugadores = [ | ||
| + | [' | ||
| + | [' | ||
| + | ['Juan Guillermo', | ||
| + | [' | ||
| + | ]; | ||
| + | |||
| + | tableBody = document.getElementsByTagName(" | ||
| + | |||
| + | // mostrar datos | ||
| + | for (j = 0; 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 = "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "< | ||
| + | statsRow += "</ | ||
| + | return statsRow; | ||
| + | }</ | ||
| + | * 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:// | ||
| + | * [[https:// | ||
| + | * [[https:// | ||
| + | * [[https:// | ||
| + | |||
| + | [[es: | ||
es/web_development/tables/javascript.1647390381.txt.gz · Last modified: 2023/08/16 09:33 (external edit)
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
