<!DOCTYPE>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Java Script</title>
  <link rel="stylesheet" href="css/style.css">
  </head>
   
  <body>
   
  <form action="js.html" method="get" name="formu" id="formu" onSubmit="return comprobar()">
   
  <label>Nombre: </label>
  <input type="text" name="nombre" value=""><br>
   
  <label>Edad: </label>
  <input type="text" name="edad" value="" size="2" maxlength="2"><br>
   
  <input type="submit" value="Enviar">
  </form>
   
  <!-- Scripts de validación del formulario. -->
  <script language="javascript">
  function comprobar()
  {
  var nombre = document.formu.nombre.value;
  var edad = document.formu.edad.value;
   
  if (nombre.length <= 0)
  {
  alert("Digite su nombre, por favor.");
  return false;
  }
   
  if (nombre.length > 30)
  {
  alert("Su nombre es demasiado largo.");
  return false;
  }
   
  if (edad <= 0)
  {
  alert("Digite su edad, por favor.");
  return false;
  }
   
  if (edad <= 17)
  {
  alert("Si usted es menor de edad, no puede usar este programa.");
  return false;
  }
   
  return true;
  }
   
  function pasar_datos()
  {
  var nombre = document.formu.nombre.value;
  var edad = document.formu.edad.value;
   
  window.nombre = nombre;
  window.edad = edad;
  }
  </script>
   
  <!-- Color del párrafo. -->
   
  <p id="parrafo"> Cambie el color del párrafo. </p>
   
  <input type="button" value="Cambiar a rojo" onClick="rojo()">
   
  <input type="button" value="Cambiar a verde" onClick="verde()">
   
  <input type="button" value="Cambiar a azúl" onClick="azul()">
   
  <br/><br/><br/>
   
  <!-- Color del fondo. -->
   
  <input type="button" value="Color del fondo: Naranja" onclick="fondo_naranja()" />
   
  <input type="button" value="Color del fondo: Gris" onclick="fondo_gris()" />
   
   
  <input type="color" id="color" value="#FFFFFF">
  <div id="nombre_color">
   
  </div>
   
  <!-- Scripts de cambios de color -->
   
  <script language="javascript">
  function rojo() {
  document.getElementById('parrafo').style.color = '#FF0000';
  }
   
  function verde() {
  document.getElementById('parrafo').style.color = '#00FF00';
  }
   
  function azul() {
  document.getElementById('parrafo').style.color = '#0000FF';
  }
   
   
  function fondo_naranja (){
  document.body.style.backgroundColor='#F70';
  }
   
  function fondo_gris (){
  document.body.style.backgroundColor='#888';
  }
   
  var color = document.getElementById('color');
  color.addEventListener('change', a =>{
  document.body.style.backgroundColor= color.value;
  });
   
   
  </script>
   
  <br>
   
  <!-- Slider -->
   
  <div class="w3-content w3-display-container" style="width:50%">
  <img class="mySlides" src="img/1.jpg" style="width:100%">
  <img class="mySlides" src="img/2.jpg" style="width:100%">
  <img class="mySlides" src="img/3.jpg" style="width:100%">
   
  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
  </div>
   
  <!-- Script de los botones del slider. -->
   
  <script>
  var slideIndex = 1;
  showDivs(slideIndex);
   
  function plusDivs(n) {
  showDivs(slideIndex += n);
  }
   
  function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
  }
  </script>
   
  </body>
  </html>