¿Funciones flecha o tradicionales?

https://www.freecodecamp.org/news/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26/

https://dmitripavlutin.com/differences-between-arrow-and-regular-functions/

https://es.stackoverflow.com/questions/1799/cuando-usar-una-funci%C3%B3n-flechaarrow-function-en-vez-de-una-funci%C3%B3n-com%C3%BAn


//Ejemplos de funciones, variables de funciones y función flecha
function saludo () {
  return 'hola'
}

saludo = function () {
  return 'hola'
}

saludo = () => 'hola'

function suma (num) {
  let suma = 0
  for (let i = 1; i <= num; i++) {
    suma += i
  }
  return suma
}

suma = function (num) {
  let suma = 0
  for (let i = 1; i <= num; i++) {
    suma += i
  }
  return suma
}

suma = (num) => {
  let suma = 0
  for (let i = 1; i <= num; i++) {
    suma += i
  }
  return suma
}

Ejercicio Agencia de viajes

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
	<div class="container ">
		<h2>Formulario Agencia de viajes</h2>
		<form>

			<label for="cantidad">Viajeros:</label>
			<input type="number" onchange="calcular()" class="form-control" placeholder="Introduzca viajeros"
				id="viajeros" name="viajeros" value="1">
			<label for="precio">Días:</label>
			<input type="number" class="form-control" placeholder="Introduzca días" id="dias" name="dias">
			<p>
				<label class="form-check-label">
					<input type="checkbox" id="seguro" name="seguro" class="form-check-input" value="si">Seguro
				</label>
			</p>
			<select class="form-control" id="precio" name="precio">
				<option value="17">Normal</option>
				<option value="25">Superior</option>
				<option value="40">Extra</option>
			</select>
			<h3>Importe total: <span id="total"></span></h3>
			<p id="descuento"></p>
			<button type="button" onclick="calcular()" class="btn btn-primary">Enviar</button>
			<button type="reset" class="btn btn-primary">Borrar</button>
			<script src="js/test.js"></script>
		</form>
	</div>
</body>

</html>
function calcular () {
  const viajeros = parseFloat(document.getElementById('viajeros').value)
  const dias = parseFloat(document.getElementById('dias').value)
  const precio = parseFloat(document.getElementById('precio').value)
  const seguro = document.getElementById('seguro').checked
  let total = precio * viajeros * dias
  if (seguro) {
    total += 2 * viajeros
  }
  if (total > 450 && total < 500) {
    document.getElementById('descuento').innerHTML = 'Por 50 € más tienes descuento'
  } else if (total >= 500) {
    document.getElementById('descuento').innerHTML = 'Al superar 500 € de compra, tiene un <b>descuento del 10%</b>'
    total *= 0.9
  } else {
    document.getElementById('descuento').innerHTML = ''
  }
  if (!isNaN(total)) {
    document.getElementById('total').innerHTML = total
  }
}


// Si hacemos código en una web siempre tendremos este tipo de funciones
// Que recuperan valores y que cambian elementos
function calcular () {
  const viajeros = parseFloat(document.getElementById('viajeros').value)
  const dias = parseFloat(document.getElementById('dias').value)
  const precio = parseFloat(document.getElementById('precio').value)
  const seguro = document.getElementById('seguro').checked
  const total = calcularTotal(precio, viajeros, dias, seguro)
  document.getElementById('total').innerHTML = total
}

// Función debe ser como una caja negra sin conexión con el exterior
function calcularTotal (precio, viajeros, dias, seguro) {
  let total = precio * viajeros * dias
  if (seguro) {
    total += 2 * viajeros
  }
  if (total >= 500) {
    total *= 0.9
  }
  if (isNaN(total)) {
    return ''
  } else {
    return total
  }
}

// Si hacemos código en una web siempre tendremos este tipo de funciones
// Que recuperan valores y que cambian elementos
const calcular = () => {
  const viajeros = parseFloat(document.getElementById('viajeros').value)
  const dias = parseFloat(document.getElementById('dias').value)
  const precio = parseFloat(document.getElementById('precio').value)
  const seguro = document.getElementById('seguro').checked
  const total = calcularTotal(precio, viajeros, dias, seguro)
  document.getElementById('total').innerHTML = total
}

// Función debe ser como una caja negra sin conexión con el exterior
const calcularTotal = (precio, viajeros, dias, seguro) => {
  let total = precio * viajeros * dias
  if (seguro) {
    total += 2 * viajeros
  }
  if (total >= 500) {
    total *= 0.9
  }
  if (isNaN(total)) {
    return ''
  } else {
    return total
  }
}

