Javascript (ECMAScript 6+) Cheat Sheet

192 Visitas 30 minutos Enlace Permanente

Resumen completo de la última versión de Javascript

Resumen completo de la última versión de Javascript

  1. Generalidades

  • Se suele usar dentro del <head> pero también puede ir dentro del <body>:
  • Interno: <script>...</script>
  • Externo: <script src=”archivo.js”></script>

En HTML5 ya no es necesario indicar el type=”text/javascript”, por defecto es JS.

  • Mensajes a mostrar en los navegadores que no admiten Javascript:
    <noscript>Lo sentimos, ...</ noscript>
  • Depuración: para poder usarla, hay que pulsar antes F12 en Chrome/Firefox.
    console.log(“texto”); // Muestra “texto” en la consola del navegador.
    debugger; // Para poder depurar paso a paso.
  • Todas las sentencias llevan al final un punto y coma “;” salvo las funciones.
  • Case Sensitive: Javascript diferencia entre mayúsculas y minúsculas (JS es Unicode).
  • Se declaran sentencias en varias líneas con una barra invertida al final, pero sólo en textos:
    alert(“Esto es \
    un texto en \
    varias líneas.”);
  • Modo Estricto: evita errores, es más seguro. Se pone 'use strict'; al inicio.
  • Módulos:
  • Hay que indicar que una clase es un módulo con:
    export default Clase; // dentro del archivo 'clase.js'.
    export default { foo, bar }; // si hay más de una clase o función a exportar.
  • Se cargan con:
    require("Clase"); // se exige que exista el módulo e importa todo lo que haya definido en él.
    import Clase from "./clase"; // si sólo se quiere importar una cosa.
    import { foo, bar } from "./clase"; // si se quiere importar más de una cosa.
  • Pruebas Online: plnkr.co, jsfiddle.net, jsbin.com

  1. Comentarios

// Comentario de una sola línea.

/* Comentario de varias líneas */

  1. Variables

  • Identificadores: letras, números, guión bajo (_) y arroba (@).
  • Definición:
    var nombre; // sin valor inicial definido, su valor será “undefined”.
    var nombre = valor; // con valor inicial definido.
    var uno, dos, tres; // declaración múltiple de variables, separadas por comas.
    var uno = 1, dos = 2; // declaración múltiple con valor inicial.

let nombre = valor; // variable sólo accesible dentro del bloque. 'var' tiene alcance global.
const nombre = valor; // definición de una constante, nombre no podrá asignarse a otra cosa.

  • Asignar Valor:
    nombre = valor; // si no existía antes y no lleva 'var' delante, será global.
    nombre = valor || “txt”; // Se asigna “txt” si valor es null o undefined.
  • Nulos: si no hay un valor inicial será “undefined”, pero se puede asignar un valor nulo con “null”.
    if(typeof variable !== “undefined” && variable !== null) { … }
  • Tipo de Dato: typeof variable;
  • Simples: String, Number, Boolean, Null, Undefined.
  • Compuestos: Object, Date, Array.

  1. Cadenas de Texto

var texto = “cadena de texto”; // comillas dobles.
var texto = 'cadena de texto'; // comillas simples.
var texto = “cadena con 'comillas simples' dentro”;
var texto = “cadena con carácter de \”escape\” dentro”;
var texto = `interpolación: ${variable}, ${otroDato}`; // Puede ocupar varias líneas sin problema.
var texto = new String(“txt”); // como objeto, pero typeof devuelve 'Object' en vez de 'String' [¡No Usar!]
var letra = texto[indice]; // acceder a una letra, pero mejor usar: charAt(indice);

  1. Propiedades y Métodos

