InstitutodeTecnologasEducativas2012

MinisteriodeEducacin,CulturayDeporte.

HTLM5enlaeducacinMdulo12:FormulariosyJavaScript.

Formularios y JavaScript

Programacin

Requisitos mnimos

Interactuar con el usuario

Cuando se complementa HTML con otros lenguajes, conseguimos crear verdaderas aplicacionesinteractivas que se ejecutan a travs del navegador. Las pginas web HTML o las acciones que segeneran mediante JavaScript conforman recursos que se ejecutan del lado del navegador, es decir, ennuestro ordenador. Este proceso se puede complementar con una trabajo que se ejecuta en el lado delservidor, mediante lenguajes como PHP, ASP, etc. As el servidor es capaz de crear pginas sobre lamarcha, que se transmiten al usuario.

En este punto nos centraremos, exclusivamente, en lo que sucede en el lado del navegador en nuestro propio equipo.

Objetivos especficos

Crear formularios.

Conocer los diferentes campos de un formulario.

Gestionar eventos dentro de una pgina web.

Contenidos

Formularios.

Campos de un formulario.

Eventos.

Creacin de scripts con JavaScript.

Criterios de evaluacin

Disear formularios.

Controlar eventos mediante scripts.

Conocimientos sobre HTML.

Conocimientos sobre navegadores web.

Conocimientos de procedimientos en el ordenador: seleccionar, cortar y pegar.

1 de 26 15/12/2011 11:41

1

Recurso TIC: Formularios y JavaScript

Formularios

Seguiremos avanzando en nuestro conocimiento de las propiedades ms empleadas de las hojas de estilo, centrndonosahora en aquellas que conllevan posicionamiento de objetos, incluyendo algunas que definen su apariencia, pero ms en unmbito espacial.

Las pginas ms completas y ms complejas suelen contar con algn grado de interactividad. Esa interactividad comienzapor recoger alguna operacin que realiza el usuario y responderle de algn modo. El ejemplo ms claro de esto es el uso deformularios, para realizar una recogida de datos que el navegador mandar por correo electrnico o que se almacenarn enuna base de datos en el servidor, para que a su vez puedan ser procesados.

Para poder gestionar la informacin, remitida mediante el servidor y una base de datos, necesitaremos conocimientosavanzados de otras tecnologas que se ejecutan en el lado del servidor, lo que excede a los propsitos de este material. Noobstante, s podremos avanzar en el diseo de formularios, para enviar informacin por correo o para realizar algunasinteracciones mediante JavaScript.

Insertar un formulario

La creacin de un formulario se realiza mediante la etiqueta y su correspondiente . As generamos un bloquedentro del cual podemos introducir todos los contenidos que queramos: tablas, imgenes, etc. Tambin incluiremos en suinterior diferentes elementos HTML orientados a esa recogida de datos.

Probemos con un ejemplo elemental. Incorporaremos este texto en el de una pgina vaca:

BienvenidoIntroduce tu nombre: Mensaje:

Al probar esta pgina, se obtiene el resultado de la figura:

2 de 26 15/12/2011 11:41

2

El formulario incluye un sencillo ttulo y dos elementos de formulario: un cuadro de texto y un botn de envo.

Opciones de formulario

Nuestro formulario no tiene programada ninguna accin. Cuando se pulsa el botn Probar, no sucede nada. Se puedemodificar el comportamiento del formulario y algunas opciones ms mediante parmetros.

El parmetro action se acompaa de una URL que indica a dnde se saltar cuando el usuario pulse en el botn de envo (elbotn de tipo submit, como veremos ms tarde). Un formulario como el nuestro se podra remitir por correo mediante unaURL del tipo mailto as:

y obtendramos el resultado de la figura, donde se despliega la aplicacin de correo que el usuario tiene configurada pararemitirnos nuestro formulario por correo electrnico:

3 de 26 15/12/2011 11:41

3

Pregunta de Eleccin Mltiple

Esta opcin de remisin de formularios por correo se emplea poco en la actualidad; obliga al usuario a tener configurada unaaplicacin de correo. Lo normal aqu sera ejecutar algn script en el lado del servidor que procesase el formulario, lo que,como decamos anteriormente, no ser tratado en este mdulo.

Junto a action cada formulario suele tener otros tres parmetros:

name: especifica un nombre nico para el formulario. Es muy importante al ser procesado en el servidor, ya quepermite discriminar entre varios formularios, si la pgina los tuviese.