Ejercicio producto

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
	<div class="container ">
		<h2>Formulario reclamaciones</h2>
		<form>

			<label for="nombre">Producto:</label>
			<input type="text" class="form-control" placeholder="Introduzca el nombre" name="nombre" id="nombre">
			<label for="cantidad">Cantidad:</label>
			<input type="number" class="form-control" placeholder="Introduzca cantidad" id="cantidad" name="cantidad"
				value="1">
			<label for="precio">Precio:</label>
			<input type="number" class="form-control" placeholder="Introduzca el precio" id="precio" name="precio">
			<p>
				<label class="form-check-label">
					<input type="checkbox" id="iva" name="iva" class="form-check-input" value="cliente">¿Tiene
					IVA?
				</label>
			</p>
			<h3>Importe total: <span id="total"></span></h3>
			<button type="button" onclick="calcular()" class="btn btn-primary">Enviar</button>
			<script src="js/test.js"></script>
		</form>
	</div>
</body>

</html>
function calcular () {
  const producto = document.getElementById('nombre').value
  console.log(producto)
  const cantidad = parseFloat(document.getElementById('cantidad').value)
  console.log(cantidad)
  const precio = parseFloat(document.getElementById('precio').value)
  console.log(precio)
  const iva = document.getElementById('iva').checked
  console.log(iva)
  // Yo he comprobado que no tengo ningún error
  let total = cantidad * precio
  console.log(total)
  if (iva) {
    total = total + total * 0.21 // total*=1.21
  }
  console.log(total)

  // Sé perfectamente que me funciona el cálculo del total

  document.getElementById('total').innerHTML = total
}

Ejercicio forms+JS

Vamos a hacer una página web que nos pida dos fechas y tengamos un botón ‘Comprobar’ que al pulsarlo nos diga ‘Correcto’ Si la primera fecha es menor que la segunda e incorrecto en caso contrario.
Nos lo puede decir como vosotros queráis.

Ejercicios DOM

Pongamos un input para poner una ciudad
Y otro input que va a ser gastos de envío
Y un botón calcular

Si la ciudad es Barcelona: gastos de envío 0
Si la ciudad es Tarragona o Lleida: gastos de envío 5
Si es otra ciudad gastos de envío: 10

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<p>Ciudad: <input type="text" id="ciudad" placeholder="Introduzca la ciudad"></p>
	<p>Gastos de envío: <input type="text" id="gastos" readonly></p>
	<h1>Los gastos de envío son: <span id="gastos2"></span></h1>
	<p><input type="button" onclick="calcular()" value="Calcular"></p>
	<script src="js/test.js"></script>
</body>

</html>

function calcular () {
  let ciudad = document.getElementById('ciudad').value
  ciudad = ciudad.toLowerCase()
  if (ciudad == 'barcelona') {
    document.getElementById('gastos').value = 'Gratis'
    document.getElementById('gastos2').innerHTML = 'Gratis'
  } else if (ciudad == 'tarragona' || ciudad == 'lleida') {
    document.getElementById('gastos').value = '5 €'
    document.getElementById('gastos2').innerHTML = '5 €'
  } else {
    document.getElementById('gastos').value = '10 €'
    document.getElementById('gastos2').innerHTML = '10 €'
  }
}
function calcular2 () {
  const ciudad = document.getElementById('ciudad').value
  let precio = '10 €'
  if (ciudad == 'Barcelona') {
    precio = 'Gratis'
  } else if (ciudad == 'Tarragona' || ciudad == 'LLeida') {
    precio = '5 €'
  }
  document.getElementById('gastos').value = precio
  document.getElementById('gastos2').innerHTML = precio
}

Cambiar estilos

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#no,
		#si {
			display: none;
		}
	</style>
</head>

<body>
	<h1>Ejercicios HTML</h1>
	<p>Calculadora</p>
	<p>
		Introduce tu edad<input type="text" id="edad" placeholder="Introduce tu edad">
	<p><input type="button" onclick="comprobar()" value="Entrar"></p>
	<h1 id="no">No puedes entrar</h1>
	<h1 id="si">P'Alante</h1>
	<script src="js/test.js"></script>
</body>

</html>
function comprobar () {
  const edad = parseFloat(document.getElementById('edad').value)
  if (edad >= 18) {
    document.getElementById('si').style.display = 'inherit'
    document.getElementById('no').style.display = 'none'
  } else {
    document.getElementById('no').style.display = 'inherit'
    document.getElementById('si').style.display = 'none'
  }
}

Introducción acceso al DOM

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<h1>Ejercicios HTML</h1>
	<p>Calculadora</p>
	<p>
		Número 1<input type="text" id="numero1" placeholder="Introduce un número">
		Número 2<input type="text" id="numero2" placeholder="Introduce un número">
		Resultado<input type="text" id="resultado"></p>
	<p><input type="button" onclick="sumar()" value="Suma"></p>
	<h2>El resultado es <span id="res"></span></h2>
	<script src="js/test.js"></script>
</body>

</html>
function sumar () {
  const num1 = parseFloat(document.getElementById('numero1').value)
  const num2 = parseFloat(document.getElementById('numero2').value)
  document.getElementById('resultado').value = num1 + num2
  document.getElementById('res').innerHTML = num1 + num2
}