texto.length; // longitud del texto.
texto.indexOf('cadena'); // posición de una cadena dentro de un texto (-1 si no se encuentra).
texto.lastIndexOf('cadena'); // busca desde el final.
texto.charAt(indice); // devuelve el carácter de la posición indicada.
texto.charCodeAt(indice); // devuelve código Unicode del carácter de la posición indicada.
texto.fromCharCode(numero); // devuelve carácter Unicode con el número indicado.
texto.match(regex); // devuelve array con coincidencias de una cadena dentro de un texto.
texto.search(regex); // devuelve posición con la coincidencia de una cadena dentro de un texto.
texto.replace(regex,'nuevo'); // reemplaza una cadena por otra dentro de un texto.
texto.localeCompare('texto', posición); // compara 2 cadenas según el locale actual.
texto.includes('otra'); // si un texto incluye o no otra cadena.
texto.toUpperCase(); // convierte en mayúsculas.
texto.toLowerCase(); // convierte en minúsculas.
texto.toLocaleUpperCase(); // convierte en mayúsculas según locale actual.
texto.toLocaleLowerCase(); // convierte en minúsculas según locale actual.
texto.split('caracter'); // convierte cadena en array, dividiendo según el carácter indicado.
texto.slice(ini,fin); // extrae porción de cadena. fin es opcional. Admite negativos.
texto.substring(ini,fin); // extrae porción de cadena. fin es opcional. No admite negativos.
texto.substr(ini,cant); // extrae porción de cadena indicando posición inicial y cantidad.
texto.startsWith('inicio'); // si el texto comienza con 'inicio'.
texto.endsWith('fin'); // si el texto termina con 'fin'.
texto.trim(); // elimina los espacios en blanco al principio y al final de la cadena.
texto.trimLeft(); // elimina los espacios en blanco al principio de la cadena.
texto.trimRight(); // elimina los espacios en blanco al final de la cadena.
texto.padStart(cantidad, '0'); // rellena con ceros al inicio hasta alcanzar un cantidad de caracteres.
texto.padEnd(cantidad, '0'); // rellena con ceros al final hasta alcanzar un cantidad de caracteres.
texto.concat(cad1,cad2,...); // concatena cadenas al texto.
texto.valueOf(); // convierte un objeto String en un string normal.

  1. Números

var entero = 1;
var decimal = 1.23;
var cientifico = 1.234e–4;
var hexadecimal = 0x12AF;
var octal = 0123;
var infinito = Infinity; // Las divisiones por 0 devuelven este valor.
var negInf = –Infinity;
var numero = new Number(123); // typeof devuelve 'Object' en vez de 'Number' [¡No Usar!]

  1. Propiedades y Métodos

numero.toString(); // Convierte un número en una cadena de texto.
numero.toLocaleString(); // Convierte un número a una cadena de texto según locale actual.
numero.toString(16); // Convierte a base 16 (o cualquier otra base típica).
objeto.valueOf(); // Convierte un objeto en un valor numérico.
numero.toExponential(decimales); // Convierte a notación científica.
numero.toFixed(decimales); // Convierte a notación de punto flotante.
numero.toPrecision(precision); // Indica el número máximo de dígitos a mostrar.

Number.MAX_VALUE;
Number.MIN_VALUE;
Number.MAX_SAFE_INTEGER;
Number.MIN_SAFE_INTEGER;
Number.POSITIVE_INFINITY; // Igual que Infinity.
Number.NEGATIVE_INFINITY; // Igual que –Infinity.
Number.NaN;
Number.EPSILON;

Number.isNaN(variable);
Number.isInteger(variable);
Number.isSafeInteger(variable);

  1. Booleanos

var verdadero = true;
var falso = false;
var booleano = new Boolean(valor); // typeof devuelve 'Object' en vez de 'Boolean' [¡No Usar!]
// Los valores 0, null, "", '', ``, false, undefined, NaN son false; el resto, true.

  1. Arrays

  • Definición:
    var lista = new Array(); // También sirve var lista = [];
    lista[0] = “Primero”;
    lista[1] = “Segundo”;
    lista[2] = “Tercero”;

var lista = new Array(“Primero”, “Segundo”, “Tercero”);

