JAVASCRIPT

INTRODUCCIÓN
- Lenguaje de programación creado por Brendan Eich en 1995.
- Es el único lenguaje que puede interpretar un navegador web.
- Hasta el año 2009 se usaba muy poco y era considerado un lenguaje
fallido. A partir de ese año empezaron a aumentar sus
funcionalidades y poco a poco fue cogiendo fuerza. Desde 2009 se
puede ejecutar en un servidor con node.js.
- En 2015 llega una nueva versión con numerosas mejoras que
supone una revolución en la programación web.

EVOLUCIÓN
- En 1997, NETSCAPE lleva a Javascript al ECMA (regulador de
estándares europeos) y es aceptado, creándose así el ECMASCRIPT
1.0
- En 1998 se crea el ECMASCRIPT 2 (Ajustándose al estándar
internacional) y en 1999 el ECMASCRIPT 3.
- En 2009 se crea el ECMASCRIPT 5 y en 2011 el ECMASCRIPT 5.1
- En 2015 llega la revolución con el ECMASCRIPT 6

TECNOLOGÍAS DESCENDIENTES DE JAVASCRIPT

- AJAX. La creó Microsoft para mostrar información sin tener que
recargar la página web.
- JQUERY. En la actualidad está en desuso.
- NODEJS. Permite ejecutar JavaScript en un servidor.
- JSON. Sustituto del XML.
- FRAMEWORKS: Angular, React, VueJS
DÓNDE ESCRIBIR JAVASCRIPT
- Se puede escribir en una consola del navegador. Console.log()
- En una terminar si se va a usar Node.js
- En un editor de texto plano.

SINTAXIS
- CASE SENSITIVE. ‘Numero’ no es lo mismo que ‘numero’
- Es de TIPADO DÉBIL O DINÁMICO. Las variables son del tipo de dato
que almacenen.
- Las sentencias finalizan con punto y coma: ;
- Los bloques finalizan con una llave: }
- prompt: palabra para introducir datos por parte del usuario.

VARIABLES
- Las variables se pueden DECLARAR, INICIALIZAR Y MODIFICAR.
- DECLARAR: se usa la palabra LET. (‘let numero;’)
- INICIALIZAR: (‘numero = 5’;)
o También se puede declarar e inicializar juntos:
▪ (‘let numero = 5’;)
- MODIFICAR: (‘numero = 3;’)

CONSTANTES
- Son espacios que reservamos en memoria para almacenar un dato
que no cambiará durante la ejecución de nuestro programa.
- DECLARAR E INICIALIZAR: se usa la palabra CONST.
o (‘const pi = 3.14;’)

ÁMBITO O SCOPE DE UNA VARIABLE O UNA CONSTANTE

- Es la zona donde existe la variable o constante.
- Dependiendo de donde la hayamos declarado la podremos usar o
no.
TIPOS DE DATOS
- PRIMITIVOS. Son los que están creados por defecto por el lenguaje:
o NÚMEROS. let numero = 5;
o STRINGS (o cadenas) let palabra = ‘hola’;
o BOOLEANOS. let respuesta = true; let respuesta = false;
o UNDEFINED. Indefinido.
o NULL. Nulo.
o SYMBOL. Sus valores son únicos e inmutables que pueden ser
usados como identificadores (clave).

OPERADORES
A) MATEMÁTICOS:
a. Suma/concatenación: +
b. Resta: -
c. Multiplicación: *
d. División: /
e. Módulo: % (Devuelve el resto de una división)
B) ASIGNACIÓN:
a. Asignación: =
b. Suma y asignación: a+=3; (a=a+3)
c. Resta y asignación: a-=3; (a=a-3)
d. Multiplicación y asignación: a*=3; (a=a*3)
e. División y asignación: a/=2; (a=a/2)
f. Módulo y asignación: a%=2; (a=a%2)
C) INCREMENTO:
a. Post-incremento en 1: a++
b. Pre-incremento en 1: ++a (Primero se incrementa y luego
devuelve)
c. Post-decremento en 1: a--
d. Pre-decremento en 1: --a
D) LÓGICOS. Se verán más adelante.
STRINGS
- Los strings (o cadenas) tienen métodos y propiedades.
- Los métodos es todo aquello que la cadena puede hacer.
- Las propiedades son las características que la cadena tiene por el
hecho de ser una cadena.
- La forma de usarlos es con la nomenclatura del punto.
(cadena.metodo) / (cadena.propiedad) A veces los métodos tienen
parámetros.

