0% encontró este documento útil (0 votos)

174 vistas

Manual de Temas Adicionales JavaScript

Este documento describe los objetos relacionados con el navegador en JavaScript. Explica la jerarquía de objetos del navegador, incluyendo el objeto Window, que representa una ventana del navegador, y el objeto Document, que representa el documento HTML. También describe métodos y propiedades clave de los objetos Window y Navigator.

Cargado por

Stes Gnu

Derechos de autor

Formatos disponibles

Descarga como DOC, PDF, TXT o lee en línea desde Scribd

0% encontró este documento útil (0 votos)

174 vistas

Manual de Temas Adicionales JavaScript

Cargado por

Stes Gnu

Derechos de autor

Formatos disponibles

Descarga como DOC, PDF, TXT o lee en línea desde Scribd

Está en la página 1/ 67

Objetivo

Utilizar los objetos relacionados con el navegador en una aplicacin JavaScript

Lecturas propuestas Objetos propios del navegador archivo Otros objetos Recurso http://www.iesromerovargas.net/OASIS/DisenioWEB/PaginaJavaScript/ObjetosdelNav egador.htm
Objetos del Navegador

Hasta ahora hemos estudiado los objetos predefinidos del lenguaje, sin embargo, no se ha hablado, apenas, acerca del control del navegador en s mismo y casi no se han mencionado los documentos web desde el punto de vista de los objetos. Los navegadores ofrecen al programador multitud de caractersticas en forma de un modelo jerrquico. Esta jerarqua es lo que se llama modelo de objetos del navegador y mediante ella se pueden controlar caractersticas propias del navegador desde qu mensaje mostrar en la barra de estado hasta la creacin de nuevas pginas con el aspecto deseado. La jerarqua de dichos objetos toma la siguiente forma:

Para los ms iniciados en la programacin orientada a objetos, conviene aclarar que en esta jerarqua, contra lo que pueda parecer, no existe herencia alguna. Los objetos se relacionan por composicin, es decir, un objeto Window se compone (entre otras cosas)

de un objeto Document, y ste a su vez se compone de diversos objetos Form, Image, etc.. El padre de esta jerarqua es el objeto Window, que representa una ventana de nuestro navegador. Dado que cada marco se considera una ventana distinta, cada uno de ellos dispone de su propio objeto Window. El objeto Document representa el documento HTML y cada uno de los objetos que lo componen se corresponden con diversas etiquetas HTML.

El objeto Window

Es el objeto principal. Define la ventana sobre la que estamos trabajando e incluye los objetos referentes a la barra de tareas, el documento o la secuencia de direcciones de la ltima sesin. An cuando el objeto se llame Window, disponemos siempre de una referencia a l llamada window (recordad que Javascript distingue entre maysculas y minsculas). Ser con esa referencia con la que trabajemos. Este hecho ser comn a todos los objetos del modelo de objetos. Por ltimo, indicar que en Javascript, se supone que todas las propiedades y mtodos que llamamos sin utilizar ninguna referencia, en realidad se hacen utilizando esa referencia window. As, por ejemplo, cuando ejecutamos el mtodo alert() en realidad lo que estamos haciendo es ejecutar el mtodo window.alert().

Veamos los mtodos ms usados del objeto Window.

[Variable=][window.]open(URL, nombre, propiedades)

Permite crear (y abrir) una nueva ventana. Si queremos tener acceso a ella desde la ventana donde la creamos deberemos asignarle una variable, si no simplemente invocamos el mtodo: el navegador automticamente sabr que pertenece al objeto window. El parmetro URL es una cadena que contendr la direccin de la ventana que estamos abriendo: si est en blanco, la ventana se abrir con una pgina en blanco. El nombre ser el que queramos que se utilize como parmetro de un TARGET y las propiedades son una lista separada por comas de algunos de los siguientes elementos:

toolbar[=yes|no] location[=yes|no] directories[=yes|no] status[=yes|no] menubar[=yes|no] scrollbars[=yes|no] resizable[=yes|no] width=pixels height=pixels

Debemos tener cuidado con las propiedades que modifiquemos, es posible que algunas combinaciones de los mismos no funcionen en todos los navegadores. El Explorer 4, por ejemplo, da error ante la combinacin toolbar=no, directories=no, menubar=no. Veamos un ejemplo:
<SCRIPT LANGUAGE="JavaScript"> function AbrirVentana() { MiVentana=open("","Ventana","toolbar=no,menubar=no,status=yes"); MiVentana.document.write("<HEAD><TITLE>Ttulo</TITLE></HEAD>"); MiVentana.document.write("<CENTER><H1><B>"+ "Esto puede ser lo que tu quieras"+ "</B></H1></CENTER>"); } </SCRIPT> <BODY> ... <INPUT TYPE="button" NAME="Boton1" VALUE="Plsame" onClick="AbrirVentana();"> ... </BODY>

Este ejemplo muestra la posibilidad de abrir nuevas ventanas de nuestro navegador con JavaScript. Se llama a la funcin AbrirVentana desde el evento onClick, como ya sabemos hacer desde el primer ejemplo. Esta funcin crea la nueva ventana MiVentana y escribe en ella por medio del objeto Document (que se estudiar ms adelante) todo el cdigo HTML de la pgina.
close()

Cierra la ventana actual. A no ser que hayamos acabado de abrirla nosotros mostrar al usuario una ventana de confirmacin para que decida l si quiere o no cerrarla. Esto se hace por motivos de seguridad, ya que sera demasiado fcil hacer un script de esos mal intencionados que nos cerrase la ventana del navegador.
alert(mensaje)

Muestra una ventana de dilogo con el mensaje especificado.

confirm(mensaje)

Muestra una ventana de dilogo con el mensaje especificado y dos botones. Si el usuario pulsa OK, el mtodo devuelve true. Si, en cambio, pulsa Cancelar, devolver false.
prompt(mensaje,valor_por_defect o)

Muestra una ventana de dilogo con el mensaje especificado y un campo de texto en el que el usuario pueda teclear, cuyo valor inicial ser igual a valor_por_defecto. Si el usuario pulsa OK, el mtodo devuelve la cadena introducida en el campo de texto. Si, por el contrario, pulsa Cancelar, devolver el valor null. Dado que este valor se considera igual a false, podemos comprabarlo directamente en una condicin para ver qu ha hecho el usuario. Por ejemplo, el siguiente cdigo muestra un saludo slo si el usuario ha pulsado el botn de Aceptar:
var contestacion = prompt("Cmo te llamas, criatura?",""); if (contestacion) alert("Hola, " + contestacion);

[identificador=]setTimeout("funci on",tiempo)

Llama a funcin cuando hayan pasado tiempo milisegundos. Imprescindible a la hora de realizar cualquier rutina que deba ejecutarse a cierta velocidad.
clearTimeout(identificador)

Detiene el proceso anterior.

scroll(x,y)

Desliza el documento contenido en la ventana hasta la posicin especificada por las coordenadas x e y que indican el grado de desplazamiento horizontal y vertical en pxels, respectivamente. Ambos argumentos estn referidos a la esquina superior izquierda de la ventana actual.

Ahora veamos las propiedades del objeto Window:

name

Sirve para averiguar o asignar el nombre de una ventana determinada.

closed

Propiedad booleana que indica si la ventana est o no cerrada.

length

Informa sobre la cantidad de ventanas hijas que contiene la ventana actual (frames).
self

Devuelve una referencia a la propia ventana. Suele usarse para diferenciar una ventana de un formulario si tienen el mismo nombre.
parent

Devuelve una referencia a la ventana que contiene a la ventana actual.

top

Devuelve una referencia a la ventana de orden superior del navegador, es decir, a la que contiene todas las dems ventanas.
status

Define la cadena de caracteres que saldr en la barra de estado en un momento dado.

dafaultStatus

Define la cadena de caracteres que saldr por defecto en la barra de estado. Cuando no la especificamos, defaultStatus ser igual al ltimo valor que tom status.
frames[]

Uno de los problemas ms frecuentes a los que se enfrenta un programador de Javascript es el manejo de marcos. Es decir, cmo accedo yo al cdigo o a objetos como Window o Document de otros marcos? JS propone una manera bastante sencilla de hacerlo. JS considera el documento de declaracin de marcos (es decir, aquel en el que escribimos las etiquetas FRAME y FRAMESET) como un objeto Window normal y

corriente. Permite acceder a los marcos que hemos declarado en l por medio del vector frames. Es decir, si en nuestro documento estuviera la siguiente lnea:
<FRAME NAME="principal" SRC="MiPagina.html">

Podramos acceder a su objeto Window por medio de la referencia window.frames["principal"]. A su vez, desde el documento "hijo", es decir, desde el documento que est encerrado en un marco, podemos acceder al padre por medio de la referencia parent. Tambin podemos acceder al documento que est arriba del todo en esta jerarqua por medio de top. Por ejemplo:
window == window.top

Esta igualdad comprobar si nuestro documento est en la ventana principal o en un marco. Comprueba si la ventana en la que est (window) es igual a la ventana principal (window.top). Mediante esta sencilla comprobacin podemos crear fcilmente (toda vez que conozcamos el manejo del objeto Location), rutinas que aseguren que nuestra ventana es la principal, o que recarguen nuestra estructura de marcos si algn usuario pretende acceder a un marco especfico, etc.. Ejemplos: Ahora veremos cmo se puede definir el valor de la barra de estado cuando el ratn pasa por encima de un elemento <A>:
<A HREF="MiPagina.html" onMouseOver="window.status='Vente a mi pgina';return true">

Fcil, no? Bueno, ahora vamos a ver cmo se hacen scrolls.

<SCRIPT LANGUAGE="JavaScript"> var texto=" Aqu est el mensaje que espero " + "observes y leas con suma atencin "; var longitud=texto.length; function scroll() { texto=texto.substring(1,longitud-1)+texto.charAt(0); window.status = texto; setTimeout("scroll()",150); } </SCRIPT>

Como podis ver, la cosa no es ni ms larga ni ms compleja que los ejemplos anteriores. Simplemente escribe el texto en la barra de estado y luego coge el caracter ms a la izquierda del mismo y lo pone a la derecha, para despus volver a escribirlo. La nica pega que tiene es cmo hacemos para que la funcin se llame cada cierto tiempo predeterminado para ir desplazando el texto a una velocidad constante. Y la respuesta est en el mtodo setTimeout.

El objeto Navigator

Este objeto permite obtener diversas informaciones sobre el navegador donde se est ejecutando el cdigo JS. Se suele usar para averiguar el nombre y la versin del navegador que ejecuta nuestro cdigo, de forma que se puedan tomar decisiones sobre qu tipo de cdigo ejecutar o qu tipo de pginas mostrar.

Algunas de sus propiedades, de slo lectura, son:

appName

Cadena que contiene el nombre del cliente.

appVersion

Cadena que contiene informacin sobre la versin del cliente.

cpuClass

Informa sobre el tipo de procesador sobre el que se est ejecutando el sistema operativo.

Y el mtodo con el que cuenta es:

javaEnabled()

Averigua si el navegador est configurado para soportar el uso de programas escritos en Java, como los Applets. Ejemplo:
<SCRIPT LANGUAGE="JavaScript"> function Navegador() {

alert(navigator.appName); alert(navigator.appVersion); alert(navigator.cpuClass); if (navigator.javaEnabled()) alert("S est preparado para soportar Applets de Java"); else alert("NO est preparado para soportar Applets de Java"); } </SCRIPT>

El objeto Screen

Como caba esperarse, se puede acceder a este objeto por medio de la referencia screen. Nos permitir conocer la configuracin de la pantalla del usuario. Al igual que en el anterior objeto, todos sus atributos son de slo lectura. Conviene indicar que este objeto slo est disponible desde las versiones 4.0 de los navegadores.

Propiedades.

height

Averigua la altura en pxels de la pantalla.

width

Averigua la anchura en pxels de la pantalla.

colorDepth

Indica el nmero de bits utilizados para proporcionar el color en la pantalla del sistema donde se ejecuta el navegador. Por ejemplo, si vale 4 es que se permite la visualizacin de 16 colores al mismo tiempo (24). As, por ejemplo, puedes comprobar la configuracin de tu pantalla con el siguiente cdigo: Ejemplo:
function

Pantalla() { var texto=screen.width + "x" + screen.height + "x" + Math.pow(2,screen.colorDepth) + " colores."; alert(texto); }

El objeto Document

Este objeto representa el propio documento HTML que se est mostrando en la ventana del navegador. Se accede a l por medio de la referencia document (aunque tambin sera vlido window.document). Su mayor importancia viene por el nmero de vectores que posee, que referencian a objetos Image, Form o Link, los cuales permiten acceder a las imgenes, formularios y enlaces del documento, respectivamente.

Algunas propiedades de este objeto son:

lastModified

Contiene la fecha y hora en que se modific el documento por ltima vez y se suele usar en conjuncin con write para aadir al final del documento estas caractersticas.
bgColor

Especifica el color de fondo del documento. El color deber estar en el formato usado en HTML. Es decir, puede ser "red" o "#FF0000", por ejemplo.
fgColor

Especifica el color de para el texto del documento.

linkColor, aLinkColor, vLinkColor

Especifican el color de los hiperenlaces del documento: iniciales, activos o ya visitados.

title

Especifica el ttulo del documento.

Ejemplo:
<script language="Javascript"> function PruebasDocumento() { alert(document.title); alert(document.lastModified); }

Matrices del objeto Document.

forms[]

Vector que contiene los formularios del documento. El primero ser el nmero 0, el segundo el 1, etc.. Se estudiar ms detenidamente en el siguiente captulo.
images[]

Vector que contiene las imgenes del documento. Se ordenan igual que en el anterior caso, aunque tambin permiten ser accedidas con el nombre como ndice. Es decir, a una imagen definida como <IMG SRC=".." NAME="miImagen"> se puede acceder con document.images["miImagen"].
links[]