var lista = [“Primero”, “Segundo”, “Tercero”];

  • Acceso y Modificación:
    var segundo = lista[1];
    lista[1] = “Dos”;
  • Propiedades y Métodos:
    lista.length; // longitud del array.
    Array.isArray(lista); // Si la lista es un array o no, equivale a: lista instanceof Array;
    lista.indexOf(elemento,    inicio); // posición de un elemento dentro del array. inicio es opcional.
    lista.lastIndexOf(elemento,inicio); // comienza a buscar por el final.
    lista.concat(array1,array2,...); // concatena varios arrays al actual.
    lista.join(sep); // convierte un array en una cadena de texto.     sep es opcional (coma por defecto).
    lista.pop(); lista.push(elemento); // trata array como pila. Agrega o quita del final.
    lista.shift(); lista.unshift(elemento); // trata array como pila. Agrega o quita del principio.
    lista.reverse(); // da la vuelta a los elementos de un array.
    lista.slice(ini,fin); // extrae elementos de array.     fin es opcional. Admite negativos.
    lista.splice(    ini,cant,nuevo1,nuevo2,...); // elimina y agrega nuevos elementos a la vez.
    lista.sort(); // ordena elementos de un array. Por defecto, alfanumérico y ascendente.
    lista.toString(); // convierte un array en una cadena de texto.
    lista.some(condición); // si algún elemento cumple la condición.
    lista.every(condición); // si todos los elementos cumplen la condición.
    lista.filter(condición); // nueva lista con elementos filtrado    s según una condición.
    lista.find(condición); // busca el primer elemento que cumple condición y lo devuelve.
    lista.findIndex(elemento); // busca primer elemento según condición y devuelve su índice.
    lista.forEach(elemento, índice); // recorre los elementos.
    lista.map(acción); // aplica una acción sobre cada uno de los elementos.
    lista.reduce(acción); // aplica una acción y va combinando elementos hasta devolver un valor final.
    lista.reduceRight(acción); // igual que reduce pero recorre     el array al revés.
    lista.fill(valor, ini, fin); // rellena desde ini hasta fin con un valor.
    lista.copyWithin(lugar, inicio, fin); // copia desde ini hasta fin en el lugar del índice indicado.

  1. Objetos

  • Definición: entre paréntesis, mediante pares nombre : valor separados por comas.
    var persona = {id: 12345, nombre: “José”, apellidos: “García”, andar: function() { … }};
  • Usando 'new':
    var persona = new Object();
    persona.id = 12345;
    persona.nombre = “Jose”;
  • Propiedades:
    var id = persona.id;
    persona.id = valor;
    var id = persona[“id”]; // Similar a persona.id;
    delete persona.id; // Borrar una propiedad.
    for(var a in persona) { … } // Recorrer propiedades de una objecto.
  • Invocar Métodos:
    persona.andar();
  • Prototipos: sirve para extender tipos de objetos existentes con nuevas propiedades y métodos.
    Persona.prototype.propiedad = …;
    Persona.prototype.metodo() { … }
    Persona.prototype.metodo = function() { …}

Si no se indica prototype, se extiende sólo esa instancia:
var uno = new Persona();
uno.propiedad = …;
uno.metodo() { … }
uno.metodo = function() { … }

  • Métodos de Object:
    Object.defineProperty(obj, “prop”, definicion); // agrega una nueva propiedad.
    Object.defineProperties(obj, definiciones); // agrega varias definiciones de propiedades.
    Object.getOwnPropertyDescriptor(obj, prop); // acceder a una propiedad.
    Object.getOwnPropertyNames(obj); // devuelve array con todas las propiedades.
    Object.keys(obj); // devuelve un array con las propiedades que son enumerables.
    Object.getPrototypeOf(obj); // devuelve el prototype del objeto.
    Object.preventExtensions(obj); // evita que se pueden agregar propiedades al objeto.
    Object.isExtensible(object); // indica si se pueden agregar nuevas propiedades al objeto.
    Object.seal(object); // evita cambios en las propiedades del objeto, no en sus valores.
    Object.isSealed(object); // indica si el objeto está sellado, no admite cambios en propiedades.
    Object.freeze(object); // evita cualquier cambio en un objeto.
    Object.isFrozen(object); // indica si el objeto está congelado, no admite ningún cambio.

obj.hasOwnProperty(“prop”); // si no hay definida una propiedad devuelve “undefined”.
obj.propertyIsEnumerable(“prop”); // si la propiedad es enumerable.

