Introducción a JavaScript
Parte 2



La siguiente propiedad de JavaScript la puede observar moviendo el puntero del mouse sobre este link. Tan solo observe la barra de estado en la parte baja del browser. Esto se puede combinar muy bien con funciones de JavaScript. Si mueve el mouse sobre este link una ventana se abrirá. Ahora le mostraré la fuente que produce estos dos efectos: 

<a href="tpage.htm" onMouseOver="window.status='Otro link estúpido...';
 return true">

La única cosa que tiene que hacer es agregar el método onMouseOver en su tag <a>. El window.status le permite escribir cosas el la barra de estado de su browser. Como puede ver, tiene que alternar con las comillas. No puede usar " todo el tiempo, porque de otra manera JavaScript no es capaz de identificar el string que quiere imprimir en la barra de estado. Después del string se tiene que escribir ;return true.
Bueno, esto no es realmente JavaScript. Usted puede pensar que otros browsers interpretan esto a través del estilo HTML. El segundo ejemplo usa JavaScript llamando la función 'alert'. Aquí está la fuente: 
<html>
<head>
<script language="LiveScript">
<!-- Escondemos la funcion
     function hello() {
       alert("Hola!");
     }
// -->
</script>
</head>
<body>
<a href="" onMouseOver="hello()">link</a>
</body>
</html>

Esto es completamente fácil. Usa el método 'onMouseOver' y la función hello() es invocada cuando este evento ocurre.

Ahora quiero mostrarles un ejemplo usando el método de la fecha y la hora, usted ya vió la propiedad lastModified trabajando. Ahora vamos a escribir la hora local a nuestro documento. Este método utiliza la fecha y la hora de su máquina, si la fecha de su máquina es 5/17/1983 esta será la fecha que verá.

Aquí está la fuente: 

<script language="LiveScript">
<!-- Escondiendo
  today = new Date()
  document.write("La hora actual es: ",today.getHours(),":",today.getMinutes())
  document.write("
La fecha es: ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());
// se termina de esconder -->
</script>

Primero creamos una variable de tiempo. Esto es hecho por today=new Date(). Cuando no especificamos cierta fecha y hora el browser usa la hora local y la pone en la variable 'today'. Note que no tenemos que aclarar la variable 'today' en ninguna parte. Esta es una diferencia entre Java y otros lenguajes de programación donde se tiene que especificar la que escribe antes de usarlo. Hemos creado un objeto que mantiene la fecha y hora local. Ahora podemos simplemente escribir su contenido en el documento, tiene que escribir today antes de cada método get... De otra forma el browser no sabría a que objeto referirse. El método getMonth manda un número entre 0 y 11. 0 para enero y 11 para diciembre. Por esto es que tenemos que sumar 1 al número enviado para tener el mes correcto.
Algo interesante que se puede pensar es crear una fecha, por ejemplo la fecha cuando usted elaboró el documento, así usted podrí calcular cuantos dias después alguien está leyendo su documento. Y si eso es 10 dias después le puede decir: Hey, esto está muy viejo, no lo lea!
Para esto necesitará la fecha de hoy como se muestra en el ejemplo y además la fecha de creación. Se le puede poner una fecha de publicación al documento para que se publique automaticamente. Sería así:docStarted= new Date(96,0,13)
Se tiene que especificar primero el año, luego el mes (recuerde que el mes disminuye en uno) y luego el día. También se puede especificar así: docStarted= new Date(96,0,13,10,50,0)
Los primeros números siguen siendo la fecha. Están seguidos por la hora, minutos y segundos.Tengo que decirle que JavaScript no tiene una entrada real para el tiempo. Pero como pudo ver, pero de todas formas se puede trabajar bastante bien con esto. La forma en que esto funciona es que la fechas son representadas por números de milisegundos desde 1/1/1970 0:0h. Esto suena un poco complicado pero es un método común para representar fechas en los computadores. Pero usted no debe molestarse acerca de esto, solo debe prestar atención a las funciones y ver que después de todo no es tan difícil.

Tengo una muy buena función donde se puede calcular un número al azar. Esto pronto será implementado por JavaScript. Pero por el momento se debe trabajar con algunos trucos. Bueno, realmente no es un truco. Esta es una forma que creo que la mayoría de compiladores usan para calcular números al azar. Si se calculan. Se toma la hora de su máquina y se manipula de alguna manera. Tal vez la versión final de JavaScript usará este método (o alguno parecido) de alguna forma. Como le había dicho antes l tiempo es un número bastante grande. Se puede usar y hacer calculos con él. Por ejemplo se le puede calcular el seno y luego el valor absoluto. Esto nos dará un número entre 0 y 1. Además como el tiempo cambia cada milisegundo no correrá el riesgo de recibir el mismo número dos veces (cuando se calcula inmediatamente uno después del otro). Cuando quiera calcular muchos números al azar en un corto intervalo de tiempo no debe usar la función 'sin()' sola. Así obtendria siempre valores ciertamente cercanos y esto no es un número al azar. Pero si lo quiere hacer en verdad y cada 20 segundos, esta es una estupenda función para lograrlo.

