El Lenguaje JavaScript

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	Se verán en la sección siguiente.

Ejemplo:

<html>

<head>

<title>Uso objeto form</title>

<!–

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>

<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>

</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>

</head>

<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:

Se soporta en los objetos:

Image
window

Evento onUnload

Se produce cuando:

Se descarga una página. Al salir.

Se usa en las etiquetas:

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:

Se soporta en los objetos:

Link

Evento onMouseOut

Se produce cuando:

El puntero del mouse sale de algo.

Se usa en las etiquetas:

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:

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:

Se soporta en los objetos:

Form

Evento onBlur

Se produce cuando:

Se pierde el foco del cursor de texto.

Se usa en las etiquetas:

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:

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:

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:

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:

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:

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:

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:

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