Anchor y Javascript
Sábado, 15 de Octubre de 2005Todos conocemos la etiqueta anchor <a> de HTML. Es, casi, la etiqueta elemental, pues gracias a ella se inventó el hipervínculo, y con él, la navegación Web.
Pero, ?y si queremos hacer algo más que navegar de un sitio a otro?
Veamos unos trucos básicos para trabajar con estas etiquetas.
El atributo “href” indica la página donde queremos ir. Así, <a href=”/sitio.html”>click</a> nos llevara a la página /sitio.html.
Si queremos añadir Javascript dentro del atributo href, debemos añadir la cadena Javascript:____. Por ejemplo:
<a href="javascript:alert('hola')">saludame</a>
Pinchando el enlace, nos mostrará un diálogo sencillo. Y no sucede nada más.
Esto es así porque la función alert() no devuelve nada (es void)
Pero, ?Qué sucede cuando usamos una función Javascript nuestra que no devuelve void (como hace la función alert()), sino que retorna algún valor de cualquier tipo?
Supongamos que, aún más sencillo todavía, queremos asignar el valor de una variable a otra, por ejemplo:
<script> var clicks=0; </script> <a href="javascript:clicks=clicks+1">suma uno</a>
?Cuál es el resultado? El enlace sustituye el contenido de la página actual por el el resultado de evaluar la expresión clicks=clicks+1 cuyo resultado es 1, y eso es lo que nos está mostrando.
Esto tiene su utilidad: podemos generar HTML dinámicamente en cliente y mostrarlo al pinchar en el enlace sin recargar la página. Por ejemplo:
<script>
function f() {
return "<html><body><font color='red' size='6'>Hoy es "+(new Date())+"</font></body></html>"
}
</script>
<a href="javascript:f();">dinamico</a>
Pero probablemente no estemos buscando esto, sino todo lo contrario: que al hacer click se ejecute la función de Javascript pero que no se recargue la página ni haga nada. Para ello tenemos que englobar nuestra función en otra que no nos devuelve nada: void();
<script> var clicks=0; </script> <a href="javascript:void(clicks=clicks+1)">suma uno</a>
Otra solucion es utilizar el evento onclick. Este evento nos permite ejecutar codigo Javascript cuando hacemos click encima de el.
<script> var clicks=0; </script> <a href="#" onclick="clicks=clicks+1">suma otro uno</a>
Sin embargo, el viejo truco del “#” para no enlazar a ningún sitio parece tener un efecto muy feo: hace que la página se desplace hasta la parte superior, aunque no recargue. Para evitarlo, mejor utilizaremos href=”javascript:;” que no hace nada, no devuelve nada y no desplaza la página:
<script> var clicks=0; </script> <a href="javascript:;" onclick="clicks=clicks+1">suma otro uno (sin desplazamiento)</a>
Mejor, ?verdad?
Pero, ?y si queremos ejecutar un Javascript y, además, ir a otro HTML?
Podemos combinarlo, claro está:
<script> var clicks=0; </script> <a href="http://www.google.com" target="_blank" onclick="clicks=clicks+1">suma otro uno y enlaza a Google</a>
Pero onclick puede sernos todavia más util: el valor que retorne este evento servirá para indicarnos si el href ha de funcionar o no. Es decir, si ponemos “return true” dentro del evento onclick, el enlace funciona. Si ponemos “return false”, no funciona.
<script>
var clicks=0;
</script>
<a href="http://www.google.com" target="_blank" onclick="clicks=clicks+1; return confirm('?Seguro?')">suma otro uno y enlaza a Google con confirmacion</a>
En resumen:
| <a href=”#”>click</a> | No hace nada, pero desplaza hacia arriba |
| <a href=”javascript:;”>click</a> | No hace nada y no desplaza |
| <a href=”javascript:f()”>click</a> | Ejecuta la funcion f() y sustituye el contenido de la página actual con resultado de esta función (excepto si f() no devuelve nada) |
| <a href=”javascript:void(f())”>click</a> | Ejecuta la funcion f() pero no hace nada más, aunque f() devuelva algun valor. |
| <a href=”javascript:void(a())” onclick=”b()”>click</a> | Ejecuta primero la funcion b() y después a() pero no hace nada más |
| <a href=”javascript:void(a())” onclick=”return c()”>click</a> | Ejecuta primero la funcion c() y, si esta devuelve true entonces ejecuta la función a(). Después no hace nada más |
| <a href=”javascript:a()” onclick=”return c()”>click</a> | Ejecuta primero la funcion c() y, si esta devuelve true entonces ejecuta la función f() y sustituye el contenido de la página actual con resultado de la función. |
Con esto ya podemos manejar la etiqueta <a> en todas sus múltiples variedades sin que sucedan cosas extrañas.
