che roga

Scripts simples

En construcción: enviar dudas a info@silph.com.ar

Un bucle for sencillo

Este bucle utiliza la sentencia de control for para escribir los números del 1 al 10 en la página web:

<script language='Javascript'>
var limite= 10;	// contamos hasta 10
for (i=1; i<=limite; i++) {
	document.write(i);
	// necesitamos seguir en otra línea
	document.write('<br>');
}
</script>

Usamos una variable que nos dice hasta donde contar, la condición i <= limite indica que el bucle continúa si i es menor o igual a limite. Con document.write escribimos código html en la página actual donde se ejecuta el script.

Informar mensaje de error en un script con alert

Si se produce un error en un script y queremos informarlo al usuario podemos usar alert:

<script language='Javascript'>
var mi_error= 0;	// inicio el script sin errores
// ... durante el script detecto un error y coloco en mi variable un código de error
// por ejemplo tipo 1
// Verifico mi_error para informarlo
if (mi_error==1) { alert('Hubo un error de tipo 1'); }
else (mi_error!=0) { alert('Hubo un error'); }
// Si no hubo error mi script continúa
// ...
</script>

En nuestro script somos responsables de detectar errores y ejecutar alguna acción correctiva o anular el proceso o dejar que decida el usuario. Con if preguntamos si nuestra variable tiene un valor de error o dejó de ser cero. Con alert enviamos un mensaje informativo al usuario.

Detener una función que se ejecutará por setTimeout

La función setTimeout espera cierto tiempo antes de llamar a una función, por ejemplo en el evento onClick de un botón o el evento onLoad de body podemos ejecutar setTimeout('mifuncion()',2000) para que dentro de 2 segundos ejecute mifuncion(). Pero si nos arrepentimos y queremos que no se ejecute la función debemos detenerlo con clearTimeout que recibe como parámetro el valor devuelto por la función setTimeout:

<script language='Javascript'>
function mifuncion(){
	alert('Realizo una tarea');
}
</script>
<input value='Iniciar mifuncion dentro de 2 segundos' type='button' 
		onClick='tempo= setTimeout("mifuncion()",2000)'>
<input value='Detener mifuncion' type='button' 
		onClick='clearTimeout(tempo)'>

Nota como en nuestro script guardamos el valor de setTimeout en la variable tempo para usarla después si queremos anularla.

Qué opción elige el usuario usando confirm en nuestro script

La función confirm recibe una cadena de texto que suele ser una pregunta de confirmación para que el usuario pulse Aceptar o Cancelar. Si pulsa Aceptar devuelve true, si pulsa Esc, Cancelar o cierra la ventana devuelve false:

<script language='Javascript'>
var respuesta=confirm('Iniciar script?'); 
if (respuesta==true) { alert('Pulsaste Aceptar'); }
alert(respuesta);
</script>

Cómo usar acentos en texto javascritp

Cuando usamos alert o confirm y ponemos palabras con acento o eñes puede ser que salgan mal vistas según el browser que usemos. Lo mismo pasa en el html, pero ahí usamos el código html para caracteres especiales. En JS debemos usar secuencias de escape Unicode para caracteres especiales. Cliquea los ejemplos:

Carácter con acento:
  • Á
  • É
  • Í
  • Ó
  • Ú
  • á
  • é
  • í
  • ó
  • ú
Código html:
  • &Aacute;
  • &Eacute;
  • &Iacute;
  • &Oacute;
  • &Uacute;
  • &aacute;
  • &eacute;
  • &iacute;
  • &oacute;
  • &uacute;
Código Unicode:
  • \u00C1
  • \u00C9
  • \u00CD
  • \u00D3
  • \u00DA
  • \u00E1
  • \u00E9
  • \u00ED
  • \u00F3
  • \u00FA
Carácter especial:
  • Ü
  • Ñ
  • &
  • <
  • "
  • ©
  • ü
  • ñ
  •  
  • >
  • '
  • ®
  • ½
Código html:
  • &Uuml;
  • &Ntilde;
  • &amp;
  • &lt;
  • &quot;
  • &copy;
  • &euro;
  • &uuml;
  • &ntilde;
  • &nbsp;
  • &gt;
  • &apos;
  • &reg;
  • &frac12;
Código Unicode:
  • \u00DC
  • \u00D1
  • \u0026
  • \u003C
  • \u0022
  • \u00A9
  • \u20AC
  • \u00FC
  • \u00F1
  • \u00A0
  • \u003E
  • \u0027
  • \u00AE
  • \u00BD

Puedes probar otros códigos pulsando el siguiente botón:

Nota que el símbolo del euro en Unicode empieza con 20, no con 00.

Ponerle valor a un input con JS

Supongamos que tenemos un input de tipo caja de texto con el identificador 'estado_usuario' y queremos escribir su valor.

<input type='text' id='estado_usuario'>
<script language='Javascript'>
 var estado= 'Activo';
 mi_input= document.getElementById('estado_usuario');
 mi_input.value= estado;
</script>

Al objeto document le pedimos el input con id='estado_usuario' y a ese input le modificamos su atributo value, asi cambiamos el valor de la caja de texto.

Código de javascript para no mostrar el borde del link

En el caso de que sea un link de texto y no queremos que aparezca el subrayado habitual. Supongamos que nuestro link tiene un identificador.

