Javascript y DOM

1. Tome este primer documento HTML y mediante Javascript añada:

   1. Un elemento H1 cuyo contenido sea exactamente el mismo que el del título de la página.

   2. Una lista con los N primeros números primeros.

   3. Un pie al documento anterior que incluya la fecha en la que se carga la página.

2. Con el siguiente código Javascript:

   const url = "Esto.es.una.direccion.URL";
   
   fetch(URL)
      .then(response => {
         if(response.ok) return response.json()  // La respuesta es un objeto JSON.
         else throw new Error(response.status);
      })
      .then(data => {
         // data contiene el objeto con los datos obtenidos de la URL.
      })
      .catch(err => {
         console.error(`ERROR: ${err.message}`);
      });
   

   Podemos hacer una petición AJAX para obtener datos JSON facilitados en una dirección web. Sabiendo esto, cree una página web que muestre en una tabla los distintos tipos de carburante para automoción vendidos en España.

   Nota

   Échele un ojo a los ejemplos que introducen la unidad sobre Almacenamiento para saber la URL.

3. En el siguiente documento HTML manipule el comportamiento del botón para que muestre u oculte el resto del texto (el incluido dentro de span).

   Solución propuesta.

4. Vuelva a resolver los ejercicios 3 y 6 de la relación básica, pero mediante una interfaz HTML para tomar datos y mostrar resultados.

5. Vuelva a resolver el ejercicio 9 de la relación básica, pero mediante una interfaz HTML para tomar datos y mostrar resultados. Incluya en la web una tabla con las equivalencias.

6. Vuelva a resolver el ejercicio 6 de la relación media, pero mediante una interfaz HTML para tomar datos y mostrar resultados.

7. Tome el formulario creado para el ejercicio de HTML sobre formularios y añada Javascript para:

   1. Habilitar el cuadro de texto al marcar la opción de «otras aficiones».

   2. Evitar que el formulario sea enviado. En vez de eso, una aviso emergente dirá «Este formulario debería enviarse a algún servidor».

   3. Capturar el botón «Limpiar» para que pedir confirmación de que realmente se quiere limpiar.

   4. Impedir que se envíe el formulario con contraseñas contradictorias. Para este apartado han de resolverse tres alternativas diferentes.

      1. Al intentar enviarse el formulario, se formula la queja y no se envía.

      2. La comprobación se hace mientras se teclea la segunda contraseña. Puede, por ejemplo, mostrar el fondo del input de la segunda contraseña en rojo y sólo pasar a verde cuando ambas contraseñas coincidan. Además, el formulario no podrá enviarse si no hay coincidencia.

      3. Ponga sólo un campo para la contraseña y un icono que permita ver y ocultar a voluntad el texto.

   Solución propuesta.