Archive for the ‘JavaScript’ Category

Validación de formularios con JavaScript

Tuesday, April 19th, 2005

La validación de datos de un formulario mediante JavaScript o cualquier otro lenguaje del lado del cliente es la forma mí¡s cómoda de verificar los datos introducidos.

Aunque la comodidad no lo es todo, existen multitud de casos en el que el uso exclusivo de JavaScript para la validación de datos es insuficiente y la utilización de algun lenguaje como PHP, Perl o Java resulta imprescindible.

Por ejemplo, no puedes validar los datos de acceso a una zona segura de tu web mediante JavaScript ya que el login y el password deberán de estar escritos en alguna parte y el usuario no tardará en averiguarlo. Otro caso en el que el uso de lenguajes de servidor es imprescindible es cuando se debe verificar la validez de una dirección de correo o un URL.

Ademí¡s, no podemos olvidad, que como cualquier lenguaje del lado del cliente, el navegador del usuario debe soportar Javascript, si no lo hace la validación no se realizarí¡. Por lo tanto, si los datos a validar son importantes… olví­date de JavaScrit, usa un lenguaje del lado del servidor.

Una vez expuestos los inconvenientes de JavaScript… veamos el siguiente ejemplo:

<html>
<head>
<title>Mi Pagina</title>

<script language="javascript">
<!--
function validar() {
var msg = "";

if((document.form.nombre.value.length > 100) || (document.form.nombre.value.length&lt;5)) {
msg = "Nombre Incorrecto";
}

if((document.form.edad.value>99) || (document.form.edad.value&lt;3)) {
msg = "Edad Incorrecta";
}

if(msg != "") {
window.alert(msg);
return false;
} else {
return true;
}
}
-->
</script>

</head>
<body>
<form method="post" name="form" onsubmit="validar()">
<input type="text" name="nombre"/>
<br />
<input type="text" name="edad"/>
<br />
<input type="submit" value=" enviar "/>
</form>
</body>
</html>

Como puedes observar el código superior se trata de una simple pí¡gina HTML con un formulario y un script que sirve para validar los datos introducidos en el formulario.

En el tag que abre el formulario puede ver como este se llama "form" y al enviarlo llama a la funcion validar(), esta función se encuentra en la cabecera del documento (entre <head> y </head>) y es lo que se encarga de validar los datos introducidos por el usuario.

Modificar la forma y datos a validar, así­ como los errores que se mostrarí¡n es una tarea bastante sencilla. Por lo tanto no tengas miedo y a trastear!

Posted in JavaScript | 4 Comments »

Mostrar ventanitas pop-up con JavaScript

Tuesday, April 19th, 2005

Todos los hemos visto alguna vez, posiblemente incluso estés harto de ellos, pero aún así, seguro que habrás clickado en más de uno. Así son las ventanitas pop-ups, irritantes e interesantes al mismo tiempo.

Lo admito, odio todas esas ventanitas con las que nos bombardean en nuestra navegación diaria por la red. A veces incluso te encuentras en sitios web que en todas y cada una de sus páginas te abren dos o tres ventanitas. Resultan irritantes pero si todo el mundo las usa será por algo…

Efectivamente, las ventanitas pop-up se usan normalmente para publicitar algún producto o promocionar algún servicio de la web que de otra forma podría pasar inadvertido. Y se usan porque son efectivas, mucho más que los banners, botones o skycrappers a los que nos hemos acostumbrado y que a estas alturas, ni siquiera vemos. Los pop-ups al menos los vemos, otra cosa es que no les prestemos atención, pero los vemos.

Supongo que a estas alturas ya te habrás convencido de que lo que tu web necesita es una ventanita pop-up de esas… Pues no lo se, pero por lo menos te cuento como se hacen.

Lo primero que debes decidir es cuando abrir estas ventanitas, lo normal es abrirlo cuando el usuario acceda a una página concreta. Esto se logra mediante la directiva "onload" que se debe poner dentro del tag "<body>". Más o menos quedaría así:

<body onload="window.open('ventanita.html','Mi Ventanita','width=400,height=300,scrollbars=no,toolbars=no')"></body>

La función window.open() es la que se encarga de abrir la ventanita. Esta función recibe varios parámetros:

  1. La página a mostrar en la ventanita. Esta página la tendrás que hacer y no es más que una simple página HTML. En nuestro ejemplo, se llama "ventanita.html".
  2. El titulo de la ventanita, en nuestro ejemplo lo hemos llamado "Mi ventanita".
  3. Las propiedades de la ventanita, incluyendo su anchura (width=400), altura (height=300), si debe o no mostrar scrollbars (scrollbars=no), si debe o no mostrar los toolbars (toolbars=no), si es redimensionable (resizable=yes), etc.

Si usas el código superior tendrás una página que abre una ventanita cada vez que se visita. Esto puede resultar útil pero también excesivamente molesto, por lo que mi recomendación es que uses el siguiente código más complejo que hace que la ventanita solo se abra una vez por sesión, es decir, cada visitante vera la ventanita una sola vez.

&lt;html&gt;
&lt;head&gt;

&lt;script language="javascript"&gt;
//Pop-under window- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script

// Especifica la página que quieres abrir
var popunder="ventanita.html"

// Especifica las características de la ventanita
// 1 -&gt; activado, 0 -&gt; desactivado
var win="width=800,height=510,scrollbars=1,resizable=1,toolbar=1,location=1,menubar=1,status=1"

// No editar nada más
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length &gt; 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1) {
end = document.cookie.length;
}
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function ventanita(){
if (get_cookie('pop')==''){
window.open(popunder,"Mi ventanita",win)
document.cookie="pop=si"
}
}
&lt;/script&gt;

&lt;/head&gt;
&lt;body onload="ventanita()"&gt;
Esta es una simple página.
&lt;/body&gt;
&lt;/html&gt;

También existe la posibilidad de limitar las veces que un mismo usuario verá la ventanita en cuestión. Esto se hace mediante cookies, de forma similar al último ejemplo, y podrías hacer que cada visitante viera la ventanita solo una vez al día, una vez por semana, etc.

Posted in JavaScript | 5 Comments »