Mes: abril 2024

Ejemplos variables e If

let precio=100;
let cantidad=15;
let total=precio * cantidad;

if (total>1000){
    console.log("Tienes un 10% de descuento");
    console.log(total)
    console.log("Descuento: ",total*.1); // total*10/100 -> total*.1
    console.log("Importe total:", total*.9); // total * (100-10)/100 ->total*.9
}else{
    console.log("Importe total: ", total);
}

let hasZapatillas=false;

if (hasZapatillas){
    console.log("Con zapatillas no se entra en la discoteca");
}else{
    console.log("Puedes entrar");
}

let horasDiarias=8;
let diasTrabajados=30;
let totalHoras=horasDiarias*diasTrabajados;
let precioHora=20;

if (diasTrabajados>=30){
    precioHora=21;
}

console.log("Sueldo: ",totalHoras*precioHora);

let sueldo=totalHoras*precioHora;

// Si el sueldo es mayor de 10000->irpf=30  Si es mayor de 5000 ->20 (ok) En otro caso->15 (ok)
sueldo=16000;
let irpf=15;

// El siguiente código tiene un error ¿Cual? y ¿Cómo lo arreglo?
if(sueldo>5000){
    irpf=20;
}
if (sueldo>10000){
    irpf=30;
} 


console.log("IRPF: ",sueldo*irpf/100);

JS If

// Estructura de control

let edad=10;

// Instrucción if 
// if (condicion){...}
// La condición es un valor booleano que será cierto o falso
// Yo he utilizado una comparación
// >, >= mayor mayor igual, < <= menor menor igual, == igual, != diferente
if (edad>=18){
    // Lo que se ejecuta si la condición se cumple
    console.log("Puedes entrar");
    console.log("Porque eres mayor de edad");
    console.log("Bienvenido");
} else {
    // Lo que se ejecuta si la condición NO se cumple
    console.log("No puedes entrar");
}

// Lo mismo de antes pero solo daremos aviso si no es mayor de edad
if (edad<18){
    console.log("No puedes entrar")
}

let precio=100;

if (precio==100){
    console.log("Felicidades porque el PRECIO es redondo");
}

if (precio!=10){
    console.log("El precio no es 10")
}

let cantidad=18;

if (cantidad*precio>1000){
    console.log("Es muy caro");
}

Operaciones

// Operadores de JS
// Todas las operaciones de toda la vida

let a=5;
let b=6;

let suma=a+b;
let resta=a-b;
let multiplicacion=a*b;
let division=a/b;

console.log(suma);
console.log(resta);
console.log(multiplicacion);
console.log(division);

console.log(a**b); // 5 elevado a la sexta potencia 5^6

// Resto de la división (%)

console.log(52 % 3); // Divido 52 entre 3, me da 17 y me sobra 1. Pues el resto es el 1

// Operadores incremento y decremento
a++; // le suma uno a 'a'
b--; // Le resta uno a 'b'
console.log(a,b);

// Atajos de las operaciones

a=a+10; // Le sumo 10 a 'a'
a+=10; // Es lo mismo

a+=b; // Le estoy sumando 'b' a 'a'

console.log(a)

let nombre="Ana";
let apellido="Pi";

// En cadenas el '+' nos concatena las cadenas
let nombreCompleto=nombre+" "+apellido;
console.log(nombreCompleto);

let numero="10";
console.log(numero);
console.log(typeof(numero));

console.log(typeof(a));

console.log(a+numero); // Malo 3110  41  
console.log(numero+a); // Error 1031 41

// Conversión entre tipos

let precio=Number(numero); // Convierto a número
let producto=String(a); // Convierto a cadena
let descuento=Boolean(b); // Convierto a booleano

console.log(precio,producto,descuento);

console.log(Number("13a"));
console.log(Number("a13a"));

Tipos de datos en JS

// Números
let precio=8.5;
let cantidad=8;
let total=precio*cantidad;

console.log(precio);
console.log(cantidad);
console.log(total)

// Tienen una precisión, no son ilimitados
console.log(9007199254740991 + 1); // 9007199254740992
console.log(9007199254740991 + 2);
console.log(0.1+0.2) // Esto no lo hace bien

let grande=7982739182391832719283131238123791238n;
console.log(grande+1n);

// Cadenas
let nombre="Ana";
let apellido='Pi';
let calculo=`el total es ${total}`;
console.log(nombre);
console.log(apellido);
console.log(calculo);

// Booleanos (cierto o falso)

let cierto=true;
let falso=false;

console.log(cierto);
console.log(falso);

// Valores especiales

// Inifinito
let a=9/0;
console.log(a);

// Valor nulo
a=null;
console.log(a);