Vector que contiene los enlaces del documento. Se ordenan igual que en los dos anteriores, aunque no se suele utilizar en el cdigo Javascript. Su razn de ser es que, al ser los enlaces objetos, permiten incluir cdigo Javascript en ellos por medio de la pseudo-URL "javascript:codigo".

Mtodos del objeto Document.

open()

Abre un nuevo documento para escribir. Un documento debe estar abierto para poder escribir en l.
close()

Cierra el documento, impidiendo escribir de nuevo en l.

write(cadena)

Escribe el cdigo HTML indicado en cadena en nuestro documento HTML.

A la hora de escribir en un documento por medio de write hay que tener en cuenta un hecho fundamental. Para poder escribir en un documento, ste debe estar abierto y, al abrirlo, se destruye todo el cdigo que haya en l.

Un documento se abre automticamente cuando empieza a cargarse y se cierra cuando termina de hacerlo. As pues, si deseamos escribir en un documento sin sobreescribir su contenido, deberemos hacerlo antes de que ste termine de cargar. Si lo hacemos despus, sobreescribiremos su contenido. Por lo tanto:
//escribir.html <HTML> <HEAD> <TITLE>Escribe y no sobreescribe</TITLE> </HEAD> <BODY> Este es un documento que fue modificado por ltima vez el da <SCRIPT LANGUAGE="JavaScript">document.write(document.lastModified); </SCRIPT> </BODY> </HTML>

Este ejemplo os mostrar la cadena completa, ya que se llama a write antes de cerrarse el documento. Es decir, antes de que termine de cargar. Sin embargo, el siguiente ejemplo:
//sobreescribir.html <HTML> <HEAD> <TITLE>Sobreescribe</TITLE> <SCRIPT LANGUAGE="JavaScript"> function escribir() { document.write("Este es un documento "+ "que fue modificado por ltima vez el da"); document.write(document.lastModified); } </SCRIPT>

</HEAD> <BODY onLoad="escribir()"> Hola. </BODY> </HTML>

Sobreescribir el documento y no podremos ver ese "Hola", al ser llamado despus de cargar el documento, es decir, despus de cerrarlo.

El objeto History

Se accede a este objeto por medio de la referencia window.history y contiene todas las direcciones que se han visitado en la sesin actual. Aunque no permite acceder a ellas, dispone de varios mtodos para sustituir el documento actual por alguno que el usuario ya haya visitado:
back()

Volver a la pgina anterior. Es muy sencillo de utilizar, slo tienes que pulsar aqu, cuya etiqueta se ha declarado como:
<A HREF="javascript:window.history.back()">

forward()

Ir a la pgina siguiente.
go(donde)

Ir a donde se indique, siendo donde un nmero tal que go(1) significa lo mismo que forward() y go(-1) es equivalente a back().

El objeto Location

Se accede a este objeto por medio de la referencia window.location y contiene informacin sobre la direccin de la pgina actual en varias propiedades.
href

Permite el acceso a la direccin de la pgina actual. Si lo cambiamos cambiaremos de pgina.

protocol

Protocolo de la pgina actual. Habitualmente http.

host

Mquina donde se alberga la pgina actual.

pathname

Camino de la pgina actual.

hash

Si hemos accedido a una pgina por medio de un ancla, contiene una almohadilla seguida de ese ancla. Ejemplo:
<script language="Javascript"> function Localizacion() { alert("URL: "+window.location.href); } </script>

http://www.iesromerovargas.net/OASIS/DisenioWEB/PaginaJavaScript/

Otros objetos

El objeto link
Un objeto link es un objeto que enlaza a otro URL mediante hipertexto. Cada enlace presente en un documento corresponde a un objeto que se coloca en la matriz links. As, se acceder al primer enlace mediante document.links[0], al segundo mediante document. links[1], y as sucesivamente.

El objeto link carece de mtodos pero no de propiedades.

Propiedades

length. Tamao del objeto link. target. Es una cadena que tiene el nombre de la ventana o del frame especificado en el parmetro TARGET. hash. Es una cadena con el nombre del enlace, dentro de la URL. host. Es una cadena con el nombre del servidor y nmero de puerto, dentro de la URL. hostname. Es una cadena con el nombre de dominio del servidor (o la direccin IP) dentro de la URL. href. Es una cadena con la URL completa. pathname. Es una cadena con el camino al recurso, dentro de la URL. port. Es una cadena con el nmero de puerto, dentro de la URL. protocol. Es una cadena con el protocolo usado, incluyendo los : (los dos puntos), dentro de la URL. search. Es una cadena que tiene la informacin pasada en una llamada a un script, dentro de la URL.

<html> <head> <title> Ejemplo objeto link</title> </head> <body> <a href="http://www.yahoo.com" target="_blank">Yahoo!!</a> <a href="http://www.google.com/search?q=crear+paginas+web">Google!</a> <script language= "javascript" <> type= "text/javascript"> var i; for (i=0;i<document.links.length;i++) { document.write("Target : " + document.links[i].target + "<br>"); document.write("Host : " + document.links[i].host + "<br>"); document.write("Href : " + document.links[i].href + "<br>"); document.write("Search : " + document.links[i].search + "<br>"); document.write("<br><br>"); }

</script> </body> </html>

El objeto anchor
Una anchor o ancla es una parte de texto que define una etiqueta para ser referenciada desde otro lugar por un enlace hipertexto. Cada ancla presente en un documento corresponde a un objeto que se coloca en la matriz anchors. As, se acceder al primer enlace mediante document.anchors[0], al segundo mediante document.anchors[1], y as sucesivamente. Este objeto carece de mtodos y eventos asociados al mismo.

Propiedades

name. Nombre del ancla. target. Es una cadena que tiene el nombre de la ventana o del frame especificado en el parmetro TARGET. length. Indica el tamao del objeto.

<html> <head> <title>Ejemplo objeto anchor</title> </head> <body> <a name="arriba" target="_top"><h2>Inicio</h2></a> <script language= "javascript" type= "text/javascript"> var i; for (i=0;i<document.anchors.length;i++){ document.write("Name : " + document.anchors[i].name + "<br><br>"); document.write("Target : " + document.anchors[i].target + "<br>"); document.write("<br><br>"); } </script> <img src="vela_alargada.jpg" border="0" name="imagencita" <br><br>>

<a href="#arriba">Subir</a> </body> </html>

El objeto image
Gracias a este objeto (disponible a partir de la versin 3 de Netscape, aunque Microsoft lo adopt en la versin 4 de su navegador) es posible manipular las imgenes del documento, pudiendo conseguir efectos como el conocido rollover (cambio de imgenes al pasar el ratn sobre la imagen).

Propiedades

border. Contiene el valor del parmetro 'border' de la imagen. complete. Es un valor booleano que nos dice si la imagen ha cargado completamente en memoria o no. height. Contiene el valor del parmetro 'height' (alto) de la imagen. hspace. Contiene el valor del parmetro 'hspace' de la imagen, que define el espacio horizontal de una imagen flotante respecto al texto que la rodea. lowsrc. Contiene el valor del parmetro 'lowsrc' de la imagen. Esta propiedad fija la ruta de una imagen temporal de menos peso que la imagen principal. La imagen temporal se muestra en la pantalla mientras la principal termina de cargar. name. Contiene el valor del parmetro 'name' de la imagen, que hace referencia al nombre nico de la imagen. src. Contiene el valor del parmetro 'src' de la imagen, que almacena la ruta de la imagen principal. vspace. Contiene el valor del parmetro 'vspace' de la imagen, que define el espacio vertical de una imagen, respecto al texto uqe la rodea. width. Contiene el valor del parmetro 'width' (ancho) de la imagen.

<html> <head> <title> Ejemplo objeto image</title> </head>

<body> <script language="JavaScript" type="text/javascript"> imagen_in = new Image(); imagen_in.src = "corazon.jpg"; imagen_out = new Image(); imagen_out.src = "corazon1.jpeg"; function cambia(nombre,imagen) { nombre.src = imagen.src } </script> <a href= "" onmouseover="cambia(ejemplo, imagen_in) " onmouseout="cambia(ejemplo, imagen_out)"> <img name="ejemplo" src="corazon.jpg" alt = "ejemplo de rolloversimple" ></a> </body> </html>

El objeto Navigator
Este objeto simplemente nos da informacin relativa al navegador que est utilizando el usuario.

Propiedades

appCodeName. Cadena que contiene el nombre del cdigo del cliente. appName. Cadena que contiene el nombre del cliente. appVersion. Cadena que contiene informacin sobre la versin del cliente. language. Cadena de dos caracteres que contiene informacin sobre el idioma de la versin del cliente. mimeTypes. Array que contiene todos los tipos MIME soportados por el cliente. A partir de NS 3. platform. Cadena con la plataforma sobre la que se est ejecutando el programa cliente. plugins. Array que contiene todos los plug-ins soportados por el cliente. A partir de NS 3.

userAgent. Cadena que contiene la cabecera completa del agente enviada en una peticin HTTP. Contiene la informacin de las propiedades appCodeName y appVersion.

Mtodos

javaEnabled(). Devuelve true si el cliente permite la utilizacin de Java, en caso contrario, devuelve false.

El objeto frame
Todos sabemos que la ventana del navegador puede ser dividida en varios frames que contengan cada uno de ellos un documento en el que mostrar contenidos diferentes. Al igual que con las ventanas, cada uno de estos frames puede ser nombrado y referenciado, lo que nos permite cargar documentos en un marco sin que esto afecte al resto. Realmente cada frame se representa con un objeto window, esto quiere decir que el objeto frame tiene todas las propiedades y mtodos del objeto window.

Propiedades

closed. Vlida a partir de Netscape 3 en adelante y MSIE 4 en adelante. Es un booleano que nos dice si la ventana est cerrada ( closed = true ) o no ( closed = false ). defaultStatus. Cadena que contiene el texto por defecto que aparece en la barra de estado (status bar) del navegador. frames. Es un array: cada elemento de este array (frames[0], frames[1], ...) es uno de los frames que contiene la ventana. Su orden se asigna segn se definen en el documento HTML. history. Se trata de un array que representa las URLS visitadas por la ventana (estn almacenadas en su historial). length. Variable que nos indica cuntos frames tiene la ventana actual. location. Cadena con la URL de la barra de direccin. name. Contiene el nombre de la ventana, o del frame actual. opener. Es una referencia al objeto window que lo abri, si la ventana fue abierta usando el mtodo open() que veremos cuando estudiemos los mtodos. parent. Referencia al objeto window que contiene el frameset. self. Es un nombre alternativo del window actual.

status. String con el mensaje que tiene la barra de estado. top. Nombre alternativo de la ventana del nivel superior. window. Igual que self: nombre alternativo del objeto window actual.

Mtodos

alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de dilogo. blur(). Elimina el foco del objeto window actual. A partir de NS 3, IE 4. clearInterval(id). Elimina el intervalo referenciado por 'id' (ver el mtodo setInterval(), tambin del objeto window). A partir de NS 4, IE 4. clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre' (ver el mtodo setTimeout(), tambin del objeto window). confirm(mensaje). Muestra un cuadro de dilogo con el mensaje 'mensaje' y dos botones, uno de aceptar y otro de cancelar. Devuelve true si se pulsa aceptar y devuelve false si se pulsa cancelar. focus(). Captura el foco del ratn sobre el objeto window actual. A partir de NS 3, IE 4. open(URL,nombre,caracteristicas). Abre la URL que le pasemos como primer parmetro en una ventana de nombre 'nombre'. Si esta ventana no existe, abrir una ventana nueva en la que mostrar el contenido con las caractersticas especificadas. Las caractersticas que podemos elegir para la ventana que queramos abrir son las siguientes: prompt(mensaje,respuesta_por_defecto). Muestra un cuadro de dilogo que contiene una caja de texto en la cual podremos escribir una respuesta a lo que nos pregunte en 'mensaje'. El parmetro 'respuesta_por_defecto' es opcional, y mostrar la respuesta por defecto indicada al abrirse el cuadro de dilogo. El mtodo retorna una cadena de caracteres con la respuesta introducida. scroll(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). A partir de NS3, IE4. scrollBy(x,y). Desplaza el objeto window actual el nmero de pixels especificado por (x,y). A partir de NS4. scrollTo(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). A partir de NS4. setInterval(expresion,tiempo). Evalua la expresin especificada despus de que hayan pasado el nmero de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado como identificativo por clearInterval(). A partir de NS4, IE4.

setTimeout(expresion,tiempo). Evala la expresin especificada despus de que hayan pasado el nmero de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado como identificativo por clearTimeout(). A partir de NS4, IE4. [5].

[1]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript link[En lnea]. <http://www.webestilo.com/javascript/js23.phtml> [citado en 10 de dicimebre de 2010] [2]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript anchor[En lnea]. <http://www.webestilo.com/javascript/js24.phtml> [citado en 10 de dicimebre de 2010] [3]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript image[En lnea]. <http://www.webestilo.com/javascript/js25.phtml> [citado en 10 de dicimebre de 2010] [4]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript navigator[En lnea]. <http://www.webestilo.com/javascript/js21.phtml> [citado en 10 de dicimebre de 2010] [5]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript frame[En lnea]. <http://www.webestilo.com/javascript/js18.phtml> [citado en 10 de dicimebre de 2010]

Modificar imagen
Realizar una pgina que al cargar completamente muestre en que tipo de navegador fue desplegada. En esta misma pgina mostrar una imagen, la cual permita cambiar los parmetros iniciales del alto y el ancho, haciendo uso de botones.

Objetivos

Conocer los diferentes tipos de eventos que se generan en un sitio. Utilizar los diferentes mtodos existentes para la captura y manejo de los eventos en JavaScript.

Lecturas propuestas Qu es un evento? archivo de texto Modelo bsico de eventos archivo Obteniendo Informacin del evento archivo Lecturas opcionales Calculadora

