Juan Pablo Fuentes – Página 34

Ejemplos combinadas

edad = 19

altura = 130

print("Tu altura es de ", 130, " cm")
# En una atracción del Tibidabo puedes entrar si mides más de 130 cm o tienes más de 10 años
# condiciones combinadas: tener varias condiciones conectadas con operadores lógicos
# ¿Qué es un operador lógico? Básicamente dos: and y or
# and implica que se cumplan las dos condiciones
# or que se cumpla alguna

if edad >= 10 or altura >= 130:
    print("Puedes subir")
else:
    print("No puedes subir")

# Para entrar en la discoteca tienes que tener más de 18 años y llevar zapatos

llevoZapatos = True

if edad >= 18 and llevoZapatos:
    print("Puedes entrar a la discoteca")
else:
    print("No puedes entrar")

# hay otro operador lógico que es el not: lo que hace es negar la condición

llevoZapatillas = True
if edad >= 18 and not llevoZapatillas:
    print("Puedes entrar")
else:
    print("No puedes entrar")

departamento = "marketing"
sueldo = 1000

# si el departamento es marketing y el sueldo está entre 900 y 1500 el irpf es de .8
# si el departamento es contabilidad y el sueldo está entre 1000 y 5000 el irpf es de .9

if departamento == "marketing" and sueldo >= 900 and sueldo <= 1500:
    irpf = .8

if departamento == "contabilidad" and sueldo >= 1000 and sueldo <= 5000:
    irpf = .9

# prioridad: not and or

# departamento marketing y sueldo > 3000 o departamento contabilidad y sueldo >4000 irpf=1.2

if departamento == "marketing" and sueldo > 3000 or departamento == "contailidad" and sueldo > 4000:
    irpf = 1.2

# pero si no lo tengo claro
if (departamento == "marketing" and sueldo > 3000) or (departamento == "contailidad" and sueldo > 4000):
    irpf = 1.2

# tengo una tienda online y aplico descuentos si se cumplen las siguientes características:
# por defecto ningún descuento
# si el cliente es de Barcelona y la compra es superior a 500, 10% de descuento
# si el cliente es de Tarragona y la compra es superior a 700, 10% de descuento
# si no es de Barcelona ni Tarragona y la compra es superior a 1000, 5% de descuento
descuento = 0
compra = 800
ciudad = "Logroño"

# ciudad=="Barcelona"
# compra>=500

if ciudad == "Barcelona" and compra >= 500:
    descuento = 10
if ciudad == "Tarragona" and compra > 700:
    descuento = 10

# este if es equivalente a los dos anteriores
if ciudad == "Barcelona" and compra >= 500 or ciudad == "Tarragona" and compra > 700:
    descuento = 10

# ciudad no sea Tarragona o Barcelona

if not (ciudad == "Barcelona" or ciudad == "Tarragona") and compra >= 1000:
    descuento = 5

Solución ejercicios

# Crea un programa que pida al usuario dos números y determine cuál es el
# mayor de los dos números.
# Si son iguales, muestra cualquiera de los dos
# mejorado: un mensaje que indique que los números son iguales.

# pedir un numero al usuario y convertirlo
numero1 = input("Dime el primer número ")
numero1 = float(numero1)
# pedir un segundo numero y convertirlo
numero2 = input("Dime el segundo número ")
numero2 = float(numero2)
# con un if mirar cual es el mayor e imprimirlo
if numero1 > numero2:
    print("El número mayor es ", numero1)
elif numero2 > numero1:
    print("El número mayor es ", numero2)
else:
    print("Son iguales")

# o a>b y el mayor es a o b>a y el mayor es b ==> lo pasamos a if


# Escribe un programa que solicite al usuario su calificación en un examen y determine si
# ha aprobado o reprobado. Si la calificación es igual o superior a 60,
# muestra “Aprobado”, de lo contrario, muestra “Reprobado”.

calificacion = input("Dime tu calificación ")
calificacion = float(calificacion)
if calificacion >= 60:
    print("Aprobado")
else:
    print("Reprobado")

Pasar una función como propiedad

App.js

import './App.css'; // Estilos propios del componente 
import Tarjeta from './componentes/Tarjeta'; // Importo la tarjeta

const foo=(elemento)=>{
  console.log("Has pinchado en " + elemento.alt)
    if (elemento.alt === "Marie Curie") {
      elemento.src = "/img/ok.jpg"
    } 
}
function App() {

  // Devuelvo un div con las tarjetas que quiera
  // la Tarjeta tiene unas propiedades que se pasan al componente
  // Pasamos el nombre y la url de la imagen
  return (
    <div className="App">
      <h1>¿Quien descubrió el radio?</h1>
      <Tarjeta nombre="Einstein" correcta="Marie Curie" foo={foo}/>
      <Tarjeta nombre="Marie Curie" correcta="Marie Curie"  foo={foo}/>
      <Tarjeta nombre="Schrodinger" correcta="Marie Curie" foo={foo}/>
    </div>
  );
}