- Propiedad lenght. Conocer la longitud de la cadena.

o cadena.length;
- MÉTODOS:
o cadena.toUpperCase(). Convertir cadena a mayúsculas.
o cadena.toLowerCase(). Convertir cadena a minúsculas.
o cadena.indexOf(‘Hola’). Posición en la que se encuentra el
string (primera coincidencia). Si no lo encuentra devuelve -1.
o cadena.replace(‘Mundo’, ‘youtube’). Reemplaza el
fragmento de la cadena que le digamos por el valor nuevo.
o cadena.substring(3,7). (inicio [,fin]) Extrae caracteres desde
inicio hasta fin. (el fin es opcional, si no se incluye es hasta el
final del string).
o cadena.slice(0,-2]). (inicio [,fin]) Igual que substring pero
admite valores negativos.
o cadena.trim(). Elimina los espacios en blanco el inicio y final
de la cadena.
o cadena.startsWith(‘m’,5). (valor [,inicio]). Para saber si la
cadena empieza con ese valor. Devuelve true o false.
o cadena.endsWith(‘n’,8). (valor [,longitud]). Para saber si la
cadena termina con ese valor. Devuelve true o false.
o cadena.includes(‘a’, 2). (valor [,inicio]). Igual que indexOf
pero devuelve true o false.
o cadena.repeat(3). Repite el string el número de veces que le
indiquemos.
- TEMPLATE STRINGS. ${VARIABLE}. Imprime el valor de la variable.
o ‘Hola ${nombre} ${apellido}’;
- HAY MÁS MÉTODOS EN WWW.3SCHOOLS.COM
- Para convertir un string en un operador matemático se usa parseInt
OBJETO MATH
- Para ir más allá en las matemáticas en JavaScript.
- Utiliza la nomenclatura del punto.
- PROPIEDADES:
o Math.E
o Math.PI
- MÉTODOS:
o Math.abs(x). Devuelve el valor absoluto de x.
o Math.ceil(x). Devuelve el entero más grande mayor o igual
que x.
o Math.floor(x). Devuelve el entero más pequeño menor o
igual que x.
o Math.pow(x,y). Devuelve la potencia de x elevado a y.
o Math.sign(x). Devuelve el signo de x, negativo o positivo o
cero.
o Math.sqrt(x). Devuelve la raíz cuadrada de x.
o Math.random()*100. Número aleatorio entre 0 y 100
o Math.round(x). Redondear un número.
- REDONDEAR UN NÚMERO ALEATORIO:
o Math.round(Math.random()*100);
- REDONDEAR UN NÚMERO ALEATORIO ENTRE 5 Y 10:
o Math.round(Math.random()*(10-5)+5);
- REDONDEAR UN NÚMERO ALEATORIO ENTRE 50 Y 100:
o Math.round(Math.random()*(100-50)+50);
CONDICIONALES
- SIMPLES: Solo controlan una condición.
o if(evaluación){ código }

- COMPUESTOS: Controlan una condición y qué hacer si no se cumple

o if(evaluación){ código }else{ código }

- MÚLTIPLES: Controlan más de una condición.

