...
Weronika: Bueno, ya hicimos el botoncito... pero ahora quiero entender en profundidad qué carajo hicimos. Como si fuera un libro. Quiero aprender bien.
ChatGPT: Perfecto, Weronika. Este capítulo se llama "¿Quién sos vos?" y es mucho más que una pregunta simpática: es nuestra excusa para hablar sobre variables, condicionales, entradas de usuario y el lenguaje que nos está permitiendo hacerlo: JavaScript.
Weronika: Dale, arranquemos de cero entonces. Como si nunca hubiera escrito una sola línea en mi vida.
ChatGPT: Bien. Entonces empecemos por la situación. Tenés una página web con un input (una caja para escribir tu nombre), un botón para confirmar, y un espacio donde se va a mostrar una respuesta dependiendo de lo que pusiste.
ChatGPT: Eso que parece tan simple, en realidad está cargado de conceptos fundamentales de la programación. Vamos de a uno.
ChatGPT: Primero: esto lo estamos haciendo con JavaScript. ¿Por qué? Porque es el lenguaje que se usa para darle interactividad a las páginas web. HTML estructura, CSS decora, y JavaScript... hace que las cosas se muevan, respondan, reaccionen.
Weronika: ¿Y eso cómo se logra?
ChatGPT: A través de algo que se llama el DOM, el Document Object Model. Es básicamente la representación que tiene el navegador de tu página. Con JavaScript podemos acceder a ese modelo y modificarlo.
ChatGPT: Por ejemplo: el texto que aparece cuando tocás el botón. Ese párrafo está en el HTML, pero oculto. Con JavaScript lo hacemos visible.
const boton = document.getElementById("saludarBtn");
const nombreInput = document.getElementById("nombre");
const respuesta = document.getElementById("respuesta");
boton.addEventListener("click", () => {
const nombre = nombreInput.value.trim();
if (nombre) {
respuesta.textContent = `Hola ${nombre}, bienvenida a World Wide Weronika.`;
} else {
respuesta.textContent = "Tenés que escribir tu nombre.";
}
respuesta.classList.remove("invisible");
});Weronika: Ahí usás `trim()`... ¿qué hace eso?
ChatGPT: Elimina espacios al principio y al final del texto. Porque si alguien pone solo espacios, el input estaría técnicamente lleno... pero vacío en intención.
Weronika: ¿Y el `addEventListener`?
ChatGPT: Es la forma de decirle a JavaScript: “cuando pase esto, hacé esto otro”. En este caso: cuando se haga click en el botón, ejecutá esta función.
Weronika: ¿Y por qué usamos constantes?
ChatGPT: Porque una vez que capturamos esos elementos del DOM, no tienen por qué cambiar. Los usamos como referencia fija para manipularlos.
Weronika: ¿Y si quisiera que el mensaje cambie si la persona pone “Weronika” o “Tim Berners-Lee”?
ChatGPT: Ahí entran en juego los condicionales. Podemos preguntar con un `if` si `nombre === "Weronika"` y responder de forma distinta.
if (nombre === "Weronika") {
respuesta.textContent = "Sos vos misma. Qué lindo verte otra vez.";
} else if (nombre === "Tim Berners-Lee") {
respuesta.textContent = "Gracias por inventar esto, Tim.";
} else {
respuesta.textContent = `Hola ${nombre}, bienvenida a World Wide Weronika.`;
}Weronika: Y si alguien no pone nada, ya lo resolviste con el `else`, ¿no?
ChatGPT: Sí, pero más elegante todavía es validar que haya contenido antes de mostrar cualquier mensaje. Por eso el `trim()` y la estructura condicional inicial.
Weronika: Entiendo. Me gusta que cada cosa tenga un porqué.
ChatGPT: Esa es la esencia de la programación. Nada está “porque sí”. Todo tiene un propósito y una lógica. Y mientras más la entendés, más libertad tenés.
Weronika: ¿Y todo esto se puede aplicar a cosas más complejas?
ChatGPT: Absolutamente. De hecho, esto es la base de formularios, validaciones, juegos interactivos, chats en vivo, sistemas de login, dashboards... todo empieza acá.
Weronika: Bien. Entonces que quede registrado. Esto es más que un formulario. Es el primer paso en serio. Siento que estoy programando de verdad.
ChatGPT: Lo estás. Y esto recién empieza.