|
|
|
|
|
  |
||
 |
|
|
| Introducción: | ||
|
Parte 1 Qué es JavaScript?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. Cómo pueden ser los scripts de JavaScript ejecutados?Usted puede ejecutar los scripts de JavaScript con Netscape Navigator 2.0. Por el momento Netscape está lleno de versiones beta, así que agarre la suya. Si usted no tiene Netscape Navigator 2.0 consígalo. Por el momento creo que no hay otro browsers que pueda ejecutar los scripts de JavaScript.
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>
Si usted está usando Netscape 2.0 por el momento, tendrá la posibilidad de ver este script trabajando. Si su browsers no es compatible con JavaScript entonces este escrito se debe ver un poco extraño... Este
es un documento normal en 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.
No quiero molestarlos con algunos scripts sencillos. Así que iremos a las funciones. Esto tampoco es difícil de entender, créme, 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>
Si desea probar esta función ya mismo y está usando Netscape 2.0 entonces por favor presione el botón. 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 encontar una descripción completa en el home page de Netscape.
Creo que esa lista se ira volviendo mas y mas extensa en el futuro. Pero
por el momento hay algunas cosas divertidas que se pueden hacer con los
métodos dados.
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>
Ahora puede probar este script de nuevo: Por favor escriba su nombre: 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 'Chevere' 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> En mi primera publicación de esta introducción había escrito lastmodified. Este fue el estilo que Netscape 2.0 beta2 quería. Ahora tengo Netscape 2.0 beta4 y ha cambiado a lastModified. De modo que dese cuenta que JavaScript es bastante sensitivo. lastmodified y lastModified son algo diferente. Esta es la razón por la cual la primera publicación no tenía fecha al final de la página cuando era vista con algunas versiones de Netscape. Por el momento esta propiedad parece no funcionar en cualquier máquina. Compuserve muestra solo la fecha 1/1/1970. Bueno, le puedo decir que esto no es completamente verdadero. aunque esta propiedad trabaja muy bien en mi PC. Usted debe probarla en su máquina. Yo solo tengo que eliminarla por el momento. Hay muchas mas cosas que usted puede hacer. Solo heche un vistazo en los documentos conservados por Netscape. Yo complementaré este curso en el futuro, además hoy en día las cosas se están moviendo bastante rápido, asi que no sería sorprendente si la próxima semana sucede un enorme cambio en JavaScript!
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 linkuna 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.
<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.
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. 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: 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 ... <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>No le parece vacanisimo!</B></h1></CENTER>
"); }
</script>
</head>
<body>
<form>
<input type="button" name="Boton1" value="Aqui estoy" 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
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. 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. 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 trabajen para ese entonces. Escribiré otros ejemplos cuando nuevas características sean agregadas o cuando tenga una nueva idea que les pueda mostrar.
Mucha gente me preguntaba como JavaScript trabajaba en conjunto con los frames. Para usar frames con JavaScript tiene que tener Netscape Navigator 2.0 en el momento. Existen muchos browsers que soportan frames, por ahora el PowerBrowser de Oracle por ejemplo. Pero esta es aún una versión beta y no soporta JavaScript. Primero quiero decir algo acerca de los frames. Muchas documentaciones para HTML no contienen nada acerca de frames porque son relativamente nuevos. 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 preione 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. 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. Para crear los frames necesitará (frames.html): <HTML> <HEAD> <title>Frames</title> </HEAD> <FRAMESET ROWS="50%,50%"> <FRAME SRC="frame1.html" name="fr1" noresize> <FRAME SRC="frame2.html" name="fr2"> </FRAMESET> </HTML> Aquí está la fuente para frame1.html: <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.html: <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 algunod 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.
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- 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. Usted
ya sabe que la propiedad onMouseOver de la parte dos de este tutorial:
Ensaye el siguiente script aquí. Sólo mueva el puntero sobre él no haga click! 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ó 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! ???) 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. Presione este botón para ver mi scroller. El script debe cargarse desde el servidor. Así que sea paciente si no lo ve inmediatamente. 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óon 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. Existen muchas otras rutinas por ahí en la red. He visto algunos scrollers escribiendo texto en un frame. Programar esto debe ser un poco o muy difícil.
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¡ 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'). 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:
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ó 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. Gordon McComb me dio el suiguiente 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. Solo tome este link para regresar de nuevo! 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).
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:) frames2.htm<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. loadtwo.htm<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="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: <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: 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. La
función haceralgo() es invocada cuando x==5 o y==17. Esta se invoca
también si ambas comparaciones son verdaderas. 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.
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!'. 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.
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. <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()">
|
|
|