JavaScript - advanced - Lección nº 6
Bucles y nuevos elementos de JS
¿De qué trata esta lección?
En esta lección aprendemos sobre tres cosas:
1. Las ventajas de escribir nuestras funciones de JavaScript en un archivo separado: incluso usamos archivos / funciones que no escribimos.
2. Crear bucles, repitiendo instrucciones.
3. Añadir elementos a nuestra página desde el código JavaScript.
Nuevos métodos en esta lección:
createElement(un tagname) – este método del objeto de documento se utiliza para agregar nuevos elementos HTML al documento desde el código JavaScript. Al igual que la función addEventListener, está pensada para ayudarnos a agregar nuevas funciones en función de lo que suceda mientras usamos la página web.
setAttribute(nombre del atributo, valor) – Este es un método de cada elemento objeto. Cada elemento HTML se ve como un objeto del código JavaScript. Podemos establecer el valor de un atributo. Usamos atributos antes, son las propiedades agregadas a las etiquetas en código HTML.
appendChild(un elemento creado) – Este es un método de cada elemento objeto como el método setAttribute. Se utiliza para agregar un elemento dentro de otro. El elemento referido en el parámetro es el que se agrega al método de cuyo método utilizamos.
removechild(una referencia a un elemento) – este método, al igual que appendChild, se puede utilizar con cada elemento objeto. El elemento al que se hace referencia como parámetro se eliminará del interior del elemento al que pertenece el método.
Escribiendo códigos JavaScript en archivos externos:
El uso de archivos externos para almacenar código JavaScript es útil, ya que se puede hacer referencia al archivo desde diferentes archivos HTML . Un archivo HTML también puede usar más archivos JS.
La separación de secuencias de comandos y el código HTML agrega legibilidad a nuestro trabajo.
La forma de referenciar un archivo JS: <script src="nombre del archivo"> </script>
Cómo insertar una comilla en textos de JavaScript:
Si queremos agregar comillas a los textos, es posible que tengamos problemas, ya que las comillas constan de manera predeterminada entre comillas. Podemos variar las marcas simples y dobles, pero es posible que tengamos que usar símbolos para marcar las comillas que necesitamos que aparezcan en el texto. Esto se llama escape character. (lee más sobre el tema aquí: https://en.wikipedia.org/wiki/Escape_character)
Ejemplo de textos con citas:
En el ejemplo anterior, al hacer clic en la sección coloreada aparece un botón. El código HTML para el botón se construye dentro de una función.
A las comillas que se mostrarán, agregamos el símbolo \, las otras comillas indican el principio o el final de las cadenas.
El resultado se puede ver en el navegador y el código se puede inspeccionar para ver el contenido real. (Utiliza el botón derecho). Sólo aparecen las comillas marcadas.
El bucle for:
Si necesitamos repetir algunas instrucciones más veces, podemos usar bucles.
El bucle for se utiliza principalmente, cuando se conoce el número de repeticiones, pero se puede moldear para cada ocasión.
La forma del bucle for que usaremos:
A medida que ingresamos al bucle, la variable de índice (index variable - no debe ser i) obtiene un valor inicial (no debe ser 1). Luego repite las declaraciones y verifica después de cada repetición si la condición es verdadera para continuar y cambia el valor del índice (index value - con uno en el formulario anterior, pero que se puede cambiar). Si la condición se vuelve falsa, el bucle se detiene.
Ejemplo de uso del bucle for:
En el ejemplo anterior encuentras dos bucles para ver cómo funciona. La configuración de CSS no está visible en esta imagen, por lo que nos concentramos en el código JavaScript.
El primer bucle se repite 10 veces, agregando el valor de la variable i al contenido de la primera sección de la página web. Los valores de la variable i están en orden: 1 2 3 4 5 6 7 8 9 10.
El contenido del segmento se borra, porque puede haber más clics en un segmento y se llenará.
El segundo bucle es similar al primero, pero nos muestra que podemos completar el código HTML desde JavaScript: agregamos diez botones de la función e incluso definimos un cuadro de alerta que se muestra cuando se hace clic en estos botones.
Puede ver el contenido después de evaluar el código JavaScript al inspeccionar la página.
El bucle while:
Es otra forma de repetir instrucciones es el bucle while.
Comparado con el bucle for, el while solo necesita una condición para decidir hasta cuándo repetir las instrucciones entre corchetes.
La forma del bucle while:
Si la condición es verdadera, repetimos y si encontramos que es falsa, detenemos el ciclo.
Ejemplo del bucle while:
En el ejemplo anterior, el primer bucle while tiene el mismo efecto que nuestro primer bucle for. Necesitamos agregar el valor inicial para la variable i y la instrucción para aumentarla por separado. El valor inicial se define fuera del bucle, el aumento se repite.
El segundo bucle, agrega 10 números aleatorios a la segunda sección. Por cada clic en el rectángulo verde produce 10 nuevos valores entre 1 y 101.
Ejemplo de agregar / eliminar nuevas secciones del código JS:
En el ejemplo anterior, puedes ver cómo agregar / eliminar nuevos elementos en un documento de manera adecuada. En uno de los ejemplos anteriores, los acabamos de "escribir" (algunos botones) dentro de un elemento existente. La adición de elementos al innerHTML como textos funciona, pero puede deshabilitar a los eventos sonoros que ya funcionan, es complicado eliminar uno de los elementos con elegancia o agregar uno nuevo que no moleste a los que ya están.
Usamos la función randcolor de la lección 24.
La función newdiv se llama cuando se hace clic en el primer botón. Crea un nuevo elemento div referido posteriormente por la variable d. Agregamos un valor a la propiedad id para que la función deldiv pueda encontrar la div más adelante. La identificación es única porque usamos un número que siempre aumenta cuando se requiere un nuevo elemento.
Con el método appenChild agregamos el div al documento, y luego agregamos un color aleatorio como color de fondo para ver mejor qué sección es la que se agregó o eliminó recientemente.
La función deldiv elimina la última sección del documento. Podríamos eliminar cualquiera de ellos, pero es un poco complicado para un primer ejemplo. El método removeChild se usa para hacer desaparecer el último div.
En esta lección aprendemos sobre tres cosas:
1. Las ventajas de escribir nuestras funciones de JavaScript en un archivo separado: incluso usamos archivos / funciones que no escribimos.
2. Crear bucles, repitiendo instrucciones.
3. Añadir elementos a nuestra página desde el código JavaScript.
Nuevos métodos en esta lección:
createElement(un tagname) – este método del objeto de documento se utiliza para agregar nuevos elementos HTML al documento desde el código JavaScript. Al igual que la función addEventListener, está pensada para ayudarnos a agregar nuevas funciones en función de lo que suceda mientras usamos la página web.
setAttribute(nombre del atributo, valor) – Este es un método de cada elemento objeto. Cada elemento HTML se ve como un objeto del código JavaScript. Podemos establecer el valor de un atributo. Usamos atributos antes, son las propiedades agregadas a las etiquetas en código HTML.
appendChild(un elemento creado) – Este es un método de cada elemento objeto como el método setAttribute. Se utiliza para agregar un elemento dentro de otro. El elemento referido en el parámetro es el que se agrega al método de cuyo método utilizamos.
removechild(una referencia a un elemento) – este método, al igual que appendChild, se puede utilizar con cada elemento objeto. El elemento al que se hace referencia como parámetro se eliminará del interior del elemento al que pertenece el método.
Escribiendo códigos JavaScript en archivos externos:
El uso de archivos externos para almacenar código JavaScript es útil, ya que se puede hacer referencia al archivo desde diferentes archivos HTML . Un archivo HTML también puede usar más archivos JS.
La separación de secuencias de comandos y el código HTML agrega legibilidad a nuestro trabajo.
La forma de referenciar un archivo JS: <script src="nombre del archivo"> </script>
Cómo insertar una comilla en textos de JavaScript:
Si queremos agregar comillas a los textos, es posible que tengamos problemas, ya que las comillas constan de manera predeterminada entre comillas. Podemos variar las marcas simples y dobles, pero es posible que tengamos que usar símbolos para marcar las comillas que necesitamos que aparezcan en el texto. Esto se llama escape character. (lee más sobre el tema aquí: https://en.wikipedia.org/wiki/Escape_character)
Ejemplo de textos con citas:
En el ejemplo anterior, al hacer clic en la sección coloreada aparece un botón. El código HTML para el botón se construye dentro de una función.
A las comillas que se mostrarán, agregamos el símbolo \, las otras comillas indican el principio o el final de las cadenas.
El resultado se puede ver en el navegador y el código se puede inspeccionar para ver el contenido real. (Utiliza el botón derecho). Sólo aparecen las comillas marcadas.
El bucle for:
Si necesitamos repetir algunas instrucciones más veces, podemos usar bucles.
El bucle for se utiliza principalmente, cuando se conoce el número de repeticiones, pero se puede moldear para cada ocasión.
La forma del bucle for que usaremos:
for (i=1; i<=nr; i++) {
statements;
}
A medida que ingresamos al bucle, la variable de índice (index variable - no debe ser i) obtiene un valor inicial (no debe ser 1). Luego repite las declaraciones y verifica después de cada repetición si la condición es verdadera para continuar y cambia el valor del índice (index value - con uno en el formulario anterior, pero que se puede cambiar). Si la condición se vuelve falsa, el bucle se detiene.
Ejemplo de uso del bucle for:
En el ejemplo anterior encuentras dos bucles para ver cómo funciona. La configuración de CSS no está visible en esta imagen, por lo que nos concentramos en el código JavaScript.
El primer bucle se repite 10 veces, agregando el valor de la variable i al contenido de la primera sección de la página web. Los valores de la variable i están en orden: 1 2 3 4 5 6 7 8 9 10.
El contenido del segmento se borra, porque puede haber más clics en un segmento y se llenará.
El segundo bucle es similar al primero, pero nos muestra que podemos completar el código HTML desde JavaScript: agregamos diez botones de la función e incluso definimos un cuadro de alerta que se muestra cuando se hace clic en estos botones.
Puede ver el contenido después de evaluar el código JavaScript al inspeccionar la página.
El bucle while:
Es otra forma de repetir instrucciones es el bucle while.
Comparado con el bucle for, el while solo necesita una condición para decidir hasta cuándo repetir las instrucciones entre corchetes.
La forma del bucle while:
while (condition) {
instructions;
}
Si la condición es verdadera, repetimos y si encontramos que es falsa, detenemos el ciclo.
Ejemplo del bucle while:
En el ejemplo anterior, el primer bucle while tiene el mismo efecto que nuestro primer bucle for. Necesitamos agregar el valor inicial para la variable i y la instrucción para aumentarla por separado. El valor inicial se define fuera del bucle, el aumento se repite.
El segundo bucle, agrega 10 números aleatorios a la segunda sección. Por cada clic en el rectángulo verde produce 10 nuevos valores entre 1 y 101.
Ejemplo de agregar / eliminar nuevas secciones del código JS:
En el ejemplo anterior, puedes ver cómo agregar / eliminar nuevos elementos en un documento de manera adecuada. En uno de los ejemplos anteriores, los acabamos de "escribir" (algunos botones) dentro de un elemento existente. La adición de elementos al innerHTML como textos funciona, pero puede deshabilitar a los eventos sonoros que ya funcionan, es complicado eliminar uno de los elementos con elegancia o agregar uno nuevo que no moleste a los que ya están.
Usamos la función randcolor de la lección 24.
La función newdiv se llama cuando se hace clic en el primer botón. Crea un nuevo elemento div referido posteriormente por la variable d. Agregamos un valor a la propiedad id para que la función deldiv pueda encontrar la div más adelante. La identificación es única porque usamos un número que siempre aumenta cuando se requiere un nuevo elemento.
Con el método appenChild agregamos el div al documento, y luego agregamos un color aleatorio como color de fondo para ver mejor qué sección es la que se agregó o eliminó recientemente.
La función deldiv elimina la última sección del documento. Podríamos eliminar cualquiera de ellos, pero es un poco complicado para un primer ejemplo. El método removeChild se usa para hacer desaparecer el último div.
Ejercicios
1. Modifica el archivo index.html copiando el código JavaScript en un archivo separado:
Crea un nuevo archivo con el nombre code.js en la carpeta de la página web.
Copia cada función a este archivo.
Incluye una referencia al archivo en la parte del encabezado.
Ver el resultado
Crea un nuevo archivo con el nombre code.js en la carpeta de la página web.
Copia cada función a este archivo.
Incluye una referencia al archivo en la parte del encabezado.
2. Modifica el archivo gallery.html agregando una nueva galería usando los archivos JS y CSS de la carpeta lightbox realizando los siguientes pasos:
Ver el resultado
Agrea una nueva sección (ul) con el id llamado gallery3 y la clase llamada pure-js-lightbox-container.
En esta sección, debes insertar elementos de lista desordenados, que deben contener etiquetas de anclaje, vinculando la imagen en la carpeta de la galería. Además, estos deben tener etiquetas img dentro de ellas, que se vinculan a la misma imagen que la etiqueta de anclaje. Debe realizar la creación de estos elementos de lista desordenados con el bucle for.
En la sección de encabezado, agregue una referencia al archivo de estilo pure-js-lightbox.min.css de la carpeta lightbox, y una referencia al archivo JS, aún de la carpeta lightbox.
Después del bucle for, cree un nuevo objeto ligthbox: var lightbox = new pureJSLightBox ();
También debe diseñar las imágenes de la galería de la siguiente manera: 4 imágenes en una fila con un espacio entre ellas, como la primera galería de arriba. Además, en 700 píxeles y por debajo del ancho de la pantalla, configure las imágenes como 2 en una fila.
3. Modifica la primera galería del archivo gallery.html generando las imágenes grandes y pequeñas con el bucle for y logrando el mismo resultado.
Ver el resultado
4. Modifica el archivo forms.html agregando una nueva parte para hacer algunas preguntas multiplicadoras, usando la posibilidad de agregar elementos al formulario desde el código JS. El número de preguntas debe determinarse primero y luego mostrarse presionando un botón. Realiza los siguientes cambios:
Ver el resultado
Crea una cuarta parte en esta página: usa la etiqueta <fieldset> con el id section4 para delimitar la sección que aparece esta parte, y la leyenda debe ser Multiplication.
Agrega un elemento de tipo de rango para determinar cuántas preguntas deben hacerse. El número debe estar entre 1 y 5. Después de esto, agrega un div con un id, y cuando la entrada de rango cambie, debe modificar el texto dentro de esa div para mostrar el valor actual de la entrada de rango, como en el siguiente ejemplo: Número de preguntas: 1. El número es el Valor actual del rango.
Agrega un botón, haciendo clic en el que aparecerán las preguntas. Agrega una función para reaccionar al evento de clic, dale el nombre create.
Añade un formulario con el id form4. Agrega un botón de envío y nombre la función de resultados para evaluar las respuestas si se envía el formulario. Los elementos serán agregados a este formulario.
La función de creación debe crear el número de cuadros de texto que muestra el elemento de rango. Cada elemento debe mostrar dos dígitos aleatorios con un símbolo * como marcador de posición. Cada cuadro de texto debe ser rellenado y agregado al formulario.
Regresamos a la evaluación en el siguiente capítulo usando matrices (arrays).
Cuestionario
1. Elige la declaración correcta relacionada con los archivos js
2. ¿Cuál es el resultado del siguiente código?
this.innerHTML = "<p onclick=\'fct()\’ > abc\’"+"</p>";
this.innerHTML = "<p onclick=\'fct()\’ > abc\’"+"</p>";
3. ¿Cuántas veces repite el siguiente bucle las instrucciones?
for (i=2;i<10;i++) { … }
for (i=2;i<10;i++) { … }
4. ¿Cuál es el problema en el siguiente bucle?
i=10;
while (i>5) {
this.innerHTML+=i+" ";
}
5. Después de crear un elemento de imagen con el código siguiente, ¿cómo le agregamos un ancho de 200 px?
var pic=document.createElement("img");
var pic=document.createElement("img");
6. ¿Cuál de los siguientes códigos es equivalente al siguiente?
function fill(x){
x.innerHTML="<p id='p1'></p>";
document.getElementById("p1").innerHTML="Apple";
}
Información suplementaria
Puedes leer más sobre esta lección y hacer ejercicios visitando los siguientes enlaces:
https://www.w3schools.com/js/js_loop_while.asp;
https://www.w3schools.com/js/js_loop_for.asp;
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_create;
https://www.cssscript.com/easy-gallery-lightbox-pure-javascript-purejslightbox/;
https://www.w3schools.com/jsref/met_document_createelement.asp.
https://www.w3schools.com/js/js_loop_while.asp;
https://www.w3schools.com/js/js_loop_for.asp;
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_create;
https://www.cssscript.com/easy-gallery-lightbox-pure-javascript-purejslightbox/;
https://www.w3schools.com/jsref/met_document_createelement.asp.
