Eventos JavaScript

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
V Ciclo
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> <title>Funciones con javascript </title> <script type="text/javascript"> function bienvenida(){ document.write("<H1>Hola, este es un ejemplo de funcin</H1>"); } </script> </head> <body> <script type="text/javascript"> //llamando a la funcion bienvenida(); </script> <br>
V Ciclo
FUNCIONES CON JAVASCRIPT 2013 </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> <title>Funciones con javascript </title> </head> <body> <script type="text/javascript"> 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> FUNCIONES CON JAVASCRIPT 2013 </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> <script type="text/javascript"> var n1,n2; n1=parseFloat(prompt("Ingresar primer nmero: "));
V Ciclo
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:
V Ciclo
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
V Ciclo
<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) <input type="button" value="Pulsar aqu y observa lo que sucede" 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 silver"> Manejadores de eventos </div> Si no se utiliza la variable this, el cdigo necesario para modificar el color de los bordes, sera el siguiente: <div id="ejemplo" style="width:150px; height:60px; border:thin solid silver" onmouseover="document.getElementById('ejemplo').style.borderColor='b lack';" onmouseout="document.getElementById('ejemplo').style.borderColor='sil ver';"> Manejadores de eventos </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: <div id="ejemplo" style="width:150px; height:60px; border:thin solid silver" onmouseover="this.style.borderColor='black';" onmouseout="this.style.borderColor='silver';"> Manejadores de eventos </div> El cdigo anterior es mucho ms compacto, ms fcil de leer y de escribir y sigue 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 formulario, es aconsejable agrupar todo el cdigo JavaScript en una funcin externa y llamar a esta funcin desde el elemento XHTML. Ejemplo:
V Ciclo
<input type="button" value="Pulsar aqu y observa lo que sucede" 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> <input type="button" value="Pulsar aqu y observa lo que sucede" 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';" />
V Ciclo
Ejemplo 8: En el siguiente ejemplo vamos a usar el evento onload de Javascript: El siguiente cdigo gurdelo con el nombre que crea conveniente: <body onload="saludo()"> <script type="text/javascript"> 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: El siguiente cdigo gurdelo con el nombre que crea conveniente: <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: El siguiente cdigo gurdelo con el nombre que crea conveniente: <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> <script type="text/javascript"> document.getElementById("enlace").onclick = function ejemplo() { alert("Enlace a una pgina web"); } </script>
V Ciclo
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 formularios(Validacin de campos de texto no vaco): de un evento en
<html> <head> <title>Validacin de Formularios con Javascript</title> <script type="text/javascript"> 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');
V Ciclo
} } </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> <script type="text/javascript"> 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);
V Ciclo
// 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:
V Ciclo
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
V Ciclo
La pgina_2.html:
En el navegador:
La siguiente pgina:

Eventos JavaScript

Cargado por

Copyright:

Formatos disponibles

Eventos JavaScript

Cargado por

Información del documento

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

Cargado por

Copyright:

Formatos disponibles

Tecnologa de Programacin

Ing. Ricardo More Reao

Ing. Ricardo More Reao

Ing. Ricardo More Reao

Ing. Ricardo More Reao

Ing. Ricardo More Reao

Ing. Ricardo More Reao

Ing. Ricardo More Reao

Ing. Ricardo More Reao

Ing. Ricardo More Reao

Ing. Ricardo More Reao

En el navegador puede escribir y observar lo propuesto:

Ing. Ricardo More Reao

Ing. Ricardo More Reao

Ing. Ricardo More Reao

También podría gustarte