Comparación de Cadenas en JavaScript - Ejemplo Práctico
Comparación de Cadenas en JavaScript - Ejemplo Práctico
En este ejercicio, veremos cómo comparar dos cadenas en JavaScript utilizando un verificador de contraseñas sencillo.
Código HTML/JS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verificación de Contraseña</title>
</head>
<body>
<h1>Verificación de Contraseña</h1>
<label for="password">Ingresa la contraseña:</label>
<input type="password" id="password" placeholder="Ingresa tu contraseña"><br><br>
<button id="verificar">Verificar</button>
<p id="resultado"></p>
<script>
// Contraseña correcta almacenada
const contraseñaCorrecta = 'mundo';
// Referencias a elementos del DOM
const passwordInput = document.getElementById('password');
const verificarBtn = document.getElementById('verificar');
const resultadoParrafo = document.getElementById('resultado');
// Evento para verificar la contraseña
verificarBtn.addEventListener('click', () => {
const contraseñaIngresada = passwordInput.value;
// Comparación estricta (===)
if (contraseñaIngresada === contraseñaCorrecta) {
resultadoParrafo.textContent = '✅ Contraseña correcta.';
} else {
resultadoParrafo.textContent = '❌ Contraseña incorrecta.';
}
});
</script>
</body>
</html>¿Cómo funciona?
Almacenamiento de la contraseña correcta:
const contraseñaCorrecta = 'mundo';Se guarda la contraseña válida en una variable.
Captura del input del usuario:
const contraseñaIngresada = passwordInput.value;Se obtiene el valor ingresado en el campo de texto.
Comparación de cadenas:
if (contraseñaIngresada === contraseñaCorrecta) { ... }Se usa el operador
===para una comparación estricta (verifica valor y tipo de dato).
📝 Notas importantes:
==vs===:==compara solo el valor (puede hacer conversión de tipos).===compara valor y tipo (recomendado para mayor precisión).
Sensibilidad a mayúsculas/minúsculas:
JavaScript distingue entre"Hola"y"hola". Si se quiere ignorar esto, se puede usar:if (contraseñaIngresada.toLowerCase() === contraseñaCorrecta.toLowerCase()) { ... }
🔹 Conclusión
Este ejemplo muestra una comparación básica de strings en JS, útil para validación de formularios, inicio de sesión, etc.
¿Te gustaría añadir más funcionalidades, como un contador de intentos? ¡Déjalo en los comentarios! 👇
Comentarios
Publicar un comentario