Chuleta de Javascript

Web htmlcheatsheet.com/js

Ejecutar una función al pasar un tiempo

Sintaxis:

setTimeout(función, milisegundos)

Ejemplos con función anónima y con función flecha:

setTimeout(function () { alert('Eureka') }, 3000)

setTimeout(() => alert('Eureka'), 3000) 

Funciones

Declarar y usar la función:

function sumar(a, b) {
    return a + b;
}

x = sumar(2, 5);

Lo mismo con una función flecha:

sum = (a, b) => a + b;

y = sum(3, 8);

DOM

Cambiar el texto de un elemento HTML:

document.getElementById("elementId").innerHTML = "¡Hola Mundo!";

Al usar querySelector el selector es igual que en CSS:

document.querySelector("#elementId").innerHTML = ¡Hola Mundo!";

Obtener un array de todos los párrafos:

var parrafos = document.querySelectorAll('p');

Salida

var v = "Hola";
console.log(v);
document.write(v);
alert(v);
var ok = confirm("¿Un café?");
var respuesta = prompt("¿Edad?", 18);

Bucles

Bucle contador

for (var i=0; i<10; i++) {
    console.log(i + ': ' + i*5);
}

for (var i=0; i<10; i++) {
    console.log(`${i}: ${i*5}`);
}

Bucles para recorrer un array

var a = ['playa', 'montaña', 'caribe'];

for (var i=0; i<a.length; i++) {
    console.log(`${i}: ${a[i]}`);
}

for (var vacaciones of a) {
    console.log(vacaciones);
}

console.log(a.join('\n'));

var html = '<ul>';
for (var vacaciones of a) {
    html += `<li>${vacaciones}</li>`;
    //html += '<li>' + vacaciones + '</li>';
}
html += '</ul>';
console.log(html);

Bucles para recorrer un object

var obj = {
    nombre: "Pepe",
    edad: 40,
    coche: true,
};

for (var clave in obj) {
    console.log(`${clave} es ${obj[clave]}`);
    //console.log(clave + ' es ' + obj[clave]);
}

Objetos predefinidos

1) document es la página web

for (var clave in document) {
    console.log(`${clave} es ${document[clave]}`);
}

2) window es la ventana del navegador

for (var clave in window) {
    console.log(`${clave} es ${window[clave]}`);
}

3) location es la dirección url

for (var clave in location) {
    console.log(`${clave} es ${location[clave]}`);
}

location.href = 'http://sport.es'

4) history es el historial de navegación

history.back()

Bucle while

Imprime el doble del número a cada iteración:

var valor = 1;
while (valor <= 1024) {
    console.log(valor);
    valor *= 2;
}

El siguiente código usa break y continue:

var num = 0;
while (true) {
    console.log(num);
    if (num == 10) break;
    num++;
    if (num % 2 == 0) continue;     
    console.log('impar');
}

La salida sería:

0
impar
1
2
impar
3
4
impar
...
10

Condicional if

Una serie de if encadenados que comprueban rangos de edad:

var edad = prompt('¿Edad?');
if (edad <= 1) {
    alert("Bebé");
} else if (edad >= 1 && edad <= 12) {
    alert("Niño");
} else if (edad >= 12 && edad <= 18) {
    alert("Adolescente");
} else {
    alert("Pureta");
}

Condicional switch

Imprime el día de la semana de hoy:

var date = new Date();
var diaSemana = date.getDay(); 
switch (diaSemana) {
    case 0: console.log('Domingo'); break;
    case 1: console.log('Lunes'); break;
    ...
    case 6: console.log('Sábado'); break;
    default: console.log('Imposible');
}

Variables y sus tipos

var x; // El tipo se conocerá al asignarle un valor
var s = "Texto"; // string
var e = 5000; // Number (integer)
var d = 23.5; // Number (float)
var c = "H" + "o" + "l" + "a"; // string
var n = 2 + 3 + 4 + "5"; // string "95"
var m = "2" + 3 + 4 + 5; // string "2345"
var b = true; // boolean
var b2 = e > 1000; // boolean (true)
var b3 = e >= 1000 && e <= 10000; // boolean (true)
var b4 = s == "Texto" || s == ""; // boolean (false)
var b5 = !(e > 1000); // boolean (false)
var a = [1,2,4,8,16]; // array
var o = {dia:10, mes:5; año:2019}; // object
var re = /4/; // regex (Expresión regular)
const PI = 3.1416; // number 

Valores o literales

Operaciones

Para hacer antes la suma que la multiplicación hay que usar paréntesis. Ejemplo:

const IVA = 21;
var precio = 1200;
var pvp = precio * (1 + IVA/100);

Acceder a propiedades de un object

var persona = {
    nombre: "Pepe",
    edad: 41,
};

Las propiedades son: nombre y edad. Y los valores de cada propiedad son: "Pepe" y 41

console.log(persona.nombre);
console.log(persona.edad);
console.log(persona['nombre']);
console.log(persona['edad']);

for (var propiedad in persona) {
    var valor = persona[propiedad];
    console.log(propiedad + ' es ' + valor);
}

Obtener el tipo de una variable:

var x;
typeof x; // "undefined"
x = 1000;
typeof x; // "number"
x = "Pepe";
typeof x; // "string"

if (typeof x == "string") alert("Es texto");

Igualdad estricta === debe coincidir tanto el valor como el tipo

a = true
a == 1  // true 
a === 1  // false
a === true // true

Dividir un texto en un array

var s = "rojo,verde,azul,amarillo";
var colores = s.split(',');
// ["rojo", "verde", "azul", "amarillo"]

var palabra = "Hola";
var letras = palabra.split('');
// ["H", "o", "l", "a"]

Eventos

Al hacer clic:

<button onclick="pulsar()">Púlsame</button>

Al cargar la página web:

<body onload="principal()">...

Al entrar o salir el ratón en el DIV:

<div onmouseover="entrar()" onmouseout="salir()">

Al mover el ratón:

<div onmousemove="mover()">

Al cambiar el valor:

<input type="text" onchange="cambiar()">

Al pulsar una tecla:

<input type="text" onkeydown="pulsar()">

Al poner el cursor y al sacar el cursor:

<input type="text" onfocus="enfocar()" onblur="desenfocar()">

Al enviar el formulario:

<form onsubmit="enviar()">  

Matemáticas

parseInt("3 meses"); // 3
parseFloat("3.5 días"); // 3.5
parseInt("Hola"); // NaN
parseInt("Manzana 10"); // NaN

Redondear a un número de decimales:

var pi = 3.1416;
pi.toFixed(0)   // 3
pi.toFixed(1)   // 3.1
pi.toFixed(2)   // 3.14
pi.toFixed(3)   // 3.142

Métodos matemáticos:

Math.round(3.14)       // 3
Math.pow(2, 10)        // 1024
Math.sqrt(25)          // 5
Math.abs(-23)          // 23
Math.ceil(3.001)       // 4
Math.floor(3.999)      // 3
Math.min(3, 0, -1, 4)  // -1
Math.max(3, 0, -1, 4)  // 4
Math.random()          // 0.3843956

Generar números de la primitiva:

Math.floor(Math.random()*49) + 1

Generar número aleatorios entre 10 y 15 incluidos:

Math.floor(Math.random()*6) + 10

Proinf.net