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
}

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

Ejercicios variados (if, while,for…)

1.- Pedir dos números al usuario y decir cual es el mayor.
2.- Pedir tres números al usuario y decir cual es el mayor
3.- Pedir la edad al usuario y decir si es o no mayor de edad
4.- Una progresión geométrica empieza con un número al que se le va multiplicando otro, por ejemplo: Si empezamos por el 2 y la razón (el número que se multiplica) es 3 la serie sería: 2,6,18,54….
Hagamos un programa que le pida al usuario un número inicial y una razón y nos muestre todos los términos de esa razón geométrica menores de 100.
5.- Escribir un programa que calcule la suma de todos los múltiplos de 5 menores de 100
6.- Escribir un programa que nos cuente la cantidad de múltiplos de 5 menores de 100
6.- Escribir un programa que le pida al usuario un número nos cuente la cantidad de divisores de ese número menores de 100
7.- Pedimos dos números al usuario y le decimos si los dos tienen la misma paridad (o sea, si los dos son pares o los dos son impares) o diferente.
8.- Escribir un programa que le pida textos al usuario, los imprima por la consola, y acabe cuando el usuario escriba ‘FIN’
9.- Escribir un programa que le pida números al usuario, los sume, y acabe cuando el usuario escriba 0 y nos muestre la suma total de los números
10.- Escribir un programa que nos muestre lo siguiente:
1
22
333
4444
55555

// Pedir dos números y decir cual es el mayor

const a = 6
const b = 6

if (a > b) {
  console.log(a)
} else if (b > a) {
  console.log(b)
} else {
  console.log('iguales')
}

if (a > b) {
  console.log(a)
} else {
  console.log(b)
}

const c = 8

if (a >= b && a >= c) {
  console.log(a)
} else if (b >= a && b >= c) {
  console.log(b)
} else {
  console.log(c)
}

// Asumo que a es el mayor y voy a almacenar en a siempre el mayor número

let mayor = a
// Si b es mayor que a pongo el valor de b en a y a sigue siendo el mayor
if (b > mayor) {
  mayor = b
}
// Si c es mayor que a pongo el valor de c en a y a sigue siendo el mayor

if (c > mayor) {
  mayor = c
}
console.log(mayor)

const edad = 20

if (edad < 18) {
  console.log('Menor de edad')
} else {
  console.log('Mayor de edad')
}

if (edad >= 18) {
  console.log('Mayor de edad')
} else {
  console.log('Menor de edad')
}

/*

Una progresión geométrica empieza con un número al que se le va multiplicando otro, por ejemplo:
Si empezamos por el 2 y la razón (el número que se multiplica) es 3 la serie sería: 2,6,18,54....
Hagamos un programa que le pida al usuario un número inicial y una razón
y nos muestre todos los términos de esa razón geométrica menores de 100.

*/

/*
Inicio: 2
Razón: 3

2,mult*3=6,mult*3=18,mult*3=54,mult*3=162 como es mayor que 100 paramos

Inicio: 10
Razón: 10

10,100 ya paro

Inicio 2
Razón 2:
2,4,8,16,32,64,128 paro

COndición del tipo hasta que pase algo o mientras que pase algo tipo de bucle: while

Hasta que sea mayor que 100 <=> Mientras sea menor de 100

*/

let inicio = 2
const razon = 3
while (inicio < 100) {
  console.log(inicio)
  inicio *= razon
}

for (let inicio = 2; inicio < 100; inicio *= razon) {
  console.log(inicio)
}

// 5.- Escribir un programa que calcule la suma de todos los multiplos de 5 menores de 100

/*

Me cogería la lista de los número del 1 al 100  con un for típico de toda la vida
Miraría a ver si el número es múltiplo de 5, con el %5==0 yo sé si es múltiplo de 5
 y si lo es lo sumo en una hojita o donde quiera suma+=valor suma=suma+valor
Muestro la suma  console.log()

Esto es un algoritmo== una receta de cocina

*/

let suma = 0
for (let i = 1; i <= 100; i++) {
  if (i % 5 == 0) {
    suma = suma + i
  }
}
console.log(suma)

// 6.- Escribir un programa que nos cuente la cantidad de divisores de 5 menores de 100

/*

Me cogería la lista de los número del 1 al 100  con un for típico de toda la vida
Miraría a ver si el número es múltiplo de 5, con el %5==0 yo sé si es múltiplo de 5
 y si lo es lo cuento  contar es sumar 1 y en js tenemos ++
Muestro la cuenta  console.log()

Esto es un algoritmo== una receta de cocina

*/

let cuenta = 0
for (let i = 1; i <= 100; i++) {
  if (i % 5 == 0) {
    cuenta++
  }
}
console.log(cuenta)

// 7.- Pedimos dos números al usuario y le decimos si los dos
// tienen la misma paridad (o sea, si los dos son pares o los dos son impares)
// o diferente.

const a = 7
const b = 19