Este es un número al azar:

Esta es la fuente para este ejemplo: 

<html>
<head>
<script language="LiveScript">
function RandomNumber() {
  today = new Date();
  num= Math.abs(Math.sin(today.getTime()));
  return num;  
}
</script>
</head>
<body>
<script language="LiveScript">
<!--
  document.write("Este es un numero al azar:", RandomNumber());
// -->
</script>
</body>
</html>

La creación de ventanas es una gran característica de JavaScript. Se pueden cargar ventanas nuevas con documentos HTML en ellas. Navegar por Internet todo con JavaScript. Voy a mostrarle como podemos abrir una nueva ventana y escribir algo en ella. Si usted presiona este botón querrá ver lo que voy a explicar ahora.

Rompiendo con la tradición, no escribí Hello world! en la página ...
Aquí está la fuente: 

<html>
<head>
<script language="LiveScript">
function WinOpen() {
   msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
   msg.document.write("<HEAD><TITLE>Que bien!</TITLE></HEAD>");
   msg.document.write("<CENTER><h1><B>Esto es una elegancia!</B></h1></CENTER>
");
}
</script>
</head>
<body>
<form>
<input type="button" name="Boton1" value="Push me" onclick="WinOpen()">
</form>
</body>
</html>
Como usted siempre puede ver el botón que invoca la función. La función WinOpen() crea una nueva ventana invocando el método open. Las primeras comillas contienen la URL de la página. Aquí puede poner la dirección del documento que quiere cargar. Si lo deja vacío ninguna página se carga, pero puede escribir en ella con JavaScript! Las siguientes comillas especifican el nombre de la ventana, aquí puede escribir lo que quiera, esto no tiene ningún efecto en nuestros ejemplos por ahora. Pero recibirá un mensaje de error cuando escriba Display Window (con un espacio entre ambas palabras - Netscape le dice algo diferente en su información - pero estuve sentado media hora y no logré encontrar ningún error!). Las comillas siguientes especifican las propiedades de la ventana. Esto es realmente interesante! usted puede decir si quiere barras de herramientas, barras de desplazamiento... Si escribe toolbar=yes entonces tendrá barra de herramientas en su ventana. Algunas propiedades que puede cambiar aparecan abajo. Se puede especificar cada cosa posible, solo tiene que escribirla como le mostré y sin espacios entre ellas. Aquí está lo que se le puede cambiar a la página:

toolbar
location
directories
status
menubar
scrollbars
resizable
copyhistory
width=pixeles
height=pixeles

Para pixeles tiene que escribir el número de pixeles. De esta forma le puede decir al browsers que tan grande debe ser la ventana.
Después de que haya abierto la ventana y llamado su msg (aparece al frente del método 'open'), puede escribir en ella. Se puede escribir código HTML! esta es una cosa fabulosa. Se puede construir un documento HTML usando la entrada de una forma dada en el documento anterior. Usted puede hacer una página donde un usuario tenga que escribir su nombre en una 'forma', entonces un nuevo documento HTML es creado conteniendo su nombre; meses atrás esto solo era posible con scripts CGI!

Note esto: Parecen haber errores o 'bugs' en JavaScript. Cuando usted escribe algo a una ventana, tiene siempre que poner un <br> después de el último texto escrito en la ventana, de otra forma es probable que no se vea la última linea de su escrito.
Si quiere insertar imágenes en la nueva ventana este seguro de poner las propiedades height y width en el tag <img>. De otra forma no verá imágenes o su página se desvanecerá de alguna manera. Esto puede causar algunos problemas muy extraños donde usted no cree que la imagen es responsable.

Espero que haya disfrutado este segundo curso de JavaScript. Como JavaScript no está terminado aún, de seguro cambiará en le futuro. Espero que mis ejemplos funcionen para ese entonces. Escribiré otros ejemplos cuando nuevas características sean agregadas o cuando tenga una nueva idea que les pueda mostrar.


Index - Parte 1 - Parte 3 - Parte 4 - Parte 5 - Parte 6 - Parte 7