Preguntas Frecuentes

Preguntas Frecuentes (FAQ)
EFECTOS
Javascript: Cambiar el color de una

celda
(Redirigido desde Cambiar el color de una celda)
P: ¿Cómo puedo cambiar el color de una celda al pasar el ratón?
<table border=0 cellpadding=0 cellspacing=0>

<tr>
<td onmouseover="this.style.background='red'"
onmouseout="this.style.background='white'">
Texto de la celda
</td>
</tr>
</table>
--Chivi 01 Dic 2002
Los navegadores modernos soportan este efecto (y muchos otros) via CSS, sin necesidad de
utilizar Javascript. Principalmente aquellos navegadores basados en el
motor Gecko(Firefox, Seamonkey, Epiphany y otros), los basados
enKHTML/WebKit (Safari, Chrome, Konqueror) y Opera.
La excepción a la regla, como suele suceder en el tema de soporte a estándares web,

es Internet Explorer. IE 6 (que en el año en el que se escribió el código Javascript mostrado
aquí era la *nueva versión*) solamente soporta la pseudoclase hover en etiquetas A (enlaces).
IE7 sí la soporta para otros elementos, pero solamente en modo estándar. La cuota de
mercado actual de Internet Explorer 6 se ubica entre 15% y 20% [1], lo cual implica que ese
porcentaje de usuarios no será capaz de ver el efecto si está construido únicamente con CSS.
Los usuarios de IE7 tampoco podrán ver el efecto si el sitio no utiliza HTML válido.
Si soportar el efecto con IE6 es prioritario, y no tiene sentido utilizar un enlace para el efecto de
cambio de color, deberá utilizarse Javascript. Si el efecto es puramente estético o si el
porcentaje de usuarios de IE6 en el sitio es lo suficientemente bájo, debería utilizarse el código
CSS.
Versión CSS

<tr>
<td class="efecto">Texto de la celda</td>
</tr>
.efecto {
background : white;
}
.efecto:hover {
background : red;
Javascript: Barra de estado

<a href="indice.htm" onmouseover="status='Ir al Índice'; return true"
onmouseout="status=''">Home</a>
Éste es uno de los más facilitos
Hay que tener en cuenta que algunos navegadores modernos en su configuración por defecto
no permiten que los scripts modifiquen el texto de la barra de estado.
Javascript: enlaces
(Redirigido desde Enlaces)
P.- ¿Cómo quitar el marco de los enlaces?
R.- Añadiendo onFocus="this.blur()"
<a href="http://www.pagina.com" onfocus="this.blur()">Enlace</a>
Javascript: Frase diaria

(Redirigido desde Frase diaria)
P: ¿Como puedo colocar en mi página una frase distinta cada día de la semana?
<html>
<head>
<script language="JavaScript">
function frase(){
var aFrases = new Array("Texto del Domingo",
"Texto del Lunes",
"Texto del Martes",
"Texto del Miércoles",
"Texto del Jueves",
"Texto del Viernes",
"Texto del Sábado");
var fecha = new Date();
var indice = fecha.getDay();
return aFrases[indice];
}
</script>
</head>
<body>
<form name="frm">
<h1>
document.write(frase());
</script>
</h1>
</form>
</body>
</html>
Javascript: Un efecto chachi para texto

y no muy complicado
(Redirigido desde Un efecto chachi para texto y no muy complicado)
Un efecto para texto y no muy complicado.
<script language="javascript" type="text/javascript">

var TimerID;
var updown = true;
var str = 1;
function start()
{
if (document.all)
TimerID = window.setInterval( "wave()", 100 );
}
function wave()
{
if ( str > 10 || str < 1 )
updown = !updown;
if ( updown )
str++;
else
str--;
wft.filters( "wave" ).phase = str * 20;
wft.filters( "wave" ).strength = str;
}
window.onload=start
</script>
<div id = "wft" style = "font-family:Arial;font-size:10pt;width:60px;
filter:wave(add=0, freq=7, light=0, phase=0, strength=5)" class =
"big"><b>Ruchu</b></div>
Javascript: Mostrar/ocultar capas

(Redirigido desde Mostrar/ocultar capas)
P.- ¿Cómo puedo mostrar/ocultar capas pulsando sobre un enlace?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Ocultar Elementos</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<script type="text/javascript">
function cambio(idCapa){
var capa = document.getElementById(idCapa);
capa.style.display = (capa.style.display ==
"none") ? "block" : "none";
}
</script>
</head>
<body>
<div>
<div id="capa1">
Esta es la capa 1
</div>
<div id="capa2">
Esta es la capa 2
</div>
<a href="#" onclick="cambio('capa1')">Muestra/oculta la
capa 1</a>
<a href="#" onclick="cambio('capa2')">Muestra/oculta la
capa 2</a>
</div>
</body>
</html>
Javascript: Detectar tecla
(Redirigido desde Detectar tecla)
P.- ¿Como puedo detectar la tecla pulsada?
R.- Código de ejemplo:
<html>
function mostrar(caracter) {
letra = caracter.which || event.keyCode;
l = String.fromCharCode(letra);
alert("Usted presionó la letra: "+l+" Codigo: "+letra);
}
window.onkeypress = mostrar;
</script>
<body>
Pulsa una tecla.
</body>
</html>
Javascript: Sonido en los Enlaces

(Redirigido desde Sonido en los Enlaces)
¿Cómo puedo poner un sonido a mis enlaces al situar el ratón encima?
<html>
<head>
function Reproducir(){
document.all.sound.src = "archivo.wav"}
function Parar(){
document.all.sound.src = ""}
</script>
</head>
<body>
En el Body:
<bgsound id="sound">
<a href="pagina_que_sea" onmouseover="Reproducir()"
onmouseout="Parar()">Enlace 1</a>
<a href="pagina_que_sea" onmouseover="Reproducir()"
onmouseout="Parar()">Enlace 2</a>
</body>
</html>
Javascript: Dar estilos CSS para los
links
(Redirigido desde Dar estilos CSS para los links)
P: ¿Como doy estilos CSS a los hipervinculos?
Bueno, es un sistema sencillo para darle un toque de alegría a nuestras páginas. me lo bajé de
la página de bravenet. si me equivoco y lo publico en el de javascript en vez de en el de HTML,
pido disculpas, pero tiene algo de javascript
Cambiar el color al pasar el ratón por lo alto del enlace...
<a href="" onmouseover="this.style.color='red';"

onmouseout="this.style.color='';">This HREF turns red on hover.</a>
Hipervinculos o links de color verde.
<a href="" style="color:green;">This HREF is green.</a>
Hipervinculo sin raya por debajo
<a href="" style="text-decoration: none;">This HREF has no

underline.</a>
Linea de espacio en hipervinculo
<a href="" style="line-spacing:150%;">These HREFs are spaced 150% of

normal.</a>
<a href="" style="line-spacing:150%;">These HREFs are spaced 150% of
normal.</a>
Espacio entre los caracteres de un hipervinculo
<a href="" style="letter-spacing:5px;">This HREF has 5 pixels between

letters</a>
Color de fondo en los enlaces
<a href="" style="background:ffffcc;">This HREF has a yellow

background.</a>
Javascript: Buenos días amigo
(Redirigido desde Buenos días amigo)
P: ¿Como puedo dar los buenos días a mi amigo o visitante y que siempre que entre a mi sitio
le de los buenos días?
R: Con una cookie

var today = new Date();
var hora=today.getHours();
var expiry = new Date(today.getTime() + 28 * 24 * 60 * 60 * 1000); //
28 dias
function setCookie(name, value)
{
document.cookie=name + "=" + escape(value) + "; expires=" +
expiry.toGMTString();
}

function lee(valor)
{
document.cookie.search(RegExp("("+valor+"=)([^;]*)(;*)","gi"))
return unescape(RegExp.$2)
}
if(lee('usass'))
var usuario = lee('usass')
else{
var u=prompt("Introduce tu Nombre","")
if(u){setCookie('usass',u);usuario=u}
else{usuario = "Usuario"}
}
if (hora<6)
alert(usuario+" Hoy has madrugado mucho...¿O no te has acostado?");
else if (hora<12)
alert(usuario+" Buenos días");
else if (hora<=18)
alert("Buenas Tardes "+usuario);
else alert("Buenas Noches "+usuario);
</script>
Javascript: Quitar recuadro punteado

de enlace
(Redirigido desde Quitar recuadro punteado de enlace)
¿Como puedo quitar el recuadro de puntos de un enlace activo?

<html>
<head>
function prende() {
anclas=document.getElementsByTagName("a").length;
for (i=0;i<anclas;i++)
document.getElementsByTagName("a").item(i).onfocus=new
Function("if(this.blur)this.blur()")
}
</script>
</head>

<body onLoad="prende()">
<a href="#">Enlace1</a> <a href="#">Enlace2</a> <a
href="#">Enlace3</a>
</body>
</html>
Javascript:Poner texto vertical

(Redirigido desde Poner texto vertical)
<center>
<OBJECT ID="pepe"
CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"
STYLE="position:relative; width:300px; height:200 px">
<PARAM NAME="Line0001" VALUE="SetLineStyle(1)">
<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">
<PARAM NAME="Line0003" VALUE="SetFillColor(255,128,0)">
<PARAM NAME="Line0004" VALUE="SetFont('Arial', 20, 0, 0, 1, 0)">
<PARAM NAME="Line0005" VALUE="Text('Foros del Web', 0, 0, 0)">
</OBJECT>
<script>
function eje1() {
pepe.Rotate(15, 0, 0);
}

function eje2() {
}

function eje3() {
}
</script>
<input type=button onClick=eje1(); value="eje 1">

Javascript: Enlaces autoexplicativos

(Redirigido desde Enlaces autoexplicativos)
P.- ¿Cómo poner enlaces con una explicación desplegable del mismo abajo?
<html>
<head>
<style>
body{ font:normal 10px/20px verdana;}

blockquote{ border:solid 1px black;
font:normal 10px/12px verdana;
background:#ffffcc;
margin:1px 1px 1px 20px;
padding:5px 5px 5px 5px;
width:500px;
}
.norm{ color:blue;
border:none;
text-decoration:underline;
}
img{ border:none;
}
</style>


//Script original de KarlanKas con la colaboración de caricatos para
Forosdelweb.com

explicacion=new Array;
enlace=new Array;
texto=new Array;

//-------------------------- EDITABLE ---------------------------
enlace[0]="http://www.forosdelweb.com";
texto[0]="Ir a foros del web."
explicacion[0]="Foros del Web es el foro de programación hispana más
visitado por los habitantes de la luna de Gaminedes.";

enlace[1]="http://www.webareyou.com";
texto[1]="Visitar Web Are You. La página en eterna construcción."
explicacion[1]="Todos los seres abducidos tienen, desde la LSSI, la
obligación de tener una página web explicando sus experiencias. Aquí
está la mía.";

enlace[2]="http://www.estiloweb.com";
texto[2]="Necesitas ayuda?"
explicacion[2]="Cuando uno se enfrenta a la realización de una página
web siempre le surgen dudas... con webestilo.com se resuelve más de
una...";

enlace[3]="http://www.tunait.com";
texto[3]="Quieres charlar, divertirte y demás con la página de
tunait?"
explicacion[3]="Nuestra querida tunait nos regala una magnífica página
donde su plato fuerte es un magnífico foro lleno de buen rollito y
diversión... no os lo perdais!";

enlace[4]="http://www.pepemolina.com";
texto[4]="Qué tal visitar la página de caricatos?"
explicacion[4]="Quien no recuerda el generador de código o el enviador
de postales...? Caricatos no sólo responde, sino que genera nuevas
inquietudes a cada momento. Visitad la página donde recoge todos sus
avances!";

// SE PUEDE PONER TANTOS COMO SE QUIERA

//---------------------------------FIN DE CÓDIGO
EDITABLE--------------------------------

function anadir(texto,esto){
t=texto
texto=document.getElementById("enlace"+texto)
if(!texto.primero){texto.primero=texto.innerHTML}
if(isNaN(texto.ensenar)){texto.ensenar=-1}
var pepe=texto.ensenar
pepe=pepe*-1
texto.ensenar=pepe
if (texto.ensenar==1){
esto.innerHTML="-";
texto.innerHTML=texto.innerHTML+"<blockquote>"+explicacion[t]
+"</blockquote>"

}
if (texto.ensenar==-1){
;
texto.innerHTML=texto.primero
}

}

</script>
<title>FAQ 104.- Enlaces autoexplicativos </title>
</head>

<body>

for (w=0;w<enlace.length;w++){
document.writeln('<div id="enlace'+w+'"><a onfocus="blur()" href="#"
onclick="anadir('+w+',this)">+</a><a class="norm" HREF="'+enlace[w]+'"
target="_blank">'+texto[w]+'</a></div>');
}
</script>
</body>
</html>
Javascript: Sonido antes de un salto

(Redirigido desde Sonido antes de un salto)
P: ¿Cómo escuchar un sonido antes de hacer un link?
R: Adaptando este script con los valores adecuados

<html>
<head>
function ReproducirYSaltar(son, retardo, salto) {
if (document.all) document.all.sound.src = son;
document.getElementById("sound2").src = son;
setTimeout("salto('" + salto + "')", retardo);
}

function salto(x) {
location.href = x;
}
</script>
</head>
<body >
<bgsound id=sound style="visibility:hidden">
<embed id=sound2 hidden=true>
<a href="javascript:ReproducirYSaltar('UNDO.MID', 3000,
'http://www.sucaricatura.com' )" >
Enlace de caricauras </a><br>
'http://www.pepemolina.com/postales' )" >
Enlace de Postales digitales </a><br>
'http://www.pepemolina.com/visitas/visitas.php' )" >
Firme en mi libro de visitas </a><br>
</body>
</html>
Javascript: Reemplazar
(Redirigido desde Reemplazar)
P . - ¿Cómo reemplazar o eliminar subcadenas de una cadena?
Combinando el método split para convertir una cadena en un array y join que hace lo
contrario... Poniendo como párámetro del split, lo que se quiere quitar, y en join la nueva
subcadena (cadena vacía para eliminar)
var invertirBarra = "Hola/amigos/del/foro".split("/").join("\");
deja la variable invertirBarra = "Hola\amigos\del\foro";

Javascript: Barra de scroll
personalizada
(Redirigido desde Barra de scroll personalizada)
P.- ¿Cómo hacer una barraa de scroll personalizada con los iconos formas y colores que
quiera?
<html>
<head>
<title>Barra de desplazamiento</title>
<script>
//Script original de KarlanKas para Forosdelweb.com
//Muchas gracias a todos los que colaboraron en la elaboración de este
script, en especial a JavierB, artífice de la compatibilidad del mismo
con NS.

ancho=700;
altoVentana=300;
altoContenido=700;
altoBoton=20;
anchoBoton=15;
incremento=5;

// ---------------------------NO
EDITAR--------------------------------
recorrido=altoVentana-(2*altoBoton)
altoBarra=recorrido*(altoVentana/altoContenido);
recorridoBarra=recorrido-altoBarra;
incrementoBarra=incremento*(recorridoBarra/(altoContenido-
altoVentana));
recorridoAcumuladoBarra=0;
recorridoAcumuladoContenido=0;
anchoContenido=ancho-anchoBoton;
no=false;
var yy=0;
pulsado=false;
var mouseY;

if (altoVentana>=altoContenido){no=true}
altoBarra+=incrementoBarra+1

estilo='<style>';
estilo+='#ventana{'
estilo+=' height:'+altoVentana+'px;';
estilo+=' width:'+ancho+'px;';
estilo+=' z-index:1;';
estilo+=' border:solid 1px black;';
estilo+=' overflow:hidden;';
estilo+=' position:relative;';

estilo+='}'

estilo+='#botonArriba{ position:absolute;';
estilo+=' padding:0px 0px 0px 0px;';
estilo+=' font:normal 8px/8px courier;';
estilo+=' top:0px;';
estilo+=' width:'+anchoBoton+'px;';
estilo+=' height:'+altoBoton+'px;';

estilo+=' cursor:hand;';
estilo+=' left:'+(ancho-anchoBoton)+'px;';
estilo+=' }'
estilo+='#botonAbajo{ position:absolute;';
estilo+=' padding:0px 0px 0px 0px;';
estilo+=' font:normal 9px/9px courier;';
estilo+=' width:'+anchoBoton+'px;';
estilo+=' height:'+altoBoton+'px;';
estilo+=' top:'+(altoVentana-altoBoton)+'px;';
estilo+=' left:'+(ancho-anchoBoton)+'px;';
estilo+=' cursor:hand;';
estilo+='}';
estilo+='</style>';

estiloContenido='style="';
estiloContenido+=' width:'+(anchoContenido)+'px;';
estiloContenido+=' padding:10px 10px 10px 10px;';
estiloContenido+=' font:normal 10px/15px verdana;';
estiloContenido+=' position:absolute;';
estiloContenido+=' top:0px;'

estiloContenido+=' left:0px;'
estiloContenido+=' background:#ffffcc;';
estiloContenido+=' border-right:solid black 1px;';
estiloContenido+=' height:'+altoContenido+'px;'
;
estiloContenido+=' overflow:hidden;';
estiloContenido+=' text-align:justify;"';

estiloBarra='style="position:absolute;';
estiloBarra+=' width:'+anchoBoton+'px;';
estiloBarra+=' position:absolute;';
estiloBarra+=' top:'+altoBoton+'px;';
estiloBarra+=' z-index:99;';
estiloBarra+=' cursor:hand;';
estiloBarra+=' left:'+(ancho-anchoBoton)
+'px;';
if (no){estiloBarra+=' visibility:hidden;';}
estiloBarra+=' height:'+altoBarra+'px;"';

document.write(estilo);

</script>

<script for="ventana" event="onmousewheel">
if(document.all){mover(event.wheelDelta/30)}
</script>
<script >
function ratonAbajo(){

if (document.all){yy=event.clientY;}
else{yy = coorY; }
pulsado=true;}
</script>
<script>

function mover(hacia){

nB=parseInt(document.getElementById("barra").style.top);
nC=parseInt(document.getElementById("contenido").style.top);

if (((nC+(hacia*incremento))<incremento) && (nC+
(hacia*incremento)>(altoVentana-altoContenido))){
recorridoAcumuladoBarra-=(hacia*incrementoBarra);
recorridoAcumuladoContenido+=(hacia*incremento);

if(recorridoAcumuladoContenido>0){recorridoAcumuladoContenido=0}
if(recorridoAcumuladoBarra<altoBoton)
{recorridoAcumuladoBarra=altoBoton}
if(recorridoAcumuladoBarra> (recorridoBarra+altoBoton))
{recorridoAcumuladoBarr
a=recorridoBarra+altoBoton}

document.getElementById("contenido").style.top=recorridoAcumuladoConte
nido;
document.getElementById("barra").style.top=recorridoAcumuladoBarra;

}}

function ratonMoviendose(){
if(pulsado){
if (document.all){y=event.clientY;}
else{
y = coorY; }
yy=yy-y;
yyy=yy/incrementoBarra;
mover(yyy);
yy=y;
}}
function seVa(){
pulsado=false;

}
</script>
</head>

<body>
<div id="ventana">
<script>
document.write('<div id="contenido" '+estiloContenido+'>');
</script>

1 Texto<br>
2 Texto<br>
3 Texto<br>
4 Texto<br>
5 Texto<br>
6 Texto<br>
7 Texto<br>
8 Texto<br>
9 Texto<br>
10 Texto<br>
-----------------------------------------<br>
11 Texto<br>
12 Texto<br>
13 Texto<br>
14 Texto<br>
15 Texto<br>
16 Texto<br>
17 Texto<br>
18 Texto<br>
19 Texto<br>
20 Texto<br>
-----------------------------------------------------
------------------------------------------------------
-----------------------------------------------------
---------------------------</br>
21 Texto<br>
22 Texto<br>
23 Texto<br>
24 Texto<br>
25 Texto<br>
26 Texto<br>

</div>
<input type="button"
value="?"
id="botonArriba"
onMouseOver="pepe22=window.setInterval('mover(1)',20)"
onMouseOut="window.clearInterval(pepe22)">

<input type="button"
value="?"
id="botonAbajo"
onMouseOver="if(no==false)
{pepe22=window.setInterval('mover(-1)',20)}"
onMouseOut="if(!no){window.clearInterval(pepe22)}"
>

<script>
document.write('<input type="button"');
document.write(' id="barra" onMouseDown="ratonAbajo()"');
document.write(' onMouseMove="ratonMoviendose()"');
document.write(' onMouseUp="seVa()" onMouseOut="seVa()" ');
document.write(estiloBarra);
document.write(' >');

//----------------------RATON EN NS-------------------------------
document.onmousemove = mouseMove;
var ns6 = (document.getElementById && !document.all) ? true: false;
var coorY;
if (ns6)
document.getElementById('barra').addEventListener("mousemove",
mouseMove, true)
function mouseMove(e)
{
if (ns6) {coorY = e.pageY;}
return true;
}
</script>
</div>
</body>
</html>
Javascript: Fondo degradado

(Redirigido desde Fondo degradado)
P .- Como puedo poner un fondo degradado en una página.
R .- Poniendo mediante un script que en primer lugar averigue las dimensiones de la página, y
luego inserte en una capa vacía una tabla vacía pero con el fondo de cada celda con distinto
color. Los tamaños de las celdas, se calculan a partir de los datos del tamaño de la página, y
los colores se generan dinámicamente.
<html>
<head>
<title>
Degradado
</title>
function color(n) {
return "0123456789ABCDEF".charAt(parseInt(n / 16)) +
"0123456789ABCDEF".charAt(parseInt(n % 16));
}

function ini() {
var elFondo = document.getElementById("fondo").style;
var ancho = document.body.clientWidth;
var alto = document.body.clientHeight;
elFondo.width = ancho;
elFondo.height = alto;
var altoCelda = alto / 256;
var tabla = "<table cellpadding=0 cellspacing=0 width=100%
height=100%>";
for (var i = 255; i >= 0; i --)
tabla += "<tr><td width=100% height=" + altoCelda + "
style='background-color: #FF" + color(i) + "00' ></td></tr>"
tabla += "</table>";
document.getElementById("fondo").innerHTML = tabla;
}
</script>
</head>
<body style="margin:0" onresize=ini() onload="ini()">
<div style="position: relative">
<div id=fondo style="position:absolute; top:0; left:0;"></div>
<div id=general style="position:absolute; top:0; left:0;">
<table border=1>
<tr>
<td >
Tabla sin importancia
</td></tr></table>
<div>
</div>
</body>
</html>
Javascript: Cambiar color a las celdas
de una tabla
(Redirigido desde Cambiar color a las celdas de una tabla)
P: ¿Como puedo alterar el color de una celda donde se ha producido un click, retornando luego
al color original cuando se produzca un click en otra celda?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>

</SCRIPT>
</head>

<body>

<table border="1" width="50%">
<tr>
<td bgcolor="green" onclick="ilumina(this)">rrr</td>
<td bgcolor="green" onclick="ilumina(this)">iii</td>
</tr>
<tr>
</tr>
</table>

</body>
</html>
Javascript: Manipulación de strings

(Redirigido desde Manipulación de strings)
P: ¿Como puedo eliminar los espacios en blanco del comienzo o del final de una cadena?
function lTrim(sStr){
while (sStr.charAt(0) == " ")
sStr = sStr.substr(1, sStr.length - 1);
return sStr;
}

function rTrim(sStr){
while (sStr.charAt(sStr.length - 1) == " ")
sStr = sStr.substr(0, sStr.length - 1);
return sStr;
}

function allTrim(sStr){
return rTrim(lTrim(sStr));
}
Ejemplo de uso:
var texto = " Texto con espacios al inicio y al final

";
alert("Original: <" + texto + ">\n" +
"rTrim: <" + rTrim(texto) + ">\n" +
"lTrim: <" + lTrim(texto) + ">\n" +
"allTrim: <" + allTrim(texto) + ">\n");
También, se puede usar expresiones regulares para el efecto:
function lTrim(sStr) {
return sStr.replace(/^\s+/, "");
}
function rTrim(sStr) {
return sStr.replace(/\s+$/, "");
}
function allTrim(sStr) {
return rTrim(lTrim(sStr));
}
Javascript: Calcular el tiempo que tarda
en cargarse una página
(Redirigido desde Calcular el tiempo que tarda en cargarse una página)
P: ¿Como puedo poner en una página el tiempo que ha tardado en cargarse en el navegador
del usuario?
<html>
<head>
var inicio=new Date();
inicio=inicio.getTime();
function ini() {
fin=new Date();
fin=fin.getTime();
tiempo=(fin-inicio)/1000; //Gracias por el consejo, Ferny
document.getElementById('tmp').innerHTML=tiempo;
}
</script>
</head>

<body onLoad="ini()">
Tiempo que ha tardado la página en cargarse: <span
id="tmp">Calculando...</span> segundos.
</body>
</html>
Javascript: Ver la página a distintas

resoluciones
(Redirigido desde Ver la página a distintas resoluciones)
P.- ¿Cómo puedo ver si mi página se verá bien a una resolución menor que la que tiene mi PC
sin tener que cambiar la configuración de la pantalla de mi ordenador?
R.- Esto es un pequeño truco que se vale de la posibilidad de ejectar sentencias de JS en la

barra de Dirección del navegador. Sólo se debe, una vez en la página que queremos ver a otra
resolución, poner en la barra de dirección:
En realidad no debe ser 600 el alto, debería ser 540 poruqe con la barra de inicio se pierde un
espacio (valioso) que ha de tenerse en cuenta. El ejemplo es para todos los que tenemos la
pantalla a 1024x768 o superior y tenemos la fastidiosa labor de hacer páginas a 800x600.
Javascript: Mensaje según la hora
(Redirigido desde Mensaje según la hora)
P: ¿Como puedo mostrar un mensaje en mi pagina dependiendo de la hora?

document.write("<div align='center' style='font:bold 14px verdana;'>")
day = new Date()
hr = day.getHours()
if (hr == 1) document.write("It's after 1 am. Are you still up?")
if (hr == 6) document.write("It's after 6 am, yawn!")
if (hr == 7) document.write("Good Morning! It's after 7 am")
if (hr == 8) document.write("It's after 8 am")
if (hr == 10) document.write("It's after 10 am, coffee time!")
if (hr == 12) document.write("It's after noon")
if (hr == 13) document.write("Good Afternoon! It's after 1 pm")
if (hr == 14) document.write("It's after 2 pm")
if (hr == 17) document.write("Good Evening! It's after 5 pm")
if (hr == 18) document.write("It's after 6 pm, eat some dinner!")
if (hr == 23) document.write("It's after 11 pm, go to bed!")
if (hr == 0) document.write("It's after midnight.")
document.write("</div>")

</script>
Javascript: Reemplazo dentro de un

string
(Redirigido desde Reemplazo dentro de un string)
P.: ¿Cómo puedo sustituir una subcadena por otra en una cadena?

cadena="esta casa es azul";
cadena=cadena.replace("azul","verde");
</script>
Javascript: Eliminación de parte de un

string
(Redirigido desde Eliminación de parte de un string)
P.: ¿Cómo puedo eliminar una subcadena de una cadena?

cadena="esta casa es azul";
cadena=cadena.replace("casa","");
</script>
Javascript: Scroll (marquesina) de

texto
(Redirigido desde Scroll (marquesina) de texto)
P: ¿Como puedo colocar un scroll de texto (marquesina) en mi página?
<html>
<head>

</script>

</head>

<body>
<script>
Javascript: Efecto: Estela en el puntero

del mouse
(Redirigido desde Efecto: Estela en el puntero del mouse)
P: ¿Como dejar una Estela en el puntero del mouse?
R: Copia el siguiente script entre las etiquetas <body> y </body>:


</script>
Dentro del vector colours se almacenan los colores de las diferentes posiciones de la estela, los
cuales pueden ser modificados a gusto propio.
colours=new
Array('#6699FF','#6699FF','#6699FF','#6699FF','#6699FF','#6699FF','#66
99FF','#6699FF','#6699FF')
--ACHAVARRIA invitado, 07 Nov 2003

Javascript: Efecto: "terremoto" en el
navegador
(Redirigido desde Efecto: "terremoto" en el navegador)
P: ¿Como puedo hacer con JavaScript un efecto de "terremoto"?
R: No sé si este efecto sea útil, pero puede resultar algo divertido. Se trata de un JavaScript
que tiene como función realizar un efecto de "terremoto" o "sacudir" la ventana del navegador.
El siguiente script lo ubicamos dentro del cuerpo de la página (entre los tags <body> y </body>)



function shake_xy(n) {
if (self.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);
}
}
}
}

function shake_x(n) {
if (self.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
self.moveBy(i,0);
self.moveBy(-i,0);
}
}
}
}

function shake_y(n) {
if (self.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
self.moveBy(0,i);
self.moveBy(0,-i);
}
}
}
}

//-->
</script>
Y luego realizamos un link a la función:
<a href="javascript:shake_xy(3)">Sacudir pantalla</a>
O con un botón:
<input type=button value="Sacudir pantalla" onclick="shake_x(4)">
Javascript: Texto vertical

(Redirigido desde Texto vertical)
P.-Quiero poner un texto en vertical. ¿Cómo lo hago?

/*******************************
Texto vertical. Por Carlitos. carlosbernad@teleline.es
Si usas este script, deja intactas estas líneas (créditos). Vale?
También te agradecería un e-mail con tus comentarios.
*******************************/

function escribe(msg)
{
cont =0;
while (cont<msg.length)
{
letra = msg.substring(cont,cont+1)
document.write(letra+"<br>")
cont+=1
}
}
</script>
</head>
Javascript: Efecto Fade de colores con

el texto
(Redirigido desde Efecto Fade de colores con el texto)
P: ¿Cómo puedo crear un efecto fade de colores con el texto?

function change()
{
re="rgb("+Math.round(Math.random()*256)+","+Math.round(Math.random()*2
56)+","+Math.round(Math.random()*256)+")"
text.style.color=re;
}
setInterval(change,1000);
</script>
luego en el body pon algo así donde quisieras que el texto con el fade de colores apareciera
<p id="text"> Escribe aquí el mensaje. </p>
Javascript: Citas aleatorias

(Redirigido desde Citas aleatorias)
P: ¿Cómo puedo añadir a mi web citas aleatorias?
En el head pon esto....

var Quotation=new Array()
Quotation[0] = "Foros del Web, el mejor sitio para aprender.";
Quotation[1] = "Escribe las citas que quieras en estos sitios.";
Quotation[2] = "Hoy es un día precioso para aprender algo nuevo";
Quotation[3] = "Soy un probecillo aprendiz.";
Quotation[4] = "Y encima nadie me hace caso en la vida :-(.";
var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation() {
document.write(Quotation[whichQuotation]);}
</script>
Si quieres que aparezca en el body escribe lo siguiente....
<script language="javascript" type="text/javascript"> showQuotation();

</script>
puedes configurarlo para que aparezca donde tu quieras, en una table, en un div, en un iframe,
en un alert, en fin ....
tan solo comentar que puedes ir añadiendo mas citas, todas las que quieras, tan solo, en las
nuevas citas, escribe...
Quotation[5] = "Cuanto más aprendo, mas ignorante me siento";
Quotation[6] = "Creo que algún día tiraré la toalla :-(";
y así sucesivamente con el 7, el 8, el 9, etc.
Javascript: Girar Imágenes

