JS repaso if

Vamos a trabajar el if. Recordemos que es una estructura de control que nos permite realizar una acción u otra dependiendo de una serie de condiciones.
if (condicion){
//Acciones si la condición es cierta
} else{
//Acciones si la condición es falsa
}
Vamos a realizar una serie de funciones que sólo utilizarán if

1.- Crear una función esPar que nos devuelva true si el número que le pasamos es par y false en caso contrario. Ej. esPar(7)->false esPar(100)->true
2.- Crear una función longitudPar que le pasemos una cadena y nos devuelva true si su longitud es par y false en caso contrario. Ej. longitudPar(‘hola’)->true longitudPar(‘patas’)–>false
3.- Crear una función irpf a la que le pasemos un sueldo y nos devuelva:
Si el sueldo está entre 0 y 2000 no incluído-> 0.1
Si el sueldo está entre 2000 y 5000 no incluído ->0.2
Si es mayor o igual que 5000->0.3
Ej: irpf(800)->0.1 irpf(8000)->0.3
4.- Crear una función corta a la que le pasamos dos cadenas y nos devuelve la cadena más corta. Ej. corta(‘que’,’pasa’)-> ‘corta’
5.- Crear una función descuento a la que le pasamos una categoría y un importe y nos devuelve:
Si la categoría es ‘sanitarios’ y el importe es >= 500 ->0.05
Si la categoría es ‘sanitarios’ y el importe es >= 1000 ->0.1
Si la categoría es ‘grifería’ y el importe es >= 700 ->0.05
Si la categoría es ‘grifería’ y el importe es >= 1200 ->0.1
En cualquier otro caso devuelve 0


function esPar (numero) {
  // Si yo tengo un if en el que una rema me devuelve true y la otra false
  // Esto es equivalente a devolver la condicion
  // return numero%2==0
  if (numero % 2 === 0) {
    return true
  } else {
    return false
  }
}
function esParCorta (numero) {
  return numero % 2 == 0
}

function longitudPar (cadena) {
  if (cadena.length % 2 === 0) {
    return true
  } else {
    return false
  }
}

function longitudParReciclaje (cadena) {
  return esPar(cadena.length)
}
// true si los números tienen la misma paridad y false en caso contrario
function paridadIgual (num1, num2) {
  if (esPar(num1) == esPar(num2)) {
    return true
  } else {
    return false
  }
}

function paridadIgualCorta (num1, num2) {
  return esPar(num1) == esPar(num2)
}

function irpf (sueldo) {
  if (sueldo < 2000) {
    return 0.1
  } else if (sueldo < 5000) {
    return 0.2
  } else {
    return 0.3
  }
}

function irpfTramos (sueldo) {
  const tramo1 = 0.1
  const tramo2 = 0.2
  const tramo3 = 0.3
  if (sueldo < 2000) {
    return tramo1
  } else if (sueldo < 5000) {
    return tramo2
  } else {
    return tramo3
  }
}

function corta (cadena1, cadena2) {
  if (cadena1.length < cadena2.length) {
    return cadena1
  } else {
    return cadena2
  }
}

function corta2 (cadena1, cadena2) {
  let corta = cadena1
  if (cadena2.length < cadena1.length) {
    corta = cadena2
  }
  return corta
}

function corta3 (cad1, cad2) {
  // Operador ternario, es como un if de bolsillo
  const corta = (cad1.length < cad2.length) ? cad1 : cad2
  return corta
}

/*
Si la categoría es ‘sanitarios’ y el importe es >= 500 ->0.05
Si la categoría es ‘sanitarios’ y el importe es >= 1000 ->0.1
Si la categoría es ‘grifería’ y el importe es >= 700 ->0.05
Si la categoría es ‘grifería’ y el importe es >= 1200 ->0.1
En cualquier otro caso devuelve 0
*/

function descuento (categoria, importe) {
  let descuento = 0
  if (categoria == 'sanitarios') {
    if (importe >= 1000) {
      descuento = 0.1
    } else if (importe >= 500) {
      descuento = 0.05
    }
  }
  if (categoria == 'griferia') {
    if (importe >= 1200) {
      descuento = 0.1
    } else if (importe >= 700) {
      descuento = 0.05
    }
  }
  return descuento
}

