Autor: Juan Pablo Fuentes

Formador de programación y bases de datos

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

Solución ejercicios módulos

utiliades.js

function ordenar(a, b) {
    if (a > b) {
        return [b, a];
    } else {
        return [a, b];
    }
}

function ordenarT(a, b) {
    return a > b ? [b, a] : [a, b];
}

function iniciales(nombre,apellidos){
    return [nombre.at(0)+apellidos.at(0),apellidos.at(0)+nombre.at(0)]
}

export {ordenar,ordenarT,iniciales}

test.js

import { ordenar,iniciales } from "./utilidades.js";

let [a,b]=ordenar(1,8);

console.log(a,b)

let [ini1,ini2]=iniciales("Juan","Pérez");
console.log(ini1)
console.log(ini2)

Variables en python

# Esto es un comentario
# Lo utilizo para poner cosas para mí mismo o los demás

# variables: son como cajitas donde ponemos valores
# Python es un lenguaje no tipado
# defino las variables sin poner ningún tipo
# Python sabe de que tipo son por el valor que contienen
numero = 9  # Tipo int (numero entero)
decimales = 9.5  # tipo float (numero con decimales)
cadena = "Hola que tal"  # tipo string (cadena de texto)
booleano = True  # tipo booleano, un tip especial que almacena valores cierto o falso

print(numero)  # imprimir por la consola
numero = numero + 2
print(numero)
numero = 27
print(numero)
print(type(numero))
print(decimales)
decimales = decimales + numero
print(decimales)

# no estaría muy bien visto
numero = "Ahora soy una cadena"
print(numero)
print(type(numero))

alumno = "Ana Pi"
edad = 22
email = "ana@ana.com"
print(alumno, edad, email)

# Vamos a crear una variable sueldo con valor de 2000
# Y una variable irpf con valor de 0.15
# Y luego las imprimimos por la consola

sueldo = 2000
irpf = 0.15
print(sueldo, irpf)

edad = input("Dime tu edad: ")
print(edad)
# conversiones de tipo utilizando int, float, str, bool
edad = int(edad)
print(edad)
print(type(edad))
edad = edad + 5
print(edad)

# variables: cajitas donde poner valores
# int, float, str, bool
# Python no es tipado, la variable será del tipo de su contenido
# convertir de un tipo a otro usando int,float,str,bool
# cuidado porque hay cosas que se pueden convertir y otras que no
# cualquier cosa se puede convertir en una cadena
# pero no cualquier cadena se puede convertir en un número

a = str(5)  # correcto
# b=int("hila") # error porque no se puede convertir

# print para imprimir e input para pedir cosas por la consola
# input nos devuelve una cadena, si pedimos un número lo tendremos que convertir

a = 5  # n umero
b = "5"  # cadena
a = a + 5 # correcto
b = b + 5 # error porque uno es cadena (str) y otro número (int)

Respuesta ejercicio 1 refactorizada

// Guardo el estado del juego
let juego = {
    puntos: 0,
    preguntas: [{
        pregunta: "¿Con qué propiedad se pone el color de fondo en CSS?",
        correcta: "backgroundColor",
        incorrecta1: "color",
        incorrecta2: "bckColor",
        incorrecta3: "setColor"
    },
    {
        pregunta: "¿tipo de letra en CSS?",
        correcta: "font-family",
        incorrecta1: "fontaine",
        incorrecta2: "letter",
        incorrecta3: "pp"
    },
    {
        pregunta: "¿ocultar elemento en CSS?",
        correcta: "display:none",
        incorrecta1: "display:hide",
        incorrecta2: "shadow",
        incorrecta3: "esconding"
    }]
}

// Espero a que se cargue la página
window.onload = function () {
    let boton = document.getElementById("boton");
    // Llamo a la función jugar
    boton.addEventListener("click", jugar);
}

