Índice del curso de ES6

  1. Introducción al Curso de Javascript
  2. console.log
  3. Comentarios
  4. Variables
  5. Operadores
  6. Estructuras condicionales
  7. Bucle for
  8. Bucle while
  9. Break! - Gran día de repaso
  10. funciones
  11. Arrow functions
  12. Métodos para trabajo con cadenas
  13. Números aleatorios
  14. location.href
  15. Colección de ejercicios
  16. DOM
  17. Efecto Parallax
  18. innerHTML
  19. Propiedad style
  20. Cambiar atributo src
  21. Añadir clase, borrar clase, alternar clase, evaluar si tiene una clase
  22. Create Element
  23. Arrays
  24. Ejercicios avanzados
  25. LocalStorage
  26. Deconstrucción
  27. fetch
  28. Import, export
  29. Modernizr

DOM

Gracias al DOM, Javascript puede acceder y modificar todos los elementos de un documento HTML. Para ello, el navegador crea una representación interna de la página, un árbol de nodos.

arbol de nodos

querySelector I

<form>
	Escribe tu nombre, por favor:
	<input type="text" id="campoNombre">
	<input type="button" id="btn" value="Enviar formulario">
</form>

<script>
	const saludar = _ =>{
		console.log(document.querySelector('#campoNombre').value);
	}

	document.querySelector('#btn').addEventListener('click', saludar);
</script>

querySelector II

<form>
	Escribe tu nombre, por favor:
	<input type="text" id="campoNombre">
	<input type="button" id="btn" value="Enviar formulario">
</form>

<script>
	const saludar = _ =>{
		const info = document.querySelector('#campoNombre').value;
		console.log(info);
	}

	document.querySelector('#btn').addEventListener('click', saludar);
</script>

querySelector III

<form>
	Escribe tu nombre, por favor:
    <input type="text" id="campoNombre">
    <input type="button" id="btn" value="Enviar formulario">
    <input type="text" id="campoNombre2">
</form>

<script>
	const saludar = _ =>{
		const info = document.querySelector('#campoNombre').value;
		document.querySelector('#campoNombre2').value = info;
	}

	document.querySelector('#btn').addEventListener('click', saludar);
</script>

querySelector IV

<form>
	Escribe tu nombre, por favor:
	<input type="text" id="campoNombre">
	<input type="button" id="btn" value="Enviar formulario">
	<input type="text" id="campoNombre2">
</form>

<script>
	const saludar = _ =>{
		document.querySelector('#campoNombre2').value = document.querySelector('#campoNombre').value;
	}

	document.querySelector('#btn').addEventListener('click', saludar);
</script>

Mecánica de resolución ejercicios

  1. Escribe el código HTML.
  2. Al pulsar sobre el botón debes llamar a una función que muestre un log: console.log("llega").
  3. Ahora el console.log mostrará el value de los datos de entrada en lugar del texto "llega".
  4. Procesa la información.
  5. Muestra el resultado.

Ejercicios DOM

  1. Hacer un formulario que convierte de euros a dólares. Supondremos que un euro son dos dólares

  2. Hacer un formulario que convierta de grados centígrados a grados Fahrenheit. Para ello deberé multiplicar por 9/5 y sumar 32.

    Es posible ampliar este ejercicio añadiendo un segundo botón, de tal forma que cuando lo pulsemos, recojamos los grados Fahrenheit introducidos, calculemos los correspondientes grados centígrados y los pintemos en la caja de texto correspondiente.

  3. Hacer un formulario para solicitar el envío de una caja de cartón. En el formulario podremos especificar las características de la caja.

    Para acceder al valor marcado de un conjunto de radio buttons:

    <input type="radio" name="boton" class="botoncito" value="amor1">
    <input type="radio" name="boton" class="botoncito" value="amor2">
    <input type="radio" name="boton" class="botoncito" value="amor3">
    <input type="button" id="btn">
    
    <script>
    	const calcula = _ =>{
    		//const valor = document.querySelector('.botoncito:checked').value;
    		const valor = document.querySelector('[name=boton]:checked').value;
    		console.log(valor)
    	}
    
    	document.querySelector('#btn').addEventListener('click', calcula);
    </script>
  4. A través de un formulario, el usuario debe introducir un número secreto que estará entre 0 y 5.
    El usuario tendrá tres intentos para acertar el número, si no lo logra, habrá perdido el juego.
    Debemos indicar en un cuadro de texto si el usuario gana, falla el número o pierde. Ver ejemplo

Ejercicios DOM con funciones

  1. Realizar la calculadora utilizando funciones para las operaciones aritméticas.

    Ejercicio calculadora con funciones
  2. Ejercicio coste viaje

    Realizaremos el siguiente ejercicio en grupos de tres personas. La propuesta para la distribución de tareas será la siguiente (puede variar según grupo):

    • alumno 1 - Función calcular_coste() y función coste_hotel()
    • alumno 2 - Función coste_avion().
    • alumno 3 - Función coste_alquiler_coche().

    Podeis compartir el código que hagais entre vosotros usando https://codeshare.io/

    calcular_coste()

    • Es la única que se conecta con el HTMl. Para recuperar datos y pintar los resultados.
    • No tiene return.
    • La activamos al hacer click.

    coste_hotel(), coste_avion(), coste_alquiler()

    • No tienen contacto con el HTML.
    • Tienen parámetros de entrada.
    • Tienen return.

    Ejercicio - coste hotel

    Además de la función calcular_coste() que te paso más bajo, crea una función llamada coste_hotel() que recibe como parámetro el número de noches. La función debe devolver cuanto es necesario pagar teniendo en cuenta que cada noche cuesta 140 euros.

    calcular_coste = _ =>{
    	const num_noches = document.querySelector("#num_noches").value;
    
    	const resultado1 = coste_hotel(num_noches);
    
    	document.querySelector("#result").value = resultado1;
    }
    Coste hotel

    Ejercicio – Coste avión

    La función coste_avion() tiene como parámetro de entrada el nombre de una ciudad y el número de noches. El coste corresponderá al indicado en la siguiente tabla, pero para una estancia de más de tres noches la agencia de viaje nos hará un descuento del 10%.

    Los costes por ciudad son los siguientes:
    "Oviedo": 15
    "Tokyo": 700
    "Madrid": 90
    "Barcelona": 90

    Coste avión

    Ejercicio – Coste alquiler coche

    La función coste_alquiler_coche() tiene como parámetro de entrada el número de noches y devolverá un coste en función de dicho parámetro, teniendo los siguientes aspectos en cuenta:

    • Cada día de alquiler cuesta 40 €.
    • Si alquilas un coche por 3 días o más, obtienes un descuento de 20€ sobre el total.
    • Si alquilas un coche por 7 días o más, obtienes un descuento de 50€ sobre el total (no acumulable con los 20€ de haber alquilado por más de 3 días).
    Coste alquiler coche
icono de mandar un mailPreguntame lo que quieras!
Pablo Monteserín
contacta conmigoPablo Monteserín

El servicio de resolución de dudas técnicas es sólo para los usuarios premium. Si tienes cualquier otra duda, usa el formulario de contacto. ¡Gracias!