Tipos de datos

Boolean: true, false

Number: 1, 1.1

Not A Number: NaN

String: "Texto"

Valor no definido: Undefined

Valor vacío: null

Valor infinito: Infinity

Object: {nombre: "Adrián", edad: 99}

Array: [1, 2, 3, 4, 5]

Operaciones

Suma: a + b

Resta: a - b

Variable: a = b

Distinto a: a != b

Igual a: a == b

Igualdad estricta: a === b (Es igual si también el tipo de valor coincide)

Mayor que: a > b

Menor que: a

Mayor o igual que: a >= b

Menor o igual que: a <= b

Una condición u la otra: a && b

Básico

Cada línea, menos las vacías y al abrir o cerrar un "{}" se debe poner un ; al final:

linea;

Al especificar un string y si contiene un ${}, se debe poner este tipo de comillas `:

console.log(`${1 + 1}`);

Imprimir texto en la consola:

console.log("Texto");

Variables

Para definir una variable se sigue este formato:

nombre_variable = valor;

Para tener una variable que puede cambiarse de valor después de definirla se añade let:

let nombre_variable = valor;

Condicionales

Formato:

if (condición1) {
    // Qué hacer si se cumple condición1
} else if (condición2) {
    // Qué hacer si no se cumple pero sí cumple la condición2
} else {
    // Qué hacer si no se cumple ninguna condición
}

Recorrer Listas

Ejemplo:

Lista.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});

La lista puede ser de una de estas formas:

Lista = new Map([['Adrián', '99'], ['Chema', '98'], ['Iván', '97']]);

Lista = ['Adrián', 'Chema', 'Iván'];

La última imprimirá como 'key' la posición que ocupa en el array.

Funciones

Formato:

function nombre_funcion(parámetros) {
    // Dentro de la función
}

Para usar un parámetro pasado a la función se llama con su nombre o con ${nombre_funcion} si está dentro de un string:

function nombre_funcion(nombre) {
    console.log(nombre);
    console.log(`${nombre}`);
}

Se puede devolver un valor con return [valor]:

function nombre_funcion(nombre) {
    return `hola ${nombre}`;
}
console.log(nombre_funcion('chao'));

Bucle FOR

Formato:

function a(){
    let cantidad = 5;
    const contenedor = document.getElementById("contenedor");
    for (let i = 1; i <= cantidad; i++) {
        let nuevoElemento = document.createElement("div");
        nuevoElemento.classList.add("elemento");
        nuevoElemento.textContent = "Elemento " + i;
        contenedor.appendChild(nuevoElemento);
    }
}

Cargar un archivo JS

En un .html se puede poner de varias formas [CAMBIAR: scrip_t → script]:

< scrip_t >
    CÓDIGO DE JS                    
< /scrip_t >

< scrip_t src="archivo.js">< /scrip_t>

< button onclick="funcion(parámetros)">BOTÓN< /button>

< input onchange="funcion(parámetros)">

Mensajes del navegador

Poner una alerta del navegador:

alert("Texto");

El navegador abre una confirmación devolviendo en "var1" true o false:

var1 = confirm("Texto");

El navegador pregunta un valor al usuario y se guarda en "var2"

var2 = prompt("Edad");

Seleccionar un Elemento (getElementby?)

Seleccionar un elemento por ID:

var1 = document.getElementById("ID");

Seleccionar un elemento por su nombre de clase:

var2 = document.getElementsByClassName("CLASE");

Seleccionar todos los elementos que coincidan, Pej.: "h1", "p, div":

const var1 = document.querySelectorAll("BLOQUE");
var1.forEach(elemento => {
    elemento.style.color = "blue";
});

Cambiar un estilo de un objeto (objeto.style.?)

1. Primero seleccionamos el objeto:

var1 = document.getElementById("ID");

2. Luego cambiamos de su estilo una propiedad (Pej.: color, backgroundColor..):

var1.style.propiedad = "valor";

Coger un estilo de un bloque (objeto.getComputedStyle.?)

1. Se cogen todos los estilos del elemento y se coge solo el valor "propiedad":

var3 = window.getComputedStyle(document.getElementById("ID")).propiedad;

Insertar texto en un objeto tipo texto (objeto.innerHTML.?)

1. Primero seleccionamos el objeto:

var1 = document.getElementById("ID");

2. Luego cambiamos de su estilo una propiedad (Pej.: color, backgroundColor..):

var1.innerHTML = "Texto a insertar";

Cambiar el src="" de una imágen (objeto.src)

1. Primero seleccionamos el objeto:

var1 = document.getElementById("ID");

2. Luego cambiamos su propiedad "src":

var1.src = "ruta/imagen.png";

Cambiar el valor de un input (objeto.?)

SI ES DE TIPO TEXTO:

1. Primero seleccionamos el objeto:

var1 = document.getElementById("ID");

2. Luego cambiamos su propiedad "src":

var1.value = "Nuevo valor";

SI ES DE TIPO SELECCIONAR:

1. Primero seleccionamos el objeto:

var1 = document.getElementById("ID");

2. Luego cambiamos su propiedad "checked" a true o false:

var1.checked = true / false;

Reemplazar lo que coincida (texto.replace())

Seleccionamos el objeto y reemplazamos todas las cadenas que coincidan por otras.:

let texto = "palabra1__palabra2__palabra3";
console.log(texto.replace(/__/g, "\n"));

En este caso se reemplza todos los "__" por "\n".