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 [Link].
- 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. [Link]()
- En una terminar si se va a usar [Link]
- 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.
([Link]) / ([Link]) A veces los métodos tienen
parámetros.
- Propiedad lenght. Conocer la longitud de la cadena.
o [Link];
- MÉTODOS:
o [Link](). Convertir cadena a mayúsculas.
o [Link](). Convertir cadena a minúsculas.
o [Link](‘Hola’). Posición en la que se encuentra el
string (primera coincidencia). Si no lo encuentra devuelve -1.
o [Link](‘Mundo’, ‘youtube’). Reemplaza el
fragmento de la cadena que le digamos por el valor nuevo.
o [Link](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 [Link](0,-2]). (inicio [,fin]) Igual que substring pero
admite valores negativos.
o [Link](). Elimina los espacios en blanco el inicio y final
de la cadena.
o [Link](‘m’,5). (valor [,inicio]). Para saber si la
cadena empieza con ese valor. Devuelve true o false.
o [Link](‘n’,8). (valor [,longitud]). Para saber si la
cadena termina con ese valor. Devuelve true o false.
o [Link](‘a’, 2). (valor [,inicio]). Igual que indexOf
pero devuelve true o false.
o [Link](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 [Link]
- 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 [Link]
- MÉTODOS:
o [Link](x). Devuelve el valor absoluto de x.
o [Link](x). Devuelve el entero más grande mayor o igual
que x.
o [Link](x). Devuelve el entero más pequeño menor o
igual que x.
o [Link](x,y). Devuelve la potencia de x elevado a y.
o [Link](x). Devuelve el signo de x, negativo o positivo o
cero.
o [Link](x). Devuelve la raíz cuadrada de x.
o [Link]()*100. Número aleatorio entre 0 y 100
o [Link](x). Redondear un número.
- REDONDEAR UN NÚMERO ALEATORIO:
o [Link]([Link]()*100);
- REDONDEAR UN NÚMERO ALEATORIO ENTRE 5 Y 10:
o [Link]([Link]()*(10-5)+5);
- REDONDEAR UN NÚMERO ALEATORIO ENTRE 50 Y 100:
o [Link]([Link]()*(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) ? [Link](‘·{num} es par’) :
[Link](‘${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 [Link];
- MÉTODOS:
o [Link] (variable a evaluar). Devuelve true si la variable
es un array o false si no lo es.
▪ [Link](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.
▪ [Link](3) -> elimina desde la posición 3 hasta
el final.
▪ [Link](2,3) -> elimina 3 elementos desde
posición 2
▪ [Link](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. [Link](‘-‘);
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 [Link]; [Link]; etc..
- Recorrer todo en un bucle si hay muchas propiedades:
o for(const key in person){ [Link](key); }
- Para imprimir los valores:
o for(const key in person){ [Link](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) => [Link](`Hola ${user}`);
saludarUsuario('juan');
Ejemplo:
const suma = (num1, num2) =>{
if(num1 == 2){
return num1 + num2;
}
return num1;
}
[Link](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){
[Link] = nombre;
[Link] = apellido;
[Link] = 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 [Link] = `${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 ${[Link]}`; }
- 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:
▪ [Link] [Link] [Link] [Link]()
▪ Juan[‘nombre’] juan[‘apellido’] etc
EJEMPLO:
class Persona{
constructor(nombre, apellido, edad){
[Link] = nombre;
[Link] = apellido;
[Link] = edad;
[Link] = `Me llamo ${[Link]} ${[Link]} y tengo
${[Link]} anos`
// creamos los métodos
saludar(){
return `Me llamo ${[Link]} ${[Link]} y tengo ${[Link]}
anos`
const juan = new Persona('Juan', 'garcia', '25');
const marta = new Persona('Marta', 'garcia', '35');
[Link](juan);
[Link]([Link]());
ARRAYS-2: MÉTODOS
- .from(iterable) - Convierte en array el elemento iterable
o [Link](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 [Link]([Link]())
o [Link]([Link]((a,b)=>a-b))
- .forEach(callback(currentValue, [index])) - ejecuta la función
indicada una vez por cada elemento del array.
o [Link]((number)=>[Link](number))
o [Link]((number, index) =>
[Link](`${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']
[Link]([Link](word => [Link]>10));
- .every(callback) - Comprueba si todos los elementos del array
cumplen la condición
o const words = ['HTML', 'CSS', 'JavaScript', 'PHP']
[Link]([Link](word => [Link]>10));
- .map(callback) - Transforma todos los elementos del array y
devuelve un nuevo array
o const numbers = [1, 2, 3, 4, 5];
const numbers2 = [Link](number => number * 2)
- .filter(callback) - Filtra todos los elementos del array que cumplan la
condición y devuelve un nuevo array
o const numbers2 = [Link](number => number > 40)
- .reduce(callback) - Reduce todos los elementos del array a un único
valor (suma, multiplicación, etc)
o [Link]([Link]((a,b)=>a+b))
o [Link]([Link]((a,b)=>a*b))