// Se calcular la paridad de un número: %2
// Calcular la paridad de a
// Calcular la paridad de b
// Mirar si son iguales o distintas

const paridadA = a % 2
const paridadB = b % 2
if (paridadA == paridadB) {
  console.log('Tienen la misma paridad')
} else {
  console.log('Tienen distinta paridad')
}

if ((a % 2) == (b % 2)) {
  console.log('Tienen la misma paridad')
} else {
  console.log('Tienen distinta paridad')
}

// 8.- Escribir un programa que le pida textos al usuario,
// los imprima por la consola, y acabe cuando el usuario escriba 'FIN'

/*

Pedir textos al usuario (prompt)
Imprimirlos (console.log)
Acabar cuando el texto sea FIN
Condición: Hasta que el texto sea fin => Mientras el texto no sea FIN

*/

let texto
do {
   texto = prompt('Dame un texto (fin para acabar)')
  console.log(texto)
} while (texto.toLowerCase() != 'fin')

let cadena = ''
while (cadena.toLowerCase() != 'fin') {
  cadena = prompt('Dame un texto (fin para acabar)')
  console.log(cadena)
}

// 9.- Escribir un programa que le pida números al usuario, los sume,
// y acabe cuando el usuario escriba 0 y nos muestre la suma total de los números

/*

Pedir números al usuario -->prompt
Sumarlos en una variable --> suma+=valor
Acabar cuando el valor=0  --> while (valor!=0)

*/

let suma = 0
let numero
do {
  numero = parseFloat(prompt('Dame un número porfa'))
  suma += numero
} while (numero != 0)
console.log(suma)


/* 10.- Escribir un programa que nos muestre lo siguiente:
1
22
333
4444
55555
*/

/*

Imprimir todos los números del 1 al 5 (for de 1 a 5)
Tengo que imprimir tantas veces ese número como el propio número
Dentro del bucle de imprimir todos los números tendré otro bucle
¿Cuantas veces lo tengo que ejecutar? i=1->1 vez, i=2->2 veces, i=3, 3 veces...
Lo tengo que ejecutar i veces
*/

const numero = 4
for (let i = 1; i <= numero; i++) {
  let cadena = ''
  for (let j = 1; j <= i; j++) {
    cadena += i
  }
  console.log(cadena)
}

Ejercicio resuelto

/*

1.-Un bucle que nos imprima los 10 primeros números y sus cuadrados
2.- Que nos pida un número y nos diga la suma desde al 1 hasta ese número. Ejemplo: 5 ->1+2+3+4+5 = 15

3.- Lo mismo que el anterior pero que por un lado nos sume los pares y por el otro los impares.



Avanzado (solo para valientes):



4.- Que nos pida un número (por ejemplo 3) y que nos imprima esto por consola:
(0,0)(0,1)(0,2)
(1,0)(1,1)(1,2)
(2,0)(2,1)(2,2)

*/

//Estructura básica de for TATUADA
for (let a=1; a<=10; a++) {
    console.log("num:"+a+" y el cuadrado es "+(a*a));
}


//Resolvemos por partes: Divide y vencerás
let numero=parseFloat(prompt("Dame un  número"));
let suma=0;
for (let a=1; a<=numero; a++) {
 suma+=a;
}
console.log(suma);

//Resolvemos por partes: Divide y vencerás
numero=parseFloat(prompt("Dame un  número"));
let sumaPares=0;
let sumaImpares=0;
for (let a=1; a<=numero; a++) {
	//Si a es par se lo sumo a los pares
	//Si a es impar se lo sumo a los impares
	if (a%2==0){
		//ES PAR
		sumaPares+=a;
	} else{
		//ES IMPAR
		sumaImpares+=a;
	}
}

console.log("La suma de los pares es "+sumaPares);
console.log("La suma de los impares es "+sumaImpares);

numero=parseFloat(prompt("Dame un  número"));

for(let i=0;i<numero;i++){
	let cadena="";
	for(let j=0;j<numero;j++){
		cadena+="("+i+","+j+")";
	}
	console.log(cadena);
}

//Pedir dos números y que nos muestre todos los números
//Entre uno y otro
//EJ: 2 y 7 -> 2,3,4,5,6,7

let a=parseFloat(prompt("Primer número"));
let b=parseFloat(prompt("Segundo número"));

let suma=0;
for(let i=a;i<=b;i++){
	suma+=i;
}
console.log(suma);

//Pedir un número y decir si es primo

let numero=parseFloat(prompt("Dime un número y yo te digo si es primo"));

//Si no tiene divisores
//Numero A % Numero B ==0 B es divisor de A
//25 % 5 ==0 5 es divisor de A
let divisores="";
for(let i=2;i<numero;i++){
	if(numero%i==0){
		divisores+=i+",";
	}
}
if (divisores==""){
	console.log("Es primo");
} else{
	console.log("No es primo, tiene estos divisores "+divisores);
}