let billion = 1e-6;
console.log(0xFF);
console.log(0b10001);
let num=7;
console.log(num.toString(16));
console.log(num.toString(2));
console.log(num.toString(7));
let suma=0.1+0.2;
console.log(Math.round(suma*100)/100);
console.log(suma.toFixed(2));
let j=Number("aa");
console.log(j);
console.log(Number.isNaN(j));
console.log(j==NaN);
console.log(parseInt('100px'))
console.log(Number('100px'))
for(let i=0;i<10;i++){
console.log(aleatorio(6,2));
}
function aleatorio(max,min=1){
return Math.trunc(Math.random()*(max-min+1))+min;
}
Math.max(3,5,1,78,4);
Categoría: JavaScript
Ejercicios objetos
Cread una función a la que le pasemos un número y nos cree un objeto que tenga una propiedad ‘valor’ y el valor el número que le hemos pasado
Cread una función creaUsuario a la que le pasamos un nombre, un email y una ciudad y nos crea un objeto con esas tres propiedades
Cread una función mayor a la que le pasamos dos objetos como los del primer ejercicio y nos devuelve el objeto que tiene mayor valor. ¿Estamos devolviendo una referencia o una copia? Probadlo y decidid que es lo que mejor tenemos que devolver.
Cread una función hayComunes a la que le pasamos dos objetos y nos devuelve true si tienen propiedades compartidas y false si no es así.
Cread una función a la que le pasamos dos objetos y nos crea un objeto nuevo con las propiedades NO COMPARTIDAS de los objetos. Es decir, si el primer objeto tiene de propiedades nombre y edad y el segundo nombre y apellidos nos crea un objeto con las propiedades edad y apellidos. Los valores, los que tengan.
Cread una función masGrande a la que le pasamos dos objetos y nos devuelve el objeto que tenga más propiedades.
Más ejemplos objetos: copias
function makeUser(name, age) {
return {
name,
age,
for:5,
7:"hola",
"1":"boo",
};
}
let user = makeUser("John", 30);
console.log(user);
let user2 = makeUser("Ana", 50);
// Si una propiedad existe
console.log("name" in user2);
console.log("names" in user2);
// Recorro todas las propiedades
for (clave in user){
console.log(clave,user[clave])
}
// Los objetos son referencias
let user3=user2;
user3.name="Eustaquio";
console.log(user2);
// Para copiar un objeto tenemos varias opciones
let user4={};
// Usamos assign para copiar valores
Object.assign(user4,user);
user4.name="Ares";
console.log(user);
console.log(user4);
let a={
a:1
};
let b={
b:2
};
let c={
c:3,
a:6
};
let d={};
Object.assign(d,a,b,c);
console.log(d) //{a: 1, b: 2, c: 3}
let user5 = {
name: "John",
sizes: {
height: 182,
width: 50
}
};
// Esto lo usamos para copiar de manera recursiva
let clone = structuredClone(user5);
Ejemplos objetos
let user = { // un objeto
name: "John", // En la clave "name" se almacena el valor "John"
age: 30, // En la clave "age" se almacena el valor 30
age2: 30, // En la clave "age" se almacena el valor 30
};
console.log(user)
console.log(user.name)
user.apellidos = "Pi";
console.log(user);
delete user.age;
let prop="apellidos";
console.log(user[prop]);
let foo="www";
user[foo]=7;
console.log(user);
let test={
[foo]:1,
[prop]:"Pi",
}
console.log(test)
Ejemplo funciones flecha
// Formato standard de la función flecha
let sum = (a, b) => a + b;
// Funciones flecha multilineas
let fibonacci=(num)=>{
let a=1,b=1,c=a+b;
for (let i=2;i<num;i++){
c=a+b;
a=b;
b=c;
}
return c;
}
console.log(sum(2,3))
function checkEdad(edad,si,no){
let res="";
if(edad>=18){
res=si();
}else{
res=no();
}
console.log(res);
}
checkEdad(10,function(){return "Puedes entrar al casino";},function(){return "No puedes entrar al casino";});
checkEdad(20,()=>"Puedes entrar al casino",()=>"No puedes entrar al casino");
Probemos los bucles
Hagamos con JS algunos ejercicios típicos:
Fibonacci hasta el término 20
Tabla de multiplicar del 7
Reloj en JS superoptimizado y ofuscado
Ejercicio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visitantes</title>
<link rel="stylesheet" href="css/estilos.css">
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid ">
<div class="row">
<div class="col">
<h1 class="display-3 ">Control de visitantes</h1>
<button id="add" class="btn btn-success ">Añadir visitante</button>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="reutilizar" name="reutilizar" value="something" checked>
<label class="form-check-label" for="reutilizar">Reutilizar números</label>
</div>
</div>
</div>
<div class="row">
<div class="col">
<h1 class="display-4 ">Visitantes</h1>
<div id="visitantes"></div>
</div>
<div class="col">
<h1 class="display-4 ">Histórico</h1>
<div id="historico"></div>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
.numero{
display: inline-block;
border:2px solid blue;
padding: 5px;
min-width: 2em;
font-size: 2em;
text-align: center;
font-weight: bold;
margin: 10px;
}
estado = {}
window.onload = function () {
estado.lista = [];
estado.historico = [];
estado.actual = 1;
estado.limite = 20;
estado.add = document.getElementById("add");
estado.add.addEventListener("click", addVisitante);
estado.visitantes = document.getElementById("visitantes");
estado.historicos = document.getElementById("historico");
estado.reutilizar = document.getElementById("reutilizar");
iniciar();
}
function iniciar() {
pintarLista();
}
function addVisitante() {
if (estado.reutilizar.checked) {
// Buscar el primer elemento libre de la lista
let numero = 1;
while (estado.lista.includes(numero)) {
numero++;
}
estado.lista.push(numero);
estado.lista.sort((a,b)=>a-b)
} else {
estado.lista.push(estado.actual);
estado.actual++;
}
pintarLista();
}
function checkAdd() {
if (estado.lista.length <= estado.limite) {
estado.add.classList.remove("disabled")
} else {
estado.add.classList.add("disabled")
}
}
function pintarLista() {
checkAdd();
pintarDatos(estado.lista, estado.visitantes);
pintarDatos(estado.historico, estado.historicos);
}
function pincharCaja() {
let numero = Number(this.innerHTML);
estado.historico = estado.historico.concat(estado.lista.filter(x => x == numero))
if (estado.historico.length>estado.limite){
estado.historico=estado.historico.slice(-estado.limite);
}
estado.lista = estado.lista.filter(x => x != numero);
pintarLista();
}
function esPrimo(numero){
for(let i=2;i<=Math.sqrt(numero);i++){
if (numero%i==0){
return false;
}
}
return true;
}
function pintarDatos(datos, destino) {
destino.innerHTML = ""
for (let elemento of datos) {
let caja = document.createElement("div");
caja.innerHTML = elemento;
caja.classList.add("numero");
if (esPrimo(elemento)){
caja.classList.add("bg-warning");
}
caja.addEventListener("click", pincharCaja);
destino.append(caja)
}
}
Solución ejercicio examen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bolsa de horas</title>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 ">
<form>
<h3 class="mt-5 ">Datos del pedido</h3>
<div class="mb-3 mt-3">
<label for="cliente" class="form-label">Cliente:</label>
<input type="text" class="form-control" id="cliente" placeholder="Introduzca el nombre del cliente" name="cliente">
</div>
<div class="mb-3">
<label for="horas" class="form-label">Horas:</label>
<input type="number" class="form-control" id="horas" placeholder="Introduzca las horas" name="horas">
</div>
<div class="btn-group mb-3">
<button type="button" class="btn btn-primary tipoEmpleado">Junior</button>
<button type="button" class="btn btn-primary tipoEmpleado">Senior</button>
<button type="button" class="btn btn-primary tipoEmpleado">Master</button>
</div>
<div>
<button id="addPedido" type="button" class="btn btn-success ">Añadir</button>
</div>
</form>
</div>
<div class="col-md-8 ">
<h1 class="mt-3 display-3 ">Bolsa de horas</h1>
<table class="table table-striped ">
<thead>
<tr>
<th>Nombre cliente</th>
<th>Horas contratadas</th>
<th>Horas restantes</th>
<th>Tipo empleado</th>
<th>Importe</th>
<th>Acciones</th>
</tr>
</thead>
<tbody id="tabla">
</tbody>
</table>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
let estado = {} // Para guardar todos los componentes que me hacen falta
window.onload = function () {
// Guardo todos los accesos a los elementos html que necesito
// Me olvido del html para el resto del código
estado.tabla=document.getElementById("tabla");
estado.cliente=document.getElementById("cliente");
estado.horas=document.getElementById("horas");
estado.addPedido=document.getElementById("addPedido");
estado.tipoEmpleado=document.getElementsByClassName("tipoEmpleado");
estado.tipoSeleccionado=""
estado.precios={"Junior":30,"Senior":60,"Master":80}
asociarEventos("tipoEmpleado",clickEmpleado);
estado.pedidos=[]
estado.addPedido.addEventListener("click",addPedido);
iniciar();
}
function iniciar() {
// Rcupero los datos del storage esto se hace solo una vez
getStorageData();
pintarPedidos();
}
function addPedido(){
// Recuperar los datos del formulario
let horas=Number(estado.horas.value);
let precio=estado.precios[estado.tipoSeleccionado] || 30;
let pedido={
nombre:estado.cliente.value,
horas:horas,
tipoEmpleado:estado.tipoSeleccionado, // TODO: a ver que hago con esto
restantes:horas,
importe:horas*precio
}
// Añadir al pedido el objeto
estado.pedidos.push(pedido);
// volver a pintar los datos
pintarPedidos();
}
function consumir(){
let idpedido=this.dataset.idpedido;
estado.pedidos[idpedido].restantes--;
if (estado.pedidos[idpedido].restantes<=0){
estado.pedidos.splice(idpedido,1);
}
pintarPedidos();
}
function clickEmpleado(){
for (let boton of estado.tipoEmpleado){
boton.classList.remove("active");
}
this.classList.add("active");
estado.tipoSeleccionado=this.innerHTML
}
// Una capa intermedia entre la función pura y nuestro programa
// Con el fin de que todo sea más escalable
function pintarPedidos() {
setStorageData();
pintarDatos(estado.pedidos, estado.tabla)
}
function pintarDatos(pedidos, destino) {
lista = "";
let totalHoras=0;
let totalImporte=0;
let i=0;
for (let pedido of pedidos) {
lista += `<tr>
<td>${pedido.nombre}</td>
<td>${pedido.horas}</td>
<td>${pedido.restantes}</td>
<td>${pedido.tipoEmpleado}</td>
<td>${pedido.importe}</td>
<td>
<button data-idpedido="${i}" type="button" class="btn btn-danger btn-sm consumir">
Consumir
</button>
</td></tr>`;
i++
totalHoras+=pedido.restantes;
totalImporte+=pedido.importe
}
lista += pedidos.length>0?`<tr><td></td><td>Horas</td>
<td>${totalHoras}</td><td>Importe</td><td>${totalImporte}</td></tr>`:"";
destino.innerHTML = lista;
asociarEventos("consumir",consumir)
}
// Funciones de localStorage
function getStorageData(){
let pedidos=localStorage.getItem("pedidos") || "[]";
pedidos=JSON.parse(pedidos);
estado.pedidos=pedidos
}
function setStorageData(){
localStorage.setItem("pedidos",JSON.stringify(estado.pedidos))
}
function asociarEventos(clase,funcion){
for (let boton of document.getElementsByClassName(clase)) {
boton.addEventListener("click",funcion);
}
}
Solución alumnos definitiva
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista alumnos</title>
<link rel="stylesheet" href="./css/bootstrap1.css">
</head>
<body>
<div class="container ">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAlumno">
Añadir alumno
</button>
<!--Utilizo la tabla para que quede más o menos bonito-->
<table class="table table-striped m-4">
<thead>
<tr>
<th>Alumno</th>
<th>Nota</th>
<!-- Tengo el id para borrar todas las tareas-->
<th> <button type="button" class="btn btn-danger" id="borrar_alumnos">
Eliminar todos
</button></th>
</tr>
</thead>
<tbody id="lista_alumnos">
</tbody>
</table>
<!-- Utilizamos el Modal de w3school ¡copiado! -->
<div class="modal fade" id="modalAlumno">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Nuevo alumno</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- El input tiene un id porque necesito el valor -->
<div class="modal-body">
<input id="nombreAlumno" class="form-control " type="text"
placeholder="Introduzca el nombre del alumno">
<input id="notaAlumno" class="form-control " type="number"
placeholder="Introduzca la nota del alumno">
</div>
<!-- El boton de nueva tarea tiene un id por la misma razón -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" id="nuevo_alumno">Añadir alumno</button>
</div>
</div>
</div>
</div>
</div>
<script src="./js/bootstrap.bundle.js"></script>
<script src="./js/alumnos.js"></script>
</body>
</html>
let estado = {} // Para guardar todos los componentes que me hacen falta
window.onload = function () {
// Guardo todos los accesos a los elementos html que necesito
// Me olvido del html para el resto del código
estado.nuevo = document.getElementById("nuevo_alumno");
estado.nuevo.addEventListener("click", nuevoAlumno);
estado.borrar = document.getElementById("borrar_alumnos");
estado.borrar.addEventListener("click", borrarAlumnos);
estado.tabla = document.getElementById("lista_alumnos");
estado.nombre = document.getElementById("nombreAlumno");
estado.nota = document.getElementById("notaAlumno");
estado.modal = document.getElementById("modalAlumno");
estado.alumnos = [];
iniciar();
}
function iniciar() {
// Rcupero los datos del storage esto se hace solo una vez
getStorageData();
pintarAlumnos();
}
function nuevoAlumno() {
// Recuperar los datos del modal
let alumno = getDatosAlumno();
if (alumno.nota<0 || alumno.nota>10){
alert("Nota incorrecta")
return
}
// Añadirlos al estado
estado.alumnos.push(alumno);
// Pintar los datos
pintarAlumnos()
ocultarModal()
}
function borrarAlumnos() {
estado.alumnos = [];
pintarAlumnos();
}
function getDatosAlumno() {
return { nombre: estado.nombre.value, nota: Number(estado.nota.value) }
}
function ocultarModal() {
bootstrap.Modal.getInstance(estado.modal).hide();
}
function borrarAlumno() {
let idalumno=this.dataset.idalumno
estado.alumnos=estado.alumnos.filter((x,i)=>i!=idalumno);
pintarAlumnos();
}
// Funciones de localStorage
function getStorageData(){
let alumnos=localStorage.getItem("alumnos") || "[]";
alumnos=JSON.parse(alumnos);
estado.alumnos=alumnos
}
function setStorageData(){
localStorage.setItem("alumnos",JSON.stringify(estado.alumnos))
}
// Una capa intermedia entre la función pura y nuestro programa
// Con el fin de que todo sea más escalable
function pintarAlumnos() {
setStorageData();
pintarDatos(estado.alumnos, estado.tabla)
}
function pintarDatos(alumnos, destino) {
lista = "";
let suma=0;
let i=0;
for (let alumno of alumnos) {
lista += `<tr><td>${alumno.nombre}</td><td class=${alumno.nota >= 5 ? "text-success " : "text-danger"}>${alumno.nota}</td><td>
<button data-idalumno="${i}" type="button" class="btn btn-danger btn-sm borrar_alumno">
Borrar
</button>
</td></tr>`;
i++
suma+=alumno.nota
}
let media=Math.round(suma*100/alumnos.length)/100
lista += alumnos.length>0?`<tr><td>Media</td><td class=${media >= 5 ? "text-success " : "text-danger"}>${media}</td></tr>`:"";
destino.innerHTML = lista;
for (let boton of document.getElementsByClassName("borrar_alumno")) {
boton.addEventListener("click",borrarAlumno);
}
}