Pedir valores

let precio=prompt("Introduzca el precio");
console.log(precio);
let unidades=prompt("Introduzca las unidades");
console.log(unidades);
let total=parseInt(precio)+parseInt(unidades);
console.log(total);
 total=parseFloat(precio)+parseFloat(unidades);
console.log(total);

Con lo anterior pedir al usuario una ciudad y una cantidad y mostrar por consola lo siguiente:

Envío gratis si ciudad es Barcelona
Envío gratis si ciudad es Tarragona o Lleida y cantidad>=20
Envío gratis si ciudad es cualquiera y cantidad>=100


let ciudad=prompt("Introduzca la ciudad");
let cantidad=parseFloat(prompt("Introduzca la cantidad"));
let mensaje="Envío 10 €";
if (ciudad=="Barcelona"){
	mensaje="Envío gratis";
} 
 if (((ciudad=="Tarragona") || (ciudad=="Lleida")) && cantidad>=20){
	mensaje="Envío gratis";
} 
 if (cantidad>=100){
	mensaje="Envío gratis";
}
console.log(mensaje);

/* Otra solución */

if (ciudad=="Barcelona"){
	console.log("Envío gratis");
} else if (((ciudad=="Tarragona") || (ciudad=="Lleida")) && cantidad>=20){
	console.log("Envío gratis");
} else  if (cantidad>=100){
	console.log("Envío gratis");
}

//Otra más

if (ciudad=="Barcelona" || ((ciudad=="Tarragona" || ciudad=="Lleida")&& cantidad>=20) || cantidad>=100){
	console.log("Envío gratis");
}

JS switch

let ciudad="Tarragona";

//Analizamos el valor de la variable ciudad
switch(ciudad) {
	case "Barcelona": //Si ciudad = Barcelona entra por aquí
	  console.log("Envío gratis");
	  break; //Y aquí se interrumpe
	case "Tarragona": //Si ciudad= Tarragona o LLeida entra por aquí
	case "LLeida":
	  console.log("Envío 5€");
	  break; //Se interrumpe
	default: //Si no se cumple ninguna de las condiciones anteriores
	  console.log("Envío 10€");
  } 

https://www.w3schools.com/js/js_switch.asp

Mini ejercicio if

Tenemos un precio de 13 y unas unidades de 7. Calcular el precio total y mostrar:

Si es par o impar
Si es mayor de 100 o menor de 100
Si es par Y mayor de 100
Si es impar O mayor de 100

//Tenemos un precio de 13 y unas unidades de 7. 
//Calcular el precio total y mostrar:

let precio=13;
let unidades=7;

let total= precio*unidades;
let modulo=total%2;

//Si es par o impar
if (modulo==0){
	console.log("Es par");
} else{
	console.log("Es impar");
}

//Si es mayor de 100 o menor de 100
if (total>=100){
	console.log("Total mayor o igual a 100");
} else{
	console.log("Total menor de 100");
}

//Si es par Y mayor de 100
if ((modulo==0) && (total>=100)){
	console.log("Par y mayor de 100");
}
//Si es impar O mayor de 100
if ((modulo==1) || (total>=100)){
	console.log("Impar o mayor de 100");
}

if (modulo==1){
	if (total>100){
		console.log("Es impar y mayor de 100");
	} else{
		console.log("Es impar y menor igual de 100");
	}
}

total=250;

//Anidar if con la estructura else if
if (total<100){
	console.log("Menor que 100");
} else if (total<200){
	console.log("Entre 100 y 200");
} else if (total<300){
	console.log("Entre 200 y 300");
} else{
	console.log("Mayor de 300");
}

//Comprobar rangos de números
if ((total>=100) && (total<200)){
	console.log("El total está entre 100 y 200 (200 no incluído)");
}

//Comprobar rangos de números
if ((total<100) || (total>200)){
	console.log("El total NO está entre 100 y 200 (no incluídos)");
}
//Esto no funciona
if (100<=total<200){
	console.log("...");
}


Estructura de control if

//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");
}

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>