Eventos JavaScript PDF

Tecnologa de Programacin V Ciclo
JavaScript
FUNCIONES
Son una serie de instrucciones que englobamos dentro de un mismo proceso,
este proceso se podr luego ejecutar desde cualquier otro sitio con slo llamarlo. Por
ejemplo, en una pgina web puede haber una funcin para cambiar el color del fondo y
desde cualquier punto de la pgina podramos llamarla para que nos cambie el color
cuando lo deseemos. Podemos decir tambin que una funcin es un mdulo de un
programa separado del cuerpo principal, que realiza una tarea especfica y que puede
regresar un valor a la parte principal del programa u otra funcion o procedimiento que
la invoque.
Las funciones se utilizan constantemente, no slo las que escribes t, sino

tambin las que ya estn definidas en el sistema, pues todos los lenguajes de
programacin suelen tener muchas funciones para realizar procesos habituales, como
por ejemplo obtener la hora, imprimir un mensaje en la pantalla o convertir variables de
un tipo a otro. Ya hemos visto alguna funcin en nuestros ejemplos de la sesin N 02.
Por ejemplo, cuando hacamos un document.write() en realidad estbamos llamando a
la funcin write() asociada al documento de la pgina, que escribe un texto en la
pgina.
El desarrollo web siempre tiene dos interacciones: la que se produce en el lado

del servidor y la que se produce en el lado del cliente, esta segunda cada vez tiene
ms relevancia para conseguir una mejor experiencia del usuario y JavaScript es el
responsable de esto. JavaScript es una de esas tecnologas que se pens para
abordar pequeos problemas, pero que por cuestiones de compatibilidad y aceleracin
tecnolgica, se ha convertido en una tecnologa verstil a la vez necesaria para poder
afrontar las exigencias de la actualidad.
Sintaxis:
Caractersticas importantes en la sintaxis de una funcin:

a) Una declaracin de funcin siempre empieza con la palabra clave function.
b) El siguiente punto es el nombre de la funcin. El nombre de la funcin es
importante, porque es lo que debes recordar para utilizarla y reutilizar su
cdigo. Debe ser una descripcin precisa de lo que la funcin hace.
c) Inmediatamente despus del nombre de la funcin viene un par de parntesis.
Dentro de ellos viene la lista de argumentos de la funcin, la cual te permite
hacer la funcin ms genrica y reutilizable; puedes aplicarla a ms situaciones
ms fcilmente.
d) Finalmente viene un par de llaves que contienen cdigo: esto significa un
bloque de cdigo en JavaScript. Todo lo que est en el bloque ser ejecutado
cuando la funcin sea llamada, en orden, en la misma forma que cualquier otra
porcin de cdigo en JavaScript.
Ing. Ricardo More Reao

La forma general de una funcin es:
function Nombredelafuncin(parmetros)
{
cuerpo de instrucciones;
return [dato, var, expresin];
}
Utilizando una funcin:

Luego de definir la funcin, para llamarla desde alguna parte del cdigo se
escribe:
Nombredelafuncin();
Ejemplo 1:
Esta es una funcin sin parmetros:
<html>
<head>
<title>Funciones con javascript </title>
</head>
<body>
<script type="text/javascript">
function bienvenida(){
document.write("<H2>Hola, este es un ejemplo de funcin</H2>");
}
//llamando a la funcin
bienvenida();
</script>
<br>
FUNCIONES CON JAVASCRIPT 2013
</body>
</html>
Ejemplo 2:
Esta es una funcin sin parmetros; pero observar que la funcin est dentro del
encabezado y se le ha llamado desde el cuerpo del documento(body):
<html>
<head>
function bienvenida(){
document.write("<H1>Hola, este es un ejemplo de funcin</H1>");
}
</script>
</head>
<body>
//llamando a la funcion
bienvenida();
</script>
<br>


</body>
</html>
Ahora Ud. pruebe este ejemplo escribiendo slo la funcin en un archivo (.js) y luego
enlazarlo desde un archivo (.html)
Ejemplo 3:
Ejemplo de una funcin con parmetros(argumentos):
<html>
<head>
</head>
<body>
function suma(a,b){
return a + b;
};
var res;
//llamando a la funcin suma
res=suma(6,25);
document.write("La suma es: "+res);
</script>
<br>
</body>
</html>
Ejemplo 4:
Ahora el ejemplo anterior; pero ingresando los valores por teclado y escribiendo la
funcin en un archivo (.js) y enlazarlo desde un archivo (.html)
Escribir y guardar como: suma.js
function suma(a,b)
{
return a+b;
}
Escribir y guardar como: llamarsuma.html
<html>
<head>
<title>Funciones con parmetros en javascript </title>
<script type="text/javascript" src="suma.js">
</script>
</head>
<body>
var n1,n2;
n1=parseFloat(prompt("Ingresar primer nmero: "));

