Curso de Javascript | DOM con Javascript

Curso de Javascript Online. Desde cero.

2.  
14.  
19.  
21.  
22.  
25.  
26.  
28.  
34.  

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

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.

Curso de Javascript | DOM con Javascript 1

querySelector

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

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

	document.querySelector('button').addEventListener('click', saludar);
</script>
Curso de Javascript | DOM con Javascript 2

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.

Curso de Javascript | DOM con Javascript 3

2. Hacer un formulario que convierta de grados centígrados a grados Fahrenheit. Para ello deberé multiplicar por 9/5 y sumar 32. Tener en cuenta que 30 grados centígrados son 86 grados fahrenheit.

Curso de Javascript | DOM con Javascript 4

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.

Curso de Javascript | DOM con Javascript 5

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

<input type="radio" name="rBtn" class="radiusBtn" value="love1">
<input type="radio" name="rBtn" class="radiusBtn" value="love2">
<input type="radio" name="rBtn" class="radiusBtn" value="love3">
<input type="button" id="btn">

<script>
	const calculate = () =>{
		//const value = document.querySelector('.radiusBtn:checked').value;
		const value = document.querySelector('[name=rBtn]:checked').value;
		console.log(value)
	}

	document.querySelector('#btn').addEventListener('click', calculate);
</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.

Curso de Javascript | DOM con Javascript 6

5. Ejercicio coste viaje.

Vamos a hacer una aplicación que se encargará de calcular el coste de un viaje. Para ello tendremos una función llamada calculateCost que llamará a otras tres funciones.

Cada una de estas tres funciones hará un cálculo de un coste parcial del viaje. La suma de los tres costes será el coste total del viaje.

El código HTML quedaría así:

Curso de Javascript | DOM con Javascript 7

calculateCost()

  • Es la única que se conecta con el HTML. Para recuperar datos y pintar los resultados.
  • No tiene return.
  • La activamos al hacer click.
const calculateCost = () =>{
	const numNights = document.querySelector("#numNights").value;

	const hotelCost= calculateHotelCost(numNights);

	document.querySelector("#hotelCost").value = hotelCost;
}

calculateHotelCost(), calculateAirplaneCost(), calculateRentingCarCost()

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

calculateHotelCost()

Además de la función calculateCost() que vimos parcialmente más arriba, crea una función llamada calculateHotelCost() 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.

calculateAirplaneCost()

La función calculateAirplaneCost() 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

calculateRentingCarCost()

La función calculateRentingCarCost() 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).

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.