export default App;

Tarjeta.js

import Foto from './Foto'; // Importo Foto
import Cabecera from './Cabecera'; // Importo Cabecera


// Tarjeta le paso las propiedades nombre y url
// Esto va dentro de props pero uso destructuring
function Tarjeta({nombre, correcta,foo}) {
    // En el div es donde pongo la clase, porque es elemento html
    // Uso los componentes Cabecera y Foto
    return (
        <div className="tarjeta">
            <Cabecera  nombre={nombre} correcta={correcta}/>
            <Foto descripcion={nombre}  foo={foo}/>
        </div>
    )
}

export default Tarjeta;

Foto.js

function Foto({descripcion, foo}) {
    let ruta='/img/'
    let nombre=descripcion.toLowerCase().replaceAll(" ","")+".jpg"
    return <img onClick={(evt)=>{foo(evt.target)}} className="foto" src={ruta+nombre} alt={descripcion} />
}

export default Foto;

Ejemplos eventos

App.js

import './App.css'; // Estilos propios del componente 
import Tarjeta from './componentes/Tarjeta'; // Importo la tarjeta


function App() {

  // Devuelvo un div con las tarjetas que quiera
  // la Tarjeta tiene unas propiedades que se pasan al componente
  // Pasamos el nombre y la url de la imagen
  return (
    <div className="App">
      <h1>¿Quien descubrió el radio?</h1>
      <Tarjeta nombre="Einstein" correcta="Marie Curie" />
      <Tarjeta nombre="Marie Curie" correcta="Marie Curie"/>
      <Tarjeta nombre="Schrodinger" correcta="Marie Curie"/>
    </div>
  );
}

export default App;

Tarjeta.js

import Foto from './Foto'; // Importo Foto
import Cabecera from './Cabecera'; // Importo Cabecera


// Tarjeta le paso las propiedades nombre y url
// Esto va dentro de props pero uso destructuring
function Tarjeta({nombre, correcta}) {
    // En el div es donde pongo la clase, porque es elemento html
    // Uso los componentes Cabecera y Foto
    return (
        <div className="tarjeta">
            <Cabecera  nombre={nombre} correcta={correcta}/>
            <Foto descripcion={nombre}/>
        </div>
    )
}

export default Tarjeta;

Cabecera.js

const comprobar = (objeto, correcta) => {
    
    console.log("Has pinchado en " + objeto.innerHTML)
    if (objeto.innerHTML === correcta) {
        objeto.innerHTML = "Muy BIEN"
    } else {
        objeto.innerHTML = "INCORRECTO"
    }
}

function Cabecera({ nombre, correcta }) {

    return <h1 onClick={(event) => { comprobar(event.target, correcta) }} >{nombre}</h1>;
}

export default Cabecera;

Minipágina React

Yo tengo varias cosas.

En public tengo una carpeta img con diferentes imágenes. Si dentro de mi programa pongo ruta absoluta ‘/img/…’ React va a buscar esa imagen en la carpeta.

Tengo mi App como siempre, que en general es el punto de entrada de cualquier web.

import './App.css'; // Estilos propios del componente 
import Tarjeta from './componentes/Tarjeta'; // Importo la tarjeta


function App() {

  // Devuelvo un div con las tarjetas que quiera
  // la Tarjeta tiene unas propiedades que se pasan al componente
  // Pasamos el nombre y la url de la imagen
  return (
    <div className="App"> 
      <Tarjeta nombre="Einstein" url='/img/einstein.jpg' />
    </div>
  );
}

export default App;

El componente ‘Tarjeta’ es un componente compuesto, importa otros componentes:

import Foto from './Foto'; // Importo Foto
import Cabecera from './Cabecera'; // Importo Cabecera

// Tarjeta le paso las propiedades nombre y url
// Esto va dentro de props pero uso destructuring
function Tarjeta({nombre, url}) {
    // En el div es donde pongo la clase, porque es elemento html
    // Uso los componentes Cabecera y Foto
    return (
        <div className="tarjeta">
            <Cabecera nombre={nombre}/>
            <Foto  descripcion={nombre} url={url}/>
        </div>
    )
}

export default Tarjeta;

Cabecera.js

function Cabecera({nombre}) {
    return <h1>{nombre}</h1>;
}

export default Cabecera;

Fotos.js

function Foto({url,descripcion}) {
    return <img className="foto" src={url} alt={descripcion} />
}

export default Foto;

Más ejemplos if

# Basándonos en el imc decir al usuario si está bien en su peso o no

