El Objeto Form
Este objeto lo considero como imprescindible para realizar la comunicación con el servidor. Contiene información de todos los objetos de un formulario, ya sean, cuadros de texto, listas, botones, etc.
Propiedades |
|
action |
Cadena con la dirección en la que los datos del formulario serán procesados |
elements |
Array que contiene todos los elementos del formulario, en el mismo orden en que se definen en el documento. |
encoding |
Cadena que tiene la codificación mime especificada en el parámetro enctype de la etiqueta form utilizado para codificar el contenido del formulario a enviar al servidor. |
method |
Cadena con el nombre del método con el que se va a procesar la información del formulario (GET/POST) |
name |
Cadena con el valor del atributo name de la etiqueta form |
target |
Cadena con el nombre de la ventana donde se enviará una remisión de un formulario |
length |
Refleja el número de elementos del formulario |
Métodos |
|
reset() | Resetea el formulario |
submit() | Envía el formulario |
handleEvent() | Invoca el manejador del evento especificado |
Eventos |
|
onReset | Se verán en la sección siguiente. |
onSubmit |
Ejemplo:
<html>
<head>
<title>Uso objeto form</title>
<script language=»JavaScript»>
<!–
function Validar(forma)
{
var direccion = new String(forma.elements[‘correo’].value);
if((direccion.indexOf(«@») != -1) && (direccion.indexOf(«.») != -1))
{
forma.submit();
}
else
{
window.alert(«La dirección ingresada es incorrecta.»);
forma.elements[‘correo’].focus();
}
};
//–>
</script>
</head>
<body bgcolor=»#FFFFFF» text=»#000000″>
<center><h2>Este formulario permite validar si el contenido del cuadro de texto <br>
es una dirección de correo electrónico válida.</h2>
</center><br><br>
<h3>Si es válida entonces se abre una página que dice dirección
correcta.</h3>
<form name=»formulario» method=»post» action=»direccion_correcta.html»>
<input type=»text» name=»correo»>
<input type=»button» name=»Submit» value=»Validar» onClick=»Validar(this.form);»>
</form>
</body>
</html>
Como podemos ver en este ejemplo, la dirección de correo es validada, o sea, se busca si existen los caracteres típicos de una dirección de correo, que son el «@» y el «.». Si no existen, entonces se envía un error y se selecciona nuevamente el cuadro de texto para que se edite.
Puedes ver el ejemplo en los ejercicios adjuntos con el nombre de obj_form.html.
El Objeto Select
Este objeto permite mostrar una lista de opciones dentro de un formulario. Se puede mostrar como una lista desplegable o como una lista plana.
Propiedades
lengthValor numérico que nos indica cuántas opciones tiene la lista nameEs una cadena que contiene el valor del parámetro NAMEoptionsArray que contiene cada una de las opciones de la lista, a su vez tiene las siguientes propiedades: Detalle de Opciones
defaultSelected: Valor booleano que nos indica si la opción está seleccionada por defecto
index: Valor numérico que nos da la posición de la opción dentro de la lista
length: Valor numérico que nos dice cuántas opciones tiene la lista
options: Cadena con todo el código HTML de la lista
selected: Valor booleano que nos dice si la opción está actualmente seleccionada o no
text: Cadena con el texto mostrado en la lista de una opción concreta
value: cadena que contiene el valor del parámetro VALUE de la opción concreta de la lista
selectedIndex Valor numérico que nos dice cuál de todas las opciones disponibles está actualmente seleccionada.
Métodos
onBlurComo se mencionó anteriormente, estos se verán en la próxima sección.onChangeonFocus
Ejemplo:
<html>
<head>
<title>Uso de objeto select</title>
<script language=»JavaScript»>
<!–
function Seleccion(opcion)
{
mensaje = «Usted ha seleccionado la opción: «;
mensaje += opcion.options[opcion.options.selectedIndex].text;
mensaje += «\r\n»;
mensaje += «Cuyo valor es: «;
mensaje += opcion.options[opcion.options.selectedIndex].value;
mensaje += «\r\n»;
mensaje += «de las » + opcion.options.length + » opciones disponibles»;
window.alert(mensaje);
}
//–>
</script>
</head>
<body bgcolor=»#FFFFFF» text=»#000000″>
<form name=»formulario» method=»post» action=»»>
<select name=»selectEjemplo» size=»5″ onChange=»Seleccion(this)»>
<option value=»10″>Opción 1</option>
<option value=»20″>Opción 2</option>
<option value=»30″>Opción 3</option>
<option value=»40″>Opción 4</option>
<option value=»N»>Opción N</option>
</select>
</form>
</body>
</html>
Como podemos apreciar, el objeto selectEjemplo posee 5 opciones que son analizadas en la función Selección. El objeto completo es pasado como parámetro a la función antes mencionada.
Puedes ver el ejemplo en los archivos adjuntos con el nombre de obj_select.html.
Los Eventos
Como ya se ha mencionado anteriormente, se han dejado los eventos para esta sección porque existen muchos que son en común para varios objetos y en general los eventos para uno u otro objeto constan en lo mismo. O sea, el hacer click en una imagen es lo mismo que hacer click en un link, ambos requieren que ocurra el mimo evento (el hacer click), por ello se explicarán en general y se indicará claramente qué objetos son los que los soportan.
Los eventos son acciones que realizan los usuarios, al dar click sobre una imagen, al hacer click sobre un link, al enviar un formulario, al seleccionar una opción en una lista, etc. Estos eventos se capturan con los manejadores de eventos que son mecanismos mediante los que se detectan las acciones y llaman automáticamente a la función que haya asociada para que se realice.
Veamos a continuación cada uno de los eventos, identificando su causa, etiquetas en que se asocia y el objeto que lo soporta.
Evento onLoad
Evento muy útil cuando se desea ejecutar alguna función o instrucción al abrirse la página.
Se produce cuando:
Se carga una página, al entrar.
Se usa en las etiquetas:
<BODY …>
<IMG …>
Se soporta en los objetos:
Image
window
Evento onUnload
Se produce cuando:
Se descarga una página. Al salir.
Se usa en las etiquetas:
<BODY …>
Se soporta en los objetos:
window
Evento onMouseOver
Muy usado cuando se crean menúes desplegables y otros.
Se produce cuando:
El puntero del mouse pasa por sobre algo. Justo en el momento en que entra.
Se usa en las etiquetas:
<A HREF…>
<AREA …>
Se soporta en los objetos:
Link
Evento onMouseOut
Se produce cuando:
El puntero del mouse sale de algo.
Se usa en las etiquetas:
<A HREF …>
<AREA …>
Se soporta en los objetos:
Link
Evento onClick
Sumamente utilizado para averiguar cuando el usuario ha seleccionado alguna opción, ya sea en cuadros de texto o para realizar alguna acción de validación.
Se produce cuando:
Se pulsa el botón del mouse sobre algún objeto.
Se usa en las etiquetas:
<AREA …>
<INPUT TYPE=» *.. * » …>
<A HREF …>
Se soporta en los objetos:
Button
document
Checkbox
Link
Radio
Reset
Submit
Evento onSubmit
Se produce cuando:
Se envía un formulario.
Se usa en las etiquetas:
<FORM …>
Se soporta en los objetos:
Form
Evento onBlur
Se produce cuando:
Se pierde el foco del cursor de texto.
Se usa en las etiquetas:
<INPUT TYPE=» *…* » ….>
<TEXTAREA …>
Se soporta en los objetos:
Button
Checkbox
FileUpload
Password
Radio
Reset
Select
Submit
Text
Textarea
window
Evento onFocus
Se produce cuando:
Un objeto recibe el foco del cursor.
Se usa en las etiquetas:
<INPUT TYPE=» *…* » ….>
<TEXTAREA …>
Se soporta en los objetos:
Button
Checkbox
FileUpload
Password
Radio
Reset
Select
Submit
Text
Textarea
window
Evento onChange
Se produce cuando:
Cambia el contenido de algún control de edición o se pierde el foco del cursor.
Se usa en las etiquetas:
<INPUT TYPE= » *…* » ….>
<TEXTAREA ….>
Se soporta en los objetos:
FileUpload
Select
Text
Textarea
Evento onAbort
Se produce cuando:
Se interrumpe la carga de una imagen.
Se usa en las etiquetas:
<IMG …>
Se soporta en los objetos:
Image
Evento onSelect
Se produce cuando:
Se selecciona un texto en un control de edición.
Se usa en las etiquetas:
<INPUT TYPE= «*…*» ….>
<TEXTAREA….>
Se soporta en los objetos:
Text
Textarea
Evento onError
Se produce cuando:
Se produce cuando algún error ocurre en la carga del documento o imagen.
Se usa en las etiquetas:
<BODY …>
<IMG …>
Se soporta en los objetos:
Image
window
Evento onKeyDown (sólo en IExplorer)
Se produce cuando:
Se presiona una tecla.
Se usa en las etiquetas:
<DOCUMENT…>
<A HREF…>
<TEXTAREA…>
Se soporta en los objetos:
document
Link
Textarea
Evento onKeyPress (sólo en IExplorer)
Se produce cuando:
Se mantiene presionada una tecla.
Se usa en las etiquetas:
<DOCUMENT…>
<A HREF…>
<TEXTAREA…>
Se soporta en los objetos:
document
Link
Textarea
Evento onKeyUp (sólo en IExplorer)
Se produce cuando:
Se libera o deja de presionar una tecla.
Se usa en las etiquetas:
<DOCUMENT…>
<A HREF…>
<TEXTAREA…>
Se soporta en los objetos:
document
Link
Textarea
Evento onMouseDown
Se produce cuando:
Se pulsa un botón del mouse.
Se usa en las etiquetas:
<A HREF….>
<AREA….>
Se soporta en los objetos:
Button
document
Link
Evento onMouseUp
Se produce cuando:
Se libera un botón del mouse.
Se usa en las etiquetas:
<A HREF….>
<AREA….>
Se soporta en los objetos:
Button
document
Link
Evento onReset
Se produce cuando:
Se presiona el botón de reset de un formulario.
Se usa en las etiquetas:
<FORM…>
Se soporta en los objetos:
Form
Evento onResize
Se produce cuando:
Cambia el tamaño de una ventana o marco.
Se usa en las etiquetas:
<BODY …>
Se soporta en los objetos:
window
Se presentan a continuación ejemplos de varios de los eventos mencionados anteriormente, pero puede ver los demás en los archivos anexos a este tutorial.
Ejemplo onKeyDown
<html>
<head>
<title>Uso Eventos</title>
</head>
<body bgcolor=»#FFFFFF» text=»#000000″
onKeyDown=»JavaScript:window.alert(‘Usted ha presionado una tecla.’);»>
Presione cualquier tecla.
</body>
</html>
Ejemplo onLoad
<html>
<head>
<title>Uso Eventos</title>
</head>
<body bgcolor=»#FFFFFF» text=»#000000″ onLoad=»JavaScript:window.alert(‘Este mensaje se muestra al cargar la página.’);»>
Ejemplo en el que se muestra un mensaje cuando se carga la página.
</body>
</html>
Ejemplo onUnload
<html>
<head>
<title>Uso Eventos</title>
</head>
<body bgcolor=»#FFFFFF» text=»#000000″ onUnload=»JavaScript:window.alert(‘Este mensaje se muestra al cerrar la página.’);»>
Ejemplo en el que se muestra un mensaje al cerrar la página.
</body>
</html>
Ejemplo onMouseOver
<html>
<head>
<title>Uso Eventos</title>
</head>
<body bgcolor=»#FFFFFF» text=»#000000″>
<a href=»#» onMouseOver=»JavaScript:window.alert(‘Usted paso el mouse por el link’);»>
Ejemplo en el que se muestra un mensaje al pasar el mouse por este link.
</a>
</body>
</html>
Ejemplo onMouseOut
<html>
<head>
<title>Uso Eventos</title>
</head>
<body bgcolor=»#FFFFFF» text=»#000000″>
<a href=»#» onMouseOut=»JavaScript:window.alert(‘Usted entró el mouse al link y salió del link’);»>
Ejemplo en el que se muestra un mensaje al entrar con el mouse al link y salir de él.
</a>
</body>
</html>
Ejemplo onClick
<html>
<head>
<title>Uso Eventos</title>
</head>
<body bgcolor=»#FFFFFF» text=»#000000″>
<a href=»#» onClick=»JavaScript:window.alert(‘Usted dio click en el link’);»>
Ejemplo en el que se muestra un mensaje al dar click en el link.
</a>
</body>
</html>
Ejemplo onSubmit
<html>
<head>
<title>Uso Eventos</title>
</head>
<body bgcolor=»#FFFFFF» text=»#000000″>
<form action=»#» name=»ejemplo» onSubmit=»JavaScript:window.alert(‘El formulario se envió’);»>
Presione en el botón para que se envíe el formulario
<input type=»submit» name=»submit» value=»Enviar»>
</form>
</body>
</html>
Hasta aquí los ejemplos. Ya estás en condiciones de practicar los demás.
Esta jerarquía te permitirá orientarte al momento que quieras accesar algún objeto dentro de una página.
navigator
-
window
-
document <BODY> … </BODY>
- anchor <A NAME=»…»> … </A>
- applet <APPLET> … </APPLET>
- area <MAP> … </MAP>
-
form <FORM ACTION=»…»> … </FORM>
- button <INPUT TYPE=»button»>
- checkbox <INPUT TYPE=»checkbox»>
- fileUpload <INPUT TYPE=»file»>
- hidden <INPUT TYPE=»hidden»>
- password <INPUT TYPE=»password»>
- radio <INPUT TYPE=»radio»>
- reset <INPUT TYPE=»reset»>
-
select <SELECT> … </SELECT>
- options <INPUT TYPE=»option»>
- options <INPUT TYPE=»option»>
- submit<INPUT TYPE=»SUBMIT»>
- text <INPUT TYPE=»text»>
- textarea <TEXTAREA> … </TEXTAREA>
- button <INPUT TYPE=»button»>
- image <IMG SRC=»…»>
- link <A HREF=»…»> … </A>
- plugin <EMBED SRC=»…»>
- anchor <A NAME=»…»> … </A>
- frame <FRAME>
- history
- location
Por ejemplo, si se desea acceder a las opciones de un objeto select, tendríamos que pasar por
document.forms[‘formulario’].elements[‘nombre_select’].options[numero_opcion].propiedad
Bastante largo, pero nos asegura que se llegará a lo que se busca.
Del conjunto de palabras que se encuentran en la siguiente tabla, ninguno debe ser usado como nombre de variable, contante o función, debido a que son propias del lenguaje para definir estructuras u otro objeto.
abstract
else
int
switch
boolean
extends
interface
synchronized
break
false
long
this
byte
final
native
throw
case
finally
new
throws
catch
float
null
transient
char
for
package
true
class
function
private
try
const
goto
protected
typeof
continue
if
public
var
default
implements
return
void
delete
import
short
while
do
in
static
with
double
instanceof
super
He creado esta sección porque muchas veces es necesario decir explícitamente algunas cosas para ayudar a aquellos que no saben programar bien. Así, se dan algunos consejos que permitirán ordenarse, encontrar errores fácilmente y realizar actualizaciones en forma rápida. 😀
-