method: indica el formato de envo que se va a emplear para el formulario. Tenemos la opcin post que remite lainformacin de forma oculta y sin limitaciones de tamao y, por otro lado, la opcin get, que transmite los datos comoparte de la URL de la pgina. El mtodo post suele ser el ms recomendable y es el que emplearemos en casi todoslos casos.

enctype: se usa para indicar el formato de codificacin de los datos que estamos remitiendo. El valor predeterminadoapplication/x-www-form-urlencoded. text/plain hace que se reemplacen los espacios por el signo +; se empleapara textos sencillos. Si vamos a enviar archivos, fotos, etc. usaremos la codificacin multipart/form-data dondeningn carcter se codifica.

An hay algunos valores ms, como autocomplete (con valores on u off) que decide si al rellenar el formulario se nos harnsugerencias (que es el comportamiento predeterminado) o no. Ponerlo en off es til para formularios en los que se introducendatos personales. Tambin podemos activar el valor novalidate, para que el formulario no se compruebe antes de enviarlo.

El parmetro action en los formularios suele ir acompaado otros tres: name, method y enctype.

Estos parmetros sirven para especificar un nombre nico para cada formulario.

Sirven para indicar el formato de envo que se va a emplear para el formulario.

Sirven para indicar el formato de codificacin de los datos que estamos remitiendo.

Todas las anteriores son falsas.

4 de 26 15/12/2011 11:41

4

Actividad 1

Campos de un formulario

Nota

Generaremos un pequeo formulario para ir probando los diferentes tipos de campos que se pueden aadir. En elparmetro action optaremos por una accin de envo por correo electrnico, para as poder comprobar los valoresque se mandan en cada correo.

Un formulario puede contener cualquier tipo de recurso, como ya hemos dicho antes, pero hay algunos campos que sonespecficos del formulario y cuyo valor se enviar cuando ste se remita.

Cuadro de texto

Un cuadro de texto es un espacio definido para que el usuario introduzca un texto libre. Se crea con:

Introduce tus apellidos:

Como todos los elementos de un formulario, adems del tipo se establece un nombre nico mediante el parmetro name.Ese valor nos permite manipular el valor mediante scripts del lado del servidor o utilizando JavaScript.

La etiqueta cuenta con un copioso nmero de parmetros. No todos son aplicables a todas las etiquetasinput; depende del tipo que indiquemos en el valor type. Ms tarde veremos algunos valores.

Cuadro de contrasea

Los campos de contrasea son iguales que los de texto, pero al escribir dentro de ellos slo se ven asteriscos o algncarcter similar, para evitar que otras personas alrededor puedan ver la clave.

Introduce tu clave:

Botones radiales

El usuario puede seleccionar uno de los valores del bloque, pero slo uno de ellos; son excluyentes.

Selecciona el color de tu icono: Rojo Verde Azul

Dos detalles fundamentales para que este conjunto funcione:

El valor indicado en name tiene que ser el mismo en todas las opciones; as es como el navegador sabr quelemento del conjunto est seleccionado.

5 de 26 15/12/2011 11:41

5

Se incorpora un parmetro nuevo, value. Cuando el formulario se enve para ser procesado, el campo coloricono denuestro ejemplo tomar el valor indicado en value. Este valor no tiene por qu coincidir con el texto que mostramos acontinuacin.

El conjunto se ve as, tras seleccionar la tercera opcin:

Casillas de verificacin

En este tipo (denominado checkbox) el usuario s puede seleccionar varias opciones. Todas ellas se remitirn para serprocesadas, asociadas bajo el mismo nombre, indicado en el parmetro name:

Selecciona los das con disponibilidad: LunesMartesMircolesJuevesViernes

Bajo el valor dias se transmitir a la pgina web encargada de procesar el resultado del formulario una secuencia con todosaquellos cuadros que hayan sido activados. Se transmitir el valor que aparece dentro de cada value, nicamente. Porejemplo, si enviamos el formulario de la figura, se mandar la secuencia l, m y j.

6 de 26 15/12/2011 11:41

6

Nota

En el ejemplo hemos reemplazado los caracteres con tilde por entidades html. Por ejemplo, la secuencia sereemplazar por una "". Es apropiado hacer estos cambios para asegurarnos de que nuestra pgina se muestrasiempre correctamente. Los editores web suelen hacerlo por nosotros. No obstante, si tenemos que hacerlo, podemosencontrar una lista de entidad html en varios sitios, por ejemplo en http://www.w3schools.com/tags/ref_entities.asp

