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

Ejemplos for

let cadena="";
for(let i=0;i<10;i++){
	cadena+="#";
}
console.log(cadena);

cadena=prompt("Introduzca una cadena");
let repetir= parseFloat(prompt("Introduzca las veces que la quiere repetir"));
let resultado="";
for(let i=0;i<repetir;i++){
	resultado+=cadena;
}
console.log(resultado);

//Imprimir impares v.1
for(let i=1;i<20;i+=2){
	console.log(i);
}

//Imprimir impares v.2
for(let i=0;i<20;i++){
	if (i%2==1){
		console.log(i);
	}
}

//Imprimir árbol
cadena="";
for(let i=0;i<10;i++){
	console.log(cadena);
	cadena+="*";
}

//Anidación de bucles, bucles+if, bucles+if+bucles...

for(let i=0;i<10;i++){ //10 veces
	for(let j=0;j<10;j++){ //10 veces
		console.log(i+"|"+j);
	}
}

Bucles for

let a=1;
while(a<=10){
	console.log(a);
	a++;
}


//Bucles for: Cuando conocemos los límites
//Bucle while compactado
/*
Estructura del for
for(inicialización;condición;modificación)
*/
for (let a=1; a<=10; a++) {
	console.log(a);
  }

//Estructura básica de un bucle for repetida en código de todo el mundo
//Bucle para repetir n veces (en esta caso 10) un código
//El nombre de la variable i
  for(let i=0;i<10;i++){

  }
//Tener una inicialización y un incremento como queramos
  for(let num=5;num<=100;num+=10){
	  console.log(num);
  }
//En vez de sumando restando
  for(let N=10;N>0;N--){
	  console.log(N);
  }

  //Omitir la inicialización
  let inicial=0;
  for(;inicial<10;inicial++){
	  console.log(inicial);
  }

  //Omitir también la modificación
  let modi=0;
  for(;modi<10;){
	  console.log(modi);
	  modi++;
  }

    //Omitir todo
	let b=0;
	for(;;){
		console.log(b);
		b++;
		if(b==10){
			break;
		}
	}

Bucles JS

//Bucles: Repetir algo un número de veces
//Dos tipos: Repetir hasta que se cumpla una condición
//Repetir N veces

let a=1;
while (a<=10) {  //Cuando a vale 11 salimos del bucle
	console.log(a);
	a++;
  }

  a=1;
  while(a<=100){ //Imprime 1,3,9,27,81
	  console.log(a);
	  a*=3;
  }

  a=1; //El do es equivalente al de arriba, hace lo mismo
  do{ //Imprime 1,3,9,27,81
	  console.log(a);
	  a*=3;
  } while (a<=100);

  //La diferencia entre while y do..while se da cuando no se cumple la condición
  //Nada más empezar. En el while no entramos ninguna vez
  //En el do..while como mínimo se entra una vez
  a=120;
  while(a<=100){   //No imprime nada porque a no es <=100
	  console.log(a);
	  a*=3;
  }

  a=120;
  do{  //Sí que imprime 120 porque en el do..while entramos por lo menos una vez
	  console.log(a);
	  a*=3;
  } while (a<=100);

https://www.w3schools.com/js/js_loop_while.asp

Pedir valores

let precio=prompt("Introduzca el precio");
console.log(precio);
let unidades=prompt("Introduzca las unidades");
console.log(unidades);
let total=parseInt(precio)+parseInt(unidades);
console.log(total);
 total=parseFloat(precio)+parseFloat(unidades);
console.log(total);

Con lo anterior pedir al usuario una ciudad y una cantidad y mostrar por consola lo siguiente:

Envío gratis si ciudad es Barcelona
Envío gratis si ciudad es Tarragona o Lleida y cantidad>=20
Envío gratis si ciudad es cualquiera y cantidad>=100


let ciudad=prompt("Introduzca la ciudad");
let cantidad=parseFloat(prompt("Introduzca la cantidad"));
let mensaje="Envío 10 €";
if (ciudad=="Barcelona"){
	mensaje="Envío gratis";
} 
 if (((ciudad=="Tarragona") || (ciudad=="Lleida")) && cantidad>=20){
	mensaje="Envío gratis";
} 
 if (cantidad>=100){
	mensaje="Envío gratis";
}
console.log(mensaje);

/* Otra solución */

if (ciudad=="Barcelona"){
	console.log("Envío gratis");
} else if (((ciudad=="Tarragona") || (ciudad=="Lleida")) && cantidad>=20){
	console.log("Envío gratis");
} else  if (cantidad>=100){
	console.log("Envío gratis");
}

//Otra más

if (ciudad=="Barcelona" || ((ciudad=="Tarragona" || ciudad=="Lleida")&& cantidad>=20) || cantidad>=100){
	console.log("Envío gratis");
}