En muchos casos al construir aplicaciones web con **JavaScript**, es necesario interactuar con el usuario para obtener información y mostrarla de manera estructurada, como en una **tabla**. Al utilizar **prompt** como método para recabar datos del usuario, estamos implementando una forma sencilla pero efectiva de entrada que puede resultar muy útil en **ejercicios de programación**, **prototipos rápidos** o incluso en scripts de uso personal donde una interfaz más compleja no es una prioridad.

### Implementación de tablas dinámicas en JavaScript
La construcción de una tabla dinámica que se va llenando con los datos ingresados a través de **cuadros de diálogo prompt** involucra varias fases:

– Diseñar la estructura HTML para alojar la tabla.
– Establecer una forma de capturar la entrada del usuario.
– Procesar esta entrada y convertirla en una estructura adecuada para añadirla a la tabla.
– Actualizar el DOM con los nuevos datos.

#### Creación de la estructura HTML para la tabla

El primer paso es definir en nuestro HTML donde queremos mostrar la información. Aunque no vamos a usar un `

`, es recomendable seguir manteniendo una jerarquía clara y legible para el resto de los elementos:

Entradas de usuario

Nombre	Edad	Email

Copiar

#### Capturando datos con prompt y guardando en variables

Para recopilar información del usuario se pueden utilizar prompts en secuencia:

javascript
var nombre = prompt(“Ingrese su nombre:”);
var edad = prompt(“Ingrese su edad:”);
var email = prompt(“Ingrese su correo electrónico:”);

Copiar

#### Función para añadir datos a la tabla

El siguiente paso consiste en crear una **función en JavaScript** que tome estos valores y los inserte en el cuerpo de la tabla:

javascript
function agregarDatosATabla(nombre, edad, email) {
var tabla = document.getElementById(‘datosUsuario’).getElementsByTagName(‘tbody’)[0];

var nuevaFila = tabla.insertRow();
var celdaNombre = nuevaFila.insertCell(0);
var celdaEdad = nuevaFila.insertCell(1);
var celdaEmail = nuevaFila.insertCell(2);

celdaNombre.textContent = nombre;
celdaEdad.textContent = edad;
celdaEmail.textContent = email;
}

Copiar

#### Llamada a la función

Con los datos capturados y la función lista, solo necesitamos una llamada a la función `agregarDatosATabla` para completar el proceso.

javascript
agregarDatosATabla(nombre, edad, email);

Copiar

#### Interacción con el usuario y validación de datos

Antes de insertar los datos, podríamos añadir algo de **validación** para asegurarnos de que los datos son del tipo esperado (como asegurarse de que la edad sea un número).

javascript
if(nombre && !isNaN(edad) && email.includes(“@”)) {
agregarDatosATabla(nombre, edad, email);
} else {
alert(“Por favor, ingresa los datos correctamente.”);
}

Copiar

#### Mejoras a la validación de los datos

Para incrementar la robustez de nuestra aplicación, podemos también informar al usuario de qué dato no es válido en lugar de una alerta genérica:

javascript
function validarDatos(nombre, edad, email) {
if(!nombre) {
alert(“Por favor, ingresa un nombre válido.”);
return false;
}
if(isNaN(edad)) {
alert(“La edad debe ser un número.”);
return false;
}
if(!email.includes(“@”)) {
alert(“Ingresa un email válido.”);
return false;
}
return true;
}

if(validarDatos(nombre, edad, email)) {
agregarDatosATabla(nombre, edad, email);
}

Copiar

#### Creación automática de entradas de datos

Podemos automatizar el proceso de solicitud de datos al usuario mediante un bucle que se ejecutaría hasta que el usuario decida no seguir introduciendo información. Esto se puede lograr utilizando confirm junto con un bucle, por ejemplo:

javascript
while(confirm(“¿Desea ingresar más datos?”)) {
nombre = prompt(“Ingrese su nombre:”);
edad = prompt(“Ingrese su edad:”);
email = prompt(“Ingrese su correo electrónico:”);

if(validarDatos(nombre, edad, email)) {
agregarDatosATabla(nombre, edad, email);
}
}

Copiar

#### Usabilidad y accesibilidad

Adicionalmente, al desarrollar soluciones con **interacción del usuario**, siempre es importante mantener en mente la **usabilidad** y **accesibilidad**. Aunque el uso de `prompt` es muy directo, puede no resultar adecuado para todos los usuarios, especialmente para aquellos utilizando lectores de pantalla u otras ayudas tecnológicas. En aplicaciones reales, se recomienda implementar una interfaz más amigable y accesible.

#### Optimización y buenas prácticas

Es vital mantener el **código limpio** y seguir **buenas prácticas**, como el uso de **funciones puras** y la **separación de las preocupaciones** (principio de separación de intereses, del inglés Separation of Concerns, SoC). Por ejemplo, se podría tener una función específica para validar datos, otra para la construcción de la fila de la tabla, y otra para actualizar el DOM, cada una enfocada en una sola tarea.

#### Conectando el código con eventos del usuario en el DOM

Finalmente, para integrar toda esta funcionalidad de forma que se active con acciones del usuario, como el clic de un botón, podemos agregar **eventos** al **DOM** mediante **JavaScript**. Aquí es donde entra el juego del manejo de eventos y la capacidad de ejecutar el **script** correspondiente en respuesta a acciones específicas del usuario.

javascript
document.getElementById(‘miBoton’).addEventListener(‘click’, function() {
// Aquí iría todo el proceso de captura, validación y adición a la tabla
});

Copiar

Estas son las bases para implementar una **interacción básica** con el usuario y mostrar los datos ingresados en una tabla. A partir de aquí, los desarrolladores pueden expandir esta funcionalidad con más validaciones, interfaces más ricas y almacenamiento de datos más permanente, como bases de datos o APIs de almacenamiento del lado del cliente como **localStorage**.