n2=parseFloat(prompt("Ingresar segundo nmero: "));

var res;
res=suma(n1,n2);
alert("La suma es: "+res);
</script>
<br>
La funcin est en el archivo --------> <b>suma.js</b>
</body>
</html>
EVENTOS EN JAVASCRIPT
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 se puede definir qu puede ocurrir cuando se produzcan.
El manejo de eventos permite tener pginas interactivas, con ellos podemos responder
a las acciones de los usuarios.
En JavaScript, la interaccin con el usuario se consigue mediante la captura de

los eventos que ste produce. Los eventos se capturan mediante los manejadores de
eventos. En este tipo de programacin, los scripts se dedican a esperar a que el
usuario "haga algo" (que pulse una tecla, que mueva el ratn, que cierre la ventana del
navegador), a continuacin, el script responde a la accin del usuario normalmente
procesando esa informacin y generando un resultado.
JavaScript permite asignar una funcin a cada uno de los eventos. De esta
forma, cuando se produce cualquier evento, JavaScript ejecuta su funcin asociada.
Este tipo de funciones se denominan "event handlers" en ingls y suelen traducirse por
"manejadores de eventos" como se menciona en el prrafo anterior.
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. 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.
La siguiente tabla resume los eventos ms importantes definidos por

JavaScript:

Manejadores de eventos
Las funciones o cdigo JavaScript que se definen para cada evento se

denominan "manejador de eventos" o event handlers y como JavaScript es un
lenguaje muy flexible, existen varias formas diferentes de indicar los manejadores:
a) Manejadores como atributos de los elementos HTML.
b) Manejadores como funciones JavaScript externas.
c) Manejadores "semnticos".
a) Manejadores de eventos como atributos HTML

Se trata del mtodo ms sencillo que se debe ejecutar cuando se produzca un
evento. En este caso, el cdigo se incluye en un atributo del propio elemento HTML.
Se quiere mostrar un mensaje cuando el usuario pinche con el ratn sobre un

botn

<input type="button" value="Pulsar aqu y observa lo que sucede"

onclick="alert('Ha pulsado el botn');" />
Ahora si hacemos doble clic(Estamos utilizando ondblclick en lugar de onclic)

ondblclick="alert('Ha pulsado el botn');" >
b) 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 HTML 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.
<div id="ejemplo" style="width:150px; height:60px; border:thin solid sil-

ver">
</div>
Si no se utiliza la variable this, el cdigo necesario para modificar el color de los

bordes, sera el siguiente:

ver"
onmouseover="document.getElementById('ejemplo').style.borderColor='b
lack';"
onmouseout="document.getElementById('ejemplo').style.borderColor='sil
ver';">
</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 HTML que ha provocado el evento. As, el ejemplo anterior
se puede reescribir de la siguiente manera:

ver"
onmouseover="this.style.borderColor='black';"
onmouseout="this.style.borderColor='silver';">
</div>
El cdigo anterior es mucho ms compacto, ms fcil de leer y de escribir y si-

gue funcionando correctamente aunque se modifique el valor del atributo id del <div>.
c) Manejadores de eventos como funciones externas

Si se realizan aplicaciones complejas, como por ejemplo la validacin de un for-
mulario, es aconsejable agrupar todo el cdigo JavaScript en una funcin externa y lla-
mar a esta funcin desde el elemento XHTML.
Ejemplo:


onclick="alert('Ha pulsado el botn');" />
Ahora utilizando funciones.
Ejemplo 5:
Definir la funcin mostrarMensaje y luego se le incluye en el atributo del

elemento HTML para indicar que es la funcin que se ejecuta cuando se produce el
evento onclick. Podemos notar como se incluye:
Guardar lo siguiente como mensaje.html
<script type="text/javascript" >

function mostrarMensaje() {
alert('Ha pulsado el botn');
}
</script>

onclick="mostrarMensaje()" />
Tambin tenemos los manejadores de eventos semnticos, que es una tcnica

evolucin del mtodo de las funciones externas.
Ejemplo 6:
En el siguiente cdigo(eventos del ratn o mouse de Javascript) se utiliza el evento
onclick para mostrar un cuadro de dialogo con un mensaje de informacin y luego
con una confirmacin, antes de enviar al usuario al destino solicitado.
El siguiente cdigo gurdalo como: mensaje_confirmacin.html
<a href="http://uladech.edu.pe"
onclick="alert('Este link te dirige a la pgina de ULADECH Catlica')">
ULADECH</a>
<br><br><br>
<a href="#"
onclick="javascript:if(confirm('Este link te dirige a la pgina de ULADECH
Catlica, pide confirmacion'))
{parent.location='http://uladech.edu.pe'}else{''};"> ULADECH </a>
Ejemplo 7:
En el siguiente ejemplo vamos a usar los eventos onfocus y onblur de Javascript:

