Corolario: "en esta versión se maneja como escribir un programa automáticamente componiendo texto para escribirlo en un botón, en su atributo onclick con setAtribute y que se ejecute al púlsar.
Jaja exacto — proyecto perfecto para primero. En dos días aprenden:
Objetos con constructor function
Métodos dentro del objeto
Árbol recursivo (un Agenda contiene Agendas)
localStorage para persistencia
createElement + setAttribute para generar botones dinámicos
Media query para mobile
Todo con JS nativo, sin frameworks, sin librerías. Y el parsea() recursivo es el momento "ajá" del ejercicio — cuando entienden que un nodo puede contener nodos del mismo tipo.
<html>
<body>
<script>
var Agenda= function(nombre="",apellido="",edad="",telefono="",email="",id=0){
//Propiedades
this.cima=0;
this.id=0;
this.Nombre=nombre;
this.Apellido=apellido;
this.Edad=edad;
this.Telefono=telefono;
this.Email=email;
this.Contactos=[];
//Métodos
this.imprimeContacto=function (con){
var texto="";
texto+="Número de Contacto: "+con.id+"\n";
texto+="Nombre: "+con.Nombre+"\n";
texto+="Apellido: "+con.Apellido+"\n";
texto+="Edad: "+con.Edad+"\n";
texto+="Contactos: "+con.Contactos.length;
alert(texto)
}
this.agregarContacto=function (){
var contacto=new Agenda();
contacto.Nombre=prompt("Introduzca un nombre: ");
contacto.Apellido=prompt("Introduzca un apellido: ");
contacto.Edad=prompt("Introduzca una edad: ");
contacto.id=this.cima;
this.cima+=1;
this.Contactos.push(contacto);}
this.listarAgenda=function (){
alert("Lista de Contactos en la Agenda")
for (var i=0;i<this.Contactos.length;i++){
this.imprimeContacto(this.Contactos[i]);
}
}
this.eliminarAgenda=function (){
var eliminar=prompt("introduzca el id de contacto a eliminar")
var nuevaAgenda=[]
for(var b=0;b<this.Contactos.length;b++)
{
if(this.Contactos[b].id != eliminar)
{nuevaAgenda.push(this.Contactos[b]);
}
}
this.Contactos=[]
for(var g=0;g<nuevaAgenda.length;g++)
{
this.Contactos.push(nuevaAgenda[g]);
}
}
this.mostrarContacto=function (identificador=''){
if(identificador==''){
identificador=prompt("Indique el identificador del contacto a mostar:");
}
identificador=parseInt(identificador);
var loc=-1;
for(var f=0;f<this.Contactos.length;f++)
{
if (this.Contactos[f].id==identificador)
{loc=f;navegacion.push(identificador);//alert(navegacion);
referenciaAgenda=this.Contactos[f];
}
}
if(loc>-1){ //si se actualizó el localizador
this.imprimeContacto(this.Contactos[loc])
}
else{ //si el localizador permaneció siendo -1...
alert("elemento no encontrado");
return false;
}
}
}
var referenciaAgenda=0;navegacion=[];//para contactos aleatorios
/*Esta variable va a apuntar a la dirección de memoria del último elemento, contacto, objeto mostrado... para actuar sobre él y sus métodos.*/
var nuevaAgenda=new Agenda();
var rutas=[];
</script>
<body onload=" nuevaAgenda=parsea();" onunload="localStorage.setItem('nuevaAgenda',JSON.stringify(nuevaAgenda));"> <!--Guardamos y recuperamos nuestra agenda en la memoria del navegador-->
<h1>Gestión de Contactos en Árbol</h1><hr>
<!--primera línea de botones para la agenda principal -->
<button onclick="if (confirm('¿Realmente desea crear una nueva Agenda?\n La nueva sobreescribirá la guardada en el navegador.\nSiempre puede restaurar con el contenido de la celda «memoria».')){nuevaAgenda=new Agenda();alert('agenda creada');}" title="Borra la Existente">Crear Agenda Nueva</button>
<button onclick="nuevaAgenda.agregarContacto();">Agregar elemento a contactos</button>
<button onclick="navegacion=[];nuevaAgenda.mostrarContacto();">Mostrar elemento de contactos</button>
<button onclick="nuevaAgenda.listarAgenda();">Listar todos los contactos</button>
<button onclick="nuevaAgenda.eliminarAgenda();">Borrar Elemento</button>
<!-- Segunda fila de botones para el último contacto mostrado y su agenda -->
<br>...con el último contacto mostrado...<br>
<button onclick="referenciaAgenda.agregarContacto()">Agregar contacto</button>
<button onclick="referenciaAgenda.mostrarContacto()">Mostrar contacto</button>
<button onclick="referenciaAgenda.listarAgenda()">Listar Todos</button>
<button onclick="referenciaAgenda.eliminarAgenda()">Borrar contacto</button>
<hr>
<!--Botón que guarda nuevaAgenda en el navegador-->
<h1>Su Árbol De Contactos Está Servido</h1>
<button onclick="localStorage.setItem('nuevaAgenda',JSON.stringify(nuevaAgenda));document.getElementById('memoria').value=JSON.stringify(nuevaAgenda)">Guardar Agenda En Browser</button>
<button onclick="alert(rutas);document.getElementById('memoria').value=JSON.stringify(rutas);">Mostrar rutas de marcadores</button>
<textarea id="memoria" cols=40 rows=5 placeholder="memoria.- lo que haya aquí se puede guardar en un notepad o cargar en el browser"></textarea><button onclick="nuevaAgenda=parsea(JSON.parse(document.getElementById('memoria').value));alert('cargado')">Cargar a Agenda</button><button onclick="cargaRutas();">Cargar Marcadores</button>
<hr>
<h3>Posiciones de Memoria <br>(Favoritos-Marcadores de sesión)</h3>
<div id="posiciones-memoria" title="Tras hacer click en estos botones
podrás navegar por el objeto al que apuntan"><div>"Tras hacer click en estos botones podrás navegar por el objeto al que apuntan"</div>
<div><button onclick="referenciaAgenda=this.value" value="referenciaAgenda">Último Objeto en Memoria</button></div>
</div>
<div>
Baja desde la Raíz del árbol hasta el nodo o rama que quieras añadir y pulsa:
<input type="text" id="etiqueta" placeholder="etiqueta..."><button onclick="agregaPos();">Añadir Posición de memoria (temporal de sesión)</button>
</div>
<script>
function cargaRutas(){
var rutas1=[];
rutas1=JSON.parse(document.getElementById('memoria').value)
//alert(JSON.stringify(rutas1));
for(g=0;g<rutas1.length;g++){
navegacion=[];
//alert(rutas1[g][0])
for (h=1;h<rutas1[g].length;h++)
{ //alert(rutas1[g][h])
navegacion.push(rutas1[g][h]);}
var label=rutas1[g][0]; agregaPos(label);
}
}
function agregaPos(label=""){
if(label==""){label=document.getElementById("etiqueta").value}
var elem=document.createElement("button");
var text="referenciaAgenda=nuevaAgenda"
var ruta=[];
ruta.push(label)
for(i=0;i<navegacion.length;i++){
text+=".Contactos["+navegacion[i]+"]"
ruta.push(navegacion[i])
}
rutas.push(ruta);
//alert(rutas);
elem.setAttribute("onClick",text+";alert('cargada posición '+'"+label+"');");
elem.innerText=label
document.getElementById("posiciones-memoria").appendChild(elem)
}
function parsea(datos) {
if (datos === undefined) {
datos = JSON.parse(localStorage.getItem('nuevaAgenda'));
if (!datos) { alert("no hay agenda guardada"); return new Agenda(); }
alert("leída agenda del browser");
}
var nodo = new Agenda();
nodo.Nombre = datos.Nombre;
nodo.Apellido = datos.Apellido;
nodo.Edad = datos.Edad;
nodo.Telefono = datos.Telefono;
nodo.Email = datos.Email;
nodo.id = datos.id;
nodo.cima = datos.cima;
for (var i = 0; i < datos.Contactos.length; i++) {
nodo.Contactos.push(parsea(datos.Contactos[i]));
}
return nodo;
}
</script>
</body>
</html>