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

Mi primer JavaScript!
Este es documento normal en HTML.
<script language="LiveScript"> document.write("Esto es JavaScript!")
Otra vez en 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

2

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 3

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: La única cosa que tiene que hacer es agregar el método onMouseOver en su tag . 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 4

JavaScript llamando la función 'alert'. Aquí está la fuente: <script language="LiveScript"> link 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. 5

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 6

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 7

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 8

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:

9

Primero usted le dice al browser cuantos frames quiere tener. Esto está definido en el tag . 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 . Aquí va un ejemplo distribuido por Netscape: Esto creará dos columnas y la segunda columna es dividida en 3 partes iguales. Los 50%,50% el primer tag 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 se le dice al browser que página de HTML cargar.

10

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): Aquí está la fuente para frame1.htm: <script language="JavaScript"> "); } function yo() { document.write("Entonces!
"); }

11

function bla() { document.write("bla bla bla
"); } // −−> Este es nuestro primer frame! Y ahora frame2.htm: Este es nuestro segundo frame!

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

12

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

13

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

14

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 . Esto se ve mas o menos así: si no quiere quedarse mas en mi página 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 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: <script language="JavaScript">
// −−>

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

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

16

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. <script language="JavaScript"> link

17

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 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: <script language="JavaScript">
18

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); } //−−> Aqui va su super pagina! 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 19

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

20

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 [email protected]. 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

21

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

22

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

23

loadtwo.htm es cargada al primer frame. Este es el frame con el botón. loadtwo.htm <script language="JavaScript">

24

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

25

inapropiada algunas veces. Lo que podemos hacer es cargar una página HTML a un frame. Esto es hecho por: Click aqui! Esto ya lo sabímos. Lo que hacemos ahora es agregar la propiedad 'onLoad' al archivo cargado. El archivo 'getfr2.htm' puede lucir asi: bla bla bla 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: Vamos! −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− −−−− 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:

26

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.

27

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: <script language="JavaScript">
28

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!"); } // −−>

Escriba su nombre:

Escriba su direccion e−mail:


29

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

30

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

Le gusta esta pagina?

No del todo.
Es una perdida de tiempo.


31

El peor sitio en la red.

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

32

agregar la propiedad onLoad a su tag . Este luce mas o menos así:

33