Mientras veía el código fuente de varios sitios un día, noté una gran cantidad de elementos que no contenían datos. Empecé a preguntarme por qué un diseñador web colocaría elementos en una página web para mostrar nada. Entonces me di cuenta de que esos elementos vacíos eran simples marcadores de posición. Áreas en blanco de la pantalla que el diseñador manipularía más tarde.
Una capacidad muy útil proporcionada por JavaScript es la capacidad de reemplazar el contenido de los elementos en un documento HTML existente que se mostró previamente, incluso los elementos vacíos. Hay muchas razones por las que un diseñador web puede optar por aprovechar esta capacidad, pero proporcionar páginas interactivas es un objetivo probable.
El concentrador de datos de formulario HTML de recuperación mostró los datos recuperados en una página nueva. Aunque ese método de hecho mostraba los datos, a veces mostrar los datos en la misma página de la que se recuperaron mejora el atractivo del sitio.
Lograr esta simple hazaña requiere el uso de otra técnica que emplea la función incorporada de JavaScript getElementByID() . ¿Mencioné que JavaScript distingue entre mayúsculas y minúsculas? Bueno, es así cuando usa funciones previamente definidas, asegúrese de obtener las letras mayúsculas y minúsculas correctas o recibirá errores de sintaxis cuando el intérprete de JavaScript no pueda ubicar la función. La función getElementById
En JavaScript, la función getElementById() brinda la capacidad de reemplazar datos en un elemento previamente incluido en un documento e identificado por un atributo id. Incluye el idattribute dentro de una etiqueta HTML. Por ejemplo, para incluir el atributo id para identificar un formulario como contactForm, incluiríamos el atributo id en la etiqueta <form> de la siguiente manera:
<form id="contactForm"> ... </form>
Ahora que hemos identificado el formulario en nuestro documento HTML, ahora podemos referirnos a ese formulario en un script.
La siguiente línea de un fragmento de código ilustra la forma general o la sintaxis para usar la función de JavaScript incluida en getElementById() :
document.getElementById(elementId).innerHTML="new content";
En la línea de código que se muestra, el documento es el documento principal o actual que contiene la función getElementById(). El elementId entre paréntesis hace referencia al ID del elemento que se va a modificar. La porción innerHTML=”nuevo contenido” de la declaración indica al navegador que reemplace el área HTML interna o el espacio entre las etiquetas de elementos HTML con el contenido representado por _nuevo contenido_entre comillas. Note también, los períodos ubicados dentro del estado de cuenta. Estos signos de puntuación son necesarios y separan el objeto del método y la acción a realizar.
El uso de esta función también ilustra las relaciones entre elementos en el modelo de objeto de documento (DOM) HTML del W3C. Aunque Internet no está bajo el control de una organización en particular, el W3C o World Wide Web Consortium desarrolla estándares para el desarrollo web.
Según el DOM, un documento se considera el objeto principal o de más alto nivel en la página web. Tomar prestado el concepto de objetos de la Programación Orientada a Objetos (POO) condujo a la inclusión de atributos y métodos dentro de los objetos. Según esta guía, el método getElementById() se incluye en la clase de documento y puede hacer referencia a cualquier elemento secundario del documento principal siempre que el elemento contenga el identificador de identificación, que el método utiliza para ubicar el elemento de destino.
Entonces, ¿qué podemos hacer usando la función getElementById() ? Preparémonos primero creando otra tabla después de la primera tabla en la parte <body> del código HTML. El siguiente fragmento de código crea una tabla que no muestra nada. Perdóneme por no incluir una captura de pantalla de la pantalla de la tabla cuando se ejecuta el código HTML, pero la pantalla se parecería a una imagen del proverbial oso polar en una tormenta de nieve, solo mucho blanco.
<table style="background-color:LightSkyBlue" border="1">
<tr>
<td id="ic1"></td><td id="ic2"></td>
</tr>
<tr>
<td id="ic3"></td><td id="ic4"></td>
</tr>
<tr>
<td id="ic5"></td><td id="ic6"></td>
</tr>
</table>
Mirando la captura de pantalla a la derecha, se muestra el formulario de entrada con el formulario vacío agregado. Le di al formulario un fondo azul para que la posición del nuevo formulario se mostrara en la captura de pantalla. Observe el tamaño muy pequeño de la tabla (pequeña caja azul).
Entonces, con la segunda tabla agregada, ahora podemos agregar el código usando el método getElementById() para extraer los datos del formulario y mostrar esos datos en la segunda tabla. El código para realizar estas acciones es el siguiente:
<script type="text/javascript">
function commitData() { document.getElementById("ic1").innerHTML="First Name";
document.getElementById("ic2").innerHTML=document.contactForm.fname.value;
document.getElementById("ic3").innerHTML="Last Name";
document.getElementById("ic4").innerHTML=document.contactForm.lname.value;
document.getElementById("ic5").innerHTML="E-mail Address";
document.getElementById("ic6").innerHTML=document.contactForm.emAddress.value;
}
</script>
¿Que has aprendido?
En el ejemplo, coloca el código anterior en la sección <head> del documento HTML y llama a la función usando el evento onclick (más información sobre el evento onclick en un centro posterior). El evento onclick se activa cuando el usuario hace clic en un botón que proporciona como elemento <input> en el formulario utilizado para proporcionar los datos. Esta no es la única manera de usar la función getElementById() pero es el método usado por el autor para este ejemplo. Experimente con la función para aprender realmente la versatilidad del método.
Una nota rápida:
Notarás que en la mayoría de mis ejemplos de código, el código está formateado con sangrías. Estas sangrías se denominan espacios en blanco y simplemente mejoran la legibilidad del código para un espectador humano.
A las computadoras no les importa el espacio en blanco y analizan esa parte del código de la versión en ejecución del programa.
Sin embargo, el espacio en blanco facilita la depuración del código y, cuando se trabaja con código HTML, el espacio en blanco facilita la localización de etiquetas faltantes. Esta técnica también es útil cuando se trabaja con otros idiomas.
Este artículo fue escrito originalmente por Daisy Rowley de DoMyWriting
