Tech School

User Tools

Site Tools

Trace:
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/13 13:35]
mag [Declaraciones Condicionales] 		es:web_development:lists:javascript [2023/08/16 09:33] (current)
Line 5: Line 5:
  
 ==== Configuración ==== ==== Configuración ====
-  * Usaremos el primer archivo que creó en esta lección llamado 'lists.html', así que abra ese archivo en Visual Studio Code.+  * Usaremos el primer archivo que creó en esta lección llamado '[[https://techschool.murraygunn.id.au/webdev/classes/lists/3/es.php|lists.html]]', así que abra ese archivo en Visual Studio Code.
   * Cree un archivo llamado 'lists.js' en el mismo directorio.   * Cree un archivo llamado 'lists.js' en el mismo directorio.
   * También volveremos a [[https://jsfiddle.net/|jsfiddle]] para probar algunas cosas.   * También volveremos a [[https://jsfiddle.net/|jsfiddle]] para probar algunas cosas.
   * Comenzaremos con una pizarra en blanco para esto, así que si tiene algo en los paneles HTML , CSS o Javascript de jsfiddle, elimínelo.   * Comenzaremos con una pizarra en blanco para esto, así que si tiene algo en los paneles HTML , CSS o Javascript de jsfiddle, elimínelo.
  
-==== Guiones Externos ====+==== JavaScript Externo ====
   * Comenzaremos en Visual Studio Code.   * Comenzaremos en Visual Studio Code.
   * Así como creamos una entrada en <html><head></html> para vincular a la hoja de estilo externa, debemos decirle al navegador dónde encontrar nuestro código javascript.   * Así como creamos una entrada en <html><head></html> para vincular a la hoja de estilo externa, debemos decirle al navegador dónde encontrar nuestro código javascript.
Line 25: Line 25:
            'Gustavo Leonardo Cuéllar Gallego',            'Gustavo Leonardo Cuéllar Gallego',
            'Duván Esteban Zapata Banguera'];</code>            'Duván Esteban Zapata Banguera'];</code>
-  * A estas alturas ya debería estar familiarizado con la forma de la declaración. <html>jugadores</html> es el nombre de una variable y ahora contiene todo después del <html>=</html> signo. +  * A estas alturas ya debería estar familiarizado con la forma de la declaración. <html>jugadores</html> es el nombre de una variable y ahora contiene todo después del signo igual <html>=</html>. 
-  * <html>[]</html> identifica una matriz, en este caso contiene una lista de jugadores. +  * los signos corchetes<html>[]</html> identifican una matriz, en este caso contiene una lista de jugadores. 
-  * Cada uno de los nombres de los jugadores es texto, por lo que los rodeamos con <html>'</html> signos.+  * Cada uno de los nombres de los jugadores es texto, por lo que los rodeamos con los signos comillas simples <html>'</html> .
   * He incluido nombres de 4 futbolistas colombianos, pero hay muchos más. Siéntase libre de agregar cualquier otro que conozca usando el mismo formato.   * He incluido nombres de 4 futbolistas colombianos, pero hay muchos más. Siéntase libre de agregar cualquier otro que conozca usando el mismo formato.
-  * He escrito cada uno de los nombres en una línea separada para que quede claro. Esta es una buena práctica, pero no es esencial: puede encadenarlos todos en la misma línea siempre que separe los elementos con un <html>,</html>.+  * He escrito cada uno de los nombres en una línea separada para que quede claro. Esta es una buena práctica, pero no es esencial: puede encadenarlos todos en la misma línea siempre que separe los elementos con una coma <html>,</html>.
  
 ==== Elementos de Matriz de Referencia ==== ==== Elementos de Matriz de Referencia ====
Line 57: Line 57:
   * A continuación, debemos mostrar la cadena que hemos creado.   * A continuación, debemos mostrar la cadena que hemos creado.
 <code>document.getElementsByTagName('ol')[2].innerHTML = listaJugadores;</code> <code>document.getElementsByTagName('ol')[2].innerHTML = listaJugadores;</code>
