Efectos rápidos con Javascript

  • Por
En este último artículo de introducción a Javascript veremos algunos ejemplos de códigos sencillos de gran utilidad.

Antes de meternos de lleno en materia podemos ver una serie de efectos rápidos que se pueden programar con Javascript, lo que nos puede hacer una idea más clara de las capacidades y potencia del lenguaje. A continuación veremos varios ejemplos, que hemos destacado para esta introducción en el Manual de Javascript, por tener un mínimo de complejidad y aunque sean muy básicos, nos vendrán bien para tener una idea más exacta de lo que es Javascript a la hora de recorrer los siguientes capítulos.

Abrir una ventana secundaria

Primero vamos a ver que con una línea de Javascript podemos hacer cosas bastante atractivas. Por ejemplo podemos ver cómo abrir una ventana secundaria sin barras de menús que muestre el buscador Google. El código sería el siguiente.

<script> 
window.open("http://www.google.com","","width=550,height=420,menubar=no") 
</script>

Podemos ver el ejemplo en marcha aquí.

Un mensaje de bienvenida

Podemos mostrar una caja de texto emergente al terminarse de cargar la portada de nuestro sitio web, que podría dar la bienvenida a los visitantes.

<script> 
window.alert("Bienvenido a mi sitio web. Gracias...") 
</script>

Puedes ver el ejemplo en una página a parte.

Fecha actual

Veamos ahora un sencillo script para mostrar la fecha de hoy. A veces es muy interesante mostrarla en las webs para dar un efecto de que la página está al "al día", es decir, está actualizada.

<script> document.write(new Date()) </script>

Estas líneas deberían introducirse dentro del cuerpo de la página en el lugar donde queramos que aparezca la fecha de última actualización. Podemos ver el ejemplo en marcha aquí.

Nota: Un detalle a destacar es que la fecha aparece en un formato un poco raro, indicando también la hora y otros atributos de la misma, pero ya aprenderemos a obtener exactamente lo que deseemos en el formato correcto.

Botón de volver

Otro ejemplo rápido se puede ver a continuación. Se trata de un botón para volver hacia atrás, como el que tenemos en la barra de herramientas del navegador. Ahora veremos una línea de código que mezcla HTML y Javascript para crear este botón que muestra la página anterior en el historial, si es que la hubiera.

<input type=button value=Atrás onclick="history.go(-1)">

El botón sería parecido al siguiente, un botón normal con el aspecto predeterminado que el navegador y sistema operativo que usas otorgue a los botones. A continuación tienes una imagen sobre cómo se vería el botón en mi sistema.

Como diferencia con los ejemplos anteriores, hay que destacar que en este caso la instrucción Javascript se encuentra dentro de un atributo de HTML, onclick, que indica que esa instrucción se tiene que ejecutar como respuesta a la pulsación del botón.

Se ha podido comprobar la facilidad con la que se pueden realizar algunas acciones interesantes. Como podréis imaginar, existirían muchas otras muestras sencillas de Javascript que nos reservamos para capítulos posteriores.

Si lo deseas, puedes ver cómo hemos desarrollado algunos de estos efectos rápidos Javascript paso por paso y en vídeo. En el siguiente artículo empezaremos ya a hablar del propio lenguaje de programación Javascript.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Jotace

08/10/2002
Yo no tengo mucha idea de esto, pero auxiliado por la sencillez del Front Page, he colocado un codgo para que de forma automatica indique la fecha de su actualizacion. En principio lo hace Front Page, pero el codigo se puede versin dificultad, es este:

<!--webbot bot="Timestamp" S-Type="EDITED" S-Format="%d/%m/%y" -->

A mi me va muy bien.

xana

25/9/2003
Hombre lo de guardar la página lo puedes evitar también en javascript si le desactivas el menú como habeis escrito en el tutorial

Zorny

10/10/2005
tengo un códifo para colocar la fecha en donde sea, se los mando, ojalá se de vuestro agrado.
_______________________________________
<script languaje=JavaScript>
<!--

today = new Date
day = today.getDay()
if ( day == 0 ) {
document.write("");
}
if ( day == 1 ) {
document.write("");
}
if ( day == 2 ) {
document.write("");
}
if ( day == 3 ) {
document.write("");
}
if ( day == 4 ) {
document.write("");
}
if ( day == 5 ) {
document.write("");
}
if ( day == 6 ) {
document.write("");
}

hours = today.getHours()
minutes = today.getMinutes()
zerom = ''
zeroh = ''
if ( minutes < 10 ) { zerom = 0 }
if ( hours < 10 ) { zeroh = 0 }

