Archive for the “Javascript” category
Sebastian Barria • 21st Oct 2011 • Javascript, Mootools, Recomiendo, Web
Este post es en parte para realizar una comparativa entre Mootools y jQuery…. Ambas son librerías de javascript que permiten hacer cosas como animar objetos, seleccionar elementos, etc. en cada página donde se ejecuten, es decir que en la práctica lo que hacen es entregarnos funciones pre-hechas para realizar las tareas de javascript y así permitir, entre otras cosas, simplicarnos la vida y compatibilizar los navegadores. Ambas sirven para lo mismo y de hecho funcionan de manera bastante similar.
Muchas personas no conocen Mootools y, como generalmente ven más sitios o ejemplos hechos en jQuery creen que “es mejor”,
Sebastian Barria • 29th Jun 2010 • Javascript, Mootools, Web
Imagino que más de alguna vez habrán visto los típicos campos de texto con alguna frase como “ingresa tu email aquí” y que cuando le hacen click esa frase desaparece por completo dejando el input vacío. Y lógicamente que cuando me salgo de boton vuelve la frase original.
Acá les dejo una forma automática de hacerlo, en javascript, por supuesto:
var inputs=$$('#formulario_de_contacto .text','#formulario_de_contacto textarea');
for(i=0;i<inputs.length;i++){
inputs[i].txtOriginal=inputs[i].value;
inputs[i].onfocus=function(){
if(this.value==this.txtOriginal){ this.value=""; }
}
inputs[i].onblur=function(){
if(this.value==""){ this.value=this.txtOriginal; }
}
}
…
No hay mucho que explicar de este código: primero selecciona todos los textarea y elementos con la clase “text” (que es la que
Sebastian Barria • 29th Apr 2010 • Javascript, Web
Basándome en lo planteado en este post, esta vez les presento este “truquito”. No hay que ser muy inteligente tampoco para que a uno se le ocurra esto, asique no pretendo lucirme ni nada.
Hay veces en que llamo a una función pero en la página donde estoy no he cargado el archivo .js correspondiente y por lo tanto el navegador me tira un error. ¿Cómo solucionarlo?: fácil (siempre digo lo mismo). Tenemos que agregar al final del archivo js una variable cualquiera:
var archivoCargado=1;…
Y luego, antes de llamar a la funcion que necesitamos le preguntamos si esa
Sebastian Barria • 29th Apr 2010 • Javascript, Web
Por culpa de este tipo de errores muchas veces podemos pasarnos horas tratando de encontrar el error.
Claro, yo se que existe el famoso firebug y alguna que otra alternativa para ayudarnos a encontrar los errores, pero es mejor prevenir que perder tiempo en guevadas, jajaja.
La cosa es simple: “¿cómo saber si existe una variable en javascript sin recibir un error de vuelta si es que no existe?”. Claro, porque si pregunto simplemente:
if(miVariable){ alert("si existe"); }
else{ alert("no existe"); }
claramente voy a recibir un error diciendo que miVariable… no está definida. Osea que teóricamente nunca nos vamos
Sebastian Barria • 22nd Apr 2010 • Bugs, CSS, HTML, Javascript
Generalmente publico artículos y desarrollos míos, pero esta vez es algo así como uns servicio de utilidad pública. Esta vez puedo dar fe de que es la solución definitiva, pues lo probé y funcionó todo a la perfección.
Navegando por ahí encontré el sitio de DillerDesign, donde publican su “experimento” DD_belatedPNG. El tema es que esa librería de JavaScript REALMENTE soluciona el famoso problema de los PNG transparentes.
Anteriormente yo había publicado un artículo al respecto…, pero la solución que planteaba, si bien funcionaba, no servía para cuando existían fondos transparentes que se repetían. En fin. Esta librería
Sebastian Barria • 7th Mar 2010 • Actionscript, Javascript, Web
Aunque no son muy conocidas por quienes están comenzando en el tema de la programación, estas dos funciones son una maravilla. Son funciones existentes en varios lenguajes de programación, como en Javascript y en Actionscript, que nos sacarán de varios apuros y nos permitirán optimizar y mejorar nuestros códigos.
Su objetivo principal es el de definir un tiempo para esperar a ejecutar alguna otra función. Por ejemplo, si necesito mostrar una alerta y que desaparezca en 3 segundos más, o si necesito que un reloj vaya actualizándose cada 1 segundo.
setTimeout()…
Esta función permite definir un tiempo específico para que
Sebastian Barria • 7th Mar 2010 • CSS, HTML, Javascript, Teoría, Web
Si ya hablé de pautas para diseño Web, esta vez le toca al desarrollo (maqueteo).
Al momento de maquetear un sitio Web es necesario fijarse en varios aspectos, que no siempre son atendidos por los desarrolladores. Algunas veces por descuido, otras por no saber.
Acá les dejo este checklist que puede servir de ayudamemoria para los que maquetean. La idea no es hacer una buena maqueta, sino una profesional:
Código HTML
El código debe ser limpio y claro…. Debe estar hecho con DIVs y no tablas. La idea es que se usen las etiquetas correctas en los lugares
Sebastian Barria • 7th Mar 2010 • HTML, Javascript, Web
A partir de la función mostrada en el post anterior, se me ocurrió hacer una función que limitara la cantidad de caracteres de un área de texto (textarea).
Como muchos ya deben saber, los textarea no permiten el uso del atributo maxlength, que poseen los inputs de texto. Pero para simular eso vamos a recurrir a la siguiente funcion:
function maxLength(e,obj,num) {
k = (document.all) ? e.keyCode : e.which;
if (k==8 || k==0){ return true; }
else{ return obj.value.length<num; }
}…
Para aplicar esta función, es necesario incluir lo siguiente en cualquier textarea:
Sebastian Barria • 7th Mar 2010 • HTML, Javascript, Web
Esta función hecha en javascript permite prohibir ingresar ciertos caracteres en un input de texto. En este caso específico, no deja ingresar caracteres que no sean números.
La escencia de la función es simple: recibe un evento; comprueba si es un número y devuelve una respuesta.
Sin más preámbulo, la función es la siguiente:
function isNumber(e) {
k = (document.all) ? e.keyCode : e.which;
if (k==8 || k==0) return true;
patron = /\d/;
n = String.fromCharCode(k);
return patron.test(n);
}
¿Cómo usarla?…
Como decía anteriormente, esta función debe recibir un evento. En este caso es necesario llamarla
Sebastian Barria • 7th Mar 2010 • Javascript, Mootools, Tutoriales
En este segundo mini-tutorial, explicaré como comenzar a jugar con las animaciones que ofrece Mootools: fades y slides.
Lo bueno es que con esta librería es posible comenzar a hacer cosas con una simple línea o función, y luego podemos ir detallando y complejizando más nuestra animación. Ahora veremos como.
Otro de los beneficios que ofrece Mootools es la posibilidad de hacer animaciones de una manera muy simple. Este es un ejemplo (suponiendo que tenemos un DIV id=”div_animable”:
$('div_animable').slide('out');…
Este tipo de función se puede aplicar a cualquier objeto. Por ejemplo, si tenemos un botón, podríamos decirle que
