Autor: Juan Pablo Fuentes

Formador de programación y bases de datos

Ejercicio cadenas

Tenemos una web como las que hemos visto hasta ahora con un textbox de una cadena
Cadena:
Y otro textbox con una cadena a buscar
Buscar:

Cuando le demos a un botón de buscar nos mostrará por pantalla el número de veces que está la cadena buscada dentro de la cadena original.

Ejemplos:

Cadena: “Hola que pasa que comes queso”
Buscar: “Pepito”
Nos muestra 0
Cadena: “Hola que pasa que comes queso”
Buscar: “pasa”
Nos muestra 1
Cadena: “Hola que pasa que comes queso”
Buscar: “que”
Nos muestra 3

Ejemplo replace normal y con regexp

<!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 eliminar:</label>
			<input type="text" class="form-control" id="quitar">
		</div>
		<h1 id="posicion"></h1>
		<button type="button" class="btn btn-success" onclick="quitar()">Buscar</button>
		<script src="js/test.js"></script>
		</form>
	</div>
</body>

</html>


function quitar () {
  const cadena = document.getElementById('cadena').value
  const quitar = document.getElementById('quitar').value

  // Esto es una expresión regular, que son MUY POTENTES y se usan muchísimo
  // Pero que veremos más adelante
  // Pero... nos sirve como truco para usar usando aquello del CTRL+C CTRL+V
  // Reemplace todas las apariciones de quitar (g) insensible a mayúsculas (i)
  const reg = new RegExp(quitar, 'gi')
  document.getElementById('posicion').innerHTML = cadena.replace(reg, '')
}

function quitarOld () {
  let cadena = document.getElementById('cadena').value
  const quitar = document.getElementById('quitar').value
  while (cadena.indexOf(quitar) > -1) {
    cadena = cadena.replace(quitar, '#')
  }
  document.getElementById('posicion').innerHTML = cadena
}

Ejemplo slice

<!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 eliminar:</label>
			<input type="text" class="form-control" id="quitar">
		</div>
		<h1 id="posicion"></h1>
		<button type="button" class="btn btn-success" onclick="quitar()">Buscar</button>
		<script src="js/test.js"></script>
		</form>
	</div>
</body>

</html>

function quitar () {
  let cadena = document.getElementById('cadena').value
  const quitar = document.getElementById('quitar').value
  const pos = cadena.indexOf(quitar)
  if (pos > -1) {
    cadena = cadena.slice(0, pos) + cadena.slice(pos + quitar.length)
  }
  document.getElementById('posicion').innerHTML = cadena
}

Ejemplo subst

<!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">tamaño:</label>
			<input type="text" class="form-control" id="tamany">
		</div>
		<h1 id="posicion"></h1>
		<button type="button" class="btn btn-success" onclick="buscar2()">Buscar</button>
		<script src="js/test.js"></script>
		</form>
	</div>
</body>

</html>

function buscar () {
  let cadena = document.getElementById('cadena').value
  const tamany = parseFloat(document.getElementById('tamany').value)

  // Vacío el HTML para poner nuevos valores
  document.getElementById('posicion').innerHTML = ''
  // Si la cadena no está vacía
  while (cadena.length > 0) {
    // Pon en el html un fragmento de la cadena de longitud 'tamany' y una coma
    document.getElementById('posicion').innerHTML += cadena.substr(0, tamany) + ', '
    // Quítale a la cadena el fragmento que he puesto en el HTML
    cadena = cadena.substr(tamany)
  }
  // Le quito la coma final
  document.getElementById('posicion').innerHTML = document.getElementById('posicion').innerHTML.slice(0, -2)
}

function buscar2 () {
  const cadena = document.getElementById('cadena').value
  const tamany = parseFloat(document.getElementById('tamany').value)

  // Vacío el HTML para poner nuevos valores
  document.getElementById('posicion').innerHTML = ''

  // Como sé que tengo que empezar en el 0 y acabar en la longitud de la cadena
  // Puedo utilizar un for
  for (let i = 0; i < cadena.length; i += tamany) {
    document.getElementById('posicion').innerHTML += cadena.substr(i, tamany) + ', '
  }
  // Le quito la coma final
  document.getElementById('posicion').innerHTML = document.getElementById('posicion').innerHTML.slice(0, -2)
}

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