Ingeniero Técnico en Informática de Sistemas

JAVASCRIPT

Compartir 0 Me sirvió 0 No me sirvió

INTRODUCCION A JAVASCRIPT

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.

Cómo pueden ser los scripts de JavaScript ejecutados?

Usted puede ejecutar los scripts de JavaScript con Netscape Navigator 2.0. o superiores. Con Exlorer apartir de la version 3.0

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áEsto es JavaScript!

Otra vez 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

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

(HTML). Hay algo completamente nuevo con el tag . 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 (). 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.

(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.

Por favor, escriba su nombre:

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

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 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 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álso. 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 fechLa hora actual

es: 11:35

La fecha es: 3/4/97

Aquí está la fuente:

La hora actual es: 21:18La fecha es: 12/28/98

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: .8600852262905964

Esta es la fuente para este ejemplo:

Este es un numero al azar:0.1881782496443448

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.

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

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 . 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 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. 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">

</FRAMESET>

<FRAMESET ROWS="33%,33%,33%">

<FRAME SRC="cell.html">

</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 entender,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 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

en la 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.

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ó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.

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. 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. Esto es realmente horrible, parece ser un problema de Netscape Navigator 2.0. Talvez la versión 2.01 tenga este problema solucionado.

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¡

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 diferenteElemento No. 1: 17

Elemento No. 2: Ho

Elemento No. 3: 103

Este es el script para la salida:

Elemento No. 1: 17Elemento No. 2: HoElemento No. 3: 103

----------------------------------------------------------------------------

----

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("");

Usted no tiene que escribir document.write(");. 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

orward(). 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:

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>

</FRAMESET>

</HTML>

loadtwo.htm es cargada al primer frame. Este es el frame con el botón.

loadtwo.htm

<HTML>

<HEAD>

<!-- Hiding

function loadtwo(page2, page3) {

parent.fr2.location.href=page2;

parent.fr3.location.href=page3;

}

// -->

</script>

</HEAD>

<BODY>

<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:

. 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:

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>

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.

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.

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>

<!-- 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>

Escriba su nombre:<br>

<input type="button" name="button1" value="Comprobacion"

onClick="test1(this.form)">

<P>

Escriba su direccion e-mail:<br>

<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.

<H3>Le gusta esta pagina?</H3>

<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>

</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í:

Tal vez te pueda interesar:

Descargar

Enviado por:	El remitente no desea revelar su nombre
Idioma:	castellano
País:	España

Palabras clave:

Informática Lenguajes Scripts Funciones HTML (Hypertext Markup Language)Ventanas Browsers

Te va a interesar