Tal vez la aplicación más interesante de la DOM en javascript es la capacidad para que el usuario se comunique con el programa a través de la página web HTML5, sin todos esos cuadros de diálogo molestos. Aquí hay una página con un formulario web que contiene dos cuadros de texto y un botón.

Al hacer clic en el botón, algo emocionante sucede.

Claramente, es preferible a la interrupción constante de los cuadros de diálogo basada en formularios de entrada y de salida.

Presentación de la programación orientada a eventos

Interfaces de usuario gráficas suelen utilizar una técnica llamada programación orientada a eventos. La idea es simple.

1. Crear una interfaz de usuario.

   En las páginas web, la interfaz de usuario se construye generalmente de HTML y CSS.

2. Identificar los eventos el programa debe responder.

   Si usted tiene un botón, los usuarios podrán hacer clic en él. (Si desea garantizar que haga clic en él, poner el texto " lanzar los misiles " en el botón.) Botones casi siempre tienen eventos. Algunos otros elementos hacen, también.

3. Escriba una función de responder a cada evento.

   Para cada evento que desea probar, escribir una función que hace lo que tiene que suceder.

4. Obtener información de elementos de formulario.

   Ahora estás acceder a los contenidos de elementos de formulario para obtener información del usuario. Se necesita un mecanismo para obtener información de un campo de texto y otros elementos de formulario.

5. Utilice elementos de formulario para la salida.

Crear el formulario HTML

El primer paso en la construcción de un programa que puede gestionar la entrada y salida de texto es crear el marco HTML. Aquí está el código HTML:

Cuadro de texto de entrada y salida

Al revisar el código, tenga en cuenta algunas ideas importantes:

• La página usa CSS externo. El estilo CSS es agradable, pero no es importante en la discusión aquí. Se queda encapsulada en forma segura en su propio archivo. Por supuesto, le invitamos a mirar por encima o cambiarlo.

• La mayor parte de la página es un formulario. Todos los elementos de formulario deben estar dentro de un formulario.

• LA fieldset se utiliza para contener los elementos de formulario. entrada elementos deben estar dentro de algún tipo de elemento en bloque, y un fieldset es una elección natural.

• Hay un campo de texto llamado txtName. Este campo de texto contiene el nombre.

• El segundo elemento es un botón. Usted no necesita dar al botón de una identificación (ya que no se hace referencia en el código), pero tiene un al hacer clic() evento.

• El evento de El botón se refiere a una función (aún no definido). En este ejemplo, es llamado " sayHi () ".

• Un segundo cuadro de texto contiene el saludo. Este segundo cuadro de texto se llama txtOutput porque es el campo de texto destinado a la producción.

Después de configurar la página HTML, la función se vuelve bastante fácil de escribir porque usted ya ha identificado a todos los grandes construcciones. Usted sabe que necesita una función llamada Di hola, y esta función lee el texto de la txt-Name campo y escribe a la txtOutput campo.

Utilice getElementById conseguir el acceso a la página

HTML es una cosa, y javascript es otra. Usted necesita una cierta manera de convertir un elemento de formulario HTML en algo javascript puede leer. La mágica getElementById () método hace exactamente eso. En primer lugar, mira las dos primeras líneas de la Di hola() función (que se define en la cabecera como de costumbre).

 función sayHi () {var txtName = document.getElementById ("txtName") - var txtOutput = document.getElementById ("txtOutput") -

Puede extraer todos los elementos creados en tu página web cavando a través del DOM. En los viejos tiempos, este enfoque es cómo los desarrolladores utilizan para acceder a los elementos de formulario. Era feo y aburrido. Los navegadores modernos tienen la maravillosa getElementById () funcionar en su lugar. Esta belleza busca a través de la DOM y devuelve una referencia a un objeto con el ID solicitado.

LA referencia es simplemente un indicador en el que el objeto especificado está en la memoria. Puede almacenar una referencia en una variable. La manipulación de esta variable manipula el objeto que representa. Si lo desea, puede pensar que es lo que el cuadro de texto en una variable.

La manipulación de los campos de texto

Después de tener acceso a los campos de texto, puede manipular los valores de estos campos con el valor Inmueble:

 var name = txtName.value-txtOutput.value = "Hola" + nombre + "!"

Los campos de texto (y, de hecho, todos los campos de entrada) tienen un valor propiedad. Usted puede leer este valor como una variable de cadena ordinaria. También puede escribir a esta propiedad, y el campo de texto será actualizado sobre la marcha.

Este código se encarga de la entrada y salida de datos:

1. Crear una variable para el nombre.

   Esta es una variable de cadena ordinaria.

2. Copie el valor del cuadro de texto en la variable.

   Ahora que tiene una variable que representa el cuadro de texto, puede acceder a su propiedad para obtener el valor tecleado por el usuario.

3. Crear un mensaje para el usuario.

   Utilice la concatenación de cadenas ordinaria.

4. Envía el mensaje al salida caja de texto.

   También puede escribir el texto a la valor propiedad, que cambia el contenido del campo de texto en la pantalla.

Los campos de texto siempre devuelven valores de cadena (como indicaciones hacen). Si quieres tirar de un valor numérico de un campo de texto, puede que tenga que convertir con el parseInt () o parseFloat () funciones.