Publicado por Juan Pablo el 30.Abr.2007 | Comentarios (6)
Quizás el ejemplo más trivial de Javascript que no molesta — o Javascript Unobtrusive si lo prefieres — es aquel pequeño detalle que usuarios dotados de una agudeza visual superior a la media detectan al momento de cargar una página que contiene un formulario. Me refiero a establecer el foco en el primer campo del formulario que se ha cargado. El mejor ejemplo de este comportamiento es el mismísimo Google, date un paseo (pero vuelve enseguida ¿ehh?) a www.google.com y mira donde queda el cursor cuanto termina de cargar la página (si eres usuario Firefox no abras el enlace en una Pestaña/Ventana nueva, de esa forma no podrás notar el efecto).
Si miras el código fuente de la portada de Google podrás notar que el elemento <body> tiene el atributo/valor onload="sf()", el Desarrollador de la portada de Google tiene que leer más a menudo juque.cl, ¿por qué lo digo?, porque se puede hacer lo mismo pero sin tocar el código XHTML y como es sólo una función que establece el foco no afectará el comportamiento principal de la página si javascript no está disponible en el cliente.
Asumiendo que la página sólo tiene un formulario y el primer campo de éste se llama nombre, modelaremos el siguiente objeto:
var foco = {
ini : function() {
var f = document.forms[0];
f.nombre.focus();
}
}
Simple, muy simple. Creamos y asignamos a la variable f el formulario 0, luego le aplicamos el método focus al objeto f.nombre y listo. ¿Pero que ocurre si el formulario no existe?, el intérprete Javascript nos reclamara que el objeto f es indefinido, ¿cómo solucionamos esto? — preguntando primero si existe el formulario 0:
var foco = {
ini : function()
{
if (0 in document.forms) {
var f=document.forms[0];
f.nombre.focus();
}
}
}
Es una muy buena práctica en Javascript preguntar si existen los objetos antes de trabajar con ellos. Ahora nuestro pequeño objeto foco no generará problema si el formulario no existe en la página. Sólo nos falta un último detalle para completar nuestra tarea, la llamada al objeto asignándolo al manejador window.onload:
window.onload = foco.ini; Ahora tenemos el foco en campo nombre cuando la página sea cargada, y el XHTML jamás fue tocado.
Enlace Permanente, Comentarios (6), Publicada en: JavaScript
excelente tip, sobre todo la parte de
if (0 in document.forms)
es totalmente no intuituvo.
Javascript que no molesta — o Javascript Unobtrusive No me he preocupado de buscar la traducción mas utilizada para esta frase, pero personalmente prefiero decir "Javascript no obstructivo".
Sería javascript no obtrusivo, gran tuto (igual que el anterior) y solo comento para decir que la pagina de Google realmente da pena, esta bien es la mas simple y todo eso pero tanto dinero, tantos programadores, tanto personal capacitado (Dustin Diaz ya aterrizo en el plex) y su pagina de inicio sigue dando pena.
body onload="document.getElementById('nombre').focus()"
Saludos juque y visita mi blog que cambie algo de diseño :) y actualize mi CV.
saludos
@Ricardo: Prefiero decirlo así (que no molesta) porque se entiende mejor, decir javascript no obtrusivo, no es lo más descriptivo que digamos, al menos para la lengua española. El adjetivo "Unobtrusive" significa: discreto, poco llamativo; que no molesta.
@RoQ: el desarrollar una portada medianamente estándar ya forma parte de los misterios de la humanidad en Gooogle, tampoco me lo explico.
@0x01: Intervenir el elemento body es lo que precisamente NO HAY que hacer, ese es el objetivo que este mini tutorial persigue. Le daré una mirada tu blog :).
Definitivamente este snippet es de los útiles a la hora de mejorar la usabilidad de ciertas páginas (como la de un login).
Me quedo con Javascript discreto =} (aunque quizás es menos intuitiva la traducción =/)
Juan Pablo Aqueveque, Algunos derechos reservados, 1998-2024.
A menos que se exprese lo contrario los contenido de este sitio están
publicado bajo una licencia Creative Commons.
Este sitio está alojado en Dreamhost.
