Cómo crear una salida sencilla aplicación html5 con javascript

Al escribir aplicaciones en javascript, debe enfrentar algunos problemas antes de estar realmente preparado para ellos. Es un escenario gallina o el huevo - qué técnica debe abordar en primer lugar? Eso es lo que pasa con la salida de la aplicación.

Para ver cómo funcionan algunas técnicas de programación, lo que necesita saber cómo escribir la salida a la pantalla de la aplicación. Por supuesto, usted realmente necesita saber más sobre javascript antes de poder dominar la técnica de escribir nada en la pantalla.

Cómo escribir en un elemento HTML

Los documentos HTML se componen de elementos individuales. Un elemento es cualquier etiqueta que se utiliza para mantener el contenido, como un

,

, o etiqueta. Usted puede escribir información en cualquiera de estos elementos mediante el uso de javascript. El siguiente ejemplo muestra cómo se puede escribir en elementos específicos.

Salida de datos a HTML

Creación de salida del elemento HTML

Cámbiame

En este caso, la página contiene una

etiqueta con un Identificación de myText. Este párrafo contiene el texto Cámbiame. Además, hay una etiqueta que crea un botón, el usuario puede hacer clic. Cuando el usuario hace clic en el botón Click Me, la aplicación llama al WriteText () función que aparece en la del documento dentro del etiqueta.

javascript tiene varios objetos globales se puede acceder con el código. Uno de los objetos más importantes es documento, que se refiere a la totalidad del documento HTML. Por supuesto, usted no desea cambiar la totalidad documento- que desea cambiar sólo un elemento dentro del documento. los getElementById () función recupera cualquier elemento que tiene una Identificación atribuir el nombre de ese atributo, que es myText en este caso.

En este punto, usted tiene acceso a la totalidad

elemento con el nombre myText. ¿Quieres cambiar el texto dentro de ese elemento. los innerHTML propiedad ofrece acceso al texto dentro de la

elemento. Usted puede leer bien el contenido o modificarla. Usando innerHTML =, como se muestra en el código, modifica el contenido. Esto hace que el contenido de la misma a lo que sigue, que es Seguido! en este caso.

Al intentar el ejemplo, se ve inicialmente una página con un poco de texto y un botón. Haga clic en el botón, y el valor de los cambios en el texto. Esta técnica funciona con cualquier elemento que muestra texto. Usted podría tan fácilmente utilizarlo con un o cualquier otra etiqueta que puede mostrar texto.

Esta técnica sólo funciona cuando se interactúa con los elementos que contienen texto dentro de una etiqueta de apertura y cierre, como

. Cuando se trabaja con un u otro elemento que utiliza atributos para mantener el contenido, es necesario utilizar un método diferente. En este caso, debe acceder al atributo en el control y realizar el cambio ahí, como se muestra aquí:

document.getElementById ("btnClickMe") setAttribute ("valor", "Seguido!"). -

En este caso, usted pregunta javascript para obtener acceso a la btnClickMe elemento en el documento y luego para establecer el valor atribuir a Seguido!. El resultado es el mismo que cuando se trabaja con el

tag, pero el enfoque es ligeramente diferente. los innerHTML propiedad es útil sólo para los elementos que tienen un valor asignado a esa propiedad.

Cómo crear una salida directa javascript documento

En algunos casos, usted no desea interactuar con un elemento existente, por lo que se crea un nuevo elemento que contiene el contenido que desea ver. Por ejemplo, puede agregar un nuevo

etiqueta que contiene el texto que desea ver. javascript proporciona un número de maneras de lograr esta tarea.

La forma más sencilla para realizar la tarea es crear una secuencia de comandos en línea como la que se muestra en el siguiente ejemplo que añade la salida requerida.

Salida de documentos directo

Creación de Salida Directa

El punto focal de este ejemplo es la llamada a la document.write () función. Esta función le permite escribir cualquier texto que desee a la documento objeto. En este caso, el ejemplo se crea un nuevo

etiqueta que contiene un mensaje simple.

Usted puede crear fácilmente este texto añadiendo el

etiquetar directamente. Esta técnica en particular es muy útil. Por ejemplo, se podría utilizar para comprobar si hay una condición y luego añadir el texto adecuado en función de la condición. Lo que hay que ver en este ejemplo es que escribir el documento usando un script es posible.

Evitar posibles problemas con la salida

Errores puede causar todo tipo de problemas para los usuarios que, a su vez, causar todo tipo de problemas para usted. Uno de los errores más interesantes que se pueden encontrar es escribir información en un documento objetar incorrectamente. A continuación se ilustra una situación en la que se ve el resultado incorrecto de utilizar el document.write () función.

Salida incorrecta

Creación de salida del elemento HTML

Cámbiame

Observe que el document.write () función es llamada después de que se complete la página. Cuando se utiliza el document.write () función en esta forma, se sobrescribe todo lo que aparece en el documento objeto. Al hacer clic en el botón Click Me en la página, se ve la palabra ¡Huy! pantalla y nada más.

De hecho, la página ni siquiera terminar la carga porque el navegador no sabe qué hacer con él. Para detener el proceso de carga, debe hacer clic en el botón manualmente Cargando Detener del navegador.

En este punto, si se utiliza la capacidad de su navegador para ver la fuente de la página, verás una sola palabra, ¡Huy!. La página ya no contiene una declaración, , , o etiquetas, o cualquiera de los otros datos se utiliza para contener. los document.write () función ha sobrescrito todo.

Ahora, esto no siempre es un resultado incorrecto - puede que realmente se necesita para sobrescribir la página con material nuevo, pero es necesario crear una página totalmente nueva al hacerlo.




» » » » Cómo crear una salida sencilla aplicación html5 con javascript