function descuento2 (categoria, importe) {
  let descuento = 0
  if ((categoria == 'sanitarios' && importe >= 1000) || (categoria == 'griferia' && importe >= 1200)) {
    descuento = 0.1
  } else
  if ((categoria == 'sanitarios' && importe >= 500) || (categoria == 'griferia' && importe >= 700)) {
    descuento = 0.05
  }
  return descuento
}
function descuento3 (categoria, importe) {
  let descuento = 0
  if (categoria == 'sanitario' && cantidad >= 1000) {
    descuento = 0.1
  } else if (categoria == 'sanitario' && cantidad >= 500) {
    descuento = 0.05
  } else if (categoria == 'griferia' && cantidad >= 1200) {
    descuento = 0.1
  } else if (categoria == 'griferia' && cantidad >= 700) {
    descuento = 0.05
  }
  return descuento
}

JS repaso: funciones

Los primeros ejercicios de repaso tienen que ver con las funciones. Recordemos, a una función se le pueden pasar parámetros y muchas veces devuelven un valor.
Lo primero: nombre de la función y los parámetros, después el código que nos haga falta y devolver los valores
Ej: función suma que le pasemos dos números y nos devuelva la suma.

Lo primero que hago es poner el nombre y los parámetros:
function suma(num1,num2){
}
Después hago el cálculo que en este caso es muy sencillo:
function suma(num1,num2){
let resultado=num1+num2
}
Por último devuelvo el valor:
function suma(num1,num2){
let resultado=num1+num2
return resultado
}

Resolvamos los siguientes ejercicios. Son sólo de funciones y devolver valores, no hay if, bucles o tablas

1.- Crear una función triple que nos devuelva el triple de un número. Ej: triple(5)–>15 triple(0)–>0
2.- Crear una función nombreCompleto que pasándole un nombre y un apellido nos devuelva una cadena con nombre y apellido juntos separados por un espacio: nombreCompleto(‘ana’,’pi’)->’ana pi’
3.- Crear una función areaCirculo que le pasemos el radio de un círculo y nos devuelva el área, que es 2*3.1416*r*r ej: areaCirculo(1)–>6,2832
4.- Crear una función triplicar que le pasemos una cadena y nos la devuelva repetida tres veces: triplocar(‘hola’)->’holaholahola’
5.- Crear una función perímetro a la que le pasamos dos lados y nos devuelve el perímetro de un rectángulo, que es lado1*2+lado2*2 Ej: perimetro(2,3)–>10

function triple (num) {
  const res = num * 3
  return res
}

function nombreCompleto (nombre, apellidos) {
  const completo = nombre + ' ' + apellidos
  return completo
}

function areaCirculo (radio) {
  const area = Math.PI * radio * radio // radio**2
  return area
}

function triplicar (cadena) {
  const res = cadena + cadena + cadena // cadena.repeat(3)
  return res
}

function perimetro (lado1, lado2) {
  const perimetro = lado1 * 2 + lado2 * 2
  return perimetro
}

Ejercicios array

Los ejercicios consistirán en realizar una serie de funciones. Por lo tanto no tenemos que preocuparnos del HTML, sólo del código. Lo podemos probar directamente en el js o por consola

1.- Una función arrayGrande a la que le pasamos un array y nos devuelva true si su tamaño es mayor de 10 y false si es menor
ej: arrayGrande([1,2,3])-> false arrayGrande([1,2,1,2,1,2,1,2,1,2,12,1])->true

2.- Una función mayorLongitud a la que le pasemos un array de cadenas y nos devuelva la cadena más larga
ej: mayorLongitud([‘hola’,’que’,’tal’])->’hola’
Si hay más de una cadena con la misma longitud me vale cualquiera, no hace falta devolver todas

3.- Una función todosPares a la que le pasamos un array y nos devuelve true si todos son pares y false en caso contrario
Ej: todosPares([1,2,3])->false todosPares([2,4,6])->true

4.- Una función multiplicarArray a la que le pasamos un array de números y un multiplicando y nos devuelva un array con todos los números multiplicados por ese numero
Ej: multiplicarArray([1,2,3],3)->[3,6,9]