Object.defineProperty(obj, “prop”, {
value: “valor”,
writeble: true,
enumerable: false,
configurable: true
});

  • this: apunta siempre a un objeto que depende del contexto de invocación.
  • Global: si la función es llamada sin nada o con “window.” delante, se refiere a window.
  • Objetos: se refiere al propio objeto.
  • Eventos: se refiere al objeto que recibe el evento.
  • call(), apply(), bind(): se puede indicar a quién se refiere con this (parámetro).
  • Forma Flecha (=>): no es el objeto que llama a la función, sino donde está definida.
  • Clases:
    class A extends B {
    constructor(x, y) { super(x); this.x = x; }
    metodo(a, b, c) { … } // No lleva delante ‘function’ (!)
    static metodoEstatico() { … }
    get propiedad() { return this.x; }
    set propiedad(value) { this.x = value; }
    }
    var a = new A(12);
    a.metodo(1, 2, 3);
    A.metodoEstatico();
    a.propiedad = 33;

  1. JSON

  • Definición: pares clave-valor entre llaves, separados por comas. Se usan corchetes para los arrays.
    { “key1”: “txt”, “key2”: 123, “key3”: true, “key4”: {“a”: 1, “b”: 2}, “key5”: [1,2,3]}
  • Métodos:
    JSON.stringify(obj); // convierte objeto JS en una cadena de texto con formato JSON.
    JSON.parse(json); // convierte una cadena de texto con formato JSON en un objeto JS.

  1. Operadores

  • Aritméticos: +, –, *, /, %, ++, – –, ** (exponenciación) // para división entera: Math.trunc(a / b);
  • Asignación: =, +=, –=, *=, /=, %=, **=, &=, |=, ^=, <<=, >>=, >>>=
  • Comparación:
    ==, !=, >, <, >=, <= // No tienen en cuenta el tipo de dato, sólo el valor (null == “undefined”).
    ===, !== // Tienen en cuenta el tipo de dato y el valor (¡recomendado!) (null !==     “undefined”).
  • Lógicos: !, &&, ||
  • Operaciones Bit: &, |, ^, ~, <<, >>, >>>
  • Condicional: (condición) ? valor1 : valor2;
  • Especiales: this, new, in, delete, typeof, instanceof, void, yield
  • Math: objeto para realizar cálculos matemáticos:
  • Propiedades: E, LN2, LN10, LOG2E, LOG10E, PI, SQRT2, SQRT1_2
  • Métodos:
    abs(),ceil(),floor(),max(),min(),round(),trunc(),random()
    exp(),log(),pow(),sqrt(),cbrt() // raíz cúbica.
    sin(),cos(),tan(),asin(),acos(),atan(),atan2(),asinh(),acosh(),atanh()

Math.floor(Math.random() * (max – min)) + min; // Entero aleatorio entre min y max.

  1. Funciones

  • Definición: los parámetros siempre se pasan por referencia.
    function nombre(param1, param2=”defecto”) { …; return valor; }
    var nombreFuncion = function() { …; return valor; }
    var nombreFuncion = new Function('param1','param2','    codigo');
  • Invocación:
    nombreFuncion(1, 2);
    var resultado = nombreFuncion(1, 2);
    (function(x, y) { return x+y; })(2, 3); // Autoinvocación: se define e invoca a la vez.
  • Forma flecha (=>):
    var x = function(x, y) { return x+y; } → var x = (x, y) => x+y; // Más compacto, menos código.
  • Número Variable de Parámetros: sin parámetros, se tratan con arguments.
    function a() { for(var i=0; i < arguments.length; i++){ foo(arguments[i]); }} // a(1); a(1, 2, 3);
  • Clousure: simula el encapsulamiento de las POO, definiendo una función con variables y funciones internas, devolviendo sólo lo que se permita acceder.

const miContador = (function () {
let _contador = 0; // A las variables privadas se les antepone guión bajo.
function incrementar() { return _contador++; }
function decrementar() { return _contador--; }
function valor() { return _contador; }
return { incrementar, decrementar, valor }; // Devolvemos solo lo que sea público.
})(); // Invocamos la función para poderla usar.