http://www.desarrolloweb.com/articulos/1235.php

Los eventos en Javascript

Una explicacin sobre lo que son los eventos y como definir sus acciones asociadas en Javascript. Por Miguel Angel Alvarez
Atencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

Los eventos son la manera que tenemos en Javascript de controlar las acciones de los visitantes y definir un comportamiento de la pgina cuando se produzcan. Cuando un usuario visita una pgina web e interacta con ella se producen los eventos y con Javascript podemos definir qu queremos que ocurra cuando se produzcan.

Con javascript podemos definir qu es lo que pasa cuando se produce un evento como podra ser que un usuario pulse sobre un botn, edite un campo de texto o abandone la pgina. El manejo de eventos es el caballo de batalla para hacer pginas interactivas, porque con ellos podemos responder a las acciones de los usuarios. Hasta ahora en este manual hemos podido ver muchos ejemplos de manejo de uno de los eventos de Javascript, el evento onclick, que se produce al pulsar un elemento de la pgina. Hasta ahora siempre hemos aplicado el evento a un botn, pero podramos aplicarlo a otros elementos de la pgina.

Cmo se define un evento

Para definir las acciones que queremos realizar al producirse un evento utilizamos los manejadores de eventos. Existen muchos tipos de manejadores de eventos, para muchos tipos de acciones del usuario. El maneador de eventos se coloca en la etiqueta HTML del elemento de la pgina que queremos que responda a las acciones del usuario.

Por ejemplo tenemos el manejador de eventos onclick, que sirve para describir acciones que queremos que se ejecuten cuando se hace un click. Si queremos que al hacer click sobre un botn pase alguna cosa, escribimos el manejador onclick en la etiqueta <INPUT type=button> de ese botn. Algo parecido a esto. <INPUT type=button value="pulsame" onclick="sentencias_javascript..."> Se coloca un atributo nuevo en la etiqueta que tiene el mismo nombre que el evento, en este caso onclick. El atributo se iguala a las sentencias Javascript que queremos que se ejecuten al producirse el evento. Cada elemento de la pgina tiene su propia lista de eventos soportados, vamos a ver otro ejemplo de manejo de eventos, esta vez sobre un men desplegable, en el que definimos un comportamiento cuando cambiamos el valor seleccionado. <SELECT onchange="window.alert('Cambiaste la seleccin')"> <OPTION value="opcion1">Opcion 1 <OPTION value="opcion2">Opcion 2 </SELECT> En este ejemplo cada vez que se cambia la opcin muestra una caja de alerta. Podemos verlo en una pgina aparte. Dentro de los manejadores de eventos podemos colocar tantas instrucciones como deseemos, pero siempre separadas por punto y coma. Lo habitual es colocar una sola instruccin, y si se desean colocar ms de una se suele crear una funcin con todas las instrucciones y dentro del manejador se coloca una sola instruccin que es la llamada a la funcin. Vamos a ver cmo se colocaran en un manejador varias instrucciones. <input type=button value=Pulsame onclick="x=30; window.alert(x); window.document.bgColor = 'red'"> Son instrucciones muy simples como asignar a x el valor 30, hacer una ventana de alerta con el valor de x y cambiar el color del fondo a rojo. Podemos ver el ejemplo en una pgina aparte. Sin embargo, tantas instrucciones puestas en un manejador quedan un poco confusas, habra sido mejor crear una funcin as.

Jerarqua desde el objeto window

En los manejadores de eventos se tiene que especificar la jerarqua entera de objetos del navegador, empezando siempre por el objeto window. Esto es necesario porque hay algn browser antiguo que no sobreentiende el objeto window cuando se escriben sentencias Javascript vinculadas a manejadores de eventos.

http://www.librosweb.es/javascript/capitulo6/modelo_basico_de_eventos1.html

Inicio Introduccin a JavaScript Captulo 6. Eventos 6.2. Modelo bsico de eventos

6.2. Modelo bsico de eventos

6.2.1. Tipos de eventos

En este modelo, cada elemento o etiqueta XHTML define su propia lista de posibles eventos que se le pueden asignar. Un mismo tipo de evento (por ejemplo, pinchar el botn izquierdo del ratn) puede estar definido para varios elementos XHTML diferentes y un mismo elemento XHTML puede tener asociados varios eventos diferentes. El nombre de cada evento se construye mediante el prefijo on, seguido del nombre en ingls de la accin asociada al evento. As, el evento de pinchar un elemento con el ratn se denomina onclick y el evento asociado a la accin de mover el ratn se denomina onmousemove. La siguiente tabla resume los eventos ms importantes definidos por JavaScript:

Evento
onblur

Descripcin Deseleccionar el elemento

Elementos para los que est definido

onchange onclick ondblclick

Deseleccionar un elemento que <input>, <select>, <textarea> se ha modificado Pinchar y soltar el ratn Todos los elementos

Pinchar dos veces seguidas con Todos los elementos el ratn Seleccionar un elemento Pulsar una tecla (sin soltar)
<button>, <input>, <label>, <select>, <textarea>, <body>

onfocus

onkeydown

Elementos de formulario y
<body>

onkeypress Pulsar una tecla

Elementos de formulario y
<body>

onkeyup

Soltar una tecla pulsada La pgina se ha cargado completamente

Elementos de formulario y
<body> <body>

onload

onmousedown

Pulsar (sin soltar) un botn del Todos los elementos ratn Todos los elementos Todos los elementos

onmousemove Mover el ratn

El ratn "sale" del elemento

onmouseout (pasa por encima de otro

elemento)
onmouseover

El ratn "entra" en el elemento Todos los elementos (pasa por encima del elemento) Soltar el botn que estaba pulsado en el ratn Todos los elementos

onmouseup

onreset

Inicializar el formulario (borrar <form> todos sus datos) Se ha modificado el tamao de <body> la ventana del navegador Seleccionar un texto Enviar el formulario
<input>, <textarea> <form>

onresize onselect onsubmit

onunload

Se abandona la pgina (por <body> ejemplo al cerrar el navegador)

Los eventos ms utilizados en las aplicaciones web tradicionales son onload para esperar a que se cargue la pgina por completo, los eventos onclick, onmouseover, onmouseout para controlar el ratn y onsubmit para controlar el envo de los formularios. Algunos eventos de la tabla anterior (onclick, onkeydown, onkeypress, onreset, onsubmit) permiten evitar la "accin por defecto" de ese evento. Ms adelante se muestra en detalle este comportamiento, que puede resultar muy til en algunas tcnicas de programacin. Las acciones tpicas que realiza un usuario en una pgina web pueden dar lugar a una sucesin de eventos. Al pulsar por ejemplo sobre un botn de tipo <input type="submit"> se desencadenan los eventos onmousedown, onclick, onmouseup y onsubmit de forma consecutiva.
6.2.2. Manejadores de eventos

Un evento de JavaScript por s mismo carece de utilidad. Para que los eventos resulten tiles, se deben asociar funciones o cdigo JavaScript a cada evento. De esta forma, cuando se produce un evento se ejecuta el cdigo indicado, por lo que la aplicacin puede responder ante cualquier evento que se produzca durante su ejecucin. Las funciones o cdigo JavaScript que se definen para cada evento se denominan "manejador de eventos" y como JavaScript es un lenguaje muy flexible, existen varias formas diferentes de indicar los manejadores:

Manejadores como atributos de los elementos XHTML. Manejadores como funciones JavaScript externas. Manejadores "semnticos".

6.2.2.1. Manejadores de eventos como atributos XHTML

Se trata del mtodo ms sencillo y a la vez menos profesional de indicar el cdigo JavaScript que se debe ejecutar cuando se produzca un evento. En este caso, el cdigo se incluye en un atributo del propio elemento XHTML. En el siguiente ejemplo, se quiere mostrar un mensaje cuando el usuario pinche con el ratn sobre un botn:
<input type="button" value="Pinchame y vers" onclick="alert('Gracias por pinchar');" />

En este mtodo, se definen atributos XHTML con el mismo nombre que los eventos que se quieren manejar. El ejemplo anterior slo quiere controlar el evento de pinchar con el ratn, cuyo nombre es onclick. As, el elemento XHTML para el que se quiere definir este evento, debe incluir un atributo llamado onclick.

El contenido del atributo es una cadena de texto que contiene todas las instrucciones JavaScript que se ejecutan cuando se produce el evento. En este caso, el cdigo JavaScript es muy sencillo (alert('Gracias por pinchar');), ya que solamente se trata de mostrar un mensaje. En este otro ejemplo, cuando el usuario pincha sobre el elemento <div> se muestra un mensaje y cuando el usuario pasa el ratn por encima del elemento, se muestra otro mensaje:
<div onclick="alert('Has pinchado con el ratn');" onmouseover="alert('Acabas de pasar el ratn por encima');"> Puedes pinchar sobre este elemento o simplemente pasar el ratn por encima </div>

Este otro ejemplo incluye una de las instrucciones ms utilizadas en las aplicaciones JavaScript ms antiguas:
<body onload="alert('La pgina se ha cargado completamente');"> ... </body>

El mensaje anterior se muestra despus de que la pgina se haya cargado completamente, es decir, despus de que se haya descargado su cdigo HTML, sus imgenes y cualquier otro objeto incluido en la pgina. El evento onload es uno de los ms utilizados ya que, como se vio en el captulo de DOM, las funciones que permiten acceder y manipular los nodos del rbol DOM solamente estn disponibles cuando la pgina se ha cargado completamente.
6.2.2.2. Manejadores de eventos y variable this

JavaScript define una variable especial llamada this que se crea automticamente y que se emplea en algunas tcnicas avanzadas de programacin. En los eventos, se puede utilizar la variable this para referirse al elemento XHTML que ha provocado el evento. Esta variable es muy til para ejemplos como el siguiente: Cuando el usuario pasa el ratn por encima del <div>, el color del borde se muestra de color negro. Cuando el ratn sale del <div>, se vuelve a mostrar el borde con el color gris claro original. Elemento <div> original:
<div id="contenidos" style="width:150px; height:60px; border:thin solid silver"> Seccin de contenidos... </div>

Si no se utiliza la variable this, el cdigo necesario para modificar el color de los bordes, sera el siguiente:

<div id="contenidos" style="width:150px; height:60px; border:thin solid silver" onmouseover="document.getElementById('contenidos').style.borderColor=' black';" onmouseout="document.getElementById('contenidos').style.borderColor='s ilver';"> Seccin de contenidos... </div>

El cdigo anterior es demasiado largo y demasiado propenso a cometer errores. Dentro del cdigo de un evento, JavaScript crea automticamente la variable this, que hace referencia al elemento XHTML que ha provocado el evento. As, el ejemplo anterior se puede reescribir de la siguiente manera:
<div id="contenidos" style="width:150px; height:60px; border:thin solid silver" onmouseover="this.style.borderColor='black';" onmouseout="this.style.borderColor='silver';"> Seccin de contenidos... </div>

El cdigo anterior es mucho ms compacto, ms fcil de leer y de escribir y sigue funcionando correctamente aunque se modifique el valor del atributo id del <div>.
6.2.2.3. Manejadores de eventos como funciones externas

La definicin de los manejadores de eventos en los atributos XHTML es el mtodo ms sencillo pero menos aconsejable de tratar con los eventos en JavaScript. El principal inconveniente es que se complica en exceso en cuanto se aaden algunas pocas instrucciones, por lo que solamente es recomendable para los casos ms sencillos. Si se realizan aplicaciones complejas, como por ejemplo la validacin de un formulario, es aconsejable agrupar todo el cdigo JavaScript en una funcin externa y llamar a esta funcin desde el elemento XHTML. Siguiendo con el ejemplo anterior que muestra un mensaje al pinchar sobre un botn:
<input type="button" value="Pinchame y vers" onclick="alert('Gracias por pinchar');" />

Utilizando funciones externas se puede transformar en:

function muestraMensaje() { alert('Gracias por pinchar'); } <input type="button" value="Pinchame y vers" onclick="muestraMensaje()" />

Esta tcnica consiste en extraer todas las instrucciones de JavaScript y agruparlas en una funcin externa. Una vez definida la funcin, en el atributo del elemento XHTML se incluye el nombre de la funcin, para indicar que es la funcin que se ejecuta cuando se produce el evento.

La llamada a la funcin se realiza de la forma habitual, indicando su nombre seguido de los parntesis y de forma opcional, incluyendo todos los argumentos y parmetros que se necesiten. El principal inconveniente de este mtodo es que en las funciones externas no se puede seguir utilizando la variable this y por tanto, es necesario pasar esta variable como parmetro a la funcin:
function resalta(elemento) { switch(elemento.style.borderColor) { case 'silver': case 'silver silver silver silver': case '#c0c0c0': elemento.style.borderColor = 'black'; break; case 'black': case 'black black black black': case '#000000': elemento.style.borderColor = 'silver'; break; } } <div style="width:150px; height:60px; border:thin solid silver" onmouseover="resalta(this)" onmouseout="resalta(this)"> Seccin de contenidos... </div>

En el ejemplo anterior, la funcin externa es llamada con el parmetro this, que dentro de la funcin se denomina elemento. La complejidad del ejemplo se produce sobre todo por la forma en la que los distintos navegadores almacenan el valor de la propiedad borderColor. Mientras que Firefox almacena (en caso de que los cuatro bordes coincidan en color) el valor black, Internet Explorer lo almacena como black black black black y Opera almacena su representacin hexadecimal #000000.
6.2.2.4. Manejadores de eventos semnticos