/*
1.- Una función arrayGrande a la que le pasamos un array y nos devuelva true si su tamaño es mayor de 10 y false si es menor
ej: arrayGrande([1,2,3])-> false arrayGrande([1,2,1,2,1,2,1,2,1,2,12,1])->true
*/

const a = [1, 2, 3]
const b = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 1, 1]

console.log(arrayGrande(a)) // false
console.log(arrayGrande(b)) // true

function arrayGrande (array) {
// ¿Yo sé cual es el tamaño de un array?
// Sí: array.length
  const tamany = array.length
  if (tamany > 10) {
    return true
  } else {
    return false
  }
}

/*

2.- Una función mayorLongitud a la que le pasemos un array de cadenas y nos devuelva la cadena más larga
ej: mayorLongitud([‘hola’,’que’,’tal’])->’hola’
Si hay más de una cadena con la misma longitud me vale cualquiera, no hace falta devolver todas

*/
function mayorLongitud (tabla) {
  // Recorrer toda la tabla: Sí, con el for
  // E ir guardando la cadena que sea más larga cadena1.length>cadena2.length
  let larga = ''
  for (let i = 0; i < tabla.length; i++) {
    // En tabla[i] voy a ir recorriendo las cadenas
    // Si la cadena que está en la posición i (tabla[i]) es más larga que la que tengo...
    // Guardo en larga la cadena
    const palabra = tabla[i]
    if (palabra.length > larga.length) {
      larga = tabla[i]
    }
  }
  return larga
}

function mayorLongitudSort (tabla) {
  // Hago una copia de la tabla porque la voy a modificar
  const array = tabla.slice()
  // Ordeno por longitud de mayor a menor (b.length-a.length)
  array.sort(function (a, b) { return b.length - a.length })
  return array[0]
}

/* 3.- Una función todosPares a la que le pasamos un array y nos devuelve true si todos son pares y false en caso contrario
Ej: todosPares([1,2,3])->false todosPares([2,4,6])->true
*/

function todosPares (array) {
  // Recorrer todo el array y si encuentro uno que sea impar: devuelvo falso
  // Si llego al final y no he devuelto nada: devuelvo true
  for (let i = 0; i < array.length; i++) {
    // Si el número en la posición i es impar (Si el valor modulo 2 es igual a 1)
    if (array[i] % 2 == 1) {
      return false
    }
  }
  return true
}

/*
4.- Una función multiplicarArray a la que le pasamos un array de números y un multiplicando y nos devuelva un array con todos los números multiplicados por ese numero
Ej: multiplicarArray([1,2,3],3)->[3,6,9]
*/

function multiplicarArray (array, mult) {
  // Copio un array. Otra manera: let res=[...array]
  const res = array.slice()
  // Recorrer el array
  for (let i = 0; i < res.length; i++) {
    // Lo multiplico por el multiplicando
    res[i] *= mult
  }
  return res
}


Ejemplos funciones de array

const a = [2, 5, 1, 8, 10, 3]
console.log(mayor2(a))
console.log(a)
console.log(pares(a))
// Crear una función que me devuelva el mayor elemento del array
// Ordenar el array y coger el último
function mayor (array) {
  // Hace una copia del array entero
  const copia = array.slice()
  copia.sort(function (a, b) { return a - b })
  return copia[copia.length - 1]
}

// Recorrer el array y guardar el elemento que es mayor
function mayor2 (array) {
  let mayor = array[0]
  // Recorro TODO el array
  for (const v of array) {
    if (v > mayor) {
      mayor = v
    }
  }
  return mayor
}

// Una función que nos devuelva un array con los pares
function pares (array) {
  // Variable para guardar los pares
  const pares = []
  // Recorro el array entero
  for (const v of array) {
    // Si el valor que se guarda en v es par
    if (v % 2 == 0) {
      // Lo añado al array de pares
      pares.push(v)
    }
  }
  return pares
}

// Función que nos sume las posiciones pares por un lado
// Y las impares por otro
// Nos devuelve un array con [pares,impares]
function sumaPosiciones (array) {
  let pares = 0
  let impares = 0
  for (let i = 0; i < array.length; i++) {
    console.log('Posicion: ' + i + ' y valor: ' + array[i])
    if (i % 2 == 0) {
      // La posición es par
      pares += array[i]
    } else {
      // La posición es impar
      impares += array[i]
    }
  }
  console.log(pares + ',' + impares)
  return [pares, impares]
}

