Introducción

El JavaScript se escribe entre <script> </script> en un fichero html

Los comandos acaban con ; opcional

Fichero externo

Usa rutas relativas

<script src="js/main.js"></script>

Comentarios

//De línea

/*
De bloque
*/

Salida por pantalla

Mostrar algo en pantalla normal

No hay que utilizar document.write porque sobreescribe lo que hay en pantalla sino que
hay que modificar el innerHTM del nodo.

document.write("Hola Mundo");

ALERT

<script>
alert('Hola Mundo');
</script>

Consola log

En Chrome se muestra en F12 / Console

console.log(variable);

DOM
<script>
document.querySelector("body").innerHTML = "Hola mundo";
</script>

INPUT Solicitar valor PROMPT

Devuelve un string
valorIntroducido = prompt(“mensaje”, “valor por defecto”);

Variables

No es necesario declarar tipos

Definición

Nombres

Nombre empieza con letra, $ o _

No pueden tener espacios ni símbolos extraños.

Casesensitive

var

No requiere la definición pero se recomienda

var y = 6;
var z = x + y;

var carName;

let

Se diferencia de var en el scope.

let variables declaradas para el alcance de un bloque {}

var variables declaradas para el alcance de una función.

Fuera de los bloques de condicionales, bucles, … se comportan igual.

Asignación =

carName = "Volvo";

Ámbito Scope

Globales: funciones declaradas fuera de las funciones con var

Locales: Declaradas en una función con var

Si en una función no pongo var se declara como global

Globales pertenecen a window y su valor permanece hasta que cierro la ventana

En funciones anidadas puedo acceder a todas las variables que están declaradas por
encima.

Ver closures

window

window es un scope total. Todo lo que asignamos a window tiene acceso desde
cualquier parte desde la misma ventana

Constantes

Se declaran con const

Const a=1;

Números

Decimal .

Operaciones numéricas

()

* /

+ -

% modulo

Operadores unarios

a+=10 a=a+10

a-=5; a=a-5

a*=3; a=a*3

a/=2; a=a/2

a%4; a=a%4

a++; a=a+1

a--; a=a-1

Otras operaciones
NO ES NUMERO

Number.isNaN(42) === false

Number.isNaN(NaN) === true
ES FINITO
Number.isFinite(Infinity) === false
Number.isFinite(-Infinity) === false
Number.isFinite(NaN) === false
Number.isFinite(123) === true

ES ENTERO

Number.isSafeInteger(42) === true

Number.isSafeInteger(9007199254740992) === false

TRUNCAR Math.trunc(42.7) // 42

SIGNO Math.sign(-7) //-1 Math.sign(-0) //-0

Comparaciones con decimales EPSILON

EPSILON es un número muy pequeño para substituirlo por el 0.

console.log(0.1 + 0.2 === 0.3) // false

console.log(Math.abs((0.1 + 0.2) - 0.3) < Number.EPSILON) // true

Cambio de tipo

parseInt( variable ) Quita los decimales

Octales

Empiezo por 0

//octales 0-7
var octal = 0546377;

Si lo muestro por pantalla me lo traduce a decimal.

Hexadecimal

Empieza con 0x

//hexademinales 0-9 y a-f

var rojo = 0xff;

Si lo muestro por pantalla me lo traduce a decimal.

typeof / null / undefined

typeof variable;
Si no está declarada

