Juan Garcés

Personal Blog

El Lenguaje JavaScript

julio 17th, 2013

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&oacute;n de correo electr&oacute;nico v&aacute;lida.</h2>

</center><br><br>

<h3>Si es v&aacute;lida entonces se abre una p&aacute;gina que dice direcci&oacute;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&oacute;n 1</option>
<option value=»20″>Opci&oacute;n 2</option>
<option value=»30″>Opci&oacute;n 3</option>
<option value=»40″>Opci&oacute;n 4</option>
<option value=»N»>Opci&oacute;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»>
        • submit<INPUT TYPE=»SUBMIT»>
        • text <INPUT TYPE=»text»>
        • textarea <TEXTAREA> … </TEXTAREA>
      • image <IMG SRC=»…»>
      • link <A HREF=»…»> … </A>
      • plugin <EMBED SRC=»…»>
    • 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. 😀

     

Juan Garcés

Personal Blog