¿Cómo iniciar la lógica de una aplicación en JavaScript?
Al crear una aplicación web, es fundamental establecer una base sólida con JavaScript. Vamos a explorar cómo estructurar la lógica detrás de una aplicación manipulando el DOM y utilizando estructuras iterativas para personalizar elementos según las necesidades del proyecto.
Comenzamos por definir una función principal, main. Esta función se encargará de organizar la lógica esencial de la aplicación.
constmain=()=>{// Aquí irá la lógica completa};
¿Cómo manipular el DOM de forma eficiente?
La manipulación del DOM es clave para actualizar dinámicamente los elementos en una página web. Aquí veremos cómo crear nodos de texto y modificar los elementos del DOM usando JavaScript.
Creación de nodos de texto
Para reemplazar textos estáticos en HTML, usamos document.createTextNode. Veamos un ejemplo:
let name =document.createTextNode(data?.name ||'Valor por defecto');
El uso de data?.name asegura que no se generen errores si la propiedad name no está definida, gracias al optional chaining.
Iteración y modificación de enlaces
Cuando tenemos que manejar múltiples enlaces, podemos hacer uso del método map para iterar sobre ellos y generar una lista personalizada:
let links = data?.links.map(link=>{return` <a href="${link.url}" style="color: ${link.color}">
${link.name}${link.emoji} </a>`;}).join('');
Este fragmento genera un string HTML con cada enlace mostrando propiedades específicas como la URL, color, nombre, y emoji.
¿Cómo estructurar la incorporación de nuevos elementos en el DOM?
Agregar nuevos elementos requiere una combinación estratégica de creación de elementos y modificación de sus propiedades internas.
Uso de createElement y appendChild
Primero, creamos un nuevo elemento HTML, como una sección, para contener los enlaces generados:
let newItem =document.createElement('section');newItem.innerHTML= links;// Insertamos los links creadosdocument.body.appendChild(newItem);// Finalmente, añadimos al documento
Al ejecutar todo este proceso a través de la función main, centralizamos la aplicación de estos cambios en la estructura del documento.
¿Qué otras personalizaciones podemos añadir?
Aunque hemos cubierto la edición básica de nombres y enlaces, las opciones para personalizar una aplicación web son vastas. Puedes:
Modificar estilos CSS in-line o usar clases de frameworks como Tailwind.
Cambiar estructuras de HTML dentro de los templates.
Insertar script adicionales para mejorar la UX.
Al final de este ejercicio, simplemente ejecutamos la función main para que todo el proceso se lleve a cabo automáticamente:
main();
Esta estructura inicial te proporciona un potente punto de partida para automatizar y personalizar tu proyecto web. Sigue explorando y ajustando según tus necesidades para lograr resultados óptimos. ¡Sigue adelante y continúa aprendiendo!
Para los que preguntan por que agrega el símbolo $ antes de la variable.
El símbolo $ se suele utilizar como una convención para indicar que una variable tiene un propósito especial o contiene un elemento del DOM. Esto ayuda a que el código sea más legible y entendible, especialmente en proyectos más grandes. No cambia el funcionamiento del código, simplemente es una práctica común.
alt +96=``
Estructura de la Lógica Principal
La función main actúa como el motor que orquesta la manipulación del DOM, reemplazando el contenido estático del HTML por datos dinámicos.
Pasos Clave de Implementación
Limpieza del DOM: Se eliminan los nodos de texto estáticos en el HTML para preparar el terreno para la inserción dinámica.
Creación de Nodos: Se utiliza document.createTextNode para inyectar datos de forma segura.
Iteración y Templates:
Se emplea .map() sobre el array de datos para generar bloques HTML mediante template strings.
Se utilizan handlebars(${link.propiedad}) para inyectar dinámicamente valores como URLs, colores y emojis.
El método .join('') es fundamental para convertir el array resultante en una cadena de texto limpia sin comas.
Inserción Dinámica:
Se crean nuevos elementos con document.createElement.
Se asigna el contenido mediante innerHTML.
Se utiliza appendChild para montar los nuevos elementos en el árbol del DOM.
Yo lo desarrollé de la siguiente manera:
// HTML//<h2></h2> (Hay un error con el editor de Platzi, me lo cambia cuando lo publico, lo tuve que comentar)<p id="description"></p><ul id="social-links"></ul>// JSconst $name =document.querySelector('h1');const $text =document.getElementById('description');const $social =document.getElementById('social-links');const data ={name:"Harry J. Arena",description:"UI/UX Designer, Front-End.",social:[{name:"LinkedIn",url:"https://linkedin.com/in/",username:"hadevelopux",},{name:"Behance",url:"https://behance.net/",username:"hadevelopux",},{name:"GitHub",url:"https://github.com/",username:"hadevelopux",},{name:"Platzi",url:"https://platzi.com/p/",username:"hadevelopux",},],};consttext=()=>{let name =document.createTextNode(data?.name);let description =document.createTextNode(data?.description); $name.appendChild(name); $text.appendChild(description);}constmain=()=>{let social = data?.social?.map((link)=>{return`<li><a href="${link.url}${link.username}" class="link">${link.name}</a></li>`;}).join('');let newItem =document.createElement("section"); newItem.innerHTML= social; $social.appendChild(newItem);}text();main();
lo ideal sería usar el DocumentFragment(); para una mejor optimización del DOM
En este caso la "optimización" al usar DocumentFragment sería insignificante, ya que solo se hace una inserción en el DOM (y DocumentFragment es ideal para múltiples inserciones). Un poco de información para evitar la desinformación: Does using a document fragment really improve performance?
