Como algunos de vosotros nos habéis solicitado y, porque, nosotros, de hecho, ya lo estábamos valorando; os presentamos “Todo Programación”. Un pack que estará disponible a partir del 23 de febrero y que engloba todos los cursos de programación de video2brain: HTML, JavaScript y PHP. Introdúcete de una vez en el mundo de la programación. ¡Compara y decídete por video2brain!
En este script, vamos a programar que un texto vaya apareciendo dentro de un espacio determinado de la página. Puede ser muy útil a la hora de darle un toque de movimiento a la página, o si queremos publicar noticias o novedades.
Con el siguiente script, creamos una serie de variables donde le pasamos los parámetros que vamos a usar, como son el ancho, el alto, la velocidad y el contenido. Vamos a usar la etiqueta marquee, que crea una marquesina dentro de la que el texto se desplaza. Esta etiqueta sólo funciona en el navegador Internet Explorer.
<script language=”JavaScript”>
var ancho=150;
var alto=150;
var velocidad=3;
var contenido=’<font face=”Verdana”>Este texto que incluyas aqui aparecera deslizandose, dentro del recuadro al que le hemos dados los atributos anteriormente y a la velocidad indicada</font>’;document.write(‘<marquee direction=”up” scrollAmount=’+velocidad+’ style=”width:’+ancho+’px;height:’+alto+’px”>’+contenido+’</marquee>’);
</script>
<!–[if gte vml 1]> <![endif]–><!–[if !vml]–>
<!–[endif]–>Por tanto si lo ejecutamos en otro navegador no va a funcionar, para ello lo que vamos a hacer es comprobar qué navegador utiliza el usuario y realizar diferentes salidas en función del resultado.
En la cabecera modificamos el código que teníamos anteriormente, y creamos una función que englobe lo anterior, incluyendo un if que comprueba si el navegador es Internet Explorer. En caso de que sea, muestra la ventana con texto deslizándose. Si no es, muestra un texto alternativo. En el cuerpo realizamos una llamada a la función.
HEAD:
<script language=”JavaScript”>
function desplazar()
{
var ancho=150;
var alto=150;
var velocidad=3;
var contenido=’<font face=”Verdana”>Este texto que incluyas aqui aparecera deslizandose, dentro del recuadro al que le hemos dados los atributos anteriormente y a la velocidad indicada</font>’;if (navigator.appName == “Microsoft Internet Explorer”)
{document.write(‘<marquee direction=”up” scrollAmount=’+velocidad+’ style=”width:’+ancho+’px;height:’+alto+’px”>’+contenido+’ </marquee>’);
}
else
{
document.write(“Esta usando un navegador diferente a Internet Explorer”);
}
}
</script>
BODY:
<script language=”javascript”>
desplazar();
</script>
En el caso de IE nos mostrará lo mismo que antes, y en el caso de usar Firefox nos saldrá:
<!–[if gte vml 1]> <![endif]–><!–[if !vml]–>
<!–[endif]–>
De esta forma podemos detectar que navegador usa el usuario y actuar en consecuencia mostrando diferentes páginas.
En muchas ocasiones nos puede resultar interesante personalizar el mensaje que se muestra en la cabecera de nuestra página web, encaminándolo a darle un toque más personal, o añadiendo información relevante en él.
En este ejemplo vamos a ver cómo podemos crear una barra de titulo que vaya actualizándose con la fecha y la hora del usuario. Con el siguiente script, creamos una función a la que llamaremos y que actualizará la fecha y la hora cada segundo mostrándola en la barra de título.
<script language=”JavaScript”>
function fechayhora()
{
window.setTimeout( “fechayhora()”, 1000 );
actual = new Date();
document.title = actual.toString();
}
fechayhora()</script>
Observamos cómo se muestra en el formato por defecto, cosa que podemos formatear. Con el siguiente script lo que hacemos es dar un formato más legible a nuestra fecha:
<script language=”JavaScript”>
Meses=new Array ();
Dias=new Array();
Meses[0]=”Enero”; Meses[1]=”Febrero”; Meses[2]=”Marzo”;
Meses[3]=”Abril”; Meses[4]=”Mayo”; Meses[5]=”Junio”;
Meses[6]=”Julio”; Meses[7]=”Agosto”; Meses[8]=”Septiembre”;
Meses[9]=”Octubre”; Meses[10]=”Noviembre”; Meses[11]=”Diciembre”;Dias[1]=”Lunes”; Dias[2]=”Martes”; Dias[3]=”Miércoles”;
Dias[4]=”Jueves”; Dias[5]=”Viernes”; Dias[6]=”Sabado”; Dias[0]=”Domingo”;function Convertir(fecha)
{
var dia=Dias[fecha.getDay()];
var mes=Meses[fecha.getMonth()];
var anio=fecha.getYear();
var hora=fecha.getHours();
var minutos=fecha.getMinutes();
var segundos=fecha.getSeconds();
if (navigator.appName==”Netscape”)
{
anio=anio+1900;
}
return dia + “, “+ fecha.getDate() + ” de ” + mes + ” de ” + anio +”,”+hora +”:”+ minutos +”:”+ segundos;
}function fechayhora()
{
window.setTimeout( “fechayhora()”, 1000 );
actual = Convertir(new Date());
document.title = actual;
}
fechayhora()</script>
De esta forma, observamos cómo en el título aparece la fecha en un formato más legible.
Muchas gracias a nuestro formador Luis Alonso, especialista en JavaScript, por continuar mandándonos trucos para nuestro “Maratón de trucos de programación”:
Primera foto: pikamatron y segunda foto: MikeJ1971, en flickr.com
En muchas situaciones nos puede ser interesante saber qué resolución tiene la pantalla del usuario. Un pequeño script que nos calcula la resolución que se utiliza en el monitor podría ser el siguiente:
<script language=”JavaScript”>
var alto=0;
var ancho=0;
ancho = screen.width;
alto = screen.height;
document.writeln(“<center>”);
document.writeln(‘La resolucion de tu pantalla es: ‘,ancho,’x',alto);
document.writeln(“</center>”);
</script>
Con las sentencias screen.width o screen.height, vamos a poder calcular el número de píxeles de ancho y de alto que tiene configurados el usuario. En este sencillo caso de script, lo hemos utilizado únicamente para mostrarlo, pero podríamos emplearlo para, por ejemplo, mostrar diferentes imágenes en función de la resolución.