<a href='www.miperro.com' id='link'>Link a la web de mi Perro</a>
<script language='Javascript'>
 document.getElementById('link').style.cssText='text-decoration: none;';
</script>

En el caso de que sea un link con una imagen y no queremos que aparezca el borde de la imagen resaltado. Supongamos que nuestra imagen tiene un identificador.

<a href='www.miperro.com'><img width='200' height='200' id='imag'></a>
<script language='Javascript'>
 document.getElementById('imag').style.cssText='border: 0';
</script>

Ahora si tenemos ambas cosas vamos a tener que combinar ambas soluciones. Enjoy!

Alert con aceptar y cancelar

La función alert informa de algo al usuario y solamente tiene la opción de Aceptar. Pero JS ofrece la función confirm que le permite al usuario decidir entre dos cosas y tomar una acción. Cómo saber qué eligió el usuario?

Pasar string a minúsculas o mayúsculas

Para pasar a minúsculas los objetos string tienen el método toLowerCase() y para pasar a mayúsculas el método toUpperCase(). Es muy fácil de usar, no olvides los paréntesis:

<script language='Javascript'>
 u='MaRtEs';
 alert(u.toLowerCase());	// 'martes'
 alert(u.toUpperCase());	// 'MARTES'
</script>

Cambiar el formato de una fecha

Si queremos imprimir la fecha actual usamos la clase Date. Que tiene su propia forma de imprimirse, por ejemplo:

<script language='Javascript'>
 hoy= new Date();
 alert(hoy);	// Sat Feb 07 2009 17:02:51 GMT+0100 
</script>

Si queremos el formato dia/mes/año tenemos que indicarlo nosotros mismos usando las funciones: getFullYear() que retorna el año con 4 dígitos, getMonth() que retorna el número de mes -1 y getDate() que retorna el dia. Hay que agregar una función que agregue un 0 al número para completar 2 dígitos de dia y mes.

<script language='Javascript'>
function completar(n){
	if (n<10) return '0'+n;
	return n;
}
 hoy= new Date();
 dia= completar(hoy.getDate());
 mes= completar(hoy.getMonth()+1);
 fecha_con_formato= dia+'/'+mes+'/'+hoy.getFullYear();	// Ej: 07/02/2009  
</script>

Para obtener la hora, minutos y segundos se usa getHours(), getMinutes() y getSeconds(). Todas las funciones mencionadas tienen su contraparte set para setear la fecha y hora que queramos. Por ejemplo, para usar un objeto Date que defina al dia 5 de julio de 1987 a las 03:02:01 am usamos:

<script language='Javascript'>
 hoy= new Date();
 hoy.setFullYear(1987);	// año 1987
 hoy.setMonth(6);	// julio es el mes 6 porque empieza en 0
 hoy.setDate(5);	// dia 5
 hoy.setHours(4);	// 04 horas
 hoy.setMinutes(3);	// 03 minutos
 hoy.setSeconds(2);	// 02 segundos
</script>

O más fácilmente:

<script language='Javascript'>
 hoy= new Date(1987,6,5,4,3,2);
</script>

Si queremos saber qué dia de la semana es determinada fecha, existe la función getDay() que devuelve un número del 0 al 6 según sea domingo, lunes, martes, miércoles, jueves, viernes o sábado. ¿Quieren código?

<script language='Javascript'>
 var semana=new Array("Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sábado");
 hoy= new Date();
 alert( 'Hoy es '+ semana[hoy.getDay()] );
 mi_cumple= new Date(1976,4,10,10,45,00);
 alert( 'Mi dia de nacimiento fue '+ semana[mi_cumple.getDay()] );
</script>

Saber si una fecha es menor o mayor a la fecha actual

Sabemos que para obtener la fecha actual usamos new Date() sin argumentos. Supongamos que tenemos otra fecha y queremos compararla con la actual para saber si es mayor o menor. Vamos a construir una función cmpFecha(a,b) que devuelva true si a es mayor que b y false en caso contrario. Luego vamos a probar que funciona.

<script language='Javascript'>
function cmpFecha(a,b){
	mayor= a.getTime();
	menor= b.getTime();
	return (mayor>menor);
}
 hoy= new Date();
 antes= new Date(2009,1,1,12,0,0);	// 01/02/2009 12:00
 despues= new Date(2012,6,6,12,0,0);	// 06/07/2012 12:00
 if (cmpFecha(hoy,antes)) { alert('La fecha mayor es '+ hoy + ' con respecto a ' + antes)}
 if (cmpFecha(hoy,despues)) { alert('La fecha mayor es '+ hoy + ' con respecto a ' + despues)}
 // otra prueba
 a= new Date(2009,1,1,12,1,0);	// 01/02/2009 12:01
 b= new Date(2009,1,1,12,0,0);	// 01/02/2009 12:00
 if (cmpFecha(a,b)) { alert('La fecha mayor es '+ a)}
 else { alert('La fecha '+ a + ' no es la mayor')}
</script>

Como vemos, podemos comparar dos fechas cualesquiera, no solo la fecha actual.

Función para saltar a otra página

Ésto es bueno. En JS existe el objeto location que nos puede llevar a otra página. Modificando su atributo href le indicamos a dónde queremos ir.

<script language='Javascript'>
 location.href= 'http://www.azulspa.com.ar'; 
</script>

Otro uso que tiene es saber dónde estamos actualmente consultando su atributo href.