| ||||||||
|
|
| ||||||
| ||||||||
| ||||||||
|
|
| ||||||
| ||||||||
Introduccion
Javascript is un nuevo lenguaje escrito. Los 'scripts' de Javascript pueden ser introducidos dentro de sus páginas de HTML. Con Javascript se puede dar respuesta a eventos iniciados por el usuario (el observador de nuestras páginas, por ejemplo), eventos tales como la entrada de una forma o algún enlace. Esto sucede sin ningún tipo de transmisión. De tal forma que cuando un usuario escribe algo en una forma, no es necesario que sea transmitido hacia el servidor, verificado y devuelto. Las entradas son verificadas por la aplicación cliente y pueden ser transmitidas después de esto, También se puede pensar de programa que se ejecuta en la versión cliente. Por ahora existe un gran número de calculadores en Internet, algunos son proporcionados por Netscape. Solo visite la sección de Javascript.
Aunque JavaScript se parece a Java, no es lo mismo! Java es un lenguaje de programación mucho más complejo que JavaScript. JavaScript está hecho para ser un lenguaje bastante fácil de entender. A los autores del JavaScript no les debió haber importado mucho el tema de la programación. Por esta razón, algunos elementos de Java no son aceptados en JavaScript.
Para una información mas concisa acerca de este tema, por favor lea la introducción obsequiada por Netscape.
Ahora quisiera mostrar algunos pequeños scripts,
de modo que usted pueda aprender de que modo estos son implementados dentro de
los documentos de HTML y mostrar con que posibilidades se cuenta en este nuevo
lenguaje script. Comenzaré con un script muy pequeño el cual solo mostrará texto
dentro de un documento HTML.
<html>
<head>
Mi primer JavaScript!
</head>
<body>
<br>
Este es documento normal en HTML.
<br>
<script language="LiveScript">
document.write("Esto es JavaScript!")
</script>
<br>
Otra vez en HTML.
</body>
</html>
Debo admitir que este script no es muy funcional. Usted puede escribir eso en HTML mucho más rápido y corto. Pero lo que yo quería mostrar es como se deben usar los tags <script>. Usted puede usar estos tags en su documento en el lugar que desee.
Funciones Basicas:
No quiero molestarlos con algunos scripts estupidos. Así que iremos a las funciones. Esto tampoco es difícil de entender, créeme, es mucho mas útil! Las funciones son invocadas por eventos iniciados por el usuario. Por esto parece razonable mantenerlas dentro de los tags <head>. Ellos son cargados antes de que el usuario puedea hacer algo que llame una función. Los scripts pueden ser ubicados como comentario para asegurarse de que los browsers obsoletos no muestren el script por si solos.
<html>
<head>
<script language="LiveScript">
function pushbutton() {
alert("Hola!");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Presióneme" onclick="pushbutton()">
</form>
</body>
</html>
Este script creará un botón que cuando es presionado muestra una ventana diciendo 'Hola!'. No es esto grandioso? Además, qué está sucediendo en este script? Primero la función se carga y es guardada en memoria. Entonces un botón es hecho con el tag normal <form> (HTML). Hay algo completamente nuevo con el tag <input>. Allí puede ver 'onclick'. Esto le dice al browser que función tiene que invocar cuando este botón es presionado (logicamente si el browser es compatible con JavaScript). La función 'pushbutton()' se aclara en el encabezado (<head>). Cuando el botón es presionado esta función se ejecuta. Existe otra cosa nueva en este script el método 'alert'. Esto método ya es declarado en JavaScript- solo se necesita invocarlo. Existen muchos métodos diferentes los cuales se pueden invocar. Aquí mostraré algunos. Puede encontrar una descripción completa en el home page de Netscape.
(No creo que el método 'alert' esté planeado para ser usado en esta forma, pero aquí estamos sólo aprendiendo y de esta manera es completamente fácil de aprender. Espero me disculpen...)
Ahora ya vamos lejos. En efecto tenemos un gran número de posibilidades tan solo agregando funciones a nuestros scripts. Ahora le mostraré como puede leer algo que un usuario haya insertado en una forma.
<html>
<head>
<script language="LiveScript">
<!-- esconde el script de viejos browsers
function getname(str) {
alert("Hola "+ str+"!");
}
// end hiding contents -->
</script>
</head>
<body>
Por favor, escriba su nombre:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>
Otra vez tenemos nuevos elementos implementados en este script. Primero usted habrá notado el comentario en el script. De esta forma se puede esconder el script de los browsers obsoletos que no ejecutan scripts. Usted debe seguir el orden mostrado! El principio del comentario debe estar justo después del primer tag <script>. El comentario termina justo antes del <script> tag. En este documento HTML usted tiene una forma donde el usuario puede escribir su nombre. El 'onBlur' en el tag <input> le dice al programa cliente que función es la que tiene que invocar cuando algo se introduce en esta forma o casilla. La función 'getname(str)' será invocada cuando usted deja en blanco esta forma ('leave') o presiona 'enter' sin haber escrito nada. La función tomará el 'string' usted escribió a través del comando 'getname(this.value)'. 'This.value' significa el valor que usted escribió en la forma.
Creo que lo siguiente tan 'vacano' como bueno.
Vamos a implementar la función de la fecha dentro de nuestro script. De modo que
si usted hace una página en HTML, puede hacer que el usuario vea la última
modificació del documento sin que se tenga que escribir la fecha. Simplemente se
escribe un programa en script. Cuando se hagan pequeños cambios en el futuro, la
fecha cambia automaticamente.
<html>
<body>
Esta es una simple página en HTML.
<br>
Ultima modificación:
<script language="LiveScript">
<!-- oculta el script de los browsers obsoletos
document.write(document.lastModified)
// termina de esconder el contenido -->
</script>
</body>
</html>
Originalmente la orden era lastmodified pero ha cambiado a lastModified. De modo que dese cuenta que JavaScript es bastante sensitivo. lastmodified y lastModified son algo diferente.
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 ¡Error!Referencia de hipervínculo no válida. 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 otar manera
JavaScript no es capaz de identificar el string que 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ál. 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á. Estos datos no son conservados por Internet o algo parecido.
La hora actual es: 16:19
La fecha es: 6/13/2000
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á implementadopor 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. Talvez 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: 0.27033741199749317
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. Aquí está la fuente de un ejemplo:
<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 iinformació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.
Frames
Mucha gente me
preguntaba como JavaScript trabajaba en conjunto con los frames. Usando frames
usted puede dividir la ventana que muestra las páginas de HTML en varias partes.
De modo que así usted posee partes individuales en su browser y en cada parte
puede cargar páginas diferentes. Algo interesante es que estos frames pueden
interactuar. Esto significa que pueden intercambiar información el uno con el
otro. Por ejemplo usted puede crear dos frames, uno con su página normal de HTML
y otra con una barra de herramientas, la barra de herramientas puede contener
botones para navegar por su página normal de HTML. Esta barra de herramientas
estará siempre visible mientras usted navega por otros sitios de la página
principal. Primero quiero mostrarle mas o menos como lucirá esto. Solo presione
el botón y observe lo que son los frames. (en esta oportunidad el programa no se
ejecuta en su máquina, la información baja del servidor, asi que por favor,
espere un momento)
Aquí está el script en HTML para los frames:
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frtest1.html" name="fr1">
<FRAME SRC="frtest2.html" name="fr2">
</FRAMESET>
</HTML>
Primero usted le dice al browser cuantos frames quiere tener. Esto está definido en el tag <frameset...>. Escribiendo rows el browser dividirá el espacio descrito en barras. Se pueden crear varias columnas usando cols en lugar de rows. Se pueden usar varios tags <frameset...>. Aquí va un ejemplo distribuido por Netscape:
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
</FRAMESET>
Esto creará dos columnas y la segunda columna es
dividida en 3 partes iguales. Los 50%,50% el primer tag <frameset> le
dicen al browser que tan grandes serán los frames.
Usted le puede dar nombres
a sus frames. Esto es muy importante para el uso con JavaScript. En el primer
ejemplo puede ver como los frames toman sus nombres. Usando el tag <frame>
se le dice al browser que página de HTML cargar.
Creo que los elementos básicos de los frames son fáciles de entende, ahora miremos nuestro próximo ejemplo:
Esto le mostrará una ventana donde puede presionar
algunos botones para escribir algun texto en otro frame.
Aquí va la fuente:
Para crear los frames necesitará (frames.htm):
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frame1.htm" name="fr1" noresize>
<FRAME SRC="frame2.htm" name="fr2">
</FRAMESET>
</HTML>
Aquí está la fuente para frame1.htm:
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
function hi() {
document.write("Hola!<br>");
}
function yo() {
document.write("Entonces!<br>");
}
function bla() {
document.write("bla bla bla<br>");
}
// -->
</script>
</HEAD>
<BODY>
Este es nuestro primer frame!
</BODY>
</HTML>
Y ahora frame2.htm:
<HTML>
<body>
Este es nuestro segundo frame!
<p>
<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="Hi" onClick="parent.fr1.hi()">
<INPUT TYPE="button" VALUE="Yo" onClick="parent.fr1.yo()">
<INPUT TYPE="button" VALUE="Bla" onCLick="parent.fr1.bla()">
</FORM>
</BODY>
</HTML>
Wow! Estos scripts se tornan mas y mas largos! Que hay hecho aquí? El usuario carga el primer archivo (frames.htm). Este crea los frames y carga el archivo de HTML frame1.htm al primer frame (llamado 'fr1') y frame2.htm al segundo frame (llamado 'fr2'). Hasta aquí estamos en HTML puro. Como puede ver el primer script frame1.htm contiene algunas funciones de JavaScript. Pero estas no son invocadas en el primer script. No son estas funciones necesarias del todo? Me da mucha pereza de borrar las funciones inservibles? Aunque yo soy un tipo peresozo, esta funciones si son necesarias. Ellas son invocadas por el segundo script frame2.htm! Nosotros hicimos algunos botones en este segundo script como lo hicimos en la primera parte de esta introducción. La propiedad onClick ya es muy familiar. Pero que significa el parent.fr1...?
Si está familiarizado con objetos, entonces esto no es nuevo para usted. Como pudo ver antes, el frame1.htm y el frame2.htm son invocados por el archivo frames.htm. Frames.htm es el padre de los otros dos frames. En consecuencia los dos nuevos frames son llamados frames niños de frames.htm. Se puede observar que esto es un tipo de jerarquía que da una cierta interrelación entre los diferentes frames. Trataré de mostrarle la idea con ayuda de una pequeña gráfica (sería mejor descrita como arte-ASCII):
frames.htm padre
/ \
/ \
/ \
fr1(frame1.htm) fr2(frame2.htm) niños
Este concepto se puede extender, se pueden crear 'nietos' y sería como así:
frames.htm padre
/ \
/ \
/ \
fr1(frame1.htm) fr2(frame2.htm) niños
/ \
/ \
/ \
nieto1 nieto2 'nietos'
Si desea indexar algo en el frame padre desde el frame2.htm, solo pone al padre antes de la función que va a invocar. Direccionar las funciones definidas en frame1.htm desde el frame padre puede ser hecho ubicando fr1 antes de la funcion a llamar. Por qué fr1? En su script del frame padre (frames.htm) usted creó scripts diferentes y los llamó de forma diferente. Yo escogí fr1 para el primer frame. El siguiente paso es fácil. Como es invocado el primer frame si usted desea indexarlo desde frame2.htm (el cual se mantiene en el segundo frame llamado fr2)? Como puede ver en mi asombrosa gráfica no existe conección entre frame1.htm y frame2.htm. Si usted no puede invocar las funciones desde frame2.htm definidas en frame1.htm. Entonces tiene que indexarla desde el frame padre. De modo que el index correcto es parent.fr1. Si desea invocar la función hi() desde frame2.htm es solo cuestión de escribir parent.fr1.hi(). Esto es lo que está hecho en el segundo script en la propiedad 'onClick'.
Oh, de la forma en que usted observó como uso <script language= "JavaScript"> en lugar de <script language="LiveScript"> en las dos primeras partes no existe una diferencia del todo. Pero como JavaScript fue implementado dentro del Netscape browser se podria usar la expresion LiveScript primero. (Este es lenguaje script viejo de Netscape - JavaScript es completamente similar). Creo que como estamos escribiendo funciones en JavaScript, debemos usar la expresion JavaScript. (Hay una discusion en la sociedad del JavaScript acerca de lo que es LiveScript. Hay varias opiniones. Esta es mi version...
Si usted a creado algunos frames y en algunos de estos frames hay algunos links y si alguien toma un link y los frames no desaparecen, esto es perfecto si el usuario permanece en su página y usted quiere tener una barra de menús. Pero si el usuario salta hacia otra página en Internet, su barra de menús ya no debe ser necesitada. Entonces se pueden borrar los frames antes creados?
Solo escriba TARGET="_top" a cada link que apunte hacia otro lugar en Internet en el tag <a href...>. Esto se ve mas o menos así:
<a href="saliendo.html" TARGET="_top">si no quiere quedarse mas en mi página</a>
Por supuesto, se debe agregar TARGET="_top" a cada link que apunte hacia otro lugar. Si cada link en su página apunta hacia otro sitio tambien puede escribir <base target="_top"> en el head de su página de HTML. Esto significa que cada link en la página borra los frames.
Barra de estado y Scrollers.
Ahora quiero
mostrarle como escribir cosas en la barra de estado, (la barra enla parte
inferior de su browser donde se ven las URL's) y porsupuesto explicaré como
trabaja un scroller -aunque ellos ya son odiados en la escena del JavaScript
(mas adelante les diré por que-
Primero, cómo se referencia la barra de
estado? Este script muestra como se puede escribir un simple texto en la barra
de estado:
No le parece vacanísimo? Aquí está el script:
<html>
<head>
<script language="JavaScript">
<!-- Hide
function statbar(txt) {
window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<input type="button" name="look" value="Escribir!" onclick="statbar('Hola! esta es la barra de estado!');">
<input type="button" name="erase" value="Borrar!" onclick="statbar('');">
</form>
</body>
</html>
Creamos dos botones, ambos invocan la función
statbar(txt).El 'txt' en los paréntesis muestra que la función toma una
variable. (Llamé esto txt, pudo haber sido algo totalmente diferente).
Cuando se estudia el tag <form>, donde se crean los botones, puede ver que
la función statbar(txt) es invocada. Pero allí no escribimos txt. Solo
escribimos el texto que queremos que nos muestre la barra de estado. Se puede
ver de esta manera: la función es invocada y define la variable txt esta toma el
valor ('value') que se puso después del llamado de la función. De esta forma
cuando se oprime el boton 'Escribir!', la función statbar(txt) es invocada y txt
conserva el valor ('string') 'Hola! esta es la barra de estado!'. Ahora se puede
usar la variable txt muy usualmente. Este método de otorgar variables a las
funciones las hace muy flexibles. Observe el segundo botón. Este invoca la misma
función, si no tuvieramos la variable, necesitariamos dos funciones
diferentes.
Ahora qué hace la función statbar(txt)? Bueno, esto es simple.
Usted solo escribe los contenidos de txt a la variable window.status. Esto es
hecho por window.status = txt;. Escrbiendo un valor nulo ('') hace que la
barra se borre. Note que tenemos que usar las comillas simples ' porque usamos
comillas dobles " para definir onClick. El browser necesita saber a quien le
pertenecen las comillas, por eso se tiene que alternan con comillas sencillas y
dobles. Creo que esto está completamente calro.
Usted ya sabe que la propiedad onMouseOver de la
parte dos de este tutorial:
<a href="tpage.html"
onMouseOver="window.status='Otro link estupido...'; return true">
No se
molesta porque la barra de estado no borra el texto cuando el puntero del mouse
no se apunta alli mucho tiempo? Tengo una solución bastante simple. Escribimos
una función que usa la misma técnica para borrar la barra de estado mostrada
arriba. Pero cómo podemos invocar la función de borrado? No tenemos una
propiedad o un método para detectar si el mouse se está moviendo sobre un link.
Instalando un 'timer' es la solución.
Esto es realmente puro, solo mire la fuente y verá que es más fácil de lo que se ve a primera vista.
<html>
<head>
<script language="JavaScript">
<!-- Hide
function moveover(txt) {
window.status = txt;
setTimeout("erase()",1000);
}
function erase() {
window.status="";
}
// -->
</script>
</head>
<body>
<a href="dontclck.htm" onMouseOver="moveover('Desapareciendo!');return true;">
link</a>
</body>
</html>
Usted reconocerá muchas partes de este script. La
función moveover(txt) es solo la función statbar(txt) después de algún trabajo
de copiar y pegar sobre ella! Algo similar sucede con la función erase(). En el
<body> de la página de HTML creamos un link con la ya conocida propiedad
onMouseOver. Nuestra función moveover(txt) es invocada con la string
'Desapareciendo!' pasándola por encima de la variable txt. El window.status toma
los contenidos de txt. Lo mismo que la función statbar(txt). Aunque la
invocaciónde la función setTimeout(...) is nueva. Esta funció configura un
tiempo de finalización. Quién estaba esperando eso? La función setTimeout(...)
define una hora de arranque y una hora de finalización. En nuestro ejemplo la
función erase() es invocada después de 1000 milisegundos (un segundo). Esta es
una característica fantástica! Su función moveover(txt) termina luego de que el
tiempo es configurado.El browser invoca la función erase() automaticamente luego
de un segundo. (Todavía sigue pensando en una página que diga al
usuario:Cuando usted no haga esto su disco duro será destruido en 10
segundos! ???)
Luego de que el tiempo de finalización a concluido, el
tiempo de inicio no arranca de nuevo, claro que se puede invocar otra vez con la
función erase(). Esto nos lleva directamente a los scrollers que todos queremos.
Como usted ya sabe como escribir cosas en la barra de estado y como trabaja la función setTimeout, le será fácil de entender el scroller.
Un vistazo al script:
<html>
<head>
<script language="JavaScript">
<!-- Hide
var scrtxt="Aqui va el mensaje, los visitantes de su pagina "+
"la veran por horas totalmente fascinados...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function scroll() {
pos++;
var scroller="";
if (pos==lentxt) {
pos=1-width;
}
if (pos<0) {
for (var i=1; i<=Math.abs(pos); i++) {
scroller=scroller+" ";}
scroller=scroller+scrtxt.substring(0,width-i+1);
}
else {
scroller=scroller+scrtxt.substring(pos,width+pos);
}
window.status = scroller;
setTimeout("scroll()",150);
}
//-->
</script>
</head>
<body onLoad="scroll();return true;">
Aqui va su super pagina!
</body>
</html>
Este script usa las mismas funciones (o parte de ellas) que usamos antes. El setTimeout(...) le dice al 'timer' que invoque la función scroll() cuando el tiempo es el justo. El scroller se moverá un paso mas adelante. Al comienzo hay muchos cálculos pero esto no es muy importante para saber como funciona el script. Los cálculos se hacen para determinar la posición donde el scroller debe arrancar. Si se ubica solo al comienzo se deben poner unos espacios en blanco para ubicar el texto correctamente.
Yo le dije al comienzo de mi introducción que los
scrollers no son muy populares, o que si ellos aún son populares, no lo serán
por mucho tiempo. Existen muchas razones, aquí menciono algunas, pero son muchas
más.
Si usted ve este efecto por primera vez es completamente fascinante;
pero cuando lo ve por diezmillonésima vez, no es tan divertido. Bueno esto no es
un buen argumento además puede que esté afectando algún truco usado en sus
páginas.
Existen varios problemas. Lo que yo quiero es que la velocidad no
cambie cuando se mueva el mouse (se acelera!). Por lo menos eso me sucede a mi.
Este efecto se torna mas fuerte cuando se desea hacer un scroller un poco rápido
cambiando el valor de 'setTimeout'. Debe ser que hay algo de esto relacionado
con este problema. Pero lo peor es que si usted deja este script corriendo por
mucho tiempo un error: memoria insuficiente. Existen muchas otras rutinas
por ahí en la red. He visto algunos scrollers escribiendo texto en un frame.
Solo es buscar en la red el mas adecuado a nuestras necesidades.
Arreglos
Una técnica
importante de programación es el uso de arrays. Estos son soportados por cada
lenguaje de programación en cierta manera. Puede ser que alguna vez usted haya
llegado a un punto donde los arrays lo ayudarían de gran manera. Pero si se mira
a través de la documentación que Netscape provee, allí no se encuentra nada
acerca de los arrays. El problema es que los arrays no existen en JavaScript¡
Pero porsupuesto yo le puedo mostrar un trabajo acerca de esto¡
Primero, qué
son arrays? Usted puede ver que los arrays son muchas variables ligadas entre
si. Digamos que quiere 10 variables. Usted puede comenzar con las variables a,
b, c... Pero esto es realmente complicado. Especialmente si usted quiere
almacenar 100 o mas variables. Si usted tiene un array llamado 'MiArray' y este
tiene 10 elementos, usted puede direccionar los diferentes elementos con
MiArray[1], MiArray[2], MiArray[3]...(muchos lenguajes de programación inician
con el cero como primer elemento ´- pero queremos tener el 1 como primer
elemento porque asi lo vamos a usar en JavaScript). Por ejemplo si usted desea
mantener el número 17 en el primer elemento, debe escribir
MiArray[1]=17.Usted ve que puede trabajar con arrays de la misma forma
que con variables normales. Pero existen otras características. Si usted quiere
almacenar el número 17 en cada elemento, lo puede escribir de esta
manera:
for (var i=1;<11;i++) MiArray[i]=17
El comando 'for' le
dice al computador con que frecuencia el comando siguiente va a ser ejecutado.
El loop de 'for' comienza con i= 1. Primero el computador toma el comando
Miarray[1]= 17. Después esta i es incrementada por 1 y entonces el comando es
MiArray[2]= 17. i se incrementa hasta que tiene el valor de 10. (La expresión
1<11 en el loop de for debe ser true si i es 11 esta expresión no es mas
'true').
Ahora le mostraré una función para comenzar con los arrays. Esta
función fue discutida el la Mailing List de JavaScript. (Si se quiere suscribir
a la lista de correo envie el comando subscribe javascript-digest como
cuerpo del mensaje hacia majordomo@obscure.org. Usted recibirá 1 o dos
archivos cada dia de aproximadamente 20 o 30Kb cada uno. Estos archivos
contienen los correos de la liste de javascript.)
function initArray() {
this.length = initArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i]
}
Usted no tiene la necesidad de entender esta función. Solo tiene que saber como usarla. Si quiere crear un array con tres elementos solo escriba: var MyArray= new initArray(17,18,19). 17,18,19 son asignados a los elementos 1,2,3. Usted igual podría escribir strings a su array. Además austed no le debe importar que letras o tipos son usados¡ var heyho= new initArrray("Esto","es","vacano").Mezclando diferentes letras no es del todo un problema: var Mezclados= new initArray(17,"Ho",103).
Ahora iniciaré el array 'Mezclados' y mostraré el resultado:
Elemento No. 1: 17
Elemento No. 2: Ho
Elemento
No. 3: 103
Este es el script para la salida:
<script language="JavaScript">
<!-- Hide
var Mezclados= new initArray(17,"Ho",103);
document.write("Elemento No. 1: "+Mezclados[1]+"<br>");
document.write("Elemento No. 2: "+Mezclados[2]+"<br>");
document.write("Elemento No. 3: "+Mezclados[3]+"<br>");
// -->
</script>
Ayer estuve escribiendo un pequeño juego. Encontré un problema que tal vez usted encuentra a veces. Si quiere limpiar una ventana o un frame habrá visto que en la documentación de Netscape, JavaScript reconoce la función 'document.clear()'. Pero si usted implementa esta función nada sucede¡ La función 'document.clear()' parece estar rota en cada plataforma. El siguiente script que limpia la ventana como yo quería.
document.close();
document.open();
document.write("<P>");
Usted no tiene que escribir document.write("<P">);. Lo único importante es que envie algo a la ventana. Esto trabaja igual de bien con frames.
Ahora estamos mirando un script que le permite navegar a través de diferentes documentos. De lo que hablo es de las funciones back() y forward(). Si usted tiene un link de regreso (back) en su página, este no es el mismo botón de regreso que tienen la mayoria de los browsers. Por ejemplo yo tengo lagunos links de regreso que trabajan como links normales, pero yo se que el usuario probablemente viene de esa página a la cual yo estoy haciendo el link. El botón de regreso provisto por Netscape Navigator se devuelve un paso atrás en su 'history list'. Esto se puede hacer igualmente con JavaScript. El script que uso aquí se muestra abajo:
<html>
<body>
<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="Atras" onClick="history.back()">
<INPUT TYPE="button" VALUE="JS- Home" onClick="location='script.html'">
<INPUT TYPE="button" VALUE="Siguiente" onCLick="history.forward()">
</FORM>
</body>
</html>
También puede escribir history.go(-1) y history.go(1).
Ventanas Multiples
Yo recibo una gran cantidad de mensajes acerca del problema de cómo dos páginas pueden ser cargadas con un solo click del mouse. Basicamente hay tres soluciones diferentes a este problema: la primera posibilidad es crear un botón el cual invoca una función cuando el usuario lo presiona. Esta función carga dos páginas dentro de diferentes frames o abre nuevas ventanas. ESto no es muy difícil si usted observa los ejemplos en otras partes de esta introducción. Tenemos todos los elementos que en realidad necesitamos.
Creamos tres frames. El primero es usado para el botón. La primera página HTML solo se necesita para abrir los frames y darles sus respectivos nombres. Se lo mostraré de alguna forma. (No se si esto le sucede a usted, pero cada vez que un autor de un libro de computación piensa que algo no debe ser impreso por ser tan sencillo, es en esa la parte en que tengo problemas. Asi que aquí voy:)
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET COLS="295,*">
<FRAMESET ROWS="100%,*">
<FRAME SRC="loadtwo.htm" NAME="fr1">
</FRAMESET>
<FRAMESET ROWS="75%,25%">
<FRAME SRC="cell.htm" NAME="fr2">
<FRAME SRC="cell.htm" NAME="fr3">
</FRAMESET>
</FRAMESET>
</HTML>
loadtwo.htm es cargada al primer frame. Este es el frame con el botón.
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
function loadtwo(page2, page3) {
parent.fr2.location.href=page2;
parent.fr3.location.href=page3;
}
// -->
</script>
</HEAD>
<BODY>
<FORM NAME="buttons">
<INPUT TYPE="button" VALUE="2 in a row" onClick="loadtwo('frtest1.htm','frtest2.htm')">
</FORM>
</BODY>
</HTML>
La función loadtwo() es invocada cuando el botón es presionado. Dos comillas envuelven la función. Si usted observa esta función, puede ver que el segundo frame fr2 carga la página que está definida por las primeras comillas en el llamado de la función. Si usted tiene diferentes botones abriendo diferentes páginas, puede reusar esta función. Usted solo tiene que pasar las diferentes URLs (direcciones) de las páginas.
La segunda técnica usa hyperlinks. Algunos
ejemplos flotando por Internet tienen algo como esto:
<a
href="su_link.htm onClick="sufunción()">
. Esta técnica parace no
trabajar en todas las plataformas. Asi que mejor no la use. No estoy seguro si
se supone que trabaja del todo pero no tenemos que preocuparnos porque existe
otro método con el cual podemos implementar esto. Podemos invocar una función
JavaScript de la siguiente forma:
<a href="javascript:mi función()">Mi Link</a>
Esto es realmente fácil y parece funcionar bien en todos los browsers. Usted solo tiene que escribir javascript: y el nombre de su función como su 'link'. Si usted invoca la función 'loadtwo()' del ejemplo de arriba, puede actualizar dos frames con un solo click sobre un hyperlink.
La tercera técnica para cargar dos páginas con un
solo click del mouse puede ser combinada con botones o con hyperlinks normales.
Podemos hacer esto con la segunda técnica mostrada arriba pero el
aprovechamiento de esta puede ser inapropiada algunas veces. Lo que podemos
hacer es cargar una página HTML a un frame. Esto es hecho por:
<a
href="getfr2.htm" target"fr2">Click aqui!</a>
Esto ya lo sabímos. Lo
que hacemos ahora es agregar la propiedad 'onLoad' al archivo cargado. El
archivo 'getfr2.htm' puede lucir asi:
<HTML> <BODY onLoad="parent.fr3.location.href='getfr3.htm'; return true;"> bla bla bla </body> </html>
Porsupuesto usted debe agregar esto a cada documento que sea cargado dentro del segundo frame.
Otro problema visto frecuentemente es el de cómo
pueden ser cargadas nuevas páginas a una nueva ventana. La ventana se abrirá
cuando el usuario haga click en un link. Usted solo tiene que agregar la
propiedad 'target' a su tag de nuevo. Esto luce asi:
<a
href="cualquier_sitio.html" target="Ventana Fuente">Vamos!</a>
Ahora miraremos diferentes operadores que podremos usar en JavaScript. Los operadores son una técnica poderosa para hacer mas pequeño y a la vez mejorar su script. Por ejemplo, usted quiere probar si una variable x es mas grande que 3 y quiere ver si es mas pequeña que 10. Usted debería escribirlo en esta forma:
if (x>3)
if (x<10)
haceralgo();
La función 'haceralgo()' es invocada cuando x es mayor que 3 y cuando x es menor que 10. Existe una forma más fácil de escribir este pensamiento:
if (x>3 && x<10) haceralgo();
&& es llamado el operador AND. Entonces hay un operador OR. Usted puede usar esto por ejemplo si usted quiere asegurarse de que una variable x es igual a 5 y otra variable y es igual a 17.
if (x==5 || y==17) haceralgo();
La función haceralgo() es invocada cuando x==5
o y==17. Esta se invoca también si ambas comparaciones son
verdaderas.
Las comparaciones son hechas por el operador == en JavaScript
(por supuesto existen también <,>,<= and >=). Si usted sabe C/C++,
esto es lo mismo. Un simple = es usado para almacenar el valor de una variable.
(Si usted sabe PASCAL esto puede ser un poquito confuso. Asignar el valor a una
variable en PASCAL es hecho por medio de := y comparaciones con un simple =)
Si quiere ver si una variable no es igual a cierto número, esto puede ser un poquito complicado sin operadores. Esto es hecho con un simple !=. De modo que esto lucir&iaacute;a como esto por ejemplo: x != 17.
Hay muchos mas operadores interesantes con los cuales puede hacer sus programas mucho mas eficientemente. Mire la documentación que brinda Netscape para obtener una visión completa de todos los operadores que puede usar en JavaScript.
Formas
Las formas (Form
Inputs) son muy importantes para algunas páginas web. La entrada de las formas
es enviada al servidor la mayoría de las veces. Primero quiero mostrale como se
puede validar una forma. Entonces daremos un vistazo a las posibilidades de dar
información al cliente con JavaScript o con HTML.
Primero que todo, queremos crear un simple script. La página de HTML contendrá dos elementos de texto. El usuario tiene que escribir su nombre dentro del primer elemento y su dirección e-mail dentro del segundo. Usted puede escribir cualquier cosa dentro de algún elemento de la forma y luego presionar el botón. También intentelo no escribiendo nada y presionando el botón.
Con respecto a la entrada del primer elemento, usted
recibirá un mensaje de error si no escribe nada. Cualquier entrada es vista como
válida. Porsupuesto, esto no previene al usuario de escribir un nombre errado.
El browser inclusive acepta números. De tal manera que si usted escribe 27, el
mensaje será 'Hola 27!'.
La segunda forma es un poquito mas sofisticada.
Trate de escribir una entrada simple, como su nombre por ejemplo. No trabajará
(a menos de que usted tenga una @ en su nombre...). El criterio para aceptar la
entrada como una dirección e-mail válida es la @. Una simple @ lo hará
funcionar, aunque esto no es bastante significativo. Toda dirección e-mail en
Internet tiene una @, por esto es apropiado buscar una @ aquí.
Como luce el script para las dos 'form input' y para la validación de estos? Aquí va:
<html>
<head>
<script language="JavaScript">
<!-- Hide
function test1(form) {
if (form.text1.value == "")
alert("Por favor escriba su entrada!")
else {
alert("Hola "+form.text1.value+"! Su entrada es correcta!");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("Direccion e-mail no valida!");
else alert("OK!");
}
// -->
</script>
</head>
<body>
<form name="first">
Escriba su nombre:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Comprobacion" onClick="test1(this.form)">
<P>
Escriba su direccion e-mail:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Comprobacion" onClick="test2(this.form)">
</body>
Primero observemos el código HTML en la sección
'body'. Solamente creamos dos elementos de texto y dos botones. Los botones
invocan la función test1(...) o test2(...) dependiendo de que botón es
presionado. Pasamos this.form a las funciones para que sea posible
direccionar los elementos correctos en las funciones mas adelante.
La función
test1(form) comprueba si la entrada es vacía. Esto es hecho por medio de
form.text1. Para ver si la entrada es vacía la comparamos con "". Si la
entrada iguala a "" entonces nada fue escrito. El usuario obtendrá un mensaje de
error. Si algo es escrito el usuario recibirá un ok.
El problema aquí es que
el usuario puede entrar solo espacios. Esto es visto como una entrada válida! Si
usted también quiere, usted puede porsupuesto mirar estas posibilidades y
excluirlas. Creo que con la información dada aquí esto es completamente
fácil.
Ahora miremos la función test2(form). Esta función de nuevo
compara la entrada con el equivalente a "" para estar seguro de que algo a sido
escrito. Pero hemos agregado algo al comando 'if'. El || es llamado el operador
OR. Usted aprendióo acerca de ellos en la sección 6 de esta introducción.
El
comando if chequea si cualquiera de las dos comparaciones, la primera y la
segunda son reales. Si por lo menos una de ellas es verdadera el comando if lo
toma como real y el siguiente comando será ejecutado. Esto significa que usted
obtendrá un mensaje de error si no escribió nada o si no hay una @ en su
entrada. La segunda operación en el comando if es vista si la entrada contiene
una @.
Cuáles son las diferentes posibilidades que
existen de enviar el contenido de una forma?. La manera más fácil de enviar el
contenido de una forma es via e-mail. Este es el método que vamos a observar un
poco más de cerca. Si usted desea que la gente le envie sus comentarios sin
utilizar e-mail y que el servidor manipule la información por si solo, deberá
utilizar CGI (Common Gateway Interface). Usted necesitará CGI si por ejemplo
desea tener elementos de busqueda en su página como YAHOO en donde el usuario
recibe un resultado rápido después de dar su entrada en una FORMA. El no tiene
que esperar hasta que la gente lea su entrada, manipule la información y le
envien una respuesta. Esto es hecho automaticamente por el servidor. JavaScript
no posee la funcionalidad de hacer cosas como esta. Inclusive si usted crear un
'guestbook', no puede hacer que el servidor adicione información a una página
HTML con JavaScript. Solo CGI es capaz de hacer esto por el momento. Por
supuesto usted puede crear un guestbook respondiendo a la gente via e-mail.
Aunque usted tiene que escribir toda la información que recibirá el usuario.
Esto es perfecto si usted no espera recibir por lo menos cien e-mails al
dóa.
Este script es puro HTML. JavaScript no es necesitado aquí! Solo, si
usted desea chequear la entrada en la forma como lo vimos atrás. Hay que tener
en cuenta que el comando mailto no funciona para todos los browsers.
<FORM METHOD=POST ACTION="mailto:aqui_va@su_direccion_e-mail"> <H3>Le gusta esta pagina?</H3> <INPUT NAME="choice" TYPE="RADIO" VALUE="1">No del todo.<BR> <INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>Es una perdida de tiempo.<BR> <INPUT NAME="choice" TYPE="RADIO" VALUE="3">El peor sitio en la red.<BR> <INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send"> </FORM>
Usted obtendrá el resultado via e-mail haciendo esto. El_único problema es que recibirá un mail que puede parecer un poco encriptado a primera vista. Algunas veces todos los espacios son llenados con un signo '+' y otras veces son llenados con '%20'. Es+algo+mas+o+menos+asi.Creo que existen algunos buenos programas en la Red que pondrían el mensaje en una forma mas agradable.
Existe otra cosa interesante que pueden hacer sus
elementos de FORMAS un poco mas amigables. Usted puede definir cual elemento es
enfocado al comienzo. O usted puede decirle al browser que enfoque la forma
donde la entrada del usuario fue errónea. Esto significa que el browser pondrá
el cursor en el elemento de la forma especificada de modo que el usuario no
tiene que hacer click en esta antes de escribir algo. Esto lo puede hacer
mediante el siguiente script:
function setfocus() {
document.first.text1.focus();
return;
}
Esta función enfocaría el primer elemento de texto en el script que mostré arriba. Se debe especificar el nombre completo de la FORMA la cual aqui es llamada first y el nombre del simple elemento de la forma, aquí text1. Si usted quiere enfocar este elemento cuando la página es cargada, es necesario agregar la propiedad onLoad a su tag <body>. Este luce mas o menos así:
<body onLoad="setfocus()">
Notas Finales
Esperamos que con esta pequeña introduccion a javascript pueda usted experimentar y aprender algo mas sobre el mundo de internet.