• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Cursos online y materiales digitales para estudiantes y desarrolladores web

  • CURSOS
  • BLOG
  • QUIÉN SOY
  • FAQ
  • ACCEDER
  • CONTACTO

Reto resuelto: Los Hombres de Paco hacen DNIs

Publicado el 03/07/2020 por Ada 4 Comments

Los Hombres de Paco

Los hombres de Paco

Programación

Eventos y cálculos


Desde la comisaría de San Antonio nos llegó un reto del inspector Paco Miranda. Por lo visto, a él “y a sus hombres” los habían destinado a hacer NIFs y NIEs y lo del cálculo de la letra les traía un poco de cabeza. Aquí podéis ver con todo detalle el reto.

Enunciado del reto:

El reto decía:

¡Hola, Ada y Edu!
Soy Paco Miranda, inspector jefe en la Comisaría de San Antonio.
Estamos implementando una funcionalidad en nuestra aplicación de creación de NIFs y NIEs y necesitamos una calculadora de la letra de control. Pero es importante que entendáis la diferencia entre un NIF y un NIE.
– Los NIFs están formados por 8 dígitos y una letra de control.
– Los NIEs están formados por una letra (X, Y o Z), 7 dígitos y una letra de control. Estas letras iniciales equivalen a 0, 1 o 2 respectivamente de cara a hacer los cálculos.
Te facilito un enlace donde se explica cómo calcular ese dígito de control.
Necesitamos un formulario con dos campos: en el primero se introduce los dígitos del NIF o NIE y en el segundo debería aparecer automáticamente la letra correspondiente. ¿Nos echáis una mano?

En este caso os presento una única solución:

  • En primer lugar hay que tener en cuenta que restringimos el campo donde introduciremos el NIF o NIE todo lo posible utilizando HTML5 e incluyendo un pattern.
  • Asignamos un evento de tipo keyup para comprobar, en cada pulsación, si ya están introducidos todos los dígitos esperados.
  • A continuación comprobamos si se trata de un NIF, un NIE o es un dato erróneo, y procedemos a hacer los cálculos correspondientes.
  • Por último mostramos la letra en el segundo campo de texto.

Como siempre, ya sabéis, ¡no hay una única solución al problema; hay soluciones mejores y soluciones peores!

¿Qué aprenderás en el vídeo?

En este vídeo veremos:

  • Cómo escribir una expresión regular completa que admita un NIF o un NIE.
  • Cómo asociar un evento de tipo keyup a un elemento HTML.
  • Cómo utilizar checkValidity para comprobar la validez de un campo de texto.
  • Cómo extraer caracteres a partir de posiciones de una cadena y sustituirlos utilizando replace.
  • Cómo realizar el cálculo utilizando la función módulo.
  • Cómo escribir el valor resultante en un campo de tipo texto.

Vídeo y código fuente

¡¿A qué esperas?! ¡Echa un ojo al vídeo de la solución !

Y por supuesto, cómo no:

Código fuente de la solución
You do not have access to this post. ¡Ups! Este contenido es solo para codelovers, ¿no te has registrado aún? ¡Hazlo ahora! ¡Regístrate o accede!

¿Tú cómo lo habrías hecho? ¡Espero tus propuestas en los comentarios!

Y si quieres compartir código, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…

Filed Under: Ejercicio resuelto, Reto Tagged With: dni

Reader Interactions

Comments

  1. FEDERICO MACÍAS says

    04/07/2020 at 03:02

    Creo que el código de ejemplo tanto el html como el js es el de Julio César, jeje

    Accede para responder
  2. FEDERICO MACÍAS says

    04/07/2020 at 15:28

    Me encantó el vídeo. Eso de resolverlo mediante cadena de texto está genial. Se me hace más cómodo que con un array. Lo de las expresiones regulares es lo que más me cuesta. Pero al menos por fin me funcionó el click en el botón, jejeje. Ya es un avance, ¿no? 😉

    Accede para responder
  3. Ada Lovecode says

    09/07/2020 at 16:30

    ¡Pues tienes razón! Es lo que tiene el copy-paste 😉
    ¡Ahora ya está el código bueno! ¡Gracias por avisar, Federico!

    Accede para responder
  4. Ada Lovecode says

    09/07/2020 at 16:31

    ¡Sí, ¿verdad?! Con cadena de texto te lías menos, sobre todo cuando hay muchas letras (no tienes que andar con comillas)…
    Las expresiones regulares son mucho más fáciles de lo que parece, ¡tengo que hacer una serie solo de eso! 🙂
    Y como bien dices, ¡todos los avances son buenos! ¡Me alegro mucho de que vayan saliendote las cosas, Federico!

    Accede para responder

Deja una respuesta Cancelar la respuesta

Lo siento, debes estar conectado para publicar un comentario.

Footer

Didacticode

Cursos para estudiantes y docentes del mundo de la informática.
Retos: retos resueltos de programación.
Tips&Tricks: trucos y consejos.
Boleticodes: boletines de noticias.
Quiénes somos: Ada, Edu... y Laura.
Contacto¡Contacta conmigo!

Legal

Aviso legal
Política de privacidad
Cookies

Redes Sociales

Youtube
Twitter
Instagram
Facebook
Twitch
LinkedIn
Gitlab
Github

Didacticode © 2023

¡Cómo no! Este sitio también utiliza cookies para mejorar la experiencia de tu visita.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los AJUSTES.

Resumen de privacidad
Didacticode

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.