(Redirigido desde Girar Imágenes)
P.- ¿Cómo girar una imagen usando sólo javascript?
R.- La inclusión de soporte para el elemento html estandar llamado canvas en la mayoría de
los navegadores modernos, junto a filtros propietarios del único navegador popular que no
soporta dicho elemento, nos permiten tranquilamente realizar esta tarea. A continuación
mostramos un ejemplo del resultado que obtendremos al aplicar el código abajo detallado:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1" />
<title>test</title>
<script>
function rotar(obj,angulo){
if (angulo >= 0) {
var rotation = Math.PI * angulo / 180;
} else {
var rotation = Math.PI * (360+angulo) / 180;
}
var costheta = Math.cos(rotation);
var sintheta = Math.sin(rotation);
if (document.createElement("canvas").getContext) {
/* ---- canvas ---- */
var c=document.createElement('canvas');
c.width = Math.abs(costheta*obj.width) +
Math.abs(sintheta*obj.height);
c.style.width = c.width+'px';
c.height = Math.abs(costheta*obj.height) +
Math.abs(sintheta*obj.width);
c.style.height=c.height+'px';
c.id=obj.id;
c.style.position='absolute';
var ctx=c.getContext('2d');
ctx.save();
if (rotation <= Math.PI/2) {
ctx.translate(sintheta*obj.height,0);
} else if (rotation <= Math.PI) {
ctx.translate(c.width,-costheta*obj.height);
} else if (rotation <= 1.5*Math.PI) {
ctx.translate(-costheta*obj.width,c.height);
} else {
ctx.translate(0,-sintheta*obj.width);
}
ctx.rotate(rotation);
ctx.drawImage(obj, 0, 0, obj.width, obj.height);
obj.parentNode.replaceChild(c,obj);
ctx.restore();
}else{
/* ---- DXImageTransform ---- */
obj.style.position='absolute';
obj.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMetho
d='auto expand')";
obj.filters.item(0).M11 = costheta;
obj.filters.item(0).M12 = -sintheta;
obj.filters.item(0).M21 = sintheta;
obj.filters.item(0).M22 = costheta;
}
}
window.onload=function(){
rotar(document.getElementById('pp'),60);

}
</script>
</head>

<body>
<img src="1.jpg" width="180" height="127" />
<div id="ll" style="position:relative; "><img id="pp" src="1.jpg"
width="180" height="127" /></div>
</body>
</html>
FECHA Y HORA
Javascript: Mostrar Fecha y Hora

(Redirigido desde Mostrar Fecha y Hora)
P: ¿Cómo puedo mostrar la Fecha y la Hora actual?
<html>
<head>
/*
Fecha y Hora By Chivi
*/

/* Coeminza el script del Reloj */

function actualizaReloj(){

/* Capturamos la Hora, los minutos y los segundos */
marcacion = new Date()

/* Capturamos la Hora */
Hora = marcacion.getHours()

/* Capturamos los Minutos */
Minutos = marcacion.getMinutes()

/* Capturamos los Segundos */
Segundos = marcacion.getSeconds()

/* Si la Hora, los Minutos o los Segundos
Son Menores o igual a 9, le añadimos un 0 */

if (Hora<=9)
Hora = "0" + Hora

if (Minutos<=9)
Minutos = "0" + Minutos

if (Segundos<=9)
Segundos = "0" + Segundos

/* Termina el Script del Reloj */

/* Coemienza eñ Script de la Fecha */

var Dia = new Array("Domingo", "Lunes", "Martes", "Miércoles",
"Jueves", "Viernes", "Sábado", "Domingo");
var Mes = new
Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto
","Septiembre","Octubre","Noviembre","Diciembre");
var Hoy = new Date();
var Anio = Hoy.getFullYear();
var Fecha = "Hoy es " + Dia[Hoy.getDay()] + ", " + Hoy.getDate() + "
de " + Mes[Hoy.getMonth()] + " de " + Anio + ", a las ";

/* Termina el script de la Fecha */

/* Creamos 4 variables para darle formato a nuestro Script */
var Inicio, Script, Final, Total

/*En Inicio le indicamos un color de fuente y un tamaño */
Inicio = "<font size=3 color=red>"

/* En Reloj le indicamos la Hora, los Minutos y los Segundos */
Script = Fecha + Hora + ":" + Minutos + ":" + Segundos

/* En final cerramos el tag de la fuente */
Final = "</font>"

/* En total Finalizamos el Reloj uniendo las variables */
Total = Inicio + Script + Final

/* Capturamos una celda para mostrar el Reloj */
document.getElementById('Fecha_Reloj').innerHTML = Total

/* Indicamos que nos refresque el Reloj cada 1 segundo */
setTimeout("actualizaReloj()",1000)
}
</script>

<body onload="actualizaReloj()">
Aquí mostramos la Fecha y la hora:
<tr>
<td id="Fecha_Reloj"></td>
</tr>
</table>
</body>
</html>
Javascript: Validación de fechas

(Redirigido desde Validación de fechas)
P: ¿Como puedo validar una o mas fechas escritas en elementos TEXT?
<html>
<head>

function esDigito(sChr){
var sCod = sChr.charCodeAt(0);
return ((sCod > 47) && (sCod < 58));
}

function valSep(oTxt){
var bOk = false;
var sep1 = oTxt.value.charAt(2);
var sep2 = oTxt.value.charAt(5);
bOk = bOk || ((sep1 == "-") && (sep2 == "-"));
bOk = bOk || ((sep1 == "/") && (sep2 == "/"));
return bOk;
}

function finMes(oTxt){
var nMes = parseInt(oTxt.value.substr(3, 2), 10);
var nAno = parseInt(oTxt.value.substr(6), 10);
var nRes = 0;
switch (nMes){
case 1: nRes = 31; break;
}
return nRes + (((nMes == 2) && (nAno % 4) == 0)? 1: 0);
}

function valDia(oTxt){
var bOk = false;
var nDia = parseInt(oTxt.value.substr(0, 2), 10);
bOk = bOk || ((nDia >= 1) && (nDia <= finMes(oTxt)));
return bOk;
}

function valMes(oTxt){
var bOk = false;
bOk = bOk || ((nMes >= 1) && (nMes <= 12));
return bOk;
}

function valAno(oTxt){
var bOk = true;
var nAno = oTxt.value.substr(6);
bOk = bOk && ((nAno.length == 2) || (nAno.length == 4));
if (bOk){
for (var i = 0; i < nAno.length; i++){
bOk = bOk && esDigito(nAno.charAt(i));
}
}
return bOk;
}

function valFecha(oTxt){
var bOk = true;
if (oTxt.value != ""){
bOk = bOk && (valAno(oTxt));
bOk = bOk && (valMes(oTxt));
bOk = bOk && (valDia(oTxt));
bOk = bOk && (valSep(oTxt));
if (!bOk){
alert("Fecha inválida");
oTxt.value = "";
oTxt.focus();
} else alert("Fecha correcta");
}
}

</script>
</head>
<body>
<form name="frm">
Escriba fecha (dd/mm/aaaa):
<input type="text" size="10" name="fec">
<br>
<input type="button" value="Validar"

onclick="valFecha(document.frm.fec)">
</form>
</body>
</html>
Javascript: Resta de horas

(Redirigido desde Resta de horas)
P: ¿Como puedo obtener la resta de dos horas almacenadas en elementos TEXT?
<html>
<head>

function padNmb(nStr, nLen){
var sRes = String(nStr);
var sCeros = "0000000000";
return sCeros.substr(0, nLen - sRes.length) + sRes;
}

function stringToSeconds(tiempo){
var sep1 = tiempo.indexOf(":");
var sep2 = tiempo.lastIndexOf(":");
var hor = tiempo.substr(0, sep1);
var min = tiempo.substr(sep1 + 1, sep2 - sep1 - 1);
var sec = tiempo.substr(sep2 + 1);
return (Number(sec) + (Number(min) * 60) + (Number(hor) * 3600));
}

function secondsToTime(secs){
var hor = Math.floor(secs / 3600);
var min = Math.floor((secs - (hor * 3600)) / 60);
var sec = secs - (hor * 3600) - (min * 60);
return padNmb(hor, 2) + ":" + padNmb(min, 2) + ":" + padNmb(sec,
2);
}

function substractTimes(t1, t2){
var secs1 = stringToSeconds(t1);
var secs2 = stringToSeconds(t2);
var secsDif = secs1 - secs2;
return secondsToTime(secsDif);
}

function calcT3(){
with (document.frm)
t3.value = substractTimes(t1.value, t2.value);
}

</script>
</head>
<body>
<form name="frm">
Hora1 (hh:mm:ss): <input type="text" name="t1"
value="12:30:15"><br>
Hora2 (hh:mm:ss): <input type="text" name="t2" value="3:40:18"><br>
<hr>
Resta (hh:mm:ss): <input type="text" name="t3" value=""><br><br>
<input type="button" onclick="calcT3()" value="Restar">
</form>
</body>
</html>
Javascript: Validar un rango de fechas

(Redirigido desde Validar un rango de fechas)
P: ¿Como puedo validar un rango de fechas para que ambos valores sean no vacíos, válidos, y
la fecha hasta sea mayor o igual que la fecha desde?
<html>
<head>

function esDigito(sChr){
var sCod = sChr.charCodeAt(0);
return ((sCod > 47) && (sCod < 58));
}

function valSep(oTxt){
var bOk = false;
bOk = bOk || ((oTxt.value.charAt(2) == "-") &&
(oTxt.value.charAt(5) == "-"));
bOk = bOk || ((oTxt.value.charAt(2) == "/") &&
(oTxt.value.charAt(5) == "/"));
return bOk;
}

function finMes(oTxt){
var nAno = parseInt(oTxt.value.substr(6), 10);
var nRes = 0;
switch (nMes){
}
return nRes + (((nMes == 2) && (nAno % 4) == 0)? 1: 0);
}

function valDia(oTxt){
var bOk = false;
var nDia = parseInt(oTxt.value.substr(0, 2), 10);
bOk = bOk || ((nDia >= 1) && (nDia <= finMes(oTxt)));
return bOk;
}

function valMes(oTxt){
var bOk = false;
bOk = bOk || ((nMes >= 1) && (nMes <= 12));
return bOk;
}

function valAno(oTxt){
var bOk = true;
var nAno = oTxt.value.substr(6);
bOk = bOk && ((nAno.length == 2) || (nAno.length == 4));
if (bOk){
for (var i = 0; i < nAno.length; i++){
bOk = bOk && esDigito(nAno.charAt(i));
}
}
return bOk;
}

function valFecha(oTxt){
var bOk = true;
if (oTxt.value != ""){
bOk = bOk && (valAno(oTxt));
bOk = bOk && (valMes(oTxt));
bOk = bOk && (valDia(oTxt));
bOk = bOk && (valSep(oTxt));
return bOk;
}
}

function fechaMayorOIgualQue(fec0, fec1){
var bRes = false;
var sDia0 = fec0.value.substr(0, 2);
var sMes0 = fec0.value.substr(3, 2);
var sAno0 = fec0.value.substr(6, 4);
var sDia1 = fec1.value.substr(0, 2);
var sMes1 = fec1.value.substr(3, 2);
var sAno1 = fec1.value.substr(6, 4);
if (sAno0 > sAno1) bRes = true;
else {
if (sAno0 == sAno1){
if (sMes0 > sMes1) bRes = true;
else {
if (sMes0 == sMes1)
if (sDia0 >= sDia1) bRes = true;
}
}
}
return bRes;
}

function valFechas(){
var bOk = false;
if (valFecha(document.f1.fec0)){
if (valFecha(document.f1.fec1)){
if (fechaMayorOIgualQue(document.f1.fec1, document.f1.fec0)){
bOk = true;
alert("Ok");
} else {
alert("Rango inválido");
document.f1.fec1.focus();
}
} else {
}
} else {
}
}

</script>
</head>
<body>
<form name="f1">
<table>
<tr>
<td align="right">
Fecha inicial (dd/mm/aaaa):
</td>
<td>
<input type="text" size="10" name="fec0">
</td>
</tr>
<tr>
<td align="right">
Fecha final (dd/mm/aaaa):
</td>
<td>
<input type="text" size="10" name="fec1">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="val" value="Validar"
onclick="valFechas()">
</td>
</tr>
</table>
</form>
</body>
</html>
Javascript: Sumar meses a una fecha

(Redirigido desde Sumar meses a una fecha)
P: ¿Cómo puedo sumar (o restar) una cantidad de meses a una fecha válida?
<html>
<head>
function cerosIzq(sVal, nPos){
var sRes = sVal;
for (var i = sVal.length; i < nPos; i++)
sRes = "0" + sRes;
return sRes;
}

function armaFecha(nDia, nMes, nAno){
var sRes = cerosIzq(String(nDia), 2);
sRes = sRes + "/" + cerosIzq(String(nMes), 2);
sRes = sRes + "/" + cerosIzq(String(nAno), 4);
return sRes;
}

function sumaMes(nDia, nMes, nAno, nSum){
if (nSum >= 0){
for (var i = 0; i < Math.abs(nSum); i++){
if (nMes == 12){
nMes = 1;
nAno += 1;
} else nMes += 1;
}
} else {
if (nMes == 1){
nMes = 12;
nAno -= 1;
} else nMes -= 1;
}
}
return armaFecha(nDia, nMes, nAno);
}

function calcula(){
var sFc0 = document.frm.fecha0.value; // Se asume válida
var nSum = parseInt(document.frm.meses.value);
var sFc1 = sFc0;
if (!isNaN(nSum)){
var nDia = parseInt(sFc0.substr(0, 2));
var nMes = parseInt(sFc0.substr(3, 2));
var nAno = parseInt(sFc0.substr(6, 4));
sFc1 = sumaMes(nDia, nMes, nAno, nSum);
}
document.frm.fecha1.value = sFc1;
}
</script>
</head>
<body>
<form name="frm">
<table border="0">
<tr>
<td>
<table border="1">
<tr>
<td align="right">
Fecha inicial (dd/mm/aaaa)
</td>
<td>
<input type="text" name="fecha0" value="21/03/2002">
</td>
</tr>
<tr>
<td align="right">
Meses
</td>
<td>
<input type="text" name="meses" value="0">
</td>
</tr>
<tr>
<td align="right">
Fecha final (dd/mm/aaaa)
</td>
<td>
<input type="text" name="fecha1" readonly>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="Calcular" onclick="calcula()">
</td>
</tr>
</table>
</form>
</body>
</html>
Javascript: Reloj en la barra de estado

(Redirigido desde Reloj en la barra de estado)
P.- ¿Cómo puedo poner un reloj en la barra de estado?
<html>
<title>Status Hora y día</title>
<head>





</script>

<body onLoad="runClock()">

</body>
</html>
Javascript: Sumar (o restar) días a una

fecha
(Redirigido desde Sumar (o restar) días a una fecha)
P: ¿Como puedo sumar o restar días a una fecha?
<html>
<head>

var aFinMes = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30,
31);

function finMes(nMes, nAno){
return aFinMes[nMes - 1] + (((nMes == 2) && (nAno % 4) == 0)? 1:
0);
}

function padNmb(nStr, nLen, sChr){
for (var i = 0; i < nLen - String(nStr).length; i++)
sRes = sChr + sRes;
return sRes;
}

function makeDateFormat(nDay, nMonth, nYear){
var sRes;
sRes = padNmb(nDay, 2, "0") + "/" + padNmb(nMonth, 2, "0") + "/" +
padNmb(nYear, 4, "0");
return sRes;
}

function incDate(sFec0){
var nDia = parseInt(sFec0.substr(0, 2), 10);
var nMes = parseInt(sFec0.substr(3, 2), 10);
var nAno = parseInt(sFec0.substr(6, 4), 10);
nDia += 1;
if (nDia > finMes(nMes, nAno)){
nDia = 1;
nMes += 1;
if (nMes == 13){
nMes = 1;
nAno += 1;
}
}
return makeDateFormat(nDia, nMes, nAno);
}

function decDate(sFec0){
var nDia = Number(sFec0.substr(0, 2));
var nMes = Number(sFec0.substr(3, 2));
var nAno = Number(sFec0.substr(6, 4));
nDia -= 1;
if (nDia == 0){
nMes -= 1;
if (nMes == 0){
nMes = 12;
nAno -= 1;
}
nDia = finMes(nMes, nAno);
}
}

function addToDate(sFec0, sInc){
var nInc = Math.abs(parseInt(sInc));
var sRes = sFec0;
if (parseInt(sInc) >= 0)
for (var i = 0; i < nInc; i++) sRes = incDate(sRes);
else
for (var i = 0; i < nInc; i++) sRes = decDate(sRes);
return sRes;
}

function recalcF1(){
with (document.formulario){
fecha1.value = addToDate(fecha0.value, increm.value);
}
}

</script>
</head>
<body>
<form name="formulario">
<table>
<tr>
<td align="right">
Fecha (dd/mm/aaaa):
</td>
<td>
<input type="text" name="fecha0" size="10">
</td>
</tr>
<tr>
<td align="right">
Incremento:
</td>
<td>
<input type="text" name="increm" size="3">
</td>
</tr>
<tr>
<td align="right">
Resultado (dd/mm/aaaa):
</td>
<td>
<input type="text" name="fecha1" disabled size="10">
</td>
</tr>
<tr>
<input type="button" onclick="recalcF1()" value="Calcular">
</td>
</tr>
</table>
</form>
</body>
</html>
Javascript: Valores iniciales de un

rango de fechas
(Redirigido desde Valores iniciales de un rango de fechas)
P: ¿Como puedo asignar los valores iniciales a un rango de fechas?
<html>
<head>

// Funciones comunes a todos los métodos de selección

sRes = sChr + sRes;
return sRes;
}

var sRes;
return sRes;
}

function prevMonth(nMonth){
return ((nMonth + 10) % 12) + 1;
}

function prevMonth_Year(nMonth, nYear){
return nYear - (((nMonth + 10) % 12) + 1 == 12? 1: 0);
}

function lastDayOfMonth(nMonth, nYear){
var aMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30,
31);
if ((nMonth == 2) && (nYear % 4 == 0))
return 29;
else
return aMonth[nMonth - 1];
}

function incDate(sFec0){
nDia += 1;
if (nDia > lastDayOfMonth(nMes, nAno)){
nDia = 1;
nMes += 1;
if (nMes == 13){
nMes = 1;
nAno += 1;
}
}
}

function decDate(sFec0){
nDia -= 1;
if (nDia == 0){
nMes -= 1;
if (nMes == 0){
nMes = 12;
nAno -= 1;
}
nDia = lastDayOfMonth(nMes, nAno);
}
}

function addToDate(sFec0, nInc){
var nIncAbs = Math.abs(nInc);
var sRes = sFec0;
if (nInc >= 0)
for (var i = 0; i < nIncAbs; i++) sRes = incDate(sRes);
else
for (var i = 0; i < nIncAbs; i++) sRes = decDate(sRes);
return sRes;
}

// Funciones individuales de cada método de selección

// Esta semana completa (Lun -> Dom)
function setDefaults1(oFrom, oTo){
var dToday = new Date();
var nDay = dToday.getDate();
var nMonth = dToday.getMonth() + 1;
var nYear = dToday.getYear();
var nDOW = dToday.getDay();
var sFirstDate, sLastDate;

if (nDOW == 0) nDOW = 7;
sFirstDate = addToDate(makeDateFormat(nDay, nMonth, nYear), -1 *
(nDOW - 1));
sLastDate = addToDate(sFirstDate, 6);
oFrom.value = sFirstDate;
oTo.value = sLastDate;
}

// Lo que va de esta semana (Lun -> Hoy)

sLastDate = makeDateFormat(nDay, nMonth, nYear);
sFirstDate = addToDate(sLastDate, -1 * (nDOW - 1));
}

// La semana pasada (Lun -> Dom)

sLastDate = addToDate(makeDateFormat(nDay, nMonth, nYear), -1 *
nDOW);
sFirstDate = addToDate(sLastDate, -6);
}

// Los últimos siete días

}

// Este mes completo

sFirstDate = makeDateFormat(1, nMonth, nYear);
sLastDate = makeDateFormat(lastDayOfMonth(nMonth, nYear), nMonth,
nYear);
}

// Lo que va de este mes

}

// El mes pasado

nYear = prevMonth_Year(nMonth, nYear);
nMonth = prevMonth(nMonth);
sLastDate = makeDateFormat(lastDayOfMonth(nMonth, nYear), nMonth,
nYear);
}

// Los últimos treinta días

}

// Este año completo

sFirstDate = makeDateFormat(1, 1, nYear);
sLastDate = makeDateFormat(31, 12, nYear);
}

// Lo que va de este año

sFirstDate = makeDateFormat(1, 1, nYear);
}

// El año pasado

sFirstDate = makeDateFormat(1, 1, nYear - 1);
sLastDate = makeDateFormat(31, 12, nYear - 1);
}

// Los últimos 365 días

}

function setDefaults(oFrom, oTo, nMeth){
switch (nMeth){
case 0:
alert("");
break;
case 1:
setDefaults1(oFrom, oTo);
break;
case 2:
break;
case 3:
break;
case 4:
break;
case 5:
setDefaults5(oFrom, oTo)
break;
case 6:
break;
case 7:
break;
case 8:
break;
case 9:
break;
case 10:
break;
case 11:
break;
case 12:
break;
}
}

</script>
</head>
<body>
<table border="0">
<tr>
<td colspan="2" style="font-family: helvetica; text-align:
center; font-size: 12; font-weight: bold">
VALORES DE INICIO DE UN RANGO DE FECHAS
</td>
</tr>
<tr height="50">
<td align="right">
Tipo de rango:
</td>
<td>
<select name="sel"
onchange="setDefaults(document.formulario.fecha_desde,
document.formulario.fecha_hasta, this.selectedIndex)">
<option>...seleccione</option>
<option>Esta semana completa</option>
<option>Lo que va de esta semana</option>
<option>La semana pasada</option>
<option>Los últimos siete días</option>
<option>Este mes completo</option>
<option>Lo que va de este mes</option>
<option>El mes pasado</option>
<option>Los últimos treinta días</option>
<option>Este año completo</option>
<option>Lo que va de este año</option>
<option>El año pasado</option>
<option>Los últimos 365 días</option>
</select>
</td>
</tr>
<tr>
<td align="right">
Desde (dd/mm/yyyy):
</td>
<td>
<input type="text" name="fecha_desde">
</td>
</tr>
<tr>
<td>
Hasta (dd/mm/yyyy):
</td>
<td>
<input type="text" name="fecha_hasta">
</td>
</tr>
</table>
</form>
</body>
</html>
Javascript: Selector de año, mes y día

(Redirigido desde Selector de año, mes y día)
P: ¿Como puedo hacer un selector de fecha basado en tags <select> que considere permita
seleccionar cualquier fecha válida hasta el día de hoy?
<html>
<head>

var aMeses = new Array("Enero", "Febrero", "Marzo", "Abril",
"Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre",
"Noviembre", "Diciembre")

sRes = sChr + sRes;
return sRes;
}

var sRes;
return sRes;
}

function addOpt(oCntrl, iPos, sTxt, sVal){
var selOpcion = new Option(sTxt, sVal);
oCntrl.options.add(selOpcion, iPos);
}

function lastDayOfMonth(nMonth, nYear){
var aMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30,
31);
if ((nMonth == 2) && (nYear % 4 == 0))
return 29;
else
return aMonth[nMonth - 1];
}

function cambia(nCambiado){
var nAno;
var nMes;
with (document.frm){
nAno = parseInt(ano.options[ano.selectedIndex].value);
switch (nCambiado){
case 0:
llenaMes(mes, nAno);
break;
case 1:
nMes = parseInt(mes.options[mes.selectedIndex].value);
llenaDia(dia, nAno, nMes)
break;
case 2:
nMes = parseInt(mes.options[mes.selectedIndex].value);
nDia = parseInt(dia.options[dia.selectedIndex].value);
res.value = makeDateFormat(nDia, nMes + 1, nAno);
break;
}
}
}

function llenaAno(oAno){
var hoy = new Date();
var ini = 1960;
addOpt(oAno, 0, "", "");
for (var i = ini; i <= hoy.getYear(); i++)
addOpt(oAno, i - ini + 1, String(i), String(i));
}

function llenaMes(oMes, nAno){
var nFin = 11;
while (oMes.length > 0) oMes.remove(0);
if (nAno == hoy.getYear()) nFin = hoy.getMonth();
addOpt(oMes, 0, "", "");
for (var i = 0; i <= nFin; i++)
addOpt(oMes, i + 1, aMeses[i], String(i));
}

function llenaDia(oDia, nAno, nMes){
var nFin = lastDayOfMonth(nMes + 1, nAno);
while (oDia.length > 0) oDia.remove(0);
if (nAno == hoy.getYear() && nMes == hoy.getMonth()) nFin =
hoy.getDate();
addOpt(oDia, 0, "", "");
for (var i = 1; i <= nFin; i++)
addOpt(oDia, i + 1, String(i), String(i));
}

</script>
</head>
<body onload=" llenaAno(document.frm.ano)">
<form name="frm">
<table border="0">
<tr>
<td align="right">
Año:
</td>
<td>
<select name="ano" onchange="cambia(0)" style="width: 80">
</select>
</td>
</tr>
<tr>
<td align="right">
Mes:
</td>
<td>
<select name="mes" onchange="cambia(1)" style="width: 80">
</select>
</td>
</tr>
<tr>
<td align="right">
Día:
</td>
<td>
<select name="dia" onchange="cambia(2)" style="width: 80">
</select>
</td>
</tr>
<tr>
<td align="right">
Fecha:
</td>
<td>
<input type="text" name="res" disabled>
</td>
</tr>
</table>
</form>
</body>
</html>
Javascript: Reloj analógico

(Redirigido desde Reloj analógico)
P.- Cómo poner un reloj analógico en mi web.
R.- En realidad este post es un ejemplo de como manejar grados con JS. Para ello he hecho
este relojillo en el que es la hora, son los segundos y los minutos.
<html>
<head>
<title>Reloj analogico</title>
<script>

var codigo="";
var incremento=-1
var radio=110
var radio2=100
radianes=(2*3.141592/360)

function crear(nombr,radi,hor,destin){
this.nombre=nombr;
this.radio=radi;
this.hora=hor;
this.destino=destin;
}