Tres maneras de hacer lo mismo



// Bien
function tamany (array) {
  return array.length
}

// Regular
function tamany2 (array) {
  let cont = 0
  for (const v of array) {
    cont++
  }
  return cont
}

// Mal
function tamany3 (array) {
  let p = 0
  let i = 0
  for (let n = 0; n < array.length; n++) {
    if (array[n] % 2 == 0) {
      p++
    } else {
      i++
    }
  }
  return p + i
}

Otras funciones de array


const a = [1, 2, 3, 4]
const b = [5, 6, 7]
const c = [8, 9, 10]

// indexOf tiene el mismo comportamiento que en cadenas
console.log(a.indexOf(2))
console.log(a.indexOf(23))

// concat nos concatena diferentes arrays
const z = a.concat(b, c)
console.log(z)

// slice que nos devuelve partes de un array igual que en cadenas
// Ojo: Nos hace una copia

const y = z.slice(3, 7) // me coge los elementos de z de 3 al 7 y nos los copia en y
console.log(y)

const copiadeA = a.slice()

console.log(copiadeA)
a.pop()
console.log(copiadeA)

// Splice nos permite quitar y añadir elementos en un array
// (posición, elementos a eliminiar (cantidad), Elementos a añadir)
const fruits = ['Banana', 'Orange', 'Apple', 'Mango']
// En la posición (2) quítame (1) elemento y mete 'lemon' y 'kiwi'
fruits.splice(2, 1, 'Lemon', 'Kiwi')

fruits.sort()
console.log(fruits)

const r = [5, 1, 8, 2, 9, 3]
r.sort()
console.log(r)

const t = ['11', '2', '213', '9']
t.sort()
console.log(t)

// sort permite usar una función propia de ordenación
// OJO: avanzado no hace falta entender
t.sort(function (a, b) { return parseFloat(a) - parseFloat(b) })
console.log(t)

// Truco para desordenar
t.sort(function (a, b) { return 0.5 - Math.random() })
console.log(t)

t.reverse()
console.log(t)

// Otra manera de recorrer un array utilizando for.. of
for (const v of t) {
  console.log(v)
}

for (let i = 0; i < t.length; i++) {
  console.log(t[i])
}
// valor va cogiendo uno por uno los valores de fruits
for (const valor of fruits) {
  console.log(valor)
}

// Se puede usar para recorrer si solo necesitamos los valores
let suma = 0
for (const n of r) {
  suma += n
}
console.log(suma)

Copia de valor y referencia

https://medium.com/laboratoria-developers/por-valor-vs-por-referencia-en-javascript-de3daf53a8b9


const frutas = ['manzana', 'pera', 'kiwi']

const frutas2 = frutas // NO SE COPIA EL VALOR SE COPIA LA REFERENCIA Se apunta al mismo sitio
// Tanto frutas como frutas 2 son como una flecha que apunta al mismo contenido
// Si yo cambio fruta, también cambio fruta2
// Se suele decir que necesitamos 'clonar' el array

console.log(frutas)
console.log(frutas2)

frutas.push('melón')
console.log(frutas)
console.log(frutas2)

let a = 20
const b = a // Copiar el valor

a++
console.log(a) // 21
console.log(b) // 20

// a |20|

// frutas es un puntero al contenido del array
// frutas2=frutas lo que copio es la dirección no el contenido

const a = [1, 2, 3, 4]
console.log(sumaArray(a))
console.log(a)

// Esta función nos suma el array pero también nos lo destruye
// Porque no se pasa una copia se pasa el propio array
// la REFERENCIA al array. Mucho cuidado con esto
function sumaArray (array) {
  let suma = 0
  while (array.length > 0) {
    suma += array.pop()
  }
  return suma
}

// SOlución

function sumaArrayBien (array) {
  let suma = 0
  const copia = array.slice()
  while (copia.length > 0) {
    suma += copia.pop()
  }
  return suma
}

function sumaSinModificacion (array) {
  let suma = 0
  for (const v of array) {
    suma += v
  }
  return suma
}