Los mtodos que se han visto para aadir manejadores de eventos (como atributos XHTML y como funciones externas) tienen un grave inconveniente: "ensucian" el cdigo XHTML de la pgina. Como es conocido, una de las buenas prcticas bsicas en el diseo de pginas y aplicaciones web es la separacin de los contenidos (XHTML) y su aspecto o presentacin (CSS). Siempre que sea posible, tambin se recomienda separar los contenidos (XHTML) y su comportamiento o programacin (JavaScript). Mezclar el cdigo JavaScript con los elementos XHTML solamente contribuye a complicar el cdigo fuente de la pgina, a dificultar la modificacin y mantenimiento de la pgina y a reducir la semntica del documento final producido.

Afortunadamente, existe un mtodo alternativo para definir los manejadores de eventos de JavaScript. Esta tcnica es una evolucin del mtodo de las funciones externas, ya que se basa en utilizar las propiedades DOM de los elementos XHTML para asignar todas las funciones externas que actan de manejadores de eventos. As, el siguiente ejemplo:
<input id="pinchable" type="button" value="Pinchame y vers" onclick="alert('Gracias por pinchar');" />

Se puede transformar en:

// Funcin externa function muestraMensaje() { alert('Gracias por pinchar'); } // Asignar la funcin externa al elemento document.getElementById("pinchable").onclick = muestraMensaje; // Elemento XHTML <input id="pinchable" type="button" value="Pinchame y vers" />

La tcnica de los manejadores semnticos consiste en:

1. Asignar un identificador nico al elemento XHTML mediante el atributo id. 2. Crear una funcin de JavaScript encargada de manejar el evento. 3. Asignar la funcin externa al evento correspondiente en el elemento deseado.

El ltimo paso es la clave de esta tcnica. En primer lugar, se obtiene el elemento al que se desea asociar la funcin externa:
document.getElementById("pinchable");

A continuacin, se utiliza una propiedad del elemento con el mismo nombre que el evento que se quiere manejar. En este caso, la propiedad es onclick:
document.getElementById("pinchable").onclick = ...

Por ltimo, se asigna la funcin externa mediante su nombre sin parntesis. Lo ms importante (y la causa ms comn de errores) es indicar solamente el nombre de la funcin, es decir, prescindir de los parntesis al asignar la funcin:
document.getElementById("pinchable").onclick = muestraMensaje;

Si se aaden los parntesis despus del nombre de la funcin, en realidad se est ejecutando la funcin y guardando el valor devuelto por la funcin en la propiedad onclick de elemento.
// Asignar una funcin externa a un evento de un elemento document.getElementById("pinchable").onclick = muestraMensaje;

// Ejecutar una funcin y guardar su resultado en una propiedad de un elemento document.getElementById("pinchable").onclick = muestraMensaje();

La gran ventaja de este mtodo es que el cdigo XHTML resultante es muy "limpio", ya que no se mezcla con el cdigo JavaScript. Adems, dentro de las funciones externas asignadas s que se puede utilizar la variable this para referirse al elemento que provoca el evento. El nico inconveniente de este mtodo es que la pgina se debe cargar completamente antes de que se puedan utilizar las funciones DOM que asignan los manejadores a los elementos XHTML. Una de las formas ms sencillas de asegurar que cierto cdigo se va a ejecutar despus de que la pgina se cargue por completo es utilizar el evento onload:
window.onload = function() { document.getElementById("pinchable").onclick = muestraMensaje; }

La tcnica anterior utiliza el concepto de funciones annimas, que no se va a estudiar, pero que permite crear un cdigo compacto y muy sencillo. Para asegurarse que un cdigo JavaScript va a ejecutarse despus de que la pgina se haya cargado completamente, slo es necesario incluir esas instrucciones entre los smbolos { y }:
window.onload = function() { ... }

En el siguiente ejemplo, se aaden eventos a los elementos de tipo input=text de un formulario complejo:
function resalta() { // Cdigo JavaScript } window.onload = function() { var formulario = document.getElementById("formulario"); var camposInput = formulario.getElementsByTagName("input"); for(var i=0; i<camposInput.length; i++) { if(camposInput[i].type == "text") { camposInput[i].onclick = resalta; } }

Ejercicio 14 A partir de la pgina web proporcionada, completar el cdigo JavaScript para que:
1. Cuando se pinche sobre el primer enlace, se oculte su seccin relacionada 2. Cuando se vuelva a pinchar sobre el mismo enlace, se muestre otra vez esa seccin de contenidos

3. Completar el resto de enlaces de la pgina para que su comportamiento sea idntico al del primer enlace 4. Cuando una seccin se oculte, debe cambiar el mensaje del enlace asociado (pista: propiedad innerHTML)

Contenido Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque. Ocultar contenidos Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque. Ocultar contenidos Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque. Ocultar contenidos

11.14. Ejercicio 14
Si se utilizan manejadores de eventos como atributos de XHTML, la solucin podra ser la siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-88591" /> <title>Ejercicio 14 - DOM bsico y atributos XHTML</title> <script type="text/javascript"> function muestraOculta(id) { var elemento = document.getElementById('contenidos_'+id); var enlace = document.getElementById('enlace_'+id); if(elemento.style.display == "" || elemento.style.display == "block") { elemento.style.display = "none"; enlace.innerHTML = 'Mostrar contenidos'; } else { elemento.style.display = "block"; enlace.innerHTML = 'Ocultar contenidos'; } } </script> </head> <body> <p id="contenidos_1">[1] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p> <a id="enlace_1" href="#" onclick="muestraOculta('1'); return false;">Ocultar contenidos</a> <br/> <p id="contenidos_2">[2] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p> <a id="enlace_2" href="#" onclick="muestraOculta('2'); return false;">Ocultar contenidos</a> <br/> <p id="contenidos_3">[3] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis

Descargar solucin completa Tambin es posible solucionar el ejercicio utilizando manejadores de eventos semnticos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-88591" /> <title>Ejercicio 14 - DOM bsico y atributos XHTML</title> <script type="text/javascript"> window.onload = function() { var enlaces = document.getElementsByTagName('a'); for(i in enlaces) { enlaces[i].onclick = muestraOculta; } } function muestraOculta() { var idEnlace = this.id; var trozos = idEnlace.split('_'); var numero = trozos[1]; var parrafo = document.getElementById('contenidos_' + numero); switch(parrafo.style.display) { case 'none': parrafo.style.display = 'block'; this.innerHTML = 'Ocultar contenidos'; break; case 'block': case '': parrafo.style.display = 'none'; this.innerHTML = 'Mostrar contenidos'; break; }

} </script> </head> <body>

<p id="contenidos_1">[1] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis

malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p> <a id="enlace_1" href="#">Ocultar contenidos</a> <br/> <p id="contenidos_2">[2] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p> <a id="enlace_2" href="#">Ocultar contenidos</a> <br/> <p id="contenidos_3">[3] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p> <a id="enlace_3" href="#">Ocultar contenidos</a> </body> </html>

6.3. Obteniendo informacin del evento (objeto event)

Normalmente, los manejadores de eventos requieren informacin adicional para procesar sus tareas. Si una funcin por ejemplo se encarga de procesar el evento onclick, quizs necesite saber en que posicin estaba el ratn en el momento de pinchar el botn. No obstante, el caso ms habitual en el que es necesario conocer informacin adicional sobre el evento es el de los eventos asociados al teclado. Normalmente, es muy importante conocer la tecla que se ha pulsado, por ejemplo para diferenciar las teclas normales de las teclas especiales (ENTER, tabulador, Alt, Ctrl., etc.). JavaScript permite obtener informacin sobre el ratn y el teclado mediante un objeto especial llamado event. Desafortunadamente, los diferentes navegadores presentan diferencias muy notables en el tratamiento de la informacin sobre los eventos. La principal diferencia reside en la forma en la que se obtiene el objeto event. Internet Explorer considera que este objeto forma parte del objeto window y el resto de

navegadores lo consideran como el nico argumento que tienen las funciones manejadoras de eventos. Aunque es un comportamiento que resulta muy extrao al principio, todos los navegadores modernos excepto Internet Explorer crean mgicamente y de forma automtica un argumento que se pasa a la funcin manejadora, por lo que no es necesario incluirlo en la llamada a la funcin manejadora. De esta forma, para utilizar este "argumento mgico", slo es necesario asignarle un nombre, ya que los navegadores lo crean automticamente. En resumen, en los navegadores tipo Internet Explorer, el objeto event se obtiene directamente mediante:
var evento = window.event;

Por otra parte, en el resto de navegadores, el objeto event se obtiene mgicamente a partir del argumento que el navegador crea automticamente:
function manejadorEventos(elEvento) { var evento = elEvento; }

Si se quiere programar una aplicacin que funcione correctamente en todos los navegadores, es necesario obtener el objeto event de forma correcta segn cada navegador. El siguiente cdigo muestra la forma correcta de obtener el objeto event en cualquier navegador:
function manejadorEventos(elEvento) { var evento = elEvento || window.event; }

Una vez obtenido el objeto event, ya se puede acceder a toda la informacin relacionada con el evento, que depende del tipo de evento producido.
6.3.1. Informacin sobre el evento

La propiedad type indica el tipo de evento producido, lo que es til cuando una misma funcin se utiliza para manejar varios eventos:
var tipo = evento.type;

La propiedad type devuelve el tipo de evento producido, que es igual al nombre del evento pero sin el prefijo on. Mediante esta propiedad, se puede rehacer de forma ms sencilla el ejemplo anterior en el que se resaltaba una seccin de contenidos al pasar el ratn por encima:
function resalta(elEvento) { var evento = elEvento || window.event; switch(evento.type) { case 'mouseover': this.style.borderColor = 'black';

} }

break; case 'mouseout': this.style.borderColor = 'silver'; break;

window.onload = function() { document.getElementById("seccion").onmouseover = resalta; document.getElementById("seccion").onmouseout = resalta; } <div id="seccion" style="width:150px; height:60px; border:thin solid silver"> Seccin de contenidos... </div>

6.3.2. Informacin sobre los eventos de teclado

De todos los eventos disponibles en JavaScript, los eventos relacionados con el teclado son los ms incompatibles entre diferentes navegadores y por tanto, los ms difciles de manejar. En primer lugar, existen muchas diferencias entre los navegadores, los teclados y los sistemas operativos de los usuarios, principalmente debido a las diferencias entre idiomas. Adems, existen tres eventos diferentes para las pulsaciones de las teclas (onkeyup, onkeypress y onkeydown). Por ltimo, existen dos tipos de teclas: las teclas normales (como letras, nmeros y smbolos normales) y las teclas especiales (como ENTER, Alt, Shift, etc.) Cuando un usuario pulsa una tecla normal, se producen tres eventos seguidos y en este orden: onkeydown, onkeypress y onkeyup. El evento onkeydown se corresponde con el hecho de pulsar una tecla y no soltarla; el evento onkeypress es la propia pulsacin de la tecla y el evento onkeyup hace referencia al hecho de soltar una tecla que estaba pulsada. La forma ms sencilla de obtener la informacin sobre la tecla que se ha pulsado es mediante el evento onkeypress. La informacin que proporcionan los eventos onkeydown y onkeyup se puede considerar como ms tcnica, ya que devuelven el cdigo interno de cada tecla y no el carcter que se ha pulsado. A continuacin se incluye una lista con todas las propiedades diferentes de todos los eventos de teclado tanto en Internet Explorer como en el resto de navegadores:

Evento keydown: o Mismo comportamiento en todos los navegadores: Propiedad keyCode: cdigo interno de la tecla Propiedad charCode: no definido Evento keypress: o Internet Explorer: Propiedad keyCode: el cdigo del carcter de la tecla que se ha pulsado Propiedad charCode: no definido

Resto de navegadores: Propiedad keyCode: para las teclas normales, no definido. Para las teclas especiales, el cdigo interno de la tecla. Propiedad charCode: para las teclas normales, el cdigo del carcter de la tecla que se ha pulsado. Para las teclas especiales, 0. Evento keyup: o Mismo comportamiento en todos los navegadores: Propiedad keyCode: cdigo interno de la tecla Propiedad charCode: no definido
o

Para convertir el cdigo de un carcter (no confundir con el cdigo interno) al carcter que representa la tecla que se ha pulsado, se utiliza la funcin String.fromCharCode(). A continuacin se incluye un script que muestra toda la informacin sobre los tres eventos de teclado:
window.onload = function() { document.onkeyup = muestraInformacion; document.onkeypress = muestraInformacion; document.onkeydown = muestraInformacion; } function muestraInformacion(elEvento) { var evento = window.event || elEvento; var mensaje = "Tipo de evento: " + evento.type + "<br>" + "Propiedad keyCode: " + evento.keyCode + "<br>" + "Propiedad charCode: " + evento.charCode + "<br>" + "Carcter pulsado: " + String.fromCharCode(evento.charCode); info.innerHTML += "<br>--------------------------------------<br>" + mensaje } ... <div id="info"></div>

Al pulsar la tecla a en el navegador Firefox, se muestra la siguiente sucesin de eventos:

-------------------------------------Tipo de evento: keydown Propiedad keyCode: 65 Propiedad charCode: 0 Carcter pulsado: ? -------------------------------------Tipo de evento: keypress Propiedad keyCode: 0 Propiedad charCode: 97 Carcter pulsado: a -------------------------------------Tipo de evento: keyup Propiedad keyCode: 65 Propiedad charCode: 0

Carcter pulsado: ?

Al pulsar la tecla A (la misma tecla, pero habiendo activado previamente las maysculas) se muestra la siguiente sucesin de eventos en el navegador Firefox:
-------------------------------------Tipo de evento: keydown Propiedad keyCode: 65 Propiedad charCode: 0 Carcter pulsado: ? -------------------------------------Tipo de evento: keypress Propiedad keyCode: 0 Propiedad charCode: 65 Carcter pulsado: A -------------------------------------Tipo de evento: keyup Propiedad keyCode: 65 Propiedad charCode: 0 Carcter pulsado: ?