miContador.valor(); // 0
miContador.incrementar();
miContador.incrementar();
miContador.valor(); // 2
miContador.decrementar();
miContador.valor(); // 1

  1. Fechas

  • Definición:
    var fecha = new Date(); // Fecha y hora actual.
    var fecha = new Date(año,mes,dia,hora,minutos,segundos,milisegundos);
    var fecha = new Date(“fecha”); // fecha en formato de cadena de texto.
    Date.parse(“fecha”); // Convertir texto con fecha en fecha.
    // El formato oficial es el ISO: “YYYY–MM–DD    THH:mm:ss.sssZ”
    // Z se refiere a UTC, pero se puede indicar zonas horarias con +0200 o con –0600.
  • Métodos: los meses y los días de la semana empiezan en cero (meses: 0–11, días semana: 0–7).
    getFullYear(), getMonth(), getDate(), getDay() // día de la semana.
    getTime(), getHours(), getMinutes(), getSeconds(), getMilliseconds()
    setFullYear(), setMonth(), setDate()
    setTime(), setHours(), setMinutes(), setSeconds(), setMilliseconds()
    toDateString(),toTimeString(),toISOString(),toUTCString(),toJSON()
    toLocaleString(), toLocaleDateString(), toLocalTimeString()
  • Librerías: datejs.com, momentjs.com.

  1. Condicionales

if(condicion) { … } else if(condicion) { … } else { … }
switch(valor) { case 1: …; break; case 2: …; break; … default: … } // comparación estricta con ===.

  1. Bucles

for(var i = 0; i < maximo; i++) { … } // admite break; y continue;
for(var x in objeto) { var valor = lista[x]; } // recorre propiedades de un objeto.
for(var x of lista) { var valor = lista[x]; } // recorre elementos de un enumerable (ej. array).
while(condicion) { … }
do { … } while(condicion);

  1. Excepciones

try { … throw “error”; ... } catch(err) { var tipo = err.name; var msg = err.message; alert(err); }
// Tipos de Error: RangeError, ReferenceError, SyntaxError, TypeError, URIError.
throw { tipo: “tipo”, codigo: 123, mensaje:”error” } // Errores personalizados.

  1. Expresiones Regulares

  • Declaración:
    var regex = new RegEx(patrón, modificadores);
    var     regex = /patrón/modificadores; // No hace falta comillas (!)
  • Modificadores:
    i // case sensitive, no diferencia entre mayúsculas y minúsculas.
    g // global, no para en la primera coincidencia sino que busca todas y devuelve array.
    m // multiline, realiza búsquedas en varias líneas.
  • Métodos:
    regex.test(texto); // comprueba patrón sobre texto indicado (true, false).
    regex.exec(texto); // comprueba patrón sobre texto indicado (null, elemento).
    texto.match(regex);
    texto.search(regex);
    texto.replace(regex, nuevo);

  1. Métodos Globales

encodeURI(), decodeURI(), encodeURIComponent(), decodeURIComponent() // Tratar URLs.
eval(“código”); // evalúa un código y lo ejecuta. ¡Evitar!
Number(objeto), String(objeto) // convierte objetos en números y cadenas de texto.
parseInt(cadena), parseFloat(cadena) // convierte cadenas de texto a números.
isFinite(numero), isNaN(número) // indica si un número es legal o ilegal.

  1. ECMAScript 6+

ECMAScript 6 (2015) es el estándar actual de Javascript.