Ejercicio sencillo de funciones

Crear una función que le pasemos una cadena y un número y nos devuelva la cadena repetida número veces

Ej: Repetida(“hola”,3)->”holaholahola” Repetida(“*”,5)->”*****”

function repetida (cadena, veces) {
  let resultado = ''
  for (let i = 0; i < veces; i++) {
    resultado += cadena
  }
  return resultado
}

console.log(repetida('ww', 5))
console.log(repetida('hola', 3))
console.log(repetida('+', 15))

Introducción funciones


// Variables (tipadas o no)
// Estructuras de control: if y switch
// Bucles: while y for
// Función: agrupar código con el fin de reutilizarlo
// Podemos utilizar parámetros para que la reutilización se flexible
// Nos permiten devolver valores

function saludo (nombre) {
  console.log('Hola ' + nombre + ' ¿Qué tal estás?')
}
function arbolNumero (numero) {
  for (let i = 1; i <= numero; i++) {
    let cadena = ''
    for (let j = 1; j <= i; j++) {
      cadena += i
    }
    console.log(cadena)
  }
}
function suma (valor1, valor2) {
  console.log(valor1 + valor2)
}

function mayorEdad (nombre, edad) {
// Si es mayor de edad ponga "Hola nombre puedes pasar"
// Si es menor de edad ponga "Hola nombre NO puedes pasar"
  if (edad < 18) {
    console.log('Hola ' + nombre + ' NO puedes pasar')
  } else {
    console.log('Hola ' + nombre + ' puedes pasar')
  }
}
saludo('Ana') // Pasando un valor a un parámetro de la función
arbolNumero(8)
suma(10, 30)

mayorEdad('Ana', 20) // Hola Ana puedes pasar
mayorEdad('Eva', 10) // Hola Eva NO puedes pasar
mayorEdad('Pep', 18) // Hola Pep puedes pasar

const nombre = prompt('Dime tu nombre')
let edad = parseFloat(prompt('Dime tu edad'))
mayorEdad(nombre, edad)


// Una función no debería interactuar con el entorno
// Sólo recibir parámetros y devolver resultados
// Una función debería ser una caja negra a la que se le pasan valores y devuelve resultados

function sumaMal (valor1, valor2) {
  console.log(valor1 + valor2)
}

function suma (valor1, valor2) {
  return (valor1 + valor2)
}

function factorial (numero) {
  // La multiplicación de todos los números hasta el número que nos pasan
  // EJ: factorial de 5 es 1*2*3*4*5
  let resultado = 1
  for (let i = 2; i <= numero; i++) {
    resultado *= i
  }
  return resultado
}

function mayor (a, b) {
  // Nos devuelve el número mayor
  if (a > b) {
    return a
  } else {
    return b
  }
}

function otroMayor (a, b) {
  let mayor = a
  if (b > a) {
    mayor = b
  }
  return mayor
}
console.log(factorial(5))
console.log(factorial(8))
const res = factorial(7)

console.log(mayor(2, 20)) // 20
console.log(mayor(2, 2)) // 2
console.log(mayor(29, 20)) // 29

console.log(otroMayor(2, 20)) // 20
console.log(otroMayor(2, 2)) // 2
console.log(otroMayor(29, 20)) // 29

function mayor3 (a, b, c) {
  let mayor = a
  if (b > mayor) {
    mayor = b
  }
  if (c > mayor) {
    mayor = c
  }
  return mayor
}

function sumarHasta (numero) {
  // Devuelva la suma de todos los números hasta el número que me envíen
  let suma = 0
  for (let i = 1; i <= numero; i++) {
    suma += i
  }
  return suma
}

console.log(mayor3(1, 2, 3))
console.log(mayor3(2, 3, 1))
console.log(mayor3(3, 1, 2))
console.log(mayor3(3, 1, 1))
console.log(mayor3(3, 3, 1))

console.log(sumarHasta(3)) // 6
console.log(sumarHasta(100)) // 5050

// 6.- Escribir un programa que le pida al usuario un número
//  nos cuente la cantidad de multiplos de ese número menores de 100

function multiplos (numero, limite) {
  // Cuenta el número de múltiplos que hay ente 1 y el límite
  // Se contar: ++
  // Se recorrer los números entre y el límite: for (let i=1;i<=limite)
  // Se si un número es múltiplo de otro: Sí, con el %
  let cuenta = 0
  for (let i = 0; i < limite; i++) {
    if (i % numero == 0) {
      cuenta++
    }
  }
  return cuenta
}

const num = parseFloat(prompt('Dime el múltiplo'))
const lim = parseFloat(prompt('Dime el límite'))

const total = multiplos(num, lim)
console.log('El número de múltiplos de ' + num + ' desde el 1 hasta ' + lim + ' es ' + total)
console.log(multiplos(5, 30))
console.log(multiplos(num * 5, 30 + lim * 2))