if ( typeof variable == “undefined” {

null es ausencia de valor.

undefined se devuelve cuando la variable no está definida

Se cumple que null == undefined, pero no null === undefined

Strings

Los strings son arrays de caracteres

Operaciones

CONCATENEACIÓN: + cadena1 + cadena2

LONGITUD: cadena.length //No es un método, es una propiedad y va sin paréntesis.

MAYÚSCULAS: cadena.toUpperCase()

MINÚSCULAS: cadena.toLowerCase()

ACCESO A UN CARÁCTER: cadena[3] accede al carácter 4. Cuanta desde cero

cadena.charAt(3) -> hace lo mismo

BUSCAR EN CADENA cadena.indexOf(“Rafa”) -> indica si “Rafa” está incluido en

la variable cadena. Si no está devuelve -1. Si lo encuentra devuelve la posición dela
primera coincidencia (0 la primera). Casesensitive. Cadena.indexOf(valorBusqueda[,
indiceDesde] )

cadena.startsWith(“ola”);
console.log(cadena.startsWith("ola",1)); //Empiezo por el carácter 1
cadena.endsWith(“ola”);
cadena.includes(“ola”);
cadena.includes(“ola”, 2); //Desde la posición 2

PARTIR LA CADENA: cadena.slice(start, stop);

cadena.substr (start, stop)

Si start=stop devuelve una cadena vacía

Si omito stop extrae hasta el final

Si sobrepaso el length extrae hasta el final

Con substr:

 Si start> stop, la subcadena intercambiará esos 2 argumentos

 Si alguno de los argumentos es negativo o es NaN, se trata como si fuera 0.

Con slice:

 Si start> stop, slice () NO intercambiará los 2 argumentos.

 Si start es negativo: establece char desde el final de la cadena
 Si stop es negativo: establece stop en: string.length - Math.abs (stop) (valor
original).

REEMPLAZAR: cadena.replace(“U”, “A”);

REPETIR: cadena.repeat(3);

Recorrer una cadena

for (i=0; i<cadena.legth; i++) {

var caracter = cadena.charAt(i);
}

Conversión

isNaN() indica si lo que introducimos en un número

Number() permite convertir una cadena a número

<script>
//usamos el + como suma
var num1 = 6;
var num2 = 6;
console.log(num1+num2); //12 Con dos números + es suma

var num1 = "6";

var num2 = "6";
console.log(num1+num2); //66 Con strings + concatena

var num1 = 6;
var num2 = "6";
console.log(num1+num2); //66 Con que tenga un string lo pasa todo a string y
concatena

var num1 = Number("6");

var num2 = 6;
console.log(num1+num2); //12 Serán dos números

var num1 = Number("seis");

var num2 = 6;
var tot = num1+num2;
console.log(tot); //NaN

if (isNaN(tot)) {
 console.log("Error: El total no es numérico");
} else {
console.log("El total es:",tot);
}
</script>

Secuencias de escape

\n salto de línea

\r retorno de carro

\t tabulador

\\ carácter \

\’ comilla simple

\” comilla doble

\b carácter anterior

\f salto de página

String Templates

Plantillas de texto que intercalan variables o una función sin concatenar

Reconocen espacios y cambios de línea

Se definen con comilla invertida

var template = `Hola mundo`;

Se interpola con ${} variables o funciones o cualquier expresión que retorne algo.

function nombre() {
return 'Rafa';
}

var saludo = `Hola ${nombre()} buenos días`;

Tagged templates

Permite tener los valoressustituidos y un array de cadenas fijas.

Solo devuelve un valor por cómo se pasan los argumentos

function tagged(cadenas, valores) {
console.log(cadenas);
console.log(valores);
}

tagged`Hola ${'Rafa'} Saludos `

Devuelve

Array [ "Hola ", " Saludos " ] 8

Rafa

Booleanas

true o false

Symbol

Los símbolos son únicos e inmutables y son utilizados como identificadores para
propiedades de objetos.

Pueden tener una descripción opcional para fines de depuración. Cada símbolo tiene
asignado una cadena o undefined que sirve como descripción del símbolo.

Lo que les identifica es el nombre y no la despripción. Puede repetirse la descripción:

var sim2 = Symbol("foo");

var sim3 = Symbol("foo");

El constructor del Symol no debe ser usado con el operador new

var sim1 = Symbol(); //Sin new

Tampoco debe ser extendido mediante clases

Arrays

Primer índice 0

No tienen tipo

Hay arrays por referencia (clave no es un número)

Definir

var días = new Array();

var array1 = [];
Acceder

Empieza en el 0

Son objetos

array[4];

Rellenar / populate

días[0] = “Domingo”;

días.push(“Lunes”, “martes”); //Introduce un elemento al final del array

días.unshift(“Lunes”); //Introduce un elemento al inicio del array

array.splice(índice, 0, elementos s añadir separados por coma)

Extraer / Eliminar

array.pop(); // Extrae el último elemento del array

array.shift(); // Extrae el primer elemento del array

array.splice(índice, nº de elementos a eliminar)

Spread – espander

Se pone con 3 puntos … y sustituye por los valores de un array

let cde = [‘c’, ‘d’, ‘e’];

let abc = [‘a’, ‘b’, …cde, ‘f’, ‘g’] // let abc = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’, ‘g’]

Iteracion

for (elemento in array) {array[elemento]}

Cada elemento es la clave del array.

for (var i = 0; i < jugadores.length; i++) {jugadores[i]}

Funciones

array1.length;

array1.push(elemento); agrega al final

pop elimina el último elemento

unshift lo agrega al principio,

shift elimina el último con barca.

FIND console.log([ 1, 3, 4, 2 ].find(x => x > 3));// 4

FINDINDEX console.log([ 1, 3, 4, 2 ].findIndex(x => x > 3)); // 2

string.split(‘,’)  Divide en array en un striking con separador ,

array1.join(“separador”) devuelve un string de un array.

Ordenar

array.sort(); //Oredena números alfabéticamente.

array.reverse() //Ordena en orden inverso

Concatenar elementos de un array en un string

array.join(“ * “); ///Separador *

Filter

Se aplica a un array. Se le pasa como parámetro una función (que devuelve un

booleano) y devuelve otro array con los elementos del array que al pasarlos como
parámetro a la función devuelve true.

array.filter(function(currentValue, index, arr), thisValue)

currentValue Required. The value of the current element

index Optional. The array index of the current element

arr Optional. The array object the current element belongs to

thisValue Optional. A value to be passed to the function to be used as its "this"

value. If this parameter is empty, the value "undefined" will be passed as its "this"
value.

Escribiendo la función

var numeros = [10, 2, 3, 5, 9, 20, 22];

var numeros_pares = numeros.filter(function (numero) { return numero %
2 === 0 });

Con función externa:

var ages = [32, 33, 16, 40, 18, 5];
function checkAdult(age) {
return age >= 18;
}

var adults = ages.filter(checkAdult);

map

Se aplica a un array. Se le pasa como parámetro una función y devuelve otro array con
los resultados de aplicar la función a los elementos del array original.

array.map(function(currentValue, index, arr), thisValue)

// array con la raiz cuadrada de los elementos de un array

var numeros = [4, 9, 16, 25];
var raiz = numeros.map(Math.sqrt);

foreach

Ejecuta una función que se le pasa como parámetro.

array.forEach(function(currentValue, index, arr), thisValue)

var numeros = [4, 9, 16, 25];

numeros.forEach(imprimeArray);

function imprimeArray(numero) {
console.log(numero);
}

Otro

numeros.forEach(function (numero, indice, array) {

console.log(numero);
console.log(indice);
console.log(array);
console.log('***************');
})

reduce

Reduce un array a un único valor. Ejecuta una función (que se pasa como parámetro) a
todos los elementos del array (de izquierda a derecha) y acumula el resultado.

array.reduce(function(total, currentValue, currentIndex, arr),

initialValue)

initialValue permite añadir un valor inicial

var letras = ['H', 'o', 'l', 'a'];

var palabra = letras.reduce(function (totalAnterior, valorActual,

index, array) {
return totalAnterior + valorActual;
});

var numeros = [2,5,7];

var suma = numeros.reduce(function (totalAnterior, valorActual, index,

array) {
return totalAnterior + valorActual;
});

Otro

var numeros2 = [1,2,3];

function sumar(total, numero) {

return total + numero;
}

var sumaTotal = numeros2.reduce(sumar); // 6

Pasar copia de array truco

Al pasar un array paso una referencia.

Si quiero pasar una copia puedo hacer un map que recorra todos los elementos y
devuelva una copia de cada elemento.

var copiaArray = array.map(function (elemento) { return elemento; });

Objeto Math
Métodos cálculo

abs(n)

exp(n)

log(n)

pow(x,y) Math.pow(2,2); -> 2^2

sqrt(n)

random() Aleatorio entre 0 y 0,99999999999999

Math.floor(Math.random()*10); //Número entero entra 0 y 9

 var numeroAleatorio = parseInt(Math.random() * (numeroMaximo - numeroMinimo) +
numeroMinimo);

max(x,y)

min(x,y)

SIGNO Math.sign(-7) //-1 Math.sign(-0) //-0

Métodos redondeo

ceil(n)

floor(n)

round(n) -> Al entero más cercano

trunc(n)  Se queda con la parte entera // Como floor

Métodos trigonometría

cos(n)

acos(n)

sin(n)

asin(n)

tan(n)

atan(n)

Constantes

PI

LN2

LN10

LOG2E

LOG10E

SQRT2

SQRT1_2: Raíz cuadrada de 0.5

Objeto Date

Milisegundos desde 1/1/1970 0:00:00

Enero es el mes 0 y diciembre el mes 11

Domingo 0

Métodos

hoy = new Date(); //Crea un objeto con la fecha de hoy

var dias = new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado");

//
var meses = new Array("Enero", "Febrero", "Marzo", Abril", "Mayo", "Junio", "Julio", "Agosto",
"Septiembre", "Octubre", "Noviembre", "Diciembre");

Get

Tom valor del sistema. Mejor tomarla del servidor con PHP.

getDate() : Devuelve el día del mes actual

getDay() : Devuelve el día de la semana actual

getHours() : Devuelve la hora actual

getMinutes: Devuelve los minutos actuales

getSecond(): Devuelve los segundos actuales

getMilliseconds()

getTime() : Devuelve la hora actual

getTimeZoneoffset(): Devuelve la diferencia en minutos entre la hora actual y la GTM

getMonth() Devuelve el mes actual

getYear(): Devuelve el año actual

getFullYear()

set

Cambia valores al objeto

setDate(valor) : Establece el día del mes actual

setHours() : Establece la hora actual

setMinutes: Establece los minutos actuales

setSecond():Establece los segundos actuales

getTimeZoneoffset():Establece la diferencia en minutos entre la hora actual y la GTM

setMonth()Establece el mes actual

setYear():Establece el año actual

Objetos

Acceso a métodos y propiedades con .

Objetos JS

Los objetos de JS son navigator, document, window y history. Window se puede omitir.

document.write("Hola Mundo");

Creación de objetos

Se pueden crear con new Object o al vuelo con {}

//objeto
var alumno = new Object();

//poblar un objeto
alumno.nombre = "Pedro";
alumno.apellido = "Picapiedra";
alumno.edad = 40;
alumno.empleado = "Montacargas";
//asignamos un arreglo
alumno.calificaciones = [7,8,9,6,7,8,9];
//asignar un objeto
alumno.direccion = {calle:"Rocadura", num:99, ciudad:"Rocapulco"};
//Creación de objeto al vuelo

document.write("Nombre del alumno: "+alumno.nombre+"

"+alumno.apellido+"<br>");
document.write("Primera calificación: : "+alumno.calificaciones[0]+"<br>");
document.write("Dirección: : "+alumno.direccion.calle+",
"+alumno.direccion.num+"<br>");

Sintaxis corta cuando la variable a asignar se llama igual en el objeto

var x = 10, y = 20;

//Antes:
 obj = {x:x, y:y}

//Ahora:
obj = { x, y }

console.log(obj.x, obj.y)

Nombre de Propiedad calculado

Podemos calcular el nombre de la propiedad

let obj = {
foo: "bar",
[ "id" + num() ]: 4
}
console.log(obj);
//
function num(){
return Math.floor(Math.random()*10);
}

Métodos

Ahora se puede hacer sin poner function

obj = {
suma (a, b) { return a+b }, // suma: function (a,b) {return a+b}
multiplica (x, y) { return x*y },
*num (x, y) { }
}
console.log(obj.suma(10,3));
console.log(obj.multiplica(10,3));

Spread – espander

Se pone con 3 puntos … y sustituye por los valores de un objeto

let mapABC = {a: 5, b;6, c: 3};

let mapABCD = {…mapABD, d: 7}; // let mapABCD = { a: 5, b;6, c: 3, d: 7}

Método assign

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Obj
ect/assign

Al igualar objetos se pasan por referencia (están relacionados). Assign pasa los
parámetros

var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
 var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }

En el primer parámetro recaen todos los valores. Se guardan en cascada. O2 sobrescribe

o1 y o3 sobrescribe o2 si repiten clave.

El primer parámetro suele ponerse vacío {}

var obj = { a: 1 };
var copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

Object.assign(objetivo, ...fuentes)

objetivo
El objeto destino.

fuentes
Los objetos origen.

Valor devuelto
El objeto destino.

Las propiedades en el objeto destino serán sobrescritas por las propiedades en las fuentes
si tienen la misma clave. Propiedades posteriores de las fuentes podrán sobrescribir las
anteriores.

Conjuntos Set

No aceptan duplicados

Búsquedas eficientes con gran volumen de información. No guardan los elementos

ordenados por un índice.

//Sets
var s = new Set();
//Añade 3 elementos, cadena1 se repite
s.add("cadena1").add("cadena2").add("cadena1");
//El tamaño es 2
console.log(s.size); // 2
//EL conjunto no tiene la cadena hola
console.log(s.has("hola")); // false
//EL conjunto tiene la cadena cadena1
console.log(s.has("cadena1")); // true

Mapas Map

Conjuntos de datos key-value

Búsquedas eficientes con gran volumen de información. No guardan los elementos
ordenados por un índice.

//Maps
var m = new Map();
//Añade la llave "hola" con el valor 42
m.set("hola",42);
//Añade la llave "a" con el valor 34
m.set("a",34);
// Obtiene el valor asociado a la llave
console.log(m.get("a")); // 34
console.log(m.get("hola")); // 42

Condicionales

If – else

if (condición) {
} else if(condición) {
} else {
}

Switch - case – break

switch(variable) {
case valor1:
case valor2:
//Instrucciones
break;
******
default:
//Instrucciones
}

Operadores lógicos

or ||

and &&

Operadores de comparación

== igualdad

=== igualdad estricta (incluye tipos)

!= diferente

!== diferente estricto (incluye tipos)

!
> >=

< <=

Operador condicional o ternario

(opción)?verdadera:falsa;

Equivalente a:

if(opción) {
verdadera
} else {
Falsa
}

Bucles - Ciclos

while

while (condición) {
//Poner instrucción que haga que la condición sea falsa en algún momento
}

Do – while

Se ejecuta al menos una vez.

do {
//Poner instrucción que haga que la condición sea falsa en algún momento
} while (condición);

for

for (inicialización; condición; incremento) {

}

for(in) Objetos y arrays

continue

Pasa a la siguiente iteración.

break

Rompe la ejecución del bucle y sigue en la instrucción siguiente.

Funciones

Crear funciones

Las funciones son objetos

Solo podemos devolver un valor.

Podemos dar un valor por defecto a los parámetros (incluso dar un valor de una función
que se ejecuta si no se pasa el parámetro.

<script>
function esPar(numero=2)
{
if(numero % 2 == 0 )
{
return true;
}
return false;
}

document.querySelector("body").innerHTML = esPar(6);
</script>

NO MODIFICAR VARIABLES GLOBALES DENTRO DE UNA FUNCIÓN.

PIEDO MODULARIDAD. Siempre usar var dentro de las funciones

Llamar a la función fat arrow desde otra función

setTimeout(()=>alert(“Hola”),1000); //parece la ventana en un segundo

Invocar funciones

La invocamos con su nombre y los paréntesis con los parámetros, aunque no lleve
parámetros.

No da error si no paso todos los parámetros.

esPar(5);

Funciones autoejecutables

Poner en PHPStorm (func y autocompletar. Poner al final (); para que funcione.

(function () {
console.log('Rafa');
})();

Arrow Functions – Funciones sin nombre

La mayor utitlidad es que heredan el scope del padre

Sustituye a la palabra function por una flecha =>

(parámetros) => { instrucciones, }

Si hay un parámetro se pueden eliminar los paréntesis.

Si hay una instrucción de pueden eliminar las {}

Si solo tiene un return se puede eliminar la palabra. Se devuelve lo que hay detrás de la
flecha.

Asigno la función a una variable o sustituye a una variable

var x = (a,b) => a+b;

Es equivalente a:

var x = function(a, b) {
return a+b;
}

Con varias líneas de código

var x = ()=>{ a = “Hola”; b=”Pedro”; alert(a+” “+b)}

x();

var numeros = [1,2,3,4,5];

//Quiero obtener el cuadrado

//Con function
var cuadrados = numeros.map(function (numero) { return numero*numero;
});
console.log(cuadrados);

//Arrow function sustituye a la palabra function

//Quito functoin y pogo detrás una flecha =>
var cuadrados2 = numeros.map( (numero) => { return numero*numero; });
console.log(cuadrados2);
var cuadrado3 = numeros.map(numero => numero * numero);

Las arrow functions heredan el scope del padre

//De esta forma no cambia el name porque el this de la segunda función

es window y no Tutor
function Tutor() {
this.nombre = "Uriel";

setTimeout(function () {
this.nombre = 'nombre nuevo';
},500);
}
//Para poder acceder al atributo del padre
function Tutor() {
this.nombre = "Uriel";
var self = this;

setTimeout(function () {
self.nombre = 'nombre nuevo';
},500);
}
//Con arrow functions hereda el scope del padre
function Tutor() {
this.nombre = "Uriel";

setTimeout( () => {
this.nombre = 'nombre nuevo';
},500);
}

Funciones Generadoras

Son un tipo especial de función que devuelve una serie de valores con un algoritmo
definido por el usuario. Para definir series como cuadrados, serie de fibonnacci, …

Contiene una o más expresiones yield en vez del return y se declara con function*

Yield devuelve e valor pero guarda el estado, status, de las variables de la función. La
próxima vez que llamo a la función sigue con el valor siguiente.

Para llamar a un generador asignamos a una variable el resultado de la función y

llamamos al método next() que devuelve un objeto con la propiedad value.

Rangos

Rango con incremento

<script>
function* rango (inicio, fin, incremento)
{
while (inicio<fin) {
yield inicio;
inicio+=incremento;
}
}

for( let i of rango(0, 10, 2)) {

console.log(i) //0,2,4,6,8
}
</script>

Serie

Cuadrados

<script>
function* cuadrados ()
{
 var n= 1; //Empieza por el 1
while (true) { //Bucle sin fin
var c = n * n; //Calcula el cuadrado
n++; //Incrementa para la próxima iteración
yield c; //Devuelve el valor actual
}
}

var gen = cuadrados();

console.log(gen); //"suspended"
console.log(gen.next().value); // 1
console.log(gen.next().value); // 4
console.log(gen.next().value); // 9
console.log(gen.next().value); // 16
console.log(gen); //"suspended"
</script>

Spread – espander

Permite pasar los parámetros en un arreglo. Se llama con 3 puntos …

const suma = (a,b) => a+b; //Crea función con arrow

let nums = [3,5]; // Creo un rray
suma(…nums); // Con .. hago el spread que es equivalente a suma(nums[0], nums[1])

Otro ejemplo que permite pasar un número indeterminado de parámetros.

function fun1(…números) {
console.log(números.length);
}
fun1(); // 0
fun1(5); // 1
fun1(5,6,7) // 3

function multiplicapor(multiplicador, …números) {

return números.map(function(elemento) {
return multiplicador * elemento;
});
}

var salida = multiplicapor(2, 1, 2, 3);

console.log(salida); // [2, 4, 6]

Promises

Permiten administrar las funciones de callback de los procesos asíncronos. Par saber si
la función de callback devuelve lo que se le ha pedido.

Función de callback es un función que se llama desde otra función.

Una promesa tiene 3 estados:

  Pending:
 Fullfilled (success)
 Rejected (error)

Las promesas se pueden encadenar.

Para enviar información dentro de las promesas, se envían con resolve() y reject() y
dentro de estos métodos un return.

Se crea con new promise(function(resolve, reject){}) o new Promise((resolve,

reject)=>{}

Resolve() devuelve el valor de success

Reject() devuelve el valor de error

Con throw cortamos las promesas.

Tiene un método then cuando el valor es correcto y catch cunado da error.

all[] indica que se cumplen todas las promesas encadenadas

race[] indica que se han cumplido alguna de las promesas encadenadas

<script>

let miPromesa = new Promise((resolve, reject)=>{

setTimeout(()=>{
resolve("Todo bien"); //A los 1000 segundos lanzo el OK
},1000);

setTimeout(()=>{
reject("Todo mal"); // A los 1500 segundos lanzo el error
},1500);
})

miPromesa.then((res)=>{
console.log(res);
}, (err)=>{
console.log(err);
});
</script>

<script>

let miPromesa = new Promise(function(todoBien, todoMal){

let resultado = true;

if (resultado) {
todoBien("listo");
 } else {
todoMal("algo falló");
}
});

miPromesa.then(function(resultado) {
console.log("El resultado es "+resultado);
})
.catch(function(resultado){
console.log("El resultado es "+resultado);
});
</script>

DOM – Manejo de elementos – Arbol de nodos

Document Object Model

window.onload

Como el script de javascript suele ponerse al inicio del código hay que ejecutarlo
cuando ya se ha cargado la página y están todas las etiquetas. Para ello el manejo de
nodos lo haremos dentro del evento window.onload

window.onload = function(){}

Manejar nodos del DOM

El DOM es un árbol que representa el documento HTML. Es un objeto.

La raíz es html con etiquetas principales <head>, <body>, …

Cada etiqueta es un nodo del árbol y puede tener subnodos generando otro subarbol

DOM permite acceder desde JavaScript a todos los elementos del árbol.

El objeto que representa al DOM es document

OJO!!! Los contenidos y atributos también son nodos diferentes a las etiquetas

Añadir nodos

Crear un elemento etiqueta

Añadir atributos

Agregar como hijo. Loas añade al final. No hay una función que añada hijos al inicio.

Ver la función del querySelector

<form id="form">
<!--Los corchetes indican que enviamos un array de campos-->
 <input type="email" placeholder="Correo" name="mails[]">
</form>
<!--Quiero agregar más campos correo al formulario-->
<button id="btn">Agregar más correos</button>

<script>

//Selecciono el botón
$("#btn").addEventListener("click", function () {
// createElement crea un elemento de la etiqueta que indique.
var nodoInput = document.createElement("input");
nodoInput.setAttribute("type", "email");
nodoInput.setAttribute("placeholder", "Correo");
nodoInput.setAttribute("name", "mails[]");

//Agreagr el input al formulario

//appendChild agrega nodos al final
//Selecciono el formulario
$("#form").appendChild(nodoInput);
})

//Función que permite seleccionar elementos

function $(selector) {
return document.querySelector(selector);
}
</script>

Para insertar elementos div antes ver en el código de los ejemplos

console.log($("body").children[]);

muestra todos los hijos de body

Elementos de un aclase

function recorreElementosDeClaseClose() {
var elements = document.querySelectorAll(".close");
for (var posicion = elements.length-1; posicion >= 0; posicion--)
{
var element = elements[posicion];
console.log(element);
}
}

Para acceder al nodo padre es this.parentNode.

Seleccionar nodos

getElement devuelve un nodo y getElements un array de nodos

querySelector() / querySelectorAll() Selecciona elementos CSS

Usar siempre este método.

querySelector() devuelve un nodo

querySelectorAll() devuelve un nodeList o array de nodos

Podemos seleccionar por clase, identificador, atributo o pseudoclase (CSS) con la

sintaxis en cascada CSS.

Por clase . por id #

<style>
h1{color:blue;}
.rojo{ color:red; }
.verde{ color:green; }
#amarillo{ color:yellow; }
</style>

Para devolver un solo elemento querySelector. El primero que encuentra

var div = document.querySelector(".mi_clase");

querySelectorAll devuelve un array.

var div = document.querySelectorAll(".mi_clase");

window.onload = function(){
//seleccionamos por clase
var rojos = document.querySelectorAll(".rojo");
console.log("Tenemos "+rojos.length+" elementos rojos");

//seleccionamos por identificador

var amarillos = document.querySelectorAll("#amarillo");
console.log("Tenemos "+amarillos.length+" elementos amarillos");

//seleccionamos por atributo

var verdes = document.querySelectorAll("p[class]");
console.log("Tenemos "+verdes.length+" elementos verdes");

//seleccionamos por etiqueta

var parrafos = document.querySelectorAll("p");
console.log("Tenemos "+parrafos.length+" párrafos");

//seleccionamos por clase ficticia (Clase no definida en style CSS)

var noexiste = document.querySelectorAll(".noexiste");
console.log("Tenemos "+noexiste.length+" elementos de la clase 'noexiste'");

Seleccionar por id

var div = document.getElementById("mi_div");

Seleccionar por clase de estilo CSS

Devuelve un array de elementos.

Se puede utilizar una clase que no esté creada en un estilo CSS

<script>
window.onload = function(){
//seleccionamos los elementos con la clase rojo
var rojos = document.getElementsByClassName("rojo");
console.log("Elementos que contienen la clase 'rojo' son: "+rojos.length);
for (var i = 0; i < rojos.length; i++) {
console.log("El contenido de los nodos es :"+rojos[i].innerHTML);
}
}

</script>
<style>
.rojo{ color:red; }
</style>

<ul>
<li class="rojo">Document</li>
<li class="rojo">Object</li>
<li class="rojo">Model</li>
</ul>

Seleccionar por etiqueta HTML <>

Devuelve un array de elementos.

OJO!!! La búsqueda por etiquetas busca en las etiquetas ya creadas en el momento de la

instrucción.

Para evitar esto hay que poner windo.onload que indica que se haga una vez cargada la
página

Windows.onload = function(){sole.log
var div = document.getElementsByTagName("div");
con(“El numero de etiquetas div es: “+div.lehgth);
}

Tipo de nodo

Devuelve un número

var miDOM = document.getElementById("dom");

document.write("El tipo de nodo es: "+miDOM.nodeType+"<br>");

Node type nodeName returns nodeValue returns

1 Element element name null

2 Attr attribute name attribute value

3 Text #text content of node

4 CDATASection #cdata-section content of node

5 EntityReference entity reference name null

6 Entity entity name null

7 ProcessingInstruction target content of node

8 Comment #comment comment text

9 Document #document null

10 DocumentType doctype name null

11 DocumentFragment #document fragment null

12 Notation notation name null

Nodos Hijos

Para acceder a los nodos hijos se usa nodo.childNodes y devuelve un array de nodos.

Incluye la propia etiqueta, las etiquetas de los hijos y los contenidos de los hijos. Cada
cosa es un nodo

var miDOM = document.getElementById("dom");

document.write("El número de nodos de la lista es: "+miDOM.childNodes.length+"<br>");

Trabajar con contenido de un nodo (texto)

innerHTML es una propiedad que nos permite trabajar con el texto o contenido del
nodo.

Obtener texto

var miDOM = document.getElementById("dom");

document.write("El contenido del nodo es: "+miDOM.innerHTML+"<br>");

window.onload = function(){
//recuperamos la informacion de un nodo
var d = document.querySelector(".rojo").innerHTML;

Modificar el contenido

window.onload = function(){
//recuperamos la informacion de un nodo
var d = document.querySelector(".rojo").innerHTML;
 //modificando el contenido con etiquetas añadidas
document.querySelector(".rojo").innerHTML = "<b>"+d+"</b>";

Eliminar el contenido

window.onload = function(){
//recuperamos la informacion de un nodo
var d = document.querySelector(".rojo").innerHTML;
//eliminar el contenido
document.querySelector(".rojo").innerHTML = "";

Trabajar con atributos de nodo

Obtener atributos de nodo getAttribute

Recuperamos el valor del atributo:

miNodo.getAttribute(“align”);

Modificar atributos setAttribute

Lo normal es modificar los estilos en cascada con clases

Modificar el atributo

miNodo.setAttribute(“align”, “left”);

miDOM.setAttribute("class","rojo");

Comprobar si un nodo tiene un atributo hasAttribute

Devuelve un bool.

miNodo.hasAttribute(“class”);

Eliminar un atributo removeAttribute()

Comprobar primero si existe con hasAttribute()

miNodo.removeAttribute(“class”);

Navegar en el documento

Moverse en el árbol DOM

OJO!!! Los navegadores toman los espacios (entre las etiquetas) como nodos
parentNode (hacia arriba)

previousSibling (izquierda leemos o un elemento, un espacio, un texto o un

comentario)

previousElementSibling (izquierda de elemento en elemento)

nextSibling (derecha leemos o un elemento, un espacio, un texto o un comentario)

nextElementSibling (derecha de elemento en elemento)

firstChild (abajo un nivel)

lastChild (abajo último nivel)

<script>
window.onload = function(){
var medio = document.getElementById("medio");
do{
console.log(medio.nodeName, medio.innerHTML);
medio = medio.nextElementSibling;
}while(medio)

}
</script>

EVENTOS

Enlazar JavaScript con una acción en la página.

Detectarlos con HTML

<button onclick="clic()"> Clic para abrir un alert</button>

Detecta el evento onClick y ejecuta una función.

onmouseover
onmouseout

Listeners

Buscar el elemento con el DOM

addEventListener(evento, función sin paréntesis, orden)

document.getElementById("mi_boton").addEventListener("click", clic,
false);
Orden

El tercer parámetro marca el orden en elementos anidados y es true o false. Va de fuera

a dentro o de dentro a afuera

Por defecto ejecuta primero el de dentro y después el de fuera

<div id="mi_div">
<button id="mi_boton"> Clic para abrir un alert</button>
</div>

document.getElementById("mi_div").addEventListener("click", clic2,
true);
document.getElementById("mi_boton").addEventListener("click", clic,
false);

Primero ejecuta clic2 (true) y después clic

document.getElementById("mi_div").addEventListener("click", clic2,
false);
document.getElementById("mi_boton").addEventListener("click", clic,
true);

Primero ejecuta clic (true) y después clic2

Con los dos false ejecuta primero el de dentro (clic) y después clic2

Los dos true ejecuta primero el de fuera (clic2) y después clic.

document.getElementById('boton').addEventListener("click", function ()
{
console.log('Hola');

Pulsar una tecla

document.addEventListener("keydown", function (evento) {
if (evento.keyCode == 38) {
bar.down();
}
else if (evento.keyCode == 40) {
bar.up();
}

});

CLOSURES

Se trata de declarar funciones dentro de otras funciones. Self-invoking functions+

(function () {

})();

Para no contaminar el scope global se puede poner el código en una función que se
llama a sí misma. Es una función declarada dentro de otra función.
La declaración de variables en una función autoinvocada, se hace sólo la primera vez.

El truco para que la función externa sea inmediatamente ejecutada y el valor retornado
sea asignado, es encerrar la definición de la función entre paréntesis, de este modo
indicamos que se va a ejecutar una function expression ya que los paréntesis no pueden
contener declaraciones (ej. function declaration).

Immediately-Invoked Function Expression (IIFE)

(function () {

document.getElementById('boton').addEventListener("click",
function () {
console.log('Hola');
});

})();

Un closure tiene acceso a las variables de la función padre incluso después de cerrar la
función padre.

Recibe una referencia a las variables del padre por lo que si las modifico se modifican
en el global.

//Llamar a una función dentro de otra

setTimeout(function () {
console.log(holaMundo('Rafa'));
},2000);

function holaMundo(nombre) {
function construct() {
return 'Hola ' + nombre;
}
return construct(); //Devuelve una función
}

JSON

JavaScript Object Notation

Se escribe como un objeto JavaScript y permite generar objetos.

Reglas:

 Los datos son pares “nombre”:valor (Nombre en comillas dobles o sin comillas)
 Los datos están separados por comas ,
 Las llaves {} contienen objetos
 Los corchetes contienen arrays

Array con datos de empleados:

Array de objetos que son los datos de una persona

"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]

Definición de objetos con atributos y métodos

Permite acceder a los demás atributos o funciones de un mismo json

Convertir un JSON a un objeto JavaScript

Esto es de w3Schools y no s esi hace falta.

He de tener un string con sintaxis JSON

var text = '{"employees":[' +

'{"firstName":"John","lastName":"Doe" },' +

'{"firstName":"Anna","lastName":"Smith" },' +

'{"firstName":"Peter","lastName":"Jones" }]}';

Convertir el string en un oobjeto JavaScript

obj = JSON.parse(text);

Utilizar el objeto JavaScript

document.getElementById("demo").innerHTML = obj.employees[1].firstName
+ " " + obj.employees[1].lastName;

CLASES

Clases ES5

Las clases se definen mediante funciones.

Los objetos se crean con las clases o con JSON

Permiten definir un constructor con prototype.

Se asignan atributos y objetos con this

//Definición de la clase
function Tutor(nombre, apellido) {
//definición de atributos
this.nombre = nombre;
this.ocupacion = 'tutor';
 this.nombreCompleto = nombre + ' ' + apellido;
//definición de métodos
this.cargo = function () {
console.log("Tutor: " + this.nombre + ' cargo: ' +
this.ocupacion);
}
this.saludar = function () {
console.log("Hola soy " + this.nombreCompleto);
}
}

//Creación de un objeto
var uriel = new Tutor("Urial", "Hernández");
uriel.cargo();

var rafa = new Tutor('Rafa', 'Gual');

rafa.saludar();

Prototype

Los objetos se crean a través de prototipos. Es la función a través de la cual creamos el

objeto.

El prototype define como se construye el objeto.

console.log(uriel.__proto__); // Tutor
console.log(uriel.__proto__.__proto__); // Object es el propotype
padre

Se pueden asignar atributosy métodos fuera del prototipo pero otros objetos del
prototipo no pueden acceder. Son únicos.

rafa.edad=47;

Para que puedan ser accesibles por todos puede usarse prototype

Tutor.prototype.edad=22;

Keyword class ES6

No lo soportan todos los navegadores

El constructor se define con la palabra constructor

Permite métodos

this no se refiere a la instancia de la clase actual, se refiere al contexto de la llamada y

como tal puede ser cambiado a algo más que un objeto. ¿?????

class Tutor extends Human {}

class Tutor {
constructor(nombre, apellido){
 this.nombre = nombre;
this.apellido = apellido;
}

nomCommpleto() {
return this.nombre + ' ' + this.apellido;
}
}

var tutor = new Tutor('Rafa', 'Gual');

console.log(tutor.nomCommpleto());

Objetos

Se instancian con new

Cuando se usa un punto para acceder al método del objeto, this se refiere al objeto a la
izquierda del punto.

Herencia

Soporta herencia de clases (no me funciona)

Super()

La función super() ejecuta el método con el mismo nombre desde el que se está
llamando a super().

Hace referencia a la clase predecesora.

Sirve para ejecutar el constructor del padre, por ejemplo.

Getters y Setters

Se agrega set o get antes del nombre del método

Métodos estáticos

Con la palabra clave static.

Se pueden llamar sin crear una instancia de la clase. Se accede con el nombre de la
clase.

Internalización y localización Intl

Collator

Para definir el sort() en los diferentes idiomas

// En alemán "ä" se ordena junto a "a"

 // En Sueco, "ä" se ordena después de a "z"
var lista = [ "ä", "a", "z" ];
var l10nDE = new Intl.Collator("de");
var l10nSV = new Intl.Collator("sv");
console.log(l10nDE.compare("ä", "z"));
console.log(l10nSV.compare("ä", "z"));
console.log(lista.sort(l10nDE.compare)); // [ "a", "ä", "z" ]
console.log(lista.sort(l10nSV.compare)); // [ "a", "z", "ä" ]

NumberFormat

Formatos de número en función del idioma

var l10nEN = new Intl.NumberFormat("en-US");

var l10nDE = new Intl.NumberFormat("de-DE");
console.log(l10nEN.format(1234567.89));
console.log(l10nDE.format(1234567.89));

Formato moneda

var l10nUSD = new Intl.NumberFormat("en-US", { style: "currency",

currency: "USD" });
var l10nGBP = new Intl.NumberFormat("en-GB", { style: "currency",
currency: "GBP" });
var l10nEUR = new Intl.NumberFormat("de-DE", { style: "currency",
currency: "EUR" });
console.log(l10nUSD.format(100200300.40));
console.log(l10nGBP.format(100200300.40));
console.log(l10nEUR.format(100200300.40));

DateTimeFormat

Formato de fechas y tiempo dependiendo del idioma.

var l10nEN = new Intl.DateTimeFormat("en-US");

var l10nMX = new Intl.DateTimeFormat("es-MX");
var l10nDE = new Intl.DateTimeFormat("de-DE");
console.log(l10nEN.format(new Date("2015-12-2")));
console.log(l10nMX.format(new Date("2015-12-2")));
console.log(l10nDE.format(new Date("2015-12-2")));

EJEMPLOS

Cuenta atrás

Ha de haber en el HTML un <div id=tiempo que contiene la fecha.

<script type="text/javascript">
function muestraCuentaAtras(){
var horas, minutos, segundos;
var ahora = new Date();
var fechaExpiracion = new Date($fecha);
var falta = Math.floor( (fechaExpiracion.getTime() - ahora.getTime()) / 1000 );
if (falta < 0) {
cuentaAtras = '-';
}
else {
horas = Math.floor(falta/3600);
falta = falta % 3600;
minutos = Math.floor(falta/60);
falta = falta % 60;
segundos = Math.floor(falta);
cuentaAtras = (horas < 10 ? '0' + horas : horas) + 'h '
+ (minutos < 10 ? '0' + minutos : minutos) + 'm '
+ (segundos < 10 ? '0' + segundos : segundos) + 's ';
setTimeout('muestraCuentaAtras()', 1000);
}
document.getElementById('tiempo').innerHTML = '<strong>Faltan:</strong> ' +
cuentaAtras;
}
muestraCuentaAtras();
</script>