https://github.com/lukehoban/es6features (resumen de características).

  1. DOM: Document Object Model

  1. Document

  • Encontrar Elementos:
    getElementById('id'), getElementsByTagName('elemento'), getElementsByClassName('clase'), getElementsByName('nombre'), querySelector('elem.atrib'), querySelectorAll('elem.atrib').
  • Crear Elementos:
    createElement('elemento'), createAtribute('atributo'), createTextNode('texto'), createComment('comentario'), createDocumentFragment('html').
    importNode(nodo, true), adoptNode(nodo).
    renameNode(nodo, null, “nuevo”); // 2º parámetro: namespaceURI.
    normalize(),     normalizeDocument(). // Quita nodos de texto vacíos y une nodos adyacentes.
    open() close(), write('html'), writeln('línea'), hasFocus(), execCommand(), fullscreenEnabled().
  • Propiedades del Documento:
    body, head, title, characterSet, cookie.
    anchors, applets, embeds, forms, images, links, scripts.
    domain, URL, baseURI, documentURI.
    doctype, documentMode, inputEncoding, lastModified, readyState, referrer    .
    activeElement, documentElement (html), fullscreenElement, defaultView, designMode.
    domConfig, implementation, strictErrorChecking.

  1. Element

  • Propiedades:
    innerHTML, innerText, attributes, <atributo>, tagName, className, classList, style, <evento>, textContent, tabIndex, ownerDocument, isDefaultNamespace(), isSupported().
  • Nodos:
    parentNode, parentElement, childNodes, children, firstChild, firstElementChild, lastChild, lastElementChild, nextSibling, nextElementSibling, previousSibling, previousElementSibling, childElementCount, hasChildNodes().
    nodeName, nodeValue, nodeType.
    Listas de Elementos: length, item().
  • Modificar Nodos:
    appendChild(contenido), remove() removeChild(contenido), replaceChild(contenido, hijo), insertBefore(contenido, hijo), cloneNode(true), normalize(), contentEditable, isContentEditable, insertAdjacentElement(), insertAdjacentHTML(), insertAdjacentText().
  • Atributos:
    hasAttribute('atributo'), hasAttributes(atributos).
    var valor = getAttribute('atributo'), var nodo = getAttributeNode('atributo').
    setAttribute('atributo', 'valor'), var nodo = setAttributeNode(atributo).
    removeAttribute('atributo'), var atributo = removeAttributeNode(atributo).
    Propiedades de Nodo Atributo: isId, name, value, specified.
    Lista de Nodos Atributo: length, item(), getNamedItem(), setNamedItem(), removeNamedItem().
  • Posicionamiento:
    clientWidth, clientHeight, offsetWidth, offsetHeight, offsetTop, offsetLeft, offsetParent.
    scrollWidth, scrollHeight, scrollTop, scrollLeft, scrollIntoView().
    c    ompareDocumentPosition(), isEqualNode(), isSameNode().
    requestFullscreen(), exitFullscreen(), getBoundingClientRect().

  1. Eventos

  • Métodos:
    addEventListener(“evento”, manejadorEvento), removeEventListener(“evento”, manejadorEvento).
    function manejadorEvento(e) { e.preventDefault(); console.log(e); }
    Propiedades: e.target, e.data
    Métodos: e.preventDefault(), e.stopPropagation()
  • Ratón:
    onclick, ondblclick, onmousedown, onmouseup, onmousemove, onmouseover, onmouseout, onmouseenter, onmouseleave, oncontextmenu, onwheel.
    ondrag, ondrop, ondragstart, ondragend, ondragenter, ondragleave, ondragover.
    ontouchstart, ontouchend, ontouchmove, ontouchcancel.
    Propiedades: button, clientX, clientY, screenX, screenY.
  • Teclado:
    onkeydown, onkeyup, onkeypress.
    Propiedades: altKey, ctrlKey, metaKey, shiftKey, keyIdentifier, keyLocation.
  • Documento:
    onload, onunload, onbeforeunload, onscroll, onresize, onerror, onabort, oncopy, onpaste, oncut, onpagehide, onpageshow, onpopstate, onstorage, onfullscreenchange, onfullscreenerror, oninvalid, onhashchange, onoffline, ononline, onshow, ontoggle, onopen, onmessage, onafterprint, beforeprint.
  • Formulario:
    onsubmit, onreset, onfocus, onfocusin, onfocusout, onblur, onchange, onselect, oninput, onsearch.
  • Media:
    onplay, onplaying, onpause, onended, onwaiting, onseeked, onseeking, onsuspend.
    onloadstart, onloadedmetadata, onloadeddata, onprogress, onstalled, ontimeupdate.
    oncanplay, oncanplaythrough, ondurationchange, onratechange, onvolumechange.
  • Animaciones:
    animationstart, animationend, animationiteration, transitionend.
  1. Patrón PubSub:
    const pubsub = (function () {
    const suscriptores = {}; // Cola de eventos (clave: evento; valor: lista de funciones suscritas al evento)
    function subscribe(event, callback) {
    if(!suscriptores[event]) { sucriptores[event] = [callback]; } else { suscriptores[event].push(callback); }
    }
    function publish(event) {
    if(suscriptores[event]) { suscriptores[event].forEach(function (callback) { callback(); }); }
    }
    return { publish, subscribe };
    })();
  2. pubsub.subscribe("unEvento", function(e) { console.log("unEvento ha sido lanzado."); });
    pubsub.publish("unEvento");
  3. const pubsub = (function () {
    const suscriptores = {}; // Cola de eventos (clave: evento; valor: lista de funciones suscritas al evento).
    function EventObjects() {} // Datos asociados al evento.
    function subscribe(event, callback) {
    if(!suscriptores[event]) { sucriptores[event] = [callback]; } else { suscriptores[event].push(callback); }
    }
    function publish(event, data) {
    const eventObject = new EventObject();
    eventObject.type = event;
    if(data) { eventObject.data = data; }
    if(suscriptores[event]) { suscriptores[event].forEach(function (callback) { callback(eventObject); }); }
    }
    return { publish, subscribe };
    })();
  4. pubsub.subscribe("unEvento", function(e) { console.log(e.data.unosDatos); });
    pubsub.publish("unEvento", { unosDatos: "Datos a pasar al evento" });

  5. Console

  • Métodos:
    log(), assert(), error(), info(), trace(), warn()
    time(), timeEnd()
    group(), groupCollapsed(), groupEnd(), table()
    clear(), count()

  1. BOM: Browser Object Model

  1. Window

  • Manejo de Ventanas:
    name, status, defaultStatus, frames, frameElement, length, opener, parent, top, self, closed.
    document, navigator, location,     history [length, back(), forward(), go()], screen [availableWidth, availableHeight, colorDepth, pixelDepth, width, height], console.
    open(), close(), focus(), blur(), print(), stop(), getComputedStyle().
  • Tamaño y Posición:
    innerWidth, innerHeight, outerWidth, outerHeight, pageXOffset, pageYOffset.
    screenX, screenY, screenTop, screenLeft, scrollX, scrollY.
    moveTo(), moveBy(), resizeTo(), resizeBy(), scrollTo(), scrollBy(), getSelection().
  • Cajas:
    alert(), confirm(), prompt().
  • Eventos de Tiempo:
    setInterval(), setTimeout(), clearInterval(), clearTimeout().
    matchMedia(), requestAnimationFrame().
  • Datos:
    localStorage, sessionStorage, atob(), btoa().
    Propiedades: length, key(), getItem(), setItem(), removeItem(), clear().

  1. Navigator