manecillas=new Array();
manecillas[0]=new
crear("segundero",1,"segundo","http://www.forosdelweb.com/images/smili
es/dedosabajo.gif");
manecillas[1]=new
crear("minutero",0.8,"minuto","http://www.forosdelweb.com/images/smili
es/dedosarriba.gif");
manecillas[2]=new
crear("horero",0.5,"hora","http://www.forosdelweb.com/images/smilies/w
ink.gif");

// -------------- DIBUJAR MANECILLAS ---------------------------
for(numeroIconos=0;numeroIconos<5;numeroIconos++){
for(cadaManecilla=0;cadaManecilla<3;cadaManecilla++){
codigo+='<img id="'+manecillas[cadaManecilla].nombre+numeroIconos+'"
style="z-index:2;position:absolute;top:-300px;"
src="'+manecillas[cadaManecilla].destino+'">\n'}
}
//----------- PONER EL CENTRO DE LA
ESFERA---------------------------------

codigo+='<img style="z-
index:4;position:absolute;top:110px;left:110px;"
src="http://www.forosdelweb.com/images/smilies/smile.gif">'

//------------- DIBUJAR ESFERA --------------------------
for(numero=0;numero<=359;numero+=30){
x=Math.floor((radio2)*Math.cos(radianes*numero));
y=Math.floor((radio2)*Math.sin(radianes*numero));
document.write('<img
src="http://www.forosdelweb.com/images/smilies/risa.gif"
style="position:absolute;left:'+(radio+x)+'px;top:'+(radio+y)
+'px">');
}

//------------------ MAQUINARIA DEL RELOJ --------------

function reloj(){

//-------------SABER LA HORA----------------
ahora=new Date();

document.title=ahora.toLocaleString()

segundo=ahora.getSeconds()*6
minuto=ahora.getMinutes()*6
hora=(ahora.getHours()*30)

hora+=(minuto/12)

//---------PONER 0 GRAD0S EN 90 GRADOS---------------
hora-=90;
minuto-=90;
segundo-=90

//-------MOVER LAS MANECILLAS---------------

for (a=0;a<99;a=a+20){
incremento++
for (m=0;m<3;m++){
manecilla=document.getElementById(manecillas[m].nombre+incremento);
eval("cosa="+manecillas[m].hora);
x=a*manecillas[m].radio*Math.cos(radianes*cosa);
y=a*manecillas[m].radio*Math.sin(radianes*cosa);
manecilla.style.left=x+radio+'px';
manecilla.style.top=y+radio+'px';

}
}
incremento=-1;
}

</script>
</head>

<body onload='reloj();window.setInterval("reloj()",50)'>

<script>document.write(codigo)</script>

</body>
</html>
Javascript: Resta de fechas

(Redirigido desde Resta de fechas)
P: ¿Como puedo saber la cantidad de días, meses y años que hay entre dos fechas?
<html>
<head>
function cerosIzq(sVal, nPos){
var sRes = sVal;
for (var i = sVal.length; i < nPos; i++)
sRes = "0" + sRes;
return sRes;
}

function armaFecha(nDia, nMes, nAno){
var sRes = cerosIzq(String(nDia), 2);
sRes = sRes + "/" + cerosIzq(String(nMes), 2);
sRes = sRes + "/" + cerosIzq(String(nAno), 4);
return sRes;
}

function sumaMes(nDia, nMes, nAno, nSum){
if (nSum >= 0){
if (nMes == 12){
nMes = 1;
nAno += 1;
} else nMes += 1;
}
} else {
if (nMes == 1){
nMes = 12;
nAno -= 1;
} else nMes -= 1;
}
}
return armaFecha(nDia, nMes, nAno);
}

function esBisiesto(nAno){
var bRes = true;
res = bRes && (nAno % 4 == 0);
res = bRes && (nAno % 100 != 0);
res = bRes || (nAno % 400 == 0);
return bRes;
}

function finMes(nMes, nAno){
var nRes = 0;
switch (nMes){
}
return nRes + (((nMes == 2) && esBisiesto(nAno))? 1: 0);
}

function diasDelAno(nAno){
var nRes = 365;
if (esBisiesto(nAno)) nRes++;
return nRes;
}

function anosEntre(nDi0, nMe0, nAn0, nDi1, nMe1, nAn1){
var nRes = Math.max(0, nAn1 - nAn0 - 1);
if (nAn1 != nAn0)
if ((nMe1 > nMe0) || ((nMe1 == nMe0) && (nDi1 >= nDi0)))
nRes++;
return nRes;
}

function mesesEntre(nDi0, nMe0, nAn0, nDi1, nMe1, nAn1){
var nRes;
if ((nMe1 < nMe0) || ((nMe1 == nMe0) && (nDi1 < nDi0))) nMe1 +=
12;
nRes = Math.max(0, nMe1 - nMe0 - 1);
if ((nDi1 > nDi0) && (nMe1 != nMe0)) nRes++;
return nRes;
}

function diasEntre(nDi0, nMe0, nAn0, nDi1, nMe1, nAn1){
var nRes;
if (nDi1 < nDi0) nDi1 += finMes(nMe0, nAn0);
nRes = Math.max(0, nDi1 - nDi0);
return nRes;
}

function mayorOIgual(nDi0, nMe0, nAn0, nDi1, nMe1, nAn1){
var bRes = false;
bRes = bRes || (nAn1 > nAn0);
bRes = bRes || ((nAn1 == nAn0) && (nMe1 > nMe0));
bRes = bRes || ((nAn1 == nAn0) && (nMe1 == nMe0) && (nDi1 >=
nDi0));
return bRes;
}

function calcula(){
var nDi0 = parseInt(sFc0.substr(0, 2), 10);
var nMe0 = parseInt(sFc0.substr(3, 2), 10);
var nAn0 = parseInt(sFc0.substr(6, 4), 10);
var nDi1 = parseInt(sFc1.substr(0, 2), 10);
var nMe1 = parseInt(sFc1.substr(3, 2), 10);
var nAn1 = parseInt(sFc1.substr(6, 4), 10);
if (mayorOIgual(nDi0, nMe0, nAn0, nDi1, nMe1, nAn1)){
var nAno = anosEntre(nDi0, nMe0, nAn0, nDi1, nMe1, nAn1);
var nMes = mesesEntre(nDi0, nMe0, nAn0, nDi1, nMe1, nAn1);
var nDia = diasEntre(nDi0, nMe0, nAn0, nDi1, nMe1, nAn1);
var nTtM = nAno * 12 + nMes;
var nTtD = nDia;
for (var i = nAn0; i < nAn0 + nAno; i++) nTtD +=
diasDelAno(nAno);
for (var j = nMe0; j < nMe0 + nMes; j++) nTtD += finMes(j, nAn1);
var nTSS = Math.floor(nTtD / 7);
var nTSD = nTtD % 7;
document.frm.difDMA.value = String(nAno) + " años, " +
String(nMes) + " meses, " + String(nDia) + " días";
document.frm.difDM.value = String(nTtM) + " meses, " +
String(nDia) + " días";
document.frm.difD.value = String(nTtD) + " días";
document.frm.difSD.value = String(nTSS) + " semanas, " +
String(nTSD) + " días";
} else alert("Error en rango");
}
</script>
</head>
<body>
<form name="frm">
<table border="0">
<tr>
<td>
<table border="1">
<tr>
<td align="right">
Fecha inicial (dd/mm/aaaa)
</td>
<td>
</td>
</tr>
<tr>
<td align="right">
Fecha final (dd/mm/aaaa)
</td>
<td>
</td>
</tr>
<tr>
<td align="right">
Diferencia (D,M,A)
</td>
<td>
<input type="text" name="difDMA" readonly>
</td>
</tr>
<tr>
<td align="right">
Diferencia (D,M)
</td>
<td>
<input type="text" name="difDM" readonly>
</td>
</tr>
<tr>
<td align="right">
Diferencia (D)
</td>
<td>
<input type="text" name="difD" readonly>
</td>
</tr>
<tr>
<td align="right">
Diferencia (SD)
</td>
<td>
<input type="text" name="difSD" readonly>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="Calcular" onclick="calcula()">
</td>
</tr>
</table>
</form>
</body>
</html>
Javascript: Calendario
(Redirigido desde Calendario)
P: ¿Como puedo poner un calendario para seleccionar los campos fecha?
<html>
<head>

var dFec = new Date();
var aMonthNames = new Array(
"January", "February", "March", "April",
"May", "June",
"July", "August", "September", "October",
"November", "December");

function firstOfMonth(dFec){
var dRes = new Date();
dRes.setYear(dFec.getYear());
dRes.setMonth(dFec.getMonth());
dRes.setDate(1);
return dRes;
}

function lastDayOfMonth(dFec){
var dRes = new Date();
var nYear = dFec.getYear();
var nMonth = dFec.getMonth() + 1;
if (nMonth == 12){
nMonth = 0;
nYear++;
}
dRes.setYear(nYear);
dRes.setMonth(nMonth);
dRes.setDate(1);
return new Date(dRes.valueOf() - (24 * 60 * 60 * 1000));
}

function dayToWrite(nDay){
var bisThisMonth = ((dFec.getYear() == dToday.getYear()) &&
(dFec.getMonth() == dToday.getMonth()));
var sDay = String(nDay);
sDay = (nDay == dFec.getDate() && bisThisMonth? "<b><font
color='red'>" + sDay + "</font></b>": sDay);
return sDay;
}

function selectDay(nDay){
var sRes, sDay, sMon, sYea;
sDay = "0" + String(nDay);
sDay = sDay.substr(sDay.length - 2, 2);
sMon = "0" + String(dFec.getMonth() + 1);
sMon = sMon.substr(sMon.length - 2, 2);
sYea = String(dFec.getFullYear());
sRes = sDay + "/" + sMon + "/" + sYea;
opener.document.forms[0].dateResult.value = sRes;
opener.fillDateField();
close();
}

function showCalenContents(){
var dFec0 = firstOfMonth(dFec);
var nDay = 1;
var nLastDay = lastDayOfMonth(dFec).getDate();
var sWeek = "";
var bEnd = false;
var bWri = false;
var nDOW0 = dFec0.getDay();
for (var j = 0; !bEnd; j++){
sWeek = "<tr>";
for (var i = 0; (i < 7) && !bEnd; i++){
bWri = bWri || (i == nDOW0);
if (bWri)
sWeek += "<td align='right' style='cursor: hand'
onclick='parent.selectDay(" + String(nDay) + ")'>" + dayToWrite(nDay,
bWri) + "</td>";
else
sWeek += "<td> </td>";
if (bWri) nDay++;
bEnd = (nDay > nLastDay);
}
if (bEnd)
for (var k = i; k < 7; k++)
sWeek = sWeek + "<td>  </td>";
window.usefull.document.writeln(sWeek + "</tr>");
}
}

function backMonth(){
var nMonth = dFec.getMonth();
var nYear = dFec.getFullYear();
if (--nMonth == -1){
nMonth = 11;
nYear--;
}
dFec.setMonth(nMonth);
dFec.setYear(nYear);
calendary();
}

function forthMonth(){
var nMonth = dFec.getMonth();
if (++nMonth == 12){
nMonth = 0;
nYear++;
}
dFec.setMonth(nMonth);
dFec.setYear(nYear);
calendary();
}

function backYear(){
dFec.setYear(--nYear);
calendary();
}

function forthYear(){
dFec.setYear(++nYear);
calendary();
}

function showCalen(){
with (window.usefull.document){
write("<table border='0' width='100%'
height='100%'><tr><td><table border='0' width='100%'><tr>");
write("<td width='10'><input type='button' name='bckYear'
value='<<' onclick='parent.backYear()'></td>");
write("<td width='10'><input type='button' name='bckMonth'
value='<' onclick='parent.backMonth()'></td>");
write("<td align='center'><b>" +
aMonthNames[dFec.getMonth()].substr(0, 3) + ", " +
String(dFec.getYear()) + "</b></td>");
write("<td width='10'><input type='button' name='ForMonth'
value='>' onclick='parent.forthMonth()'></td>");
write("<td width='10'><input type='button' name='ForYear'
value='>>' onclick='parent.forthYear()'></td>");
write("</tr></table></tr><tr><td>");
write("<table border='0'>");
write("<tr><td><b>Su</b></td><td><b>Mo</b></td><td><b>Tu</b></td><td><
b>We</b></td><td><b>Th</b></td><td><b>Fr</b></td><td><b>Sa</b></td></t
r>");
showCalenContents();
write("</table></td></tr></table>");
}
}

function calendary(){
with (window.usefull.document){
open();
writeln("<html><head></head><body>");
writeln("<form name='frm'>");
showCalen();
writeln("</form></body></html>");
close();
}
}

</script>
<head>
<frameset rows="100%,*" border="0" frameborder="no" framespacing="0"
onload="calendary()">
<frame name="usefull" src="DummyPg.htm" frameborder="no"
marginheight="0" marginwidth="0" scrolling="no">
<frame name="useless" src="DummyPg.htm" frameborder="no"
marginheight="0" marginwidth="0" scrolling="no">
</frameset>
Modo de uso: testCalen.htm
<html>
<head>

var nInput;

function calen(n){
var oWnd;
nInput = n;
oWnd = open("Calendario.htm", "fechas",
"location=no,menubar=no,resizable=no,scrollbars=no,status=no,toolbar=n
o,width=180,height=200");
oWnd.focus();
}

function fillDateField(){
with (document.frm)
if (nInput == 1)
fechaInicial.value = dateResult.value;
else
fechaFinal.value = dateResult.value;
}

</script>
<head>
<body>
<form name="frm">
<table border="0">
<tr>
<td>
Desde
</td>
<td>
<input type="text" name="fechaInicial">
<input type="button" value="..." onclick="calen(1)">
</td>
</tr>
<tr>
<td>
Hasta
</td>
<td>
<input type="text" name="fechaFinal">
<input type="button" value="..." onclick="calen(2)">
</td>
</tr>
</table>
<input type="hidden" name="dateResult">
</form>
<body>
<html>
Página "dummy": DummyPg.htm
<html>
<head>
</head>
<body>
</body>
</html>
Javascript: Formato de fecha

(Redirigido desde Formato de fecha)
P: ¿Cómo puedo mostrar la fecha en formato "28 de Septiembre del 2003"?
<html>
<head>
// función que muestra la fecha en formato Viernes, 26 de
Septiembre del 2003
// parámetro una fecha (se asume que es válida)

function showdate(mydate){
var year = mydate.getYear()
if (year < 1000)
year += 1900
var day = mydate.getDay()
var month = mydate.getMonth()
var daym = mydate.getDate()
if (daym < 10)
daym = "" + daym
var dayarray = new
Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábad
o")
var montharray = new
Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto
","Septiembre","Octubre","Noviembre","Diciembre")
return dayarray[day] + ", " + daym + " de " + montharray[month] +
" del " + year;
}

// y la llamada a la función
document.write(showdate(new Date()))
</script>
</head>
<body>
</body>
</html>
Javascript: Validar hora

(Redirigido desde Validar hora)
P.- Quiero un script que me valide la hora

// script para validar una hora en formato 24h. Por Carlitos
(carlosbernad@teleline.es)//
function valida(str)
{
hora=str.value
if (hora.length!=4) {alert("introducir HHMM");return}
a=hora.charAt(0)
b=hora.charAt(1)
c=hora.charAt(2)
if (a>=2 && b>3) {alert("hora mal :(");return}
if (c>5) {alert("minutos mal :(");return}
alert("hora bien. :)")
}
</script>
Hora (HHMM):<input type="text" name="hhmm" size="4">
<input type="button" value="Valida" onclick="valida(hhmm)">
Versión 2. (Modificación de la versión 1 por AnaLezama)

// Por AnaLezama
function CheckTime(str)
{
hora=str.value
if (hora=='') {return}
if (hora.length>8) {alert("Introdujo una cadena mayor a 8
caracteres");return}
if (hora.length!=8) {alert("Introducir HH:MM:SS");return}
a=hora.charAt(0) //<=2
b=hora.charAt(1) //<4
c=hora.charAt(2) //:
d=hora.charAt(3) //<=5
e=hora.charAt(5) //:
f=hora.charAt(6) //<=5
if ((a==2 && b>3) || (a>2)) {alert("El valor que introdujo en la Hora
no corresponde, introduzca un digito entre 00 y 23");return}
if (d>5) {alert("El valor que introdujo en los minutos no corresponde,
introduzca un digito entre 00 y 59");return}
if (f>5) {alert("El valor que introdujo en los segundos no
corresponde");return}
if (c!=':' || e!=':') {alert("Introduzca el caracter ':' para separar
la hora, los minutos y los segundos");return}
</script>
}
<input type=text name=txtHora onBlur="CheckTime(this)" size=12
maxlength=10>
Formularios
Javascript:¿Cómo puedo hacer para que

al cambiar la opción seleccionada en un
combo, cambien también las opciones
disponibles en otro combo?
[ver ejemplo]
<html>
<head>
<title>
FAQ-1: Selects
</title>

var selOpcion=new Option(sTxt, sVal);
eval(oCntrl.options[iPos]=selOpcion);
}

function cambia(oCntrl){
while (oCntrl.length) oCntrl.remove(0);
switch (document.frm.pais.selectedIndex){
case 0:
addOpt(oCntrl, 0, "Ciudad de México", "0");
addOpt(oCntrl, 1, "Monterrey", "1");
addOpt(oCntrl, 2, "Guadalajara", "2");
break;
case 1:
addOpt(oCntrl, 0, "Madrid", "0");
addOpt(oCntrl, 1, "Barcelona", "1");
addOpt(oCntrl, 2, "San Sebastián", "2");
break;
case 2:
addOpt(oCntrl, 0, "Caracas", "0");
addOpt(oCntrl, 1, "Coro", "1");
addOpt(oCntrl, 2, "Maracay", "2");
addOpt(oCntrl, 3, "Valencia", "3");
break;
}
}
</script>
</head>
<body>
var w = 400;
var h = 150;
resizeTo(w, h);
moveTo((screen.width - w)/ 2, (screen.height - h)/ 2);
</script>
<form name="frm">
<table border="0">
<tr>
<td>
País
</td>
<td>
<select name="pais" onchange="cambia(document.frm.ciudad)">
<option value="Mex">México</option>
<option value="Esp">España</option>
<option value="Ven">Venezuela</option>
</select>
</td>
<td>

</td>
<td>
Ciudad
</td>
<td>
<select name="ciudad">
<option value="0">Ciudad de México</option>
<option value="1">Monterrey</option>
<option value="2">Guadalajara</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Javascript:¿Cómo puedo conocer el

valor del radiobutton seleccionado?
Teniendo un grupo de Radios así:
<form id="formulario">
<input type="radio" name="rad" value="1" />
</form>
Se puede conocer el valor de la opción seleccionada recorriendo el grupo con un bucle for:
function radiovalue(radios) {
for (i = 0; radio = radios[i]; i++) {
if (radio.checked) {
return radio.value;
}
}
}
Para el HTML de ejemplo descrito más arriba la llamada a la función se haría así:
var grupo = document.getElementById("formulario").rad;

alert(radiovalue(grupo));
Javascript:¿Cómo puedo deshabilitar un

elemento a partir del valor de otro?
[ver ejemplo]
<html>
<head>
</head>
<body>
<form name="frm">
Seleccione:
<select name="sel">
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select><br>
<input type="checkbox" name="chk" checked="checked"
onclick="document.frm.sel.disabled = !this.checked">Habilitar
selección
</form>
</body>
</html>
Javascript:¿Cómo puedo contar el

número de caracteres escritos en un
área de texto de un formulario?
[ver ejemplo]
<html>
<head>

var primeraVez = true;

function limpia(){
if (primeraVez){
document.formulario.mensaje.value = "";
primeraVez = false;
}
}

function cuenta(){
document.formulario.total.value =
document.formulario.mensaje.value.length;
}

</script>
</head>
<body>
<textarea name="mensaje" onfocus="limpia()" onKeyUp="cuenta()"
rows="10" cols="50">
</textarea>
<input type="text" name="total" size="5" maxlength="3" disabled>
Caracteres
</form>
</body>
</html>
Javascript:¿Cómo puedo validar que

varios campos de texto no estén
vacíos?
[ver ejemplo]
<html>
<head>
function noVacio() {
var i;
var n = parseInt(document.frm.cantidad.value);
var bError = false;

for (i = 0; i < n; i++){
bError = bError || (eval("document.frm.elemento" + i + ".value ==
''"));
if (bError){
alert("Campo inválido");
eval("document.frm.elemento" + i + ".focus()");
break;
}
}
if (!bError) alert("Ok");
}

</script>
</head>
<body>
<form name="frm">
<input type="text" name="elemento0"><br>
<input type="hidden" name="cantidad" value="3">
<input type="button" name="enviar" value="enviar"
onclick="noVacio()">
</form>
</body>
</html>
Javascript:¿Cómo puedo comprobar si

un checkbox está seleccionado?
[ver ejemplo] Si tenemos un único checkbox, podemos hacer de la siguiente manera:
<html>
<head>
function estado(){
if (document.frm.chk.checked)
alert("Marcado");
else
alert("Desmarcado");
}
</script>
</head>
<body>
<form name="frm" onClick="estado()">
<input type="checkbox" name="chk">Selector<br>
</form>
</body>
</html>
Si queremos validar que por lo menos un checkbox esté marcado dentro de un grupo, podemos
hacerlo de esta manera:
function checkvalidate(checks) {
for (i = 0; lcheck = checks[i]; i++) {
if (lcheck.checked) {
return true;
}
}
return false;
}
Por ejemplo, si tuviéramos un formulario como el siguiente:
<form id="formulario">
<input type="radio" name="chk" value="1" />
</form>
La llamada a la función sería:
var grupo = document.getElementById("formulario").chk;

if (checkvalidate(grupo)) {
alert("Por lo menos uno de los checkbox está marcado");
} else {
alert("Ninguno de los checkbox está marcado");
}
Javascript:¿Cómo comprobar si todos

los radios buttons de un formulario han
sido respondidos?
var el = document.(tu formulario).elements;
for (var i = 0 ; i < el.length ; ++i) {
if (el[i].type == "radio") {
var radiogroup = el[el[i].name];
var itemchecked = false;
for (var j = 0 ; j < radiogroup.length ; ++j) {
if (radiogroup[j].checked) {
itemchecked = true;
break;
}
}
if (!itemchecked) {
i=0;
break;
}
}
}
if (i>0) {
return true;
} else {
alert("No ha respondido todas las preguntas");
return false;
}
Javascript:¿Cómo puedo habilitar o

deshabilitar un campo de texto según la
opción seleccionada en un radiobutton?
[ver ejemplo]
<html>
<head>

function habilita(){
document.frm.txt.disabled = false;
}

function deshabilita(){
document.frm.txt.disabled = true;
document.frm.txt.value = "";
}

</script>
</head>
<body>
<form name='frm'>
<b>Sexo:</b><br>
<input type="radio" name="rad" value="M" onclick="deshabilita()">
Masculino<br>
<input type="radio" name="rad" value="F" onclick="deshabilita()">
Femenino<br>
<input type="radio" name="rad" value="O" onclick="habilita()">
Otro (Indique cual:
<input type='text' name='txt' disabled>)
</form>
</body>
</html>
Javascript:¿Cómo puedo presentar una
vista preliminar de los datos de mi
formulario para que desde ella el
usuario envíe o cancele el envío de
dicho formulario?
[ver ejemplo]
<html>
<head>

function enviar(){
//document.frm2.submit();
alert("Documento enviado");
history.back();
}

function regresar(){
//document.frm2.submit();
history.back();
}

function confirma(){
var sNmb;
sNmb = document.frm.nmb.value;
sApe = document.frm.ape.value;
sPrf = document.frm.prf.value;
with (document){
open();
write("<html><head>");
write(" </head><body><form name='frm2'>");
write(" <table border='0'>");
write(" <tr>");
write(" <td>");
write(" Nombre:");
write(" </td>");
write(" <td width='50' align='right'>");
write(sNmb);
write(" </td>");
write(" </tr>");
write(" <tr>");
write(" <td>");
write(" Apellido:");
write(" </td>");
write(" <td align='right'>");
write(sApe);
write(" </td>");
write(" </tr>");
write(" <tr>");
write(" <td>");
write(" Profesión:");
write(" </td>");
write(" <td align='right'>");
write(sPrf);
write(" </td>");
write(" </tr>");
write(" <tr>");
write(" <td colspan='2' align='center'>");
write(" <input type='submit' onclick='JavaScript:alert(" +
'"' + "Documento enviado" + '"' + ");history.back()' value='Enviar
estos valores'>");
write(" <input type='button'
onclick='JavaScript:history.back()' value='Volver sin enviar'>");
write(" </td>");
write(" </tr>");
write(" </table>");
write("</form></body></html>");
close();
}
}

</script>
</head>
<body>
<form name="frm">
<table border="1">
<tr>
<td>
Nombre:
</td>
<td>
<input type="text" name="nmb">
</td>
</tr>
<tr>
<td>
Apellido:
</td>
<td>
<input type="text" name="ape">
</td>
</tr>
<tr>
<td>
Profesión:
</td>
<td>
<input type="text" name="prf">
</td>
</tr>
<tr>
<input type="button" onclick="confirma()" value="Enviar">
</td>
</tr>
</table>
</form>
</body>
</html>
Javascript:¿Cómo puedo mostrar un

texto(pregunta) tras seleccionar un
radio button?
<html>
<head>
<script>
function Pregunta1(){
document.getElementById('pregunta').innerHTML = "¿Cuál es la pregunta
1?<br>"
document.form.texto.value = "Respuesta 1"}
2?<br>"
3?<br>"
4?<br>"
</script>
</head>
<body>
<form name=form>
<input type="radio" name="Radio" value="Uno"
Onfocus="Pregunta1()">Uno<br>
<input type="radio" name="Radio" value="Dos"
Onfocus="Pregunta2()">Dos<br>
<input type="radio" name="Radio" value="Tres"
Onfocus="Pregunta3()">Tres<br>
<input type="radio" name="Radio" value="cuatro"
Onfocus="Pregunta4()">Cuatro<br>
<table border=0 cellpadding=0 cellspacing=0 width="100%"
style="border-collapse: collapse" bordercolor="#111111">
<tr>
<td id="pregunta">Seleccione una Opción</td>
</tr>
<tr>
<td><input type="text" name="texto"></td>
</tr>
</table>
</form>
</body>
</html>
Javascript:Textbox con botones para

formato (tipo ForosDelWeb)
[ver ejemplo]
El siguiente script es un extracto del usado en los ForosDelWeb, en su versión anterior.
Créditos: Tukzone, SirMatrix y UnKnown.
NOTAS: Se debe reemplazar "java script" por "JavaScript" para que funcione.
Se ha reportado que no funciona correctamente en NetScape 4.
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT language="Javascript" type="text/javascript">

// Este genial Script fue desarrollado por Tukzone, SirMatrix y
Unknow,
// todos usuarios del Foro.. Gracias a ellos por su colaboración

function storeCaret(text) {
if (text.createTextRange) {
text.caretPos = document.selection.createRange().duplicate();
}
}

function meter(text) {
var postopic = document.PostTopic.Message;
if (postopic.createTextRange && postopic.caretPos) {
var caretPos = postopic.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) ==
' ' ?

text + ' ' : text;
}
else postopic.value += text;
postopic.focus(caretPos)
}

function codigo(accion) {
switch(accion) {
case "url":
url = prompt("URL de el Enlace", "http://");
if(url) {
url="[ a]"+url+"[ /a]";
meter(url);
}
break;
case "bold":
negras = prompt("Texto en Negritas", "");
if(negras) {
negras="[ b]"+negras+"[ /b]";
meter(negras);
}
break;
case "italics":
italics = prompt("Texto en Italicas", "");
if(italics) {
italics="[ i]"+italics+"[ /i]";
meter(italics);
}
break;
case "code":
code="[ code] [ /code]";
meter(code);
break;
case "quote":
quote="[ quote] [ /quote]";
meter(quote);
break;
default:
meter(accion);
break;
}
}

function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit)
field.value = field.value.substring(0, maxlimit);
else
countfield.value = maxlimit - field.value.length;
}
</script>
<form name="PostTopic">
Nombre de usuario:
<INPUT TYPE="text" NAME="UserName" SIZE="12" MAXLENGTH="25"

VALUE='Kaopectate'>
Password:
<input maxLength="13" name="Password" size="12" type="password"

VALUE='**********'>
Mensaje:
<textarea

onKeyDown="textCounter(this.form.Message,this.form.remLen,2000);"

onKeyUp="javascript:storeCaret(this);

textCounter(this.form.Message,this.form.remLen,2000);" name="Message"

onchange="javascript:storeCaret(this);"

onclick="javascript:storeCaret(this);" rows="10" wrap="VIRTUAL"
cols="45">
</textarea>
<a href="javascript:codigo('url')">Enlace</a>
<a href="javascript:codigo('bold')">negrita</a>
<a href="javascript:codigo('italics')">italica</a>
<a href="javascript:codigo('code')">codigo</a>
<a href="javascript:codigo('quote')">citar</a>
Tiene
<input readonly type=text name=remLen size=5 maxlength=3
value="2000">
caracteres para su mensaje.
</form>
</BODY>
</HTML>
Javascript:¿Cómo valido que el email

colocado por el usuario tenga el
simbolo de "@" ?
[ver ejemplo]
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
function validar_email() {
if (document.formu.EMAIL.value.indexOf('@') == -1)
alert ("Debes colocar una \"Dirección de Email\" válida");
document.formu.EMAIL.focus() //Esto recorna el cursor al campo "Email"
else {
document.formu.submit();
}
}
</SCRIPT>
</HEAD>

<BODY>
<FORM NAME="formu" METHOD="POST" ACTION="Tu.Accion">
Ingresa tu Email: <INPUT NAME="EMAIL" TYPE="text"><BR>
<INPUT type="button" name="ENVIAR" value="Agregar"
onClick="JavaScrpit:validar_email();">
</FORM>
Javascript:¿Cómo se puede impedir que

se ingrese un dato no numérico?
function LP_data(evt){
var key = evt.which || event.keyCode; // Código de tecla.
if ((key < 48 || key > 57) && key != 8){ // Si no es número o
retroceso
if (evt.preventDefault) {
evt.preventDefault();
} else {
event.returnValue = false;
}
}
}
<input type="text" name="numero" onkeypress="LP_data(event);" />
Javascript:¿Cómo puedo preasignar el

valor de un botón de radio?
[ver ejemplo]
<html>
<head>
function Sel(n){
document.frm.rad[n - 1].checked = true;
}
</script>
</head>
<body>
<form name="frm">
<input type="radio" name="rad" value="1">Uno<br>
<input type="radio" name="rad" value="2">Dos<br>
<input type="button" name="uno" value="Uno" onclick="Sel(1)">
<input type="button" name="dos" value="Dos" onclick="Sel(2)">
</form>
</body>
</html>
Javascript:¿Cómo substituir los botones

de un formulario por imágenes?
[Ejemplo]
<FORM name="frm" method="post" ACTION="javascript:alert('Este

formulario no hace nada')">
<INPUT type="text" name="campo1">
<INPUT type="text" name="campo2">
<A href="javascript:document.frm.submit();"><IMG
src="imagen_submit.gif" border="0"></A>

<A href="javascript:document.frm.reset();"><IMG src="imagen_reset.gif"
border="0"></A>
</FORM>
También, es posible hacerlo sólo con HTML para evitar problemas en caso de que Javascript
esté desactivado:
<form name="frm" method="post" action="">

<fieldset>
<input type="text" name="campo1" />
<input type="text" name="campo2" />
<button type="submit" style="border: 0;"><img
src="imagen_submit.gif" alt="Enviar" /></button>
<button type="reset" style="border: 0;"><img
src="imagen_reset.gif" alt="Limpiar" /></button>
</fieldset>
</form>
Javascript:¿Cómo puedo presentar un
número entero usando separadores de
miles?
[ver ejemplo]
<html>
<head>
function formatNmb(nNmb){
var sRes = "";
for (var j, i = nNmb.length - 1, j = 0; i >= 0; i--, j++)
sRes = nNmb.charAt(i) + ((j > 0) && (j % 3 == 0)? ".": "") +
sRes;
return sRes;
}
</script>
</head>
<body>
<table border="1">
document.writeln("<tr><td>" + 13528 + "</td><td>" +
formatNmb( "13528") + "</td></tr>");
formatNmb( "412") + "</td></tr>");
formatNmb( "1378528") + "</td></tr>");
formatNmb( "213528") + "</td></tr>");
formatNmb("1234567890") + "</td></tr>");
</script>
</table>
</body>
</html>

una dirección de correo sea
consistente?
[ver ejemplo]
<html>
<head>
function Validar(form){
var pos1, pos2, bOk = true;
var sDir = document.frm.dir.value;
if (sDir == ""){
alert("Por favor ingrese su dirección de correo");
document.frm.dir.focus();
return false;
}
pos1 = sDir.indexOf('@', 0);
pos2 = sDir.indexOf('.', 0);
bOk = bOk && (pos1 > 0);
bOk = bOk && (pos2 != -1);
bOk = bOk && (pos1 < pos2 - 1);
bOk = bOk && (pos2 < sDir.length - 1);
if (!bOk){
alert("Dirección de correo inválida");
document.frm.dir.focus();
return false;
}
}
</script>
</head>
<body>
<form name="frm" method="post" action="" onSubmit="return
Validar(this);">
Dirección de correo:
<input type="text" name="dir">
<input type="submit">
</form>
</body>
</html>
Javascript:¿Cómo puedo contar el

número de palabras dentro de un
textarea?
[ver ejemplo]
<html>
<head>
function calcula(){
var sTxt = document.frm.txt.value;
var sTx2 = "";
var sSep = document.frm.sep.value;
var iRes = 0;
var bPalabra = false;
for (var j = 0; j < sTxt.length; j++){
if (sSep.indexOf(sTxt.charAt(j)) != -1){
if (bPalabra) sTx2 += " ";
bPalabra = false;
} else {
bPalabra = true;
sTx2 += sTxt.charAt(j);
}
}
if (sTx2.charAt(sTx2.length - 1) != " ") sTx2 += " ";
for (var j = 0; j < sTx2.length; j++)
if (sTx2.charAt(j) == " ") iRes++;
if (sTx2.length == 1) iRes = 0;
alert("Número de palabras: " + String(iRes));
}
</script>
</head>
<body>
<form name="frm">
Texto:<br>
<textarea name="txt" rows="5" cols="80"></textarea><br><br>
Separadores:
<input type="text" name="sep" value=" ,.;:"><br><br>
<input type="button" name="btn" value="Calcular"
onclick="calcula()">
</form>
</body>
</html>
Javascript:¿Cómo puedo redireccionar

lo escrito en un elemento HTML hacia
otro elemento?
[ver ejemplo]
<html>
<head>
function redirecciona(){
if (oTrap.checked){
oOutput.innerText += "[trap = " + event.keyCode + "]";
} else oOutput.innerText += String.fromCharCode(event.keyCode);
}
</script>
</head>
<body>
<table border="0">
<tr>
<td>
Texto:<input id="oExample" type="text"
onkeydown="redirecciona()">
</td>
<td>
<input type="checkbox" id="oTrap"> Modo debug
</td>
</tr>
<tr>
<td colspan="2">
<textarea id="oOutput" rows="10" cols="50"></textarea>
</td>
</tr>
</table>
</body>
</html>
Javascript:¿Cómo puedo filtrar los

elementos que conforman un select de
acuerdo a lo tipeado en un área de
texto?
[ver ejemplo]
<html>
<head>

var i;

function addOpt(oCntrl, sTxt, sVal, sCnd){
if (sTxt.substr(0, sCnd.length).toUpperCase() ==
sCnd.toUpperCase()){
eval(oCntrl.options[i++]=selOpcion);
}
}

var txtVal = document.frm.txt.value;
while(oCntrl.length > 0) oCntrl.options[0]=null;
i = 0;
oCntrl.clear;
addOpt(oCntrl, "Ciudad de México", "0", txtVal);
addOpt(oCntrl, "Ciudad de Panamá", "0", txtVal);
addOpt(oCntrl, "Ciudad de Guatemala", "0", txtVal);
addOpt(oCntrl, "Caracas", "0", txtVal);
addOpt(oCntrl, "Cancún", "0", txtVal);
addOpt(oCntrl, "Maracay", "0", txtVal);
addOpt(oCntrl, "Maracaibo", "0", txtVal);
addOpt(oCntrl, "Zaragoza", "0", txtVal);
}
</script>
</head>
<body onload="cambia(document.frm.ciudad)">
<form name="frm">
<table border="0">
<tr>
<td>
Ciudad:
</td>
<td>
<input type="text" name="txt"
onkeyup="cambia(document.frm.ciudad)">
</td>
<td>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Javascript:¿Cómo puedo hacer una

interfase con la que pueda llenar una
lista en base a los elementos de otra
lista?
[ver ejemplo]
<html>
<head>
<script language="javascript">
var aList = new Array("uno", "dos", "tres", "cuatro", "cinco",
"seis", "siete", "ocho", "nueve", "diez");
var aIzqu = new Array(true, true, true, true, true, true, true,
true, true, true);
var i, j, nIzq, nDer, maxIzq, maxDer;

nIzq = 0;
nDer = 0;
maxIzq = aList.length;
maxDer = 0;

function agregaTodos(){
for (i = 0; i < aList.length; i++)
aIzqu[i] = false;
maxIzq = 0;
maxDer = aList.length;
nIzq = 0;
formulario();
}

function indiceIzqReal(nInd){
var bFin = false;
var i = 0;
var j = -1;
for (;!bFin;){
if (aIzqu[i]) j++;
bFin = ((j == nInd) || (i >= aList.length));
if (!bFin) i++;
}
return i;
}

function indiceDerReal(nInd){
var bFin = false;
var i = 0;
var j = -1;
for (;!bFin;){
if (!aIzqu[i]) j++;
bFin = ((j == nInd) || (i >= aList.length));
if (!bFin) i++;
}
return i;
}

function agregaActual(){
var bFin = false;
var nInd = indiceIzqReal(nIzq);
aIzqu[nInd] = false;
if (nIzq == maxIzq - 1) nIzq--;
maxIzq--;
maxDer++;
formulario();
}

function eliminaActual(){
var bFin = false;
var nInd = indiceDerReal(nDer);
aIzqu[nInd] = true;
if (nDer == maxDer - 1) nDer--;
maxIzq++;
maxDer--;
formulario();
}

function eliminaTodos(){
for (i = 0; i < aList.length; i++)
aIzqu[i] = true;
maxIzq = aList.length;
maxDer = 0;
nDer = 0;
formulario();
}

function primeroIzq(){
nIzq = 0;
formulario();
}

function primeroDer(){
nDer = 0;
formulario();
}

function siguienteIzq(){
if (nIzq < maxIzq - 1)
nIzq++;
formulario();
}

function siguienteDer(){
if (nDer < maxDer - 1)
nDer++;
formulario();
}

function anteriorIzq(){
if (nIzq > 0)
nIzq--;
formulario();
}

function anteriorDer(){
if (nDer > 0)
nDer--;
formulario();
}

function ultimoIzq(){
nIzq = maxIzq - 1;
formulario();
}

function ultimoDer(){
nDer = maxDer - 1;
formulario();
}

function formulario(){
with (window.pantalla.document){
open();
writeln("<html>");
writeln(" <head>");
writeln(" </head>");
writeln(" <body>");
writeln(" <form name='formulario'>");
writeln(" <table border='0'>");
writeln(" <tr>");
writeln(" <td>");
writeln(" <textarea name='opciones' rows='10'>");
for (i = 0, j = 0; i < aList.length; i++){
if (aIzqu[i]){
if (j == nIzq)
writeln('>>' + aList[i] + '<<')
else
writeln(aList[i]);
j++;
}
}
writeln(" </textarea>");
writeln(" </td>");
writeln(" <td>");
writeln(" <tr>");
writeln(" <td>");
writeln(" <input type='button' value='>>'
onclick='parent.agregaTodos()'>");

writeln(" </td>");
writeln(" </tr>");
writeln(" <tr>");
writeln(" <td>");
writeln(" <input type='button' value='> '
onclick='parent.agregaActual()'>");

writeln(" </td>");
writeln(" </tr>");
writeln(" <tr>");
writeln(" <td>");
writeln(" <input type='button' value=' <'
onclick='parent.eliminaActual()'>");

writeln(" </td>");
writeln(" </tr>");
writeln(" <tr>");
writeln(" <td>");
writeln(" <input type='button' value='<<'
onclick='parent.eliminaTodos()'>");

writeln(" </td>");
writeln(" </tr>");
writeln(" </table>");
writeln(" </td>");
writeln(" <td>");

writeln(" <textarea name='seleccionados' rows='10'>");
for (i = 0, j = 0; i < aList.length; i++){
if (!aIzqu[i]){
if (j == nDer)
writeln('>>' + aList[i] + '<<')
else
writeln(aList[i]);
j++;
}
}
writeln(" </textarea>");

writeln(" </td>");
writeln(" </tr>");
writeln(" <tr>");
writeln(" </tr>");
writeln(" <td>");
writeln(" <tr>");
writeln(" <td>");
writeln(" <input type='button' value='Pri'
onclick='parent.primeroIzq()'>");
writeln(" </td>");
writeln(" <td>");
writeln(" <input type='button' value='Ant'
onclick='parent.anteriorIzq()'>");
writeln(" </td>");
writeln(" <td>");
writeln(" <input type='button' value='Sig'
onclick='parent.siguienteIzq()'>");
writeln(" </td>");
writeln(" <td>");
writeln(" <input type='button' value='Ult'
onclick='parent.ultimoIzq()'>");
writeln(" </td>");
writeln(" </tr>");
writeln(" </td>");
writeln(" <td>");
writeln(" </td>");
writeln(" <td>");
writeln(" <tr>");
writeln(" <td>");
writeln(" <input type='button' value='Pri'
onclick='parent.primeroDer()'>");
writeln(" </td>");
writeln(" <td>");
writeln(" <input type='button' value='Ant'
onclick='parent.anteriorDer()'>");
writeln(" </td>");
writeln(" <td>");
writeln(" <input type='button' value='Sig'
onclick='parent.siguienteDer()'>");
writeln(" </td>");
writeln(" <td>");
writeln(" <input type='button' value='Ult'
onclick='parent.ultimoDer()'>");
writeln(" </td>");
writeln(" </tr>");
writeln(" </td>");
writeln(" </form>");
writeln("</body>");
writeln("</html>");
close();
}
}

</script>

</head>
<frameset rows="100%,*" frameborder="no" border="0" framespacing="0"
onload="javascript:formulario()">
<frame name="pantalla" src="pruDummy.htm" frameborder="no"
border="0">
<frame name="dummy" src="pruDummy.htm">
</frameset>
</html>
Javascript:¿Cómo validar una dirección
de email utilizando expresiones
regulares?
Versión Simple
<html>
<head>

<script language="javascript" type="text/javascript" defer>
function validaEmail(email)
{
var re = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+
$/;
if (!re.test(email)) {
alert ("Dirección de email inválida");
return false;
}
return true;
}</script>
</head>

<body>
<center>
<form name="email" onSubmit="return validaEmail(this.email.value);">
Email: <input type="text" name="email"><br>
<input type=submit value="Submit">
</form>
</center>
</body>
</html>
Versión Compleja:
<html>
<head>

<script language="javascript" type="text/javascript" defer>
// Regexp creado por Sandeep V. Tamhankar (stamhankar@hotmail.com)

function emailCheck (emailStr) {

var emailPat=/^(.+)@(.+)$/;
var specialChars="\$\$<>@,;:\\\\\\\"\\.\\[\\]";
var validChars="\[^\\s" + specialChars + "\]";
var quotedUser="(\"[^\"]*\")";
var ipDomainPat=/^[(d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})]$/;
var atom=validChars + '+';
var word="(" + atom + "|" + quotedUser + ")";
var userPat=new RegExp("^" + word + "(\\." + word + ")*$");
var domainPat=new RegExp("^" + atom + "(\\." + atom +")*$");
var matchArray=emailStr.match(emailPat);
if (matchArray==null) {
alert("La dirección de correo parece ser inválida (verifique las @
y .)")
return false
}
var user=matchArray[1]
var domain=matchArray[2]

if (user.match(userPat)==null) {
alert("El nombre de usuario parece ser inválido.")
return false
}

var IPArray=domain.match(ipDomainPat)
if (IPArray!=null) {
for (var i=1;i<=4;i++) {
if (IPArray[i]>255) {
alert("La dirección IP de destino es inválida!")
return false
}
}
return true
}

var domainArray=domain.match(domainPat)
if (domainArray==null) {
alert("El dominio no parece ser válido.")
return false
}
var atomPat=new RegExp(atom,"g")
var domArr=domain.match(atomPat)
var len=domArr.length
if (domArr[domArr.length-1].length<2 ||
domArr[domArr.length-1].length>3) {
alert("Las direcciones deben terminar con dominios de tres letras,
o el código de país de dos letras.")
return false
}

if (len<2) {
var errStr="Dominio Inválido!";
alert(errStr)
return false
}

return true;
}
</script>
</head>

<body>
<center>
<form name="email" onSubmit="return emailCheck(this.email.value);">
Email: <input type="text" name="email"><br>
<input type=submit value="Submit">
</form>
</center>
</body>
</html>
Funciona en:
- IE 4+
- Netscape 4+
- Opera 5+
- Mozilla 0.8+ / Netscape 6+
Javascript:¿Cómo puedo capturar el

texto que está seleccionado dentro de
mi página?
Créditos: Tomado de una respuesta de DanielRey
[ver ejemplo]
<html>
<head>
<a name="#1">
function sele() {
a=document.selection.createRange();
alert("Tipo de selección: " + document.selection.type + "\nTexto
seleccionado: " + a.text);
}
</script>
</head>
<body>
<form name="frm">
<table border="0">
<tr>
<td align="right">
input:
</td>
<td>
<input type="textInput" name="txt">
</td>
</tr>
<tr>
<td align="right">
textarea:
</td>
<td>
<textarea name="txtArea"></textarea>
</td>
</tr>
<tr>
<td align="right">
Link:
</td>
<td>
<a href="#1">Enlace</a>
</td>
</tr>
<tr>
<td align="right">
Select:
</td>
<td>
<select>
<option>Uno</option>
<option>Dos</option>
<option>Tres</option>
</select>
</td>
</tr>
<tr>
<td align="right">
Párrafo:
</td>
<td>
Esto es un párrafo de donde también se puede seleccionar texto.
</td>
</tr>
<tr>
<td align="center" colspan="2">
<a href=JavaScript:sele()>Ver texto seleccionado</a>
</td>
</tr>
</form>
</body>
</html>
Javascript:¿Cómo impedir que

seleccionen más de dos checkbox en un
formulario?
<script>

function countChoices(obj) {
max = 1; // max. number allowed at a time

a = obj.form.PollVote1.checked; // your checkboxes here
b = obj.form.PollVote2.checked;

// add more if necessary

count = (a ? 1 : 0) + (b ? 1 : 0);
// If you have more checkboxes on your form
// add more (box_ ? 1 : 0) 's separated by '+'

if (count > max) {
alert("Atencion! Solo puede seleccionar " + max + " opcion! \Quite una
de ellas si quiere seleccionar otra.");
obj.checked = false;
}
}

</script>

Y el campo checkbox es de la forma

<form name="form">

<input type="checkbox" value="1" name="PollVote1"
onClick="countChoices(this)">

<input type="checkbox" value="2" name="PollVote2"

<form>

Si tienes los campos de esta forma (gracias tunait):

<form name="form">

<input type="checkbox" value="1" name="PollVote"

<input type="checkbox" value="2" name="PollVote"

<form>

deberás poner:

a = obj.form.PollVote[1].checked; // your checkboxes here
b = obj.form.PollVote[2].checked;
Un saludo
Javascript:¿Cómo puedo extraer de un

elemento select el índice o el valor o el
nombre desplegado en la opción
seleccionada?
<html>
<head>
function cambia(){
with (document.frm){
indice.value = String(selector.selectedIndex);
opcion.value = selector.options[selector.selectedIndex].text;
valor.value = selector.options[selector.selectedIndex].value;
}
}
</script>
</head>
<body>
<form name="frm">
Indice:<input type="text" name="indice"><br>
Opcion:<input type="text" name="opcion"><br>
Valor: <input type="text" name="valor"><br>
Seleccione:<select name="selector" onchange="cambia()">
<option>Seleccione un valor</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
</form>
</body>
</html>
Javascript:¿Cómo puedo hacer para que

al cambiar la opción seleccionada en un
combo, cambien también las opciones
disponibles en otro combo indicando la
URL de destino?Modificado
[ver ejemplo]


<html>
<head>

}

switch (document.frm.pais.selectedIndex){
case 0:
addOpt(oCntrl, 0, "Ciudad de México", "http://www.mexico.com");
addOpt(oCntrl, 1, "Monterrey", "http://www.monterrey.com");
addOpt(oCntrl, 2, "Guadalajara", "http://www.guadalajara.com");
break;
case 1:
addOpt(oCntrl, 0, "Madrid", "http://www.madrid.com");
addOpt(oCntrl, 1, "Barcelona", "http://www.barcelona.com");
addOpt(oCntrl, 2, "San Sebastián",
"http://www.sansebastian.com");
break;
case 2:
addOpt(oCntrl, 0, "Caracas", "http://www.caracas.com");
addOpt(oCntrl, 1, "Maracay", "http://www.maracay.com");
addOpt(oCntrl, 2, "Valencia", "http://www.valencia.com");
break;
}
}
</script>
</head>
<body>
<form name="frm">
<table border="0" width="482">
<tr>
<td width="25">
Pais
</td>
<td width="89">
<select name="pais" onchange="cambia(document.frm.ciudad)">
<option value="Mex">Mexico</option>
<option value="Esp">España</option>
<option value="Ven">Venezuela</option>
</select>
</td>
<td width="6">

</td>
<td width="44">
Ciudad
</td>
<td width="296">
<select name="ciudad"
onChange="location.href=this.form.ciudad.options[this.form.ciudad.sele
ctedIndex].value">
<option value="0">Ciudad de México</option>
<option value="1">Monterrey</option>
<option value="2">Guadalajara</option>
</select> <input type="button" value="Ir a..."
onClick="location.href=this.form.ciudad.options[this.form.ciudad.selec
tedIndex].value"</td>
</tr>
</table>
</form>
</body>
</html>
Javascript:¿Cómo indicar a un visitante

de un formulario que se ha dejado
campos sin rellenar?
Estando delante cuando lo rellene o de esta manera:
Se pueden poner todos los campos que se quiera.
<html>
<head>

<script>

function comprobar(){var mal=false;
numero=document.forms[0].elements.length;
for(a=0;a<numero;a++){
if (document.forms[0].elements[a].value=="")
{document.forms[0].elements[a].style.backgroundColor="#ffffcc";mal=tru
e;}
else{document.forms[0].elements[a].style.backgroundColor="white";}
}
if(mal){alert("Por favor, rellene las cajas coloreadas");}
else{document.forms[0].submit()}
}

</script>
</head>

<body>
<form action="javascript:alert('enviando')"
method="post"
name="formulario"
id="formulario"
style="font:normal 10px/10px verdana;border:solid 1px
black;text-align:right;width:300px;"
>
Nombre: <input type="text" name="cosa" id="cosa"><br>
Apellidos: <input type="text" name="cosa" id="cosa"><br>
Dirección: <input type="text" name="cosa" id="cosa"><br>
Nombre del perro: <input type="text" name="cosa" id="cosa"><br>
País: <input type="text" name="cosa" id="cosa"><br>
Conocidos con perro: <input type="text" name="cosa"
id="cosa"><br>
<input onclick="comprobar()" type="button" name="enviar"
value="Enviar!">

</form>

</body>
</html>
__________________
Cómo escribir|Cómo preguntar
No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.

Javascript:¿Cómo saber si han
rellenado un input con varios
caracteres iguales?
Por medio de este script:
<html>
<head>
<title>Contando letritas</title>
<script>

record=0;
igual=1;
var letraRecord
var b=0
var letra=""
function comprobar(esto){

for (a=1;a<esto.length;a++){

if (esto.charAt(a)==esto.charAt(b)){
igual=igual+1;
letra=esto.charAt(a);}
else{
if(igual>record){record=igual;letraRecord=letra}
igual=1
}
b=a
}
if(igual>record){record=igual;letraRecord=letra}
if (record>1){alert("La letra que más se repite es la
"+letraRecord+" que aparece seguida "+record+" veces.")}
else {alert("Ninguna letra se repite seguida");}
}
</script>
</head>

<body>
<form action="javascript:alert('HOLAA!!')"
method="post"
name="formuario"
id="formuario">

<input type="text"
name="caja"
size="130"
onblur="comprobar(this.value)">

</form>

</body>
</html>
Dernuke propone una versión usando expresiones regulares y propone algún variante:
<html>
<head>
<title>Contando letritas</title>
<script>
// por derkeNuke
function comprobar(str) {

var res=str.match(/([a-z]){1}\1+/gi);

mensaje="Las repeticiones de letras seguidas son: \r";
for(a=0; a<res.length; a++)
mensaje+="- "+res[a].substring(0,1)+" "+res[a].length+"
veces.\r";
alert(mensaje);

// si queremos ordenar el resultado de mayor a menor repeticion:
res.sort( function(a,b) {
if(a.length>b.length) return -1;
else if(a.length==b.length) return 0;
else return 1;
} );

mensaje="Las repeticiones de letras seguidas ya ordenadas son:
\r";
for(a=0; a<res.length; a++)
mensaje+="- "+res[a].substring(0,1)+" "+res[a].length+"
veces.\r";
alert(mensaje);

}
</script>
</head>

<body>
<form action="javascript:alert('HOLAA!!')"
method="post"
name="formuario"
id="formuario">

<input type="text"
name="caja"
size="130"
value="eqewwqFaaaasscccFasaeqw"
onblur="comprobar(this.value)">
</form>

</body>
</html>
__________________
Cómo escribir |Cómo preguntar
No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
Javascript:¿Cómo rellenar cajas de

texto con elementos seleccionados de
un pop up?

<html>
<head>
<title>Untitled</title>
<script>
//Script original de KarlanKas para forosdelweb.com

camisa=["Seleccione...","Roja","Verde","Amarilla"];
pantalon=["Seleccione...","De campana","pitillo","chino","pata de
elefante"]
sombrero=["Seleccione...","De Ala
Ancha","Hongo","Chistera","Boina","Gorra"]

function elegir(esto){

lista=esto.value
opcion=eval(lista);
codigo='<select style="font: normal 10px/20px verdana; color:
navy" name="opciones"
onChange="opener.formulario.enviar.disabled=false;opener.formulario.qu
e'+lista+'.value=unescape(this.options.value); self.close()" >';
for (a=0;a<opcion.length;a++){
codigo+="<option value="+escape(opcion[a])+">"+opcion[a]
+"</option>\n";
}
codigo+="</select>";

pepe=window.open('','','width=200,height=50');
pepe.document.write("<html>");
pepe.document.write("<head>");
pepe.document.write(" <title>Elige Opción</title>");
pepe.document.write("</head>");
pepe.document.write('<body bgcolor="#ffffcc">');
pepe.document.write(codigo);
pepe.document.write("</body>");
pepe.document.write("</html>");
}

</script>
</head>

<body>
<form action="javascript:alert('Enviandooo!!')"
name="formulario"
id="formulario"
style="font: normal 10px/20px verdana; color: navy"
title="Elige que comprar">
<input type="radio"
name="opcion"
value="camisa"
onClick="elegir(this)">camisa<br>
<input style="border:solid 1px black" type="text"
name="quecamisa"
readonly><br>

<input type="radio"
name="opcion"
value="pantalon"
onClick="elegir(this)">pantalón<br>

name="quepantalon"
readonly><br>

<input type="radio"
name="opcion"
value="sombrero"
onClick="elegir(this)">sombrero<br>

name="quesombrero"
readonly><br><br>

<input style="heigth:15px;font: normal 10px/10px verdana;
color: navy"
type="submit"
id="enviar"
value="Enviar!"
disabled>
</form>

</body>
</html>
____
Javascript:¿Cómo validar que un campo

sea vacío,aunque se haya presionado la
barra espaciadora?
<html>
<head>

</script>
<title>Validar Campo Vacío</title>
</head>
<body>
<form name="form1">
<input name="nombre_campo" type="text" size="15" maxlength="15">
<input type="button" name="Validar" value="Validar"
onclick="verificar()">
</form>
</body>
</html>
entrada de datos donde se valide el
ingreso de caracteres numéricos o los
signos ",.-" y que al salir del mismo
aparezca el resultado con decimales y
formato para los miles?
Créditos: Mackpipe
[ver ejemplo]
<html>
<head>
<script>
function NumberFormat(num, numDec, decSep, thousandSep){
var arg;
var Dec;
Dec = Math.pow(10, numDec);
if (typeof(num) == 'undefined') return;
if (typeof(decSep) == 'undefined') decSep = ',';
if (typeof(thousandSep) == 'undefined') thousandSep = '.';
if (thousandSep == '.')
arg=/./g;
else
if (thousandSep == ',') arg=/,/g;
if (typeof(arg) != 'undefined') num =
num.toString().replace(arg,'');
num = num.toString().replace(/,/g, '.');
if (isNaN(num)) num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num * Dec + 0.50000000001);
cents = num % Dec;
num = Math.floor(num/Dec).toString();
if (cents < (Dec / 10)) cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
num = num.substring(0, num.length - (4 * i + 3)) + thousandSep +
num.substring(num.length - (4 * i + 3));
if (Dec == 1)
return (((sign)? '': '-') + num);
else
return (((sign)? '': '-') + num + decSep + cents);
}

function EvaluateText(cadena, obj){
opc = false;
if (cadena == "%d")
if (event.keyCode > 47 && event.keyCode < 58)
opc = true;
if (cadena == "%f"){
if (event.keyCode > 47 && event.keyCode < 58)
opc = true;
if (obj.value.search("[.*]") == -1 && obj.value.length != 0)
if (event.keyCode == 46)
opc = true;
}
if(opc == false)
}
</script>
</head>
<body>
<form name="frm">
numero
<input type="text" name="input1" size="15" value="500034567"
onkeypress="EvaluateText('%f', this);" onBlur="this.value =
NumberFormat(this.value, '2', '.', ',')"><br><br>
</form>
</body>
</html>
Javascript:¿Cómo puedo llenar un

campo de un formulario a partir de un
valor seleccionado en un popup?
[ver ejemplo]
Formulario.htm
<html>
<head>
function buscar(){
open("Popup.htm");
}
</script>
</head>
<body>
<form name="frm">
<table border="0">
<tr>
<td align="right">
Editorial
</td>
<td>
<input type="text" name="editorial">
<input type="button" value="buscar" onclick="buscar()"><br>
</td>
</tr>
</table>
</form>
</body>
</html>
Popup.htm
<html>
<head>
var seleccionado = "";
var aEdit = new Array(
"MacGraw_Hill",
"Microsoft_Press",
"Salvat"
);

function cambiaSel(chk){
seleccionado = chk.value;
}

function envia(){
opener.document.frm.editorial.value = seleccionado;
close();
}
</script>
</head>
<body>
<form name="frm2">
for (var i = 0; i < aEdit.length; i++)
document.write("<input type='radio' name='ed' value='" + aEdit[i]
+ "' onclick='cambiaSel(this)'>" + aEdit[i] + "<br>");
</script>
<input type="button" name="enviar" value="Enviar"
onclick="envia()">
</form>
</body>
</html>
Javascript:¿Cómo Selecciono o
Desmarco Varios Checkbox al mismo
tiempo?
Cita:
Este Código va en el Header
Código:


</script>
Cita:
Este Código va dentro del BODY
Código:
<form name="name">

<input type="checkbox" name="SLT_ALL" value="Check All"
onClick="this.value=check(this.form.lista)">

<input type="checkbox" name="lista" value="a">
<input type="checkbox" name="lista" value="b">
<input type="checkbox" name="lista" value="c">
<input type="checkbox" name="lista" value="d">
<input type="checkbox" name="lista" value="e">
<input type="checkbox" name="lista" value="f">

</form>
Javascript:¿Cómo agregar elementos

en una forma (text y textarea)?
<html>
<head>
<title>Form Page</title>

<script>
// Declare the form field count javascript variable so you know
how many the user have added.
//The CGI.REQUEST_METHOD bit is the CF code for setting this
variable back to the count where it was last up to.
var tFormFieldCount = 1;
var tFormFieldList = "";

// Function to dynamically insert the form field to the cell
below. If you want textareas or other form elements, just create
another function and change the html insert text below.
function MakeOne(FieldType) {
// Depending on what type of form fields the user choose then
dynamically write the appropriate form element to the page
if (FieldType == 'TextInput') {
document.getElementById('DynamicContent').innerHTML +=
'Form Element ' + tFormFieldCount + '- Text input
box  <input type="text" name="TextInput' + tFormFieldCount +
'"><br>';
} else if (FieldType == 'Textarea') {
document.getElementById('DynamicContent').innerHTML +=
'Form Element ' + tFormFieldCount + '- Textarea  <textarea
name="Textarea' + tFormFieldCount + '" cols=30
rows=3></textarea><br>';
}

// Populate the form element list.
if (tFormFieldList == "") {
tFormFieldList = FieldType;
} else {
tFormFieldList += "," + FieldType;
}

document.forms[0].FormFieldCount.value = tFormFieldCount;
document.forms[0].FormFieldList.value = tFormFieldList;
tFormFieldCount++;
}

// Just a function to check if the user have added any text input
fields.
function CheckIt() {
if (tFormFieldCount == 1) {
alert('You must add at least one text input field.');
return false;
}
return true;
}
</script>
</head>

<body bgcolor="#FFFFFF">



<form action="ResultsPage.cfm" method="post" onSubmit="return
CheckIt();">
<table cellspacing=0 cellpadding=4 border=1>
<tr><td align="right"><input type="button" value="Add Form
Text Fields" onClick="MakeOne('TextInput');">  <input
type="button" value="Add Form Textarea"
onClick="MakeOne('Textarea');"></td></tr>
<tr>
<td id="DynamicContent" valign="top">



</td>
</tr>
<tr>
<td align="right" colspan=2>

<input type="hidden" name="FormFieldList">
<input type="hidden" name="FormFieldCount">
<input type="submit" value="Send It">
</td>
</tr>
</table>
</form>
</body>
</html>
Javascript:¿Cómo puedo comparar las
palabras de un elemento textarea
respecto a las palabras existentes en
otro textarea?
<html>
<head>

function separa(sTxt, sSep){
var sTx2 = "";
var bPalabra = false;
for (var j = 0; j < sTxt.length; j++){
if (sSep.indexOf(sTxt.charAt(j)) != -1){
if (bPalabra) sTx2 += " ";
bPalabra = false;
} else {
bPalabra = true;
sTx2 += sTxt.charAt(j);
}
}
return sTx2;
}

function comunes(aIzq, aDer){
var i, j, nRes, sPal;
nRes = 0;
sPal = "";
for (i = 0; i < aIzq.length; i++)
for (j = 0; j < aDer.length; j++)
if (aIzq[i] == aDer[j])
if (sPal.indexOf(aIzq[i]) == -1){
nRes++;
sPal += " " + aIzq[i];
}
document.frm.comunes.value = String(nRes);
}

function soloEnA(aIzq, aDer){
var i, j, nRes, sPal, bPresente;
nRes = 0;
sPal = "";
for (i = 0; i < aIzq.length; i++){
bPresente = false;
for (j = 0; (j < aDer.length) && !bPresente; j++)
bPresente = (aIzq[i] == aDer[j])
if (!bPresente && (sPal.indexOf(aIzq[i]) == -1)){
nRes++;
sPal += " " + aIzq[i];
}
}
document.frm.soloA.value = String(nRes);
}

function soloEnB(aIzq, aDer){
var i, j, nRes, sPal, bPresente;
nRes = 0;
sPal = "";
for (i = 0; i < aDer.length; i++){
bPresente = false;
for (j = 0; (j < aIzq.length) && !bPresente; j++)
bPresente = (aDer[i] == aIzq[j])
if (!bPresente && (sPal.indexOf(aDer[i]) == -1)){
nRes++;
sPal += " " + aDer[i];
}
}
document.frm.soloB.value = String(nRes);
}

function calcula(){
var sIzq, sDer, aIzq, aDer;
sIzq = separa(document.frm.texto.value, ";.,:");
sDer = separa(document.frm.diccionario.value, ";.,:");
sIzq = sIzq.replace(/[rnf]/g, " ");
sDer = sDer.replace(/[rnf]/g, " ");
aIzq = sIzq.split(" ");
aDer = sDer.split(" ");
comunes(aIzq, aDer);
soloEnA(aIzq, aDer);
soloEnB(aIzq, aDer);
}
</script>
</head>
<body>
<form name="frm">
<table border="0">
<tr>
<td align="center">
Area A
</td>
<td align="center">
Area B
</td>
</tr>
<tr>
<td align="left">
<textarea name="texto" onkeyup="calcula()"></textarea>
</td>
<td align="right">
<textarea name="diccionario" onkeyup="calcula()"></textarea>
</td>
</tr>
<tr>
<table border="0">
<tr>
<td align="left">
En A y no en B
</td>
<td align="center">
Comunes
</td>
<td align="right">
En B y no en A
</td>
</tr>
<tr>
<td align="left">
<input type="text" name="soloA">
</td>
<td align="center">
<input type="text" name="comunes">
</td>
<td align="right">
<input type="text" name="soloB">
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
Javascript:¿Cómo validar que se

seleccionen solo archivos de
determinado tipo en un INPUT
TYPE='FILE'?
Usa esta función
function LimitAttach(tField,iType) {
file=tField.value;
if (iType==1) {
extArray = new Array(".gif",".jpg",".png");
}
if (iType==2) {
extArray = new Array(".swf");
}
if (iType==3) {
extArray = new
Array(".exe",".sit",".zip",".tar",".swf",".mov",".hqx",".ra",".wmf",".
mp3",".qt",".med",".et");
}
if (iType==4) {
extArray = new
Array(".mov",".ra",".wmf",".mp3",".qt",".med",".et",".wav");
}
if (iType==5) {
extArray = new Array(".html",".htm",".shtml");
}
if (iType==6) {
extArray = new Array(".doc",".xls",".ppt");
}
allowSubmit = false;
if (!file) return;
while (file.indexOf("\\") != -1) file = file.slice(file.indexOf("\\")
+ 1);
ext = file.slice(file.indexOf(".")).toLowerCase();
for (var i = 0; i < extArray.length; i++) {
if (extArray[i] == ext) {
allowSubmit = true;
break;
}
}
if (allowSubmit) {
} else {
tField.value="";
alert("Usted sólo puede subir archivos con extensiones " +
(extArray.join(" ")) + "\nPor favor seleccione un nuevo archivo");
}
}
de tal forma que en tu input type='file' agreges onBlur='LimitAttach(this,n);' donde n es el tipo de

validacion que deseas hacer
Nota. Los tipos de validaciones mostrados son
1: gif, jpg, png
2: swf
3: exe, sit, zip, tar, swf, mov, hqx, ra, wmf, mp3, qt, med, et
4: mov, ra, wmf, mp3, qt, med, et, wav
5: htm, html, shtml
6: doc, xls, ppt
pero pueden agregarse o cambiarse según se necesiten
Última edición por KarlanKas; 30-jun-2003 a las 15:06
--Mickel 30 Jun 2003
Javascript:¿Cómo puedo generar sobre

mi página un número distinto de
campos de texto según lo que indique
el usuario?
<html>
<head>

var nValores = 0;

function cambiaPg(){
nValores = parseInt(frm.cant.value, 10);
}
formulario();
}

function formulario(){
open();
writeln("<html>\n<body>");
writeln("<form name='frm'>");
writeln(" Número de textos:");
writeln(" <input type='text' name='cant'>");
writeln(" <input type='button' name='btn' value='Aplicar'
onclick='parent.cambiaPg()'>");
writeln("<br>");
for (var i = 0; i < nValores; i++){
writeln("Valor " + String(i) + ":");
writeln("<input type='text' name='c" + String(i) + "'><br>");
}
writeln("</form>");
writeln("</body>\n</html>");
close();
}
}

document.writeln("<frameset rows='100%,*'
onload='javascript:parent.formulario()'>");
document.writeln(" <frame name='pantalla'
src='DummyPage.htm'>");
document.writeln(" <frame src=''>");
document.writeln("</frameset>");

</script>
</head>
</html>
Javascript:¿Cómo puedo limitar el

número de caracteres de un textarea?
La solución no es el atributo maxlength que tiene los campos de texto. Consiste en cada vez
que se introduzca un carácter en el textarea, contar el número total de caracteres que van ya
escritos y en caso de haberse superado, borrar el último carácter.
function maximaLongitud(texto,maxlong) {
var tecla, in_value, out_value;

if (texto.value.length > maxlong) {
in_value = texto.value;
out_value = in_value.substring(0,maxlong);
texto.value = out_value;
return false;
}
return true;
}
</script>

<textarea name="nombre_textarea" cols="50"
rows="5" onKeyUp="return maximaLongitud(this,254)">
Javascript:¿Cómo evitar que vuelvan a
dar al Submit?
Puedes poner un cartel que ponga que no den más de una vez al botón o hacer esto:
Pon un nombre al botón de submit... por ejemplo:
<INPUT
TYPE="submit"
VALUE="Mandar"
NAME="enviar">
y luego en la etiqueta form pon:
<FORM
action="destino.php"
method="post"
onsubmit="document.forms[0].enviar.value='Por favor espere un
momento';document.forms[0].enviar.disabled=true;">
Con esto consigues que no vuelvan a dar a submit....
Te recomiendo que arregles un poco los botones con CSS, si no se verán horribles!
__
Javascript:¿Cómo validar el formulario

de una forma sencilla iluminando los
errores?
Con este código. Es muy fácil añadir reglas. Sólo se van poniendo en el orden de los inputs en
el formulario las reglas con el numerito de orden que les corresponda y se utiliza la variable
valor para referirse al valor de dicho input.
Para el mensaje de error lo mismo, se usa error con el numerito de orden de input entre
corchetes y se pone entre comillas el mensaje de error.
Un ejemplo:
<html>
<head>
<style>
form,td{font:normal 10px/10px verdana;}
input{font:normal 10px/10px verdana;border:solid 1px black}
</style>
<title>Prueba</title>
<script>
//Adaptado a firefox gracias a JavierB ;-)

colorMal="#eeddee";
colorBien="white";

regla=new Array()

regla[0]="valor.length<3";
regla[1]="isNaN(valor) || valor<600000000";
regla[2]="valor.lastIndexOf('@')!=valor.indexOf('@') ||
valor.indexOf('@')<2 || valor.lastIndexOf('.')<valor.length-4 ||
valor.lastIndexOf('.')>valor.length-3";

mensaje=new Array()

mensaje[0]="Por favor, introduzca el nombre";
mensaje[1]="El número de teléfono introducido no es válido";
mensaje[2]="correo inválido";

function comprobar(){
errores="";
mensaje2="";
for(a=0;a<regla.length;a++){
valor=document.forms[0].elements[a].value;
if(eval(regla[a])){
mensaje2=(mensaje[a])?mensaje[a]:"Por favor, rellene el campo
"+document.forms[0].elements[a].name;
errores+=mensaje2+"<br>";
document.forms[0].elements[a].style.background=colorMal;}
else{document.forms[0].elements[a].style.background=colorBien;}
}
pepe=document.getElementById("herror");
pepe.style.background=(errores!="")?colorMal:colorBien;
pepe.style.border=(errores!="")?"solid 1px black":"none";
pepe.innerHTML=errores;

return (errores=="")
}

</script>
</head>

<body>
<form onsubmit="return comprobar()">
<table><tr><td>nombre:</td><td><input type=text name=nombre></td><td
style="font:normal 10px/15px verdana;padding:5px 5px 5px
5px;"rowspan=10 valign="top" id="herror"></td></tr>
<tr><td>telefono:</td><td><input type=text name="telefono"></td></tr>
<tr><td>e-mail:</td><td><input type=text name="email"></td></tr>
<tr><td colspan=2 align="center"><input type="submit"
value="enviar"></td></tr></table>

</form>

</body>
</html>
__
Javascript:Combos encadenados para

armar con Bases de datos
¿Cómo puedo poner en mi página dos combos que dependiendo de la opción seleccionada en
uno de ellos me cambie el contenido del otro combo, teniendo en cuenta de que todas las
opciones provienen de una base de datos?
<html>
<head>

/* Trae desde la base de datos los nombres de los paises */
/* y colócalos en este arreglo. */
var aPaises = new Array(
" ",
"Mexico",
"España",
"Venezuela"
);

var aEstados0 = new Array(
" "
);

/* Trae desde la base de datos los nombres de las ciudades */
/* de cada uno de los paises de la lista anterior y ponlos */
/* en arreglos individuales. */
" ",
"Ciudad de México",
"Monterrey",
"Guadalajara"
);

" ",
"Madrid",
"Barcelona",
"San Sebastián"
);

" ",
"Caracas",
"Coro",
"Maracay",
"Valencia"
);

/* Arma un arreglo general de estados a partir de los arreglos */
/* anteriores. Es importante que cada arreglo comience por un */
/* valor en blanco y que el primer arreglo de ciudades, llamado */
/* aqui aEstados0, no contenga ningún elemento. */
var aEstados = new Array(
aEstados0,
aEstados1,
aEstados2,
aEstados3
);

function opcion(oCntrl, iPos, sTxt, sVal){
}

function cambia(oMster, oCntrl){
var nSelected = oMster.selectedIndex;
for(var i = 0; i < aEstados[nSelected].length; i++)
opcion(oCntrl, i, aEstados[nSelected][i], String(i));
}

function llena(oCntrl){
for(var i = 0; i < aPaises.length; i++)
opcion(oCntrl, i, aPaises[i], String(i));
}

</script>
</head>
<body>
<form name="frm">
País
<select name="pais" onchange="cambia(this, document.frm.ciudad)">
<option value=" "> </option>
</select>

Ciudad
<option value=" "> </option>
</select>
</form>
llena(document.frm.pais);
</script>
</body>
</html>
Javascript:Quiero que un submit del

form se muestre en una ventana
emergente
Hay que poner el target del form con un nombre para la ventana emergente y abrir esa ventana
en el evento onsubmit...
Ejemplo:
<form name="formulario" action="destino.php" target="ventanaForm"

onsubmit="window.open('', 'ventanaForm', '')" method="post" >
...
Saludos
Nota adicional:
Si se quiere enviar el formulario sin usar un botón submit (mediante la función submit() del
formulario) debe abrirse la ventana antes (no serviría en tal caso el evento onsubmit)
function enviar() {

window.open("", "ventanaForm", "");

document.forms["formulario"].submit();

}
Javascript:¿Cómo insertar emoticones

en un textarea?
Voy a intentar repetir este mensaje porque he visto que se fue.
Para añadir texto en un textarea simple basta con hacer una función así:
function poner(este_texto) {

el_textarea.value += este_texto;

}
... luego los botones o los elementos activos para insertar emoticones (pueden ser los mismos
emoticones) tendrían que tener asociada la función poner con el emoticón adecuado: <input
type=button onclick="poner('; - )')" value="; - )" />
Por último hay que convertir cada ocurrencia del emoticón con la imagen asociada (toda la
etiqueta) el_texto = el_textarea.value.split("; - )").join("<img src=smyle.gif />");
El método split convierte la cadena que lo usa en un array donde se separan los elementos por
el parámetro que se pasa... luego join vuelve a generar la cadena, usando el parámetro como
nexo.
P.D: Supongo que no habrá mucha diferencia con la FAQ original.
Javascript:¿Cómo recoger los valores

de un formulario en la página de
destino?
Con este código:
Arreglado pequeño bug
<html>
<head>
<script>


enviado=location.href.split("?");
igualdades=enviado[1].split("&");

for(a=0;a<igualdades.length;a++){
igualdades[a]=igualdades[a].split("+").join(" ");
valores=igualdades[a].split("=");
eval("var "+valores[0]+"='"+valores[1]+"'");
}
</script>
Es importante que el método empleado en el formulario sea GET.
___
Javascript:¿Cómo puedo poner una

opción de un select "selected"?
Asignando al value del elemento select el value de la opción que se quiera seleccionar...
Ejemplo:
...

<body onload="document.forms['mi_Form']['mi_Select'].value = 'op2'" >

...

<form name='mi_Form' >

<select name='mi_Select' >

<option value='op1' > opción 1 </option>



</select>
...
</body>
Notas:
1. Evidentemente, el valor debe existir.
2. De la forma inversa se puede saber el valor seleccionado de un select con el value del
mismo (Sería una simplificación de una FAQ anterior)
Javascript:¿Cómo hacer escoger fecha

de nacimiento?
Bueno, para las personas que necesitan crear un formulario sea para lo que sea y necesitan
crear año de nacimiento, entonces deben crear tres combos (selects) para poder realizarlo,
Entonces, en el html deben poner este código:
<select id="anhoNac" onchange="ponerDias()">

<script>ponerAnho();</script>
</select>
<select id="mesNac" onchange="ponerDias()">
<script>ponerMes();</script></select>
<select id="diaNac">
<script>ponerDias();</script>
</select>
En esta parte lo que se crea son tres select, el del año (anhoNac), mes (mesNac) y dia
(diaNac). Cada uno ejecuta una funcion. cuando se carga el año ejecuta la funcion
ponerAnho(), cuyo código es el siguiente:
function ponerAnho(){
var anho = document.getElementById("anhoNac");//tomamos el
elemento anhoNac.
fechaActual = new Date();//fecha actual
anhoActual = fechaActual.getYear();//año de la fecha actual
anhoActual+=1900;//debido a que nos arroja los años transcurridos
entre 1900 (en este caso 109) le debemos sumar 1900 para que nos de
2009)
var anhosTotal = anho.options.length-1;//tomamos los años que hay
en el select y los borramos en el for
for(var i=anhosTotal;i>=0;i--){
anho.options[i]=null;
}
var i=0;//creamos esta variable para las posiciones en el select
for(var a=anhoActual-5;a>=anhoActual-80;a--){
op = document.createElement("OPTION");//pasamos a crear el
option
op.value = a;
op.text = a;
anho.options[i] = op;//en la posicion i creamos ese option
i++;//aumentamos i
}
}
Luego, al cargar el mes tenemos que llamar esta funcion:
function ponerMes(){
var mes = document.getElementById("mesNac");//tomamos el elemento
var nombreMes;//creamos la variable que va a contener los nombres
de los meses
for(var m=0;m<=11;m++){//aca escojemos el mes segun el ciclo
if(m==0){
nombreMes="Enero";
}
if(m==1){
nombreMes="Febrero";
}
if(m==2){
nombreMes="Marzo";
}
if(m==3){
nombreMes="Abril";
}
if(m==4){
nombreMes="Mayo";
}
if(m==5){
nombreMes="Junio";
}
if(m==6){
nombreMes="Julio";
}
if(m==7){
nombreMes="Agosto";
}
if(m==8){
nombreMes="Septiembre";
}
if(m==9){
nombreMes="Octubre";
}
if(m==10){
nombreMes="Noviembre";
}
if(m==11){
nombreMes="Diciembre";
}
op = document.createElement("OPTION");//creamos la opcion
var valorMes="";
var aux=0;
if(m+1>0 && m+1<10){//dado que el día trabaja con el mes en
dos digitos entonces le agregamos un cero (0) al inicio si es menor
que 10
aux=m+1;
valorMes="0"+aux;
}
else{//si no pues no XD
valorMes=m+1;
}
op.value = valorMes;
op.text = nombreMes;
mes.options[m] = op;

}
}
recuerden que como javascript maneja los elementos del select a partir de 0, entonces me
tome la molestia de asignar los meses del 0 al 11, no del 1 al 12, por lo tanto deben
comprender que sucede cuando hago "m+1".
ahora viene poner el día:
function ponerDias(){
var anho = document.getElementById("anhoNac");//tomamos el
elemento año
var mes = document.getElementById("mesNac");//el mes
var dias = document.getElementById("diaNac");//y el dia
var diasTotal = dias.options.length-1;//tomamos cuantos elementos
hay en el select
for(var i=diasTotal;i>=0;i--){//y los borramos
dias.options[i]=null;
}
var diasMes = 0;//esta variable creo que ya no la uso XD
//si es enero, marzo, mayo, etc, le asigno 31 dias, recuerden lo
de que empieza en 0 y termina en 30 para hacer 31 dias, aqui tambien
//sumo 1 a la variable
if(mes.value=="01" || mes.value=="03" || mes.value=="05" ||
mes.value=="07" || mes.value=="08" || mes.value=="10" ||
mes.value=="12"){
//dias.options.length=30;
for(var o=0;o<=30;o++){
op = document.createElement("OPTION");
op.value = o+1;
op.text = o+1;
dias.options[o] = op;
//document.body.appendChild(dias);
}
}
//si el mes es de 30 dias entonces solo le pongo 30 dias
if(mes.value=="04" || mes.value=="06" || mes.value=="09" ||
mes.value=="11"){
//dias.options.length=30;
for(var o=0;o<=29;o++){
op.value = o+1;
op.text = o+1;
}
}
//pero si el mes es el desgraciado de febrero, (desgraciado por
que tiene mas poquitos :S)
if(mes.value=="02"){
//si es bisiesto
if((anho.value % 4 == 0) && ((anho.value % 100 != 0) ||
(anho.value % 400 == 0))){
for(var o=0;o<=28;o++){
op.value = o+1;
op.text = o+1;
}
}
else{//o si no lo es
for(var o=0;o<=27;o++){
op.value = o+1;
op.text = o+1;
}
}
}
}
Ahora, si vieron arriba, cuando el select del mes o del año cambian entonces se viene otra vez
a la funcion poner dia, para borrar los elementos y volverlos a poner.
Espero que les sirva.
Saludos
Imágenes
Javascript: Banners Aleatorios

<html>
<head>
<title>Selección de Banners Aleatorios</title>
</head>

<body>
// Realizado por: Fabian Muller modificado por KarlanKas para
forosdelweb.com
// WebExperto.com - Ayuda al webmaster en español
// Comienzo

width="468"; //Anchura del banner
height="60"; //Altura del banner

banners= new Array();
banners[0]="banner1.gif";
banners[2]="banner3.swf";
banners[4]="banner5.swf";

totalbanners = banners.length;
var ahora = new Date()
var segundos = ahora.getSeconds()
var ad = segundos % totalbanners;
seleccionado=banners[ad];
localizador=seleccionado.lastIndexOf('.');
localizador2=localizador+4
extension=seleccionado.substring(localizador+1,localizador2);
archivo=seleccionado.substring(0,localizador);

document.write("<center>");
if (extension=="swf"){
flash=seleccionado;
document.write('<OBJECT CLASSID=\"clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000\" width=' + width + ' height=' + height + '
CODEBASE=\"http://active.macromedia.com/flash4/cabs/swflash.cab#versio
n=4,0,0,0\">');
document.write('<PARAM NAME=\"MOVIE\" VALUE=\"' + flash + '\">');
document.write('<PARAM NAME=\"PLAY\" VALUE=\"true\">');
document.write('<PARAM NAME=\"LOOP\" VALUE=\"true\">');
document.write('<PARAM NAME=\"QUALITY\" VALUE=\"high\">');
document.write('<EMBED SRC=' + flash + ' width=' + width + ' height='
+ height + ' PLAY=\"true\" LOOP=\"true\" QUALITY=\"high\"
PLUGINSPAGE=\"http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash\">');
document.write('</EMBED>');
document.write('</OBJECT>');}
else {document.write('<img src='+seleccionado+' width='+width+'
height='+height+'>');
document.write('</center>');}
// Fin

</SCRIPT>


</body>
</html>
Espero que sirva!
Javascript: Precarga
Colocando esto en el head
Código:
<script>
var foto=new Array()
foto[0]=new Image()
foto[0].src="pepito.jpg"
foto[1]=new Image()
foto[1].src="jaimito.jpg"
foto[2]=new Image()
foto[2].src="jorgito.jpg"
</script>
En este ejemplo, se precargan tres imágenes. La forma de llamar a esas imagenes, es

la habitual:
Código:
<img src="pepito.jpg">
Javascript: Rollover
Podemos usar esto, por ejemplo para cambiar la apariencia de un boton. (Normal, sobre y
pulsado)
Esto en el head
Código:
<script>
var foto=new Array()
foto[0]=new Image()
foto[0].src="boton.gif"
foto[1]=new Image()
foto[1].src="boton_sobre.gif"
foto[2]=new Image()
foto[2].src="boton_pulsado.gif"
</script>
Esto en el body
Código:
<img src="boton.gif" onmouseover="this.src=foto[1].src"

onmouseout="this.src=foto[2].src" onclick="this.src=foto[0].src">
onmouseover = encima
onmouseout = fuera
onmousedown = click
Javascript: Cambio de Imágenes

automático
NOTA: El efecto de la transición sólo es visible en IExplorer NOTA2: Es recomendado que las
imágenes tengan todas el mismo tamaño para lograr un mejor efecto en la transición.

//Aquí cambia los nombres de las imágenes por las tuyas.
var imagenes=new Array()

imagenes[0]=new Image (380,288);
imagenes[0].src="tibidabo.jpg"
imagenes[1].src="gato.jpg"
imagenes[2].src="paloma.jpg"
imagenes[3].src="perico.jpg"

cont=0
function presImagen()
{
if (document.all){
document.getElementById('foto').filters.blendTrans.apply()
document.getElementById('foto').src=imagenes[cont].src
document.getElementById('foto').filters.blendTrans.play()
}
else
{
document.images.foto.src = imagenes[cont].src
}
if (cont < imagenes.length-1)
{cont ++}
else
{cont=0}
tiempo=window.setTimeout('presImagen()',5000)
//cada 5000 milisegundos (5 seg.) cambia la imagen.
//cambia la cantidad por el tiempo que quieras que transcurra entre
imagen e imagen
}

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" onLoad="presImagen()">
<img id="foto" src="tibidabo.jpg"
style="filter:blendTrans(duration=[b]3[/b])">

</body>
Javascript: Una imagen linkable

cada semana
Por medio de este código:
<html>
<head>

<script>

var bisiesto=0 //Si es año bisiesto pon 1

enlace=new Array;
alt=new Array;
imagen=new Array;

//-------ENLACES ALT E IMAGEN PARA CADA SEMANA------------

enlace[1]="http://www.loslunesalsol.com/";
alt[1]="esta es la imagen del lunes"
imagen[1]="http://www.cartelia.net/fotos/l/loslunesalsol.jpg"

enlace[2]="http://www.martes.com";
alt[2]="esta es la imagen del martes";
imagen[2]="http://www.martes.com/images/marteshomesk.gif";

enlace[3]="http://www.wednesday.com";
alt[3]="Esta es la imagen del miércoles"
imagen[3]="http://www.wednesday.com/images/logo.gif";

enlace[4]="http://www.thursday.com/";
alt[4]="Es que en español no había..."
imagen[4]="http://www.thursday.com/5.jpg";

enlace[5]="http://www.tgifridays.com/index1.html";
alt[5]="No podía ser de otra forma!";
imagen[5]="http://www.tgifridays.com/index_files/newindex.gif";

enlace[6]="http://www.sabado.info";
alt[6]="Te gusta la música?";
imagen[6]="http://www.sabado.info/image/guitar.gif";

//_---------SEGUIR HASTA LA SEMANA 52--------------------------

//----------NO EDITAR A PARTIR DE AQUÍ---------------------
var cantidadDeDias=0;
var semana=1
diaspormes=new Array(31,28+bisiesto,31,30,31,30,31,31,30,31,30,31
);
hoy=new Date;
anio=hoy.getYear()
primero=new Date(anio,0,1)
diasem=primero.getDay()
dia=hoy.getDate();
mes=hoy.getMonth();
for (a=0;a<mes;a++){
cantidadDeDias=cantidadDeDias+diaspormes[a]
}
cantidadDeDias=cantidadDeDias+dia;
for (a=0;a<cantidadDeDias;a++){
diasem=diasem+1
if (diasem>6){diasem=0;semana=semana+1}
}
//---------------------------------------------------------
</script>

</head>

<body>
<script>
document.write("<A HREF="+enlace[semana]+"><img src="+imagen[semana]+"
ALT='"+alt[semana]+"'></A>");
</script>
</body>
</html>
Javascript: Cambiar una imagen al

hacer un MouseOver
Con este código: Ver ejemplo
<html>
<head>
<style>
A{text-decoration:none;
color:#330099;
font:bold 10px/15px verdana;
}
A:HOVER{text-decoration:underline;}
</style>
<title>Ejemplillo</title>
<script>

// Quiero agradecer públicamente la gran ayuda de tunait.
// Por enseñarme, entre otras muchas cosas, la importancia de la
elección de la denominación de variables.
// Estas variables pretenden ser una aplicación práctica de tantas
conversaciones sobre las mismas. X·D

codigoQueTeAhorrasPicar="";

function crear(a,b,c,d){
this.tezto=a;
this.ondeVa=b;
this.tieneSuImagensitaYTo=new Image
this.tieneSuImagensitaYTo.src=c;
if(d){this.queFotoCambio=d}
}
//unEnlasito=new crear([TEXTO QUE APARECE EN EL ENLACE],[DESTINO DEL
ENLACE],[RUTA DE LA IMAGEN],[ID DE LA IMAGEN QUE CAMBIA- SI SE DEJA EN
BLANCO SE CAMBIA EL FONDO DE LA PÁGINA]);
unEnlasito=new Array;
unEnlasito[0]=new crear("Veamos la página de
Tunait","http://www.tunait.com","http://www.tunait.com/encuentros/encu
entrosb.jpg","macario");
unEnlasito[1]=new crear("Veamos la de
Caricatos","http://www.pepemolina.com","http://www.forosdelweb.com/ava
tar.php?userid=18599&dateline=1037047895");
unEnlasito[2]=new crear("Quieres ver la página de Web Are
You?","http://www.karlankas.net","http://www.webareyou.com/logo.jpg");

// fonditoMono=[EL FONDO QUE SE QUIERE PARA LA PÁGINA]

fonditoMono="White url('http://www.klasic.org/img/klasic.jpg') no-
repeat fixed center";

//---------------------------------------- NO TOQUES A PARTIR DE AQUI
SI NO SABES LO QUE HACES ---------------------
for (principio=0;principio<unEnlasito.length;principio++){
codigoQueTeAhorrasPicar=codigoQueTeAhorrasPicar+"<a
href="+unEnlasito[principio].ondeVa+"
onmouseout='noQuieroVe(unEnlasito["+principio+"])'
onmouseover='quieroVe(unEnlasito["+principio+"])'>"+unEnlasito[princip
io].tezto+"</a><br>";
}

function quieroVe(etoMimamente){
if (etoMimamente.queFotoCambio!=null){
fotilloPaCambia=document.getElementById(etoMimamente.queFotoCambio);
fotilloPaCambia.src=etoMimamente.tieneSuImagensitaYTo.src;
}
else{cuerpoSerrano.style.background="White
url("+etoMimamente.tieneSuImagensitaYTo.src+") no-repeat fixed
center";}
}
function noQuieroVe(etoMimamente){
if (etoMimamente.queFotoCambio!=null){
fotilloPaCambia=document.getElementById(etoMimamente.queFotoCambio);
fotilloPaCambia.style.visibility="hidden";
}
else{cuerpoSerrano.style.background=fonditoMono;}
}

//----------------------------------- HALE, YA PUEDES TOCAR
----------//
</script>
</head>

<body id="cuerpoSerrano"
onload="document.getElementById('cuerpoSerrano').style.background=fond
itoMono">

<script>document.write(codigoQueTeAhorrasPicar)</script>



<img id=pepe style="visibility:hidden"
onLoad="this.style.visibility='visible'"><br>

<img id=juan style="visibility:hidden"

<img id=macario style="visibility:hidden"

</body>
</html>
Javascript: Imágenes en miniatura

Con este código:
<html>
<head>
<script>
function minifoto(foto,H,V,ancho,alto) {
propH = ancho / H;
propV = alto / V;
if (propH>propV) {
anchoF = H * propV;
altoF = alto;
}
else {
altoF = V * propH;
anchoF = ancho;
}
de = (ancho - anchoF) / 2;
su = (alto - altoF) /2;
imagen="<div style='width:"+ancho+";height:"+alto+";border:1px
outset'>";
imagen+="<img src='"+foto+"' widht="+anchoF+" height="+altoF;
imagen+=" style='position:relative; left:"+de+";top:"+su+"'>";
imagen+="</div>";
document.write(imagen);
}
</script>
</head>

<body>
<script>
minifoto("foto.jpg",399,291,90,80);
</script>
</body>
</html>
A la función minifoto se pasan: el nombre de la imagen, el ancho y alto real de la imagen y el

ancho y alto en el que se quiere poner la imagen. La función "encaja" la imagen en un recuadro
manteniendo las proporciones.
Nota: Me recuerda el amigo Bravenap, que aunque la imagen aparece en tamaño reducido, se
descarga completa, es decir, con su tamaño real, por lo que no supone reducción del tiempo de
descarga. Deberá tenerse esto en cuenta si se quiere utilizar este código con imágenes muy
grandes o con muchas imágenes.
Javascript: Rotador de banner

Probado en: IE 5+, Netscape 7, Opera 7, Firefox 1Ejemplo
Código:
<script>
// Rotador de banner's . Carlitos. carlosbernad@teleline.es

var ban = new Array()
var enl = new Array()
var indice = 0

ban[0] = new Image()
ban[0].src = "mdw.gif"
enl[0] = "http://www.maestrosdelweb.com"

ban[1].src = "faq.gif"
clara[1] = "http://www.faqsdelweb.com"

ban[2].src = "script.gif"
enl[2] = "http://www.webtutorial.com.ar/scriptmaster/"

ban[3].src = "webest.gif"
enl[3] = "http://www.webestilo.com"

function rota()
{
if (indice == ban.length) indice = 0

if (document.images)
{
document.images.fotico.src = ban[indice].src
}
else
{
document.getElementById('fotico').src=ban[indice].src
}
indice++
setTimeout('rota()',2000)
}
function vete()
{
window.open(enl[indice-1])
}
</script>
<body onload=rota()>
<img src="" id="fotico" onclick="vete()">
Javascript: Previsualizar una imagen

antes de subirla
SI:
<p>Selecciona una imagen</p>

<input type="file" onChange="document.imagen.src='file:///' +
this.value"><br><br>
Vista previa:<br><br>
<img src="imagenpordefecto.gif" name="imagen">
Ejemplo
Nota: sólo funcionará en Internet Explorer
Javascript: Pequeño álbum de fotos

Créditos: Bravenet
Para este script ten en cuenta lo siguiente:
Si vas a emplear más de 3 imágenes, cambia la siguiente línea... if (document.images &&

thisImage < 2) por el número de imagenes que vayas a usar
Código:

</script>
<div align="center"><img name="myShow"
src="http://www.tusitio.com/tuimagen.png" width="468"
height="60"><br><a href="javascript:doPast()">Anterior</a> <a
href="javascript:doAfter()">Siguiente</a></div>
Espero que nos veamos pronto Salu2

Javascript: ¿Cómo hacer una precarga
viendo el porcentaje de carga?
Para llevar el control de las imágenes que se cargan en memoria existe la propiedad
"complete" que indica si están completamente cargadas. Estas tres funciones sirven para ese
control:
function precargar() {
var dibujos = new Array(precargar.arguments.length);
for (var i = 0; i < dibujos.length; i ++) {
dibujos[i] = new Image();
dibujos[i].src = precargar.arguments[i]
}
return dibujos;
}

function precargados(dibujos) {
var parciales = true;
for (var i = 0; i < dibujos.length; i ++)
parciales = (parciales && dibujos[i].complete);
return parciales;
}

function porciento(dibujos) {
var parciales = 0;
for (var i = 0; i < dibujos.length; i ++)
parciales += (dibujos[i].complete) ? 1 : 0;
return parseInt(100 * parciales / dibujos.length);
}
</php>

La idea es hacer un chequeo del estado de carga (precargados) y
mostrar el porcentaje (porciento) que es fácilmente aplicable al
estilo "width" de una capa. Por ejemplo:

<source lang="javascript">
var imagenes;
function continuar() {
alert("Ok.");
}

function cargando() {
document.getElementById("estado").style.width =
porciento(imagenes) + "%";
if (precargados(imagenes))
continuar();
else
setTimeout("cargando()", 100);
}

function ini() {
imagenes = new precargar("img0.jpg",
"img1.jpg",
"img2.jpg",
"img3.jpg",
"img4.jpg",
"img5.jpg",
"img6.jpg",
"img7.jpg",
"img8.jpg"
);
cargando();
}
Donde pone continuar(), puede cambiarse el alert por cualquier otra cosa como por ejemplo
una activación de un botón o un efecto rollover.
Y el código de la página tendría que tener un elemento con id="estado" para mostrar el
porcentaje Por ejemplo:
<div style="position:relative; width: 100px; height: 20px; border:

1px" >

<div style="position:absolute; top: 0; left: 0; width:100%; height:
100%; background-color: blue" >

</div>

<div id="estado"

style="position:absolute; top: 0; left: 0; width: 1%; height: 100%;
background-color: aqua" >

</div>

</div>
Se activaría con un evento como la carga de la página: <body onload="ini()">

Menúes
Javascript: Navegar con un menú

desplegable
(Redirigido desde Navegar con un menú desplegable)
P.- ¿Cómo puedo cambiar de página segun la opción elegida en un <select>?
<select name="select" onChange="location.href=this.value">

<option value="paginauno.html">Pagina 1</option>
<option value="paginados.html">Pagina 1</option>
<option value="paginatres.html">Pagina 1</option>
</select>
Javascript: Menú de salto con la opción

de abrirlo en una nueva ventana
(Redirigido desde Menú de salto con la opción de abrirlo en una nueva ventana)
Menú de salto con la opción de abrirlo en una nueva ventana
<html>
<head>

</script>
</head>

<body>
<form name="optionform">
<select name="test" size=1 style="font:bold 11px verdana;background-
color:#DAE6F8;color:#000000;">
<option value="http://www.epa2.com">Epa2</option>
<option value="http://www.terra.es">Hola amigos</option>
<option value="http://www.mp3.com">Adiós amigos</option>
<option value="http://www.caricatos.com">Saludos a los señores
del anillo de los foros</option>
</select><br>
<input type="checkbox" name="chooseit" value="ON"><span
style="font:11px verdana;">Abrir en nueva ventana pecador.</span><br>
<input type="button" value="Vamos a por ellos" onClick="skip()"
style="font:bold 11px verdana;background-
color:#DAE6F8;color:#cc0000;"></form>
</body>
</html>
Navegación
Javascript:¿Cómo puedo deshabilitar el

uso del botón derecho dentro de mi
página?
[ver ejemplo]
La siguiente solución fue tomada originalmente por kitipaloco deDynamicDrive.com y probada

por el equipo de contestones del Foro de JavaScript con los siguientes resultados:
Funciona bajo:
- Internet Explorer 5.0, 6.0
- Netscape 6.2, 7.0
- Mozilla 1.3a
No funciona bajo:
- Opera 6.01
<html>
<head>
//Disable right click script III- By Renigade
(renigade@mediaone.net)
//For full source code, visit
[url]http://www.dynamicdrive.com[/url]
var message = "";

function clickIE(){
if (document.all){
(message);
return false;
}
}

function clickNS(e){
if (document.layers || (document.getElementById && !document.all))
{
if (e.which == 2 || e.which == 3){
(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = clickNS;
} else {
document.onmouseup = clickNS;
document.oncontextmenu = clickIE;
}
document.oncontextmenu = new Function("return false")
</script>
</head>
<body>
Script para eliminar el botón derecho.
</body>
</html>
Javascript:¿Cómo puedo pasar

parámetros entre dos páginas usando
JavaScript?
[ver ejemplo]
Programa principal (principal.htm)
<html>
<head>
function disparaPopUp(str){
open("popup.htm?Prm=" + str);
}
</script>
</head>
<body>
Valor a ser transmitido:<input type="text" name="texto">
<input type="button" name="boton" value="Transmitir"
onclick="disparaPopUp(document.formulario.texto.value)">
</form>
</body>
</html>
Página popUp que recibe parámetros (popup.htm)
<html>
<head>
<script languaje="JavaScript">

var parmetro; // Nombre de la variable que va a recibir el valor

function valParam(url, prmName){
var prmUpper = prmName.toUpperCase();
var prmPosic = url.indexOf(prmUpper);
var sepPos;
if (prmPosic != -1){
var sepPos = url.indexOf("&", prmPosic);
if (sepPos != -1){
return url.substring(prmPosic + prmUpper.length + 1, sepPos);
} else {
return url.substring(prmPosic + prmUpper.length + 1,
url.length);
}
} else {
return "";
}
}

function getParameters(){
var remplaza = /+/gi;
var url = window.location.href;
var variable;
url = unescape(url);
url = url.replace(remplaza, " ");
url = url.toUpperCase();
parametro = valParam(url, "Prm"); // Lectura y asignación del
valor
}

function muestra(){
document.frm.parm.value = parametro;
}

</script>
</head>
<body onload="getParameters()">
<form name="frm">
<input type="text" name="parm">
<input type="button" value="Leer parámetro" onclick="muestra()">
</form>
</body>
</html>
Javascript:¿Se puede crear una alerta

con opciones de Ok y Cancelar?
<html>
<head>
<script language="Javascript">
function preguntar(){
confirmar=confirm("¿Eres mayor de edad?");
if (confirmar)
//Aquí pones lo que quieras si da a Aceptar
alert('Diste a Aceptar')
else
//Aquí pones lo que quieras Cancelar
alert('Diste a Cancelar')
}
</script>
</head>
<body>
<a href="java script:preguntar()">Cuidao que muerdo</a>
</body>
</html>
mi página a otras dependiendo de la
resolución del browser del cliente?
<html>
<head>
function redireccionar() {
var url640x480 = "http://www.tu-sitio.com/640x480";
var nWdt = screen.width;
var nHgh = screen.height;
if ((nWdt == 640) && (nHgh == 480)) window.location.href=
url640x480;
else if ((((nWdt == 800) && (nHgh == 600)) window.location.href=
url800x600;
else if ((nWdt == 1024) && (nHgh == 768)) window.location.href=
url1024x768;
else window.location.href= url640x480;
}
</script>
</head>
<body onLoad="redireccionar()">
</body>
</html>
Javascript:¿Cómo redireccionar a una

página?
Entre el <HEAD> y el </HEAD> de tu página debes poner lo siguiente:
Código:
<META HTTP-EQUIV="Refresh" CONTENT="@;URL=http://www.tusitioweb.com">
Javascript:¿Cómo evitar que tu página

se cargue en un frame externo?
Poniendo esto en el <head> de tu página.
Código:
<script>
if (parent.frames.length > 0) parent.location.href =
self.document.location
</script>
Javascript:¿Cómo cargar el frame

principal si acceden directamente a una
de mis páginas secundarias?
Poniendo esto en el <head> de tus páginas secundarias.
Código:
<script>
if(top==self) top.location="index.htm"
</script>
Donde index.htm, es el nombre de tu página principal.
Javascript:¿Cómo se puede manipular

mediante JavaScript los botones
"Atrás", "Adelante" y "Recargar" del
navegador?
[ver ejemplo]
<html>
<head>
</head>
<body>
<b>Manipular una páginia individual o frame actual</b><br>
<a href="javascript:history.reload()">Recargar esta página o
frame</a><br>
<a href="javascript:history.back()">Ir a página (o frame)
anterior</a><br>
<a href="javascript:history.forward()">Ir a página (o frame)
siguiente</a><br><br>
<b>Manipular un frame vecino</b><br>
<a href="javascript:parent.frames[2].history.reload()">Recargar un
frame vecino</a><br>
<a href="javascript:parent.frames[2].history.back()">Ir a frame
vecino anterior</a><br>
<a href="javascript:parent.frames[2].history.forward()">Ir a frame
vecino siguiente</a><br><br>
<b>Manipular un frame vecino usando su nombre</b><br>
<a href="javascript:parent.nombreDelFrame.history.reload()">Recargar
un frame vecino (por nombre)</a><br>
<a href="javascript:parent.nombreDelFrame.history.back()">Ir a frame
vecino anterior (por nombre)</a><br>
<a href="javascript:parent.nombreDelFrame.history.forward()">Ir a
frame vecino siguiente (por nombre)</a><br><br>
</body>
</html>
Javascript:¿Cómo puedo detectar los

plugins de Flash, Shockwave, Live
audio, Netscape Media Player, Quick
time?

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000"
onLoad="MM_checkPlugin('Shockwave
Flash','index.html','http://www.macromedia.com/shockwave/download/down
load.cgi?
P1_Prod_Version=ShockwaveFlash&Lang=LatinAmerica&P5_Language=S
panish',true);return document.MM_returnValue">
P¿Cómo detecto shockwave player?

</script>
</head>

onLoad="MM_checkPlugin('Shockwave for
Director','index.html','http://www.macromedia.com/shockwave/download/d
ownload.cgi?Lang=LatinAmerica&P5_Language=Spanish',true);return
document.MM_returnValue">
P ¿Cómo detecto live audio?

</script>
</head>

onLoad="MM_checkPlugin('LiveAudio','index.html','http://www.live-
audio.com/',true);return document.MM_returnValue">
P¿Cómo detecto Netscape Media Player?

</script>
</head>

onLoad="MM_checkPlugin('Netscape Media
Player','index.html','http://rc.lrs.lt:8080/n/media/nmplaydn.html',tru
e);return document.MM_returnValue">
P¿Cómo detecto quick time?
R

</script>
</head>

onLoad="MM_checkPlugin('QuickTime Plug-
In','index.html','http://www.apple.com/quicktime/download/',true);retu
rn document.MM_returnValue">
Javascript:¿Cómo ejecutar un script al

entrar en una página?
Onload [Ejemplo]
Añadiendo el evento onLoad a la etiqueta <body>
Ejemplo:
Código:
<head>
<script>
function entrada()
{
alert("Hola!!")
}
</script>
</head>
<body onLoad="entrada()">
...
...
</body>
Javascript:¿Cómo ejecutar un script al
salir de una página?
Onunload [Ejemplo]
Añadiendo el evento onUnload a la etiqueta <body>
Ejemplo:
Código:
<head>
<script>
function salida()
{
alert("Adios!!")
}
</script>
</head>
<body onUnload="salida()">
...
...
</body>
Javascript:¿Cuál es el esquema usado

para identificar un usuario registrado
en una página?
[ver ejemplo]
Aunque la identificación de un usuario es un problema que debe atenderse en el lado del

servidor usando PHP o ASP o JSP, hay también una porción del código que debe hacerse del
lado del cliente usando JavaScript.
El siguiente esquema es una "simulación" del proceso de validación, que pasa como parámetro
el nombre del usuario. En una solución real, dicho usuario debe ser registrado en una variable
del lado del servidor o una cookie.
Login0.htm
<html>
<head>

var usuario = "";

function valParam(url, prmName){
var prmUpper = prmName.toUpperCase();
var prmPosic = url.indexOf(prmUpper);
var sepPos;
if (prmPosic != -1){
var sepPos = url.indexOf("&", prmPosic);
if (sepPos != -1){
return url.substring(prmPosic + prmUpper.length + 1, sepPos);
} else {
return url.substring(prmPosic + prmUpper.length + 1,
url.length);
}
} else {
return "";
}
}

function getParameters(){
var remplaza = /+/gi;
var url = window.location.href;
var variable;
url = unescape(url);
url = url.replace(remplaza, " ");
url = url.toUpperCase();
usuario = valParam(url, "Usr");
}

function popup(){
open("login1.htm");
}

function salir(){
location.href = "login0.htm?Usr=.";
}
</script>
</head>
<body>
<form name="frm">
<table border="0" width="100%">
<tr>
<td width="100%" align="right">
getParameters();
if (usuario == "" || usuario == "."){
document.write("<a href='#'
onclick='popup()'>Conectarse</a>");
} else {
document.write("Hola " + usuario + " ");
document.write("<a href='login0.htm?Usr='>Desconectarse</a>");
}
</script>
</td>
</tr>
</table>
</form>
</body>
</html>
Login1.htm
<html>
<head>
function reposiciona(){
var ancho = screen.width;
var alto = screen.height;
resizeTo(300, 250);
moveTo((ancho - 300) / 2, (alto - 250) / 2);
}

function entrar(){
opener.location.href = "login0.htm?Usr=" +
document.form2.nomb.value;
close();
}
</script>
</head>
<body onload="reposiciona()">
<form name="form2">
<table border="0">
<tr>
<td align="right">
Nombre:
</td>
<td>
<input type="text" name="nomb"><br>
</td>
</tr>
<tr>
<td align="right">
Clave:
</td>
<td>
<input type="password" name="key"><br>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="button" value="Login" onclick="entrar()">
</td>
</tr>
</form>
</body>
</html>
Javascript:¿Cómo puedo mediante un

botón, un link o una letra presionada en
un área de texto, hacer un salto a una
etiqueta interna dentro de mi página?
[ver ejemplo]
<html>
<head>

function salta(sChar){
location.href = "#" + sChar;
}

function procesa(){
if(window.event.keyCode == 65) salta("a");
if(window.event.keyCode == 66) salta("b");
if(window.event.keyCode == 67) salta("c");
if(window.event.keyCode == 68) salta("d");
if(window.event.keyCode == 69) salta("e");
}

</script>
</head>
<body>
<form name="frm">
<table border="0">
<tr>
<td>
<a href="#a">A</a>
<a href="#b">B</a>
<a href="#c">C</a>
<a href="#d">D</a>
<a href="#e">E</a>
</td>
<td>
<input type="button" value="A" onclick="salta('a')">
<input type="button" value="B" onclick="salta('b')">
<input type="button" value="C" onclick="salta('c')">
<input type="button" value="D" onclick="salta('d')">
<input type="button" value="E" onclick="salta('e')">
</td>
<td>
<input type="text" onKeyUp="procesa()">
</td>
</tr>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><b
r>
<a name="a"></a>Letra A:
r>
<a name="b">Letra B:
r>
<a name="c">Letra C:
r>
<a name="d">Letra D:
r>
<a name="e">Letra E:
</form>
</body>
</html>
Javascript:¿Cómo hacer que un enlace

apunte a una página alternativa si la
primera está caida?
Con este código: Ver Ejemplo
<html>
<head>
<title>Redirección selectiva</title>
<style>
#enlace{
cursor:hand;
}
</style>
<script>


var imagenPrimera=new Image;
var imagenSegunda=new Image;

imagenPrimera.src="http://80.24.56.172/karlankas.jpg"; //La imagen
primera tiene que estar en el servidor donde esté direcciónPrimera
imagenSegunda.src="http://www.arquo.com/Imagenes/logotipo.jpg";

direccionPrimera="http://80.24.56.172";
direccionSegunda="http://www.arquo.com";

direccion=direccionPrimera;

function unError(imag){
imag.src=imagenSegunda.src;
direccion=direccionSegunda
}
</script>
</head>
<body>
<center>
<div id="cuerpo"></div>
<script>

codigo="<img id='enlace' src='"+imagenPrimera.src+"'
onError='unError(this)' onClick='location.replace(direccion);'>"
cuerpo.innerHTML=codigo
</script>
<br>
</center>
</body>
</html>
Javascript:¿Cómo puedo lograr que si
alguien llega a una sección de mi sitio
sin cargar los frames, ésta se redirija a
la estructura de marcos cargando por
defecto dicha sección?
Redireccionar una página a su estructura de marcos cargando por defecto dicha pág.
Habrá que crear la estructura de frames de forma dinámica mediante document.write. Este
ejemplo es para una estructura de 2 frames. Si se quieren más frames es sólo cuestión de
pedir al script que te los escriba de la misma forma que el resto.
Página de frames frames.htm
<html>
<head>
<title>Página de Marcos</title>
//###script por tunait

cadena=document.location.search.substring(1,location.search.length);
cadena2=cadena.split('=')
pagina=cadena2[1]
if (pagina==null)
{
pagina='principal.htm'
}
document.write('<frameset rows="80,*" frameborder="YES" border="1"
framespacing="1" cols="*">')
document.write(' <frame name="arriba" scrolling="NO" noresize
src="arriba.htm" >')
document.write('<frame name="principal" src="' + pagina + '">')
document.write ('</frameset>')
</script>
</head>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>
...y el siguiente código habrá que añadirlo en algún lugar entre los tags <head> y </head> a
todas las páginas (secciones) que hayan de cargarse dentro del frame principal:
url=this.location.pathname
if(top==self) top.location="frames.htm?url=" + url
</script>
Javascript:¿Cómo puedo mostrar la

resolución de la pantalla del usuario y
con un simple enlace redireccionarle a
la página apropiada?
<html>
<head>
<script>
var res, url
if ((screen.width == 800) && (screen.height == 600)){
res="800x600"
url="800x600.htm"}
else if ((screen.width == 1024) && (screen.height == 768)){
res="1024x768";
url="1024x768.htm"}
res="1152x864";
url="1152x864.htm"}
res="1280x1024";
url="1280x1024.htm"}
else{
window.location.href = "otra.htm"}
function Entrar(){
window.location.href=url}
</script>
</head>
<body>
Tu Resolución de Pantalla es:
<b><script>document.write(res)</script></b><br>
<a href="javascript:Entrar()">Acceda a la página correspondiente a tu
resolución</a>
</body>
</html>
una página a otra pasados unos
segundos?
<html>
<head>
</head>

<body style="font:bold 10px/15px verdana;color:navy">
<script>

var segundos=3
var direccion='http://www.webareyou.com'
var mensaje="Nos hemos trasladado."

milisegundos=segundos*1000
window.setTimeout("window.location.replace(direccion);",milisegundos);
document.write(mensaje+" Si pasados "+segundos+ " segundos no es
redireccionado pinche <a href='"+direccion+"'>aquí</a>.");
</script>

</body>
</html>
__
Javascript:¿Cómo pongo un buscador

Web en mi sitio?
Créditos: No me acuerdo de donde lo bajé pero ahí pongo el autor. / Script by Jari Aarniala
[www.mbnet.fi/~foo -- foo@mbnet.fi]
Ver ejemplo: Pulsa aqui pecadoooorr
NOTA: Si este script estuviese repe, favor de hacermelo saber. Gracias.
Código:
<body>
<tr>
<td width="100%">
<p align="center"> </td>
</tr>
<tr>
<td width="100%"> </td>
</tr>
<tr>
<td width="100%" style="text-indent: 0" height="19">
<span lang="es"><script language="JavaScript">

</script>

<basefont face="Verdana, Arial, sans-serif">

</span>

<form name="searchForm">

<div align="center">
<center>

<table width=323 border="2" cellpadding=3 cellspacing=0 bgcolor=444444
style="border-collapse: collapse" bordercolor="#111111">

<tr>
<td bgcolor=lightblue width="148"><font size="1"><span
lang="es">Buscar por:</span></font><font size=1 face="Verdana, Arial,
sans-serif"><span lang="es"><br>

</span>
<td bgcolor=lightblue width="96"><font size="1"><span lang="es">Buscar
desde:</span></font><span lang="es"><td bgcolor=lightblue width="90">

<tr>
<td bgcolor=navajowhite width="148">
<input style="background: dddddd" name="searchText" type="text"
size="20">
<select style="background: dddddd" name="whichEngine">
<option selected>Altavista
<option>Yahoo!
<option>Excite
<option>Hotbot
<option>Infoseek
<option>Lycos
<option>AOL Netfind
</select>
<input type="button" value="Buscar " onClick="startSearch()">

</select>
</table>
</center>
</div>
</form>

</span> </td>
</tr>
</body>
</html>
Javascript:¿Cómo conseguir que no

funcione el botón atrás del navegador?
Con este código, que debes poner en la página anterior, por lo que sólo podrás evitar que
vuelva atrás si la página anterior es tuya.
<script>

// /////////////// EN EL HEAD ///////////////////

if (history.forward(1)){location.replace(history.forward(1))}

</script>
__
Javascript:Botones de indicación de
navegación
Me gustaría saber cómo puedo hacer para que además de que mis botones cambien de
imagen cuando paso por encima con el ratón (de imagen A a Imagen B), también cambie a una
tercera imagen diferente cuando hago ‘clic’ con el ratón sobre el botón, y que permanezca así
hasta que pinche con el ratón en otra opción diferente del menú, momento en el que el enlace
anteriormente abierto debe volver a la imagen A.
R.- Con este código:
<html>
<head>

<script>
var imagen=new Array;
imagen[0]=new Image;
imagen[0].no=new Image();
imagen[0].pincha=new Image();
imagen[0].si=new Image();



imagenAnterior=new Image;

var numeroAnterior=0
//--------- PON AQUÍ LA RUTA DE LAS IMÁGENES (NO HAN DE SER
ABSOLUTAS)---------------

imagen[0].no.src="no.gif";
imagen[0].pincha.src="hazclick.gif";
imagen[0].si.src="si.gif";

imagen[1].no.src="no1.gif";
imagen[1].pincha.src="hazclick1.gif";
imagen[1].si.src="si1.gif";

imagen[2].no.src="no2.gif";
imagen[2].pincha.src="hazclick2.gif";
imagen[2].si.src="si2.gif";

//--------------------------------------------------------------------
----------------
function cliqueo(esto,numero){
imagenAnterior.src=imagen[numeroAnterior].no.src;
imagenAnterior=esto;
numeroAnterior=numero
esto.src=(esto.src!=imagen[numero].si.src)?
imagen[numero].si.src:imagen[numero].no.src;
}

</script>
</head>

<body>
<a onfocus="this.blur()" href=#>
<img
border=0
src="no.gif"
onclick="cliqueo(this,0)"
onmouseover="if (this.src==imagen[0].no.src)
{this.src=imagen[0].pincha.src}"
onmouseout="if (this.src==imagen[0].pincha.src)
{this.src=imagen[0].no.src}"
>
</a>

<img border=0
src="no1.gif"
>
</a>

<img border=0
src="no2.gif"
>
</a>
</body>
</html>
Javascript:¿Cómo mostrar 4 imagenes

de la BDs para luego hacer navegación
con MouseOver?
<head>
<script>

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}

</script>

<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
</script>
</head>

Esto dentro del body para la precarga de las imagenes:

<script>
preloadimages("<%=rs("foto1")%>","<%=rs("foto2")%>","<
%=rs("foto3")%>","<%=rs("foto4")%>")
</script>

Aquí va la imagen más grande que será reemplazada por las de abajo
cuando se haga el mouseover:
ponerla donde quiera

<a href="javascript:warp()"><img src="<%= rs("foto1") %>"
name="targetimage" border=0 width=175 height=200></a>

Y esto donde van las imágenes para hacer el mouse over:

<td><a href="verfoto.asp?id=<%=rs("id")%>"
onMouseover="changeimage(myimages[0],this.href)">
<img src="<%=rs("foto1") %>" border=0 width="36"
height="41"></a></td>

<img src="<%= rs("foto1") %>" border=0 width="36"


__
Javascript:¿Cómo puedo forzar que el

usuario entre siempre por mi página
principal (index.htm) y no por mis
páginas secundarias si NO utilizo
marcos (frames)?
En el HEAD de la página secundaria a la que no quieres que entren sin pasar por index.htm:
function redireccionar() {
var origen = document.referrer;
if (origen!="http://tuweb/index.htm") window.location.href=
"index.htm";
}
</script>
Y en el BODY de esa misma página, poner al principio del todo:
<body onactivate="redireccionar()">
Notas: el valor de la variable origen debe ser la URL completa incluyendo la página "de
control", y el `window.location.href apunta a "index.htm" directamente porque la página que
contiene el script se encuentra en el mismo directorio que "index.htm". Si no es así, poner la
ruta.
Salu2 y gracias a Kaopectate por la "pista clave" .

Javascript:¿Cómo puedo abrir la página
principal de mi sitio sin barra de
herramientas, sin barra de estado, sin
menú y sin barra de direcciones?
El truco consiste en abrir una página intermedia que dispare un popup con las características
que necesites y luego hacer que esa ventana intermedia se cierre sola. Para ello usamos una
combinación del FAQ-7 y el FAQ-115.
Nota: La página principal propiamente dicha estaría en index1.htm
<html>
<head>

function abreSinNavegacion(){
open('index1.htm', 'principal',
'location=no,menubar=no,status=no,toolbar=no');
cerrar();
}

function cerrar() {
var ventana = window.self;
ventana.opener = window.self;
ventana.close();
}

</script>
</head>
<body onload="abreSinNavegacion()">
</body>
</html>
Javascript:¿Cómo puedo poner una

barra que me indique que la página
esta siendo cargada?
Para hacerlo, debemos incorporar el siguiente código dentro de las etiquetas <head> y
</head>:
<html>
<head>
<title>Título</title>
<div ID="waitDiv"
style="position:absolute;left:300;top:300;visibility:hidden">
<table cellpadding="6" cellspacing="0" border="1" bgcolor="#000000"
bordercolor="#FFFFFF">
<tr><td align=center>
<font color="#ffffff" face="Verdana" size="4">Cargando
página...</font>
<img src="/images/cargando.gif" border="1">
</td>
</tr></table>
</div>
<SCRIPT>

</SCRIPT>
</head>
<body>
Cuerpo del sitio
</body>
<SCRIPT language=javascript>

</SCRIPT>
</html>
Javascript:¿Cómo puedo abrir una

ventana cuando otra se cierra?
Con el script que mostraremos a continuación podemos abrir una ventana nueva cuando otra
es cerrada. Lo bueno que tiene es que se puede configurar la cantidad de segundos que se
debe esperar antes de abrir la nueva ventana.
Código fuente
<html>
<head>

</script>
</head>
<body UnOnLoad="doPopup();">
<b>Contenido de tu sitio...</b>
</body>
</html>
Javascript:¿Cómo abrir un pop-up y

cerrar la ventana a la vez?
Bien, creo que esto falta entre las FAQ's...
La he probado y me sirve bien :)
<html>
<head>
<title>Launcher</title>
function launch(){
x=window.open("previewforo.htm","WindowName","width=900,height=600,top
=0,left=0,resizable=yes,scrollbars=yes,menubar=yes,toolbar=yes,status=
yes,location=yes")
ventana.close();
}

</script>
<body>
<p><a href="javascript:launch()">Click aqui.</a></p>
</body>
</html>
Javascript:¿Cómo cerrar una ventana

del explorador confirmando si desea
cerrarla?
Bueno, aunque solo funciona en IE ya que el evento onBeforeUnload (quiere decir un suceso
antes de cambiar o cerrar la ventana).
El script consta así:
Código:
function cierrame() {
event.returnValue = "Escribe el texto a mostrar ";
}
</script>
Y en la etiqueta body donde va a salir el cierrame colocas esto:
Código:
<body onBeforeUnload="cierrame()">
Les repito que el comportamiento onBeforeUnload solo funciona con IE, aunque existen
posibilidades de hacerlo funcionar con otro navegador de la misma especie....!!
Javascript:Confirmar cierre de ventana
Siguiendo con el tema de T4X y a pedido de Tunait, les dejo el siguiente script:
<html>
<head>

function CloseClicked()
{
};
</script>
</head>
<body onbeforeunload="CloseClicked();">
<form id="frmTest" name="frmTest" method="post" runat="server">
</form>
</body>
</html>
Nota: PatomaS agregó que solo sirve para iexplorer y para mozilla 1.7
Javascript:¿Cómo se puede anular el

history mientras se navegue por
nuestra web?
Es tan sencillo como colocar este script en la cabecera de cada una de nuestras páginas:
Código:
if(history.forward(1)){
history.replace(history.forward(1));
}
De esta forma si se carga una página nuestra utilizando el botón atrás se redirigirá al usuario a
la siguiente página visitada, que si es nuestra y también lleva este código hará lo mismo
mientras no sea la última página visitada por el usuario.
--
Javascript:Ocultar el contenido de una
página hasta que se carguen todos sus
elementos
Ideal para páginas con muchas imágenes o galerías.
El fin es evitar que el usuario haga clic sobre una imagen mientras otras aun estén en proceso
de carga, lo cual pudiere evitar que dicho proceso culmine exitosamente.
Método 1
Este procedimiento ha sido probado tanto para Internet Explorer como para Mozilla Firefox
1.- Colocar el siguiente javascript entre <head> y </head>
<script language="JavaScript" type="text/javascript">

function muestraGranDiv(){
document.getElementById('granDiv').style.visibilit y = "visible";
document.getElementById('cargando').style.visibili ty = "hidden";
}
2.- Cargar javascript (invocar función) en body mediante evento onLoad
<body onload="muestraGranDiv()">
3.- Colocar DIVs dentro del body
<div id="cargando" style="width: 100%; height: 500px; position:

absolute; padding-top:20px; text-align:center"><span
class="fontloadingcont">Loading content. Please wait...</span></div>
<div id="granDiv" style="visibility:hidden;">

resto del contenido dentro del DIV

<div>
El div de id="cargando", se usaría para colocar una advertencia al usuario, con la intención de
que espere mientras se carga el contenido de la página. Fíjese que, obligatoriamente este div
id="cargando", debe estar antes del div id="granDiv"
Para el aviso al usuario sobre la espera mientras se carga el contenido, puede usarse
una imagen en vez de texto:
<div id="cargando" style="width: 100%; height: 500px; position:
absolute; padding-top:20px; text-align:center"><img
src="loading_content.gif"></div>
<div id="granDiv" style="visibility:hidden;">

resto del contenido dentro del DIV

<div>
El class="fontloadingcont" es el siguiente (puede ser usado como CSS interna o en un archivo

CSS externo y es opcional):
<style type="text/css">
.fontloadingcont {
font-size: 20px;
font-weight: bold;
}
</style>
Si no desea usar un estilo CSS sobre el texto, no será necesario que mantenga las etiquetas
Método 2
Otra posible forma de conseguir el objetivo
1.- Deshabilitar los links de las imágenes para que no ejecuten la función correspondiente
<a href="pagina.htm" onclick="return false"><img src="imagen.jpg"

/></a>
2.- Colocar el siguiente javascript dentro de <head> y </head>
function enlaces(){
for(m=0; m<document.getElementsByTagName('a'); m++){
document.getElementsByTagName('a')[m].onclick= function(){return true}
}
}
</script>
3.- Invocar la función dentro del body, mediante el evento onLoad
<body onload="enlaces()">
Aviso: Esta breve ayuda es un simple resumen de un tópico encontrado en la sección

Javascript, bajo el número 228025. Sin embargo, la idea original proviene del usuario claray y
una respuesta emitida por él en el tópico de número 224815. Posteriormente, la moderadora
tunait aportó información para ampliar la ayuda y mejorar los códigos, permitiendo su
compatibilidad tanto con Internet Explorer como con Mozilla, e incluso agregando posibilidad de
colocar una advertencia para que el usuario espere mientras carga la página. El Método 2,
proviene también como aporte de la moderadora tunait. El resumen es aporte del usuario
Khronos, quien no pretende atribuirse crédito alguno de las ideas provenientes de los
autores(as) originales.
Javascript:¿Cómo puedo utilizar una

hoja de estilo, dependiendo de la
resolución de la máquina cliente?
Código:
<head>
<link rel="stylesheet" type="text/css" id="hojaestilo">
<script language="JavaScript" type="text/javascript">

</script>
</head>
Y se crean tantos archivos css, como resoluciones se deseen tomar en cuenta, con el siguiente
formato: xxxxxx.css, por ejemplo: 800.css, 1024.css
Tutoriales
Javascript: (teoria) Uso de un archivo

.js
(Redirigido desde (teoria) Uso de un archivo .js)
P: ¿Como puedo meter mi codigo en un .js?
R: Veamos como colocar una función dentro de un .js a través de un ejemplo: Supongamos
que tenemos la siguiente página y que deseamos aislar la función cerrar() dentro de un archivo
llamado librerias.js.
Página original
<html>
<head>
function cerrar(){
window.close();
}
</script>
</head>
<body>
<input type="button" value="Abrir FullScreen" onclick="cerrar()">
</body>
</html>
Lo primero que debemos hacer es "aislar" el código JavaScript contenido
entre las etiquetas <script> y </script> de la siguiente manera:
librerias.js
// Nótese que no se debe colocar ningún tag HTML. Ni siquiera

<script>.
function cerrar(){
window.close();
}
La página transformada quedaría de la siguiente manera:
Página transformada
<html>
<head>
<script type="text/javascript" src="librerias.js">
</script>
</head>
<body>
<input type="button" value="Abrir FullScreen" onclick="cerrar()">
</body>
</html>
Colocar el código de esta manera tiene las siguientes ventajas: - Da mayor claridad a la página.
- Ayuda a reutilizar el código. - Dificulta (no imposibilita) la lectura del código por terceros.
Notas: - Se pueden incluir tantos archivos .js como se necesiten. - La inclusión puede estar
tanto en el <head> como en el <body>.
Javascript: Usos del método open()

(Wizard)
(Redirigido desde Usos del método open() (Wizard))
P: ¿Que atributos puedo usar en el método open()?
R: El método open() tiene la siguiente sintaxis: Ver wizard
open(sURL, sNombre, sAtributos, bHistoria);
Donde:
 sURL: Indica la dirección de la página a abrir.
 sNombre: Nombre de la ventana (util para abrir una segunda dirección sobre la misma ventana.
 sAtributos: Definidos posteriormente.
 bHistoria: Si la nueva dirección se abre sobre una ventana existente, este indicador dice si debe
o no añadirse al historial.
Lista de atributos utilizables en el método open (actualizada con indicadores de compatibilidad

hasta NS-4 e IE-5).
 Atributo: alwaysLowered (NS-4)
 Valor: Se usa sin igualarlo a ningún valor
 Notas: Indica que la ventana debería permanecer siempre al final de la pila de ventanas.
 Atributo: alwaysRaised (NS-4)
 Notas: Indica que la ventana debería permanecer siempre en el tope de la pila de ventanas.
 Atributo: channelMode (IE-4)

 Notas: Indica si la ventana deberá ser presentada en modo "Channel".
 Atributo: dependent (NS-4)
 Valor: Yes/No
 Notas: Si una ventana es no dependiente, podrá sobrevivir luego de que su creador sea cerrado.
 Atributo: directories (NS-4)
 Valor: Yes/No
 Notas: Controla la apariencia del toolbar personal de Netscape.
 Atributo: fullscreen (IE-4)
 Notas: Bajo Windows, MSIE llena la pantalla con la ventana.
 Atributo: height (NS-2,IE-4)
 Valor: Número.
 Notas: Altura de la ventana.
 Atributo: hotkeys (NS-4)
 Valor: Yes/No
 Notas: Colocando este valor a "no", deshabilitará la mayoría de los shortcuts de teclado aparte
de la opción quit.
 Atributo: innerHeight (NS-4)
 Valor: Número.
 Notas: Ajusta la altura interna de la ventana al valor dado.
 Atributo: innerWidth (NS-4)
 Valor: Número.
 Notas: Ajusta el ancho interno de la ventana al valor dado.

 Atributo: left (NS-4,IE-4)
 Valor: Número.
 Notas: Posición izquierda de la ventana.
 Atributo: location (NS-2,IE-4)
 Valor: Yes/No.
 Notas: Barra de direcciones visible/invisible.
 Atributo: menubar (NS-2)
 Valor: Yes/No.
 Notas: Barra de menú visible/invisible.
 Atributo: outerHeight (NS-4)
 Valor: Número.
 Notas: Ajusta la altura externa de la ventana al valor dado.
 Atributo: outerWidth (NS-4)
 Valor: Número.
 Notas: Ajusta el ancho externo de la ventana al valor dado.
 Atributo: resizable (NS-2,IE-4)
 Valor: Yes/No.
 Notas: La ventana puede o no ser cambiada de tamaño.
 Atributo: screenX (NS-4)
 Valor: Número.
 Notas: Nombre alterno para la posición izquierda de la ventana.
 Atributo: screenY (NS-4)
 Valor: Número.
 Notas: Nombre alterno para la posición superior de la ventana.
 Atributo: scrollbars (NS-2,IE-4)
 Valor: Yes/No.
 Notas: Pueden o no ser mostradas las barras de desplazamiento.
 Atributo: status (NS-2,IE-4)
 Valor: Yes/No.
 Notas: Debe o no ser mostrada las barra de estado.
 Atributo: toolbar (NS-2,IE-4)
 Valor: Yes/No.
 Notas: Debe o no ser mostrada las barra de herramientas.
 Atributo: top (NS-4,IE-4)
 Valor: Número.
 Notas: Posición superior de la ventana.
 Atributo: width (NS-2,IE-4)
 Valor: Número.
 Notas: Ancho de la ventana.
 Atributo: z-lock (NS-4)
 Notas: Indica que la ventana debería estar en una posición fija en la pila de ventanas.
Lanzando PopUps con javascript:

Si deseas conocer el modo correcto de abrir un popup usando JavaScript, te
recomendamos este artículo (tomado de esta discusión). Creditos: ferent.
Algunos ejemplos frecuentes:

Abrir una ventana en una ubicación específica:
open("ventana.htm", "nombre",
"left=100,top=100,width=600,height=400");
Abrir una ventana sin barra de herramientas, sin barra de dirección, sin barras de
desplazamiento, sin barra de estatus:
open("ventana.htm", "nombre",
"location=no,menubar=no,scrollbars=no,status=n o");
Abrir una ventana fullscreen (solo Internet Explorer):
open("ventana.htm", "nombre", "fullscreen");
Javascript: DOM: Insertar nuevos

elementos
(Redirigido desde DOM: Insertar nuevos elementos)
P: ¿Puedo Insertar nuevos elementos (tags) en una página dinámicamente?
R: DOM: creando el nuevo elemento con createElement y luego añadiéndolo con appendChild
Ejemplo:
var nuevoDiv = document.createElement("div");

nuevoDiv.align = "center";

document.body.appendChild(nuevoDiv);
Notas:
En el ejemplo se ha insertado una capa (div), pero puede hacerse con cualquier etiqueta válida.
La inserción se ha hecho al final del documento, pero se puede hacer al principio con
insertBefore.
Se pueden insertar en cualquier sitio... creo recomendable usar getElementById para

referenciar la etiqueta "padre" de donde se quiera insertar.
Javascript: DOM: Eliminar elementos
(Redirigido desde DOM: Eliminar elementos)
P: Como eliminar elementos (etiquetas) dinámicamente.
R: DOM: Usando removeChild.
function eliminar(elemento) {
elemento.parentNode.removeChild(elemento);
}
ejemplo de uso:
<div onclick="eleiminar(this)" >clickéeme para borrarme</div>
Varios
Javascript:¿Cómo puedo proteger

las imagenes de mi web para que
nadie las pueda guardar?
No se puede.
Puedes usar muchos trucos para que parezca más difícil guardarse las imágenes
(deshabilitar el botón derecho, esconder menús, imposibilitar "Ver código fuente"...)
pero NUNCA lograrás idear un sistema que impida que cualquier usuario pueda
"robar" tus imágenes si se lo propone.
No es necesario ser ningún genio para saltarse cualquier protección de Javascript,

basta con usar un navegador con Javascript deshabilitado.
Javascript:¿Cómo puedo hacer que
agreguen mi sitio web, como su página
de Inicio?
<html>
<head>

</script>
</head>
<body>
<IE:HOMEPAGE ID="obj_Pagina_Inicio"/>
<a href="javascript:Pagina_Inicio();">Convierte [color=orangered][u]Tu
Sitio Web[/u][/color] en tu página de Inicio</a>
Únicamente debes cambiar los contenidos con Color Rojo Anaranjado o Subrayado
Javascript:¿Cómo puedo hacer que

agreguen mi sitio web a sus Favoritos?
<html>
<head>
<script language="JavaScript1.2">
var url="http://www.tu_sitio.com"
var titulo="Tu Sitio Web"
function agregar(){
if (document.all)
window.external.AddFavorite(url,titulo)
}
</script>
</head>
<body>
<script>
if (document.all)
document.write('<a href="javascript:agregar()">Agregar a
Favoritos</a>')
</script>
</body>
</html>
A pesar de ese pequeño código, se puede simplificar poniéndolo únicamente en el Tag del
Body:
<a href="javascript:window.external.AddFavorite('http ://www.tu_sitio.com', 'Tu Sitio

Web')">Agregar a Favoritos</a> .
¿Cuál es la diferencia? Pues el que os puse al principio, es para evitarnos cualquier posible
error con Navegadores distintos al Internet Explorer. Es el que os recomiendo poner
Javascript:¿Cómo puedo incluír un salto

de línea dentro de un mensaje de alert?
[ver ejemplo]
<html>
<head>
function mostrar(){
alert("Este es un mensaje de alerta\ncon mas de una línea");
}
</script>
</head>
<body>
<form name="frm">
<input type="button" value="Alert multilínea" onclick="mostrar()">
</form>
</body>
</html>
Javascript:Imprimir sin diálogo de
confirmación IE
<HTML>
<HEAD>
<SCRIPT language="javascript">
function imprimir()
{ if ((navigator.appName == "Netscape")) { window.print() ;
}
else
{ var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0
CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, -1); WebBrowser1.outerHTML = "";
}
}
</SCRIPT>
</HEAD>
<BODY onload="imprimir();">
Esta es la página impresa de prueba!
</BODY>
</HTML>
Javascript:¿Cómo puedo hacer que una

vez transcurridos "n" segundos de
inactividad en mi página se dispare una
rutina de screen saver?
[ver ejemplo]
<html>
<head>

var id = 0;
var bEjecutado = false;
var nMiliSegundos = 5000;

function iddle(){
if (bEjecutado) window.clearTimeout(id);
bEjecutado = true;
id = window.setTimeout("screenSaver()", nMiliSegundos);
}

function screenSaver(){
alert("Ponga aquí su método Screen Saver");
}

</script>
</head>
<body onload="iddle()" onkeyup="iddle()" onclick="iddle()">
<form name="frm">
Este PopUp se autodestruirá en cinco segundos...
</form>
</body>
</html>
Javascript:¿Cómo saber las

coordenadas del ratón?
[code]
<html>
<head>
<title>Coordenadas</title>

</script>
</head>

<body onload="init()">
Eje X <input type="text" id="ejeX" value="0" size="4">
<br>Eje Y <input type="text" id="ejeY" value="0" size="4">
</body>

</html>
Javascript:¿Cómo conocer los detalles

del visitante de mi página?
Preguntándoselos o con este código:
<html>
<head>
</head>

<body style="font:normal 10px/20px verdana;">
<script>
document.write("<b>Motor del Navegador:</b>
"+navigator.appCodeName+"<br>");
document.write("<b>El Navegador es: </b>"+navigator.appName+"<br>");
document.write("<b>LA versión del Navegador es:</b>
"+navigator.appVersion+"<br>");
if (navigator.javaEnabled())document.write("Tiene Java activado<br>");
else document.write("No tiene Java activado <br>");
document.write("<b>Motor del Navegador:</b>
"+navigator.userAgent+"<br>");
document.write("<b>Idioma del Navegador:</b>
"+navigator.userLanguage+"<br>");
document.write("<b>Anchura de la Pantalla:</b>"+screen.width+"
pixels<br>");
document.write("<b>Altura de la Pantalla:</b>"+screen.height+"
pixels<br>");

</script>
</body>
</html>
Javascript:Desactivar la tecla F5
Créditos: Yanix
R: [ver ejemplo]
<html>
<head>

document.onkeydown = function(){
if(window.event && window.event.keyCode == 116){
window.event.keyCode = 505;
}
if(window.event && window.event.keyCode == 505){
return false;
}
}

function pon_hora(){
var dHora = new Date();
var res = String(dHora.getHours()) + ":" +
String(dHora.getMinutes()) + ":" + String(dHora.getSeconds());
document.frm.txt.value = res;
return res;
}

</script>
</head>
<body onload="pon_hora()">
<form name="frm">
<h1><b>ANULACIÓN DE LA TECLA TECLA F5</b><br></h1>
Hora actual: <input type="text" name="txt"><br><br>
(Al seleccionar el botón "Actualizar" del navegador la hora debería
actualizarse, pero con la tecla F5 no)
</form>
</body>
</html>
Javascript:Mostrar teclado en pantalla

Con este código ¡¡ahora con tecla de borrar, mayusculas/minúsculas y teclado QWERTY!!
Ahora compatible con firefox:Ver Ejemplo
<html>
<head>
<title>79.-Teclado</title>
<script>
//Script absurdo y original de KarlanKas para forosdelweb.com

texto="";
var Tletras=new Array
("Q","W","E","R","T","Y","U","I","O","P","A","S","D","F","G","H","J","
K","L","Ñ","Z","X","C","V","B","N","M",",",".");
var z=0;
var mayus=true
function anadir(letra){

texto=document.getElementById("barra").value;
if(letra=="<<"){
numeroLetras=texto.length-1
texto=texto.substring(0,numeroLetras);
}
else{
if(!mayus){letra=letra.toLowerCase()}
texto=texto+letra;
}
document.getElementById("barra").value=texto;
}
function mostrar(){
if (z==0)
{z=1;document.getElementById("botones").style.display="block";pregunta
.innerText="Ocultar teclado";}
else
{z=0;document.getElementById("botones").style.display="none";pregunta.
innerText="Mostrar teclado";}
}
function cambiomayus(aqui){
if(aqui.checked){mayus=true}
else{mayus=false}
}
</script>

</head>

<body style="font:normal 10px/15px verdana">
<center>
<div style="width:300px">
<input type="Text" id="barra" name="barra"
style="width:300px;border:solid 1px black" ><br>
<br>
<div align=center id="botones" style="font:normal 8px/4px
verdana;display:none;"></div>
<script>
var letras="";
var p=0;
for (a=0;a<Tletras.length;a++){
letras=letras+"<input style='width:20px;' type='Button'
value="+Tletras[a]+" onclick=anadir('"+Tletras[a]+"')> ";
p=p+1;
if(p==10){p=0;letras=letras+"<br><br>";}
}
botones.innerHTML=letras+"<input style='width:20px;' alt='Borrar'
type='Button' value=« onClick=anadir('<<')><br><br><input
style='width:205px;height:22px;' type='Button' value='espacio'
onclick=anadir('&#160')><br><input type=checkbox name=mayusculas
onclick='cambiomayus(this)' checked><font
style='font:10px'>Mayusculas</font>";

</script>
<a id="pregunta" href=javascript:mostrar()>Mostrar teclado</a><br>
</div>
</center>
</body>
</html>
__
Javascript:¿Cómo deshabilito la
selección de un texto para evitar que
sea copiado?
Aunque es imposible bloquear el copiado de cualquier elemento de la página vamos a
ponérselo un poco más difícil a los copiones y vamos a deshabilitar la opción de marcar o
seleccionar un texto:
function disableselect(e)
{
return false
}
function reEnable()
{
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar)
{
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>
NOTA: Sacado de www.mundomikeoldfield.es.vg , no sé el nombre ni email del autor original,

sino lo ponía. Este script circula por todo internet sin el copyright, por eso me es imposible
saberlo. Perdón si se ofende alguien.
Javascript:¿Cómo crear botón de

"guardar como..."?
<HTML>
<HEAD>
function guardarcomo()
{
var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0
CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(4, 0);
WebBrowser1.outerHTML = "";
}
</script>
</HEAD>
<BODY>
Oprime el botón para guardar esta página...<BR>
<input type="submit" value=" Guardar " onClick=guardarcomo()
name="miboton">
</BODY>
</HTML>
Sirve para IE 5.5+

Javascript:Copiar el texto que se ha
seleccionado en la página
Código:




<HEAD>





</script>

</HEAD>



<BODY>




<form name="it">

<p>This script allows you to select text on a web page and then copy
it into a text box. Neat!</p>
<div align="center">
<input onclick="copyit(this.form.select1)" type="button" value="Press
to copy the highlighted text" name="btnCopy">
<p>
<textarea name="select1" rows="4" cols="45"></textarea>
</div>
</form>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript
Source</a></font>
</center><p>


__________________
Leí que el tabaco era malo y dejé de fumar.
Leí que el alcohol era malo y deje de beber.
Leí que el sexo era malo y dejé de leer.
Javascript:¿Cómo puedo saber el tipo

de navegador y la versión del mismo?
[ver ejemplo]
La función getBrowserName() retornará uno de los siguientes valores:
- ie = Internet Explorer
- ns = Netscape
- op = Opera
- mo = Mozilla
La función getBrowserVersion() retornará la versión del navegador correspondiente.
<html>
<head>
<script LANGUAGE="JavaScript">

var sBrowser;
var sVersion;

function setBrowserType(){
var aBrowFull = new Array("opera", "msie", "netscape", "gecko",
"mozilla");
var aBrowVers = new Array("opera", "msie", "netscape", "rv",
"mozilla" );
var aBrowAbrv = new Array("op", "ie", "ns", "mo",
"ns" );
var sInfo = navigator.userAgent.toLowerCase();;

sBrowser = "";
for (var i = 0; i < aBrowFull.length; i++){
if ((sBrowser == "") && (sInfo.indexOf(aBrowFull[i]) != -1)){
sBrowser = aBrowAbrv[i];
sVersion =
String(parseFloat(sInfo.substr(sInfo.indexOf(aBrowVers[i]) +
aBrowVers[i].length + 1)));
}
}
}

setBrowserType();

function getBrowserName(){
return sBrowser;
}

function getBrowserVersion(){
return sVersion;
}

</script>
</head>
<body>
setBrowserType();
document.write("Browser: " + getBrowserName() + "<br>");
document.write("Versión: " + getBrowserVersion() + "<br><br>" );
</script>
</body>
</html>
Javascript:¿Cómo puedo ordenar los
datos de una tabla dependiendo de
cada columna?
Muy sencillo, consta de dos pasos.
1º Añade este Script en el head


</script>
2º Paso: Crear la tabla
//indicar el número de columnas, teniendo cuidado de que no haya

colspan
<table name="rsTable" id="rsTable" cols=6>
<tr><td><A href="java script:sortTable(0, rsTable">ID</A></td>
<td><A href="java script:sortTable(1, rsTable);">Nombre</A></td>
<td><A href="java script:sortTable(2,
rsTable);">Apellidos</A></td>

//etc...
Y lo demás depende de ustedes.
Javascript:¿Cómo puedo saludar al

visitante según su pais de origen?
Con este código.
Tomado de: Elosan
Código:
<script>
nul = "";
if (navigator.userLanguage == "es") nul = "España";
if (navigator.userLanguage == "es-mx") nul = "Mejico";
if (navigator.userLanguage == "es-gt") nul = "Guatemala";
if (navigator.userLanguage == "es-cr") nul = "Costa Rica";
if (navigator.userLanguage == "es-do") nul = "Republica Dominicana";
if (navigator.userLanguage == "es-pa") nul = "Panama";
if (navigator.userLanguage == "es-ve") nul = "Venezuela";
if (navigator.userLanguage == "es-co") nul = "Colombia";
if (navigator.userLanguage == "es-pe") nul = "Perú";
if (navigator.userLanguage == "es-ar") nul = "Argentina";
if (navigator.userLanguage == "es-ec") nul = "Ecuador";
if (navigator.userLanguage == "es-cl") nul = "Chile";
if (navigator.userLanguage == "es-uy") nul = "Uruguay";
if (navigator.userLanguage == "es-py") nul = "Paraguay";
if (navigator.userLanguage == "es-bo") nul = "Bolivia";
if (navigator.userLanguage == "es-sv") nul = "El Salvador";
if (navigator.userLanguage == "es-hn") nul = "Honduras";
if (navigator.userLanguage == "es-ni") nul = "Nicaragua";
if (navigator.userLanguage == "es-pr") nul = "Puerto Rico";
if (nul == "") document.write("Gracias por visitarnos.");
else document.write("Gracias por visitarnos desde " + nul +".")
</script>
_
Javascript:¿Cómo puedo redondear un
valor a una cierta cantidad de
decimales?
Créditos: jordan
R: [ver ejemplo]
<html>
<head>
function redondear(num, dec){
num = parseFloat(num);
dec = parseFloat(dec);
dec = (!dec ? 2 : dec);
return Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
}

function calcula(){
with (document.frm)
res.value = redondear(val.value, dec.value);
}
</script>
<head>
<body>
<form name="frm">
<table border="0">
<tr>
<td align="right">
Numero:
</td>
<td>
<input type="text" name="val"><br>
</td>
</tr>
<tr>
<td align="right">
Decimales:
</td>
<td>
<input type="text" name="dec"><br>
</td>
</tr>
<tr>
<td>

</td>
<td align="center">
<input type="button" name="calc" value="Redondear"
onclick="calcula()">
</td>
</tr>
<tr>
<td align="right">
Resultado:
</td>
<td>
<input type="text" name="res"><br>
</td>
</tr>
</table>
</form>
</body>
</html>
Javascript:¿Cómo pongo un buscador

interno en mi site?
Siguiendo estos sencillos pasos:
Cómo instalar un buscador, el APB Search 1.12 (que es gratuito)
Hay otra versión que es de pago con más características, pero creo que esta basta y sobra
para la mayoría. A mi modo de ver es bastante bueno, aunque supongo que cada uno tendrá el
de su preferencia.
Pasos a seguir:
1.- Descargar el archivo apbsearch.zip de apbsystems.com
2.- Dentro hay 5 archivos:
archive.cgi
readme11.txt
search.cgi
searchBottom.html
searchTop.html
Copiamos todos (salvo el txt) en el directorio CGI-BIN del servidor donde tengamos alojada la
página. Es importante que dicho upload se haga en modo texto (ver configuración de vuestro
programa FTP).
3.- Una vez subidos dais permisos (CHMOD) a los archivos con extensión CGI (search y
archive).
4.- Debes llamar, si no lo sabes, a tu proveedor de hosting para preguntar la ruta absoluta
dentro del servidor de tu página.
5.- Una vez hecho esto con el navegador ve a esta página:
http://www.tudominio.com/cgi-bin/archive.cgi
Tal vez el acceso a tu directorio de CGI sea otro, pregunta al proveedor de tu hospedaje.
6.- si todo va bien pasa al punto 7, si no, si te sale un error 500 comprueba los permisos del
archivo archive.cgi, comprueba que lo has subido en modo texto. Si te dice que no lo encuentra
comprueba que la ruta es la correcta (ya os he dicho que la ruta puede que no sea la puesta,
hay hospedajes cuya ruta es cgi.tudominio.com...).
7.- Aparecerá una página de diseño bastante discreto: que te preguntará el dominio de la
página, la ruta absoluta de la misma dentro del servidor y la extensión de los archivos que
quieres indexar. Rellénalo como debas y dale a siguiente.
8.- Ahora debes seleccionar los directorios que quieres que indexe. Fíjate que no está marcado
un directorio que no contenga archivos web (imágenes, scripts...).
9.- Por último des-selecciona los archivos que no quieras que indexe (prueba3.html y cosas por
el estilo que siempre se quedan pululando).
10.- Si todo ha ido bien aparecerá una ventana confirmando que ya está.
11.- Ve al directorio CGI-BIN de tu servidor y cambia los permisos de el archivo archive.cgi a

600 para evitar que alguien malintencionado te modifique la lista de archivos.
12.- Añade el siguiente código a la página de búsqueda:
Código:
<form action="/cgi-bin/search.cgi" method="get">

<input type="text" name="search" size=27>
<input type="submit">
</form>
13.- Editad los archivos searchTop.html y searchBottom.html para dar una imagen a la página
de resultados acorde con vuestra página web. Y ya está!!
Espero que os haya ayudado. Si no es así espero vuestras dudas.
Un saludo!
Me alegraría que si usas esta faq comentarás que es mía.
Javascript:¿Cómo puedo hacer un link

en la web para agregar un contacto
messenger?
Puedes utilizar lo siguiente:
<OBJECT height='1' id='MsgrObj' width='1'></OBJECT>

<script>
function DoInstantMessage(person,screen)
{
//Check if person has messenger installed
try{MsgrObj.classid="clsid:B69003B3-C55E-4B48-836C-
BC5946FC3B28";}
catch(e){if(!(e.number && 2148139390) == 2148139390)return;}

//Check if you are logged in
if(MsgrObj.MyStatus == 1)
{
alert("You are not logged into Messenger.\nYou must
login to Messenger before continuing.");
return;
}

//Check if person is already in contact list
try{var contact = MsgrObj.GetContact(person,"");}
catch(e)
{
if((e.number && 2164261642) == 2164261642)
//MSGR_E_USER_NOT_FOUND
{
if(confirm("Add "+screen+" to your contact
list?")==true)MsgrObj.AddContact(0,person);
}
}

//Ask to send an instant message
if(confirm("Send "+screen+" an instant
message?")==true)MsgrObj.InstantMessage(person);
}
</script>
Luego llamas a la función así:
Código:
<a
href=javascript:DoInstantMessage("email@hotmail.com","nombre")>Messeng
er</a>
O bien usa una imagen como enlace.
Javascript:Meter un archivo txt, en una

pagina web
esto va en cualquier parte donde quieras meter el txt
<script language="javascript" src="diario.txt"></script>
esto debe de ir en el txt
var saludo=""+
"<font color=#ffffff size=2>script, para meter un txt<br>"+

"<font color=#333333 size=2>en un html, sin problemas</font>"+

"<font color=#ffffff size=1>CsC3</font>";

document.write(saludo);
este codigo tiene la libertad que puedes meter, texto (con formato), imágenes, etc...
[sé que no soy moderador, ni nada del foro de jscript, pero este código se me hace muy fácil y
práctico, perdón si hago mal, en ponerlo]
Javascript:¿Cómo puedo saber el

Sistema Operativo sobre el que está
corriendo mi página?
<html>
<head>
<script LANGUAGE="JavaScript">

function getOpSys(){
var sOpSys = "<b>O.S.: </b>" +
navigator.appVersion.toLowerCase().split(";", 3)[2];
return sOpSys;
}

</script>
<title></title>
</head>
<body>
document.writeln(getOpSys());
</script>
</body>
</html>
Javascript:¿Cómo puedo mostrar un

número con una determinada cantidad
de decimales?
Con este pequeño código:
<html>
<head>
<script>
Number.prototype.decimal = function (num) {
pot = Math.pow(10,num);
return parseInt(this * pot) / pot;
}
function decimal(src) {
n=eval(document.getElementById(src).value);
alert(n.decimal(3)); //deja 3 decimales
}
</script>
</head>

<body>
<input type="text" id="numero" value="3.1415926">
<input type="button" onClick="decimal('numero')">
</body>
</html>
_
Javascript:¿Cómo tener un WHOIS
siempre a mano?
P.- Muchas veces necesitamos saber si un dominio está libre o comprobar cuando un dominio
de un cliente caduca y tenemos que visitar la típica página de un vendedor de dominios,
solicitarlo y darle al whois cuando nos dice que (obviamente) está ocupado. ¿No hay una forma
más sencilla?
R.- Sí la hay, pega este código en la barra de dirección de tu navegador, a continuación pincha
en el espacio de la derecha de dicha barra donde suele aparecer el icono de página web (en el
explorer una hoja con una e delante) y arrástralo hasta la barra de vínculos.
javascript:pepe=prompt("nombre del
dominio","","");document.location("http://www.dnsstuff.com/tools/whois
.ch?ip="+pepe);
Javascript:Proteger dirección de correo

Con este pequeño código, (no es perfecto, pero bueno, puede funcionar)
Créditos Bravenet
<SCRIPT LANGUAGE="javascript">
var primero = 'ma';
var segundo = 'il';
var tercero = 'to:';

// ejemplo: epa2
var direccion = 'epa2';

// ejemplo: hotmail
var dominio = 'hotmail';

var extension = 'com';

document.write('<a href="');
document.write(primero+segundo+tercero);
document.write(direccion);
document.write('@');
document.write(dominio);
document.write('.');
document.write(extension);
document.write('">');
document.write('¡Escribe a epa2!</a>');
</script>
Javascript:¿Cómo puedo poner un

botón para imprimir que desaparezca
una vez presionado?
Créditos: Bravenet (es que yo sólo soy un aprendiz)
<html>
<head>
function printPage() {
if(document.all) {
document.all.divButtons.style.visibility = 'hidden';
window.print();
document.all.divButtons.style.visibility = 'visible';
} else {
document.getElementById('divButtons').style.visibility = 'hidden';
window.print();
document.getElementById('divButtons').style.visibility = 'visible';
}
}
</script>
</head>
<body>
<div id="divButtons" name="divButtons">
<input type="button" value = "Print this page" onclick="printPage()"
style="font:bold 11px verdana;color:#FF0000;background-
color:#FFFFFF;">
</div>
</body>
</html>
_
Javascript:Ejecutar código JavaSrcipt,
PHP o ASP
En el archivo HTML debemos ubicar la llamada al archivo que queremos ejecutar:
index.htm
<HTML>
<HEAD>
<TITLE>Ejectuar código PHP o ASP con JavaScript</TITLE>
</HEAD>
<BODY>
<script language="JavaScript" src="archivo.php"></script>
<script language="JavaScript" src="archivo.asp"></script>
</BODY>
</HTML>
El archivo del Script debe contener la funcion document.write al final del mismo para poder
imprimir el contenido que generó dinámicamente:
archivo.php
<?
// En este espacio pondremos todo el
// código PHP que queremos ejecutar
// y luego juntar todo lo que es
// necesario imprimir en una sola
// variable.

$variable = "Script PHP ejecutado desde una página HTML";
?>
document.write("<?=$variable;?>");

archivo.asp

<%
' En este espacio pondremos todo el
' código ASP que queremos ejecutar
' y luego juntar todo lo que es
' necesario imprimir en una sola
' variable.

variable = "Script ASP ejecutado desde una página HTML"
%>
document.write("<%=variable%>");
Javascript:¿Existe alguna forma de
implementar passwords con
JavaScript?
Con el lenguaje JavaScript no es posible hacer grandes sistemas de protección de páginas con
password. Pero existe un método que a más de uno les puede ser útil.
Se trata de ubicar un formulario en el que se pide un password, al ingresarlo y clickear sobre

"Enviar", este toma el valor del campo y se dirige a una página con datos_del_campo.htm. Es
decir, para poder ingresar a la página oculta debemos tipear dentro del formulario
datos_del_campo.
Obviamente la página que no queremos proteger vamos a ponerle un nombre más difícil, lleno
de números, como por ejemplo: 77xwt1.htm. En este caso, para poder ingresar, se debe tipear
dentro del campo del formulario la palabra 77xwt1 y el javascript redireccionará hacia el .htm. Si
la clave que se ingresó no es la correcta se mostrará la típica página de error 404.
Código fuente El código que hará posible la protección que javascript es el siguiente:
<SCRIPT>
function acceso(){
window.location = document.formclave.clave.value +
".htm"
}
</SCRIPT>
<FORM name=formclave>
<INPUT type=text name=clave>
<INPUT type=button value=Enviar onclick="acceso()">
</FORM>
La página oculta (la que queremos proteger) se puede como uno la desee, no influye en el
anterior código. El formulario posee un campo y un botón que al clickearlo llama a la función
acceso(). Al ejecutarse esta función, se encarga de tomar el contenido del campo clave y
asigna al navegador que se dirija hacia una página con el contenido de ese campo + la
extensión .htm.
una IP sea correcta?
Con estas pocas líneas de código:
function validar(ip) {
partes=ip.split('.');
if (partes.length!=4) {
alert('ip no valida');
return;
}
for (i=0;i<4;i++) {
num=partes[i];
if (num>255 || num<0 || num.length==0 || isNaN(num)){
alert('ip no valida');
return;
}
}
}

contraseña segura para mi web?
Existe un método inventado, se llama md5, y convierte una cadena (por muy larga que sea) a
una nueva codificada de código hexadecimal de una determinada longitud. Lo bueno es que
dos cadenas iguales generan la misma codificación y no existen (o eso dicen xD) dos cadenas
diferentes que se codifiquen igual. El código para ocultar claves os lo dejo, hacer lo que querais
con él.
//
**********************************************************************
********
// * md5.js
// *
// * A JavaScript implementation derived from the RSA Data Security,
Inc. MD5
// * Message-Digest Algorithm. See
[url]http://cw.oaktree.co.uk/site/legal.html[/url] for
// * details.
// *
// * Copyright (C) Paul Johnston 1999 - 2000. Distributed under the
LGPL.
//
**********************************************************************
*******/

/* to convert strings to a list of ascii values */
var sAscii = " !\"#$%&'()*+,-./0123456789:;<=>?
@ABCDEFGHIJKLMNOPQRSTUVWXYZ"
var sAscii = sAscii + "[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~";

/* convert integer to hex string */
var sHex = "0123456789ABCDEF";
function hex(i)
{
h = "";
for(j = 0; j <= 3; j++)
{
h += sHex.charAt((i >> (j * 8 + 4)) & 0x0F) +
sHex.charAt((i >> (j * 8)) & 0x0F);
}
return h;
}

/* add, handling overflows correctly */
function add(x, y)
{
return ((x&0x7FFFFFFF) + (y&0x7FFFFFFF)) ^ (x&0x80000000) ^
(y&0x80000000);
}

/* MD5 rounds functions */
function R1(A, B, C, D, X, S, T)
{
q = add(add(A, (B & C) | ((~B) & D)), add(X, T));
return add((q << S) | (q >>> (32 - S)), B);
}

{
q = add(add(A, (B & D) | (C & (~D))), add(X, T));
return add((q << S) | (q >>> (32 - S)), B);
}

{
q = add(add(A, B ^ C ^ D), add(X, T));
return add((q << S) | (q >>> (32 - S)), B);
}

{
q = add(add(A, C ^ (B | (~D))), add(X, T));
return add((q << S) | (q >>> (32 - S)), B);
}

/* main entry point */
function calcMD5(sInp) {

/* Calculate length in machine words, including padding */
wLen = (((sInp.length + 8) >> 6) + 1) << 4;
var X = new Array(wLen);

/* Convert string to array of words */
j = 4;
for (i = 0; (i * 4) < sInp.length; i++)
{
X[i] = 0;
for (j = 0; (j < 4) && ((j + i * 4) < sInp.length); j++)
{
X[i] += (sAscii.indexOf(sInp.charAt((i * 4) + j)) + 32) << (j *
8);
}
}

/* Append padding bits and length */
if (j == 4)
{
X[i++] = 0x80;
}
else
{
X[i - 1] += 0x80 << (j * 8);
}
for(; i < wLen; i++) { X[i] = 0; }
X[wLen - 2] = sInp.length * 8;

/* hard coded initial values */
a = 0x67452301;
b = 0xefcdab89;
c = 0x98badcfe;
d = 0x10325476;

/* Process each 16 word block in turn */
for (i = 0; i < wLen; i += 16) {
aO = a;
bO = b;
cO = c;
dO = d;

a = R1(a, b, c, d, X[i+ 0], 7 , 0xd76aa478);
d = R1(d, a, b, c, X[i+ 1], 12, 0xe8c7b756);
c = R1(c, d, a, b, X[i+ 2], 17, 0x242070db);
b = R1(b, c, d, a, X[i+ 3], 22, 0xc1bdceee);
a = R1(a, b, c, d, X[i+ 4], 7 , 0xf57c0faf);
d = R1(d, a, b, c, X[i+ 5], 12, 0x4787c62a);
c = R1(c, d, a, b, X[i+ 6], 17, 0xa8304613);
b = R1(b, c, d, a, X[i+ 7], 22, 0xfd469501);
a = R1(a, b, c, d, X[i+ 8], 7 , 0x698098d8);
d = R1(d, a, b, c, X[i+ 9], 12, 0x8b44f7af);
c = R1(c, d, a, b, X[i+10], 17, 0xffff5bb1);
b = R1(b, c, d, a, X[i+11], 22, 0x895cd7be);
a = R1(a, b, c, d, X[i+12], 7 , 0x6b901122);
d = R1(d, a, b, c, X[i+13], 12, 0xfd987193);
c = R1(c, d, a, b, X[i+14], 17, 0xa679438e);
b = R1(b, c, d, a, X[i+15], 22, 0x49b40821);

a = R2(a, b, c, d, X[i+ 1], 5 , 0xf61e2562);
d = R2(d, a, b, c, X[i+ 6], 9 , 0xc040b340);
c = R2(c, d, a, b, X[i+11], 14, 0x265e5a51);
b = R2(b, c, d, a, X[i+ 0], 20, 0xe9b6c7aa);
a = R2(a, b, c, d, X[i+ 5], 5 , 0xd62f105d);
d = R2(d, a, b, c, X[i+10], 9 , 0x2441453);
c = R2(c, d, a, b, X[i+15], 14, 0xd8a1e681);
b = R2(b, c, d, a, X[i+ 4], 20, 0xe7d3fbc8);
a = R2(a, b, c, d, X[i+ 9], 5 , 0x21e1cde6);
d = R2(d, a, b, c, X[i+14], 9 , 0xc33707d6);
c = R2(c, d, a, b, X[i+ 3], 14, 0xf4d50d87);
b = R2(b, c, d, a, X[i+ 8], 20, 0x455a14ed);
a = R2(a, b, c, d, X[i+13], 5 , 0xa9e3e905);
d = R2(d, a, b, c, X[i+ 2], 9 , 0xfcefa3f8);
c = R2(c, d, a, b, X[i+ 7], 14, 0x676f02d9);
b = R2(b, c, d, a, X[i+12], 20, 0x8d2a4c8a);

a = R3(a, b, c, d, X[i+ 5], 4 , 0xfffa3942);
d = R3(d, a, b, c, X[i+ 8], 11, 0x8771f681);
c = R3(c, d, a, b, X[i+11], 16, 0x6d9d6122);
b = R3(b, c, d, a, X[i+14], 23, 0xfde5380c);
a = R3(a, b, c, d, X[i+ 1], 4 , 0xa4beea44);
d = R3(d, a, b, c, X[i+ 4], 11, 0x4bdecfa9);
c = R3(c, d, a, b, X[i+ 7], 16, 0xf6bb4b60);
b = R3(b, c, d, a, X[i+10], 23, 0xbebfbc70);
a = R3(a, b, c, d, X[i+13], 4 , 0x289b7ec6);
d = R3(d, a, b, c, X[i+ 0], 11, 0xeaa127fa);
c = R3(c, d, a, b, X[i+ 3], 16, 0xd4ef3085);
b = R3(b, c, d, a, X[i+ 6], 23, 0x4881d05);
a = R3(a, b, c, d, X[i+ 9], 4 , 0xd9d4d039);
d = R3(d, a, b, c, X[i+12], 11, 0xe6db99e5);
c = R3(c, d, a, b, X[i+15], 16, 0x1fa27cf8);
b = R3(b, c, d, a, X[i+ 2], 23, 0xc4ac5665);

a = R4(a, b, c, d, X[i+ 0], 6 , 0xf4292244);
d = R4(d, a, b, c, X[i+ 7], 10, 0x432aff97);
c = R4(c, d, a, b, X[i+14], 15, 0xab9423a7);
b = R4(b, c, d, a, X[i+ 5], 21, 0xfc93a039);
a = R4(a, b, c, d, X[i+12], 6 , 0x655b59c3);
d = R4(d, a, b, c, X[i+ 3], 10, 0x8f0ccc92);
c = R4(c, d, a, b, X[i+10], 15, 0xffeff47d);
b = R4(b, c, d, a, X[i+ 1], 21, 0x85845dd1);
a = R4(a, b, c, d, X[i+ 8], 6 , 0x6fa87e4f);
d = R4(d, a, b, c, X[i+15], 10, 0xfe2ce6e0);
c = R4(c, d, a, b, X[i+ 6], 15, 0xa3014314);
b = R4(b, c, d, a, X[i+13], 21, 0x4e0811a1);
a = R4(a, b, c, d, X[i+ 4], 6 , 0xf7537e82);
d = R4(d, a, b, c, X[i+11], 10, 0xbd3af235);
c = R4(c, d, a, b, X[i+ 2], 15, 0x2ad7d2bb);
b = R4(b, c, d, a, X[i+ 9], 21, 0xeb86d391);

a = add(a, aO);
b = add(b, bO);
c = add(c, cO);
d = add(d, dO);
}
return hex(a) + hex(b) + hex(c) + hex(d);
}
Javascript:¿Cómo puedo desordenar un

array dos veces "aleatoriamente" y que
el resultado sea el mismo?
He ideado un método a partir del conocido quickSort, sin evaluar si un elemento es menor que
otro o de más, simplemente los cambia sean como sean:
function desorden(arr) { //solo para desordenar mucho

for(a=1;a<=arr.length-1;a++) quickDeSort(arr,0,a);
for(a=0;a<arr.length-1;a++) quickDeSort(arr,a,arr.length-1);
}
function quickDeSort(objArray,ini,fin) {
var i=ini; var j=fin; var tmp;
do {
tmp = objArray[i];
objArray[i] = objArray[j];
objArray[j] = tmp;
if ( i <= j ) { i++; j--; }
} while ( i <= j );
if ( ini < j ) quickDeSort(objArray,ini,j);
if ( i < fin ) quickDeSort(objArray,i,fin);
}
Es curioso que si llamamos a quickDeSort con los mismos atributos dos veces (lo he probado
solo con 0 y objArray.length-1), el array queda intacto. Por muchas veces que hagais reload, el
desorden quedará igual y parecerá aleatorio. La function desorden solo sirve para desordenar
muchas veces, y darle más realismo.
Espero que les sirva.
Javascript:¿Cómo puedo imprimir solo

la parte de la página que me interesa?
La idea es "ocultar", con css, los <div> donde pondremos, por ejemplo, las noticias y los enlaces que se
utilizarán para imprimirlas. En el momento de imprimir se "hace visible" el
correspondiente.
He aquí un ejemplo:
<html>
<head>
<style type="text/css">
@media print {
div,a {display:none}
.ver {display:block}
.nover {display:none}
}
</style>
<script>
function impre(num) {
document.getElementById(num).className="ver";
print();
document.getElementById(num).className="nover";
}
</script>
</head>

<body>
<div id="uno">
Artículo primero
</div>
<a href="#" onclick="impre('uno');return false">Imprime 1</a>
<div id="dos">
Artículo segundo
</div>
<a href="#" onclick="impre('dos');return false">Imprime 2</a>
<div id="tres">
Articulo tercero
</div>
<a href="#" onclick="impre('tres');return false">Imprime 3</a>
</body>
</html>
Javascript:Pasar varios parámetros a

una misma función
En este ejemplo queremos hacer que sobre diferentes áreas de mapa en una imagen apunten
a diferentes vínculos que abran una ventana que en cada caso tiene un tamaño determinado.
Para ello, utilizamos una sola función:
<SCRIPT LANGUAGE="Javascript">
function abrir(pag,alto,ancho)
{
window.open(pag + ".htm","","height=" + alto +","+ "width=" + ancho);
};
</SCRIPT>

y en las zonas activas pondremos:

onClick="javascript:abrir('primera',540,400)"
onClick="javascript:abrir('segunda',20,100)"
Javascript:Title mejorado (tooltip)

Mediante una combinación de las FAQ39
(http://www.forosdelweb.com/showthrea...744#post264744)
Averiguar coordenadas del ratón, y FAQ57

(http://www.forosdelweb.com/showthrea...126#post267126)
Mostrar/Ocultar capas.
Ejemplo:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
var ns4 = (document.layers)? true:false
var ie4 = (document.all)? true:false
var ns6 = (document.getElementById && !document.all) ?
true: false;
var coorX, coorY;

if (ns6) document.addEventListener("mousemove", mouseMove,
true)
if (ns4) {document.captureEvents(Event.MOUSEMOVE);
document.mousemove = mouseMove;}

function mouseMove(e) {
if (ns4||ns6) {
coorX = e.pageX;
coorY = e.pageY;
}
if (ie4) {
coorX = event.x;
coorY = event.y;
}
coorX += document.body.scrollLeft;
coorY += document.body.scrollTop;
return true;
}

function ini() {
if (ie4) document.body.onmousemove = mouseMove;
}

function mostrar(dato) {
with(document.getElementById("ayuda")) {
style.top = coorY + 10;
style.left = coorX + 10;
style.visibility = "visible";
innerHTML = dato;
}
}

function ocultar() {
document.getElementById("ayuda").style.visibility =
"hidden";
}

function mover() {
with(document.getElementById("ayuda")) {
style.top = coorY + 10;
style.left = coorX + 10;
}
}

</script>
</head>
<body onload="ini()" >
<div align=center>
<h3>
... Mueve el raton por el texto ...
</h3>
<span
onmouseover="mostrar('primer mensaje')"
onmousemove="mover()"
onmouseout="ocultar()">
Mensaje 1
</span>
<span
onmouseover="mostrar('mensaje segundo')"
onmousemove="mover()"
onmouseout="ocultar()">
Mensaje 2
</span>
</div>
<div
id="ayuda"
style=" visibility:hidden;
position:absolute;
background:yellow;
color:black;
border:solid 1px black;
text-align:justify;
padding:10px 10px 10px 10px;">
</div>

</body>
</html>
Se pueden cambiar los estilos de la capa ayuda para personalizar la visualización.
_
Javascript:¿Cómo puedo utilizar varias
funciones sobre muchos elementos de
forma sencilla?
Para solucionarlo, utilizaremos "this" por el objeto sobre el que actuamos, es decir:
<script languaje='javascript'>
function manita(cual)
{
document.body.style.cursor='hand';
cual.style.backgroundColor="#00ffff";
};

function flecha(algo)
{
document.body.style.cursor='default';
algo.style.backgroundColor="#00ddff";
};
</script>
Y para actuar sobre el objeto (en el ejemplo, toda una fila):
<tr onmouseover="manita(this)" onmouseout="flecha(this)">
NOTA: Esto hace que causa y efecto se refieran siempre al mismo objeto (pongo el ratón sobre
esta fila -> se ilumina toda la fila); para que causa y efecto se refieran a diferentes objetos
(pongo el ratón en cierto botón -> se ilumina cierta celda en otro lugar) deberíamos entrar en el
juego de name="tacata" o id="tacata" y usar manita(tacata)
Javascript:¿Cómo puedo crear textos

alternativos sin hacer uso de la etiqueta
alt?
Con un poco de imaginación y una simple capita .....
Código:

<html>
<head>
<title></title>
</head>

<body>
var x=0; var y=0;

if(!document.all) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = show;

function crearAlt(texto) {
document.getElementById("ALTdHTML").innerHTML = '<div
style="border: 1px solid #000000; background-color: #fdfec2; padding:
2px; font-size: 70%; font-family: verdana">' + texto + '</div>';
}

function show(evento) {
document.getElementById("ALTdHTML").style.visibility =
'visible';
if(document.all) {
x = event.clientX;
y = event.clientY + document.body.scrollTop;
document.getElementById("ALTdHTML").style.left = x +
10;
document.getElementById("ALTdHTML").style.top = y +
14;
} else {
x = evento.clientX + document.body.scrollLeft;
y = evento.clientY + document.body.scrollTop;
document.getElementById("ALTdHTML").style.left = x +
10;
document.getElementById("ALTdHTML").style.top = y +
14;
}
}

function hide() {
document.getElementById("ALTdHTML").style.visibility =
'hidden';
document.getElementById("ALTdHTML").innerHTML = "";
}
</script>
<div id="ALTdHTML" style="position: absolute; visibility:
hidden"> </div>

<img src="" width="250" height="70" onMouseOver="crearAlt('Imagen');"
onMouseOut="hide();">

</body>
</html>
Javascript:¿Cómo puede saber un

usuario su resolución de pantalla
actual?
Utiliza este código entre las etiquetas <body> y </body>
Tu resolución actual es :
var largo=screen.width;
var alto=screen.height;
document.write(largo+"x"+alto);
</script>
Javascript:¿Cómo puedo hacer para

añadir una página a Favoritos?
Prueba con este código
Créditos: Bravenet
Observaciones Para IE basta con pulsar en el link, para Opera y Nestcape será necesario
pulsar la combinación de teclas Control + D
var text = "!Méteme en Favoritos¡"
// Añade el URL de tu sitio
var site = "http://www.tusitio.com";
// Añade el nombre o descripción de tu página
var desc = "Descripción de tu pagina"
var ver = navigator.appName
var num = parseInt(navigator.appVersion)
if ((ver == "Microsoft Internet Explorer")&&(num >= 4))
{
document.write('<a title="Hacer favoritos de esta página"
href="javascript:window.external.AddFavorite(site,desc);" ');
document.write('onMouseOver=" window.status=')
document.write("text; return true ")
document.write('"onMouseOut=" window.status=')
document.write("' '; return true ")
document.write('">'+ text + '</a>')
}
else
{
text += " (Ctrl+D)"
document.write(text)
}
</script> </span>
Javascript:¿Cómo puedo hacer que JS

genere una clave aleatoria?
Por medio de este código:
Las variables:
caracter: Poner aquí los caracteres válidos para formar la clave.
numero_caracteres: Poner la longitud de caracteres de la clave generada.
<html>
<head>
<title>Clave Aleatoria</title>
<style>
*{font:normal 10px/10px verdana;}
input{border:solid 1px black;}
</style>
<script>

var caracter="1234567890";
caracter+="QWERTYUIOPASDFGHJKLÑZXCVÇBNM";
caracter+="qwertyuiopñlkjhçgfdsazxcvbnm";
var numero_caracteres=8;

var total=caracter.length;
function azar(){
var clave="";
for(a=0;a<numero_caracteres;a++){
clave+=caracter.charAt(parseInt(total*Math.random(1)));
}
document.forms[0].clave2.value=clave;
}
</script>
</head>
<body onload="azar()">
<form>
Clave.-<input type="text" readonly="readonly" name="clave2"
id="clave2" />
<input type="button" value="regenerar clave" onclick="azar()" />
</form>
</body>
</html>
__
Ventanas
Javascript: Ventana maximizada

(Redirigido desde Ventana maximizada)
Ver Ejemplo
<html>
<head>
function amplia(){
resizeTo(screen.width, screen.height)
moveTo(0, 0);
}
</script>
</head>
<body onload="amplia()">
<h1>
Tamaño máximo
</h1>
</body>
</html>
Javascript: PopUps
(Redirigido desde PopUps)
Ver Ejemplo
<html>
<head>
function abrirVentana() {
open("popUp.htm","miVentana",
"toolbar=no,directories=no,menubar=no,status=no");
}
</script>
</head>
<body>
<form name="frm">
<input type="button" name="boton" value="PopUp"
onClick="abrirVentana()">
</form>
</body>
</html>
Javascript: "FullScreen"
Ver ejemplo
Nota: donde dice "java script" debería decir "JavaScript"
Código:
<html>
<head>

function fullFullScr(){
var vent = null;
vent = window.open('','vVent','fullscreen=yes')
llenaVentana(vent);
// Para direccionar a una página específica, elimine la linea
anterior
// y utilice la siguiente:
// vent.location = "miPagina.htm";
}

function llenaVentana(vent){
with (vent.document){
open();
write("<html><head></head><body>")
write("(Solo funciona sobre IE v.4 o superior)<br>")
write("Recuerde colocar un botón para carrar<br><br>")
write("<input type='button' value='Cerrar'
onclick='JavaScript:window.close()'>")
write("</html>")
close();
}
}

</script>
</head>
<body>
<input type="button" value="Abrir FullScreen"
onclick="fullFullScr()">
</body>
</html>
Javascript:Cerrar una ventana principal
sin confirmación
(Redirigido desde Cerrar una ventana principal sin confirmación)
Nota: Una versión mas sencilla y compatible con todas las plataformas puede ser encontrada
en el FAQ-115.
R: ver ejemplo
El siguiente script se basa en una llamada a un OLE Object de Windows, lo que lo hace
incompatible con otras plataformas.
<html>

<head>
function salir(){
close();
}
</script>
</head>
<body>
<form name="frm">
<input type="button" value="Cerrar con confirmación"
onclick="salir()">
<br>
<object id="MyControl" type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
codebase="HHCTRL.ocx#Version=4,72,8252,0" width="100" height="100">
<PARAM name="Command" value="Close">
<PARAM name="Button" value="Text:Cerrar sin confirmación">
</object>
</form>
</body>
</html>
Ventana explosiva
R: ver ejemplo
Créditos: Carlitos
Código:
<html>
<head>
</head>
<body>

var ancho = 100
var alto = 100
var fin = 300
var x = 100
var y = 100

function inicio(){
ventana = window.open("hola.htm", "_blank",
"resizable,height=1,width=1,top=x,left=y,screenX=x,screenY=y");
abre();
}

function abre(){
if (ancho <= fin) {
ventana.moveTo(x, y);
ventana.resizeTo(ancho, alto);
x += 5;
y += 5;
ancho += 15;
alto += 15;
timer = setTimeout("abre()", 1);
} else {
clearTimeout(timer);
}
}

</script>
<form>
<input type="button" value="Abrir Ventana" onClick="inicio()"></p>
</form>
</body>
</html>
PopUp ajustada a imagen

Ver Ejemplo

//script por Tunait
var ventana
var cont=0
var titulopordefecto = "Perico de los palotes" //texto por defecto a
mostrar en la barra de título en caso de omitir el argumento titulo

function afoto(cual,titulo)
{
if(cont==1){ventana.close();ventana=null}
if(titulo==null){titulo=titulopordefecto}
ventana=window.open('','ventana','resizable=yes,scrollbars=no')
ventana.document.write('<html><head><title>' + titulo +
'</title></head><body style="overflow:hidden" marginwidth="0"
marginheight="0" topmargin="0" bottommargin="0" leftmargin="0"
rightmargin="0" scroll="no" onUnload="opener.cont=0"><img src="' +
cual + '" onLoad="opener.redimensionar(this.width, this.height)">')
ventana.document.close()
cont++
}
function redimensionar(ancho,alto)
{
ventana.resizeTo(ancho+12,alto+28)
ventana.moveTo((screen.width-ancho)/2,(screen.height-alto)/2) //centra
la ventana. Eliminar si no se quiere centrar el popup
}
</script>
Y luego a cada enlace a cada imagen....
desde texto: <a href="#" onClick="afoto('nombredelaimagen.jpg','Mi titulo');return

false">Imagen 1 </a>
desde una imagen: <a href="#" onClick="afoto('nombredelaimagen.jpg','Mi

titulo');return false"><img src="imagen.jpg"></a>
Nota: Se puede omitir el segundo argumento (titulo) al llamar a la función. En ese caso
la ventana tendrá el título por defecto guardada en la variable titulopordefecto
Javascript: PopUp ajustada a imagen

versión 2
(Redirigido desde PopUp ajustada a imagen versión 2)
Es una variante que incluye la posibilidad de pasar a la imagen siguiente o a la anterior desde
el mismo pop-up

//Ventana ajustada a foto por tunait

var ventana
//metemos en un array el listado de las imágenes que queramos utilizar
en el orden que nos interese

afotos=new Array()
afotos[0]="tibidabo.jpg"
afotos[1]="gato.jpg"
afotos[2]="paloma.jpg"
afotos[3]="perico.jpg"

function afoto(cual)
{
if(ventana){ventana.close()}
buscar(cual)
ventana=window.
open('','ventana','resize=yes,scrollbars=no,resizable=yes')
ventana.document.write('<body marginwidth="0" marginheight="0"
topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"><img
id="foto" alt="mi foto" src="' + cual + '"
onLoad="opener.redimensionar(this.width, this.height)">')
ventana.document.write('<br><div align="center"><a href="#"
onClick="if(opener.cont==0){opener.cont=opener.afotos.length-
1}else{opener.cont--};document.getElementById(\'foto\').src
=opener.afotos[opener.cont];return false">anterior</a>')
ventana.document.write(' | <a href="#"
onClick="if(opener.cont==opener.afotos.length-1)
{opener.cont=0}else{opener.cont+
+};document.getElementById(\'foto\').src
=opener.afotos[opener.cont];return false">siguiente</a>')
}

var cont
function redimensionar(ancho, alto)
{
ventana.resizeTo(ancho,alto+50)
}
function buscar(que)
{
for(c=0;c<afotos.length;c++)
{
if(afotos[c]==que)
{
cont= c;
return cont
break
}
}

}
... y luego llamamos a cada imagen a través de la función pasándole como argumento el
nombre de la imagen:
<body bgcolor="#FFFFFF" text="#000000">

<div align="center"><b onClick="afoto('tibidabo.jpg')">Tibidabo</b>

<b onClick="afoto('gato.jpg')">Gato</b>   <b
onClick="afoto('paloma.jpg')">Paloma</b>
  <b onClick="afoto('perico.jpg')">Perico</b> </div>
</body>
Javascript: Abrir un Pop-up centrado en

la pantalla
(Redirigido desde Abrir un Pop-up centrado en la pantalla)
Pregunta: ¿Como puedo abrir un Pop-up y que quede centrado en la pantalla en cualquier

resolución?
Respuesta: Haciendo el Pop-up parecido a esto:
<html>
<head>
function centrar() {
iz=(screen.width-document.body.clientWidth) / 2;
de=(screen.height-document.body.clientHeight) / 2;
moveTo(iz,de);
}
</script>
</head>
<body onload="centrar()">
Segunda página
</body>
</html>
Javascript: Abrir Pop-Up en Correo Web
<html>
<head>
function Ventana(){
window.
open('pagina','frame','toolbar=no,directories=no,menubar=no,status=no,
height=300,width=300');}
</script>
</head>
<body>
<object id="Cerrar" type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
codebase="http://activex.microsoft.com/activex/controls/htmlhelp/HHCTR
L.ocx#Version=4,72,8252,0"
width=0 height=0>
<param name="Command" value="Close">
</object>
<body onLoad="Cerrar.Click(); Ventana();">
</body>
</html>
Ese código debe estar en la página a llamar desde el Correo Web.
Javascript: Apertura lateral de una

ventana
Abre Una Ventana Lateralmente De Izquierda A Derecha Dando Un Muy Buen Efecto.
ver ejemplo
Si Deseas Que La Ventana Tenga Un Ancho Y Largo Especifico Reemplaza:

"screen.height" (alto) "screen.width" (ancho)
Por Los Valores Deseados, Tambien Puedes Modificar moveTo(0,0) Para Acomodar
La Ventana En Una Determinada Posicion X,Y De La Pantalla.
Código:
<script languaje="JavaScript">
ventana=window.open("","","width=100,height=screen.height")
ventana.moveTo(0,0)
a=100
for (a; a<screen.width; a+=10)
{
ventana.resizeBy(10,0)
}
</script>
NOTA: acuérdate que esto va en el tag HEAD y que luego en el body tienes que hacer
la llamada para abrir la ventana.(creo yo ) .Espero que mi profe de javascript se sienta
orgulloso algún dia de su torpe alumno. Adiós
Javascript: Ventanas sólo como pop-up

Código:
<body onLoad="if (!opener) window.close()">
Saludos
Javascript: Cerrar una ventana principal

sin confirmación (II)
R: Ver ejemplo
Consiste en engañar al navegador haciéndole creer que la estamos cerrando desde su opener.
TEMA: VENTANAS
<html>
<head>

function cerrar() {
ventana.close();
}

</script>
</head>
<body>
Problema:<br>
<a href="#" onClick="window.close()">
Cerrar ventana de modo tradicional (el navegador pedirá confirmación)
</a><br><br>
Solución:<br>
<a href="#" onClick="cerrar()">
Cerrar ventana sin confirmación
</a>
</body>
</html>
P.D.: Popito ha comprobado que esto no funciona en IE5 para MAC. Ojo: Podría ocurrir
también en otros navegadores.
P.D.2:LeandroEnrique comentaba que no le funciona en Mozilla asi que me he puesto a

comprobarlo en varios navegadores. Concretamente en IE6, Netscape6.2,Opera7.23 y Mozilla
Firefox. He de decir que en todos ellos ha funcionado el ejemplo que aparece en esta FAQ y a
diferencia de IE6 en el resto de navegadores incluso el caso de un simple window.close()
tampoco te pide confirmación.
Cita:
Iniciado por frodogus

Por favor, añadir en el apartado 115 Cerrar una ventana principal sin
confirmación (II) no se admite en IE7
Saludos.
Javascript: Cerrar todas las ventanas
Abre todas tus ventanas usando la función abreVentana()
Pega este script en alguna parte entre <head> y </head>
Código:
//cerrar todas las ventanas. Script por tunait!
//http://javascript.tunait.com/
//tunait@yahoo.com
var cont = 0
function abreVentana(pagina)
{
cont++
eval('ventana'+ cont + "=window.open(pagina,'ventana'+cont,'')")
}

function cerrar()
{
for(m=1;m<=cont;m++)
{
if(eval('ventana' + m))
{
eval('ventana' + m + ".close()")
}
}
cont=0
}
</script>
Para abrir las ventanas (ejemplo para un link)
<a href="tuPagina.html" onclick="abreVentana('tuPagina.html');return false"> enlace </a>
Finalmente al tag de body...
<body onunload="cerrar()">
Javascript: Dialogo Web
Bien, lo que tenemos que tener en cuenta es que el diálogo web maneja dos tipos de ventana:
showModalDialog: Permite solo interactuar con la ventana abierta, o sea, que si querés
regresar a la ventana que la abrió tienes que cerrar este dialogo web.
showModelessDialog: Permite interactuar con las 2 ventanas (con la que la abriste y la abierta).
Lo anterior lo resalto para que cuando crees uno ten en cuenta que a tu gusto puedes hacer
una interacción con el usuario.
Bien, en marcha, este es el argumento simple para crear una ventana modal
(showmodalDialog):
Código:

function abrirDialogoModal() {
showModalDialog('pagina.htm','','dialogWidth:505px;
dialogHeight:325px;status:no;resizable:yes');
}
</script>
Como puedes ver, lo que estoy diciendo en el código anterior es que abra una ventana modal
con parámetros (ancho, alto y si prefieres Barra de Estado), y lo resaltado en rojo en el script
son los parámetros de ancho y alto que le quieras dar a la ventana...
Ahora, lo mismo puedes hacer con showModelessDialog:
Código:

function abrirDialogoModeless() {
showModelessDialog('pagina.htm','','status:no;resizable:yes');
}
</script>
Ten en cuenta que esta función solo se desempeña en IE 5.5 y superior, aunque se está
investigando si esta función de JavaScript tambien sea compatible con otros browsers.
Adicionalmente, en el Dialogo Web, se crean otros botones, si los quieres colocar o no:
help = Icono de ayuda
maximize = Icono de maximizar y de restaurar

minimize = Icono de minimizar
Si estos íconos los quieres colocar en tu ventana simplemente los colocarías así:
Código:
showModalDialog('pagina.htm','','status:no;help:yes ó no;otros
parametros')
Javascript: Abrir enlace en un

popup
Tal vez sea la manera menos usada, pero creo que la más fácil , simplemente
abriendo un popup vacío desde el evento onclick del enlace, y que la ventana
(segundo parámetro de open) coincida con el target del mismo enlace.
<a href="destino.html" target="popup" onclick='window.open("",

"popup", "")' > popup </a>
Hay otra forma que se discutió en este mensaje que sería más o menos así:
<a href="destino.html" target="popup" onclick='window.open(this.href,

this.target, ""); return false;' > popup </a>
Para pasar la validación estricta (w3.org) debe obviarse el atributo target, pero también
se puede asignar en el mismo script
<a href="destino.html" onclick='this.target = "popup"; window.open("",
"popup", "")' > popup </a>
Javascript: Aviso anti popup

Consideraciones: En vista del aumento de herramientas anti-popup en navegadores,
antivirus etc, los diseñadores de páginas web tenemos que "estrujarnos" un poco más
la cabeza para ir adaptandonos a los cambios en las costumbres de los navegantes.
Es posible que tengamos en nuestro sitio web una page que se abra como pop-pup,
pero al estar activo el anti-popup, esta no se muestra, con la consiguiente pérdida de
información para el sitio.
Pregunta: ¿Cómo puedo evitar que esto pase?
Respuesta: Mira a ver si con este código te sirve, es sencillito.
Creditos: epa4
Código:
<HTML>
<HEAD>
<TITLE>fullscreen</TITLE>
function cerrar()
//esta función lo que hace es cerrar una página sin pedir confirmación
{
ventana=window.self;
ventana.opener=window.self;
ventana.close();
}

function pantallacompleta(pagina)
{
var opciones=("toolbar=no, location=no, directories=no, status=no,
menubar=no ,scrollbars=yes,resizable=no, fullscreen=yes");
var w=window.open(pagina,"ventana",opciones);
if (w.name=="ventana") {
cerrar();
}
else {
window.document.writeln("Desactiva el bloqueo de poppus
windows en tu equipo, de lo contrario\n"+ "no podrás entrar en la
pagina o verla.");

}
}
</script>
</HEAD>
<BODY
onload="javascript:pantallacompleta('http://www.tusitio.com/home.html'
);">
</BODY>
</HTML>
Javascript: Otra forma de apertura

lateral de una ventana con variantes
Créditos: http://www.lawebdejrolo.iespana.es/l...iptlateral.htm
1º) Entre las etiquetas <head> y </head> de tu página html poner:

function expandingWindow(website) {

var heightspeed = 2; // vertical scrolling speed (higher = slower)

var widthspeed = 7; // horizontal scrolling speed (higher = slower)

var leftdist = 0; // distance to left edge of window

var topdist = 0; // distance to top edge of window

if (document.all) {

var winwidth = window.screen.availWidth - leftdist;

var winheight = window.screen.availHeight - topdist;

var sizer = window.open("","","left=" + leftdist + ",top=" + topdist +

",width=1,height=1,scrollbars=yes");

for (sizeheight = 1; sizeheight <winheight; sizeheight += heightspeed)
{

sizer.resizeTo("1", sizeheight);

}

for (sizewidth = 1; sizewidth <winwidth; sizewidth += widthspeed) {

sizer.resizeTo(sizewidth, sizeheight);

}

sizer.location = website;

}

else

window.location = website;

}

</script>
2º) Entre las etiquetas <body> y </body> hacer el llamado function:
<a href="nombredepagina.htm" alt="se expande"

onClick="expandingWindow('nombredepagina.htm');ret urn
false;">Pulsa</a>
Nota: variando los valores de velocidad de vertical y horizontal puedes producir los efectos que
más te gusten

Idioma

Preguntas Frecuentes

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Preguntas Frecuentes

Cargado por

Copyright:

Formatos disponibles

Preguntas Frecuentes (FAQ)

Javascript: Cambiar el color de una

P: ¿Cómo puedo cambiar el color de una celda al pasar el ratón?

<table border=0 cellpadding=0 cellspacing=0>

--Chivi 01 Dic 2002

La excepción a la regla, como suele suceder en el tema de soporte a estándares web,

<table border=0 cellpadding=0 cellspacing=0>

Javascript: Barra de estado

Éste es uno de los más facilitos

P.- ¿Cómo quitar el marco de los enlaces?

R.- Añadiendo onFocus="this.blur()"

<a href="http://www.pagina.com" onfocus="this.blur()">Enlace</a>

Javascript: Frase diaria

Javascript: Un efecto chachi para texto

Un efecto para texto y no muy complicado.

<script language="javascript" type="text/javascript">

Javascript: Mostrar/ocultar capas

P.- ¿Cómo puedo mostrar/ocultar capas pulsando sobre un enlace?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

P.- ¿Como puedo detectar la tecla pulsada?

R.- Código de ejemplo:

Javascript: Sonido en los Enlaces

¿Cómo puedo poner un sonido a mis enlaces al situar el ratón encima?

P: ¿Como doy estilos CSS a los hipervinculos?

Cambiar el color al pasar el ratón por lo alto del enlace...

<a href="" onmouseover="this.style.color='red';"

Hipervinculos o links de color verde.

<a href="" style="color:green;">This HREF is green.</a>

Hipervinculo sin raya por debajo

<a href="" style="text-decoration: none;">This HREF has no

Linea de espacio en hipervinculo

<a href="" style="line-spacing:150%;">These HREFs are spaced 150% of

Espacio entre los caracteres de un hipervinculo

<a href="" style="letter-spacing:5px;">This HREF has 5 pixels between

Color de fondo en los enlaces

<a href="" style="background:ffffcc;">This HREF has a yellow

R: Con una cookie

<script language="javascript" type="text/javascript">

Javascript: Quitar recuadro punteado

¿Como puedo quitar el recuadro de puntos de un enlace activo?

Javascript:Poner texto vertical

Javascript: Enlaces autoexplicativos

Javascript: Sonido antes de un salto

P: ¿Cómo escuchar un sonido antes de hacer un link?

R: Adaptando este script con los valores adecuados

P . - ¿Cómo reemplazar o eliminar subcadenas de una cadena?

var invertirBarra = "Hola/amigos/del/foro".split("/").join("\");

deja la variable invertirBarra = "Hola\amigos\del\foro";

Javascript: Fondo degradado

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Javascript: Manipulación de strings

var texto = " Texto con espacios al inicio y al final

También, se puede usar expresiones regulares para el efecto:

Javascript: Ver la página a distintas

R.- Esto es un pequeño truco que se vale de la posibilidad de ejectar sentencias de JS en la

P: ¿Como puedo mostrar un mensaje en mi pagina dependiendo de la hora?

<script language="javascript" type="text/javascript">

Javascript: Reemplazo dentro de un

<script language="javascript" type="text/javascript">

Javascript: Eliminación de parte de un

P.: ¿Cómo puedo eliminar una subcadena de una cadena?

<script language="javascript" type="text/javascript">

Javascript: Scroll (marquesina) de