Autor: Juan Pablo Fuentes

Vamos a crear una web con un input para introducir una cadena y un botón normalizar.
Cuando le demos al botón en un texto aparte vamos a mostrar la cadena normalizada utilizando la función que hemos visto a primera hora de la mañana de normalizar.

Pasos a dar:

Crear el HTML (Mínimo un input, un button y un h1 para mostrar)
En JS:
Añadir la función normalizar (copiada de trifulcas)

Añadir al botón evento click -> llamamos a la función normalizar? NO. Llamamos a una función que se
encargue de recuperar la cadena,llamar a la función normalizar y mostrar el valor
function procesar()–>
1.- Recuperar el valor que nos han introducido en el input
2.- Llamar a la función normalizar con ese valor
3.- El resultado ponerlo en el HTML

<div class="container ">

		<div class="form-group">
			<label for="cadena">Cadena:</label>
			<input type="text" class="form-control" id="cadena" placeholder="Introduce una cadena">
		</div>
		<button id="normalizar">Normalizar</button>
		<h1 id="texto"></h1>

		<script src="js/test.js"></script>
	</div>

// Añado el evento click al botón, llamando a procesar
document.getElementById('normalizar').addEventListener('click', procesar)

// Esta función se encarga de hacer de intermediario entre el HTML
// Y los cálculos que yo necesito
function procesar () {
  // Recupero el valor
  const cadena = document.getElementById('cadena').value
  // Hago el cálculo
  const resultado = normalizar(cadena)
  // Muestro el valor
  document.getElementById('texto').innerHTML = resultado
}

// Recupero la función normalizar de un ejercicio anterior
function normalizar (direccion) {
  const cod = ['cp', 'c.p.']
  for (const v of cod) {
    const pos = direccion.indexOf(v)
    if (pos > -1) {
      direccion = direccion.slice(0, pos)
    }
  }
  return direccion.trim()
}

<div class="container ">

		<div class="form-group">
			<label for="cadena">Cadena:</label>
			<input type="text" class="form-control" id="cadena" placeholder="Introduce una cadena">
		</div>

		<h1 id="texto"></h1>

		<script src="js/test.js"></script>
	</div>

document.getElementById('cadena').addEventListener('change', comprobar)

function comprobar () {
  const cadena = document.getElementById('cadena').value

//Uso el operador ternario para que veais un ejemplo de como funciona
  document.getElementById('texto').innerHTML = palindromo(cadena) ? 'Es palíndromo' : 'No es palíndromo'
}

function palindromo (cadena) {
  cadena = cadena.replace(/ /g, '').toLowerCase()
  const invertida = cadena.split('').reverse().join('')
  return cadena == invertida
}

	<div class="container ">
		<img src="img/gato1.jpg" id="gato" width="300">
		<div class="form-group">
			<label for="cadena">Nombre:</label>
			<input type="text" class="form-control" id="cadena">
		</div>

		<h1 id="texto">Esto es un texto</h1>
		<button type="button" class="btn btn-success" id="anadir">Añadir</button>
		<button type="button" class="btn btn-success" id="contar">Contar</button>

		<script src="js/test.js"></script>
	</div>

// Cuando tengamos el ratón encima de la imagen pon el gato2
document.getElementById('gato').addEventListener('mouseenter', ponGato)
// Cuando tengamos el ratón fuera de la imagen pon el gato1
document.getElementById('gato').addEventListener('mouseleave', ponGato2)

function ponGato () {
  document.getElementById('gato').src = 'img/gato2.jpg'
}
function ponGato2 () {
  document.getElementById('gato').src = 'img/gato1.jpg'
}

document.getElementById('cadena').addEventListener('change', invertir)

function invertir () {
  let cadena = document.getElementById('cadena').value
  cadena = cadena.split('').reverse().join('')
  document.getElementById('texto').innerHTML = cadena
}

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

function anadir () {
  const cadena = document.getElementById('cadena').value
  document.getElementById('texto').innerHTML += cadena
}

document.getElementById('contar').addEventListener('dblclick', contar)

function contar () {
  const cadena = document.getElementById('cadena').value
  document.getElementById('texto').innerHTML = cadena.length
}

