Autor: Juan Pablo Fuentes

Formador de programación y bases de datos

Ejercicio búsqueda múltiple

<!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 ">
		<div class="form-group">
			<label for="cadena">cadena original:</label>
			<input type="text" class="form-control" id="cadena">
		</div>
		<div class="form-group">
			<label for="cadena">cadena a buscar:</label>
			<input type="text" class="form-control" id="buscar">
		</div>
		<h1 id="posicion"></h1>
		<button type="button" onclick="buscar()">Buscar</button>
		<script src="js/test.js"></script>
		</form>
	</div>
</body>

</html>

function buscar () {
  const cadena = document.getElementById('cadena').value
  const buscar = document.getElementById('buscar').value
  document.getElementById('posicion').innerHTML = ''
  let pos = cadena.indexOf(buscar)
  // ¿Cuando tenemos que parar la búsqueda? Cuando no encuentre la cadena a buscar
  // ¿Cómo se yo que no la ha encontrado? Porque indexOf devuelve -1
  // ¿Cual es la condición del while? Mientras la posición no sea -1 es que ha encontrado algo
  // Mientras pos>-1 sigue buscando porque la hemos encontrado
  while (pos > -1) {
    document.getElementById('posicion').innerHTML += pos + ','
    pos = cadena.indexOf(buscar, pos + 1)
  }
}
// cadena="En un lugar de la mancha"
// buscar="a"
// Busca la 'a'. La encuentra en la posición 9
// ¿Es 9 mayor que -1? Sí por lo tanto
// Lo pone en el HTML 9,
// Y buscamos la aparición de 'a' a partir de la pos+1, es decir
// Buscamos la 'a' a partir de la posición 10
// La encuentra en la posición 16
// ¿Es 16 mayor que -1? Sí por lo tanto
// Lo pone en el HTML 16,
// Y buscamos la aparición de 'a' a partir de la pos+1, es decir
// Buscamos la 'a' a partir de la posición 17
// La encuentra en la posición 19
// ¿Es 19 mayor que -1? Sí por lo tanto
// Lo pone en el HTML 19,
// Y buscamos la aparición de 'a' a partir de la pos+1, es decir
// Buscamos la 'a' a partir de la posición 20
// Buscamos la 'a' a partir de la posición 20
// La encuentra en la posición 23
// ¿Es 23 mayor que -1? Sí por lo tanto
// Lo pone en el HTML 23,
// Y buscamos la aparición de 'a' a partir de la pos+1, es decir
// Buscamos la 'a' a partir de la posición 24
// Ya no encuentra la 'a', devuelve -1 y salimos del bucle

// Es MUY DIFERENTE
// pos++ que pos+1
// pos++ es una instrucción que modifica el valor de pos: pos=pos+1 Si pos vale 3 pasa a valer 4
// pos+1 es un valor. Que vale lo que valga pos + 1 (ej 3->4) pero que no modifica nada

Ejercicio tirada de dados

<!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>Tirada de dados</h2>

		<button type="button" onclick="tirar()" class="btn btn-primary">Tira el dado</button>
		<h1 id="dado"></h1>
		<h2 id="mensaje"></h2>
		<h2 id="repetido"></h2>
		<script src="js/test.js"></script>
		</form>
	</div>
</body>

</html>

// En esta variable guardamos la tirada anterior del dado
// Para saber si se ha repetido necesitamos saber cual es el anterior
let anterior = 0

// Función hacemos lo típico de funciones de enlace:
// Obtenemos valores (en este caso no recuperamos ningún valor del HTML)
// LLamamos a las funciones que hacen los cálculos
// Mostramos resultados en la web
function tirar () {
  // LLamamos a la función tirar dado
  const resultado = tiradaDado()
  // Mostramos el resultado de la tirada
  document.getElementById('dado').innerHTML = resultado
  // Mostramos los mensajes típicos del parchís
  document.getElementById('mensaje').innerHTML = getMensaje(resultado)
  // Comprobamos si se ha repetido
  document.getElementById('repetido').innerHTML = repetido(resultado)
  anterior = resultado
}

// Comprobamos si el resultado actual coincide con el anterior
// Si es así, devolvemos el mensaje de que ha vuelto a salir
function repetido (dado) {
  if (dado == anterior) {
    return 'Ha vuelto a salir el ' + dado
  } else {
    return ''
  }
}

// Según el parchís con un 5 sales de casa y con un 6 vuelves a tirar
// Comprobamos el valor y devolvemos el mensaje correspondiente
function getMensaje (dado) {
  if (dado == 5) {
    return 'Sales de casa'
  } else if (dado == 6) {
    return 'Tiras otra vez'
  } else {
    return ''
  }
}

// Usamos la fórmula de w3schools para obtener un número aleatorio entre 1 y 6
function tiradaDado () {
  return Math.floor((Math.random() * 6) + 1)
}

Funciones matemáticas útiles JS

https://www.w3schools.com/jsref/jsref_obj_math.asp

https://www.w3schools.com/jsref/jsref_abs.asp
Math.abs(7)–>7
Math.abs(-7)–>7

https://www.w3schools.com/jsref/jsref_max.asp
Math.max(1,10,7)–>10

https://www.w3schools.com/jsref/jsref_min.asp
Math.min(1,10,7)–>1

https://www.w3schools.com/jsref/jsref_round.asp
Math.round(1.23)–>1
let num=1.234
Math.round(num*100)/100 –>1.23

https://www.w3schools.com/jsref/jsref_random.asp

Math.random()–>0.12312343534

Math.floor((Math.random() * 10) + 1); –> Número entre 1 y 10

¿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.

Ejercicio form/inputs

Crear un formulario que nos pida los siguientes datos:

Nombre
Edad
Email
Tipo de problema (urgente, muy urgente, para ayer)
Fecha
Es cliente o no
Es Premium o no
Observaciones

Elegid los tipos de objeto que creáis conveniente para cada dato.

<!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>
			<div class="form-group">
				<label for="nombre">Nombre:</label>
				<input required type="text" class="form-control" placeholder="Introduzca el nombre" name="nombre"
					id="nombre">
			</div>
			<div class="form-group">
				<label for="edad">Edad:</label>
				<input type="number" class="form-control" placeholder="Introduzca edad" id="edad" name="edad">
			</div>
			<div class="form-group">
				<label for="email">Email:</label>
				<input required type="email" class="form-control" placeholder="Introduzca email" id="email"
					name="email">
			</div>
			<div class="form-group">
				<label for="tipo">Tipo de problema:</label>
				<select class="form-control" id="tipo" name="tipo">
					<option value="1">Urgente</option>
					<option value="2">Muy urgente</option>
					<option value="3">Para ayer</option>
				</select>
			</div>
			<div class="form-group">
				<label for="fecha">Fecha:</label>
				<input type="date" class="form-control" placeholder="Introduzca fecha" id="fecha" name="fecha">
			</div>
			<div class="form-check form-group">
				<label class="form-check-label">
					<input type="checkbox" id="cliente" name="cliente" class="form-check-input" value="cliente">¿Es
					cliente?
				</label>
			</div>
			<div class="form-check form-group">
				<label class="form-check-label">
					<input type="checkbox" id="premium" name="premium" class="form-check-input" value="cliente">¿Es
					premium?
				</label>
			</div>
			<div class="form-group">
				<label for="comentarios">Comentarios:</label>
				<textarea class="form-control" rows="5" id="comentarios" name="comentarios"></textarea>
			</div>
			<button type="submit" class="btn btn-primary">Enviar</button>
		</form>
	</div>
</body>

</html>

document.getElementById("cliente").checked

document.getElementById("fecha").value

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
}