| Both sides previous revision
Previous revision
Next revision
|
Previous revision
|
es:web_development:lists:javascript [2022/03/15 10:01]
mag [Declaraciones Condicionales] |
es:web_development:lists:javascript [2023/08/16 09:33] (current)
|
| <code>var x = 2; | <code>var x = 2; |
| if (x == 2) { | if (x == 2) { |
| alert 'la condición es verdadera'; | 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. |
| <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. |
| * 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. |
| * 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) { |
| |
| ==== 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]] |