// Valor indefinido
let b;
console.log(b);

let c="";

JS Variables


// Escribir en la consola de la página
console.log("Hola que tal")
console.log("Yo muy bien")

// Programación
/*

Comentarios de varias líneas

*/

// Pongamos ; siempre al final de cada sentencia

/* Variables */

// Crea una variable llamada 'nombre' cuyo valor es 'juan'
let nombre="Juan";
console.log(nombre)
// Cambio el valor de una variable ya creada
nombre="Ana";
console.log(nombre);

// Las variables en JS no tienen tipo: lenguaje no tipado
nombre=80;
console.log(nombre)

// Las mayúsculas importan
let Nombre="Pepe";
let NOMBRE="Rosa";
console.log(nombre);
console.log(Nombre);
console.log(NOMBRE);
// Como nombrar una variable
let na="Eva Pi"; // na es nombre alumno ESTO NO
let nombreAlumno="Eva Pi"; // ESTO SÍ
// Utilizamos camel case: empezamos en minúsculas y cada palabra nueva mayúsculas
let precioPorUnidad=9;
let nombreDepartamento="Administracion";

// Una variable no puede empezar por un número pero si tener números
// let 5nombre="www";
let nombre5="www";
let $nombre="Ana";
let _pepe="pepe";
let nombre_completo="Ana Pi";

// Esto se puede pero no es aconsejable
let camión="renault";
let añoVenta=2024;

// Esto no está permiido
// let let=9;

let apellido="Pérez";

// Esto se permite pero está mal, tened mucho cuidado
Apellido="Martínez";

Repaso general

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Repaso</title>
    <link rel="stylesheet" href="css/estilos.css">
</head>

<body>
    <!-- En el html solamente tenemos el contenido no tenemos nada de estilo-->
    <h1 id="titulo">Hola que tal</h1>
    <h6>Yo muy bien</h6>
    <p class="extra">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias consequatur possimus et. Tempora dolorem
        tempore in debitis distinctio, sunt incidunt exercitationem praesentium non maxime aspernatur, sit velit
        officiis! Ut, iusto?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam illo repellendus dicta deleniti voluptates. Modi,
        maxime ab quasi accusamus consectetur doloribus sunt autem libero asperiores illum velit fugiat similique neque.
    </p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li class="movido">3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div>
        <p>Esto es un bloque</p>
    </div>
    <header>
        <h1>Bloque de cabecera</h1>
    </header>
    <main>
        <aside><p>Barra lateral</p></aside>
        <section>
            <article>
                <h3 class="extra">Artículo 1</h3>
            </article>
            <article>
                <h3>Artículo 2</h3>
            </article>
            <article>
                <h3>Artículo 3</h3>
            </article>
        </section>
        <section id="galeria">
            <div class="imagen"><img src="https://picsum.photos/200"/><h4>Esto es una foto</h4></div>
            <div class="imagen"><img src="https://picsum.photos/200"/><h4>Esto es una foto</h4></div>
            <div class="imagen"><img src="https://picsum.photos/200"/><h4>Esto es una foto</h4></div>
        </section>
    </main>
</body>

</html>

/*Estilo de todos los elementos de mi web */
*{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
body{
    overflow-x: hidden;
    /* defino  una variable para todos los elementos que estén dentro del body */
    --fondo:yellow;
}
/*Estilo de una etiqueta */
h1{
    color:rgb(81, 81, 81);
}
/* clase y va a todos los elementos de esa clase */
.extra{
    background-color: blanchedalmond;
}

/* id que es un elemento único */
#titulo{
    /* Utilizo calc para que el ancho sea el de la página menos 200px */
    width: calc(100% - 200px);
    margin: auto;
    background-color: black;
    color: blanchedalmond;
    text-align: center;
    /* Aplicamos la animación */
    animation-name: baile;
    animation-duration: 6s;
    animation-delay: 3s;
}
article{
    margin-left: 50px;
    padding: 2em;
    background-color: gainsboro;
    float: left; /* los elementos se coloquen unos al lado de otros */
}
/* todos los h3 dentro de un article */
article h3{
    margin: 0;
}
.movido{
    position: relative;
    left: 50px;
}
.imagen{
    border: solid 2px gray;
    box-shadow: 5px 5px 5px gray;
    text-align: center;
    transition: 2s;
}
.imagen img{
    width: 100%;
    /* las transiciones tarden 2seg en ejecutarse */
    transition: 2s;
}
/* La imagen se hace grande al pasar por encima */
.imagen img:hover{
    transform: scale(1.2,1.2);
}
/* Cambiamos el color al pasar por encima */
.imagen:hover{
    /* uso la variable fondo definida antes */
    background-color:var(--fondo);
}
/* con el flex consigo que todos los elementos estén alineados y responsive */
#galeria{
    display: flex;
    clear: both;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