// Aquí está la lógica del juego
function jugar() {
    // puntos que valdrán 0
    juego.puntos = 0;
    // Recorrer el array de las preguntas
    for (let pregunta of juego.preguntas) {

        // Desordeno las respuestas
        let respuestas = getRespuestasDesordenadas(pregunta);

        // Creo una cadena numerada con las respuestas
        let cadena = getCadenaArray(respuestas);
        let respuesta = Number(prompt(pregunta.pregunta + "\n" + cadena));

        // Compruebo que la respuesta esté bien
        if (respuestas[respuesta - 1] == pregunta.correcta) {
            alert("Muy bien");
            juego.puntos++;
        } else {
            alert("Muy mal, looser");
        }

    }
    // Al acabar de recorrer le mostramos los puntos
    alert("Has sacado " + juego.puntos + " puntos");

}
function getRespuestasDesordenadas({ correcta, incorrecta1, incorrecta2, incorrecta3 }) {
    let respuestas = [correcta, incorrecta1, incorrecta2, incorrecta3];
    // Desordeno el array
    respuestas.sort(() => .5 - Math.random());
    return respuestas;
}
function getCadenaArray(respuestas, separador = "  -  ") {
    let cadena = respuestas.map((valor, indice) => (indice + 1) + ") " + valor).join(separador);
    return cadena;
}

Respuesta ejercicio 1

let preguntas = [{
    pregunta: "¿Con qué propiedad se pone el color de fondo en CSS?",
    correcta: "backgroundColor",
    incorrecta1: "color",
    incorrecta2: "bckColor",
    incorrecta3: "setColor"
},
{
    pregunta: "¿tipo de letra en CSS?",
    correcta: "font-family",
    incorrecta1: "fontaine",
    incorrecta2: "letter",
    incorrecta3: "pp"
},
{
    pregunta: "¿ocultar elemento en CSS?",
    correcta: "display:none",
    incorrecta1: "display:hide",
    incorrecta2: "shadow",
    incorrecta3: "esconding"
}];

// Al pulsar un botón se desencadena la acción
// ¿Se capturar el click de un botón?

let boton = document.getElementById("boton");

// Clásica
/*
boton.onclick=function(){
    console.log("click");
}
*/
// Moderna y normalmente ahora es la preferida porque permite añadir más capturas
boton.addEventListener("click", function () {
    // puntos que valdrán 0
    let puntos = 0;
    // Recorrer el array de las preguntas
    for (let pregunta of preguntas) {
        // Para cada pregunta
        // Mostrar un prompt con el texto de la pregunta y las respuestas desordenadas
        // La pregunta-> Acceder a la propiedad del objeto
        // respuestas-> saber como desordenar una serie de respuestas
        // Guardar las respuestas en un array y desordenarlo
        let respuestas = [pregunta.correcta, pregunta.incorrecta1, pregunta.incorrecta2, pregunta.incorrecta3];
        // Desordeno el array
        respuestas.sort(() => .5 - Math.random());
        // De un array sacar una cadena es muy fácil: recorrerlo y añadir la posición +1
        // Creo la cadena juntando las respuestas. Le pongo un número a cada respuesta
        let cadena = "";
        for (let i = 0; i < respuestas.length; i++) {
            cadena += (i + 1) + ") " + respuestas[i] + "  -  ";
        }

        // Lo mismo usando map y join
        cadena = respuestas.map((valor, indice) => (indice + 1) + ") " + valor).join("  -  ");

        let respuesta = Number(prompt(pregunta.pregunta + "\n" + cadena));

        // Cuando el usuario me de la respuesta
        // Comprobar si es correcta: coger la posición del usuario -1 y ver el valor
        console.log(respuestas[respuesta - 1]);
        // Si ese valor==correcta muy bien y puntos++ else muy mal
        if (respuestas[respuesta - 1] == pregunta.correcta) {
            alert("Muy bien");
            puntos++;
        } else {
            alert("Muy mal, looser");
        }

    }
    // Al acabar de recorrer le mostramos los puntos
    alert("Has sacado " + puntos+ " puntos");

});

Ejemplo Módulo

En el html

 <script src="js/modulos.js" type="module"></script>

En el export:

function saludo() {
    console.log("hola");
}
function despedida() {
    console.log("adios")
}
const TRATAMIENTO = "DON/DOÑA "
export { saludo, despedida, TRATAMIENTO }

En el import

import { saludo,despedida,TRATAMIENTO } from "/js/export.js";

saludo();

despedida();

console.log(TRATAMIENTO+" Ana");