Autor: Juan Pablo Fuentes

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;

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;

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

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)

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

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

});

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

https://lenguajejs.com/javascript/modulos/que-es-esm/

https://www.w3schools.com/react/react_es6_modules.asp

https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Modules

https://es.javascript.info/modules-intro

function extremos(cadenas) {
    let larga = cadenas[0];
    let corta = cadenas[0];
    for (let cadena of cadenas) {
        if (cadena.length > larga.length) {
            larga = cadena;
        }
        if (cadena.length < corta.length) {
            corta = cadena;
        }
    }
    return [corta, larga];
}

let alumnos = ["Ana", "Rodrigo", "Pepe"];

let [corto, largo] = extremos(alumnos);
console.log(corto);
console.log(largo)

let [mascorta] = extremos(alumnos);
let [, maslarga] = extremos(alumnos);
console.log(mascorta);
console.log(maslarga);

const myVehicle = {
    brand: 'Ford',
    model: 'Mustang',
    color: 'red'
}

const updateMyVehicle = {
    type: 'car',
    year: 2021,
    color: 'yellow'
}

const myUpdatedVehicle = { ...myVehicle, ...updateMyVehicle }
console.log(myUpdatedVehicle)
const nuevo = { ...myUpdatedVehicle, color: "pink" };
console.log(nuevo);

const noDesestructurado = { myVehicle, updateMyVehicle }
console.log(noDesestructurado)

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [numbersOne, numbersTwo];
console.log(numbersCombined);

let miObjeto={nombre:"Ana",edad:20,mail:"a@a.com",apellido:"Pi"};
console.log(miObjeto)
let {a,b,c}=miObjeto;
console.log(a,b,c)

let aa,bb;
[aa,bb]=[1,2,3];

console.log(aa,bb)

let nombre,edad;

// {nombre,edad}=miObjeto; Esto da error
({nombre,edad}=miObjeto); // Hay que ponerlo enter paréntesis
console.log(nombre,edad)
// o usar let
let {mail}=miObjeto;
console.log(mail)

let {mail:email}=miObjeto; // recupero la propiedad mail pero la renombro a email
console.log(email)

let {sueldo=1000}=miObjeto; // Como sueldo no existe coge el valor por defecto
console.log(sueldo)

let propiedadABuscar='apellido';
let {[propiedadABuscar]:prop}=miObjeto; // Siempre tenemo que poner un 'alias', en este caso prop
console.log(prop);

function saludo(nombre,apellidos){
    console.log("Hola "+nombre+" "+apellidos);
}

saludo(miObjeto.nombre,miObjeto.apellido);

function saludoDesestructurado({nombre,apellido}){
    console.log("Hola "+nombre+" "+apellido);
}

saludoDesestructurado(miObjeto);