/*

1.- Pensar: buscar la manera de resolver el problema.
Si no tenemos una dirección no nos pongamos a andar

2.- Estoy pensando y no se me ocurre nada ¿Qué hago?
Divide y vencerás: Todo problema grande se componde problemas pequeños.
Intento dividir el problema en partes

3.- ¿Cómo lo haría yo? Busco MI algoritmo (mi manera de resolver el problema)
Y miro si me da una pista de cómo decirle al ordenador que lo resuelva

Dado un número saber si es capicua. EJ: 2002 es capicua 2020 no es capicua
¿Como sé si un número es capicua?
Definición que es igual de alante atrás que de atrás alante
Si el número y el número invertido son iguales es capicua y si no no
¿Se yo invertir una cadena?
Buscando en internet lo he conseguido:
cadena.split('').reverse().join('')

let cadena='hola que tal'
let res=''
for(let i=cadena.length-1;i>=0;i--){
  res+=cadena.substring(i,1)
}

let res=''
for(let i=0;i<cadena.length;i++){
  res=cadena.substring(i,1)+res
}
res tengo la cadena invertida
*/
function capicua (numero) {
  const invertido = numero.split('').reverse().join('')
  if (invertido == numero) {
    return true
  } else {
    return false
  }
}
function capicuaShort (numero) {
  const invertido = numero.split('').reverse().join('')
  return (invertido == numero)
}

/*
SI una frase es capicua o palíndromo

ej: 'isaac no ronca asi'

Lo mismo que antes pero quitando espacios
¿Se quitar espacios? .replace('/ /g,'')

*/
function palindromo (cadena) {
  // Quito los espacios y lo paso a minúsculas
  cadena = cadena.replace(/ /g, '').toLowerCase()
  // Invierto la cadena con el truco de internet que es
  // Pasar a array cada caracter, darle la vuelta y volver a juntar
  const invertida = cadena.split('').reverse().join('')
  // Devuelvo directamente la igualdad: si son iguales devuelvo true y si no false
  return cadena == invertida
}

/*
1.- Una función catalunya a la que le pasamos un código postal y nos devuelva true si el código postal pertenece a una provincia de Catalunya y false en caso contrario. catalunya(‘08001’)->true catalunya(‘26005’)->false
Pista: mirad a ver si hay algua función en JS ya hecha que nos diga si una cadena empieza con algo

2.- Una función normalizar a la que le pasamos una cadena que contiene una dirección
y nos busque si dentro de la dirección hay un código postal y si es así, nos lo elimine. Ejemplos:
normalizar(‘C/Balmes, 145′)->’C/Balmes, 145’
normalizar(‘C/Balmes, 145 cp 08012 Barcelona’)->’C/Balmes, 145′
normalizar(‘C/Balmes, 145 c.p. 08012′)->’C/Balmes, 145’
Solo buscamos las cadenas cp y c.p.

3.- Una función media que dada una frase me diga la longitud media de las palabras.
media(‘hola tú’)->3
La media es la suma de las longitudes dividida por el número de palabras
Pista: Recordad que con split partimos una cadena en elementos de array

4.- Una función vocales que nos diga las vocales que hay en una cadena.
Ej: vocales(‘hola que tal’)->5 vocales(‘miedo’)->3
No tengáis en cuenta acentos, pero no los pongáis en las pruebas
Pista: Yo crearía una función que me cuente cuantas veces aparece una cadena
dentro de otra
*/

function catalunya (codigo) {
  if (codigo.startsWith('08') ||
  codigo.startsWith('17') ||
  codigo.startsWith('25') ||
  codigo.startsWith('43')
  ) {
    return true
  } else {
    return false
  }
}

function catalunyaShort (codigo) {
  return (codigo.startsWith('08') ||
  codigo.startsWith('17') ||
  codigo.startsWith('25') ||
  codigo.startsWith('43')
  )
}

function catalunya2 (codigo) {
  const comienzo = codigo.slice(0, 2)
  if (comienzo == '08' ||
  comienzo == '17' ||
  comienzo == '25' ||
  comienzo == '43'
  ) {
    return true
  } else {
    return false
  }
}
function catalunya3 (codigo) {
  const cat = ['08', '17', '25', '43']
  for (const v of cat) {
    if (codigo.startsWith(v)) {
      return true
    }
  }
  return false
}
function catalunya4 (codigo) {
  const cat = ['08', '17', '25', '43']
  const comienzo = codigo.slice(0, 2)
  for (const v of cat) {
    if (comienzo == v) {
      return true
    }
  }
  return false
}

