JavaScript
JSON
JavaScript - JSON
1. Presentación
2. Introducción
3. Entorno de desarrollo
4. JavaScript en el navegador
5. La consola de JavaScript
6. Variables y tipos
7. Ámbitos
8. Operadores
9. Estructuras condicionales
10. Bucles
11. Funciones
12. Arrays
13. Objetos
14. Fechas
15. Clases
16. Manipulación del DOM
JavaScript - JSON
Conceptos iniciales
Interpretado, compilado y ejecutado en el navegador
Cada navegador programa su propio motor de JS
Estandarización: ECMAScript
La versión ES6 o ES2015
JSON
JavaScript - JSON
Lado del cliente
Petición al servidor y ejecución en el cliente
La etiqueta <script>
El ámbito global y el orden de carga
Peticiones HTTP bloqueantes y no bloqueantes
JavaScript - JSON
JavaScript - JSON
Entorno de desarrollo
Editor: Visual Studio Code
ESLint (npx eslint --init)
Configurar:
Format on Paste
Format on Save
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
Node.js y npm
JavaScript - JSON
.editorconfig
JavaScript - JSON
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
end_of_line = lf
JavaScript - JSON
npm
Instalar última versión después de instalar Node.js
(configurar proxy si es necesario): npm install -g npm
Repositorio de paquetes distribuibles
La carpeta node_modules
El archivo package.json
JavaScript - JSON
JavaScript - JSON
Comandos npm
Instalar un paquete:
npm install paquete --save-dev
Instalar todas las dependencias registradas:
npm install
Lanzar el ejecutable de un paquete:
npx ejecutable
Configuración proxy
npm config set proxy http://username:password@host:port
npm config set https-proxy http://username:password@host:port
JavaScript - JSON
La consola
La consola del navegador
Debuggear por consola
JavaScript - JSON
JavaScript - JSON
Declaración
Variables:
let
Constantes:
const
JavaScript - JSON
Tipos
Tipado dinámico y débil
Tipo number
Tipo string
Template literals
Tipo boolean
Arrays
Objetos
Tipo null
Tipo undefined
Valores y referencias
JavaScript - JSON
let nombre = 'Antonio';
let cuadrado = function(x) {
return x * x;
}
let n = Math.floor(Math.random() * 10);
let saludo1 = 'Hola, ' + nombre + '. El cuadrado de ' + n + ' es ' + cuadrado(n) + '.';
let saludo2 = `Hola, ${nombre}. El cuadrado de ${n} es ${cuadrado(n)}.`;
Ámbitos
Ámbito global
Jerarquías de ámbitos
JavaScript - JSON
Números
Métodos:
toFixed([digitos])
toString()
Funciones globales:
isNaN(n)
parseInt(cadena)
parseFloat(cadena)
JavaScript - JSON
Números
Métodos del objeto Math:
floor(n)
ceil(n)
round(n)
trunc(n)
max(n1, [n2], [n3]...) / min(n1, [n2], [n3]...)
random()
JavaScript - JSON
Cadenas
Métodos:
toUpperCase(), toLowerCase()
charAt(posicion)
slice(posicionInicial, [posicionFinal])
split([separador], [limite])
includes(busqueda, [posicion])
replace(busqueda, sustitucion)
indexOf(busqueda, [posicion])
padStart(longitud, [relleno = ''])
JavaScript - JSON
Operadores aritméticos
Suma ( + ), resta ( - ), multiplicación ( * ), división ( / )
Resto o módulo ( % )
Incremento ( ++ ) y decremento ( -- )
Exponente ( ** )
JavaScript - JSON
Operadores de asignación
Asignación ( = )
Asignación con suma ( += )
Asignación con resta ( -= )
Asignación con multiplicación ( *= )
Asignación con división ( /= )
Asignación con exponente ( **= )
JavaScript - JSON
Operadores de comparación
Igual ( == )
No igual ( != )
Igual estricto ( === )
No igual estricto ( !== )
Mayor ( > )
Mayor o igual ( >= )
Menor ( < )
Menor o igual ( < )
JavaScript - JSON
Operadores lógicos
AND ( && )
OR ( || )
NOT ( ! )
JavaScript - JSON
Operadores de cadenas
Concatenación ( + )
Asignación con concatenación ( += )
JavaScript - JSON
Operador ternario
condición ? valor1 : valor2
JavaScript - JSON
Operador spread
Meter un array dentro de otro
Argumentos variables en funciones
Pasar varios valores a una función
Copiar un array en otro
Copiar un objeto en otro
Mergear objeto con defaults
JavaScript - JSON
// function(a, b, c)
function sumar(a, b, c) {
console.log(a + b + c);
}
let nums = [1, 3, 6];
sumar(...nums);
// function(n parámetros)
function sumar(...nums) {
let suma = 0;
for (n of nums) {
suma += n;
}
console.log("La suma es " + suma);
}
let a = 3;
let b = 7;
let c = 8;
sumar(a, b, c);
// push y unshift
let nums1 = [1, 3, 6];
let nums2 = [0, 52, 15, 9];
nums1.push(...nums2);
console.log(nums1);
nums1.unshift(...nums2);
console.log(nums1);
// meter un array en medio de otro
let nums1 = [1, 3, 6];
let nums2 = [0, 52, 15, 9];
nums1.splice(1, 0, ...nums2);
console.log(nums1);
// copiar un array
let nums1 = [1, 3, 6];
let nums2 = [...nums1];
// copiar un objeto
let o1 = {
x: 3,
y: 5
}
let o2 = { ...o1 };
// mergear un objeto con defaults (ES2018)
let defaults = {
ancho: 100,
alto: 200,
color: "rojo"
}
let o1 = {
ancho: 200,
grosor: 10000
}
o1 = { ...defaults, ...o1 };
Estructuras condicionales
if
else / else if
if anidados
switch
JavaScript - JSON
let saludo;
if (hora > 6 && hora < 14) {
saludo = 'Buenos días';
} else if (hora < 21) {
saludo = 'Buenas tardes';
} else {
saludo = 'Buenas noches';
}
let comision;
switch (pago) {
case 'tpv':
comision = 1;
break;
case 'transferencia':
comision = 0.5;
break;
case 'contrarreembolso'
comision = 0;
break;
default:
comision = 0;
}
Bucles
for / for ... in / for ... of
while
forEach
JavaScript - JSON
let nombres = ["Patricia", "Zacarías", "Miguel", "Maite"];
for (let i in nombres) {
console.log(nombres[i]);
}
for (let nombre of nombres) {
console.log(nombre);
}
let obj = {
x: 3,
y: 4
}
for (let i in obj) {
console.log(obj[i]);
}
let nombre = "Antonio Jesús";
for (let c of nombre) {
console.log(c);
}
Funciones
Declaración
Parámetros
Llamada
Funciones como expresión
Ámbitos en las funciones
Función arrow
JavaScript - JSON
Arrays
Declaración
Tipos de arrays
Métodos y propiedades
length
push(elemento) / shift(elemento)
pop() / unshift()
indexOf(elemento, [posicion])
includes(elemento, [posicion])
some(callback(elemento))
find(callback(elemento))
findIndex(callback(elemento))
JavaScript - JSON
Arrays
Métodos y propiedades
join([separador = ','])
forEach(callback(elemento, [posicion]))
reverse()
slice(posicionInicial, [posicionFinal])
sort([funcionComparacion])
Iterando un array
JavaScript - JSON
JavaScript - JSON
Programación funcional con arrays
Métodos:
map
let nombres = ["juan", "luisa", "amparo", "arturo"];
let nombresMays = nombres.map(nombre => nombre.toUpperCase());
console.log(nombresMays);
JavaScript - JSON
Programación funcional con arrays
Métodos:
map
filter
let personas = [
{
nombre: "juan",
edad: 15
},
{
nombre: "luisa",
edad: 35
},
{
nombre: "amparo",
edad: 17
},
{
nombre: "arturo",
edad: 32
}
];
let mayoresEdad = personas.filter(persona => persona.edad >= 18);
console.log(mayoresEdad);
JavaScript - JSON
Métodos:
map
filter
reduce
let nums = [2, 4, 10, 15, 12];
let suma = nums.reduce((x, y) => x + y);
let objs = [
{
x: 3,
y: 2
},
{
x: 8,
y: 10
},
{
x: 10,
y: 15
}
]
let sumaX = objs.reduce((acc, obj) => acc + obj.x, 0); // Método 1
let sumaX = objs.map(obj => obj.x).reduce((obj1, obj2) => obj1 + obj2); // Método 2
Programación funcional con arrays
JavaScript - JSON
Programación funcional con arrays
Métodos:
map
filter
reduce
Encadenamiento
let notas = [
{
nombre: "juan",
nota: 6
},
{
nombre: "luisa",
nota: 8
},
{
nombre: "amparo",
nota: 4
},
{
nombre: "arturo",
nota: 3
}
];
let notasAprobados = notas.filter(n => n.nota >= 5).map(n => n.nota);
console.log(notasAprobados);
JavaScript - JSON
Arrays
El operador spread
Destructuring
Asignar desde un array
Intercambiar variables
function medidasMueble() {
// ...
return [100, 70, 20];
}
let [ancho, alto, profundo] = medidasMueble();
console.log(ancho, alto, profundo);
// 100, 70, 20
let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b);
// 20, 10
Objetos
Declaración
Tipos de objetos
Iterando un objeto
JavaScript - JSON
Objetos
JavaScript - JSON
El operador spread
Destructuring
Asignar desde un objeto
Renombrar variables
Valores por defecto
Argumentos en las funciones
function getRGB(colorHex) {
// ...
return {
alias: 'deeppink',
red: 255,
green: 20,
blue: 147,
alpha: 0.8
}
}
let { red, green, blue } = getRGB("#ff1493");
console.log(red, green, blue);
// 255, 20, 147
let personas = [{
nombre: "Luis",
apellido: "Herrera",
edad: 23
},
{
nombre: "Marta",
apellido: "Nieto",
edad: 29
}];
for (let {nombre, edad} of personas) {
console.log(`Me llamo ${nombre} y tengo ${edad} años`);
}
// Me llamo Luis y tengo 23 años
// Me llamo Marta y tengo 29 años
let notas = {
mat: 8,
fis: 6,
dib: 5,
tec: 6
}
let { mat: matematicas, fis: fisica, dib: dibujo, tec: tecnologia } = notas;
console.log(matematicas, fisica, dibujo, tecnologia);
// 8, 6, 5, 6
let persona = {
nombre: "Luis",
edad: 23
}
let { nombre, edad, estado = "soltero" } = persona;
console.log(nombre, edad, estado);
// Luis, 23, soltero
function area({radio = 0, base = 0, altura = 0, tipo = 'circulo'} = {}) {
console.log(radio, base, altura, tipo);
}
area({ tipo: 'rectangulo', base: 10, altura: 20 });
// 0, 10, 20, "rectangulo"
area();
// 0, 0, 0, "circulo"
JSON
JavaScript - JSON
Sintaxis del formato JSON
Tipos de datos
Mapeado con objetos de JS
Fetch
JavaScript - JSON
Request:
Nos interesan las propiedades:
method
headers ('Content-Type': 'application/json')
body
Response:
Nos interesan las propiedades:
ok
status
body
Y el método:
json()
Fetch
JavaScript - JSON
La función fetch()
Promesa
.then()
.catch()
Clases
JavaScript - JSON
Clases
Propiedades y métodos
class A {
constructor(z) {
this.x = 3;
this.y = 10;
this.z = z;
}
suma() {
return this.x + this.y + this.z;
}
}
let a = new A(20);
console.log(a.suma());
Clases
JavaScript - JSON
Clases
Propiedades y métodos
Getters y setters
class A {
constructor(z) {
this.x = 3;
this.y = 10;
this.z = z;
}
suma() {
return this.x + this.y + this.z;
}
set zeta(z) {
this.z = z * 2;
}
get zeta() {
return this.z / 2;
}
}
let a = new A(20);
a.zeta = 15;
console.log(a.zeta);
Clases
JavaScript - JSON
Clases
Propiedades y métodos
Getters y setters
Métodos estáticos
class A {
constructor(z) {
this.x = 3;
this.y = 10;
this.z = z;
}
static getPI() {
return 3.14159;
}
suma() {
return this.x + this.y + this.z;
}
set zeta(z) {
this.z = z * 2;
}
get zeta() {
return this.z / 2;
}
}
let a = new A(20);
a.zeta = 15;
console.log(a.zeta);
console.log(A.getPI());
Clases
JavaScript - JSON
Clases
Propiedades y métodos
Getters y setters
Métodos estáticos
Herencia con extends y super()
class A {
constructor(z) {
this.x = 3;
this.y = 10;
this.z = z;
}
static getPI() {
return 3.14159;
}
suma() {
return this.x + this.y + this.z;
}
set zeta(z) {
this.z = z * 2;
}
get zeta() {
return this.z / 2;
}
}
class B extends A {
constructor() {
super(100);
this.x = 20;
}
suma() {
return this.x + this.z;
}
resta() {
return this.x - this.z;
}
}
let b = new B();
console.log(b.suma());
console.log(b.resta());
Manipulación del DOM
JavaScript - JSON
El Document Object Model
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
<script src="js/jquery.min.js"></script>
<script src="js/scripts.js"></script>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<header>
<h1>Ejemplo DOM</h1>
</header>
<div>
<h2>Esto es un documento HTML</h2>
<img src="img/html.jpg" alt="Documento HTML">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non consectetur sapiente esse odit dolorem fugiat, iure
omnis dolore obcaecati veniam necessitatibus sit quia praesentium, nesciunt suscipit. Adipisci illum tempore fuga.
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis, consequatur? Nostrum repudiandae qui expedita
optio exercitationem sapiente rem, quisquam ipsam, sunt veniam dolorum architecto similique! Iusto quibusdam omnis
tenetur nihil.</p>
</div>
</body>
</html>
Manipulación del DOM
JavaScript - JSON
El Document Object Model
Nodos HTML
Interfaces Node, HTMLElement e hijas
Manipulación del DOM
JavaScript - JSON
Acceder a los nodos
<document | nodo>.getElementById(id)
<document | nodo>.getElementsByClassName(clase)
<document | nodo>.getElementsByTagName(etiqueta)
<document | nodo>.querySelector(selectorCSS)
<document | nodo>.querySelectorAll(selectorCSS)
Manipulación del DOM
JavaScript - JSON
Acceder por posiciones relativas a un nodo
children
firstElementChild, lastElementChild
previousElementSibling, nextElementSibling
parentNode
Manipulación del DOM
JavaScript - JSON
Métodos de los nodos
cloneNode([deep=false])
remove(), removeChild(nodo)
append(...nodos), prepend(...nodos)
insertBefore(nuevoNodo, nodoReferencia)
Manipulación del DOM
JavaScript - JSON
Manipulación del DOM
JavaScript - JSON
Crear nodos:
Manipulación del DOM
JavaScript - JSON
Links
JavaScript - JSON
JavaScript - JSON