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:

Como modificar el destino de todos los enlaces de una web con javascript
- 211
Ejercicio con solución de la serie ejercicios javascript puro dónde se muestra como modificar el href de todos los enlaces de una web.
Acceder y modificar una web con javascript
- 762
Vamos a ver como mediante Javascript podemos interactuar con las etiquetas html que constituyen un documento web. Podemos acceder a una etiqueta, un párrafo, un enlace, una imagen, o incluso a los met...
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 571
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Tipos de variables en Javascript
- 1804
En programación se dice que una variable es un recurso de memoria del ordenador reservado para alojar una información. En Javascript existen 5 tipos de variables: textos, números, booleanos, objetos y...
Validación de campos try catch finally en Javascript puro
- 617
Explicación teórica y ejemplo práctico del uso de las instrucciones try + throw, catch y finally en javascript. Utilizamos esta estructura para validar un campo en un formulario. Sin embargo se puede ...
Validación de formularios web: Como desactivar el envío con Javascript
- 781
Veamos como podemos deshabitar el envío de un formulario web mediante javascript. Explico el método clásico y otra alternativa más limpia mediante preventDefault().
Resumen de como comentar código en html, css y javascript
- 772
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Métodos javascript
- 637
Javascript es un lenguaje basado en métodos. Existen muchos métodos predefinidos que afectan a arrays, strings, números y casi cualquier variable de tipo objeto. Veamos un resumen de los más important...
La apasionante historia del Javascript (resumida)
- 762
Javascript es un lenguaje de programación de lado cliente que ha cambiado Internet tal y como lo conocemos a día de hoy. Junto con el html y el css es uno de los 3 pilares del diseño web. Es un requer...
Sustituir un nodo por otro en el DOM mediante Javascript
- 360
Para poder sustituir un nodo por otro en el DOM previamente necesitas saber como: Identificar nodos del DOM. Crear nuevos nodos. Si tienes claros estos conceptos sigue leyendo el ejemplo práctico.
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.