En los eventos keydown y keyup, la propiedad keyCode sigue valiendo lo mismo en los dos casos. El motivo es que keyCode almacena el cdigo interno de la tecla, por lo que si se pulsa la misma tecla, se obtiene el mismo cdigo, independientemente de que una misma tecla puede producir caracteres diferentes (por ejemplo maysculas y minsculas). En el evento keypress, el valor de la propiedad charCode vara, ya que el carcter a, no es el mismo que el carcter A. En este caso, el valor de charCode coincide con el cdigo ASCII del carcter pulsado. Siguiendo en el navegador Firefox, si ahora se pulsa una tecla especial, como por ejemplo el tabulador, se muestra la siguiente informacin:
-------------------------------------Tipo de evento: keydown Propiedad keyCode: 9 Propiedad charCode: 0 Carcter pulsado: ? -------------------------------------Tipo de evento: keypress Propiedad keyCode: 9 Propiedad charCode: 0 Carcter pulsado: ? -------------------------------------Tipo de evento: keyup Propiedad keyCode: 9 Propiedad charCode: 0 Carcter pulsado: ?

Las teclas especiales no disponen de la propiedad charCode, ya que slamente se guarda el cdigo interno de la tecla pulsada en la propiedad keyCode, en este caso el cdigo 9. Si se pulsa la tecla Enter, se obtiene el cdigo 13, la tecla de la flecha superior produce el cdigo 38, etc. No obstante, dependiendo del teclado utilizado para

pulsar las teclas y dependiendo de la disposicin de las teclas en funcin del idioma del teclado, estos cdigos podran variar. A continuacin se muestra el resultado de la ejecucin del mismo ejemplo anterior en el navegador Internet Explorer. Al pulsar la tecla a, se obtiene la siguiente informacin:
-------------------------------------Tipo de evento: keydown Propiedad keyCode: 65 Propiedad charCode: undefined Carcter pulsado: -------------------------------------Tipo de evento: keypress Propiedad keyCode: 97 Propiedad charCode: undefined Carcter pulsado: -------------------------------------Tipo de evento: keyup Propiedad keyCode: 65 Propiedad charCode: undefined Carcter pulsado:

La propiedad keyCode en el evento keypress contiene el cdigo ASCII del carcter de la tecla, por lo que se puede obtener directamente el carcter mediante String.fromCharCode(keyCode). Si se pulsa la tecla A, la informacin mostrada es idntica a la anterior, salvo que el cdigo que muestra el evento keypress cambia por 65, que es el cdigo ASCII de la tecla A:
-------------------------------------Tipo de evento: keydown Propiedad keyCode: 65 Propiedad charCode: undefined Carcter pulsado: -------------------------------------Tipo de evento: keypress Propiedad keyCode: 65 Propiedad charCode: undefined Carcter pulsado: -------------------------------------Tipo de evento: keyup Propiedad keyCode: 65 Propiedad charCode: undefined Carcter pulsado:

Al pulsar una tecla especial como el tabulador, Internet Explorer muestra la siguiente informacin:
-------------------------------------Tipo de evento: keydown Propiedad keyCode: 9 Propiedad charCode: undefined Carcter pulsado:

Los cdigos mostrados para las teclas especiales coinciden con los de Firefox y el resto de navegadores, pero recuerda que pueden variar en funcin del teclado que se utiliza y en funcin de la disposicin de las teclas para cada idioma. Por ltimo, las propiedades altKey, ctrlKey y shiftKey almacenan un valor booleano que indica si alguna de esas teclas estaba pulsada al producirse el evento del teclado. Sorprendentemente, estas tres propiedades funcionan de la misma forma en todos los navegadores:
if(evento.altKey) { alert('Estaba pulsada la tecla ALT'); }

A continuacin se muestra el caso en el que se pulsa la tecla Shift y sin soltarla, se pulsa sobre la tecla que contiene el nmero 2 (en este caso, se refiere a la tecla que se encuentra en la parte superior del teclado y por tanto, no se refiere a la que se encuentra en el teclado numrico). Tanto Internet Explorer como Firefox muestran la misma secuencia de eventos:
-------------------------------------Tipo de evento: keydown Propiedad keyCode: 16 Propiedad charCode: 0 Carcter pulsado: ? -------------------------------------Tipo de evento: keydown Propiedad keyCode: 50 Propiedad charCode: 0 Carcter pulsado: ? -------------------------------------Tipo de evento: keypress Propiedad keyCode: 0 Propiedad charCode: 34 Carcter pulsado: " -------------------------------------Tipo de evento: keyup Propiedad keyCode: 50 Propiedad charCode: 0 Carcter pulsado: ? -------------------------------------Tipo de evento: keyup Propiedad keyCode: 16 Propiedad charCode: 0 Carcter pulsado: ?

El evento keypress es el nico que permite obtener el carcter realmente pulsado, ya que al pulsar sobre la tecla 2 habiendo pulsado la tecla Shift previamente, se obtiene el carcter ", que es precisamente el que muestra el evento keypress. El siguiente cdigo de JavaScript permite obtener de forma correcta en cualquier navegador el carcter correspondiente a la tecla pulsada:
function manejador(elEvento) { var evento = elEvento || window.event; var caracter = evento.charCode || evento.keyCode; alert("El carcter pulsado es: " + String.fromCharCode(caracter));

} document.onkeypress = manejador;

6.3.3. Informacin sobre los eventos de ratn

La informacin ms relevante sobre los eventos relacionados con el ratn es la de las coordenadas de la posicin del puntero del ratn. Aunque el origen de las coordenadas siempre se encuentra en la esquina superior izquierda, el punto que se toma como referencia de las coordenadas puede variar. De esta forma, es posible obtener la posicin del ratn respecto de la pantalla del ordenador, respecto de la ventana del navegador y respecto de la propia pgina HTML (que se utiliza cuando el usuario ha hecho scroll sobre la pgina). Las coordenadas ms sencillas son las que se refieren a la posicin del puntero respecto de la ventana del navegador, que se obtienen mediante las propiedades clientX y clientY:
function muestraInformacion(elEvento) { var evento = elEvento || window.event; var coordenadaX = evento.clientX; var coordenadaY = evento.clientY; alert("Has pulsado el ratn en la posicin: " + coordenadaX + ", " + coordenadaY); } document.onclick = muestraInformacion;

Las coordenadas de la posicin del puntero del ratn respecto de la pantalla completa del ordenador del usuario se obtienen de la misma forma, mediante las propiedades screenX y screenY:
var coordenadaX = evento.screenX; var coordenadaY = evento.screenY;

En muchas ocasiones, es necesario obtener otro par de coordenadas diferentes: las que corresponden a la posicin del ratn respecto del origen de la pgina. Estas coordenadas no siempre coinciden con las coordenadas respecto del origen de la ventana del navegador, ya que el usuario puede hacer scroll sobre la pgina web. Internet Explorer no proporciona estas coordenadas de forma directa, mientras que el resto de navegadores s que lo hacen. De esta forma, es necesario detectar si el navegador es de tipo Internet Explorer y en caso afirmativo realizar un clculo sencillo:
// Detectar si el navegador es Internet Explorer var ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1; if(ie) { coordenadaX = evento.clientX coordenadaY = evento.clientY } else { coordenadaX = evento.pageX; coordenadaY = evento.pageY; } alert("Has pulsado el ratn en coordenadaY + " respecto de la + document.body.scrollLeft; + document.body.scrollTop;

la posicin: " + coordenadaX + ", " + pgina web");

La variable ie vale true si el navegador en el que se ejecuta el script es de tipo Internet Explorer (cualquier versin) y vale false en otro caso. Para el resto de navegadores, las coordenadas respecto del origen de la pgina se obtienen mediante las propiedades pageX y pageY. En el caso de Internet Explorer, se obtienen sumando la posicin respecto de la ventana del navegador (clientX, clientY) y el desplazamiento que ha sufrido la pgina (document.body.scrollLeft, document.body.scrollTop).

Ejercicio 15 Completar el cdigo JavaScript proporcionado para que: 1. Al mover el ratn en cualquier punto de la ventana del navegador, se muestre la posicin del puntero respecto del navegador y respecto de la pgina:

Figura 6.1. Informacin que se muestra para los eventos del ratn Para mostrar los mensajes, utilizar la funcin muestraInformacion() deduciendo su funcionamiento a partir de su cdigo fuente. 2. Al pulsar cualquier tecla, el mensaje mostrado debe cambiar para indicar el nuevo evento y su informacin asociada:

Figura 6.2. Informacin que se muestra para los eventos del teclado
3. Aadir la siguiente caracterstica al script: cuando se pulsa un botn del ratn, el