-  * Esto busca la tercera etiqueta e inserta la cadena de lista allí. <ol>+  * Esto busca la tercera etiqueta <html><ol></html> e inserta la cadena de lista allí.
   * Si ejecuta el código ahora, probablemente no funcionará porque el código Javascript se ejecuta antes de que el código HTML haya terminado de cargarse (es decir, la tercera etiqueta <html><ol></html> no existe cuando se ejecuta el código). Para evitar esto, debemos envolver el comando de visualización dentro de una función que solo se ejecuta cuando la página está completamente cargada.   * Si ejecuta el código ahora, probablemente no funcionará porque el código Javascript se ejecuta antes de que el código HTML haya terminado de cargarse (es decir, la tercera etiqueta <html><ol></html> no existe cuando se ejecuta el código). Para evitar esto, debemos envolver el comando de visualización dentro de una función que solo se ejecuta cuando la página está completamente cargada.
 <code>window.onload = function() { <code>window.onload = function() {
-  document.getElementsByTagName('ol')[2].innerHTML = playerList;+  document.getElementsByTagName('ol')[2].innerHTML = listaJugadores;
 }</code> }</code>
   * <html>window</html>, como <html>document</html> identifica toda la página.   * <html>window</html>, como <html>document</html> identifica toda la página.
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.
 <code>var text = ""; <code>var text = "";
Line 111: Line 112:
 document.body.innerHTML = text;</code> document.body.innerHTML = text;</code>
   * Para diferenciar las dos listas, cambiemos el nombre de la nueva lista a carList.    * Para diferenciar las dos listas, cambiemos el nombre de la nueva lista a carList. 
-<code>var carList = "";+<code>var listaCoche = "";
 for (i = 0; i < 10; i++) { for (i = 0; i < 10; i++) {
- carList += i + "<br />";+ listaCoche += coches[i] + "<br />";
 } }
-document.body.innerHTML = carList;</code>+document.body.innerHTML = listaCoche;</code>
   * En el ciclo for, la condición de inicio <html>i = 0</html> y la instrucción de iteración <html>i++</html> siguen siendo válidas, pero debemos ajustar la condición de continuación para que se detenga en 3 elementos.    * En el ciclo for, la condición de inicio <html>i = 0</html> y la instrucción de iteración <html>i++</html> siguen siendo válidas, pero debemos ajustar la condición de continuación para que se detenga en 3 elementos. 
-<code>var carList = "";+<code>var listaCoche = "";
 for (i = 0; i < 3; i++) { for (i = 0; i < 3; i++) {
-  carList += i + "<br />";+  carList += coches[i] + "<br />";
 } }
-document.body.innerHTML = carList;</code>+document.body.innerHTML = listaCoche;</code>
   * Si ejecuta el suyo ahora, debería mostrar los 3 autos, uno en cada línea.   * Si ejecuta el suyo ahora, debería mostrar los 3 autos, uno en cada línea.
   * Ahora intente aplicar esto usted mismo a la lista de jugadores en Visual Studio Code.   * Ahora intente aplicar esto usted mismo a la lista de jugadores en Visual Studio Code.
Line 131: Line 132:
  
 window.onload = function () { window.onload = function () {
-  playerList = "";+  listaJugadores = "";
   for (i = 0; i < 4; i++) {   for (i = 0; i < 4; i++) {
-    playerList += "<li>" + players[i] + "</li>";+    listaJugadores += "<li>" + jugadores[i] + "</li>";
   }   }
-  document.getElementsByTagName('ol')[2].innerHTML = playerList;+  document.getElementsByTagName('ol')[2].innerHTML = listaJugadores;
 }</code> }</code>
   * ¿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, 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 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 '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 167: 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 175: 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 199: 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 210: 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.1647203738.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