Scripts Dinamicos

SCRIPTS DINAMICOS
Se puede dar un carácter dinámico a las páginas asociando scripts a

elementos de HTML y haciendo que se ejecuten cuando se produzca un evento
asociado a ellos.
Un ejemplo de evento puede ser pulsar el ratón sobre el elemento (evento

OnClick) o sobrevolar el elemento con el ratón (evento OnMouseOver).
Eventos
Los principales eventos reconocidos por los navegadores son:
• OnAbort: se activa cuando el usuario aborta la carga de una imagen.

• OnBlur: se activa cuando el elemento de entrada del formulario al que
está asociado pierde el foco, es decir, cuando el usuario selecciona otro
elemento de entrada o un texto situado fuera del elemento.
• OnChange: se activa cuando un elemento de entrada de un formulario
pierde el foco y ha sido modificado.
• OnClick: se activa cuando se selecciona un botón de un formulario o un
enlace de hipertexto.
• OnError: se activa cuando se produce un error en un programa
JavaScript.
• OnFocus: se activa cuando se selecciona un elemento de entrada de un
formulario pulsando en él con el botón del ratón o colocándose en él con
la tecla de tabulación.
• OnLoad: se activa cuando se carga un documento HTML o una imagen.
• OnMouseDown: se activa cuando se pulsa el botón del ratón dentro de
un elemento. Se activa antes que el evento OnClick.
• OnMouseMove: se activa cuando el cursor del ratón se mueve dentro
de un elemento.
• OnMouseOut: se activa cuando el cursor del ratón abandona un
elemento.
• OnMouseOver: se activa cuando el cursor del ratón pasa por encima de
un elemento.
• OnMouseUp: se activa cuando se deja de pulsar el botón del ratón
dentro de un elemento. Se activa después que el evento OnClick.
• OnReset: se activa cuando se pulsa el botón de borrar de un formulario.
• OnSelect: se activa cuando se selecciona un texto dentro de un
elemento TEXTAREA o INPUT (TYPE="text" o "password").
• OnSubmit: se activa cuando se envía un formulario.
• OnUnload: se activa cuando se descarga el documento actual, es decir,
cuando el usuario accede a otro documento.
La tabla siguiente indica los elementos de HTML que poseen eventos
asociados y cuáles son aplicables a cada uno de ellos. Además, los eventos de
ratón OnMouseOver, OnMouseOut, OnMouseDown, OnMouseUp y
OnMouseMove son aplicables a todos los elementos de la página.
Elemento Eventos asociados

OnMouseOv OnMouseOu
A OnClick
er t
OnMouseOv
AREA OnMouseOut
er
IMG OnAbort OnLoad
INPUT TYPE="button" OnClick
INPUT
OnClick
TYPE="checkbox"
INPUT TYPE="radio" OnClick
INPUT TYPE="submit" OnClick
INPUT TYPE="reset" OnClick
OnUnloa
BODY OnBlur OnFocus OnLoad
d
OnUnloa
FRAMESET OnBlur OnFocus OnLoad
d
SELECT OnChange
TEXTAREA OnBlur OnFocus OnChange OnSelect
INPUT TYPE="text" OnBlur OnFocus OnChange OnSelect
INPUT
OnBlur OnFocus OnChange OnSelect
TYPE="password"
FORM OnSubmit OnReset
Activación de los eventos
Para asociar un evento a un elemento HTML se añade al elemento un atributo

con el nombre del evento. Dicho atributo tendrá como valor la llamada al script
que se desea ejecutar cuando se produzca el evento, y que habrá sido definido
con anterioridad mediante el elemento SCRIPT (normalmente dentro del
elemento HEAD).
Como ejemplo se muestra el uso del evento OnLoad para ofrecer un mensaje
de bienvenida a los visitantes de la página. Se utiliza la función predefinida
alert, que muestra una ventana con un mensaje de aviso.
<BODY ONLOAD="alert('Bienvenido a mi página');">
Ejemplos
Ejemplo 1: evento OnClick
Este evento se activa cuando se hace click con el ratón sobre un botón de un
formulario o un enlace de hipertexto.
<INPUT TYPE="button" NAME="boton" VALUE="botón"

ONCLICK="alert('¡Botón pulsado!');">
Ejemplo 2: evento OnMouseOver
Este evento se activa cuando el ratón pasa por encima de un enlace de