/* Con el media query controlo que en determinadas resoluciones cambie el estilo para que
quede mejor */
@media  screen and (max-width:500px) {
    article{
        margin: 50px 0;
        float: none;
    }
    
}

/* Animación de cuatro pasos en los que cambiamos tamaño, rotación y colores */
@keyframes baile {
0%{
    transform: scale(0.5,0.5);
    color:black;
}    
25%{
    color:red;
    transform: rotate(20deg);
}
50%{
    color:black;
    transform: scale(2,1.5);
}
75%{
    transform: rotate(-20deg);
}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de layout con grid</title>
    <link rel="stylesheet" href="css/layout.css">
</head>
<body>
    <header id="pageHeader"><h1>Tornillería martínez</h1>></header>
    <article id="mainArticle"><h1>Tornillería Martínez</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam veniam laboriosam eaque, alias veritatis reprehenderit maiores nulla quis ratione sequi aliquam omnis in tenetur perferendis. Repellendus architecto harum mollitia laudantium?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam veniam laboriosam eaque, alias veritatis reprehenderit maiores nulla quis ratione sequi aliquam omnis in tenetur perferendis. Repellendus architecto harum mollitia laudantium?</p></article>
    <nav id="mainNav"><ul>
        <li>Inicio</li>
        <li>Nosotros</li>
        <li>Productos</li>
        <li>Contacto</li>
        <li>Servicios</li>
    </ul></nav>
    <div id="siteAds"><img src="https://picsum.photos/100"/><img src="https://picsum.photos/100"/></div>
    <footer id="pageFooter">(C) Diseño mortal</footer>
</body>
</html>

body { 
    display: grid;
    grid-template-areas: 
      "header header header"
      "nav article ads"
      "footer footer footer";
    grid-template-rows: 80px 1fr 70px;  
    grid-template-columns: 20% 1fr 15%;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    height: 100vh;
    margin: 0;
    }  
  header, footer, article, nav, div {
    padding: 1.2em;
    background: gold;
    }
  #pageHeader {
    grid-area: header;
    }
  #pageFooter {
    grid-area: footer;
    }
  #mainArticle { 
    grid-area: article;      
    }
  #mainNav { 
    grid-area: nav; 
    }
  #siteAds { 
    grid-area: ads; 
    } 
  /* Stack the layout on small devices/viewports. */
  @media all and (max-width: 575px) {
    body { 
      grid-template-areas: 
        "header"
        "article"
        "ads"
        "nav"
        "footer";
      grid-template-rows: 80px 1fr 70px 1fr 70px;  
      grid-template-columns: 1fr;
   }
  }

Ejemplos variables

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/variables.css">
</head>
<body>
    <h1>Hola que tal</h1>
    <h2>Muy bien</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic dolore provident minus commodi veniam, nihil necessitatibus sint nulla. Quidem explicabo facere repellendus perspiciatis ea! Impedit in eum sapiente! Et, quaerat.</p>
    <div id="anuncio">Esto es un anuncio</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

html{
    --gris:blue; /* las variables se definen con dos guiones: -- */
    --blanco:yellow;
    --tamanyo:2em;
}
h1{
    color:var(--gris);
}
#anuncio{
    --blanco:white; /*sobreescribiendo la variable blanco */
    color:var(--blanco);
    background-color:   var(--gris);
    font-size: var(--tamanyo);
}
ul{
    background-color: var(--gris);
    color: var(--blanco);
}

CSS avanzado

Usamos los pseudoelementos, principalmente, para insertar contenido antes y después de los elementos ¿Con que objeto? Para hacer flipadas.

Pseudoelementos

Ejemplos de uso

Más ejemplos

Si los usamos junto con hover se consiguen cosas increíbles:

Tutorial pseudoelementos y animaciones

CSS3 incorpora funciones matemáticas que nos permiten poner valores que sean el resultado de un cálculo:

Funciones matemáticas

https://css-tricks.com/a-complete-guide-to-calc-in-css/

Explicadas con ejemplos

Algunos casos prácticos

Tipografía fluida con clamp

Aplicar máscaras a imágenes:

mask-image

Algunos ejemplos

Variables, muy útiles para no tener que cambiar valores (por ejemplo, colores) en cada sitio. Algo que ya nos daban precompiladores como SASS:

Css variables

Css variables

Guía con ejemplos

Usarlas como un PRO

La función attr:

Css attr

Css attr

En content funciona en todos los navegadores, pero de momento no está completamente implementada para usarla en otros sitios.