Fragmentos de Código JavaScript: Ejemplos Prácticos y Funciones DOM

Cambio de Color con Secuencia Arcoíris al Hacer Clic

Al tocar un botón, cambia de color en secuencia arcoíris:

var colores = ["red", "orange", "yellow", "green", "blue", "violet"];
var i = 0;

var parrafo = document.getElementById("parrafo");

function cambiarColor() {
  parrafo.style.backgroundColor = colores[i];
  i = (i + 1) % colores.length; 
}

parrafo.addEventListener("click", cambiarColor);

Mover una Imagen entre Dos Divs

Código para mover una imagen de un div a otro:

var imagen = document.getElementById('imagen');

imagen.addEventListener('click', function() {
  var div1 = document.getElementById('div1');
  var div2 = document.getElementById('div2');

  if (this.parentNode.id === 'div1') {
    div2.appendChild(this);
  } else {
    div1.appendChild(this);
  }  
});

Obtener Número de Propiedades y Contenido de un Objeto

Ejemplo de cómo obtener el número de propiedades y el contenido de un objeto en JavaScript:

let nProps = 0;

// Versión con for … in
console.log("Contenido del objeto (v1):"); //mostrar contenido
for (let i in obj) {
    console.log(`${i}: ${obj[i]}`); //mostrar contenido

    nProps++;  }
console.log("nProps v1: " + nProps);

// Versión con Object.keys
console.log("nProps v2: " + Object.keys(obj).length);

Ejecutar Función al Cargar Completamente el Documento HTML

Cómo ejecutar una función cuando el navegador termina de cargar completamente el documento HTML:

document.addEventListener("DOMContentLoaded", function () { 
    actualizar(p1,p2);
});

Añadir una Propiedad a un Objeto ya Definido

Ejemplo de cómo añadir una propiedad a un objeto ya definido:

obj["num3"]=55

Añadir Sufijo a Cada Elemento de un Array con forEach

Función que añade el sufijo "-GTDM" a cada posición del array utilizando forEach:

function CambioNombre(nombre){
  var res = nombre + "-GTDM";
  console.log(res);
  return res; 
}

d.forEach(CambioNombre);

Concatenar Propiedades de un Objeto

Concatenación de propiedades de un objeto (si ambos son del mismo tipo y valor):

var obj = {num1: "10", num2: "2",  num3: "55"};

function Concatenar() {
  if (typeof obj.num1 === 'string' && typeof obj.num2 === 'string' && typeof obj.num3 === 'string'){
    var res = obj.num1.concat(obj.num2).concat(obj.num3);
    return res;  
  }
  else {
    var nada = "Nada";
    return hola;
  }
}

console.log(Concatenar());

Lista Ordenada de Elementos de un Objeto

Creación de una lista ordenada de elementos de un objeto:

const editados = [
  { titulo: "Libro 1" },
  { titulo: "Libro 2" },
  { titulo: "Libro 3" }
];

var lista = document.createElement("ol"); //lista ordenada
for (let i = 0; i < editados.length; i++) {
  let libro = document.createElement("li"); //representar elementos de list
  libro.innerHTML = editados[i].titulo;
  lista.appendChild(libro); // Añadir un elemento a otro, en este caso, una lista     
}

document.body.appendChild(lista); // Añadir algo al DOM

Advertencia en el DOM

Función para mostrar una advertencia en el DOM:

function advertir(){
  var advertencia = document.createElement("p");
  advertencia.innerHTML = "Cuidado"; // <b> </b> -> Negrita
  document.body.appendChild(advertencia);
}

Función Bucle para Calcular el Valor Total de Elementos

Función bucle que devuelve el valor de todos los elementos de un tipo (libros en este caso) y valor total del precio de estos.

function valorTotal(){
  var p = 0;
  for (i in editados){
    p = p + editados[i].precio * 100; // suponemos q hay 100 libros
  }
  return p;
}

valorTotal();

Método y Propiedad del DOM

Un método del DOM: document.createElement() que permite crear un nodo elemento de un cierto tipo (es decir, que se construye con una cierta etiqueta HTML) que se indica entre comillas dobles. Por ejemplo, document.createElement("div"); crea un nodo elemento de tipo <div>. Es importante destacar que createElement sólo crea el nodo pero no lo añade al árbol del documento y por tanto por sí solo este método no conseguiría que el div creado sea visible. Una propiedad del DOM: innerHTML que permite acceder al contenido HTML de un elemento.

Objeto en JavaScript

Ejemplo de un objeto en JavaScript: var obj = { n1: "1", n2: "2", n3: "3"}

Cambiar Extensión a PNG

Función para cambiar la extensión de un nombre de archivo a PNG:

function transformaPng(nombre){
  var res = nombre + ".png";
  console.log(res);
  return res; 
}

paisajes.forEach(transformaPng);

Métodos de Búsqueda en el DOM

• document.getElementsByTagName -> Buscar todos los elementos de x tipo / buscar por tipo (str, p, div...)
• document.getElementsById -> Busca por le nombre que le has puesto a un elemento en el DOM
• querySelector() -> Es como jugar a un "buscador mágico" que encuentra algo que le pidas en la página web. Tú le dices qué buscar usando reglas, y él te da el PRIMER objeto que coincide con lo que pediste.
• querySelectorAll() -> Encuentra algo que le pidas en la página web. Tú le dices qué buscar usando reglas, y él te da TODOS los objetos que coinciden con lo que pediste.

Añadir Elemento al DOM con appendChild

let casas = document.createElement("p");
casas.innerHTML = "¡Hola, soy un nuevo párrafo!";
document.body.appendChild(casas)

Añadir Múltiples Elementos al DOM con appendChild

let vehiculos = document.createElement("div");
vehiculos.innerHTML = "Este es el grupo de vehiculos";

let bici = document.createElement("p");
bici.innerHTML = " Toyota";

vehiculos.appendChild(bici);

document.body.appendChild(vehiculos);

Bucle For en JavaScript

for (let i = 0; i < 6; i++) {
  console.log(i);
}

Crear Lista Estándar con Bucle For

let resultado = ""; //crea una cadena vacía
resultado = "<ol>"; // añade a la variable resultados el inicio de una lista

for (let i = 0 ; i < 31 ; i++ ) {
  resultado  = resultado + "<li>" + i + "</li>"; //abre y cierra la etiqueta que es una lista 
}

resultado = resultado + "</ol>"; //cierra la lista
console.log(resultado);

Sustituir Contenido HTML

document.getElementById("").innerHTML= ...

Tipos de Datos y Operaciones en JavaScript

Number(a) -> NaN || Number(0) -> 0 || typeof devuelve el tipo de dato de la expresión (bool, string…)

typeof("") = string || typeof(vector) = object || typeof(null) = object

boolean -> true/false || isNaN -> VERIFICA SI UN NUMERO ES VÁLIDO (yes/no) -> Aparece cuando la operación no tiene sentido: 0/0, Number('hola')... || let x; console.log(x); = undefined || let vector = [1, 2, 3];console.log(vector[3]); = undefined || cuando falta el return

for...in recorre los índices del array, no los valores.