|
|||||
|
|
|
|
|
|
|
|
||||
|
|
||||
|
|||||
Uso de los formularios (II)
* Menús de navegación con formularios:
Otro de los usos que podemos darle a los formularios y a Javascript es la creación de menús de navegación para nuestras páginas. No suelen ser menús muy vistosos, pero sí eficaces, por loa que a veces nos puede interesar contar con ellos. Vamos a ver algunos ejemplos útiles:
- Este menú se basa en un combo con diversas opciones. Al seleccionar una de ellas aparece un mensaje informativo en el textarea inferior, y al pinchar en el botón nos vamos a la página elegida. ver ejemplo.
- Ahora vamos a ver un menú simple pero bonito, consistente en una lista de selección que se va desplazando con la página al scrolear esta con la barra de desplazamiento vertical, de forma que el menú está siempre visible. ver ejemplo.
- Podemos crear un menú compuesto, formado por dos combos, de tal forma que según la opción que elijamos en el primero nos aparecerán diferentes opciones en el segundo. Una vez elegida una de ellas, basta con pinchar en el botón para irnos a la página. ver ejemplo.
- Este menú está basado en un combo simple, pero al que hemos cambiado el aspecto aplicándole un estilo propio. Los enlaces están desactivados; para activarlos es suficiente cambiar el símbolo "#" de su atributo href= por la dirección de la página a la que queremos que vaya. ver ejemplo.
- Y aún podemos mejorarlo un poco dándole un poco de animación a la cosa. ver ejemplo.
- Podemos facilitar el trabajo a nuestro visitante mediante este menú de combo en el que no hay que pinchar ningún botón para navegar. Sólo hay que seleccionar una opción de la lista y directamente nos iremos a la página elegida. ver ejemplo.
- Si queremos establecer un menú con apartados, podemos crearlo con un formulario basado en trés listas desplegables. Dependiendo la elección que hagamos en cada una de ellas nos aparecerán unas u otras opciones en la siguiente. ver ejemplo.
- Pasando a las listas de selección múltiples, el siguiente script proporciona un menú basado en una de ellas, acompañada de una caja de texto informativa y un botón de ejecución. ver ejemplo.
- Y para simplificar el trabajo (!viva la comodidad!), podemos prescindir del botón y establecer un menú en el que se vaya directamente a la página seleccionada en la lista. ver ejemplo.
- E incluso aplicar un estilo a la lista para hacerla más bonita. ver ejemplo.
- Casi todos los elementos de formulario se prestana la creación de menús. En el siguiente ejemplo se implementa uno mediante un conjunto de botones de radio. ver ejemplo.
- Aplicando estilos a los botones de formulario podemos crear un bonito menú. ver ejemplo.
- Y también podemos crear un menú mediante un botón que al ser pinchado muestra las opciones en una capa grís. ver ejemplo.
- O un conjunto de enlaces precedidos de checkbox, que al pasar el puntero pos cada enlace se seleccionan solos. ver ejemplo.
* Formularios y cálculos matemáticos:
Otro de los campos en los que los formularios tienen una grán potencia es en su utilización para realizar cálculos matemáticos. Esta facilidad de programacióm matemática de los formularios es una perfecta herramienta con la que podemos dar mucha más interactividad y categoría a nuestras páginas, pués nos va a permitir poder operar con números casi con total libertad, evitando tener que utilizar programas especiales de cálculo que , aparte de ser complicados en su uso, corren casi siempre en el lado del servidor, con lo que la velocidad de proceso y descarga de nuestras páginas se ve aumentada notablemente. No olvidemos tener siempre presente a la hora de crear una web el ancho de banda, que hoy por hoy es una de las principales limitaciones con la que contamos. Vamos a ver algunos ejemplos de la potencia de cálculo de los formularios aliados con Javascript:
- Vamos a empezar estos ejemplos con un formulario que va a hacer cálculos de velocidades, tiempos y distancias. Se le dan dos de las premisas anteriores y obtiene la tercera. ver ejemplo.
- Otro ejemplo de cálculos sencillos es el de cálculo de áreas de diferentes figuras geométricas simples. ver ejemplo
- ?Porqué no aprovechar esta potencia de cálculo para crear una lista de la compra?. Lo hacemos mediante dos listas múltiples, pasando al hacer click elementos de la primera a la segunda, y mostrándose en una caja de texto debajo la suma de los productos elegidos. ver ejemplo.
- El siguiente ejemplo muestra un completo formulario de pedido a una tienda ficticia (confeccionado con un poquito de humor, que nunca viene mal). Introducimos cantidades de artículos y el formulario nos calcula el subtotal, los impuestos y el total del pedido. ver ejemplo.
- Y este otro es un precioso ejemplo de formulario dinámico: va calculando paso a paso el precio de un equipo, mostrando capas una trás otra. ver ejemplo.
- Mediante checkbox también podemos crear un formulario de sumas y totales. En este ejemplo al pinchar en cada chexbox se va sumando el precio correspondiente, apareciendo debajo de cada bloque el total. ver ejemplo.
- El siguiente script muestra cómo se puede calcular aproximadamente le tiempo de descarga de un fichero de acuerdo con la velocidad del modem. ver ejemplo.
- Ahora que somos europeos y vamos a tener que trabajar con euros, el siguiente formulario nos puede simplificar la vida, ya que pasa euros a diferentes monedas europeas. ver ejemplo.
- Y podemos perfeccionar aún más nuestro conversor de euros. ver ejemplo.
- También podemos aprovechar las propiedades de cálculo de los formularios para obtener la equivalencia en varios sitemas de unidades de un caracter. ver ejemplo.
- Este script es parecido al anterior, pero más completo, ya que obtiene la equivalencia entre más bases de numeració, pudiendo entrar el valor inicial en cualquiera de ellas. ver ejemplo.
- Y el siguiente ejemplo nos muestra cómo pasar valores decimales a bits, pudiendo además efectuar operaciones lógicas con ellos. ver ejemplo.
- Para trabajar con funciones booleanas tenemos el siguiente script, que a partir de una función nos obtiene la tabla de Carnagh (?te atreves con él?). ver ejemplo.
- Dejamos a un lado el desconcertante mundo de los bits y entramos de lleno en el agobiante mundo de la banca. ?Quién no recurre de vez en cuando a las terjetas de crédito?. Pués bien, en el siguiente ejemplo vemos cómo podemos usar Javascript para calcular los meses que nos van a hecer falta para pagar nuestra deuda, así como el dinero que nos va a cobrar el banco por el préstamo. ver ejemplo.
- Como un ejemplo avanzado de script con formularios (aunque estos sólo juegan un papel de entrada de datos) vamos a ver cómo se pueden representar gráficamente funciones de hasta tercer grado. ver ejemplo.
- Y ahora vamos a ver un script que maneja funciones matemáticas diversas, que escapan a la propia definición del objeto Math de JavaScript. ver ejemplo.
- Un poco de magia matemática: en el siguiente ejemplo se crean tablas cuyas filas, columnas y diagonales suman siempre 175. ver ejemplo.
* Sin duda una de las aplicaciones más comunes de la unión formularios-matemáticas es la creación de calculadoras. La siguiente es una simple, pero útil. ver ejemplo.
- Otro ejemplo de calculadora simple, pero esta vez construida totálmente con elementos de formulario. ver ejemplo.
- Y esta es análoga a la anterior, pero es científica, es decir, nos permite realizar muchas más operaciones, como senos, cosenos, etc. ver ejemplo.
- POdemos construir una calculadora muy funcional con un tablero de entrada de datos y una zona de salida de resultados, que nos permite además visualizar varias operaciones a la vez. ver ejemplo.
* Creación de pilas:
Llamamos "pila" a un conjunto de datos ordenados individualmente o en grupos (registros) que se almacenan de alguna forma y que pueden ser consultados y modificados en cualquier momento. Un ejemplo de pilas avanzadas serían las bases de datos. Así pués vamos a ver ahora cómo podemos utilizar los formularios para crear pilas de datos, técnica esta muy útil para todo creador web. Lógicamente aquí vamos a ver pilas simples que se almacenan en el código de las páginas web, por lo que el aspecto de seguridad es mínimo. Por esto su aplicación va a estar limitada a unos pocos usos, pero eso sí, que pueden llegar a ser muy útiles. Veamos ejemplos de esta técnica:
- En el primer ejemplo vamos a ver cómo podemos pasar elementos de una lista de selección a otra. Esto no es propiamente una pila, pero nos puede servir de base para entender cómo se crean. ver ejemplo.
- Y este segundo ejemplo es como el anterior, pero lo hemos sofisticado mediante una ventana independiente, para que veamos cómo se pueden pasar datos de una ventana a otra. ver ejemplo.
- Vamos ya con una pila auténtica. Mediante un combo elegimos un tamaño de tubería y en las cajas del formulario aparecen las características de cada una. Los datos están guardados en el propio código de la página. ver ejemplo.
- El siguiente formulario crea y almacena una pila de datos definidos por un índice. Es posible añadir, borrar y modificar valores. ver ejemplo.
- Vamos a ver ahora cómo es posible mantener en una página una pila de datos que contiene una lista de apellidos asociados a otros datos personales. Al pinchar en una letra nos muestra las coincidencias entre esta y los datos de la pila. ver ejemplo.
- El siguiente script es más sencillo, pero no por eso menos efectivo. Va creando una pila de datos y los muestra en una caja de alerta. ver ejemplo.
- Y este es más completo: muestra en un frame una lista con datos de personas, y al pinchar en una de ellas se carga en el frame de abajo la información completa de la misma. ver ejemplo.
- Y otro formulario más que nos crea una pila de datos. ver ejemplo.
- Bonito ejemplo de pilas y formularios: la Tabla Periódica de los elementos. ver ejemplo.
 |