EVENTOS PRIMERA PARTE

Transcripción

1 EVENTOS PRIMERA PARTE JavaScript es un lenguaje "orientado a eventos", esto quiere decir que está preparado para responder a acciones del navegante, cosas que ocurran en el navegador, etc. (a eso es a lo que se llama "eventos"). Eventos pueden ser, por ejemplo, un click de ratón en un lugar determinado, que se abra una ventana, etc. HTML tiene una serie de parámetros que se pueden incluir en las etiquetas para indicar cómo debe responder a los eventos. El primero de esos parámetros es el que le indica qué debe hacer cuando una página está cargada. se usa en el tag BODY y su nombre es ONLOAD. Se usa del siguiente modo: <body onload="acción"> Donde "acción" es una llamada a una función de script (cuya sintaxis depende del lenguaje que usemos) que estará contenida en una etiqueta SCRIPT. Complicado? Veámoslo con otro ejemplo: <html> <head> <title>ejemplo de javascript</title> <script language="javascript" type="text/javascript"> function alerta() { alert ('hola mundo') </head> <body onload="alerta()"> <h1>ejemplo</h1> <p>veamos que pasa con este javascript.<p> </body> </html> Como verás, el script ahora se ejecuta cuando la página se ha cargado totalmente, tal como le hemos dicho con el evento ONLOAD. 1

2 Pero existen muchos eventos admitidos por HTML que podemos usar en casi cualquier etiqueta: ONCLICK: Se activa este evento al hacer click con el ratón sobre el objeto al que asignemos este evento (un click es apretar el botón y soltarlo). ONDBLCLICK: Este es igual que el anterior, pero al hacer doble click. ONMOUSEDOWN: Casi igual que el evento ONCLICK, este se activa al apretar el botón (no hay que soltarlo). ONMOUSEUP: Justo el complementario del anterior, este evento se activa al soltar el botón del ratón. ONMOUSEOVER: Se activa al situar el puntero sobre el elemento. ONMOUSEMOVE: Muy parecido al anterior, este se activa a mover el puntero sobre el elemento. ONMOUSEOUT: El complementario de ONMOUSEOVER, se activa al quitar el puntero de un elemento. ONKEYPRESS: Este se activa cuando, estando un elemento seleccionado (por ejemplo, con el puntero del ratón sobre él), pulsamos una tecla (apretar y soltar). ONKEYDOWN: Igual que el anterior, pero solo al apretar la tecla. ONKEYUP: Como el anterior, pero solo al soltar la tecla. Todos estos eventos son, en principio, aplicables a casi todos los elementos de tus páginas web, ya sean párrafos, imágenes, negritas, etc. Lo malo es que no todos los navegadores los reconocen en todos ellos. El único al que suelen reconocer estos parámetros es a <A> <html> <head> <title>ejemplo de javascript</title> <script language="javascript" type="text/javascript"> function alerta(texto) { alert (texto) </head> <body> <h1>ejemplo</h1> <p>veamos que pasa con este javascript.<p> <p><a href="#" onmouseover="alerta('onmouseover')">onmouseover</a></p> <p><a href="#" onmouseout="alerta('onmouseout')">onmouseout</a></p> <p><a href="#" onclick="alerta('onclick')">onclick</a></p> </body> </html> 2

3 Cómo usar los eventos del ratón o mouse de Javascript? Los siguientes eventos del ratón reaccionan a diferentes acciones del usuario, pueden ser insertados en cualquier elemento HTML de bloque. Onclick : Al dar un clic con el botón izquierdo del ratón sobre un elemento ondblclick Dar doble clic sobre un elemento onmousedown Cualquier botón del ratón es presionado sobre un elemento onmouseup Se libera un botón del ratón sobre un elemento onmouseover Solo situar el ratón sobre un elemento onmousemove Mover el ratón onmouseout Es retirado el ratón de un elemento Los eventos de ratón, es posible insertarlos en cualquier elemento de bloque HTML. <a href="#" onclick=" MiFuncion ">VÍNCULO</a> <div onclick=" MiFuncion ">TEXTO</div> <h2 onclick=" MiFuncion ">Encabezado</h2> <pre onclick=" MiFuncion ">Código</pre> <script language="javascript" type="text/javascript"> function MiFuncion() { <a href="#" onclick="alert('clic');return false">onclick</a> <a href="#" onmousedown="alert('presionaste aquí ')">onmousedown</a> Cancelar la acción del navegador predeterminada Un navegador tiene su propio comportamiento "por defecto" para ciertos eventos. La mayoría de ellos se puede cancelar. Por ejemplo: un clic en un enlace se redirige a la página que apunta un clic derecho del ratón botón muestra el menú contextual El envió de formularios con el botón submit Hay dos maneras de cancelar la acción predeterminada: utilizar preventdefault () / return False desde el controlador. 3

4 Vamos a ver cómo funciona return false <a href=" onclick="mifuncion()">onclick</a> Al hacer clic en el enlace se ejecuta la funcion llamada Mifuncion() y nos redirige a <a href=" onclick="mifuncion(); return false;"">onclick</a> Al hacer clic en el enlace se ejecuta la funcion llamada Mifuncion() y no nos redirige a Veamos un ejemplo function Mifuncion() { alert("hola"); function test() { var noerror=false; if(noerror==true) { alert("no hay un error,redirige a página return true; else { alert("hay un error y no redirige a página ); return false;  <a href="page1.html" onclick="mifuncion(); return false;">no redirige </a> <br/>  <a href="page1.html" onclick="mifuncion()">redirige </a> <br/> <a href=" onclick=" return test()"> Pulsame </a> <br/> 4

5 Confirm: Cuadro de confirmación En los vínculos se usa a menudo el evento onclick para mostrar un cuadro de dialogo con un mensaje de información o una confirmación, antes de enviar al usuario al destino solicitado, por ejemplo el primer vinculo solo muestra un mensaje, el segundo y el tercero ofrece información y da la alternativa de permanecer en la misma página: function fnalerta() { alert('este link te dirige a Google.com'); function fnconfirmar1() { var respuesta=confirm('este link te dirige a Google.com'); if(respuesta==true) return true; else return false; function fnconfirmar2() { var respuesta=confirm('este link te dirige a Google.com'); if(respuesta==true) parent.location=' else parent.location=''; <a href=" onclick="fnalerta()">google</a> <br /> <a href=" onclick="return fnconfirmar1()">google</a><br /> <a href=" onclick="fnconfirmar2()">google</a ><br /> Cómo usar los eventos del teclado de Javascript? Los siguientes eventos de teclado se pueden insertar en casi cualquier elemento HTML. onkeypress onkeydown onkeyup Presionar una tecla del teclado y soltarla Presionar una tecla del teclado y soltarla Liberar una tecla <input type="text" value="onkeypress" onkeypress="alert('haz soltado una tecla.')"> <input type="text" value="onkeydown" onkeydown="alert('haz presionado una tecla.')"> <input type="text" value="onkeyup" onkeyup="alert('haz liberado una tecla.')"> 5

6 Cómo usar los eventos onfocus y onblur de Javascript? Los eventos onfocus y onblur se utilizan en los elementos HTML: a, textarea, area, button, label, input y select para desencadenar una accion cuando tengan el focus (la atencion y reciben lo que se escriba), o cuando lo pierdan. <input type="text" size="50" onfocus="value='tengo el focus, puedes escribir aquí';" onblur="value='perdí el focus';"><br> Cómo usar los eventos onload y onunload de Javascript? Los eventos onload y onunload se utilizan para definir cuando una página o imagen terminan de cargar completamente y cuando el usuario abandona la página respectivamente. Se pueden usar solo en las etiquetas body e img y en el objeto window onload = Una página o imagen termina de cargar onunload = El usuario abandona la página Por ejemplo, el siguiente código permite mostrar un mensaje de bienvenida cuando el usuario carga la página y muestra otro de despedida cuando la abandona. <body onload="saludo()" > function saludo() { alert('bienvenido a la página de Javascript') function despedida() { alert('gracias por tu visita') Los eventos onload y onunload se pueden insertar de dos formas Insertándolo en la etiqueta <body>: <body onload=" saludo ()"> En un script: window.onunload= despedida (); 6

7 Importancia y usos prácticos de Onload Onload es ampliamente utilizado en las páginas de internet por dos motivos: Cargar elementos pesados como imágenes, flash o videos, pero solo después que la página se muestre completamente en el navegador, de esa forma se hace las páginas muy rápidas. Cargar elementos que se desea que no sean rastreados por los buscadores, como iframes con publicidad (marcos), vínculos a sitios de afiliados y otros por alguna razón. De esa forma estos elementos son escritos solo después que la página concluya de cargar completamente. Con el siguiente script se escribe un vínculo en una página usando Onload. El contenedor se puede usar en la zona exacta de la página donde se necesita escribir el link. <div id="lk"></div> function esclinks(){ document.getelementbyid('lk').innerhtml='<a href=" a mi sitio</a>'; window.onload=function(){ esclinks(); Cómo iniciar funciones diferentes con el evento onload? Mediante onload se puede iniciar varias funciones de forma simultánea, hazlo de cualquiera de las dos formas pero es aconsejado usar el segundo método siempre en el final de la página, justo antes del cierre de la etiqueta </body>. <body onload="función1();función2();función3()"> function start() {FUNCIÓN1();FUNCIÓN2();FUNCIÓN3(); window.onload = start; 7

8 Cómo usar el evento onselect de Javascript? El evento onselect permite realizar una accion cuando el usuario seleccione algún texto, se puede utilizar en los elementos HTML <input type="text"> y <textarea>. <input type="text" value="onselect" onselect="alert('haz seleccionado texto')"> Cómo usar el evento onchange de Javascript? El evento onchange ejecuta una acción al cambiar el contenido de una entrada de texto, puede usarse en las etiquetas <input type="text">, <select> y <textarea> <input type="text" value="onchange" onchange="style.backgroundcolor='red';"> Todos los eventos anteriores validan perfectamente en HTML5, existen otros como: onresize que ejecuta una acción al modificar el tamaño de una ventana, onerror que indica que ocurre un error al cargar un documento o imagen. EJERCICIOS EVENTOS (I) Dispondremos un botón y cada vez que se presione, mostraremos una alerta con el valor del contador: Crear un formulario con tres botones con las leyendas "1", "2" y "3". Mostrar un mensaje indicando qué botón se presionó. Crear un formulario con tres botones con las leyendas "1", "2" y "3". Mostrar un mensaje indicando qué botón se presionó. Usando 1 sola función 8