El siguiente cdigo gurdelo con el nombre que crea conveniente:
<input type="text" value=""

onfocus="value='Se tiene el focus';style.backgroundColor='green';"
onblur="value='Se pierde el focus';style.backgroundColor='red';" />

Ejemplo 8:
En el siguiente ejemplo vamos a usar el evento onload de Javascript:

<body onload="saludo()">
function saludo()
{
alert('Bienvenido a la pgina de Javascript')
}
</script>
</body>
Ejemplo 9:
En el siguiente ejemplo vamos a usar el evento onselect de Javascript:

<input type="text" value="Ejemplo utilizando onselect"

onselect="alert('Se ha seleccionado texto')"/>
Ejemplo 10:
En el siguiente ejemplo vamos a usar el evento onchange de Javascript:

<input type="text" value="Utilizando onchange"

onchange="style.backgroundColor='blue';" />
Ejemplo 11:
En el siguiente cdigo se maneja el evento desde dentro de un bloque JavaScript, esto

se conoce generalmente como JavaScript discreto, se nota la limpieza del HTML:
<a id="enlace" href="http://www.yahoo.com/">EVENTOS</a>
document.getElementById("enlace").onclick = function ejemplo() {
alert("Enlace a una pgina web");
}
</script>

Ejemplo 12:
Con este cdigo se muestra un mensaje cuando se modifica el tamao de la ventana

del navegador:
<html>
<head>
<title>Ejemplo utilizando onResize</title>
</head>
<body onResize="alert('Se ha modificado el tamaño de la
ventana');">
</body>
</html>
Ejemplo 13:
Con este cdigo se produce el evento al pulsar una tecla:
<html>
<head>
<title> Ejemplo utilizando onKeyPress</title>
</head>
<body>
<center>
<input type="text" size=35 name="texto"
value="Puede pulsar cualquier tecla" onKeyPress = " alert('Ha pulsado
una tecla!');">
</center>
</body>
</html>
Ejemplo 14:
A continuacin un ejemplo sencillo de la aplicacin de un evento en

formularios(Validacin de campos de texto no vaco):
<html>
<head>
<title>Validacin de Formularios con Javascript</title>
function validar(){
if(formulario.nombre.value=='')
{
alert('Escribir su nombre');
}
if(formulario.correo.value=='')
{
alert('Escribir correo electrnico ');
}
if(formulario.texto.value=='')
{
alert('Escribir un texto');

}
}
</script>
</head>
<body>
<h1>Validar un formulario con javascript</h1>
<form name="formulario">
Nombre:<input type="text" name="nombre" /><br>
Correo:<input type="text" name="correo" /><br>
<textarea name="texto" cols="50" rows="5"></textarea><br>
<input type="submit" value="Enviar" onClick="validar()">
</form>
</body>
</html>
Ejemplo 15:
En el primer cuadro de texto slo permite escribir nmeros, en el segundo slo

