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