peso = input("Dame tu peso ek kg ")  # pido el peso y nos devuelve una cadena
altura = input("Dame tu altura en metros ")  # pido la altura y nos devuelve una cadena
peso = float(peso)  # float es para números con decimales
altura = float(altura)  # La altura tendrá decimales

imc = peso / (altura ** 2)
print("Tu imc es ", imc)
if imc < 18.5:
    print("Bajo peso")
elif imc < 25:
    print("Peso normal")
elif imc < 35:
    print("Sobrepeso")
else:
    print("Obesidad")

anyo = input("Dime tu año de nacimiento")
anyo = int(anyo)
edad = 2024 - anyo
if edad < 18:
    print("Eres menor de edad")
else:
    print("Eres mayor de edad")

# Desarrolla un programa que pida al usuario un número entero y determine si es par o impar.
# Si es par, muestra “Es un número par”, si es impar, muestra “Es un número impar”.

numero = input("Dime un número, por favor ")
numero = int(numero)
if numero % 2 == 0:
    print("Es par")
else:
    print("Es impar")

Ejemplos if python

edad = 12

if edad >= 18:
    print("Eres mayor de edad")
    print("Puedes entrar a la discoteca")
else:  # opcional y se ejecuta si no se cumple la condición
    print("Los menores de edad no tienen permitida la entrada")

print("Esto está fuera del if")

# > >= < <= == (igual)   != (diferente)

ciudad = "Barcelona"

if ciudad == "Barcelona":
    print("Tienes descuento")

if ciudad != "Tarragona":
    print("Ven a visitarnos")

# if ... elif nos permite concatenar diferentes condiciones
# Normalmente se utiliza sobre la misma variable y se usa para
# rangos
if edad < 10:
    print("Eres un infante")
elif edad < 18:
    print("Eres menor de edad")
elif edad < 65:
    print("Eres un adulto")
else:
    print("Eres un jubilado")

if edad < 18:
    if ciudad == "Barcelona":
        print("Eres un menor de edad de Barcelona")
    else:
        print("Eres un menor de edad pero no de Barcelona")
else:
    print("Eres mayor de edad")

Ejemplos React

App.js

import logo from './logo.svg';
import './App.css';
import Foto from './componentes/Foto';

function App() {
  return (
    <div className="App">
     <Foto descripcion="Einstein" url="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Albert_Einstein_Head.jpg/330px-Albert_Einstein_Head.jpg"/>
     <Foto descripcion="Marie Curie" url="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQbLv9v4IWJ5tPUsHQwLsWLIPhIpznuTZGsNBfoHqXYNLxPSLHf"/>
    </div>
  );
}

export default App;

/componentes/Foto.js

function Foto({url,descripcion}) {
    return <img className="foto" src={url} alt={descripcion} />
}

export default Foto;

Más React

import logo from './logo.svg';
import './App.css';
const Saludo = ({nombre,apellidos="",edad=0}) => {
  console.log(nombre,apellidos,edad)
  return <h1>Hola {nombre+" "+apellidos}, qué tal?</h1>;
}
const gestionarClick = (evt) => {
  
  console.log("clickado",evt);
}
const Despedida = () => {
  let tipo = "compañero"
  return (
    <>
      <h2  onClick={gestionarClick} className='destacado'>Adios {tipo.toUpperCase()}</h2>
      <p >Nos vemos otro día</p>
      <br />
      <img onClick={gestionarClick} className='App-logo' src={logo} />
    </>
  );
}
function App() {
  return (
    <div className="App">
      <Saludo nombre="Juan" apellidos="Pérez" edad="30" />
      <Despedida />
      <Saludo nombre="Ana" />
    </div>
  );
}

export default App;

Ejemplos React

const Saludo = (props) => {
  console.log("Hola que tal")
  return <h1>Hola {props.nombre}, qué tal?</h1>;
}
const gestionarClick = () => {
  console.log("clickado");
}
const Despedida = () => {
  let tipo = "compañero"
  return (
    <>
      <h2 className='destacado'>Adios {tipo.toUpperCase()}</h2>
      <p onClick={gestionarClick}>Nos vemos otro día</p>
      <br />
      <img className='App-logo' src={logo} />
    </>
  );
}
function App() {
  return (
    <div className="App">
      <Saludo nombre="Juan" />
      <Despedida />
      <Saludo nombre="Ana" />
    </div>
  );
}

Estadística con Python

Git

Docker

React

Programación en C#

Bases de datos relacionales con MySql

Autor: Juan Pablo Fuentes

Ejemplos combinadas

Solución ejercicios

Pasar una función como propiedad

Ejemplos eventos

Minipágina React

Más ejemplos if

Ejemplos if python

Ejemplos React

Más React

Ejemplos React