Explorando JavaScript: Eventos, DOM, Nodos y Objetos

Evento Click con Button

Existen dos formas principales de asignar un evento de clic a un botón en JavaScript:

• Asignación directa:

  boton.onclick = function () { console.log("Hemos pulsado el botón otra vez"); };

• Usando addEventListener:

  boton.addEventListener("click", function() { console.log("Hemos pulsado el botón otra vez"); });

Elementos no reconocidos en IntelliSense

Algunos elementos que no son reconocidos por IntelliSense en ciertos entornos de desarrollo incluyen:

• document.anchor
• document.head
• document.body
• document.image
• document.ElementsDocument
• document.link
• document.embeds
• document.forms

Árbol DOM (Modelo de Objetos del Documento)

El DOM es una representación en forma de árbol de la estructura de un documento HTML. Permite acceder y manipular los elementos del documento mediante JavaScript. Aquí hay algunas propiedades clave para navegar por el DOM:

• parentNode: Devuelve la referencia al nodo padre del nodo actual.
• childNodes: Almacena una colección de nodos hijos del nodo actual. Incluye nodos de tipo HTML, comentarios y saltos de línea.
• children: Similar a childNodes, pero solo retorna hijos de tipo Element (sin comentarios, saltos de línea, atributos, etc.).
• nextSibling: Retorna el siguiente hermano del nodo actual.
• previousSibling: Retorna el hermano anterior del nodo actual.

Bucle for para Radio Buttons

Para iterar sobre un grupo de radio buttons y obtener sus valores, se puede usar un bucle for:

for (let i = 0; i < elementos.length; i++) {
  console.log("Valor de radio button #" + (i + 1) + ": " + elementos[i].value);
}

Atributos del objeto Nodo

Los nodos del DOM tienen atributos que se pueden manipular con los siguientes métodos:

• getAttribute(): Recibe un nombre de atributo y retorna su valor.
• setAttribute(): Establece un nuevo valor para un atributo dado su nombre.
• hasAttribute(): Retorna true si el nodo tiene el atributo especificado, false en caso contrario.
• removeAttribute(): Elimina el atributo especificado del nodo.

Autocompletar Código para un Objeto Persona

Ejemplo de un objeto person en JavaScript con un método para obtener el nombre completo en mayúsculas:

const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName.toUpperCase() + " " + this.lastName.toUpperCase();
  }
};

Programar un Menú de Opciones con Switch en JavaScript

Ejemplo de cómo implementar un menú de opciones usando la estructura switch y manipulando la visibilidad de capas (divs) con JavaScript:

function mostrarOpcion(vMenu) {
  switch (vMenu) {
    case 1:
      alert("Opción seleccionada: 1-Portada");
      mostrarCapa("Portada");
      break;
    case 2:
      alert("Opción seleccionada: 2-Resultados");
      mostrarCapa("Resultados");
      break;
    case 3:
      alert("Opción seleccionada: 3-UltimasNoticias");
      mostrarCapa("UltimasNoticias");
      break;
    default:
      alert("Opción no válida");
  }
}

function mostrarCapa(idCapa) {
  document.getElementById("Portada").style.display = "none";
  document.getElementById("Resultados").style.display = "none";
  document.getElementById("UltimasNoticias").style.display = "none";
  document.getElementById(idCapa).style.display = "block";
}