https://dev.to/rajatarya007zxc/sometimes-javascript-is-tricky-67j
https://dev.to/okrohan/javascript-the-this-keyword-context-cheatsheet-2361
https://dev.to/blessingartcreator/17-javascript-optimization-tips-3gil
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 }
<!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' } }
<!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 }
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))
// 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))
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) }
/* 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); }
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); } }
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; } }