color de fondo del cuadro de mensaje debe ser amarillo (#FFFFCC) y cuando se pulsa una tecla, el color de fondo debe ser azul (#CCE6FF). Al volver a mover el ratn, el color de fondo vuelve a ser blanco.

Figura 6.3. El color de fondo del cuadro de informacin cambia en funcin del tipo de evento Descargar pgina HTML Ver solucin

11.16. Ejercicio 16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-88591" /> <title>Ejercicio 16 - Informacin sobre eventos</title> <style type="text/css"> body {font-family: arial, helvetica;} #info {width:160px; border:thin solid silver; padding:.5em; position:fixed;} #info h1 {margin: 0;} </style> <script type="text/javascript"> function informacion(elEvento) { var evento = elEvento || window.event; var coordenadaX = evento.clientX; var coordenadaY = evento.clientY; var dimensiones = tamanoVentanaNavegador(); var tamanoX = dimensiones[0]; var tamanoY = dimensiones[1]; var posicionHorizontal = ""; var posicionVertical = ""; if(coordenadaX > tamanoX/2) { posicionHorizontal = "derecha"; } else { posicionHorizontal = "izquierda"; } if(coordenadaY > tamanoY/2) { posicionVertical = "abajo"; }

else { posicionVertical = "arriba"; } muestraInformacion(['Posicion', posicionHorizontal, posicionVertical]); } function muestraInformacion(mensaje) { document.getElementById("info").innerHTML = '<h1>'+mensaje[0]+'</h1>'; for(var i=1; i<mensaje.length; i++) { document.getElementById("info").innerHTML += '<p>'+mensaje[i] +'</p>'; } } function tamanoVentanaNavegador(){ // Adaptada de http://www.howtocreate.co.uk/tutorials/javascript/browserwindow var dimensiones = []; if(typeof(window.innerWidth) == 'number') { // No es IE dimensiones = [window.innerWidth, window.innerHeight]; } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { //IE 6 en modo estandar (no quirks) dimensiones = [document.documentElement.clientWidth, document.documentElement.clientHeight]; } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) { //IE en modo quirks dimensiones = [document.body.clientWidth, document.body.clientHeight]; } return dimensiones; } document.onclick = informacion; </script> </head> <body> <div id="info"></div> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/> </body> </html>

Ejercicio 16 Crear un script que informe al usuario en que zona de la pantalla ha pulsado el ratn. Las zonas definidas son las siguientes: izquierda arriba, izquierda abajo, derecha arriba y derecha abajo. Para determinar el tamao de la ventana del navegador, utilizar la funcin tamanoVentanaNavegador() proporcionada. Descargar pgina HTML Ver solucin

document.onclick = informacion; </script> </head> <body> <div id="info"></div> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/> </body> </html>

Lecturas opcionales Calculadora

Calculadora

Programa Integracin de Tecnologas a la Docencia Universidad de Antioquia Este es un ejemplo de una calculadora sencilla, que hace uso de varios eventos <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Calculadora</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript" type="text/JavaScript"> function calcular(operacion){ var cadena var res var operando1 = document.calc.oper1.value var operando2 = document.calc.oper2.value var result = document.calc.resultado if(operando1.length<1){ alert("Ingresa un valor en el operando1") }else if(operando2.length<1){ alert("Ingresa un valor en el operando2") }else if(isNaN(operando1) || isNaN(operando2)){ alert("Los operandos deben ser nmeros") }else if(operando2 == 0 && operacion=="/"){ alert("La divisin por 0 no est definida") }else{ cadena = operando1+operacion+operando2 res = eval(cadena) result.value = res } } function borrar(){ var campos = document.calc.elements for(var i =0;i<campos.length;i++){ if(campos[i].value != "+" && campos[i].value != "-" && campos[i].value != "*" && campos[i].value != "/" && campos[i].value != "CLC"){ campos[i].value = "" } } } </script>

</head> <body> <form name="calc"> <table width="38%" border="1" align="center"> <tr> <td width="36%"><font face="Arial, Helvetica, sans-serif">Operando 1</font></td> <td width="48%"><input name="oper1" type="text" id="oper1"></td> <td width="16%"><input name="suma" type="button" id="suma" value="+" onClick="calcular(this.value)"></td> </tr> <tr> <td><font face="Arial, Helvetica, sans-serif">Operando 2</font></td> <td><input name="oper2" type="text" id="oper2"></td> <td><input name="resta" type="button" id="resta" value="-" onClick="calcular(this.value)"></td> </tr> <tr> <td><font face="Arial, Helvetica, sans-serif">Resultado</font></td> <td><input type="text" name="resultado" onFocus="blur()"></td> <td><input name="multi" type="button" id="multi" value="*" onClick="calcular(this.value)"></td> </tr> <tr> <td> </td> <td><input type="button" name="Submit" value="CLC" onClick="borrar()"></td> <td><input name="division" type="button" id="division" value="/" onClick="calcular(this.value)"></td> </tr> </table> </form> </body> </html>

Objetivo

Realizar un formulario para ser usado desde JavaScript

Lecturas propuestas Formularios archivo Propiedades bsicas de los formularios archivo

Expresiones regulares archivo Validacin de campos archivo Objetos DOM para formularios Recurso

http://www.librosweb.es/javascript/capitulo7.html

Inicio Introduccin a JavaScript Captulo 7. Formularios

Captulo 7. Formularios
La programacin de aplicaciones que contienen formularios web siempre ha sido una de las tareas fundamentales de JavaScript. De hecho, una de las principales razones por las que se invent el lenguaje de programacin JavaScript fue la necesidad de validar los datos de los formularios directamente en el navegador del usuario. De esta forma, se evitaba recargar la pgina cuando el usuario cometa errores al rellenar los formularios. No obstante, la aparicin de las aplicaciones AJAX ha relevado al tratamiento de formularios como la principal actividad de JavaScript. Ahora, el principal uso de JavaScript es el de las comunicaciones asncronas con los servidores y el de la manipulacin dinmica de las aplicaciones. De todas formas, el manejo de los formularios sigue siendo un requerimiento imprescindible para cualquier programador de JavaScript.

7.1. Propiedades bsicas de formularios y elementos

JavaScript dispone de numerosas propiedades y funciones que facilitan la programacin de aplicaciones que manejan formularios. En primer lugar, cuando se carga una pgina web, el navegador crea automticamente un array llamado forms y que contiene la referencia a todos los formularios de la pgina. Para acceder al array forms, se utiliza el objeto document, por lo que document.forms es el array que contiene todos los formularios de la pgina. Como se trata de un array, el acceso a cada formulario se realiza con la misma sintaxis de los arrays. La siguiente instruccin accede al primer formulario de la pgina:
document.forms[0];

Adems del array de formularios, el navegador crea automticamente un array llamado elements por cada uno de los formularios de la pgina. Cada array elements contiene la referencia a todos los elementos (cuadros de texto, botones, listas desplegables, etc.) de ese formulario. Utilizando la sintaxis de los arrays, la siguiente instruccin obtiene el primer elemento del primer formulario de la pgina:
document.forms[0].elements[0];

La sintaxis de los arrays no siempre es tan concisa. El siguiente ejemplo muestra cmo obtener directamente el ltimo elemento del primer formulario de la pgina:
document.forms[0].elements[document.forms[0].elements.length-1];

Aunque esta forma de acceder a los formularios es rpida y sencilla, tiene un inconveniente muy grave. Qu sucede si cambia el diseo de la pgina y en el cdigo HTML se cambia el orden de los formularios originales o se aaden nuevos formularios? El problema es que "el primer formulario de la pgina" ahora podra ser otro formulario diferente al que espera la aplicacin. En un entorno tan cambiante como el diseo web, es muy difcil confiar en que el orden de los formularios se mantenga estable en una pgina web. Por este motivo, siempre debera evitarse el acceso a los formularios de una pgina mediante el array document.forms. Una forma de evitar los problemas del mtodo anterior consiste en acceder a los formularios de una pgina a travs de su nombre (atributo name) o a travs de su atributo id. El objeto document permite acceder directamente a cualquier formulario mediante su atributo name:
var formularioPrincipal = document.formulario; var formularioSecundario = document.otro_formulario; <form name="formulario" > ... </form> <form name="otro_formulario" > ... </form>

Accediendo de esta forma a los formularios de la pgina, el script funciona correctamente aunque se reordenen los formularios o se aadan nuevos formularios a la pgina. Los elementos de los formularios tambin se pueden acceder directamente mediante su atributo name:
var formularioPrincipal = document.formulario; var primerElemento = document.formulario.elemento; <form name="formulario"> <input type="text" name="elemento" /> </form>

Obviamente, tambin se puede acceder a los formularios y a sus elementos utilizando las funciones DOM de acceso directo a los nodos. El siguiente ejemplo utiliza la habitual funcin document.getElementById() para acceder de forma directa a un formulario y a uno de sus elementos:
var formularioPrincipal = document.getElementById("formulario"); var primerElemento = document.getElementById("elemento"); <form name="formulario" id="formulario" > <input type="text" name="elemento" id="elemento" />

</form>

Independientemente del mtodo utilizado para obtener la referencia a un elemento de formulario, cada elemento dispone de las siguientes propiedades tiles para el desarrollo de las aplicaciones:
type: indica el tipo de elemento que se trata. Para los elementos de tipo <input> (text, button, checkbox, etc.) coincide con el valor de su atributo type. Para las listas desplegables normales (elemento <select>) su valor es select-one, lo que permite diferenciarlas de las

listas que permiten seleccionar varios elementos a la vez y cuyo tipo es select-multiple. Por ltimo, en los elementos de tipo <textarea>, el valor de type es textarea. form: es una referencia directa al formulario al que pertenece el elemento. As, para acceder al formulario de un elemento, se puede utilizar document.getElementById("id_del_elemento").form name: obtiene el valor del atributo name de XHTML. Solamente se puede leer su valor, por lo que no se puede modificar. value: permite leer y modificar el valor del atributo value de XHTML. Para los campos de texto (<input type="text"> y <textarea>) obtiene el texto que ha escrito el usuario. Para los botones obtiene el texto que se muestra en el botn. Para los elementos checkbox y radiobutton no es muy til, como se ver ms adelante

Por ltimo, los eventos ms utilizados en el manejo de los formularios son los siguientes:
onclick: evento que se produce cuando se pincha con el ratn sobre

un elemento. Normalmente se utiliza con cualquiera de los tipos de botones que permite definir XHTML (<input type="button">, <input type="submit">, <input type="image">). onchange: evento que se produce cuando el usuario cambia el valor de un elemento de texto (<input type="text"> o <textarea>). Tambin se produce cuando el usuario selecciona una opcin en una lista desplegable (<select>). Sin embargo, el evento slo se produce si despus de realizar el cambio, el usuario pasa al siguiente campo del formulario, lo que tcnicamente se conoce como que "el otro campo de formulario ha perdido el foco". onfocus: evento que se produce cuando el usuario selecciona un elemento del formulario. onblur: evento complementario de onfocus, ya que se produce cuando el usuario ha deseleccionado un elemento por haber seleccionado otro elemento del formulario. Tcnicamente, se dice que el elemento anterior "ha perdido el foco".

http://www.elcodigo.net/tutoriales/jsavanzado/jsavanzado5.html

Expresiones regulares
1. 2. 3. 4. Introduccin Creacin de una expresin regular Creacin de los patrones Aplicacin a la validacin de campos de formularios

1. Introduccin
Las Expresiones Regulares son patrones que permiten buscar coincidencias con combinaciones de caracteres dentro de cadenas de texto. Estos patrones pueden utilizarse con los metodos exec y text del objeto RegExp, y con los metodos match, replace, search y split del objeto String. Las expresiones regulares estn disponibles a partir de la versin 1.2 de JavaScript (Netscape Navigator 4.x y Microsoft Internet Explorer 4.x).

2. Creacin de una expresin regular

Par crear una expresin regular, puede utilizarse uno de los siguientes mtodos:
exp_reg = /ab+c/ exp_reg = new RegExp("ab+c")

La primera opcin compila la expresion regular cuando se evala el script, por lo que es mejor cuando la expresin regular es una constante y no va a variar a lo largo de la ejecucin del programa. La segunda opcin compila la expresin regular en tiempo de ejecucin.

3. Creacin de los patrones

Una expresin regular es una combinacin de carcteres normales con carcteres espciales. Por ejemplo, la expresin regular /ejemplo/ encontrar la subcadena "ejemplo" dentro de la cadena "Esto es un ejemplo." Con la utilizacin de carcteres especiales se consigue encontrar coincidencias con los retornos de carro, los tabuladores, el inicio o el final de las palabras, las repeticiones de caracteres... La siguiente tabla muestra una lista de los carcteres especiales ms importantes, as como su significado y un ejemplo de aplicacion:
Caract Significado er \ Indica que el siguiente caracter normal Ejemplo /\n/ encuentra un

debe ser considerado como especial. Tambin se utiliza como caracter de escape para los caracteres especiales. ^

salto de lena. Si se desea buscar el caracter '\', habr que utilizar /\\/

Se utiliza para encontrar el comienzo de /a/ encuentra una una lnea. 'a' en cualquier lugar, pero /^a/ haya una coincidencia con el caracter 'a' si se encuentra al comienzo de una lnea. Se utiliza para encontrar el final de una lnea. Encuentra coincidencia del caracter que /hola*/ encuentra le precede cuando aparece 0 o ms coincidencias en las veces en la cadena. cadena "hol", "hola" y "holaaaa". Igual que el '*', pero cuando el caracter aparece 1 o ms veces. Igual que el '*', pero cuando el caracter aparece 0 o 1 vez. Se utiliza para encontrar cualquier caracter que no sea un caracter de nueva lnea. /.sa/ encontrar coincidencias en las cadenas "casa", "cosa" y "cesa", pero no en "asa".

$ *

+ ? .

(x) x|y {n}

Encuentra coincidencias con 'x', y recuerda el patrn para su posterior utilizacin. Encuentra coincidencia si aparece el caracter 'x' o el caracter 'y'. Encuentra coincidencia si hay exactamente n apariciones del caracter que precede. Por ejemplo, /a{3}/ encuentra coincidencia en "holaaa", pero no en "holaa".

{n,}

Encuentra coincidencia si hay al menos n apariciones del caracter que precede.

{n,m} Encuentra coincidencia si hay como mnimo n y com mximo m apariciones del caracter que precede.

[xyz] Representa un conjunto de caracteres individuales.

/[aeiou]/ encuentra coincidencias con cualquier vocal. Si se utiliza el caracter '-' se pueden definir rangos. Por ejemplo, /[0-3]/ encuentra coincidencias si aparecen en la cadena los caracteres '0', '1', '2' o '3'.

[^xyz] Representa un conjunto de caracteres individuales complementario. Encunetra coincidencias con aquellos caracteres que NO aparezcan en el conjunto. Al igual que en el caso anterior, con el '-' se pueden definir rangos. [\b] \b Encuentra coincidencia con el caracter de retroceso. Encuentra coincidencias con los lmites de las palabras. Por ejemplo, /\bola/ encuentra la cadena "ola" en "Viene una ola", pero no en "Viene una cola".

4. Aplicacin a la validacin de campos de formularios

Una de las aplicaciones ms habituales de las expresiones regulares es la validacin de campos de formularios. Para ello, se crea una funcin de validacin que contiene una expresin regular por cada tipo de campo que se desea validar. Por ejemplo, podemos crear una expresin regular para campos de telfono, que compruebe que se han introducido slo nmeros, espacios o el caracter '-' en el campo correspondiente. Para validar los campos se utiliza el mtodo test de la expresin regular correspondiente. Este mtodo compara la cadena que se le pasa como argumento con el patrn de la expresin regular. El siguiente ejemplo valida campos de telfono y direcciones de correo electrnico:
function ValidaCampos(formulario) { //expresion regular para telefonos //permite campos vacios y guiones var er_tlfono = /(^[0-9\s\+\-])+$/

//expresion regular para emails var er_email = /^(.+\@.+\..+)$/ //comprueba campo tlfono de formu //usa el metodo test de expresion regular if(!er_tlfono.test(formu.tlfono.value)) { alert('Campo TELEFONO no vlido.') return false //no submit } //comprueba el campo email de formu //usa metodo test de la expresion regular if(!er_email.test(formu.email.value)) { alert('Campo E-MAIL no vlido.') return false //no submit } return true } //pasa al submit

La funcin de validacin se invoca utilizando el evento onSubmit del formulario. Cuando la validacin no da positivo, la funcin de validacin devuelve false. Esto cancela el submit, de modo que el usuario pueda corregir la entrada incorrecta. En caso contrario, se devuelve true. El tag form quedara as:
<form name="formu" action="enviar.cgi" onSubmit="return ValidaCampos(this)">

El gran inconveniente de este procedimiento es que slo funciona a partir de las versiones 4.0 de los navegadores de Microsoft y Netscape.

Validacin de campos de formulario con JavaScript

1. 2. 3. 4. Introduccin Evento onSubmit El objeto this Ejemplos

1. Introduccin
Una de las grandes aportaciones de JavaScript a la creacin de interfaces web es la posibilidad de acceder al contenido de los campos de los formularios para realizar

acciones sobre los valores introducidos por el usuario, modificarlos y, en ltima instancia, validarlos. La validacin de los datos de un formulario mediante scripts JavaScript no sustituye a la validacin que debe realizarse, por motivos de seguridad, en la aplicacin del servidor que recibe la informacin. Sin embargo, al aadir una validacin local con JavaScript, la experiencia de usuario mejora notablemente, al no ser necesario enviar los datos al servidor y esperar su respuesta para obtener slo un mensaje informando de la incorreccin de la informacin suministrada. Resulta frustrante cumplimentar un formulario, pulsar el botn enviar, y esperar 30 o 40 segundos para saber que hemos introducido mal un campo. JavaScript, desde sus comienzos, introdujo los mecanismos necesarios para validar campos de formulario. Estas son algunas de las validaciones tpicas:

Comprobar que se han suministrado todos los campos obligatorios Comprobar que el formato de un campo es el esperado (fechas, telfonos, etc.) Comprobar la validez (sintctica) de las direcciones de correo y URLs Comprobar que no se sobrepasa la longitud, nmero de lneas o tamao de la entrada

La siguiente gua ayuda a entender el funcionamiento de la validacin de formularios con JavaScript, y enlaza con numerosos ejemplos de nuestra seccin de cdigo que pueden ser utilizados de modelo para crear la validacin deseada.

2. Evento onSubmit
La validacin de campos de formulario se basa en interceptar el momento en que el usuario realiza el envo de los datos del formulario (es decir, pulsa sobre el botn de enviar). Como es sabido, el botn de envo de datos se codifica con HTML mediante un tipo especial de objeto de formulario, llamado submit. El siguiente ejemplo muestra un formulario con un botn de envo:
<form name="miFormulario" action="mailto:[email protected]"> <input type="submit" value="Enviar" name="enviar"> </form>

Cuando el usuario pulsa sobre el botn, el navegador ejecuta la accin codificada en el parmetro action del formulario. En el ejemplo anterior, hemos incluido una accin de tipo mailto:, es decir, de envo de datos por correo electrnico. Lo normal es que la accin sea la invocacin de un programa que se ejecuta en el servidor remoto, y que recibe los datos de acuerdo a la especificacin CGI (Common Gateway Interface). Para ampliar la informacin sobre esta interfaz, consulta nuestro tutorial Pero qu es eso de los CGIs? Cuando el usuario pulsa sobre el botn de enviar, se genera el evento submit, asociado al envo de datos de un formulario. JavaScript proporciona un mecanismo para capturar este evento, lo que nos permite ejecutar un script justo antes de que se realice el envo de los datos.

La forma de capturar el evento consiste en introducir el atributo onSubmit en la etiqueta del formulario cuyo evento submit queremos capturar. De esta forma, para capturar el evento submit del formulario del ejemplo anterior escribiramos:
<form name="miFormulario" action="mailto:[email protected]" onSubmit="alert('Has pulsado enviar.'); return false;"> <input type="submit" value="Enviar" name="enviar"> </form>

En esta nueva versin del formulario, al pulsar sobre el botn de envo se ejecutar el cdigo incluido como valor del atributo onSubmit. En este caso, se trata de un simple alert() JavaScript informando de que se ha pulsado sobre el botn de envo. Puede comprobarse el funcionamiento pulsando sobre el siguiente botn:
Enviar (false)

El cdigo JavaScript que se ejecuta antes del envo del formulario es, en el ejemplo anterior, un alert(). Sin embargo, se puede observar que se ha aadido un return false al final de la lnea de cdigo. Esta es la forma de indicar al navegador si la validacin ha sido correcta o incorrecta. Si el cdigo JavaScript (normalmente una funcin de validacin) del atributo onSubmit devuelve false, la validacin es incorrecta y el navegador no contina con el envo del formulario tras ejecutar dicho cdigo. Por el contrario, si devuelve true la validacin es correcta y el formulario se enva normalmente. Podemos modificar el ejemplo anterior para devolver true tras mostrar el alert-box. El ejemplo siguiente permite comprobar lo que sucede en ese caso. Se abrir el cliente de correo por defecto para iniciar el envo de un mensaje de correo a la direccin suministrada como mailto: en el atributo action.
Enviar (true)

3. El objeto this
Normalmente, el evento onSubmit ejecuta una funcin de validacin, como en el siguiente ejemplo:
<form name="miFormulario" action="mailto:[email protected]" onSubmit="return Valida(this);"> <input type="submit" value="Enviar" name="enviar"> </form>

Esta funcin devolver, como ya se ha dicho, true si la validacin es correcta, y false en caso contrario. Para poder realizar la validacin, la funcin debe trabajar sobre los objetos del formulario a validar, para acceder a su valor y evaluarlo. Esto se consigue pasndole como parmetro el objeto this, que referencia en este contexto al formulario desde el que se invoca la funcin.

La funcin de validacin acceder a los campos del formulario a partir del objeto this. A continuacin mostramos un ejemplo sencillo, en el que se comprueba si el valor del campo de nombre campo1 es igual a OK. En caso afirmativo, la validacin es correcta:
function Valida( formulario ) { if (formulario.campo1.value == 'OK') { return true } else { return false } }

4. Ejemplos
A continuacin mostramos referencias a mltiples ejemplos prcticos de validacin de formularios con JavaScript, que pueden servir para entender mejor los conceptos explicados en los prrafos anteriores:
4.1. Validacion de campos de texto no vacios

El ejemplo de Validacion de campos de texto no vacios muestra cmo acceder a un campo de texto para recorrerlo carcter a carter verificando que no est vaco y que no contiene slo caracteres en blanco.
4.2. Validacin de campos de fecha

El script de Validacion de campo fecha es un ejemplo de validacin de un campo que tiene que ajustarse a un formato determinado (en este caso el formato fecha d-m-aaaa).
4.3. Validacin de campos de hora

El script de Validacin de campos de hora tiene la particularidad de utilizar en la validacin expresiones regulares, lo que simplifica enormemente el cdigo.
4.4. Validacin de campos de longitud fija

Una de las comprobaciones tpicas sobre campos de formulario se refiere al nmero de caracteres introducidos (para verificar que no supera cierto valor, o que es exactamente igual a cierto nmero). Esta comprobacin es til, por ejemplo, para nmeros de telfono, cdigos postales o para nmeros de identificacin (como el DNI). El ejemplo Validacin de campos de longitud fija muestra cmo hacerlo con expresiones regulares.
4.5. Validacin de campos de correo electrnico

La Validacin de campos de correo electrnico es una de las ms necesarias, ya que muchos de los formularios que se utilizan en Internet solicitan este dato. Esta validacin es puramente sintctica (es decir, se comprueba que el formato est de acuerdo con la RFC 821 de la mensajera electrnica de Internet), no siendo posible comprobar que la direccin exista realmente.

4.6. Validacin de campos sin usar expresiones regulares

Para quienes no dominen las expresiones regulares de JavaScript, pero quieran implementar una funcin de validacin a medida, el ejemplo Validacin de campos sin usar expresiones regulares les permitir seleccionar los caracteres vlidos e introducirlos en una variable alfanumrica que se utilizar despus para la validacin.
4.7. Validacin de campo vaco, email y URL

El ejemplo de Validacin de campo vaco, email y URL es otro script de validacin que no utiliza expresiones regulares, y que muestra cmo se realiza la validacin de campos de correo electrnico y de URLs.

Objetos DOM para formularios

1. Objeto form
Este objeto es el contenedor de todos los elementos del formulario. Como ya vimos al tratar el objeto document, los formularios se agrupan en un array dentro de document. Cada elemento de este array es un objeto de tipo form.

1.1 Propiedades

action: Es una cadena que contiene la URL del parmetro ACTION del form, es decir, la direccin en la que los datos del formulario sern procesados. elements: Es un array que contiene todos los elementos del formulario, en el mismo orden en el que se definen en el documento HTML. Por ejemplo, si en el formulario hemos puesto, en este orden, una caja de texto, un checkbox y una lista de seleccin, la caja de texto ser elements[0], el checkbox ser elements[1] y la lista de seleccin ser elements[2].

encoding: Es una cadena que tiene la codificacin mime especificada en el parmetro ENCTYPE del form. method: Es una cadena que tiene el nombre del mtodo con el que se va a recibir/procesar la informacin del formulario (GET/POST).

1.2 Mtodos

reset(): Resetea el formulario: tiene el mismo efecto que si pulsramos un botn de tipo RESET dispuesto en el form.

submit(): Enva el formulario: tiene el mismo efecto que si pulsramos un botn de tipo SUBMIT dispuesto en el form. [1].

A continuacin se vern los objetos que hacen parte del formulario:

2. Objetos text, textarea y password

Estos objetos representan los campos de texto dentro de un formulario. El objeto password es exactamente igual que el text salvo en que no muestra los caracteres introducidos por el usuario, poniendo asteriscos (*) en su lugar.

2.1 Propiedades

dafaultValue: Es una cadena que contiene el valor por defecto que se le ha dado a uno de estos objetos por defecto. name: Es una cadena que contiene el valor del parmetro NAME. value: Es una cadena que contiene el valor del parmetro VALUE. maxlength: Nmero mximo de caracteres que puede contener el campo de texto.

2.2 Mtodos

blur(): Pierde el foco del ratn sobre el objeto especificado. focus(): Obtiene el foco del ratn sobre el objeto especificado. select(): Selecciona el texto dentro del objeto dado. [2].

<html> <head> <title> Ejemplo password</title> </head> <body> <script language= "javascript" type= "text/javascript"> function Mostrar() { alert('Tu nombre es ' + formulario.nombre.value); alert('Tu password es ' + formulario.pass.value); } </script>

<form name="formulario" id="formulario"> Nombre:<br> <input type="text" name="nombre" value="" maxlength="15"><br><br> Password:<br><input type="password" name="pass" maxlength="10"><br> </form> <a href="javascript:Mostrar();">Mostrar datos</a><br> </body> </html>

3. Objeto button
Hay tres tipos de botones: uno genrico, 'button', que no tiene accin asignada, y dos especficos, 'submit' y 'reset'. Estos dos ltimos tienen una accin asignada al ser pulsados: el primero enva el formulario y el segundo limpia los valores del formulario.

3.1 Propiedades

name: Es una cadena que contiene el valor del parmetro NAME. value: Es una cadena que contiene el valor del parmetro VALUE.

3.2 Mtodos

click(): Realiza la accin de pulsado del botn. [3].

Ejemplo:
<html> <head> <title>Ejemplo button</title> </head> <body> <script language= "javascript" type= "text/javascript"> function Mostrar(boton) { alert('Ha hecho clic sobre el botn: ' + boton.name+', de valor: '+boton.value); return true; } </script> <form name="formulario">

Un botn: <input type="button" name="Boton1" value="El botn 1" OnClick="Mostrar(this);"><br><br> Un botn: <input type="button" name="Boton2" value="El botn 2" OnClick="Mostrar(this);"><br><br> Un botn: <input type="button" name="Boton3" value="El botn 3" OnClick="Mostrar(this);"><br> </form> </body> </html>

4. Objeto checkbox
Las "checkboxes" permiten seleccionar varias opciones marcando el cuadrito que aparece a su izquierda. El cuadrito pulsado equivale a un "s" y sin pulsar a un "no" , o lo que es equivalente a "true" o "false".

4.1 Propiedades

hecked: Valor booleano que nos dice si el checkbox est pulsado o no. defaultChecked: Valor booleano que nos dice si el checkbox debe estar seleccionado por defecto o no. name: Es una cadena que contiene el valor del parmetro NAME. value: Es una cadena que contiene el valor del parmetro VALUE.

4.2 Mtodos

click(): Realiza la accin de pulsado del botn. [4].

Ejemplo:
<html> <head> <title>Ejemplo checkbox</title> </head> <body> <script language= "javascript" type= "text/javascript"> function Mostrar() { msg="Opcion 1:"+formulario.check1.checked+"\n" msg+="Opcion 2:"+formulario.check2.checked+"\n" msg+="Opcion 3:"+formulario.check3.checked+"\n" alert(msg); } </script> <form name="formulario" id="formulario"> <input type="checkbox" name="check1" checked> Opcin 1<br>

<input type="checkbox" name="check2"> Opcin 2 <br> <input type="checkbox" name="check3" checked> Opcin 3<br> </form> <a href="javascript:Mostrar()">Ver valores</a> </body> </html>

5. Objeto radio
A diferencia de los checkbox, que permiten elegir varias posibilidades entre las dadas, los objetos radio slo permiten elegir una de entre todas las que hay. Estn pensados para posibilidades mutuamente excluyentes (no se puede ser a la vez mayor de 18 aos y menor de 18 aos, no se puede estar a la vez soltero y casado, etc).

5.1 Propiedades

checked: Valor booleano que nos dice si el radio est seleccionado o no. defaultChecked: Valor booleano que nos dice si el radio debe estar seleccionado por defecto o no. length: Valor numrico que nos dice el nmero de opciones dentro de un grupo de elementos radio. name: Es una cadena que contiene el valor del parmetro NAME. value: Es una cadena que contiene el valor del parmetro VALUE.

Nota: Para agrupar elementos de tipo radio, todos ellos deben tener el mismo valor en NAME.

5.2 Mtodos

click(): Realiza la accin de pulsado del botn. [5].

Ejemplo:
<html> <head> <title>Ejemplo radio</title> </head> <body> <script language= "javascript" type= "text/javascript"> function Mostrar() {

msg="Elementos:"+formulario.edad.length+"\n"; msg+="Menor de 18 aos: "+formulario.edad[0].checked+"\n"; msg+="Entre 18 y 60 aos: "+formulario.edad[1].checked+"\n"; msg+="Mayor de 60 aos: "+formulario.edad[2].checked+"\n"; alert(msg); } </script> <form name="formulario" id="formulario"> Edad:<br><br> <input type="radio" name="edad" value="<18"> Menor de 18 aos.<br> <input type="radio" name="edad" value=">18 y <60" checked> Entre 18 y 60 aos.<br> <input type="radio" name="edad" value=">60"> Mayor de 60 aos.<br> </form> <a href="javascript:Mostrar()">Ver valores</a> </body> </html>

6. Objeto select
Este objeto representa una lista de opciones dentro de un formulario. Puede tratarse de una lista desplegable de la que se puede escoger alguna (o algunas) de sus opciones.

6.1 Propiedades

length: Valor numrico que nos indica cuntas opciones tiene la lista. name: Es una cadena que contiene el valor del parmetro NAME. options: Se trata de un array que contiene cada una de las opciones de la lista. Este array tiene, a su vez, las siguientes propiedades:
o

defaultSelected: Valor booleano que nos indica si la opcin est seleccionada por defecto. index: Valor numrico que nos da la posicin de la opcin dentro de la lista. length: Valor numrico que nos dice cuntas opciones tiene la lista. options: Cadena con todo el cdigo HTML de la lista. selected: Valor booleano que nos dice si la opcin est actualmente seleccionada o no. text: Cadena con el texto mostrado en la lista de una opcin concreta.

o o o

value: Es una cadena que contiene el valor del parmetro VALUE de la opcin concreta de la lista.

selectedIndex: Valor numrico que nos dice cul de todas las opciones disponibles est actualmente seleccionada. [6].

Ejemplo:
<html> <head> <title>Ejemplo select</title> </head> <body> <script language= "javascript" type= "text/javascript"> function Mostrar(boton) { msg="Elementos:"+formulario.edad.length+"\n"; msg+="Edad: "+formulario.edad.options [formulario.edad.selectedIndex].value+"\n"; alert(msg); } </script> <form name="formulario" id="formulario" > Edad:<br><br> <select name="edad"> <option value="<18" selected>Menor de 18 aos</option> <option value=">18 y <60">Entre 18 y 60 aos</option> <option value=">60">Mayor de 60 aos</option> </select> </form> <br> <a href="javascript:Mostrar()">Ver valores</a> </body> </html>

7. Objeto hidden
Gracias a este objeto se puede almacenar informacin extra en el formulario de forma completamente invisible para el usuario, pues no se ver en ningn momento que se tienen estos campos en el documento. Es parecido a un campo de texto (objeto text) salvo que no tiene valor por defecto (no tiene sentido pues el usuario no va a modificarlo), y que no se puede editar.

7.1 Propiedades

name: Es una cadena que contiene el valor del parmetro NAME.

value: Es una cadena que contiene el valor del parmetro VALUE. [7].

[1]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript FORM[En lnea]. <http://www.webestilo.com/javascript/js26.phtml> [citado en 10 de dicimebre de 2010] [2]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript text[En lnea]. <http://www.webestilo.com/javascript/js27.phtml> [citado en 10 de dicimebre de 2010] [3]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript button[En lnea]. <http://www.webestilo.com/javascript/js28.phtml> [citado en 10 de dicimebre de 2010] [4]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript checkbox[En lnea]. <http://www.webestilo.com/javascript/js29.phtml> [citado en 10 de dicimebre de 2010] [5]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript radio[En lnea]. <http://www.webestilo.com/javascript/js30.phtml> [citado en 10 de dicimebre de 2010] [6]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript select[En lnea]. <http://www.webestilo.com/javascript/js31.phtml> [citado en 10 de dicimebre de 2010] [7]. Contenido adaptado de: Usabilidad, programacin y mucho ms. WebEstilo, Internet JavaScript hidden[En lnea]. <http://www.webestilo.com/javascript/js32.phtml> [citado en 10 de dicimebre de 2010]

Formularios
Realizar una pgina que muestre una imagen de fondo y que contenga por lo menos dos radio button. Dependiendo de cual radio button se escoja mostrar un formulario con varios campos, los cuales al dar clic sobre un botn se deben validar.

Objetivo Crear un juego en el que se aplique la mayor cantidad de conceptos vistos durante el curso, y que haga uso de funciones objetos. ENTREGA: Martes 5 de Abril de 2011.

Ejemplos de pginas con JavaScript

He aque algunos ejemplos de paginas con "scripts" escritos en JavaScript (java interpretado). http://www.uv.es/~jac/guia/jscript/javascr.htm

También podría gustarte

Sesion 5 de Comunicación Sílaba Tónica y Atona 21-03-23
70% (10)
Sesion 5 de Comunicación Sílaba Tónica y Atona 21-03-23
6 páginas
El Lenguaje JavaScript (Parte 1) (Ilya Kantor) (Z-Library)
100% (2)
El Lenguaje JavaScript (Parte 1) (Ilya Kantor) (Z-Library)
744 páginas
Evaluación Diagnóstica 2022 (INGLÉS)
100% (1)
Evaluación Diagnóstica 2022 (INGLÉS)
5 páginas
Everardo Gamiz - Costumbres Durangueñas
Aún no hay calificaciones
Everardo Gamiz - Costumbres Durangueñas
264 páginas
Aprender VueJS con 100 ejercicios prácticos
De Everand
Aprender VueJS con 100 ejercicios prácticos
Angel Vazquez Vazquez
Aún no hay calificaciones
Aprender Javascript Avanzado con 100 ejercicios prácticos
De Everand
Aprender Javascript Avanzado con 100 ejercicios prácticos
MEDIAactive
5/5 (1)
Ejercicios de Lingüística y Semiótica PDF
Aún no hay calificaciones
Ejercicios de Lingüística y Semiótica PDF
3 páginas
Guia No.1 Javascript
Aún no hay calificaciones
Guia No.1 Javascript
5 páginas
Modelo-Objetos-Predefinidos-JavaScript
Aún no hay calificaciones
Modelo-Objetos-Predefinidos-JavaScript
34 páginas
Tema 2 Dwecmio
Aún no hay calificaciones
Tema 2 Dwecmio
12 páginas
Javascript: Javascript - Jerarquía de Objetos Javascript - Jerarquía de Objetos
Aún no hay calificaciones
Javascript: Javascript - Jerarquía de Objetos Javascript - Jerarquía de Objetos
11 páginas
Introducción JavaScript
Aún no hay calificaciones
Introducción JavaScript
10 páginas
JavaScript 14 - BOM
Aún no hay calificaciones
JavaScript 14 - BOM
50 páginas
2 Objeto Window
Aún no hay calificaciones
2 Objeto Window
30 páginas
DWEC03 - Modelo de Objetos Predefinidos en JavaScritp
Aún no hay calificaciones
DWEC03 - Modelo de Objetos Predefinidos en JavaScritp
24 páginas
Resumen Bloque I
Aún no hay calificaciones
Resumen Bloque I
7 páginas
Reporte JavaScript Ejemplos
Aún no hay calificaciones
Reporte JavaScript Ejemplos
16 páginas
Desarrollo Web Entorno Cliente
100% (1)
Desarrollo Web Entorno Cliente
231 páginas
Tecnológico Nacional de México: Métodos Numéricos
Aún no hay calificaciones
Tecnológico Nacional de México: Métodos Numéricos
11 páginas
Los Frames
Aún no hay calificaciones
Los Frames
4 páginas
TeoriaParcial02
Aún no hay calificaciones
TeoriaParcial02
16 páginas
Programación de Páginas Web en Javascript
Aún no hay calificaciones
Programación de Páginas Web en Javascript
29 páginas
DWEC. - Modelo de Objeos Predefiidos en Javascript.
Aún no hay calificaciones
DWEC. - Modelo de Objeos Predefiidos en Javascript.
30 páginas
More
100% (1)
More
221 páginas
Taller de Programación Web
Aún no hay calificaciones
Taller de Programación Web
50 páginas
Javascript
100% (1)
Javascript
96 páginas
Modulo 2.2 Btvds
Aún no hay calificaciones
Modulo 2.2 Btvds
67 páginas
Ud 3
Aún no hay calificaciones
Ud 3
204 páginas
Curso Practico de Javascript PDF
Aún no hay calificaciones
Curso Practico de Javascript PDF
95 páginas
Los Frames
Aún no hay calificaciones
Los Frames
4 páginas
M6 SW3 Javascript
Aún no hay calificaciones
M6 SW3 Javascript
26 páginas
Javascript PDF
Aún no hay calificaciones
Javascript PDF
21 páginas
Javascript
Aún no hay calificaciones
Javascript
5 páginas
Fermí Vilà
0% (2)
Fermí Vilà
96 páginas
Introduccion A La Programacion en JavaSc
Aún no hay calificaciones
Introduccion A La Programacion en JavaSc
12 páginas
Javascript - Clase 3
Aún no hay calificaciones
Javascript - Clase 3
18 páginas
Acreditable Pro Juan Frames de HTML
Aún no hay calificaciones
Acreditable Pro Juan Frames de HTML
33 páginas
Intro A Javascript
0% (1)
Intro A Javascript
24 páginas
Javascript PDF
Aún no hay calificaciones
Javascript PDF
31 páginas
Clase 9 - Aapro2 v2
Aún no hay calificaciones
Clase 9 - Aapro2 v2
13 páginas
Manual Javascript Español
0% (1)
Manual Javascript Español
96 páginas
JS Presentacion
Aún no hay calificaciones
JS Presentacion
10 páginas
Manual Java Script Clases
Aún no hay calificaciones
Manual Java Script Clases
16 páginas
Curso Programación Básica
Aún no hay calificaciones
Curso Programación Básica
25 páginas
Google Apps Script
67% (3)
Google Apps Script
131 páginas
Tutorial de Javascript
Aún no hay calificaciones
Tutorial de Javascript
59 páginas
Manual de JavaScript01
Aún no hay calificaciones
Manual de JavaScript01
32 páginas
DWEC03
Aún no hay calificaciones
DWEC03
26 páginas
Manual - Introducción A Los Frames
Aún no hay calificaciones
Manual - Introducción A Los Frames
13 páginas
Javascript Del Lado Del Cliente
Aún no hay calificaciones
Javascript Del Lado Del Cliente
81 páginas
Java Script
Aún no hay calificaciones
Java Script
36 páginas
Desarrollo en Javascript Del Lado Del Cliente
Aún no hay calificaciones
Desarrollo en Javascript Del Lado Del Cliente
92 páginas
Manual de Java Script Practico
Aún no hay calificaciones
Manual de Java Script Practico
95 páginas
La Guía Básica de JavaScript
De Everand
La Guía Básica de JavaScript
Miguel Ángel Arias
4/5 (1)
La programación JavaScript
De Everand
La programación JavaScript
Preston Prescott
Aún no hay calificaciones
Curso de Programación Web
De Everand
Curso de Programación Web
Alberto Ayoze Castillo
3.5/5 (10)
Domine JavaScript (4ª Edición)
De Everand
Domine JavaScript (4ª Edición)
Pablo Enrique Fernández
Aún no hay calificaciones
Aprende a Programar Ajax y jQuery
De Everand
Aprende a Programar Ajax y jQuery
Ángel Arias
1/5 (1)
Backbone JS
De Everand
Backbone JS
Guillermo Lorenzo Carvallo
Aún no hay calificaciones
Aprende a Programar con Ajax
De Everand
Aprende a Programar con Ajax
Ángel Arias
Aún no hay calificaciones
Backbone JS. JavaScript Framework. 2ª Edición
De Everand
Backbone JS. JavaScript Framework. 2ª Edición
Guillermo Lorenzo Carvallo
Aún no hay calificaciones
JavaScript Una Guía de Aprendizaje para el Lenguaje de Programación JavaScript
De Everand
JavaScript Una Guía de Aprendizaje para el Lenguaje de Programación JavaScript
Troy Dimes
3/5 (5)
115 Ejercicios resueltos de programación C++
De Everand
115 Ejercicios resueltos de programación C++
Jorge Fernando Betancourt
Aún no hay calificaciones
Curso de Programación con Java - 2ª Edición
De Everand
Curso de Programación con Java - 2ª Edición
Ángel Arias
4.5/5 (2)
Ecos y Reflexiones Sobre El Arte Nubico
100% (1)
Ecos y Reflexiones Sobre El Arte Nubico
59 páginas
Tema 9 Santo Tomas
50% (2)
Tema 9 Santo Tomas
15 páginas
Funciones Del Docente Del Aula de Innovación Pedagógica
Aún no hay calificaciones
Funciones Del Docente Del Aula de Innovación Pedagógica
6 páginas
Descripción de Los Logros de Aprendizaje en Las Competencias Del Área de Ingles
100% (3)
Descripción de Los Logros de Aprendizaje en Las Competencias Del Área de Ingles
1 página
diseñOSO PDF
Aún no hay calificaciones
diseñOSO PDF
22 páginas
5to LL - Primer Trimestre
Aún no hay calificaciones
5to LL - Primer Trimestre
23 páginas
Sesión Teatro Peruano
33% (3)
Sesión Teatro Peruano
5 páginas
Tesis Completo SUSANA 2021 Solo Falta El Marco Teorico Rellenar
Aún no hay calificaciones
Tesis Completo SUSANA 2021 Solo Falta El Marco Teorico Rellenar
88 páginas
HP 1 Apertura de Clase y Variación de Estimulo
Aún no hay calificaciones
HP 1 Apertura de Clase y Variación de Estimulo
5 páginas
Las Palabras y Los Días (Ensayos y Artículos)
Aún no hay calificaciones
Las Palabras y Los Días (Ensayos y Artículos)
121 páginas
Secuencia Didáctica
100% (4)
Secuencia Didáctica
45 páginas
Cotizacion Inalambrica - Ivan
Aún no hay calificaciones
Cotizacion Inalambrica - Ivan
2 páginas
Sobre El PEA en La Educacion Superior
Aún no hay calificaciones
Sobre El PEA en La Educacion Superior
8 páginas
Proyecto Cristina Juarez
Aún no hay calificaciones
Proyecto Cristina Juarez
51 páginas
La Construcción de Los Problemas Sociales
Aún no hay calificaciones
La Construcción de Los Problemas Sociales
3 páginas
Instructivo Escuela Virtual Analfe Curso Básico de Economía Solidaria 2020.01
Aún no hay calificaciones
Instructivo Escuela Virtual Analfe Curso Básico de Economía Solidaria 2020.01
7 páginas
Apuntes Sistemas Informacion
Aún no hay calificaciones
Apuntes Sistemas Informacion
10 páginas
Prueba 22
Aún no hay calificaciones
Prueba 22
2 páginas
NivCarreraIES 82 Per 3 09 08 2012
Aún no hay calificaciones
NivCarreraIES 82 Per 3 09 08 2012
15 páginas
Conclusiones y Recomendaciones Acerca de La Oratoria
Aún no hay calificaciones
Conclusiones y Recomendaciones Acerca de La Oratoria
3 páginas
Paso - A - Paso - Pago - en - Banco - WEB - BancaPersona (Recaudacion) TELEFONICA
Aún no hay calificaciones
Paso - A - Paso - Pago - en - Banco - WEB - BancaPersona (Recaudacion) TELEFONICA
46 páginas
BAUDRILLARD, Jean - El Otro Por Sí Mismo
100% (2)
BAUDRILLARD, Jean - El Otro Por Sí Mismo
25 páginas
Act 5 Quiz 1 Competencias Comunicativas
Aún no hay calificaciones
Act 5 Quiz 1 Competencias Comunicativas
10 páginas
Componentes Básicos de Una Red LAN
Aún no hay calificaciones
Componentes Básicos de Una Red LAN
20 páginas
Cuadernillo 3er Año (Final)
Aún no hay calificaciones
Cuadernillo 3er Año (Final)
438 páginas
Acta de Acuerdo y Registro de Evidencias Entre Evaluador y Evaluado 2015...
100% (4)
Acta de Acuerdo y Registro de Evidencias Entre Evaluador y Evaluado 2015...
3 páginas