function normalizar (direccion) {
  let pos = direccion.indexOf('cp')
  if (pos > -1) {
    // Quitar de la cadena todo lo que hay después de la posición
    // Coger la cadena desde la posición 0 hasta la posición que ha encontrado
    direccion = direccion.slice(0, pos)
  }
  pos = direccion.indexOf('c.p.')
  if (pos > -1) {
    // Quitar de la cadena todo lo que hay después de la posición
    // Coger la cadena desde la posición 0 hasta la posición que ha encontrado
    direccion = direccion.slice(0, pos)
  }
  return direccion.trim()
}

function normalizar2 (direccion) {
  const cod = ['cp', 'c.p.']
  for (const v of cod) {
    const pos = direccion.indexOf(v)
    if (pos > -1) {
      // Quitar de la cadena todo lo que hay después de la posición
      // Coger la cadena desde la posición 0 hasta la posición que ha encontrado
      direccion = direccion.slice(0, pos)
    }
  }
  return direccion.trim()
}

function media (cadena) {
  const palabras = cadena.split(' ')
  let totalLongitud = 0
  for (let i = 0; i < palabras.length; i++) {
    totalLongitud += palabras[i].length
  }
  return totalLongitud / palabras.length
}

function media2 (cadena) {
  const sinEspacios = cadena.replace(/ /g, '')
  return sinEspacios.length / (cadena.length - sinEspacios.length + 1)
}

function vocales (cadena) {
  return apariciones(cadena, 'a') + apariciones(cadena, 'e') +
  apariciones(cadena, 'i') + apariciones(cadena, 'o') + apariciones(cadena, 'u')
}

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
}

// Imaginemos que quiero guardar la información de un cliente
// Guardar el nombre, el mail y el teléfono

const cliente = {
  nombre: 'Ana Pi', mail: 'ana@pi.com', telefono: '699699699'
}

Añadir las propiedades: dirección (‘c/agla, 5’) y pedidos (5)

// Tenemos un objeto producto

const producto = {
  nombre: 'Tornillo',
  referencia: 'TR500',
  stock: 30,
  precio: 0.5,
  caja: 100,
  comprar: function (cantidad) {
    this.stock += cantidad
  }
}

Añadir una función vender(cantidad) que nos reste del stock la cantidad y una función reponer que nos devuelva true si el stock es menor de 10 y false en caso contrario. Función precioPorCaja devuelve el precio de una caja (precio*caja)

// Tenemos un objeto producto

const producto = {
  nombre: 'Tornillo',
  referencia: 'TR500',
  stock: 30,
  precio: 0.5,
  caja: 100,
  comprar: function (cantidad) {
    this.stock += cantidad
    return this.stock
  },
  vender: function (cantidad) {
    if (this.stock >= cantidad) {
      this.stock -= cantidad
      return this.stock
    } else {
      return -1
    }
  },
  reponer: function () {
    return this.stock < 10
  },
  precioPorCaja: function () { return this.precio * this.caja }
}

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

https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos

// Un objeto de javascript es una serie de pares nombre:valor
// Tantos como necesite
// accedo a los valores de dos maneras:
// objeto.nombre   objeto['nombre']
// Tanto para obtener el valor como para poner un valor, igual que una variable o un array
// Los objetos pueden tener funciones
// nombre:function(){...}
// Las funciones pueden ejecutar cualquier código
// Y pueden usar las propiedades del objeto con la palabra reservada this

const coche = {
  modelo: 'Seat',
  color: 'Azul',
  precio: 7000,
  arrancar: function () {
    return 'Brum brum'
  },
  precioConIva: function () {
    return this.precio * 1.21
  }
}

const alumno = {
  nombre: 'Ana',
  apellidos: 'Pi',
  nombreCompleto: function () {
    return this.nombre + ' ' + this.apellidos
  }
}

// El valor puede ser cualquier cosa
const notas = {
  javascript: [1, 4, 7, 6, 3, 9],
  php: [6, 2, 9, 4],
  aprobados: function () {
    let total = 0
    for (let i = 0; i < this.javascript.length; i++) {
      if (this.javascript[i] >= 5) {
        total++
      }
    }
    return total
  }
}