Inputs y Conversiones

Guía maestra de captura de datos y transformación de tipos.

Parte 1: Captura de Datos (Input)

1. Ventanas Emergentes (Prompt)

prompt() es la forma más antigua. Siempre devuelve String (o null si cancelas). 

let val = prompt("Dime algo"); // Siempre Texto
Resultados...

2. Guía Definitiva de Inputs HTML5

El estándar es usar .value (que suele devolver texto), pero HTML5 introdujo propiedades mágicas para hacernos la vida más fácil.

Tabla de Referencia: ¿Qué propiedad uso?

Tipo de Input Propiedad Estándar (`.value`) Propiedad Especial (Recomendada) Tipo de Dato Real
<input type="text"> String --- Texto
<input type="number"> String ("10") .valueAsNumber Number (10)
<input type="range"> String ("50") .valueAsNumber Number (50)
<input type="date"> String ("2023-12-31") .valueAsDate Date Object
<input type="checkbox"> String ("on") 😈 Malvado .checked Boolean (true/false)
<input type="file"> String (Fake Path) .files FileList (Array)

Recetario de Código (Copy-Paste)

1. Números (Range o Number)

<!-- HTML -->
<input type="number" id="miEdad" value="25">

// JS (Obtienes un número real, p.ej: 25)
let edad = document.getElementById("miEdad").valueAsNumber;

2. Fechas

<!-- HTML -->
<input type="date" id="miFecha">

// JS (Obtienes objeto Date real)
let fecha = document.getElementById("miFecha").valueAsDate;
console.log(fecha.getFullYear()); // 2023

3. Checkbox (Interruptores)

<!-- HTML -->
<input type="checkbox" id="aceptoTerminos">

// JS (Obtienes true o false)
let aceptado = document.getElementById("aceptoTerminos").checked;
if (aceptado) { /* ... */ }

4. Archivos (Files)

<!-- HTML -->
<input type="file" id="miFichero">

// JS (Obtienes una lista de archivos 'FileList')
let lista = document.getElementById("miFichero").files;

if (lista.length > 0) {
    let archivo = lista[0]; // El primer archivo
    console.log("Nombre:", archivo.name);
}

Laboratorio de Inputs





Modifica los inputs y pulsa Analizar...

3. El Problema de Concatenar (Texto vs Número)

Si usas .value en inputs numéricos, obtienes texto. Y texto + texto = pegamento.

// EJEMPLO DEL ERROR
let n1 = document.getElementById("n1").value; // "5"
let n2 = document.getElementById("n2").value; // "5"
console.log(n1 + n2); // "55" (Concatenación)

// SOLUCIÓN 1: ValueAsNumber
let n1 = document.getElementById("n1").valueAsNumber; // 5
let n2 = document.getElementById("n2").valueAsNumber; // 5
console.log(n1 + n2); // 10 (Suma)

Parte 2: Guía Maestra de Conversiones

Elige la herramienta adecuada para cada trabajo.

A. Convertir a NÚMERO (Number, parseInt, parseFloat)

Tenemos 3 formas principales de convertir valores a números. Cada una se comporta diferente.

Tabla Comparativa Definitiva

Valor de Entrada (String) Number() / + parseInt() parseFloat() Explicación
"123" 123 123 123 Número estándar.
"123.99" 123.99 123 123.99 parseInt corta los decimales (no redondea).
"120px" CSS NaN 120 120 Number falla si hay basura. ParteInt lee hasta encontrar la "p".
" 42 " 42 42 42 Todos limpian espacios en blanco alrededor.
"" (Vacío) 0 NaN NaN Diferencia clave. Number ve el vacío como cero.
null 0 NaN NaN Number convierte null a 0.
true 1 NaN NaN Booleanos solo se convierten con Number.
"A123" NaN NaN NaN Si empieza por letra, ninguno puede leerlo.
Nota sobre binarios/hex: parseInt admite un segundo argumento (la base).
parseInt("101", 2) devuelve 5 (Binario).
parseInt("FF", 16) devuelve 255 (Hexadecimal).

B. Convertir a TEXTO (String)

Método Uso Diferencia Clave con Objetos
String(valor) String(123) Falla menos. Si es un objeto, devuelve "[object Object]" (Poco útil).
valor.toString() (123).toString() Igual que arriba, pero falla (Crash) si el valor es null o undefined.
JSON.stringify(valor) JSON.stringify({a:1}) El mejor para objetos. Devuelve '{"a":1}' real.

C. Convertir a BOOLEANO (El concepto Truthy/Falsy)

Usamos Boolean(x). En JS, todo es VERDADERO excepto una pequeña lista negra.

Categoría Valores Falsos (Falsy) ❌ Valores Verdaderos (Truthy) ✅
Texto "" (o '', ``) Cualquier texto con contenido:
"false", " " (espacio), "0"
Números 0, -0, NaN Todos los demás:
1, -1, Infinity
Objetos null TODOS.
{} (objeto vacío), [] (array vacío) son TRUE.
Otros undefined Funciones, Sets, Mapas...

D. Conversión de COLECCIONES

1. String ↔ Array

Fundamental para procesar CSV o listas separadas por comas.

let texto = "Manzana,Pera,Plátano";
// TEXTO A ARRAY
let lista = texto.split(","); // ["Manzana", "Pera", "Plátano"]

// ARRAY A TEXTO
let nuevaCaden = lista.join(" | "); // "Manzana | Pera | Plátano"
...

2. Array ↔ Set (Truco para eliminar duplicados)

Los Set son listas que no admiten repetidos.

let conDuplicados = [1, 2, 2, 3, 3, 3, 4];

// Array -> Set 
let setUnico = new Set(conDuplicados); // Elimina los extras

// Set -> Array (Para volver a tener métodos de array como .map o .filter)
let limpio = [...setUnico]; // [1, 2, 3, 4]
...

3. Object ↔ Array

A veces necesitamos iterar sobre un objeto como si fuera una lista.

let coche = { marca: "Ford", modelo: "Mustang", año: 1969 };

let claves = Object.keys(coche);     // ["marca", "modelo", "año"]
let valores = Object.values(coche);  // ["Ford", "Mustang", 1969]
let entradas = Object.entries(coche); // [ ["marca","Ford"], ["modelo","Mustang"]... ]
Volver a JS