Mini ejercicio arrays

Al darle al botón contar que nos diga el número de nombres que nos han introducido

<div class="container ">
		<div class="form-group">
			<label for="cadena">Nombre:</label>
			<input type="text" class="form-control" id="cadena">
		</div>

		<h1 id="posicion"></h1>
		<button type="button" class="btn btn-success" onclick="buscar()">Añadir</button>
		<button type="button" class="btn btn-success" onclick="contar()">Contar</button>
		<script src="js/test.js"></script>
		</form>
	</div>

const nombres = []
function buscar () {
  const nombre = document.getElementById('cadena').value
  nombres.push(nombre)
  console.log(nombres)
}

function contar () {
  document.getElementById('posicion').innerHTML = nombres.length
}

JS arrays primeros pasos

const variable = 'Manzana'
console.log(variable)
let cadena = variable + ' muy rica'

// Un array es una colección ordenada de variables
// Array, tablas, arreglos, tuplas
const misFrutas = ['Pera', 'Manzana', 'Melocotón']
console.log(misFrutas[0]) // Pera
console.log(misFrutas[2]) // Melocotón
console.log(misFrutas[3]) // Error: undefined

cadena = '1,2,3,4,5'
console.log(cadena)
const numeros = cadena.split(',')
console.log(numeros)
console.log(numeros[2]) // 3
const masNumeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(masNumeros)
for (let i = 0; i < misFrutas.length; i++) {
  console.log(misFrutas[i])
}
for (let i = 0; i < numeros.length; i++) {
  console.log(numeros[i])
}
for (let i = 0; i < masNumeros.length; i++) {
  console.log(masNumeros[i])
}

const tutiFruti = [1, 2, 'hola que tal', 7, false, 'p', 'papaya']
for (let i = 0; i < tutiFruti.length; i++) {
  console.log(tutiFruti[i])
}

numeros[2] = 'Cacahuete'
console.log(numeros)

for (let i = 0; i < masNumeros.length; i++) {
  if (masNumeros[i] % 2 == 0) {
    masNumeros[i]++
  } else {
    masNumeros[i]--
  }
}
console.log(masNumeros)

masNumeros = [2, 623, 312, 7, 234, 234, 3, 89]
// ¿Cuantos números pares hay en masNumeros?
let cont = 0
for (let i = 0; i < masNumeros.length; i++) {
  if (masNumeros[i] % 2 == 0) {
    cont++
  }
}
console.log('Hay ' + cont + ' pares')

// Añadir o quitar elementos del array
// pop push Nos quita el último elemento del array o nos añade un elemento al final del array

let miArray = ['a', 'b', 'c']
// Añade elementos al final
miArray.push('d')
console.log(miArray)
miArray.push('k')
console.log(miArray)
// Quita elementos del final
let elemento = miArray.pop()
console.log(miArray)
console.log(elemento)
const otro = []
otro.push(miArray.pop())
otro.push(miArray.pop())
console.log(otro)

// shift y unshift que es lo mismo pero del principio
miArray = ['a', 'b', 'c']
miArray.unshift('z')
console.log(miArray)
miArray.unshift('y')
console.log(miArray)
elemento = miArray.shift()
console.log(miArray)
console.log(elemento)

const enumeracion = []
for (let i = 0; i < 20; i++) {
  enumeracion.push(i)
}
console.log(enumeracion)

Ejercicio de ejemplo

Dada una frase, contar las palabras que tiene. Entendiendo que una palabra se distingue por estar entre espacios.

Cadena: “Hola que tal”
Tiene 3 palabras
Las palabas son las siguientes: Hola, que, tal

<div class="container ">
		<div class="form-group">
			<label for="cadena">cadena original:</label>
			<input type="text" class="form-control" id="cadena">
		</div>

		<h1 id="posicion"></h1>
		<button type="button" onclick="buscar()">Buscar</button>
		<script src="js/test.js"></script>
		</form>
	</div>

