Laboratorio 1 de DEW, sesión 3: JavaScript y el DOM

Atención: esta sesión se imparte después de la cuarta

Uso en formularios

La idea es colocar una función que pueda comprobar los datos introducidos en un formulario antes de enviarlos al CGI que deberá procesarlos.

Las bases: activación y acceso a variables

Dada una función f(), la vinculamos al envío del formulario en el inicio del mismo: <form action="..." onsubmit="return f(this);">
Si la función devuelve un valor true entonces se invocará el CGI especificado por action

Modifica este miniformulario para incluir una variable dato que reciba un valor del usuario, y que sea mostrado mediante un alert en la función

Uso: comprobación del NIF

En este apartado debe crearse un par formulario/script de manera que el primero permita la introducción de un valor (x) que el segundo debe comprobar y diagnosticar. El único caso positivo se produce cuando x es un NIF válido. Para ello:

  1. x debe tener 9 símbolos
  2. Los primeros 8 deben ser dígitos
  3. Si llamamos y a esos 8 dígitos, y z al noveno símbolo, entonces la comprobación puede ser la siguiente:
    <script>
      function validar(y, z)
      {
          letras = "TRWAGMYFPDXBNJZSQVHLCKET"
          return (z == letras[y % 23])
      }
    </script>
    

Construye la página completa, incluyendo formulario y script, de forma que se notifique si el valor introducido es un NIF válido o no

Validar NIF

Alterando la estructura del documento

Hay una gran diferencia entre modificar contenidos en una página y alterar la estructura. Cuando el navegador procesa el documento, crea una estructura interna que lo representa. No es especialmente complicado desde ese momento modificar el contenido de un párrafo o una propiedad existente porque ninguna de estas operaciones altera la estructura. Sin embargo, añadir un elemento entre otros dos sí que es más complejo, y le dedicamos una atención especial en este ejercicio.

Funciones para modificar un documento HTML

Imaginemos que deseamos incluir un párrafo con un enlace dentro de un <div> etiquetado con id="aqui"

var destino = document.getElementById('aqui')
var p = document.createElement('p')
// Comenzamos a colocar contenido en p (...falta)
var a = document.createElement('a')
// Damos valores a las propiedades necesarias de a (...falta)
// Agregar el enlace al parrafo
p.appendChild(a)
// Terminamos de colocar contenido en p (...falta)
// Agregar el parrafo al div
destino.appendChild(p);

Aquí tienes un pequeño ejemplo.

El documento de partida

Típicamente se colocan estructuras de organización y navegación en documentos de cierto tamaño. Con esta excusa, procedente de Wikisource, he seleccionado el inicio del primer capítulo de la primera parte de El ingenioso Hidalgo Don Quijote de la Mancha, de Miguel de Cervantes Saavedra.

El documento de partida es una versión modificada de los primeros párrafos, cada uno precedido por un <h3> para simular un título que hemos de indexar en la tabla de contenidos.

Una solución paso a paso

  1. ¿Dónde colocar la TdC?

    Colocamos la Tabla de Contenidos en un <div> con id="tdc-aqui" justo antes del primer elemento <h3> a indexar. El código interesante será

        <div id="tdc-aqui"></div><!-- Ubicación de la Tabla de Contenidos -->
      
  2. Recorrer los <h3> e incorporarlos a la TdC
    Obtenemos la lista con una instrucción var h3 = document.getElementsByTagName('h3'), y luego hemos de recorrer el vector para extraer la información.
  3. Añadir enlaces y numeración
    Se necesita colocar un id en el destino para que pueda ser referenciado desde el enlace de la TdC. Dado que recorremos cada uno, podemos utilizar el contador para numerar.
  4. Un pequeño guiño en el destino del enlace [SOLUCIÓN]
    Como puede haber múltiples destinos en la misma página, podemos colocar un efecto que destaque el <h3> concreto

Ejercicio de examen (lotería primitiva)

Se trata de un ejercicio compuesto por una página HTML con formulario, código JavaScript de ejecución secuencial, y una función JavaScript para comprobar los valores del formulario. El enunciado es un archivo PDF.

Loteria primitiva

Sesiones de Jose Ramon

Puede que no estén todas disponibles

  1. Sesión 1
  2. Sesión 2
  3. Sesión 3
  4. Sesión 4

Sesiones editadas

  1. Sesión 1
  2. Sesión 2
  3. Sesión 3. Esta web
  4. Sesión 4