hipertexto.
Enlace sensible
<A ONMOUSEOVER="alert('Has pasado por encima del enlace');"
HREF="docpru.html">Enlace sensible</A>
Ejemplo 3: evento OnSubmit
Este evento es muy utilizado para validar los datos introducidos desde un
formulario.
Enviar formulario
DUI:
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<FORM NAME="ejemplo3" ONSUBMIT="return(compruebaFormulario())">

DUI: <INPUT TYPE="text" NAME="dui" SIZE="20">
<INPUT TYPE="submit" VALUE="Enviar formulario">
</FORM>
Ejemplo 4: botones que actualizan un campo de texto
El siguiente script permite modificar el valor que aparece en un campo de texto

de un formulario mediante la pulsación de unos botones. Existen dos botones
con los rótulos "aumentar" y "disminuir" respectivamente. El primero de ellos
aumenta en 10 unidades el número que aparece en la ventana de texto,
mientras que el segundo disminuye en 10 unidades dicho valor.
Valor actual:
<SCRIPT>
<SCRIPT>

</SCRIPT>
<FORM NAME="ejemplo4">
<P>Valor actual:
<INPUT TYPE="text" NAME="precio" VALUE="0" SIZE=10>
<INPUT TYPE="button" NAME="aumentar" VALUE="Aumentar"
ONCLICK="suma(1)">
<INPUT TYPE="button" NAME="disminuir" VALUE="Disminuir"
ONCLICK="suma(2)"></P>
</FORM>
Ejemplo 5: botones de radio que actualiza un campo de texto
Este ejemplo es similar al anterior, solo que en esta ocasión el campo de texto
cambia de valor según se seleccione uno u otro botón de radio.
Pregunta
Respuesta 1
Respuesta 2
Respuesta 3
Respuesta 4
Respuesta 5
Resultado:
<SCRIPT>

</SCRIPT>
<P>Pregunta<BR>
<BLOCKQUOTE>
<INPUT TYPE="radio" NAME="pregunta"
ONCLICK="respuesta('incorrecto')">Respuesta 1<BR>
ONCLICK="respuesta('correcto')">Respuesta 3<BR>
Resultado: <INPUT TYPE="text" NAME="resultado" SIZE=10></P>
</BLOCKQUOTE>
</FORM>
Ejemplo 6: actualización de imágenes
Las imágenes de una página pueden modificarse de forma dinámica. El

siguiente ejemplo muestra un script que permite cambiar la imagen que
aparece en la página simplemente con pulsar un botón.
<SCRIPT>

</SCRIPT>
<IMG NAME="imagen" SRC="imagenes/casa01.gif">

<INPUT TYPE="button" NAME="boton" VALUE="Casa 1"
ONCLICK="carga_imagen('imagenes/casa01.gif');">
</FORM>

Scripts Dinamicos

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Scripts Dinamicos

Transféré par

Droits d'auteur :

Formats disponibles

SCRIPTS DINAMICOS

Se puede dar un carácter dinámico a las páginas asociando scripts a

Un ejemplo de evento puede ser pulsar el ratón sobre el elemento (evento

Los principales eventos reconocidos por los navegadores son:

• OnAbort: se activa cuando el usuario aborta la carga de una imagen.

Elemento Eventos asociados

Activación de los eventos

Para asociar un evento a un elemento HTML se añade al elemento un atributo

<BODY ONLOAD="alert('Bienvenido a mi página');">

Ejemplo 1: evento OnClick

<INPUT TYPE="button" NAME="boton" VALUE="botón"

Ejemplo 2: evento OnMouseOver

Este evento se activa cuando el ratón pasa por encima de un enlace de

Ejemplo 3: evento OnSubmit

<FORM NAME="ejemplo3" ONSUBMIT="return(compruebaFormulario())">

Ejemplo 4: botones que actualizan un campo de texto

El siguiente script permite modificar el valor que aparece en un campo de texto

Ejemplo 5: botones de radio que actualiza un campo de texto

Ejemplo 6: actualización de imágenes

Las imágenes de una página pueden modificarse de forma dinámica. El

<IMG NAME="imagen" SRC="imagenes/casa01.gif">

Vous aimerez peut-être aussi