// Algoritmo: ¿Cómo soluciono el problema?
// Busco los espacios y cada vez que encuentro 1 sé que hay una palabra
// ¿Se buscar? Sí, con el indexOf Si yo modifico el código que ya tengo para que me busque un espacio
// Si yo tengo n espacio el número de palabras es n+1
// Buscar los espacios y con el slice ir cogiendo las palabras
// Si yo sustituyo los espacios por ‘, ‘ tengo lo que se busca
// Uso replace(/ /g,’, ‘)
// Si yo se que la longitud de una cadena es long
// Sustituyo todos los espacios por ”
// Y miro cual es la longitud ahora de la cadena: longitud antes-longitud ahora=espacios
// Uso replace(/ /g,”)

function buscar () {
const cadena = document.getElementById(‘cadena’).value
let cont = 0
if (cadena != ”) {
cont = apariciones(cadena, ‘ ‘) + 1
}
document.getElementById(‘posicion’).innerHTML = ‘El número de palabras es: ‘ + cont
}

// Separar palabras siguiendo la lógica del buscar
// Yo voy buscando los espacios y allí donde los encuentro
// Parto la cadena
function separarPalabras (cadena) {
// Busco la primera aparición del espacio
let pos = cadena.indexOf(‘ ‘)
// Necesito para partir una cadena un inicio y un fin
// El fin me lo da la posición que he encontrado, el inicio lo tengo que guardar
let anterior = 0
// Aquí iré añadiendo las palabras
let resultado = ”
while (pos > -1) {
// Añado la palabra que será desde la posición anterior hasta la que acabo de encontrar
resultado += cadena.slice(anterior, pos) + ‘, ‘
// Guardo en anterior la posición + 1 porque me salto el espacio
anterior = pos + 1
// Busco la siguiente
pos = cadena.indexOf(‘ ‘, pos + 1)
}
// Añado la palabra final que como no tiene espacio no la hemos encontrado
resultado += cadena.slice(anterior)
return resultado
}

function separarConTrampa (cadena) {
// Reemplazar los espacios por comas
return cadena.replace(/ /g, ‘, ‘)
}

// Cuento las palabras eliminando los espacios y calculando la resta
function contarPalabras (cadena) {
// Normalizo la cadena quitando espacios que sobran
cadena = quitarEspaciosExtra(cadena)
// Elimino los espacios de la cadena utilizando la expresión regular
// ‘/ /g’ La g nos indica que queremos reemplazar todas las apariciones
const sinespacios = cadena.replace(/ /g, ”)
// Tengo en cuenta el caso particular de que la cadena esté vacía
if (cadena == ”) {
return 0
} else {
// Las palabras son los espacios + 1
return cadena.length – sinespacios.length + 1
}
}

// Crear una función que nos busque el número de apariciones de una cadena en otra
// En cadena le pasamos la cadena en la que vamos a buscar. Ej: “hola que tal”
// En buscar la cadena que vamos a buscar Ej “que”
function apariciones (cadena, buscar) {
// Búscame la primera aparición de la cadena buscar dentro de cadena
// Ej búscame la primera aparición de ‘que’ dentro de ‘hola que tal’ –> 5
let pos = cadena.indexOf(buscar)
// Como voy a contar me hace falta una variable para contar
let cont = 0
// Si la pos es -1 es porque no la ha encontrado, por lo tanto no entramos en el bucle
// Si la pos >-1 es porque SI la ha encontrado, por lo tanto entramos
while (pos > -1) {
// Si hemos entrado es porque la ha encontrado, por lo tanto contamos 1
cont++
// Buscamos la siguiente aparición de la palabra ¿Cómo?
// Buscando a partir de la posición que ya hemos encontrado->pos+1
// Ej: busco que a partir de la posición 6 pos-> -1
pos = cadena.indexOf(buscar, pos + 1)
}
// En el ejemplo que estamos analizando devuelve 1
return cont
}

function quitarEspaciosExtra (cadena) {
cadena = cadena.trim()
let res = cadena.slice(0, 1)
for (let i = 1; i < cadena.length; i++) { const carActual = cadena.slice(i, i + 1) const carAnterior = cadena.slice(i - 1, i) if (!(carActual == ' ' && carAnterior == ' ')) { res += carActual } } return res } function quitarEspacios (cadena) { while (cadena.indexOf(' ') > -1) {
cadena = cadena.replace(/ {2}/g, ‘ ‘)
}
return cadena
}
// hola que tal
// hola que tal
// hola que tal
// hola que tal