Mes: febrero 2021

Yo tengo una web con un input y un botón:
Cadena:[______]
[Sumar]

En cadena me van a introducir unos números separados por comas. Cuando le den a sumar me va a mostrar la suma de esos números.

EJ: 1,2,3,4,5
Al darle a sumar me pondrá 15

1.- Creo el HTML

	<div id="contenedor" class="container ">
		Cadena: <input type="text" id="cad">
		<button id="sumar" class="btn btn-success">Sumar</button>
		<p id="resultado"></p>
	</div>

2.- Crearía una función que haga el cálculo que me piden. ¿Qué me piden? Que dada una cadena de números separados por coma me devuelva la suma.
función sumaNumero(cadena)—> Suma
sumaNumero(‘1,2,3’)-> 6
2.a Definición y parámetros

function sumaNumero(cadena){
let suma=0;
// Aquí ocurrirá la magia
return suma;
}

2.b Buscaremos la lógica de lo que nos piden. Definimos el algoritmo que vamos a utilizar
A mí se me ocurre: Lo paso a un array. Luego me recorro ese array y voy sumando los números
¿Sé pasar de cadena separa con comas a un array? Sí: split(‘,’)
¿Sé recorrer un array? Sí: con el for de toda la vida

function sumaNumero(cadena){
let suma=0;
let numeros=cadena.split(',')
for(let i=0;i<numeros.length;i++){
//Algo haremos aquí
}
return suma;
}

2.c ¿Qué me falta? Ir sumando los números. ¿Dónde tengo los números? en numeros[i]
¿Dónde los quiero sumar? en suma ¿Cómo lo hago? suma=suma+numeros[i] suma+=numeros[i]

function sumaNumero(cadena){
let suma=0;
let numeros=cadena.split(',')
for(let i=0;i<numeros.length;i++){
suma+=numeros[i]
}
return suma;
}

2.d Me doy cuenta al probarlo que hay un error y lo corrijo:

function sumaNumero (cadena) {
  let suma = 0
  const numeros = cadena.split(',')
  for (let i = 0; i < numeros.length; i++) {
    suma += parseFloat(numeros[i])
  }
  return suma
}

3.- Enlazar la función que ya tengo con el HTML. Me piden que al clicar a sumar me haga los cálculos. 3.a. Enlazar el botón con una función

document.getElementById('sumar').addEventListener('click',sumar)

3.b Creo la función y la pruebo

function sumar () {
  console.log('Todo bien')
}

3.c ¿QUé tengo que hacer dentro de la función? obtener valores, realizar cálculos y mostrar resultado.
3.d ¿Qué valor tengo que obtener? La cadena que ha introducido el usuario. ¿Sé hacerlo?

  const cadena = document.getElementById('cad').value

console.log(cadena)
Importante: tanto el getElementById para recuperar el valor como introducirlo dentro de una variable
3.e Sumar todos los números de la cadena introducida. ¿Cómo? Ya tengo una función sumaNumero.
const suma = sumaNumero(cadena)
console.log(suma)
3.f Poner este resultado en el HTML

  document.getElementById('resultado').innerHTML = 'La suma es ' + suma

3.g Ejemplo de cambiar estilo:

 if (suma > 20) {
    document.getElementById('resultado').style.color = 'red'
  } else {
    document.getElementById('resultado').style.color = 'black'
  }

utils = {
  consonantesReg: function (cadena) {
    cadena = cadena.replace(/[^bcdfghjklmnñpqrstvwxyz]/gi, '')
    return cadena.length
	  },
	  masLarga: function (cadena) {
    const palabras = cadena.split(' ')
    palabras.sort((a, b) => b.length - a.length)
    return palabras[0]
	  },
	   masConsonantesSort: function (cadena) {
    const palabras = cadena.split(' ')
    palabras.sort((a, b) => consonantesReg(b) - consonantesReg(a))
    return palabras[0]
	  }
}

Tendré una web con un campo y un botón:

Cadena:[_________]
[Calcular]

Al darle al botón me dirá en un párrafo la cadena más larga y la que tiene más consonantes

<div id="contenedor" class="container ">
		Cadena: <input type="text" id="cad">
		<button id="procesar" class="btn btn-success">Procesar</button>
		<p id="resultado"></p>
	</div>

document.getElementById('procesar').addEventListener('click', procesar)

// Esto no es una función. A esto antes se le llamaba método
function procesar () {
// Recuperar los valores del HTML si hace falta
// Recuperar la cadena que está en cad

  // Hacer los cálculos pertinentes llamando a funciones si hace falta
  // Tengo que llamar a consonantesReg

  // Mostrar los valores en el HTML si es necesario
  // Lo que me haya devuelto consonantesReg lo pongo en 'resultado'
  
}

