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

JS repaso arrays

Un array en JS es un conjunto de variables a las que accedemos a través de un índice. Si tenemos:
let tabla=[1,2,3,4]

tabla[0]–>1
tabla[1]–>2
tabla[2]–>3
tabla[3]–>4

Podemos recuperar el valor o modificarlo

Para recorrer un array podemos utilizar el bucle for de toda la vida. En los siguientes ejercicios vamos a usar el bucle for aunque no el if

1.- Una función arrayNumeros a la que le pasemos un número y nos devuelva un array desde el 1 hasta ese número. Ej: arrayNumeros(5)–>[1,2,3,4,5]
2.- Una función sumaArray a la que le pasemos un array de números y nos devuelva la suma de todos ellos. Ej: sumaArray([2,5,7])->14 (2+5+7)
3.- Una función arrayTotal a la que le pasamos dos arrays de números y nos devuelve los arrays juntos y ordenados de menor a mayor. Ej: arrayTotal([4,5],[1,2])–>[1,2,4,5] (nota: es más fácil de lo que parece)

En los siguientes sí que utilizamos el if

4.- Una función positivos a la que le pasamos un array de números y nos devuelve sólo los positivos. Ej: positivos([1,-2,5,2,-7])->[1,5,2]
5.- Una función estaOrdenado que nos devuelva true si le pasamos un array ordenado y false en caso contrario. Ojo, no que lo ordene, que nos diga si está ordenado. Ej: estaOrdenado([1,4,7])->true estaOrdenado([1,4,3])->false


function arrayNumeros (numero) {
  // Inicializo el array a un array vacío y la manera es la siguiente:
  const res = []
  for (let i = 1; i <= numero; i++) {
    res.push(i)
  }
  return res
}

function sumaArray (array) {
  let suma = 0
  for (let i = 0; i < array.length; i++) {
    suma += array[i]
  }
  return suma
}

function arrayTotal (array1, array2) {
  const res = array1.concat(array2)
  // Equivalente: sort(function(a,b){return a-b})
  res.sort((a, b) => a - b)
  return res
}

function positivos (array) {
  const res = []
  for (let i = 0; i < array.length; i++) {
    if (array[i] >= 0) {
      res.push(array[i])
    }
  }
  return res
}

// Primero ordenar y luego un recorrido y con un if miro si son iguales o no
// Recorrer el array y si hay dos elementos consecutivos que están desordenados->false y si llego al final
// Y no me he encontrado ningún caso está ordenado->true
// Tengo dos archivadores: original y la copia
// Cada archivador tiene n cajones
// ¿Tienen lo mismo?
// empiezo en el primer cajón y acabo en el último
// Abro el cajón del archivador 1 y abro el cajón del archivador 2
// ¿SOn diferentes?- > COn que haya un cajón que tenga un contenido diferente
function estaOrdenado (array) {
  const copia = array.slice()
  copia.sort((a, b) => a - b)
  for (let i = 0; i < array.length; i++) {
    // Yo en i voy teniendo valores consecutivos: 1,2,3,->posicion
    // Yo en array[i] voy teniendo el contenido del array
    // Yo en copia[i] voy teniendo el contenido de copia
    if (array[i] != copia[i]) {
      return false
    }
  }
  return true
}

function estaOrdenado2 (array) {
  // Empiezo en el 1 porque el 0 no tiene una posición anterior
  for (let i = 1; i < array.length; i++) {
    // array=[1,4,2] Si el 2 es menor que el 4 está desordenado
    if (array[i] < array[i - 1]) {
      return false
    }
  }
  return true
}

JS Repaso bucles for

Los bucles for nos permiten repetir una acción un numero determinado de veces. Se usan cuando conocemos el inicio y el fin de los límites.

Veamos un ejemplo: una función que nos sume los números desde el uno hasta el número que le digamos. Ej. SUmaNUmeros(3)–>6 (1+2+3)

function sumaNumeros(num){
let total=0
for(let i=1;i<=num;i++){
total+=i
}
return total
}

Para los siguientes ejercicios sólo utilizaremos bucles for

1.- Una función repetirCadena a la que le pasamos una cadena y un número y nos repite la cadena ese número de veces. Ej: repetirCadena(‘hola’,3)->’holaholahola’ repetirCadena(‘*’,5)->’*****’
2.- Una función listaNumeros a la que le pasamos un número y nos devuelve una cadena con la lista desde el 1 hasta el número que le pasemos separadas por coma. Ej: listaNumeros(4)->’1,2,3,4′
3.- Una función factorial que nos devuelva el factorial de un número. Factorial es la multiplicación de todos los números desde el 1 hasta el número. Ej: factorial(4)–>24 (1*2*3*4)
4.- Una función sumaEntre a la que le pasamos dos números y nos suma los números desde el primero hasta el último ambos incluídos. Ej: sumaEntre(4,8)->30 (4+5+6+7+8)
5.- Una función pares a la que le pasemos un número y nos devuelva una cadena con todos los números pares desde el 2 hasta ese número (nos hará falta un if). Ej: pares (11)->’2,4,6,8,10′


function repetirCadena (cadena, num) {
  let res = ''
  for (let i = 0; i < num; i++) {
    res += cadena
  }
  return res
}

function repetirCadena2 (cadena, num) {
  return cadena.repeat(num)
}

function listaNumeros (num) {
  let res = ''
  for (let i = 1; i <= num; i++) {
    res += i + ','
  }
  return res.slice(0, -1)
}

function factorial (num) {
  let res = 1
  for (let i = 1; i <= num; i++) {
    res *= i
  }
  return res
}

// SI los numeros no me los dan ordenados asumo que la suma es 0
// Y me quedo tan ancho. Si no que el cliente lo hubiera especificado
function sumaEntre (num1, num2) {
  let suma = 0
  for (let i = num1; i <= num2; i++) {
    suma += i
  }
  return suma
}

// Por desgracia el cliente me lo ha pedido
// Aprovecho las funciones que me da JS. Math.max y Math.min
function sumaEntreInvertidos (num1, num2) {
  let suma = 0
  for (let i = Math.min(num1, num2); i <= Math.max(num1, num2); i++) {
    suma += i
  }
  return suma
}

// Por desgracia el cliente me lo ha pedido
// Si no las conociera lo tendría que hacer yo
function sumaEntreInvertidos2 (num1, num2) {
  let menor = num1
  let mayor = num2
  if (num2 < num1) {
    menor = num2
    mayor = num1
  }
  let suma = 0
  for (let i = menor; i <= mayor; i++) {
    suma += i
  }
  return suma
}

function pares (num) {
  let res = ''
  for (let i = 1; i <= num; i++) {
    if (i % 2 == 0) {
      res += i + ','
    }
  }
  return res.slice(0, -1)
}

function pares2 (num) {
  let res = ''
  for (let i = 2; i <= num; i += 2) {
    res += i + ','
  }
  return res.slice(0, -1)
}

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
}