Botn de envo

Un campo de tipo submit generar un botn que, al ser pulsado, har que se aplique la accin indicada en el formulario:

Botn de limpieza

Un campo de tipo reset eliminar todo el contenido introducido en un formulario, dejndolo limpio de nuevo. La figuramuestra el botn anterior y uno de tipo reset.

7 de 26 15/12/2011 11:41

7

Nota

Botn estndar

Tambin podemos crear un botn que no sea del tipo submit o reset, sino genrico, mediante el tipo button.

Ese botn tal y como est no hace absolutamente nada. Podemos pasarnos el da entero pulsndolo sin conseguir ningnresultado. Para que esos botones interactuen tenemos que definir en ellos el evento onclick. As podremos asociarle unafuncin JavaScript, cargar una pgina en el lado del servidor o simplemente remitir una informacin por correo electrnico.

Este botn s realiza ya una operacin. Al hacer clic sobre l, se ejecuta una pequea accin de JavaScript(window.location='http://www.google.es'"), que hace que el navegador salte a la pgina indicada.

Ms tarde analizaremos los eventos y su funcionamiento.

Archivo

Un elemento input de tipo file nos sirve para enviar un archivo al servidor. Se emplea con frecuencia para enviar algunaimagen, documentos de texto, etc. Podemos remitir cualquier tipo de archivo.

Adjunta tu curriculum vitae

El resultado es ste:

8 de 26 15/12/2011 11:41

8

Valores ocultos

El tipo hidden se emplea para remitir informacin al servidor dentro de los formularios, pero sin que esta informacin semuestre en la pantalla. Su sentido es el de proporcionar datos complementarios, como podra ser la fecha, desde dnde seha rellenado el formulario o cualquier otro aspecto que no necesitamos que rellene el usuario, sino que podemos definir porotros medios. Todo lo que podamos evitar que sea rellenado aligerar el formulario y favorecer la interactuacin del usuariocon nuestra pgina.

Ms tipos

La aparicin de HTML5 nos trae varios tipos de campo aadidos. En concreto las nuevas opciones son lassiguientes: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel y url.

En la actualidad casi todos ellos se muestran como cuadros de texto normales pero, a medida que se implante el estndar,iremos viendo cmo se producen cambios. Por ejemplo, si definimos un campo indicando que ser de tipo tel (telfono) yaccedemos mediante un dispositivo mvil, el teclado se cambiar automticamente al numrico; o si definimos un campo detipo email (correo), el navegador ser capaz de realizar una validacin previa para comprobar si es una direccin correcta.

En conclusin, puede ser interesante ir conocindolos e incorporndolos a nuestra rutina, al disear formularios.

Otros campos diferentes a input

En los formularios emplearemos otros recursos diferentes a los que nos facilita la etiqueta input.

rea de texto

Un rea de texto es similar a los cuadros creados con pero ms amplios, pensados para albergarsecuencias de texto tan largas como sea preciso. Se crean mediante la etiqueta y en ellas podemos indicar eltamao visual del campo mediante los parmetros cols (columnas) y rows (filas).

9 de 26 15/12/2011 11:41

9

La figura muestra la etiqueta anterior:

Como se puede observar, esta etiqueta lleva su cierre correspondiente. Si colocamos cualquier texto entre ambas etiquetas,se mostrar dentro del cuadro al cargarse la pgina.

Listas desplegables

La etiqueta y se utiliza para crear una lista desplegable de opciones, donde el usuario puede seleccionaruna de ellas. Su sentido es similar al de los botones radiales, pero en un espacio ms reducido, sobre todo si tenemosmuchas opciones. Tiene tambin la ventaja de que con el teclado podemos desplazarnos rpidamente hasta la opcin quecomience con la letra que pulsamos, algo muy til en las listas muy largas.

Cada opcin de una lista desplegable se engloba en la etiqueta , por lo que el conjunto quedara as:

Selecciona el da preferente:

LunesMartesMircolesJuevesViernes

Al probarlo, obtendremos una lista como la de la figura:

10 de 26 15/12/2011 11:41

10

Si queremos que de forma predeterminada el valor seleccionado sea diferente del primero, podemos aadir el parmetroselected al elemento. As:

Jueves

Tambin es habitual aadir un elemento en blanco al principio o con un texto animando a realizar la seleccin:

Seleccione un da

El cambio se vera de esta manera:

Al no tener valor asociado, podramos saber, al tratar el formulario, que el usuario no ha escogido ningn da.

Grupos de opciones

La etiqueta optgroup nos proporciona una variante de los campos de tipo option. Su diferencia es que podemos agrupar lasopciones con subttulos. Observemos este ejemplo:

Escoja una materia:

MatemticasLenguaje

Corte y confeccinAstronoma

Se mostrara as:

11 de 26 15/12/2011 11:41

11

Elementos complementarios

En formularios largos conviene agrupar los grandes bloques de elementos mediante la etiqueta . Es una divisinvisual marcada por una simple lnea. Si empleamos la etiqueta podremos adems aadir un nombre a esesubconjunto. Observemos este ejemplo y cmo se mostrara en el navegador:

Datos personalesIntroduce tu nombre: Mensaje:

Esta divisin es meramente visual y no afecta de ninguna manera al comportamiento del formulario, aunque s le aporta unsentido semntico.

Adems, podemos utilizar la etiqueta para establecer un nombre para un campo. Esta etiqueta no se muestra, por loque aplicarla vuelve a ser una medida apropiada para favorecer la accesibilidad del formulario e incluso para aplicar estilos,pero no tendr efecto en el formulario.

Se utiliza junto al parmetro for, as:

NombreIntroduce tu nombre:

Su valor debe ser el mismo que el valor id del campo, por lo que nos obligamos a aadir un valor id a cada elemento.

Parmetros comunes

La mayora de los elementos de un formulario cuentan con algunos parmetros comunes muy tiles:

size: en los cuadros de texto se emplea para definir el tamao del campo. Por ejemplo size="20".

12 de 26 15/12/2011 11:41

12

Pregunta Verdadero-Falso

Verdadero Falso

Verdadero Falso

Verdadero Falso

Verdadero Falso

Nota

Actividad 2

maxlenght: tambin en los cuadros de texto nos servir para limitar el tamao. Por ejemplo:

readonly: en los cuadros de texto hace que el valor sea de slo lectura, que no se pueda cambiar. Por ejemplo:Espaa

disabled: hace que el elemento se encuentre desactivado y no se pueda modificar. Sirve con varios elementosdiferentes. Se aade as: disabled="disabled"

placeholder: permite aadir un texto dentro del cuadro, que desaparece automticamente al hacer clic sobre l. Sonmuy tiles para incorporar pequeas indicaciones sobre el valor que se espera. Se aade as:placeholder="Introduce tu nombre"

tabindex: es habitual desplazarse por un formulario presionando la tecla Tab para avanzar al campo siguiente oMays-Tab para ir al anterior. Mediante tabindex podemos modificar el orden de esos saltos entre los campos denuestro formulario. Iremos numerando cada campo mediante un nmero, as :

Con todo esto tenemos todos los recursos necesarios para disear los formularios ms completos. Slo nos faltar aplicar losestilos adecuados para que el formulario se integre correctamente con nuestro sitio.

Las siguientes afirmaciones, son verdaderas o falsas?

Para que los botones radiales funcionen hay que tener en cuenta que el valor introducido en name tiene que ser elmismo en todas las opciones, adems hay que escribir el parmetro input.

El parmetro checkbox sirve para el usuario pueda seleccionar varias opciones de una lista dada.

El parmetro reset eliminar slo el contenido de los botones radiales, dejndolo limpio de nuevo.

La etiqueta y se utiliza para crear una lista desplegable de opciones, donde el usuario puedeseleccionar una de ellas.

Con los estilos podemos modificar cualquier valor de los campos. Podemos cambiar los colores de los botones, elfondo de los campos, etc.

13 de 26 15/12/2011 11:41

13

Insertar un formulario con un editor web

Incorporaremos a nuestro formulario diferentes tipos de campos. Intentaremos que sean lo ms variados posibles.

Una vez ms los editores web vienen a nuestro rescate, permitindonos mantener un conocimiento ms relajado de toda lasintaxis de un formulario. Podremos insertar todo tipo de campos con facilidad. En BlueGriffon seguiramos un procedimientosimilar a ste:

1. Abrimos la aplicacin y creamos un documento nuevo.

2. En el men Insertar seleccionamos la opcin Formulario>Formulario.

3. En la ventana de la figura estableceremos los datos bsicos del formulario y hacemos clic en Aceptar.

4. El formulario se muestra delimitado por una lnea azul. A partir de aqu podemos crear contenidos dentro delformulario o fuera. Incluso podemos crear ms formularios dentro de la pgina.

5. Para insertar un campo, haremos clic en el interior de la zona azul y seleccionaremos una de las opcionesdel men Insertar>Formulario, que se recogen en la figura:

14 de 26 15/12/2011 11:41

14

Vdeo

Nota

Actividad 3

6. En la categora Entradas encontramos todos los elementos denominados , as como otros que seestn incorporando en la actualidad en el desarrollo de HTML5. En todos los casos, al seleccionar un tipo,aparecer una ventana desde la que estableceremos los datos bsicos del campo.

Es as de sencillo; luego slo debemos ir incorporando los campos necesarios, intercalndolos con las etiquetas que aclarensu funcionamiento.

El siguiente vdeo reproduce la creacin de un formulario.

Creacin de un formulario

Algunos otros elementos como y no estn directamente vinculados con los formularios, aunqueel autor de la aplicacin ha estimado que es un buen lugar para ubicarlos. Estos dos elementos, en concreto, seemplean para realizar barras de progreso y de medicin.

Disearemos un formulario con un editor web que incluya al menos 6 tipos de campos diferentes. Para hacer laspruebas, podemos crearlo con una accin de tipo mailto. As podremos comprobar qu resultados se envan alcomponer el correo electrnico.

15 de 26 15/12/2011 11:41

15

Eventos

Con independencia del tratamiento que realicemos con un formulario, que como venimos diciendo requiere en ocasiones quese complemente con otras tecnologas diferentes a las que estamos aprendiendo, podemos profundizar en la interactividadde las pginas web gracias a los eventos.

Un evento es algo que sucede en el navegador, de tal manera que, cuando ocurren, podemos definir algn comportamientoconcreto, una respuesta por parte de la pgina web, mediante nuestro medio o utilizando esas otras tecnologas del lado delservidor.

Veamos un ejemplo sencillo que nos ayudar a entender este concepto:

Carga y descarga de la pgina

Cada vez que el navegador termina de cargar una pgina, le remite al documento una indicacin de que se ha producido unevento que se llama onload. De este modo, desde la pgina web podemos saber en qu preciso momento se ha terminadode cargar la pgina completamente y podemos realizar alguna accin. Para realizar estas acciones podemos, por ejemplo,utilizar el lenguaje JavaScript, con el que ya hemos realizado un par de prcticas.

Observa la lnea siguiente:

alert es una funcin del lenguaje JavaScript que se utiliza para mostrar un mensaje en la ventana del navegador, como unaventana emergente. Se suele acompaar de un pequeo texto, que ser el que se muestre. sta es una funcin muyutilizada, porque permite averiguar los mensajes que se estn generando dentro de la pgina web.

Como se puede observar, indicamos que es una instruccin de JavaScript poniendo primero ese trmino seguido de un signode dos puntos.

Al probar la pgina web y terminar de cargarse, obtendremos el siguiente resultado:

16 de 26 15/12/2011 11:41

16

Nota

Todas las funciones de JavaScript (y de otros muchos lenguajes de programacin) siguen una estructura parecida:primero se indica el nombre de la funcin y a continuacin, entre parntesis, los diferentes parmetros que la funcinnecesita para funcionar. Adems las lneas en JavaScript finalizan con un signo de punto y coma, lo que le indica a laparte encargada de interpretar las rdenes que ah ha finalizado la instruccin que le estamos dando.

Adems de onload tenemos otros controles que se lanzan antes de que se cargue la pgina (onbeforeload), cuando seabandona la pgina (onunload).

Ms eventos de body

No se acaban ah las opciones; tenemos eventos para controlar aspectos como el momento en que se cambia el tamao deuna ventana (onresize), el momento en que se imprime una pgina web (onprint) o el momento antes de comenzar laimpresin (onbeforeprint) y otros muchos ms.

La conclusin es que empleando JavaScript, Ajax o tecnologas del lado del servidor podemos responder perfectamente antecualquier operacin que se realice con la pgina web en general.

Enfoque y desenfoque

En el mbito informtico, en sistemas como una pgina web donde varios elementos se presentan ante el usuario, se empleael concepto de foco para determinar qu elemento, de los disponibles en la pantalla, es el que tiene la atencin en cadamomento. As, si por ejemplo pulsamos una tecla en el teclado, afectar al elemento que tenga el foco. Cuando pasamos a unsegundo elemento, haciendo clic con el ratn, el primero deja de tener el foco y lo obtiene a su vez el segundo.

Contamos con dos eventos para realizar operaciones cuando un elemento obtiene el foco (onfocus) y para cuando lo pierde(onblur). Suelen resultar bastante tiles al trabajar con formularios.

Observemos el ejemplo de la figura. El estado inicial de los campos es similar en todo caso, pero cuando el usuario hace clicen el campo Nombre, ste se vuelve de color rojo. Cuando el usuario pasa a otro campo (cuando nombre pierde el foco),vuelve a su color habitual:

17 de 26 15/12/2011 11:41

17

Para conseguirlo de nuevo, debemos recurrir a tcnicas basadas en JavaScript. En esta ocasin hemos optado porincorporar el cdigo necesario en la cabecera de la pgina, entre y .

[...]

function enfocado(id_objeto) {document.getElementById(id_objeto).style.border="2px solid red";}

function desenfocado(id_objeto) {document.getElementById(id_objeto).style.border="inherit";}

Es un cdigo muy sencillo que ya hemos empleado adems en otra ocasin. Definimos dos funciones que recibirn el id deun elemento HTML y modificarn el borde en cada caso. En el primero pondr un borde rojo de 2 pxeles y en el segundoregresar a su valor original.

Las estructuras de las funciones en JavaScript son siempre muy similares a stas. Se indica el nombre de la funcin, losparmetros que va a utilizar y posteriormente, entre llaves, se indican las acciones a realizar. En nuestro ejemplo cadafuncin tiene una nica opcin, pero normalmente tendrn muchas ms.

Para que funcione, modificaremos el elemento HTML dejndolo as:

Datos personales

18 de 26 15/12/2011 11:41

18

Nota

Actividad 4

Introduce tu nombre: Mensaje:

Como se puede observar, slo hemos cambiado la lnea del nombre respecto a los ejemplos anteriores. Hemos aadido trescosas:

Un id denominado nombre.

Un evento onfocus que ejecutar la funcin enfocado que hemos definido en la cabecera. this.id es el valor que leenviamos a la funcin y equivaldra a "nombre" en este ejemplo.

Un evento onblur que ejecutar la otra funcin.

Cuando probemos la pgina todo funcionar correctamente. De hecho, aadiendo estas tres ltimas modificaciones acualquier campo del formulario, conseguiremos que tengan ese cambio de color. Las funciones se pueden reutilizar tantasveces como sea necesario.

Hay formas ms sencillas y directas para conseguir este mismo resultado, pero resultan menos intuitivas para nuestroaprendizaje. Cuanto ms profundicemos en el uso de JavaScript, ms sencillo se ir volviendo su aplicacin.

Los formularios cuentan con otros muchos eventos, como cuando alguien pulsa el botn de envo del formulario (onsubmit),cuando alguien hace clic en el botn de reiniciarlo (onreset), cuando se introduce informacin en un cuadro (oninput) ocuando un valor cambia (onchange).

Probaremos a realizar una pequea gestin de eventos, de tal modo que, cuando un usuario haga clic en el botn delimpieza del formulario, se le muestre un aviso con cualquier texto, como se recoge en la figura. Ya hemos visto todolo necesario para conseguirlo. Como pista, la nica parte que debemos deducir es dnde ubicaremos la gestin delevento, si en el botn de reset o en la etiqueta del formulario. Al ser un evento que afecta a todo el formulario, debeser en la etiqueta de formulario, pero podemos probar en ambos sitios para asegurarnos.

El teclado

Contamos con tres posibles eventos cuando trabajamos con el teclado.

onkeydown: sucede cuando una tecla est presionada.

onkeyup: cuando se libera una tecla.

19 de 26 15/12/2011 11:41

19

Nota

onkeypress: cuando se pulsa una tecla.

Con estos eventos podemos desplazarnos a zonas de la pgina, desplegar un men determinado e incluso realizar pequeosjuegos que respondan a la pulsacin de las teclas.

El siguiente cdigo realiza un sencillo uso de onkeypress, mostrando en una parte de la pgina la tecla que se pulsa:

Formulario

function mostrar_tecla(e) {if (e.keyCode) keycode=e.keyCode;else keycode=e.which;document.getElementById('zonadeteclas').innerHTML =document.getElementById('zonadeteclas').innerHTML + String.fromCharCode(keycode);}

Prueba de teclas:

Cada vez que se pulse una tecla, se mostrar en la zona en la que hemos ubicado la etiqueta . El cdigo JavaScriptutiliza una sencilla frmula para averiguar qu tecla se ha pulsado. Estas tres lneas nos mostraran la tecla en una ventanaemergente.

if (e.keyCode) keycode=e.keyCode;else keycode=e.which;alert(String.fromCharCode(keycode));

En su lugar la mostramos en la pantalla mediante la propiedad innerHTML, que nos permite incorporar en tiempo real untexto, etiqueta o cualquier otro elemento a una pgina web.

Esto se est volviendo complicado, lo sabemos. Podemos tomarlo como pequeas frmulas que se pueden aplicar endiferentes condiciones o simplemente no darle mucha importancia. JavaScript es un buen complemento, pero no es elcentro de la creacin de pginas web.

Controlando el ratn

El ratn es el elemento lanzador de eventos por antonomasia. Cada vez que lo desplazamos o que pasamos por encima dealgn lugar, estamos generando eventos que pueden ser manipulados mediante nuestra pgina web.

Aqu van algunos de esos eventos:

onclick, ondblclick, onmousewheel: generan un evento cuando se hace clic, doble clic o se usa la rueda del ratn.

20 de 26 15/12/2011 11:41

20

Actividad 5

Pregunta Verdadero-Falso

Verdadero Falso

Verdadero Falso

Verdadero Falso

ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop: controlan todas lasposibilidades que se generan al arrastrar y soltar un elemento en la pgina web.

onmousedown, onmousemove, onmouseout, onmouseover, onmouseup: controlan el movimiento del ratncuando no est presionado el botn, al pasar sobre un elemento, al salir de l, etc.

onscroll: cuando hay un desplazamiento vertical.

Ms adelante probaremos alguno de estos eventos y otros ya los hemos probado. Aqu es importante fijarse en dndeponemos el evento. Por ejemplo, un evento onmousemove dentro de una imagen nos asegurar que se ejecute la accinprevista cada vez que el ratn se desplace, pero slo dentro de esa imagen. Si por el contrario lo indicamos en la etiqueta, el evento se generar cada vez que el ratn se desplace por cualquier lugar de la pgina.

Probaremos a realizar un evento que muestre un aviso cada vez que se hace doble clic sobre una imagen.Observaremos la diferencia al colocar ese mismo evento en la etiqueta o en algn que ocupe parte dela pantalla.

Eventos multimedia

Con la llegada de las etiquetas y encontramos tambin una serie de eventos destinados a gestionar lo quesucede al reproducir elementos multimedia. Encontraremos eventos que se lanzan al reproducir un recurso, al pausarlo, alfinalizar, si no se puede reproducir, al cargar datos, al modificarse su volumen y otros muchos ms, cuyo anlisis es largo y suimplementacin an es irregular. De momento nos bastar saber que estn ah.

Las siguientes afirmaciones, son verdaderas o falsas?

alert es una funcin del lenguaje JavaScript que se utiliza para mostrar un mensaje en la ventana del navegador,como una ventana emergente.

En JavaScript hay eventos para todo excepto para controlar aspectos como el momento en que se cambia el tamaode una ventana, el momento en que se imprime una pgina web o el momento antes de comenzar la impresin.

En JavaScript las estructuras utilizadas son siempre muy similares, se suele indicar el nombre de la funcin, losparmetros que va a utilizar y posteriormente, entre llaves, se indican las acciones a realizar.

Existen cuatro posibles eventos cuando trabajamos con el teclado: onkeydown, onkeyup, onkeyfront y onkeypress.

21 de 26 15/12/2011 11:41

21

Verdadero Falso

Resumen

Actividades y ejemplos

Actividad 1. Formularios

Actividad 2. Campos de un formulario

La etiqueta nos facilita la creacin de formularios, con sus diferentes parmetros.

En el interior de un formulario podemos aadir varios campos.

Cuadros de texto:

Cuadros de contrasea:

Cuadros radiales:

Casillas de verificacin:

Botn de envo:

Botn de reinicio:

Botones:

Cuadros de archivo:

Valores ocultos:

rea de texto:

Listas desplegables con sus correspondientes o

An quedan otros tipos ms, menos implantados, pero que ya debemos ir utilizando progresivamente.

Los formularios se complementan con y para agrupar elementos y con para etiquetarlos.

Por ltimo, hemos realizado un repaso a los posibles eventos que se generan en una pgina web, as como una aproximacinal trabajo con JavaScript, el lenguaje de scripts que complementa a las pginas web.

Generaremos un pequeo formulario para ir probando los diferentes tipos de campos que se pueden aadir. En elparmetro action optaremos por una accin de envo por correo electrnico, para as poder comprobar los valoresque se mandan en cada correo.

Incorporaremos a nuestro formulario diferentes tipos de campos. Intentaremos que sean lo ms variados posibles.

22 de 26 15/12/2011 11:41

22

Actividad 3. Insertar un formulario con un editor web

Actividad 4. Eventos

Actividad 5. Eventos

Ejemplos

Aplicacin al aula

Disearemos un formulario con un editor web que incluya al menos 6 tipos de campos diferentes. Para hacer laspruebas, podemos crearlo con una accin de tipo mailto. As podremos comprobar qu resultados se envan alcomponer el correo electrnico.

Probaremos a realizar una pequea gestin de eventos, de tal modo que, cuando un usuario haga clic en el botn delimpieza del formulario, se le muestre un aviso con cualquier texto, como se recoge en la figura. Ya hemos visto todolo necesario para conseguirlo. Como pista, la nica parte que debemos deducir es dnde ubicaremos la gestin delevento, si en el botn de reset o en la etiqueta del formulario. Al ser un evento que afecta a todo el formulario, debeser en la etiqueta de formulario, pero podemos probar en ambos sitios para asegurarnos.

Probaremos a realizar un evento que muestre un aviso cada vez que se hace doble clic sobre una imagen.Observaremos la diferencia al colocar ese mismo evento en la etiqueta o en algn que ocupe parte dela pantalla.

Las diferentes prcticas, recursos y ejemplos realizadas en este mdulo estn disponibles para realizar pruebas.

Ejemplos del mdulo

23 de 26 15/12/2011 11:41

23

Planificacin

Crearemos un formulario con nuestros alumnos que se remitir por correo electrnico, adems de aplicarle un estiloapropiado al mismo.

Programacin dirigida al alumnado

Objetivos

Aplicar los conceptos de formularios.

Disear diferentes tipos de campos.

Modificar la apariencia de un formulario mediante estilos.

Contenidos

Formularios.

Campos de un formulario.

Estilos.

Materiales y recursos

Ordenador con acceso a Internet.

Temporalizacin

Dos sesiones.

El alumnado crear un formulario, incorporar varios tipos de campos y finalmente le aplicar los estilos necesariospara que el resultado sea cmodo y atractivo para los usuarios.

Organizacin del aula

Trabajaremos en un aula con ordenadores con un agrupamiento individual o por parejas.

Desarrollo de la actividad

Se repasan los conceptos de formularios y tipos de campos.

Se disea un formulario.

Se genera una hoja de estilos externa con los elementos bsicos del formulario.

Se comparten los resultados.

Presentacin y evaluacin de los resultados

24 de 26 15/12/2011 11:41

24

Sugerencias metodolgicas

Atencin a la diversidad

Actividad de refuerzo

Actividad de ampliacin

La evaluacin se realizara mediante la revisin del resultado y la observacin del proceso. Se pueden evaluar variosaspectos a lo largo de todo el proceso:

Diseo del formulario.

Capacidad para aplicar estilos.

Apariencia general del documento.

La metodologa empleada es la de proyecto.

Para su aplicacin proponemos:

Primera sesin

Explicamos el objetivo de la actividad y describimos los conceptos necesarios.

Diseamos un formulario bsico que se remitir por correo.

Decidimos qu campos necesitaremos recoger y posteriormente los incorporamos a nuestro proyecto.

Segunda sesin

Retomando el ejemplo anterior, aplicamos los estilos necesarios.

Revisamos los resultados y buscamos alternativas.

Compartimos los resultados entre los alumnos, rellenamos los formularios y comprobamos su comodidad y sencillezde uso.

Para aquellos alumnos/as que puedan tener ms dificultad, se les puede facilitar un modelo inicial de plantilla paraque ellos la modifiquen.

25 de 26 15/12/2011 11:41

25

La profundizacin en esta actividad se basara en que el alumnado probase a aadir algo de interactividad, medianteejemplos cerrados de eventos con su correspondiente cdigo JavaScript.

26 de 26 15/12/2011 11:41

26