if ( today.getMonth() == 0 ) { month = "Enero" }
if ( today.getMonth() == 1 ) { month = "Febrero" }
if ( today.getMonth() == 2 ) { month = "Marzo" }
if ( today.getMonth() == 3 ) { month = "Abril" }
if ( today.getMonth() == 4 ) { month = "Mayo" }
if ( today.getMonth() == 5 ) { month = "Junio" }
if ( today.getMonth() == 6 ) { month = "Julio" }
if ( today.getMonth() == 7 ) { month = "Agosto" }
if ( today.getMonth() == 8 ) { month = "Septiembre" }
if ( today.getMonth() == 9 ) { month = "Octubre" }
if ( today.getMonth() == 10 ) { month = "Noviembre" }
if ( today.getMonth() == 11 ) { month = "Diciembre" }


document.write(today.getDate()," de ",month);
// -->
</script>
_______________________________________

Att. Zorny

Ernesto Wilson

21/6/2009
Como dar la hora.
Como doy a que me muestre la hora, pero de mi país ya que la que da por defecto es la de Internet. -Entiendo-

PoPe

26/9/2009
gracias
Muchas gracias por todos los tutoriales que ofrecéis. De verdad son de gran ayuda. :D

Cesar joel Serrano

22/1/2010
Java Script
¡Hola soy nuevo en esto del desarrollo web pero me gustaria que me explicaran porque el Script que esta acontinuacion cuando lo ejecuto en internet exprorer funciona bien escribo el passwor agregado por defecto y le doy aceptar al boton y voy a la paguina requeria pero cuando lo ago con mozilla no funciona nada.

<html>
<head>
<script>
function clav()
{

var temporal;
temporal=clave.value;
if (temporal=="Dijite su clava aqui")
location.href="Escriba aqui la paguina que desea enlazar";
else
alert("Password incorrecto");
clave.value="";
clave.focus();

}

</script>
<title>Ingrese su password para acceder a la paguina de deseada</title>
</head>

<body>
<center>
<h1><i><u>Dijite su Password para Acceder al Host</u></i>.</h1>
<hr />
<img src="host.jpg" alt="host1" width="268" height="231" /><br />
<br />
<font color="#CC3300" size="+1" face="Arial Black, System">Password:</font>
<input type="password" name="clave" /><br /><br />
<input type="button" value="Aceder" onclick="clav();" style="" />
</center>
</body>
</html>


Que Alguien me explique por favor.

turrejon

30/7/2011
con este codigo se ve en mozila
con este codigo

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">

quedaria sí para que se vea en mozilla con dreamweaver

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">


window.alert("Bienvenido a mi ..... ...")


</SCRIPT>

TNT

11/1/2012
JS
soy novata en este tema pero me gusta por que se entienden bien

cayocarlin

04/5/2013
No ejecuta, el Script
Lo que pasa es que, necesitas desactivar algunos plugin que impide la ejcución del Script, es cuestión de verificar el Browser...

mario

05/5/2013
comentario para el codigo de Cesar
hey Cesar, creo que cuando pones el primer if, no lo puedes igualar a una cadena tiene que ser alguna variable si quieres, prueba con eso, por eso el compilador no encuentra con que compararlo, tambien no soy experto pero puede ser eso saludes

Arcadiano

01/10/2013
Correccion man
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
function clav() {

var temporal;

temporal = clave.value;
if (temporal == "12345")
location.href = "Default.aspx";
else
alert("Password incorrecto");
clave.value = "";
clave.focus();

}

</script>


</head>
<body>
<center>

<h1><i><u>Dijite su Password para Acceder al Host</u></i>.</h1>
<hr /><img src="#" alt="host1" width="268" height="231" /><br />
<br /><font color="#CC3300" size="+1" face="Arial Black, System">Password:</font>

<input type="password" name="clave" id="clave" /><br /><br />
<input type="button" value="Aceder" onclick="clav();" style="" />
</center>


</body>
</html>

Jaidler Tapullima

18/5/2015
Mejoramiento
Hola cybernautas, solo queria aportar algo de mi conocimiento en la mejoramiento de la apariencia del botón atrás.
Para darle forma, color y estilo al botón tendrian que aplicar el siguiente código.
<input type="button" style="background:#0CF; border-radius:20px; width:150px; height:30px;" value="Atras" onclick="history.go(-1)">

si están trabajando con tablas, nomas tienen que anteponer el tr o td según sea el caso.
<TR><TD><input type="button" style="background:#0CF; border-radius:20px; width:150px; height:30px;" value="Atras" onclick="history.go(-1)"></TD></TD>

BiancaSistemas

24/3/2017
No se visualiza el botón
Probé el código en todos los navegadores. en particular en firefox desactivé todas las opciones de bloqueo de elementos emergentes y tampoco lo visualizo. Podrían decirme por qué?
gracias