Similar Posts
Texto explicativo en las cajas de los formularios
Dentro de una serie de artÃculos sobre Javascript he encontrado este script que permite mostrar un texto explicativo en las cajas de texto y que desaparezca cuando el usuario ha escrito algo.
Primeramente necesitamos el HTML que se mostrará, se trata de un formulario normal, pero el texto explicativo, mediante estilos, en vez de aparecer debajo como se verÃa sin estilos, al darle posición absoluta, se mostrará sobre la caja de texto.
<style type="text/css">
.helptext {
position: absolute;
color: #999999;
z-index: 10;
font-size: small;
overflow: hidden;
}
</style>
<form action="" method="post">
<input type="text" name="login" value="" onkeyup="UpdateHelpText(this);" onmouseup="UpdateHelpText(this);" />
<div class="helptext" id="label_login" onclick="ChangeFocus(this);">
Enter Login Name
</div>
<input type="password" name="password" value="" onkeyup="UpdateHelpText(this);" onmouseup="UpdateHelpText(this);" />
<div class="helptext" id="label_password" onclick="ChangeFocus(this);">
Enter Password
</div>
<input type="submit" name="submit" value="Login" onclick="return false;" />
</form>
<script type="text/javascript" language="JavaScript">
UpdateHelpText(document.getElementsByName('login')[0]);
UpdateHelpText(document.getElementsByName('password')[0]);
</script>
Acto seguido, se necesitan las funciones javascript, en este caso son dos, una de ella que pasa el foco a la caja de texto cuando se pincha en el texto explicativo (recordad que está encima de la caja de texto):
function ChangeFocus(el) {
while (el.tagName != 'INPUT')
el = el.previousSibling;
el.focus();
}
Y la otra función que oculta el texto explicativo dependiendo del contenido de la caja de texto:
function UpdateHelpText(el)
{
var label = el;
while (label.tagName != 'DIV')
label = label.nextSibling;
if (el.value == '') { // Field is empty; show text
label.style.left = getElementAbsPosX(el) + 'px';
label.style.top = (getElementAbsPosY(el) - 7) + 'px';
label.style.visibility = 'visible';
}
else { // Field is not empty; hide text
if (label)
label.style.visibility = 'hidden';
}
}
VÃa / AjaxLine
6 razones para utilizar librerías o frameworks Javascript
Últimamente los frameworks de Javascript que aparecen son cada vez más numerosos, y aunque ya en alguna ocasión hemos hablado de esto, no está mal recordar y añadir otros puntos por los que deberÃamos usar estas librerÃas o frameworks.
- No reinventes la rueda: no pierdas en tiempo en hacer algo que ya han hecho otros y que además dan buen resultado.
- Haz más con menos código: estas librerÃas suelen permitir encadenar código, por lo que con menos código se consigue menos espacio, mejor mantenimiento y menos tiempo de desarrollo.
- Ahorra tiempo: por mucho que te guste programar en Javascript, ahorrarás tiempo al realizarlo mediante estas librerÃas.
- No eres el mejor programador: por mucho que tu ego te diga que eres bueno, los hay mejores. Además, estas librerÃas suelen estar apoyadas por una comunidad que hace mejorar el trabajo.
- Velocidad: estas librerÃas suelen ser muy rápidas a la hora de realizar las acciones. Visita esta página para comprobarlo.
- El código se entiende mejor: el código base de Javascript puede ser más complicado de leer y entender.
jsMSX: emulador de MSX con Javascript y Canvas
MSX es un ordenador de hace la tira de años que cuando eramos pequeños nos parecía increíble y que ahora nos parece paleolítico. jsMSX es un emulador realizado en Javascript y Canvas que permite ejecutar juegos para ese sistema.
En sí la aplicación no tiene mucha utilidad, pero es interesante desde el punto de vista de lo que se está consiguiendo mediante Javascript y Canvas.
jsMSX
Via / @lardissone
HTML5 Boilerplate
HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site. After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, perfo …
Quick Tip: An Introduction to Sammy.js
You’ve been seeing it for a while now with Google’s Reader, Gmail, and most recently, on Facebook. Probably, you, too, would like to write RESTful evented JavaScript applications. Well, fellow developers, meet Sammy.js, a tiny JavaScript framework built on top of jQuery. Sammy utilizes the URL hash (#) to allow you to create single page AJAX applic …
Lista de ofuscadores para Javascript
Para aquellos que necesiten ofuscar su código Javascript para que sea más difÃcil de entender a los usuarios, les vendrá bastante bien esta lista de aplicaciones que modificarán nuestro código:
- Thicket™ Obfuscator for JavaScript: también válido para ECMAScript, a parte de modificar el código para dificultar su lectura, lo comprime.
- Jasob 2: modifica los nombres de variables, borra comentarios y elimina espacios entre muchas otras cosas.
- Javascript Obfuscator: trata los scripts y ficheros js contenidos en una página html, modificando los espacios, comentarios, nombres de variables y funciones y lo escribe todo en una única lÃnea, añadiendo punto y coma cuando sea necesario. Existe versión online.
- Stunnix JavaScript Obfuscator: modifica javascripts y ECMAScripts contenidos en ficheros HTML, PHP, ASP, JSP.
- JCE Pro: modifica el código javascript para que sea imposible su lectura.
- Scripts Encryptor (ScrEnc): ofusca los siguientes tipos de archivos: HTML, JavaScript/JScript, C/C++/MFC.
- Shane Ng’s GPL-licenced obfuscator: ofuscador con licencia GPL.
- Dean Edwards JavaScript Compressor/Obfuscator: online.
- ESC: ofuscador de código ECMAScript escrito en JScript.
- Jammer: modifica ficheros HTML, Javascript y VRML, comprimiendo su espacio y haciendo que sea difÃcil de entender.
- JSCruncher Pro: reduce una media del 60% del tamaño original.
- Strong JS: elimina caracteres innecesarios y modificando el nombre de variables.
- JavaScript Scrambler: fácil de usar.
- Javascript Encoder from scriptasylum.com: online.
VÃa / Ajax Digest