const html = document.querySelector("html");
const body = document.querySelector("body");
const nav = document.createElement("nav");
const otroNav = document.createElement("nav");
const enlace = document.createElement("a");
const otroEnlace = document.createElement("a");
 
html.style.backgroundColor = "gray";
 
enlace.innerText = "Mi enlace (hijo de nav)";
enlace.style.display = "block";
enlace.style.border = "3px solid black";
enlace.style.width = "40%";
enlace.style.height = "3em";
 
otroEnlace.innerText = "Mi otro enlace (también hijo del nav que quiero trackear)";
otroEnlace.style.border = "3px solid black";
otroEnlace.style.position = "fixed";
otroEnlace.style.bottom = "80px";
otroEnlace.style.left = "6px";
otroEnlace.style.fontSize = "1.3em";
 
nav.style.height = "200px";
nav.style.width = "90%";
nav.style.backgroundColor = "red";
nav.innerText = "Esto es un ejemplo";
nav.id = "navQueQuieroTrackear";
 
otroNav.style.height = "200px";
otroNav.style.width = "90%";
otroNav.style.backgroundColor = "orange";
otroNav.innerText = "Otro nav";
 
body.style.width = "100%";
body.style.height = "900px";
body.backgroundColor = "green";
 
nav.appendChild(enlace);
nav.appendChild(otroEnlace);
body.appendChild(nav);
body.appendChild(otroNav);                                                              
 
window.addEventListener("click", evt => {
  const tagName = evt.target.outerHTML.substr(1, 15).split(" ")[0]; // obtener etiqueta clickada.
  alert("Clickeaste el elemento " + tagName);
 
  const nav = document.querySelector("#navQueQuieroTrackear");
  const id = evt.target.id; // obten id del elemento clickado
  if (id === nav.id) { // se clickeo el nav que busco
    alert("Nav clickeado"); // xD
    nav.style.opacity = "1"; // 0 es invisible, 1 es visible.
  } else {
    // comprueba si el elemento clickado es hijo del nav
    let isChildOfNav = false; // auxiliar
    const navChilds = document.querySelectorAll("#navQueQuieroTrackear > *"); // selecciona todos los hijos del nav
    evt.target.currentLoopedElementTemporalId = true; // propiedad que uso de auxiliar para detectar si alguno de los hijos la tiene (A.K.A, es el mismo elemento)
    for (let i in navChilds) { // recorre los hijos
      if (navChilds[i]?.currentLoopedElementTemporalId) { // comprueba si el hijo actual tiene la propiedad
        // el elemento iterado es el mismo que el clickeado (es decir, el elemento clickeado es hijo del nav
        isChildOfNav = true;
        evt.target.currentLoopedElementTemporalId = null; // elimina la propiedad auxiliar
        break; // ya sabemos que es hijo, deja de iterar
      }
    }
 
    if (isChildOfNav) { // si se clickeo un hijo de nav
      alert("Es un hijo de nav");
      nav.style.opacity = "1";
    } else { // si no es hijo de nav
      alert("No es hijo de nav");
      nav.style.opacity = "0.2"; // haz el nav casi invisible
    }
  }
 
 
});

import * as std from "std"; // importa libreria std para manejo de archivos en quickjs
 
const pedirUnSoloCaracter = texto => { // funcion para pedir un caracter
  console.log(texto); // texto a mostrar al usuario solicitando el caracter
  const fd = std.open("/dev/stdout", "r") // abre el archivo de salida estandar en modo lectura
  const linea = fd.getline(); // lee toda la linea
  fd.close(); // cierra el archivo
 
  if (linea.length > 1) { // La linea contiene mas de un caracter
    throw new Error("Mas de un caracter");
  } else if (! /[a-zA-Z0-9]/.test(linea) ) { // alfanumerico
    if (linea === "ñ" || linea === "ç") { // maneja caracteres extra que no contempla la expresión regular a-zA-Z
      return linea;
    }
    // else implicito { // si no es alfanumerico o alguno de los caracteres manejados, tira el error
    throw new Error("El caracter no es una letra o un numero");
  } else {
    // retorna el caracter
    return linea;
  }
}
 
 
/* Instrucciones del programa */
 
try { // meneja las excepciones
  const caracter = pedirUnSoloCaracter("Introduce un caracter"); // pide un caracter
  console.log("El caracter introducido es " + caracter); // muestra el caracter si no hubo errores
} catch (err) { // captura posibles errores
  console.log(err); // muestra el error.
}