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