Cómo enviar parámetros entre documentos HTML usando JavaScript

En mi articulo anterior, se pudo ver, como se guarda información mediante el uso de una base de datos creada en el lado de cliente, gracias a una de las nuevas características de html5. Claro esta que así como una herramienta, característica o método, ya sea nuevo o viejo, tenga una ventaja, también trae consigo desventajas, y es bueno tener conocimiento de estas.

Una desventaja la cual me encontré en el camino mientras desarrollaba, fue que, al dar click a un botón o cualquier elemento dentro de la pagina que me enviara a otra pagina, los datos dentro de la nueva pagina no eran visibles.

Esta desventaja se puede solucionar desarrollando nuestra aplicación web mediante la arquitectura SPA (Single Page Application o Aplicación de una sola pagina) , esto nos permite tener una mejor fluidez en nuestra pagina, y ademas tendrá una apariencia como las aplicaciones de escritorio. Esta experiencia es buena para el usuario, ya que podrá tener todo en una sola vista.

1

En la imagen anterior, se puede ver un diseño que se puede usar, una cabecera, el cual se coloca el titulo de la aplicación o nombre d la pagina, una barra lateral, o también puede ser seguido de la cabecera o en donde quieran, y un espacio donde ira el contenido, el cual se cambiara dependiendo la opción que estemos este nos mostrara información relativa en donde estemos situados en la aplicación. Por lo general recomiendo crear un div, el cual servirá como contenedor de la información a mostrar, lo diferenciamos con un identificador, de preferencia yo uso contenedor.

2

A continuación, explicare como realizar la aplicación e iré colocando el código. Usare el framework Materializecss para darle estilo a nuestra aplicación, html, javascript, jquery; y también como enviar los parámetros entre las diferentes paginas.

Primero veremos el código de las paginas html

index.html

formulario.html

registros.html

Si, se pudieron dar cuenta, en los archivos html expuestos anteriormente, solo el index posee el head, y los otros solo posen etiquetas que van dentro del body, esto se debe, a que vamos a cargar las paginas dentro de div, con el fin de no recargar a pagina complta cada vez que deseamos cambiar de vista.

index.js

registros.js

clases.js

Bueno, ahora pongamos un poco de atención al archivo clases.js, podemos ver como creamos un nuevo registro, lo que nos permite declarar las funciones creadas mediante esta forma, agregando prototype, nos permite incluso, cambiar una función, pudiendo agregarle, mas funcionalidades, y podemos llamar de forma global cualquier función en cualquier archivo que necesitemos.

Vista registrar

Sin título

Vista Consultar

gfgn

Proyecto en github: SPA

Publicado por

Pedro Pimienta

Soy de Colombia, tengo 25 años, estudiante de ingeniería de sistemas, escritor y buen lector, soy buen oyente y capaz de encontrar la solución a cualquier problema que se presente.

Share this article

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz