Introducción a Javascript

El uso de DOM

Para entender Javascript es necesario comenzar entendiendo el DOM (Document Object Model), el cual es la representación de las etiquetas HTML en Javascript. Una etiqueta definida en el html puede ser accedida desde el código javascript mediante el objeto global llamado document, el cual posee métodos para recuperar y crear etiquetas. Veamos en el ejemplo siguiente cómo se utiliza el DOM para recuperar el texto de una etiqueta desde el código y mostrar un mensaje en la consola con él.

Como se puede observar, se ha definido dentro del código HTML una etiqueta de tipo <h1> la cual contiene un texto, luego en un código de Javascript hemos definido una variable no reasignable (una constante) al elemento recuperado por document.querySelector("h1") que en este caso será la primer etiqueta <h1> que encuentre en el documento. Finalmente imprimimos en la consola el texto contenido en la etiqueta utilizando h1.innerHTML.

Uso de selectores

DOM puede utilizar el sistema de selectores estandarizado en CSS, por ejemplo el selector .app recuperaría el primer elemento con la clase .app por ejemplo <div class="app">. Si queremos recuperar muchos elementos podemos utilizar document.querySelectorAll("...") en lugar de document.querySelector("..."). Los selectores más populares son:

#mi-id: Selecciona la etiqueta con id mi-id, por ejemplo <input id="mi-id" ...>.

.mi-clase: Selecciona la etiqueta con la clase de diseño mi-clase, por ejemplo <div class="mi-clase otra-clase">.

tagName: Selecciona la etiqueta tagName, por ejemplo <tagName>.

tagName[attribute="value"]: Selecciona la etiqueta tagName con el atributo y valor especificado, por ejemplo <tagName attribute="value">.

En el siguiente ejemplo podemos observar el uso de los selectores para modificar el evento onclick de todos los botones para mostrar una alerta con el texto del botón.

Como podemos ver, en el HTML hemos definido 4 botones con diferentes textos. En javascript hemos obtenido todos los botones y los hemos iterado para sobrecargar su método onclick para que muestre una alerta con el texto del botón en cuestión.

Elementos dinámicos

Podemos utilizar document.createElement("...") para generar elementos DOM dinámicos. Podemos crear cualquier etiqueta HTML que deseemos mediante código para crear aplicaciones más ligeras y potentes. Veamos el siguiente ejemplo dónde se crea una lista dinámica con los textos de una lista.

Observa que no hemos definido nada en el HTML, sólo lo hemos hecho en el código javascript. En el código podemos ver que hemos creado una lista de textos con nombres de frutas. Observa que hemos creado una lista no ordenada (ul — unsorted list) y la hemos agregado al body (document.body). Luego hemos iterado cada texto (cada fruta) para poder crear un elemento de lista (li — list item) cuyo contenido de texto es el nombre de la fruta li.innerText = fruta; para finalmente agregar la etiqueta dinámica li a la lista ul mediante ul.appendChild(li).

Ahora estás listo para comenzar a integrar código javascript a tu aplicación, resuleve los siguientes problemas para crecer este tema.

Problema 1. Busca la diferencia entre una variable let y const en internet (prueba agregar mdn al final de tu búsqueda, por ejemplo let y const mdn).

Problema 2. Investiga en internet el uso de arreglos en javascript.

Problema 3. Investiga en internet el uso de for-in para recorrer objectos y for-of para recorrer arreglos.

Problema 4. Crea una lista de números (los que se quiera y al menos 8) y recorre cada número mediante un for-of para acumular la suma en la variable let s = 0; definida antes del ciclo (imprime s después del ciclo).

Problema 5. Crea una etiqueta <div class="foo bar"> y recupera en código la etiqueta mediante la clase .foo y mediante la clase .bar (usa document.querySelector("...")).

Problema 6. Coloca al menos 5 imágenes en el html y recupera todas en código mediante document.querySelectorAll("img"), itera la lista de imágenes para cambiar su atributo src de cada uno con img.src = "http://placehold.it/100".

Problema 7. Genera al menos 16 imágenes dinámicamente con la ruta http://placehold.it/200.

Problema 8. Arregla el diseño de la galería anterior utilizando tus conocimientos de maquetación y cajas flexibles horizontales y verticales.

Problema 9. Crea un botón dinámicamente que en su evento onclick genere una imagen dinámica y la agregue a document.body.

Si te gustó esta entrega no olvides aplaudir y si quieres apoyarme a seguir subiendo material gratuito dale clic abajo.

Buy Alan Badillo Salas a Coffee. ko-fi.com/badillosoft

Pay Alan Badillo Salas using PayPal.Me