o if(evaluación){ código }else if(evaluación){ código }else{
código }
- En los condicionales se puede usar operadores lógico: la ‘Y’ con &&
y ‘O’ con ||
- Podemos anidar if.
- Podemos usar booleanos en la evaluación.
o Si no ponemos nada sería true
o Si queremos que sea false se pone: !=
- ESTRUCTURA SWITCH SIMPLE:
swith (evaluación){
case n1: //código break;
case n2: //código break;
default: //código } }
- ESTRUCTURA SWITCH MÚLTIPLE:
swith (evaluación){
case n1:
case n2:
//código break;
default: //código }

- OPERADOR TERNARIO:
o (condición) ? true : false
o (condición) ? (sentencia1 sentencia2) : (sentencia1, sentecia2)
o Ejemplo:
▪ Let num = 2;
▪ (num %2==0) ? console.log(‘·{num} es par’) :
console.log(‘${num} es par’);
ARRAYS
- Almacenar varios datos y agruparlos.
- Se separan por comas y se declaran con llaves cuadradas. []
- Se pueden declarar vacíos. Puede añadirse o eliminarse en el
momento que queramos.
- Los arrays se identifican por su índice, a partir de 0.
o números[3]; → tercera posición. (daría 4)
- OPERACIONES CON ARRAYS:
o números[0]+numeros[1]; daría 3 (1+2)
o palabras[1].length; -> daría la longitud de un string.

- PROPIEDAD .length. Conocer las posiciones de un array.

o numeros.length;

- MÉTODOS:
o Array.isArray (variable a evaluar). Devuelve true si la variable
es un array o false si no lo es.
▪ Array.isArray(numeros);
o .shift(). Elimina el primer elemento y lo devuelve.
o .pop(). Elimina el último elemento y lo devuelve.
o .splice(a,b,ítems). Eliminar varios elementos de una sola vez.
▪ numeros.splice(3) -> elimina desde la posición 3 hasta
el final.
▪ numeros.splice(2,3) -> elimina 3 elementos desde
posición 2
▪ numero.splice(2,3,10,23) -> elimina 3 elementos desde
posición 2 y añade desde esa posición los números 10 y
23
o .slice(a,b) -> Extrae elementos.
o .push(item1, item2…) -> Añade elementos al final-
o .unshift(item1, item2…) -> Añade elementos al principio.
o .indexOf(valor)-> Encuentra el primer elemento que coincida.
o .lastIndexOf(valor)-> Encuentra el último elemento que
coincida.
o .reverse() -> Invierte el orden del array
o .join(‘separador’) -> Devuelve un string con el separador
indicado. Por defecto son comas. numeros.join(‘-‘);
BUCLES
- Determinados: los que sabemos el número de veces del bucle.
- Indeterminados: los que no sabemos el número de veces del bucle.

BUCLE WHILE: es indeterminado. While(condición){ código }

BUCLE DO WHLE: es indeterminado. Do{ código } while(condición)

• Se ejecuta al menos 1 vez el bucle.

BUCLE FOR: es determiando. For(let i=0;i<=10;i++){ código }

• i++: primero se imprime, luego se incrementa.
• ++i: primero se incrementa, luego se imprime
• también puede ser i--

BUCLE FOR OF / FOR IN: Simplifica el bucle tradicional sin tener que darle
un número de vueltas (i=0) ni realizar un incremento (i++):
- for (let name of names){ código }
o OF: sirve para recorrer el valor de los arrays.

- For (let name in names){ código }

o IN: sirve para recorrer el índice de los arrays, no su valor.
(está especialmente indicado para recorrer objetos)

En los bucles se pueden usar BREAK: rompe el bucle.

También se puede usar CONTINUE: salta una posición del bucle y después
continúa.
OBJETOS
- Son estructuras de datos que representan propiedades, valores y
acciones que puede realizar el objeto.
- TODOS LOS OBJETOS tienen:
o Propiedades o atributos
o Comportamientos o acciones
- DECLARAR UN OBJETO:
o const computer = { pantalla:17, modelo: `macbook` }
- ACCEDER A SUS propiedades y acciones:
o computer.pantalla; computer.modelo; etc..
- Recorrer todo en un bucle si hay muchas propiedades:
o for(const key in person){ console.log(key); }
- Para imprimir los valores:
o for(const key in person){ console.log(computer[key]); }
FUNCIONES
- Reutilizar código.
- Estructura:
o const nombreFuncion = () =>{ código }
o function nombreFuncion(){ código }
- Una función puede tener parámetros:
o const nombreFuncion = (parametro1, parametro2) =>{
código }
o function nombreFuncion(parametro1, parametro2){ código }
- Las funciones devuelven valores, o solo hacen algo en concreto.
o Para devolver se usa la palabra return. (para function)
o Para const, puede que no se necesite usar el return.
- Para invocar la función se usa: nombreFuncion();

Ejemplo:
const saludarUsuario = (user) => console.log(`Hola ${user}`);

saludarUsuario('juan');

Ejemplo:
const suma = (num1, num2) =>{
if(num1 == 2){
return num1 + num2;
}
return num1;
}

console.log(suma(7,3));
PROGRAMACIÓN ORIENTADA A OBJETOS
- Conceptos: clase, herencia, objeto, método, evento, etc
- En POO se usan clases que son como plantillas que se utilizan para
crear objetos iguales.
- Cuando creamos un objeto, a esa acción se le denomina
INSTANCIAR un objeto.
- Necesitamos una función constructora. Se tiene que llamar
constructor y se ejecuta cada vez que creemos un objeto.
EJEMPLO:
class Persona{
constructor(nombre, apellido, edad){
this.nombre = nombre;
this.apellido = apellido;
this.edad = edad;
}
}

- Al poner this. Hacemos referencia al objeto

o Nombre del objeto = nombre del parámetro.
o Apellido del objeto = apellido del parámetro.
o Edad del objeto = edad del parámetro.
- Se le pueden asignar propiedades que no hayan en los parámetros, pero
siempre utilizando THIS para referenciar al objeto.
o This.datos = `${nombre} ${apellidos} ${edad}`
- MÉTODOS DE LAS CLASES de un objeto:
o Métodos son como las funciones en POO
o Dentro de la clase pero fuera del constructor se crea el método
asociado al objeto:
▪ Saludar(){ return `Hola, me llamo ${this.nombre}`; }
- PARA CREAR OBJETOS:
o Se tiene que usar la palabra reservada NEW.
▪ const juan = new Persona(‘Juan’, ‘garcía’, ‘23’)
o Una vez instanciado el objeto podremos acceder a sus propiedades y
métodos utilizando la nomenclatura del punto o buscando su propiedad
en el objeto:
▪ Juan.nombre juan.apellido juan.edad juan.saludar()
▪ Juan[‘nombre’] juan[‘apellido’] etc
EJEMPLO:
class Persona{
constructor(nombre, apellido, edad){
this.nombre = nombre;
this.apellido = apellido;
this.edad = edad;

this.datos = `Me llamo ${this.nombre} ${this.apellido} y tengo

${this.edad} anos`

// creamos los métodos

saludar(){
return `Me llamo ${this.nombre} ${this.apellido} y tengo ${this.edad}
anos`

const juan = new Persona('Juan', 'garcia', '25');

const marta = new Persona('Marta', 'garcia', '35');

console.log(juan);

console.log(marta.saludar());
ARRAYS-2: MÉTODOS
- .from(iterable) - Convierte en array el elemento iterable
o Array.from(variable)
- .sort([callback]) - Ordena los elementos de un array
alfabéticamente(valor Unicode), si le pasamos un callback los
ordena en función del algoritmo que le pasemos.
o console.log(letters.sort())
o console.log(numbers.sort((a,b)=>a-b))
- .forEach(callback(currentValue, [index])) - ejecuta la función
indicada una vez por cada elemento del array.
o numbers.forEach((number)=>console.log(number))
o numbers.forEach((number, index) =>
console.log(`${number} esta en la posicion ${index}`))
- .some(callback) - Comprueba si al menos un elemento del array
cumple la condición
o const words = ['HTML', 'CSS', 'JavaScript', 'PHP']
console.log(words.some(word => word.length>10));
- .every(callback) - Comprueba si todos los elementos del array
cumplen la condición
o const words = ['HTML', 'CSS', 'JavaScript', 'PHP']
console.log(words.every(word => word.length>10));
- .map(callback) - Transforma todos los elementos del array y
devuelve un nuevo array
o const numbers = [1, 2, 3, 4, 5];
const numbers2 = numbers.map(number => number * 2)
- .filter(callback) - Filtra todos los elementos del array que cumplan la
condición y devuelve un nuevo array
o const numbers2 = numbers.filter(number => number > 40)
- .reduce(callback) - Reduce todos los elementos del array a un único
valor (suma, multiplicación, etc)
o console.log(numbers.reduce((a,b)=>a+b))
o console.log(numbers.reduce((a,b)=>a*b))