https://edabit.com/challenges/javascript
Ejercicio eventos
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() }
Página palíndromo
<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 }
Ejemplo eventos
<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 }
Probando el DOM
<div class="container "> <div class="form-group"> <label for="cadena">Nombre:</label> <input type="text" class="form-control" id="cadena"> <a href="@" class="a" id="firstlink">Esto es un enlace</a> <a href="@" name="b">Esto otro</a> <a href="@" name="c">Y otro más</a> </div> <a href="@" class="a">Esto es un enlace</a> <a href="@" class="b">Esto otro</a> <a href="@" class="c">Y otro más</a> <h1 class="a">hola</h1> <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> <button type="button" onclick="contar()">Contar</button> <script src="js/test.js"></script> </div>
Vamos a seleccionar:
1.- El elemento con id firstlink
document.getElementById('firstlink')
2.- Todos los ‘h1’
document.getElementsByTagName('h1') document.querySelectorAll('h1')
3.- Los elementos con clase ‘a’
document.getElementsByClassName('a') document.querySelectorAll('.a')
4.- Los elementos h1 con clase ‘a’
document.querySelectorAll('h1.a')
5.- Los enlaces con clase ‘a’
document.querySelectorAll('a.a')
6.- Todos los botones de la página
document.getElementsByTagName('button') document.querySelectorAll('button')
No nos olvidemos de que excepto getElementById y querySelector todas las funciones de selección nos devuelven una colección (array) que hay que recorrer
Primeros pasos para programar
/* 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 }
Ejercicios repaso JS
/*
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 }
Mini ejercicio objetos
// 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 } }
JS objetos
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 } }
Como funciona sort en JS
Aquí lo explican muy bien, con ejemplos:
https://www.todojs.com/usar-correctamente-el-metodo-sort/
Y lo resumen así:
En general debemos aprovechar la funcionalidad de .sort() con un una función de apoyo que permita controlar cómo se debe realizar la ordenación, en general bastará con:
números: (a, b) => a – b
cadenas: (a, b) => a.localeCompare(b)
https://medium.com/madhash/demystifying-the-mysteries-of-sort-in-javascript-515ea5b48c7d