//Estructura de control: if //Sintaxis: if (condicion){Haz alguna cosa} //Sintaxis: if (condicion){Haz alguna cosa} else{Haz una cosa si no se cumple la condicion} let a=5; // a>5 es una condición. Un valor booleano que puede ser cierto (true) o falso (false) if (a>5){ console.log("A es mayor de 5"); } else{ console.log("A no es mayor de 5"); } //Tipos de condiciones // Igualdad == Igualdad de valor y tipo === // Diferencia != Diferencia de valor y tipo !== // Comparaciones >, >=,<, <= let b=5; let c="5"; //Cierto if (a==b){ console.log("a es = b"); } //Cierto if (a==c){ console.log("a es = c"); } //Cierto if (a===b){ console.log("a es = b y del mismo tipo"); } //Falso if (a===c){ console.log("a es = c y del mismo tipo"); } //Falso if (a!==b){ console.log("a es != b y del mismo tipo"); } //Cierto if (a!==c){ console.log("a es != c y del mismo tipo"); } //Falso if (a>b){ console.log("A es mayor que b"); } //Cierta if (a>=b){ console.log("A es mayor o igual que b"); } //Combinación de condiciones // AND (Y) && : Las dos condiciones se tienen que cumplir // OR (O) || : Basta que se cumpla una condición // NOT (NO) ! : Niega la condición let edad=20; let dinero=300; //Puedes hacer un salto en paracaídas si eres mayor de edad y tienes más de 50 € if ((edad>=18) && (dinero>=50)){ console.log("Puedes saltar en paracaídas"); } edad=20; let altura=170; //Te puedes montar en la montaña rusa si tienes más de 16 años o mides más de 160 if((edad>=16) || (altura>=160)){ console.log("Te puedes montar en la montaña rusa"); } //El ! niega la condición, si es falsa pasa a cierta y viceversa if (!(edad<16)){ console.log("No tienes menos de 16 años"); }
Mes: febrero 2021
Ejercicio repaso JS
Crear una variable cp que valga ‘08010’ y una ciudad que valga Barcelona y mostrar por consola los valores concatenados
Crear una variable precio que valga 75 y una variable unidades que valga 7 y mostrar por consola el precio total
A la variable precio sumarle 10 con atajo
A la variable unidades quitarle una unidad con decremento
Mostrar el resto de la división del nuevo total entre 2 para saber si es par o impar.
Operadores aritméticos
let a=10; let b=20; let c; c=a+b; console.log(c); c=a-b; console.log(c); c=a*b; console.log(c); c=a/b; console.log(c); c=5; c++;//Incremento 1 unidad c(5)->(6) console.log(c); c--;//Decremento 1 unidad c(6)->(5) console.log(c); //Módulo o resto de la división /* 14/10 = 1 y de resto 4 */ console.log(14%10); //El resto de dividir 10 entre 4 let numero=15; console.log(numero%2); //Impar-->da resto 1 numero=400; console.log(numero%2);//Par-->da resto 0 console.log(numero%3);//Al dividir entre 3-->da resto 1 //Artimética modular console.log(30%3);//Al dividir entre 3-->da resto 0 console.log(31%3);//Al dividir entre 3-->da resto 1 console.log(32%3);//Al dividir entre 3-->da resto 2 console.log(33%3);//Al dividir entre 3-->da resto 0 //Atajos de operaciones //Sin atajo c=100; c=c+5; //c ahora vale 105 console.log(c); //Con atajo c=100; c+=5; //c ahora vale 105 equivalente a c=c+5 c++; //c vale 106 console.log(c); //Estos operadores vienen del C, C++ y muchos lenguajes (JS, Java, C#,...) utilizan la misma sintaxis //Elevar 2 a la décima potencia c=2**10; console.log(c); a=5**3; console.log(a); let nueva=a*b*c; console.log(nueva); //Las cadenas se concatenan al sumar let nombre="Juan"; let apellidos="Pi"; console.log(nombre+" "+apellidos); //Al mezclar cadenas y números depende de los valores let x = 5 + 5; //Si los dos son números: suma let y = "5" + 5; //Si hay una cadena se concatena, aunque sea número let z = "Hello" + 5; //Si hay una cadena que no es número se concatena console.log(x); //10 console.log(y); //55 console.log(z);//Hello5 //Precedencia de operadores // (), ++,--, **, *,/,%,+,- c=10+2*5; //c vale 20 c=10+(2*5); //c vale 20 console.log(c); c=(10+2)*5; //c vale 60 console.log(c);
Nombres de variables
//Usar letras, números, $, _ //Nombre no puede empezar por número //Case sensitive, sensible a mayúsculas y minúsculas //Válidos let juan=0; let $juan=5; let _juan=56; let juan1980=43; let juan1980_es_un_crack=43; let precio_unidad=900; let estoeslacaña=21; //No recomiendo usar acentos o ñ en nombres de variables //No válidos //let 6juan=5; //let juan&=90; //Estas variables son diferentes; let Juan=10; let JUAN=20; let JuaN=30; console.log(juan+" | "+JUAN+" | "+JuaN+" | "+Juan); //Error típico let Precio=200; let cantidad=5; console.log(cantidad*Precio); //Cuando usar mayúsculas //Nunca let sueldo_mensual=1200; let sueldomensual=1200; //Utilizar CamelCase: empezar en minúsculas y el inicio de cada palabra mayúscula let sueldoMensual=900;
JS variables
//Variables //La forma tradicional var edad=15; //Esto no se hace muy mala práctica nombre="Juan"; //Crear variable ES6 let apellidos="Pérez"; //Crear constante ES6 const pi=3.1416; console.log(pi+" | "+typeof(pi)); //pi=4; //Esto da error console.log(pi); //No tipado: al declarar variables no especificamos el tipo let precio=100; //precio es de tipo number console.log(precio+" | "+typeof(precio)); //El tipo es Number precio="Muy caro"; //precio es de tipo String o cadena console.log(precio+" | "+typeof(precio)); let booleano=true; console.log(booleano+" | "+typeof(booleano)); let elementos=[1,2,3]; console.log(elementos+" | "+typeof(elementos)); //Esto es a efectos de ejemplo: NO HACER let multitipo=1; console.log(multitipo+" | "+typeof(multitipo)); multitipo=1123123; console.log(multitipo+" | "+typeof(multitipo)); multitipo=false; console.log(multitipo+" | "+typeof(multitipo)); multitipo="Hola que tal"; console.log(multitipo+" | "+typeof(multitipo)); multitipo=[1,2,3]; console.log(multitipo+" | "+typeof(multitipo)); //Resumiendo //Declaramos variables con let y const y NO se redeclaran let sueldo=3000; const irpf=.15; //Las variables no están tipadas pero deberíamos actuar como si lo estuvieran //El tipo lo obtenemos con typeof console.log(typeof(sueldo)); //Number //Los tipos básicos son: Number, String, boolean y object let numero=5; let cadena="Hola"; let bool=true; let objeto=[1,2,3]; //Las variables (let) pueden cambiar su valor. Las constantes (const) no sueldo=5000; irpf=.2 //Error
Mini ejercicio flex
Usando solo flexbox crear una fila con cuatro artículos que ocupen todo el ancho de la página y dentro de cada artículo una cabecera y debajo un botón centrado.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #contenedor { display: flex; justify-content: space-around; } #contenedor>div { background-color: bisque; background: linear-gradient(to right, bisque, #eacda3); flex-basis: 200px; border-radius: 20px 0; box-shadow: 7px 7px 5px #DDDDDD; } #contenedor h1 { text-align: center; } #contenedor>div>div { display: flex; justify-content: center; align-items: center; height: 100px; } </style> </head> <body> <div id="contenedor"> <div> <h1>Artículo</h1> <div><button>Pínchame</button></div> </div> <div> <h1>Artículo</h1> <div><button>Pínchame</button></div> </div> <div> <h1>Artículo</h1> <div><button>Pínchame</button></div> </div> <div> <h1>Artículo</h1> <div><button>Pínchame</button></div> </div> </div> </body> </html>
Tres artículos con espacio lateral
<div class="row"> <div class="col-md-2"></div> <div class="col-md-8 "> <div class="row"> <article class="col-md-4 bg-primary"> <h1>Artículo</h1> </article> <article class="col-md-4 bg-primary"> <h1>Artículo</h1> </article> <article class="col-md-4 bg-primary"> <h1>Artículo</h1> </article> </div> </div> <div class=" col-md-2"> </div> </div>
<div class="col-md-8 d-flex justify-content-around"> <article class="bg-primary"> <h1>Artículo</h1> </article> <article class="bg-primary"> <h1>Artículo</h1> </article> <article class="bg-primary"> <h1>Artículo</h1> </article> </div>
Usabilidad
Definición:
https://es.semrush.com/blog/usabilidad-web-principios-jakob-nielsen/
https://kschool.com/blog/usabilidad-ux/sabes-la-usabilidad-la-experiencia-usuario/
https://boluda.com/tutorial/25-puntos-clave-de-la-usabilidad/
La fuente de todo esto:
Ejemplos:
Caminos del deseo (Desire paths)
Así no:
Así sí:
Definición de UX:
Enlaces interesantes:
Como ganar el concurso a la peor web del año:
https://uxdesign.cc/21-tips-for-winning-the-worst-site-2021-award-5e3cee7f5551
https://raiolanetworks.es/blog/heatmap-o-mapa-de-calor-para-tu-web/