appCodeName, appName, appVersion, cookieEnabled, language, onLine, platform, product, userAgent.
geolocalitation [coordinates, position, getCurrentPosition(), watchPosition(), clearWatch()]
javaEnabled(), taintEnabled().

  1. Location

href, host, hostname, pathname, port, protocol, hash, origin, search.
assign(), reload(), replace().

  1. AJAX y Comunicaciones

  1. XMLHttpRequest

readyState, status, statusText, responseText, responseXML, onreadystatechange.
open(method, url, async, user, psw), send() [GET], send(string) [POST], abort(),
setRequestHeader(), getResponseHeader(), getAllResponseHeaders().

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { const json = JSON.parse(this.responseText); }
};

  1. GET

xhttp.open("GET", "https://servidor.com/api/endpoint", true); // Siempre asíncrono (!)
xhttp.send();

  1. POST

xhttp.open("POST", "ajax_test.asp", true); // Siempre asíncrono (!)
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("https://servidor.com/api/endpoint");

  1. Fetch

const uri = "https://servidor.com/api/endpoint";
fech(uri)
.then((response) => { return response.json(); })
.then((datos) => { … });

const cabeceras = new Header();
cabeceras.append("Content-Type", "application/json");
fetch(uri, { method: "GET", headers: cabeceras, mode: "cors", cache: "default"})
.then((response) => { return response.json()})
.then((datos) => { … });

  1. WebSockets

const socket = io.connect("http://localhost:8080", { forceNew: true }); // Hace uso de la librería socket.io
socket.on("messages", function (data) { console.log(data); render(data); })
function render(data) { data.map(function (elem, index) { console.log(`${elem.author}: ${elem.text}`); }).join(" "); }
function addMessage(e) {
const message = { author: "autor", text: "texto" };
socket.emit("new-message", message);
return false;
}

  1. Promesas

function cargaRecursoExterno() {
const promesa = new Promise(function (resolve, reject)) { try { resolve(); } catch { reject(new Error("error")); } };
}

const promesa = cargaRecursoExterno();
promesa.then(function () { console.log("Recurso externo cargado"); });
promesa.catch(function (err) { console.log(err); });

cargaRecursoExterno()
.then(() => console.log("Hecho"))
.catch((err) => console.log(err));