es:web_development:lists:javascript
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
es:web_development:lists:javascript [2022/03/15 09:37] mag [Iterando arreglos] |
es:web_development:lists:javascript [2023/08/16 09:33] (current) |
||
|---|---|---|---|
| Line 104: | Line 104: | ||
| ==== Iterando arreglos ==== | ==== Iterando arreglos ==== | ||
| * Entonces, ahora que comprende cómo funcionan los bucles for, podemos aplicarlo a una matriz. | * Entonces, ahora que comprende cómo funcionan los bucles for, podemos aplicarlo a una matriz. | ||
| + | * Abre otra vez tu jsfiddle. | ||
| * Editemos el bucle for que ya tienes. | * Editemos el bucle for que ya tienes. | ||
| < | < | ||
| Line 113: | Line 114: | ||
| < | < | ||
| for (i = 0; i < 10; i++) { | for (i = 0; i < 10; i++) { | ||
| - | listaCoche += i + "< | + | listaCoche += coches[i] + "< |
| } | } | ||
| document.body.innerHTML = listaCoche;</ | document.body.innerHTML = listaCoche;</ | ||
| Line 119: | Line 120: | ||
| < | < | ||
| for (i = 0; i < 3; i++) { | for (i = 0; i < 3; i++) { | ||
| - | carList += i + "< | + | carList += coches[i] + "< |
| } | } | ||
| document.body.innerHTML = listaCoche;</ | document.body.innerHTML = listaCoche;</ | ||
| Line 131: | Line 132: | ||
| window.onload = function () { | window.onload = function () { | ||
| - | | + | |
| for (i = 0; i < 4; i++) { | for (i = 0; i < 4; i++) { | ||
| - | | + | |
| } | } | ||
| - | document.getElementsByTagName(' | + | document.getElementsByTagName(' |
| }</ | }</ | ||
| * ¿Tuviste algo similar? | * ¿Tuviste algo similar? | ||
| * Si agregó más jugadores, no usará el número 4. O si lo hizo, no verá la lista completa. | * Si agregó más jugadores, no usará el número 4. O si lo hizo, no verá la lista completa. | ||
| * De hecho, si extrae una lista de una base de datos, lo que haremos más adelante en el curso, es probable que no sepa cuántos elementos hay en la lista. ¿Que haces entonces? | * De hecho, si extrae una lista de una base de datos, lo que haremos más adelante en el curso, es probable que no sepa cuántos elementos hay en la lista. ¿Que haces entonces? | ||
| - | * Afortunadamente, | + | * Afortunadamente, |
| * Veamos cómo funciona esto en jsfiddle. | * Veamos cómo funciona esto en jsfiddle. | ||
| * Agregue una alerta a su código Javascript. | * Agregue una alerta a su código Javascript. | ||
| - | < | + | < |
| * Ejecuta eso y comprueba que hace lo que crees que debería. | * Ejecuta eso y comprueba que hace lo que crees que debería. | ||
| * Entonces podemos cambiar nuestra condición continua para la lista de jugadores de la siguiente manera. | * Entonces podemos cambiar nuestra condición continua para la lista de jugadores de la siguiente manera. | ||
| - | < | + | < |
| * Ejecútelo ahora y vea que muestra exactamente tantos jugadores como tiene en su lista. | * Ejecútelo ahora y vea que muestra exactamente tantos jugadores como tiene en su lista. | ||
| * Felicitaciones por crear una lista usando Javascript. | * Felicitaciones por crear una lista usando Javascript. | ||
| Line 153: | Line 154: | ||
| * A veces, la acción que realice dependerá de algún otro factor: entrada del usuario, acciones anteriores o información de una base de datos, por ejemplo. | * A veces, la acción que realice dependerá de algún otro factor: entrada del usuario, acciones anteriores o información de una base de datos, por ejemplo. | ||
| * La más simple de ellas es la ' | * La más simple de ellas es la ' | ||
| - | * Volvamos a jsfiddle para ver cómo funciona. | + | * Volvamos a jsfiddle para ver cómo funciona. |
| * Ingrese el siguiente código en el panel de Javascript. | * Ingrese el siguiente código en el panel de Javascript. | ||
| < | < | ||
| if (x == 2) { | if (x == 2) { | ||
| - | alert 'the condition is true'; | + | alert |
| }</ | }</ | ||
| - | * La estructura básica de este código es < | + | * La estructura básica de este código es < |
| * Tenemos una condición dentro de < | * Tenemos una condición dentro de < | ||
| * En este caso, nuestra condición es < | * En este caso, nuestra condición es < | ||
| Line 167: | Line 168: | ||
| < | < | ||
| if (x == 2) { | if (x == 2) { | ||
| - | alert 'the condition is true'; | + | alert |
| } else { | } else { | ||
| - | alert 'the condition is false'; | + | alert |
| }</ | }</ | ||
| * Aquí, hemos agregado un elsecódigo que se ejecutará si no se cumple la condición. Vuelva a ejecutar el código con el valor incorrecto de x y vea la nueva declaración. | * Aquí, hemos agregado un elsecódigo que se ejecutará si no se cumple la condición. Vuelva a ejecutar el código con el valor incorrecto de x y vea la nueva declaración. | ||
| Line 175: | Line 176: | ||
| * Si el usuario marca una casilla de verificación, | * Si el usuario marca una casilla de verificación, | ||
| * Agregue un atributo a cada uno de los elementos de la lista para llamar a una función de Javascript. | * Agregue un atributo a cada uno de los elementos de la lista para llamar a una función de Javascript. | ||
| - | < | + | < |
| - | < | + | < |
| - | < | + | < |
| * < | * < | ||
| * Llamaremos a nuestra función de Javascript ' | * Llamaremos a nuestra función de Javascript ' | ||
| * Ahora, guarde ' | * Ahora, guarde ' | ||
| * Agregue nuestra función debajo del código existente. | * Agregue nuestra función debajo del código existente. | ||
| - | < | + | < |
| }</ | }</ | ||
| * Primero, definimos el código como una ' | * Primero, definimos el código como una ' | ||
| Line 199: | Line 200: | ||
| * El texto no forma parte de nuestra casilla de verificación, | * El texto no forma parte de nuestra casilla de verificación, | ||
| * El código completo es entonces el siguiente. | * El código completo es entonces el siguiente. | ||
| - | < | + | < |
| cb = document.getElementsByName(item)[0]; | cb = document.getElementsByName(item)[0]; | ||
| if (cb.checked) { | if (cb.checked) { | ||
| Line 210: | Line 211: | ||
| ==== Final Code ==== | ==== Final Code ==== | ||
| - | * [[https:// | + | * [[https:// |
| * [[https:// | * [[https:// | ||
| * [[https:// | * [[https:// | ||
es/web_development/lists/javascript.1647362272.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