caracteres(letra del alfabeto).
En el cuerpo del documento web se escribe la funcin javascript permitir que luego
es llamada a travs del evento onkeypress, como se muestra a continuacin:
Guardar como validar.html
<html>
<head><title>Eventos JavaScript</title></head>
<body>
function permitir(accion, aceptar) {
// Caracteres permitidos en cada variable
var numero = "0123456789";
var caracteres =
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var teclas_especiales = [8, 37, 39, 46]; // 8 = BackSpace, 46 = Supr, 37 = flecha
izq, 39 = flecha der
// Segn el caso sea, se le pasa al parmetro de la funcin:
switch(aceptar) {
case 'nume':
aceptar = numero;
break;
case 'carac':
aceptar = caracteres;
break;
}
// Se obtiene la tecla pulsada

var evento = accion || window.event;
var codigoCar = evento.charCode || evento.keyCode;
var caracter = String.fromCharCode(codigoCar);

// Se comprueba si la tecla pulsada es una de las teclas especiales

var tecla_especial = false;
for(var i in teclas_especiales) {
if(codigoCar == teclas_especiales[i]) {
tecla_especial = true;
break;
}
// Se comprueba si la tecla pulsada se encuentra entre los caracteres

permitidos o si es una tecla especial
return aceptar.indexOf(caracter) != -1 || tecla_especial;
}
</script>
<br><br>
<form>
<center>
<table border="1" bgcolor=" #99FF00" width="500" height="200">
<tr>
<td>
<table align="center">
<tr>
<td>Ingresar Números</td>
<td><input type="text" id="texto" onkeypress="return permitir(event, 'nume')"
/></td>
</tr>
<tr>
<td>Ingresar caracteres</td>
<td><input type="text" id="texto" onkeypress="return permitir(event, 'carac')"
/></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</form>
</body>
</html>
En el navegador puede escribir y observar lo propuesto:

Ejemplo 16:
Escribir 2 documentos web:

pagina_1.html:
Se escribe un mensaje javascript y adems hace referencia a una segunda
pgina, cuyo nombre es el siguiente documento(pagina_2.html).
pagina_2.html:
Esta pgina tiene un botn cuyo evento(onclick) permite regresar al
documento anterior(pagina_1.html).Se ha utilizado la instruccin: history.go(-1).
La pgina_1.html

La pgina_2.html:
En el navegador:
La siguiente pgina:

Eventos JavaScript PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Eventos JavaScript PDF

Cargado por

Copyright:

Formatos disponibles

Tecnologa de Programacin V Ciclo

Las funciones se utilizan constantemente, no slo las que escribes t, sino

El desarrollo web siempre tiene dos interacciones: la que se produce en el lado

Caractersticas importantes en la sintaxis de una funcin:

Ing. Ricardo More Reao

La forma general de una funcin es:

Utilizando una funcin:

Ing. Ricardo More Reao

FUNCIONES CON JAVASCRIPT 2013

Escribir y guardar como: suma.js

Escribir y guardar como: llamarsuma.html

Ing. Ricardo More Reao

n2=parseFloat(prompt("Ingresar segundo nmero: "));

Los eventos son la manera que tenemos en Javascript de controlar las

En JavaScript, la interaccin con el usuario se consigue mediante la captura de

Los eventos ms utilizados en las aplicaciones web tradicionales son onload

La siguiente tabla resume los eventos ms importantes definidos por

Ing. Ricardo More Reao

Las funciones o cdigo JavaScript que se definen para cada evento se

a) Manejadores de eventos como atributos HTML

Se quiere mostrar un mensaje cuando el usuario pinche con el ratn sobre un

Ing. Ricardo More Reao

<input type="button" value="Pulsar aqu y observa lo que sucede"

Ahora si hacemos doble clic(Estamos utilizando ondblclick en lugar de onclic)

<input type="button" value="Pulsar aqu y observa lo que sucede"

b) Manejadores de eventos y variable this

<div id="ejemplo" style="width:150px; height:60px; border:thin solid sil-

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

<div id="ejemplo" style="width:150px; height:60px; border:thin solid sil-

El cdigo anterior es demasiado largo y demasiado propenso a cometer errores.

<div id="ejemplo" style="width:150px; height:60px; border:thin solid sil-

El cdigo anterior es mucho ms compacto, ms fcil de leer y de escribir y si-

c) Manejadores de eventos como funciones externas

Ing. Ricardo More Reao

<input type="button" value="Pulsar aqu y observa lo que sucede"

Ahora utilizando funciones.

Definir la funcin mostrarMensaje y luego se le incluye en el atributo del

Guardar lo siguiente como mensaje.html

<script type="text/javascript" >

<input type="button" value="Pulsar aqu y observa lo que sucede"

Tambin tenemos los manejadores de eventos semnticos, que es una tcnica

En el siguiente ejemplo vamos a usar los eventos onfocus y onblur de Javascript:

<input type="text" value=""

Ing. Ricardo More Reao

En el siguiente ejemplo vamos a usar el evento onload de Javascript:

En el siguiente ejemplo vamos a usar el evento onselect de Javascript:

<input type="text" value="Ejemplo utilizando onselect"

En el siguiente ejemplo vamos a usar el evento onchange de Javascript:

<input type="text" value="Utilizando onchange"

En el siguiente cdigo se maneja el evento desde dentro de un bloque JavaScript, esto

<a id="enlace" href="http://www.yahoo.com/">EVENTOS</a>

Ing. Ricardo More Reao

Con este cdigo se muestra un mensaje cuando se modifica el tamao de la ventana

Con este cdigo se produce el evento al pulsar una tecla:

A continuacin un ejemplo sencillo de la aplicacin de un evento en

Ing. Ricardo More Reao

En el primer cuadro de texto slo permite escribir nmeros, en el segundo slo

// Se obtiene la tecla pulsada

Ing. Ricardo More Reao

// Se comprueba si la tecla pulsada es una de las teclas especiales

// Se comprueba si la tecla pulsada se encuentra entre los caracteres

En el navegador puede escribir y observar lo propuesto:

Ing. Ricardo More Reao