Tech School

User Tools

Site Tools

Trace: • javascript
es:web_development:lists:javascript

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
es:web_development:lists:javascript [2022/03/15 09:43]
mag [Iterando arreglos] 		es:web_development:lists:javascript [2023/08/16 09:33] (current)
Line 134: Line 134:
   listaJugadores = "";   listaJugadores = "";
   for (i = 0; i < 4; i++) {   for (i = 0; i < 4; i++) {
-    playerList += "<li>" + jugadores[i] + "</li>";+    listaJugadores += "<li>" + jugadores[i] + "</li>";
   }   }
   document.getElementsByTagName('ol')[2].innerHTML = listaJugadores;   document.getElementsByTagName('ol')[2].innerHTML = listaJugadores;
Line 141: Line 141:
   * 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, Javascript puede contar los elementos numéricos en una matriz para usted usando <html>.length</html>.+  * Afortunadamente, Javascript puede contar los elementos numéricos en una matriz para usted usando <html>.length</html> que significa lo 'largo' de la lista.
   * 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.
-<code>alert("cars has " + cars.length + "items.");</code>+<code>alert("La lista coches tiene " + coches.length + " elementos.");</code>
   * 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.
-<code>for(i = 0; i < players.length; i++) {</code>+<code>for(i = 0; i < jugadores.length; i++) {</code>
   * 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 154: 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 'sentencia if'.   * La más simple de ellas es la 'sentencia if'.
-  * Volvamos a jsfiddle para ver cómo funciona. Elimina todo el Javascript que tengas ahí en este momento.+  * Volvamos a jsfiddle para ver cómo funciona. Comentar (<html>//</html>) todo el Javascript que tengas ahí en este momento.
   * Ingrese el siguiente código en el panel de Javascript.   * Ingrese el siguiente código en el panel de Javascript.
 <code>var x = 2; <code>var x = 2;
 if (x == 2) { if (x == 2) {
- alert 'the condition is true';+ alert ('la condición es verdadera');
 }</code> }</code>
-  * La estructura básica de este código es <html>if (condition) { code to execute if true }</html>.+  * La estructura básica de este código es <html>if (condición) { codigo para ejecutar si es verdadero }</html>.
   * Tenemos una condición dentro de <html>()</html>, y solo si ese código es verdadero ejecutamos el código dentro de <html>{}</html>.   * Tenemos una condición dentro de <html>()</html>, y solo si ese código es verdadero ejecutamos el código dentro de <html>{}</html>.
   * En este caso, nuestra condición es <html>x == 2</html>, que comprueba el valor de <html>x</html> y el valor de <html>2</html>. Si el valor de <html>x</html> es 2, ejecutará el código mostrando una alerta.   * En este caso, nuestra condición es <html>x == 2</html>, que comprueba el valor de <html>x</html> y el valor de <html>2</html>. Si el valor de <html>x</html> es 2, ejecutará el código mostrando una alerta.
Line 168: Line 168:
 <code>var x = 2; <code>var x = 2;
 if (x == 2) { if (x == 2) {
- alert 'the condition is true';+ alert ('la condición es verdadera');
 } else { } else {
- alert 'the condition is false';+ alert ('la condición es falso');
 }</code> }</code>
   * 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 176: Line 176:
   * Si el usuario marca una casilla de verificación, pondremos gris el texto asociado. Si lo desmarcan, haremos que el texto vuelva a ser negro.   * Si el usuario marca una casilla de verificación, pondremos gris el texto asociado. Si lo desmarcan, haremos que el texto vuelva a ser negro.
   * 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.
-<code>        <li><input type="checkbox" name="flour" onchange="toggleCheckbox('flour')">100g flour</li> +<code>        <li><input type="checkbox" name="harina" onchange="cambiarColor('harina')">100g harina</li> 
-        <li><input type="checkbox" name="eggs" onchange="toggleCheckbox('eggs')">2 eggs</li> +        <li><input type="checkbox" name="huevos" onchange="cambiarColor('huevos')">2 huevos</li> 
-        <li><input type="checkbox" name="milk" onchange="toggleCheckbox('milk')">300ml milk</li></code>+        <li><input type="checkbox" name="leche" onchange="cambiarColor('leche')">300ml leche</li></code>
   * <html>onchange=""</html> se activará cada vez que haya un cambio en el elemento; en este caso, cuando la casilla de verificación esté marcada o desmarcada. Cuando se active, ejecutará el código Javascript entre <html>""</html>.   * <html>onchange=""</html> se activará cada vez que haya un cambio en el elemento; en este caso, cuando la casilla de verificación esté marcada o desmarcada. Cuando se active, ejecutará el código Javascript entre <html>""</html>.
   * Llamaremos a nuestra función de Javascript 'toggleCheckbox' y le pasaremos a la función el nombre del elemento de la casilla de verificación para que la función sepa qué línea actualizar.   * Llamaremos a nuestra función de Javascript 'toggleCheckbox' y le pasaremos a la función el nombre del elemento de la casilla de verificación para que la función sepa qué línea actualizar.
   * Ahora, guarde 'lists.html' y abra 'lists.js'.   * Ahora, guarde 'lists.html' y abra 'lists.js'.
   * Agregue nuestra función debajo del código existente.   * Agregue nuestra función debajo del código existente.
-<code>function toggleCheckbox(item) {+<code>function cambiarColor(item) {
 }</code> }</code>
   * Primero, definimos el código como una 'función' usando <html>function</html> lo que significa que solo se ejecutará cuando se le llame específicamente. En este caso, lo llamaremos haciendo clic en la casilla de verificación, pero también podría llamarse desde otro código.   * Primero, definimos el código como una 'función' usando <html>function</html> lo que significa que solo se ejecutará cuando se le llame específicamente. En este caso, lo llamaremos haciendo clic en la casilla de verificación, pero también podría llamarse desde otro código.
Line 200: Line 200:
   * El texto no forma parte de nuestra casilla de verificación, por lo que debemos encontrar el elemento al que pertenece, que en este caso es el elemento principal (nuestro elemento <html><input></html> está directamente dentro de nuestro elemento <html><li></html>), por lo que usamos <html>.parentElement</html>   * El texto no forma parte de nuestra casilla de verificación, por lo que debemos encontrar el elemento al que pertenece, que en este caso es el elemento principal (nuestro elemento <html><input></html> está directamente dentro de nuestro elemento <html><li></html>), por lo que usamos <html>.parentElement</html>
   * El código completo es entonces el siguiente.   * El código completo es entonces el siguiente.
-<code>function toggleCheckbox (item) {+<code>function cambiarColor (item) {
     cb = document.getElementsByName(item)[0];     cb = document.getElementsByName(item)[0];
     if (cb.checked) {     if (cb.checked) {
Line 211: Line 211:
  
 ==== Final Code ==== ==== Final Code ====
-  * [[https://jsfiddle.net/maganthro/t3bq247f/13/|jsfiddle]]+  * [[https://jsfiddle.net/maganthro/t3bq247f/15/|jsfiddle]]
   * [[https://techschool.murraygunn.id.au/webdev/classes/lists/4/es.php|lists.html]]   * [[https://techschool.murraygunn.id.au/webdev/classes/lists/4/es.php|lists.html]]
   * [[https://techschool.murraygunn.id.au/webdev/classes/lists/4/listsjs.php|lists.js]]   * [[https://techschool.murraygunn.id.au/webdev/classes/lists/4/listsjs.php|lists.js]]
es/web_development/lists/javascript.1647362636.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
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki