Control de acceso con cookies Javascript para web de mayores de edad

Control de acceso con cookies Javascript para web de mayores de edad

Print Friendly, PDF & Email
Control de acceso con cookies Javascript para web de mayores de edad
Valora esta entrada
Este ejercicio es una variación avanzada del ejercicio ventana emergente con control de edad.

El punto de partida es pues la solución de este. La encontraréis en este enlace de descarga.

Pero cuidado, ya aviso de antemano que es necesario modificarlo bastante. Por tanto en el apartado enunciado de esta publicación encontraréis un archivo inicial para el alumno ligeramente distinto. Quien quiera partir de zero… pues más emocionante.

La idea es conseguir que la web recuerde si es la primera vez que visitamos la página o no y que en función de nuestras respuestas anteriores veamos unos resultados o otros.

Tener en cuenta también que existen muchas soluciones posibles. La mía sólo es una propuesta.

Entre los conceptos clave que usaremos:

  • Llamada a nodos del documento web.
  • Asignación de eventos mediante javascript.
  • Modificar el HTML mediante javascript.
  • Modificar el CSS mediante javascript.
  • Funciones anónimas.
  • Biblioteca de funciones para trabajar con cookies que encontraréis navegando en esta entrada.

A nivel de CSS vamos a practicar los conceptos de :

  • Centrado horizontal y vertical de una capa.
  • Propiedad opacity.
  • Posicionamiento fijo y absoluto de cajas.

Vayamos al ejercicio.

Visionado para usuarios que nunca han entrado a la página
Visionado para usuarios que nunca han entrado a la página
Visionado para usuarios que han reconocido ser mayores de edad
Visionado para usuarios que han reconocido ser menores de edad
Visionado para usuarios que han reconocido ser menores de edad

Enunciado

Dado un documento html que únicamente contiene texto de tipo Lorem Ipsum hacer que cuando se cargue el documento haga salir una ventana emergente que pregunte a los usuarios si son mayores de edad o no.

  • En caso de ser mayores de edad la venta emergente desaparece y el texto de fondo pasa a verse con claridad. La siguiente vez que se accede al mensaje se sustituye el mensaje ¿Es la primera vez que nos visitas? por Disculpa las molestias, debemos asegurarnos que eres mayor de edad.
    ¿Te importa volver a responder?.
  • En caso de no ser mayor de edad el contenido de la página se sustituye por “<h1>Lo sentimos, sólo si eres mayor de edad puedes ver esta página</h1><p>Prueba a recargar la web</p><button>Menudo despiste, quiero volver a responder</button>“. La idea es que cuando se haga click en el botón se vuelve a cargar la web pero en esta ocasión se ha borrado la cookie que recordaba la edad. Es como volver al punto original.
  • Para fines del ejercicio en el extremo inferior izquierdo de la página, al cargarse, habrá un botón fijo al scroll que permitirá borrar todas las cookies.

Para mayor claridad ver las imágenes adjuntas en la introducción de este ejercicio.

Como requisitos:

  • La ventana emergente inicial sólo desaparecerá si se hace click en algún botón.
  • Por mucho scroll que haga el usuario la ventana emergente no desaparece si no se selecciona alguna opción.

Si lo prefieres puedes usar este documento como punto de partida  que incluye el html, el css y el documento cookies.js. También un embrión de funciones.js

Solución del ejercicio

La idea es jugar con una cookie de nombre edad que puede tomar los valores mayor o menor.

Como puntos clave que apreciaréis al descargar la solución el css y el javascript se llaman desde el el <head>. El motivo es que en el caso de ser  menor de edad reemplazo todo el código dentro de la etiqueta <body> y entonces eliminaríamos el css y el javascript de no tenerlos en el <head>.

Otra instrucción importante es document.location=document.location.href. Sirve para obligar a cargar de nuevo la página web.

Una posible solución alternativa sería que en lugar de sustituir el código html que hay dentro del <body>, como es la solución presentada, en su lugar reenviar los visitantes que digan ser menores de edad a otra página.

Otra posible mejora de la solución encontrada es no jugar con capas ocultas para no perjudicar el SEO. Idealmente deberíamos insertar y eliminar nodos en el DOM a medida que se necesiten. Esto también lo dejo para quién se anime.

El código de index.html y de estilos.css se incluye con el documento descargable que encontraréis. Por razones prácticas no lo incluyo en la entrada.

¿Como queda el JS?

window.onload = init;
function init(){    
    if(detectCookie("edad")){
        if (getCookie("edad")=="mayor"){
                document.querySelector(".emergente p").innerHTML = "<p>Disculpa las molestias, debemos asegurarnos que eres mayor de edad.<br>¿Te importa volver a responder?</p>";
                asignarEventosBotones();
            }else{
                removeCookie("edad");    
                menor18();
            }    
    }else{
        //si no se encuentra la cookie o está vacía
        asignarEventosBotones()
    }
}
        
function menor18(){
    setCookie("edad","menor",7);
    document.body.innerHTML="<h1>Lo sentimos, sólo si eres mayor de edad puedes ver esta página</h1><p>Prueba a recargar la web</p><button>Menudo despiste, quiero volver a responder</button>";
    
    //ahora usaremos una función anónima para practicar un poco
    document.querySelector("button").addEventListener("click",function(){
        removeCookie("edad");                           
        document.location=document.location.href;
        }
    );
}    

function mayor18(){
    setCookie("edad","mayor",7);
    document.querySelector(".emergente").style.display="none";
    document.querySelector("#container").style.opacity="1";
}

function asignarEventosBotones(){
    document.querySelector(".emergente .menor").addEventListener("click",menor18);
    document.querySelector(".emergente .mayor").addEventListener("click",mayor18);
    document.querySelector(".cookies").addEventListener("click",function(){removeCookie("edad")}); 
}

Si juntamos todas las piezas resolvemos el ejercicio.

Podéis descargar la solución completa en este enlace.

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Ejercicio JS – Rellenar contenidos usando el DOM
- 94
Serie de ejercicios resueltos del tutorial Javacript. Uso básico del DOM. Incluye el repaso básico de teoria a leer y explicación.
3 formas de cambiar la ubicación de búsqueda en Google
- 208
En esta entrada encontrarás 3 formas distintas de modificar tu ubicación de búsqueda en google sin necesidad de que te tengas que desplazar.
Ejercicio – ¿Qué declaraciones de variables son erróneas en JS?
- 144
En este ejercicio repasamos los conceptos relativos a la declaración de variables en javascript. ¿Qué declaraciones son incorrectas? Detéctalas y corrígelas.
Ejercicio – ¿Qué hora es? Programación de un reloj muy sencillo en JS
- 145
Ejemplo de programación de un script que devuelve una hora con formato personalizado hh:mm:ss.
Estructura condicional switch en Javascript
- 693
Podemos escribir una estructura condicional mediante el if(){}else if(){}else{} o mediante el switch(){}. ¿Cuando usar una opción y no la otra? En esta entrada vemos un ejemplo para el switch y coment...
Ejercicio – Generación de una fecha personalizada mediante javascript
- 104
Ejercicio javascript dónde se trabaja con fechas y los métodos para fechas con el objetivo de crear fechas con formato personalizado.
Sintaxi y gramática básica de las variables en javascript
- 249
Javascript es un lenguaje. Tiene una sintaxis y una gramática básicas que hay que aprender. Vemos cuales son estas normas para el caso de las variables en JS y dónde debes hacer hincapié en no equivoc...
Introducción a las animaciones Javascript: setInterval() y setTimeout()
- 668
Resumimos las funciones setInterval(), clearInterval y setTimeout(). Cuales son sus parámetros, que es una función anónima y como la llamamos.
Ejercicio JS – Como cargar una imagen aleatoria al clicar un botón
- 103
Ejercicio javascript resuelto en el que see plantea un script para cargar una imagen aleatoria cada vez que se clica un botón.
Eliminar el comportamiento por defecto de todos los enlaces de una web
- 40
Ejercicio javascript dónde se inhabilitan todos los enlaces al cargar una web. Al hacer click en un botón se activan de nuevo. Incluye solución.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.