// Función pura: recibe parámetros y devuelve un resultado
// NUNCA pero NUNCA NUNCA hacemos referencia al HTML
function consonantesReg (cadena) {
  cadena = cadena.replace(/[^bcdfghjklmnñpqrstvwxyz]/gi, '')
  return cadena.length
}

Funciones puras

Una función a la que le pasemos una cadena y nos devuelva la palabra más larga
masLarga(‘hola que tal estamos’)-> ‘estamos’

Una función a la que le pasemos una cadena y nos cuente las consonantes

consonantes(‘praga’)->3

Una función a la que le pasemos una cadena y nos devuelva la palabra con más consonantes
masConsonantes(‘praga es guay’)->’praga’

function masLarga (cadena) {
// Si yo tengo una cadena y quiero las palabras lo primero es obtenerlas
  const palabras = cadena.split(' ')
  // Necesitaré algún sitio donde guardar la palabra más larga
  let larga = ''
  // Recorrer la lista de palabras a ver cual es la de mayor longitud
  for (let i = 0; i < palabras.length; i++) {
    // Si la longitud de la palabra actual es mayor que la que tengo
    if (palabras[i].length > larga.length) {
      larga = palabras[i]
    }
  }
  return larga
}

function masLargaSort (cadena) {
  const palabras = cadena.split(' ')
  palabras.sort((a, b) => b.length - a.length)
  return palabras[0]
}

function consonantes (cadena) {
  const vocales = vocales2(cadena)
  return cadena.length - vocales
}
// 'praga' split('') letra a letra slice/substr/subtring  cadena[i]
function consonantes2 (cadena) {
  const cons = 'bcdfghjklmnñpqrstvwxyz'
  cadena = cadena.toLowerCase()
  let total = 0
  for (let i = 0; i < cadena.length; i++) {
    // Si la letra está dentro de mis consonantes
    if (cons.indexOf(cadena.slice(i, i + 1)) > -1) {
      total++
    }
  }
  return total
}

function consonantesReg (cadena) {
  cadena = cadena.replace(/[^bcdfghjklmnñpqrstvwxyz]/gi, '')
  // cadena = cadena.replace(/[aeiou]/gi, '')
  return cadena.length
}

function masConsonantes (cadena) {
  // Si yo tengo una cadena y quiero las palabras lo primero es obtenerlas
  const palabras = cadena.split(' ')
  // Necesitaré algún sitio donde guardar la palabra con más consonantes
  let masC = ''
  // Recorrer la lista de palabras a ver cual es la de mayor longitud
  for (let i = 0; i < palabras.length; i++) {
    // Si las consoncantes de la palabra actual son más que la que tengo
    if (consonantesReg(palabras[i]) > consonantesReg(masC)) {
      masC = palabras[i]
    }
  }
  return masC
}

function masConsonantesSort (cadena) {
  const palabras = cadena.split(' ')
  palabras.sort((a, b) => consonantesReg(b) - consonantesReg(a))
  return palabras[0]
}

function vocales2 (cadena) {
  const vocal = ['a', 'e', 'i', 'o', 'u']
  total = 0
  for (const v of vocal) {
    total += apariciones(cadena, v)
  }
  return total
}

function apariciones (cadena, buscar) {
  let cont = 0
  let pos = cadena.indexOf(buscar)
  while (pos > -1) {
    cont++
    pos = cadena.indexOf(buscar, pos + 1)
  }
  return cont
}

function esPar (numero) {
  if (numero % 2 == 0) {
    return true
  } else {
    return false
  }
}

function mismaParidad (num1, num2) {
  if (esPar(num1) == esPar(num2)) {
    return true
  } else {
    return false
  }
}

function filtrarPares (array) {
  const resultado = []
  for (let i = 0; i < array.length; i++) {
    if (esPar(array[i])) {
      resultado.push(array[i])
    }
  }
  return resultado
}

function sumaPares (array) {
  const pares = filtrarPares(array)
  let suma = 0
  for (let i = 0; i < pares.length; i++) {
    suma += pares[i]
  }
  return suma
}
function padNumero (numero) {
  if (!esPar(numero.length)) {
    numero = '0' + numero
  }
  return numero
}

En el ejemplo anterior de los usuarios muestro el nombre. Quiero que, al lado del nombre, salga el correo electrónico y la ciudad.

Cambiar la siguiente línea:

usuario.innerHTML = resultado[i].name + ‘, ‘ + resultado[i].email + ‘, ‘ + resultado[i].address.city