BeCuadernos www pe-cuddernon-cam técnic $ Iniciacién a JAVASCRIPT ipt"> Lactiqueta, lo cierra Los cédigos hacen que no se visualicé el c6digo fuente JavaScript que las versiones antiguas de los navegadores no toleran. eea Z Principios basicos Las funciones y variables pueden definirse en el interior de estas etiquetas, pero trataremos este tema ms adelante. Ejecucién mediante determinadas acciones La segunda posibilidad consiste en ejecutar determinados comandos de JavaScript en funcién de las ac- ciones realizadas por el navegante. Algunas de estas acciones pueden ser la carga o la cancelacién de la carga de una pégina cuando, por ejemplo, el rat6n pasa por encima de un enlace. En el ejemplo a conti- nuaciGn, la funcién hola se ejecutard cuando la pagina haya sido cargada. Esta funcién debe definirse con antelacién en el encabezado del archivo HTML (véase Insercién en el encabezado). La funcién podria, por ejemplo, saludar al visitante del sitio mediante un mensaje en pantalla. Insercién en el cuerpo La tercera posibilidad permite, al construir la pagina, integrar comandos JavaScript en una determinada ubicacién de la misma. Esto es titi] cuando deben integrarse complementos de JavaScript como, por ejemplo, un texto, directamente en el archivo HTML. El ejemplo a continuacién hace que se visualice el texto “jSon las xx.xx horas!” en el navegador, texto que contendré la hora actual. La funcién esexi- bir_hora debe volver a definirse en el encabezado. iSon las oe horas! Primera programacién en JavaScript 8 Primera programacion en JavaScript Todos estos ejemplos deben parecerle atin bastante abstractos, pero en las paginas siguientes vamos a tratar ejemplos practicos que le ayudarén a comprender todas estas cosas. Hola, mundo Hola mundo sin parémetro Un programa que se ha convertido en ejemplo clsico de instruccién sobre un lenguaje de programacién consiste en hacer que se visualice de algtin modo el texto “Hola mundo” (viene del inglés, Hello World) en la pantalla, Deseamos definir una funci6n en JavaScript que haga que se visualice este texto en forma de mensaje. Para ello, necesitaremos el cédigo siguiente: Aquéiacute; aparece el contenido de la página El c6digo fuente que aparece antes de la linea que lleva el c6digo ; lo que significa que nuestra funci6n, en esta ocasién sin pardmetros, se invocard cuando se cargue el documento. El conjunto se guarda como archivo HTML normal y se llama desde el navegador. El resultado es el que se presenta a continuaci6n:9 Primera programaci6n en JavaScript Zt Document: Done oo oe ee Hola mundo con pardmetros Modifique la funcién de la siguiente forma: function hola (salida) ( alert (salida) a La etiqueta Body se modificaré como indicamos a continuacién: {Qué ocurre entonces? El navegador lee la etiqueta Body y obtiene ya la instruccién consistente en eje- cutar Ja funcién hola con el pardmetro de textohola mundo con parémetros. El parémetro €s un conjunto de caracteres y debe, por tanto, colocarse en el c6digo fuente entre apéstrofes. Se invoca la funciGn hola y se escribe el conjunto de caracteres que, en este caso, estén indicados en la variable alia. Una variable es un espacio de la memoria disponible que: contiene niimeros, texto, ete. (Encontrard informacién ampliada sobre este tema en la pagina 19). ‘Acto seguido, se ejecuta la funcién: en el comando alert, el navegador encuentra como parémetro la variable aida que se visualiza por medio de un mensaje. En lo que concieme al ejemplo presentado, Jos parémetros serén relativamente indtiles, aunque son importantes para la comprensién de su funcio- nalidad. nee Aqui aparece el contenido de la pagina Hola mundo con parametros [Ac ere)Primera programacién en JavaScript 10 éQué hora es? En los dos ejemplos anteriores, hemos afiadido una funcién en el encabezado que se ha ejecutado me- diante una determinada accién (en este caso, al cargar el documento). En el ejemplo siguiente, lo que queremos es definir también una funcién que haga que se visualice la fecha. Al contrario que en el pro- grama Hola mundo, esta funcién debe integrarse en el cuerpo del programa, dado que la hora debera aparecer en el texto de la pagina. Para ello necesitaremos el c6digo fuente siguiente: Bienvenido a mi sitio Web. Son las tiempo () horas + hora.getMinutes()) Para comprender este programa son necesarias algunas explicaciones: Con el primer comando de la funcién -hora=new Date ()—se escribe el conjunto de datos de la fe- cha y la hora actuales en el objeto hora. Sea cual sea el nombre que utilicemos para designar el objeto hora, el objetivo es que sea comprensible por el autor. En este momento, la hora y Ja fecha se graban enhora. Todo aquello que se encuentre entre paréntesis después de document . write se escribe inmediatamente en el documento HTML. En nuestro caso, se trata de las horas (hora. getHours), un punto (“.”) y los minutos (hora . get Minutes). Las horas y los minutos nuevamente se leen en el objeto hora con los comandos utilizados. Los distintos elementos se unen mediante los signos +. ‘Se ejecuta la funcién que escribe inmediatamente la hora en el texto. El resultado se hace visible: con un simple programa pequefo de este tipo conseguir4 que su sitio Web se distinga del resto. File Edit View Go Communicator Help ob Document: Done Bienvenido a mi sitio Web. Son las 13.9 horas4 Primera programacién en JavaScript Declaracién de vinculos ‘Antes de tratar el tema de los elementos del lenguaje JavaScript, vamos a presentar un ultimo ejemplo préctico. A lo largo del borde inferior de la ventana del navegador se encuentra la barra de estado. Si el puntero del ratén pasa por encima de un enlace (sin hacer clic encima), se indica el nombre del archivo y, eventualmente, el nombre de la ruta del archivo de destino, Hagamos una prueba con el archivo si- Ir a la pagina 2 En este caso, en la barra de estado del navegador aparecerdi: £4- le:///C| /archivos/pecuadernos /Javascript /pagina2.htm: eImny: NTT] eee ol) File Edit View Go Communicator Help Irala a al file: ///C|/awes/Javascript/HTM pagina. htm os So? Si se inserta una instrucci6n JavaScript en la etiqueta del enlace, la parte correspondiente del archivo sera parecida a la siguiente: : Ir a la Entonces dijimos que la funcién hoa se ejecutaba por medio de determinadas acciones. Por otro lado, el comando onboad era necesario. Los comandos de este tipo (los comandos que estén integrados en el cédigo fuente HTML y ejecutan una funcién 0 un comando en determinadas acciones) se denominan controladores de eventos, Todos los controladores de eventos empiezan con on.. . .. El controlador de eventos onLoad que utilizamos en el ejemplo significa, por ejemplo, “al cargarse”. Debe ir seguido por un signo de igual y, después de éste, los comandos JavaScript que se desea ejecutar, entre comillas. A Continuacién presentamos los controladores de eventos més importantes. onLoad Enel capitulo anterior ya hemos tratado este controlador de eventos, en el programa Hola mundo. Se activa durante la carga de una pagina HTML. onUnload «8 la pareja de onboad y se activa cuando se cierran las péginas HTML. El ejemplo siguiente es un derivado del programa Hola mundo. Cuando salimos de la pagina se visualiza el mensaje “Hasta pronto”, Esto puede producirse, por ejemplo, cuando se activa un vinculo. Si el vinculo de nuestro ejemplo funciona, deberd crearse una nueva pigina HTML, que en este caso serd la pagina2 -htm. Desde aqui puede ir a una pdgina distinta. 13 Los controladores de eventos ‘Cuando salimos de la pagina, el resultado se visualiza de este modo en el navegador: nn Desde aqui puede ir auna pésina ditinin. \, Hosta prorto [er] er Reading file Te a we ewe | 4 onMouseOver El controlador de eventos onMouseOver es sin lugar a dudas el mas empleado. Se utiliza en el inte- rior de una etiqueta de enlace y se activa cuando el ratn pasa por encima de la zona del enlace. Un ejemplo de este evento es la declaracién de enlaces que presentébamos en el capitulo anterior. onMouseOut onMousedut es la pareja de onMouseOver. Si, al producirse un evento onMouseOver, aparece escrito un texto en la linea de estado, éste deberd desaparecer también cuando el ratén salga de la zona del enlace. En el capitulo anterior hemos utilizado también el evento onMouseOut para la declaraci6n de vinculos. onFocus Los controladores de eventos que presentamos a continuacién pertenecen a un grupo de controladores de eventos que son muy titiles para los formularios. El e6digo HTML de los formularios se explica por si mismo (si desea dedicar el menor tiempo posible a este aspecto, busque un libro especializado sobre lenguaje HTML adecuado a sus necesidades). onFocus significa “al colocar el cursor sobre este elemento”: el controlador de eventos se utiliza en los campos de entrada compuestos por una o varias Ifneas, as{ como en las tablas de busqueda, para ve- rificar, por ejemplo, si se han introducido por error caracteres no validos en los c6digos postales. En el ejemplo que proponemos suponemos que nos encontramos ante un usuario idiota, al que informamos a través de la linea de estado que ha colocado el cursor sobre uno de los tres elementos del formulario. Es necesario precisar que, en este caso, la funcién mensaje es invocada por un parémetro de texto. Esta funci6n hace que se visualice el pardmetro que se le ha asignado en la linea de estado y funciona, pues, de forma andloga al programa de declaracién de vinculos, El cédigo es parecido al siguiente: f Los controladores de eventos 14

stextarea rows=2 cols=20 wrap=virtual onFocus="mensaje(‘campo de texto de varias lineas')"> Punto 1 Punto 2 Punto 3

e mensaje('campo de texto de una sola Si el visitante sitda el cursor sobre el campo de seleccién, se visualizaré lo siguiente: Ha colocado el cursor sobre el campo de seleccidn! di onBlur shes onBlur es la pareja de onFocus. Este controlador de eventos se aplica en los mismos elementos, es decir, los campos de entrada que tienen una o varias lineas y las listas de selecci6n. Se activa cuando el elemento pierde el foco (zona de un cuadro de didlogo en la que se introducira la informacién), es decir, desde el momento en que hacemos clic en otro elemento con el rat6n. Su aplicaci6n corresponde a la del evento onFocus. Para no tener que reproducir el cédigo fuente integro, a continuacién indicaremos ‘inicamente las modificaciones que se han efectuado en relaciGn con el programa anterior: La linea: window.status="Ha colocado el cursor sobre el " + campo + "I" debe reemplazarse con: window.status="Ha salido del " + campo + "!". Los tres controladores de eventos onFocus deben modificarse por onB1ur. El conjunto aparecer4 entonces en el navegador de esta forma:15 Los controladores de eventos ieee Elle Edit View Go Communicator Help El foce esté aquil (peer rc Amer eo oP oe ae] Ha salide del campo de texto onChange Este controlador de eventos se desencadena de la misma forma que onB1ur, es decir, tan pronto como se sale de un campo de entrada (siempre que se haya modificado el valor del campo). En lo que concier- ne a las listas de seleccién, este evento se desencadena por sf mismo cuando se modifica un valor. Te- niendo en cuenta las similitudes con el evento onB1ur. podemos utilizar como ejemplo una modifica- cin del programa onBlur: Las tres apariciones del controlador de eventos onBlur deben reemplazarse con onChange yél texto “salido de1” que se visualiza debe sustituirse por “modi ficado el” d Una vez que el c6digo fuente ha sido guardado y visualizado por el navegador, y tras modificar el cam- po de entrada y salir del mismo, el resultado ser4 similar al que mostramos a continuaci6n: Tit Efrem File Edit View Go Communicator Help. jAntes, este campo rt vets Borg ot onClick ,..., onClick se activa cuando se hace clic en un elemento de formulario. Puede tratarse de un bot6n de opcidn o de una casilla de verificacién, pero también podria tratarse de un bot6n para enviar, del bot6n para borrar o de un bot6n personalizado. En el ejemplo que ponemos, debe aparecer un mensaje cuando hacemos clic en un elemento, que indicaré el elemento que se ha accionado. El cédigo fuente seria como sigue: Ha modificado el campo de texto de verias lineas! oo we aeLos controladores de eventos 16

0pcién 1
0pcién 2
Check-Buttoncbr>

Radio" onClick="mensaje('botén de "mensaje('botén A continuacién se muestra el resultado obtenido en el navegador al hacer clic en el botén de opcién Op- cin 2: an} © Opeién 1 necho clic en el bottn de opcién 21 © Opcién 2 © Check-Button Emiar | _ Restablocer = nl al Document: Done ee SOP | 4 javascript En realidad, también podriamos utilizar el evento onCLick en los enlaces; por ejemplo, del modo que indicamos a continuaci6n: jEsto es un enlace! Teniendo en cuenta que en este tipo de enlaces a menudo se deben ejecutar instrueciones JavaScript, pe- 0 la pagina no debe modificarse, existe otro evento para los enlaces: javascript (aunque en reali- dad no se trata de un controlador de eventos, ya que no comienza por on. . «). El c6digo del ejemplo que mostramos puede insertarse en el ejemplo anterior, antes de : texto de un vinculo Javascript: mensaje(‘enlace’) onSubmit Este controlador de eventos se utiliza al enviar un formulario. Por lo tanto, tiene la misma funcién que elevento onClick del botdn de envio. En este ejemplo concreto, el evento onClick de la linea oe ae we GD Ae "Enviar" onClick="mensaje(‘botén de puede suprimirse, de modo que tenga este aspecto: El siguiente complemento debe introducirse en la etiqueta Form:

El resultado seguiré siendo el mismo. Con todo esto, se puede decir que ya conoce los controladores de eventos més importantes. Existen mu- cchos otros controladores de eventos. En este manual no se describirdn todos, ya que de otro modo adqui- rirfa unas dimensiones desmesuradas. Sin embargo, puede encontrar informacién relacionada en la pé- gina de suplemento de este manual: www. pe-cuadernos.coma Las funciones 18 Las funciones En el momento de activarse, un controlador de eventos ejecuta una funcién. Puede tratarse de una fun- cin predefinida. De este modo, Ia visualizacién de un mensaje, por ejemplo, puede estar integrada en la etiqueta Body : Elinconveniente de estas funciones predefinidas es que no pueden ejecutar més de una accién a la vez. Cuando deben ejecutarse varios comandos JavaScript al actualizar un evento, debemos definir una fun- cién conereta con esa finalidad. Tal como ya hemos practicado anteriormente, esto se produce en el en- cabezado del archivo HTML. Retomemos ahora nuevamente el programa “Hola Mundo” (a continua- cién mostramos el conjunto de su encabezado): Siempre deberd utilizarse la palabra clave function. Un espacio precede el nombre de la funcién (en nuestro ejemplo, hoa) que, aunque es de libre elecci6n, debe respetar la convencién de nombres de Ja- vaScript y, mas exactamente, las palabras reservadas (vea la pégina 62). A continuacién debe haber un paréntesis inicial (. En todo ello, lo primordial es determinar si deben asignarse pardmetros a la fun- cin, es decir, si se utiliza (como ocurre en el ejemplo) el texto que se visualizard o se utiliza otro valor. Si éste no es el caso, deberemos colocar un paréntesis de cierre ) inmediatamente después del paréntesis de apertura. Si, de lo contrario, deseamos utilizar parémetros, los introduciremos en variables, a las que deben atribuirse nombres, A elegir los nombres, tenga en cuenta las mismas indicaciones que al elegir el nombre de las funciones. En el ejemplo que mostramos, incluimos un parémetro con el nombre sa- ida. Si deben utilizarse muchos parémetros, estos se separarén mediante comas. En este caso, la pri- mera linea de la funcién podria escribirse del siguiente modo: function hola(salida,otro_valor) { Todo el contenido de la funcién, es decir, el conjunto de comandos que deben ejecutarse en la misma funcién, debe introducirse entre las Haves ({ y }). La funcién la definiremos a continuaci6n. En este ejemplo, la funci6n es invocada del siguiente modo: 3 eQué tipo de ordenador utiliza? f

La variable global oxdenador se declara en el encabezado y se inicializa con el valor desconoci - do. El usuario hace clic en un bot6n. El tipo de ordenador se escribe en la variable. Haciendo clic sobre el tercer bot6n se genera la visualizacién del mensaje correspondiente. Esto da lugar a la imagen que mostramos a continuaci6n: {Qué tipo de ordenador utilize Utiliza un PC. PC] Mac] _Yolosel (Document: Dane24 Las operaciones matematicas Las operaciones matematicas Ademis de las variables y las funciones, existen las operaciones mateméticas, que representan otro ele- mento bésico para la programacién en JavaScript. Pero no es algo més complicado que lo anterior. Sélo es necesario que comentemos las operaciones aritméticas basicas y algunas particularidades. Si desea realizar una operaci6n, necesitard una variable en la que el resultado aparezca escrito al que aqui Ila- maremos resultado- y, en la mayorfa de los casos, otras variables que, por ejemplo, deberdn su- arse (en nuestro ejemplo, a y b). Todas las operaciones se pueden realizar con mimeros enteros y fracciones decimales. Los niimeros decimales deben representarse con un punto (y no con una coma). Suma : resultado a+b b Resta: resultado Multiplicacién : resultado +b a Division: resultado = a / b Valor redondeado de un entero: = Math.round(b) Existe otro orden de operaciones en las que s6lo tiene importancia una de las variables: Sumar el valor 1 a las variables (Ia funcién equivale aresultado = resultado + 1): resultado++ Restar el valor 1 a las variables (la funci6n equivale a resultado = resultado - 1): resultado-- Las funciones de estas operaciones saltan a la vista. Vamos, sin embargo, a mostrar un pequeiio ejem- plo préctico que le permitiré, por medio de la manipulacién del cédigo fuente, probar también otros ti- pos de célculos ademés de la simple multiplicacién. que utilizamos aqui. El programa indica cudntos se- gundos tiene un afio, Es evidente que nuestro objetivo no es simplemente escribir el niimero en el archi- vo HTML; definiremos una variable segundos, a la que atribuimos el valor 365*24*60*60, es decir, el mimero de dias que tiene un afio multiplicado por el niimero de horas que tiene un dia, multipli- cado por el nimero de minutos que tiene una hora, multiplicado por el nimero de segundos que tiene un minuto, A continuacién mostramos el resultado, El c6digo fuente seria el siguiente : Un afio tiene segundos Las operaciones matematicas 22 He aqui el resultado que aparece en el navegador: = ed File Edit View Go Communicator Help Un afio tiene 31536000 segundos oe Bocument: Bone See Es evidente que un ejemplo tan simple podria sustituirse perfectamente por la visualizaci6n de la frase “Un aiio tiene 31536000 segundos” en el archivo HTML. Sin embargo, més adelante introduciremos ejemplos en los que los cdlculos se realizan a partir de acciones y datos introducidos por el usuario de la pagina.23 La ejecuci6n repetitiva La ejecucion repetitiva En todos los lenguajes de programacién a menudo resulta til utilizar determinadas instrucciones de forma consecutiva. Los comandos que permiten la ejecucién repetitiva son idénticos en casi todos los lenguajes de programacién: se trata de for y whi Le. Cada comando se acompafiaré con un ejemplo explicativo. Los bucles con for Supongamos que deseamos publicar un cuadro que contenga todos los ntimeros del 1 al 100. Podemos calcular el conjunto de valores con la ayuda de una calculadora e insertarlos en un cuadro o bien utilizar JavaScript En Jo que concieme a la variante con JavaScript ~que, por otro lado, requiere bastante menos c6digo fuente,— necesitaremos la funcién siguiente: function cuadrado() { for (var i=; ic=100; i++){ document .write ("") document .write(i) document .write("") document .write(i*i) document .write ("") d d Lainstruccin for (var i=1; i<=100; i++) { abreel bucle. for (es obligatorio. Como todavia no hemos definido ninguna variable numérica, a continuacién aparece vax i. Sila variable ya se hubiera declarado con anterioridad, aqu{ slo tendrfamos 4 =2. Esto asigna el valor inicial de esta variable, después del cual es necesario un punto y coma. La parte siguiente de la instrucci6n es la con- dicién -en nuestro ejemplo, el bucle se ejecuta durante todo el tiempo mientras 4 sea inferior o igual a 100 (d<=100). Nuevamente, introducimos un punto y coma. En la mayorfa de los casos, como en el que hemos mencionado arriba, la variable numérica aumenta de un ciclo a otro del bucle ~debido a que tenemos i++. La llave indica el inicio del bucle. Va seguida por las instrucciones que deben ejecutarse consecutivamente. La primera instrucci6n que aparece provoca la apertura de una linea y una celda de una tabla, Acto seguido, se escribe la variable numérica en dicha tabla, se cierra la celda y se abre una nueva celda. La potencia al cuadrado de la variable Numériea se visualiza en la tabla y, en tltimo lu- gar, la celda de la tabla y la Iinea se cierran, La llave indica el fin del bucle. Esta funcién tiene los siguientes efectos: se crea una Iinea para cada uno de los nimeros que van del 1 al 100, El niimero se coloca en la primera columna y su cuadrado en la segunda, ‘Naturalmente, antes es preciso abrir una tabla en el archivo HTML. El cédigo fuente en su conjunto se- 14 parecido a este:La ejecuci6n repetitiva cuadrado() 24 El resultado que se obtiene en el navegador es similar a este. Teniendo en cuenta su tamafo, cargar una tabla asf puede requerir algiin tiempo, que puede ser considerable si se trabaja con ordenadores un poco antiguos: me ee File Edit View Go Communicator Help SREP Booument: Bone a De25 La ejecucién repetitiva Los bucles con while El bucle while presenta muchas similitudes con el bucle for. Sin embargo, no tiene ninguna variable Numérica ni ninguna operaci6n que modifique estas variables. Se ejecuta simplemente hasta que la condicién introducida deja de ser verdadera. Su ambito de aplicaci6n es casi idéntico al del bucle for: se utiliza cuando una variable numérica ya va acompafiada por un valor; por lo tanto, en el inicio del bucle no debe asignarse ningiin valor fijo a esta variable. Utilizaremos nuevamente los cuadrados como ejemplo. La funci6n en este caso sera la siguiente: function cuadrado(){ i=45 while (i<=100){ document .write ("") document .write(i) document .write("") document .write(i*i) document .write("") ist > En el inicio de la funcién, el valor de la variable numérica se fija en 45. En otros ejemplos, este valor de partida se puede extraer de un formulario, por ejemplo. La condicién que se debe cumplir para que se ejecute el bucle se indica entre los paréntesis de la instruccin while. Como el valor de la variable numérica tiene que ser constante, debe modificarse dentro del bucle wh4 Le. De esto tiltimo se encarga la instrucci6n i++ . A continuacién mostramos todo el c6digo fuente —la visualizacién que se obtiene en el navegador se parece a la del ejemplo anterior, s6lo que la lista empieza en el valor 45 : . La ejecucién repetitiva 26

En lo concerniente a los bucles for y while, al programarlos debemos tener cuidado de no crear nin- gin bucle infinito. Este podria ser el caso cuando la variable numérica no se modifica en nada, cuando es igual al valor final después de la ejecucién de operaciones matemiticas 0 cuando en el interior del bucle se asigna un valor fijo a esta variable. A menudo, la tinica forma de remediar estos bucles infini tos es el método “brutal” (Control+Alt+Supr 0 Comando+Alt+Esc en Mac), ya que el navegador queda bloqueado. Para volver a iniciar el navegador, en ocasiones es necesario reiniciar el ordenador. Esto significa que se debe proceder con la maxima prudencia en la programacién de bucles. Si el nave gador da un fallo mientras esté en linea y examina el sitio Web, probablemente ser4 victima de ello du- rante un rato considerable.27 La ejecucién condicional La ejecucion condicional Otro elemento importante de JavaScript es la ejecucién condicional, el comando i £. Las paginas si- guientes le mostrarén que este timo comando es uno de los mas utilizados. El ejemplo que incluimos abajo lo explica. En funcién de la hora del dia, el navegador debe dar la bienvenida al usuario del sitio Web de distinta ‘manera: por ejemplo, si son las 19 horas, se le saludard con la expresién Buenas noches. Para hacerlo es necesario el cédigo fuente siguiente: Aqui apareceré el texto. >La ejecucién condicional 28 Las dos primeras Iineas de la funcién graban el némero correspondiente a la hora actual en la variable hora. Esto funciona exactamente igual que en el ejemplo “;Qué hora es?” que hemos mencionado en las primeras paginas de este manual, La variable hoa aparece en siguiente lugar, acompafiada por el mensaje “Saludos, vigilante de la noche!”. Entonces vienen las instrucciones 4 £. La primera instruc- cin 4£ es obligatoria. Le sigue la condicién, entre paréntesis, cuyo cumplimiento permite ejecutar los comandos de la parte 1£, Para lo que nos interesa aqui, supondremos en este caso son mas de las 6. La ave representa el inicio de los comandos de Ja parte 4£. En la linea siguiente, el saludo se transforma en “Feliz mafiana!” y la llave pone fin a los comandos if. Entonces, ;e6mo funciona? En primer lugar, el saludo se predefine como la expresién “Saludos, vigi- lante de la noche!”. Si es més tarde de las 6, el saludo se convierte en “Feliz mafiana!”. Si ya son més de las 13, serd “Buenos dias!” y asf sucesivamente, Para terminar, se visualiza el saludo. Si sucede que, como de costumbre, he vuelto a pasar la noche estudiando, el navegador me saludaré asf: File Edit View Go Communicator Help jSaludos, vigilante de la noche! Aqui aparecers el texto. cE Bocument: Done ee SO ee) 4 Este programa puede incorporarse tal cual en el sitio Web. Sin duda no es tan espectacular ni tan im- pactante como Jo hacen, por ejemplo, algunas animaciones, pero permite darle un toque personal.29 Los objetos estandar Los objetos estandar Un objeto es un conjunto de funciones y variables. En JavaScript, los objetos estindar ya estén predefi- nidos. El comando document .write ("Bla bla" )-que ya conocemos— puede ser una funcién del objeto document, por ejemplo. El comando alert ("Bla bla") es una funcién del objeto window, ya que es una extensién de window. alert ("Bla bla"). Elcomando docu- ment . bgColor, del que todavia no hemos hablado, es una variable del objeto document « Por Jo tanto, una funcién o una variable de un objeto estindar se indica siempre con el nombre del ob- jeto, un punto y el nombre de la funcién o variable. Existe un gran niimero de objetos estndar que no podemos incluir aquf de forma exhaustiva, Nos limi- taremos a mencionar los més importantes. document El objeto document: agrupa todas las funciones y variables que estén relacionadas con el documento HTML. Como este objeto abarca en si mismo también muchas funciones y variables que nos serfa im- posible tratar aquf individualmente, nos limitaremos nuevamente a mostrar lo esencial: Los colores del documento JavaScript permite acceder a los pardmetros de color de los documentos HTML. Se puede acceder a los colores del texto, del fondo y también a los colores de los enlaces que todavia no se han utilizado, los que ya se han utilizado y los enlaces activos. Desgraciadamente, el acceso a estos colores no funciona a a perfecci6n con todas las versiones de los navegadores y especialmente en Netscape, que todavia deja mucho que desear. En el ejemplo de la aplicacién siguiente, los distintos colores han de poder cambiarse haciendo clic con el rat6n, Si se utiliza Netscape s6lo puede modificarse el color del fondo, pero Internet Explorer de Microsoft tampoco funciona siempre a la perfeccién. En la préctica, las posibilidades de manipulacién de los colores mediante JavaScript se utilizan tinicamente para cambiar el color del fondo. Vea cual seria el cédigo fuente correspondiente al ejemplo que hemos descrito: 3 He aqui un texto normal.
Todavia no he visitado la pégina 2.
Los objetos esténdar 30 Ya he visitado la pdgina 3.
Acabo de hacer clic en este enlace.

Cambio del color He aqui como se visualiza la pantalla antes de hacer clic en el enlace “Cambio del color”: File Edit View Go Communicator Help He aqui un texto normal. Todavia no he visitado la pagina 2. Yahe visitado Ja pasi ‘Acabo de hacer clic en enlace. Cambio del color = wt file: //C| /kw/es/iavascriptHT™M1_fpaginad.htm ee ee Teniendo en cuenta la mejor funcionalidad de Internet Explorer de Microsoft, vea abajo el resultado obtenido en este navegador tras activar el enlace “Cambio del color”: File Edit View Go Communicator Help He aqui un texto normal. Todavia no he visitado Ja pévina 2. Yahe visitado la pésina 3. Acabo de hacer clic en Scie, gulace. Cambio del color a file:///C|/kw/es/SavescriptHTM_fpaginad htm 3 PD Propiedades dentro del documento En un archivo HTML existen tres constantes de tipo texto que mediante JavaScript tinicamente pueden leerse, pero no modificarse. Estas representan la direccién URL del archivo a partir del cual se ha Ia- mado al archivo actual (document . referrer), la direccién URL del archivo en si (document . location) y el titulo del documento actual (@ocument . tit Le). El siguiente ejem- plo hace que al cargar la pagina se visualice un mensaje que contiene tres constantes: Contenido de la pagina El mensaje se visualizard en el navegador de esta forma: Vlene de file: ///C| kw /es/Javascript/HTML/983from htm y se encuentra en file: ///C| /kw/es/javascript{HTML/963.htm. El titulo de este archivo es: Mi pagina JavaScript Aceptar = Document: Done Me a PM |Z En un primer momento, esta aplicacién puede parecer poco iitil. Sin embargo, las secuencias de coman- dos (o scripts) de este tipo pueden resultar muy titiles cuando, por ejemplo, deseamos saber si los usua- rios provienen de un sitio extemo o del mismo sitio Web.Los objetos esténdar 32 Imagenes dentro del documento Si navega regularmente por Internet, probablemente ya habré visto un efecto que se utiliza con frecuen- cia: los enlaces en forma de imagenes en los que el color cambia cuando el puntero del ratén pasa por encima. El secreto de estos cambios de color es el siguiente: la imagen en la que est situada el enlace simplemente se sustituye por otra imagen. El objeto estindar documento es, también aqui, el respon- sable de la gestién de estas imagenes. En el c6digo fuente HTML debe asignarse un nombre a cada una de las imagenes que producen este efecto. El resultado podria ser, por ejemplo: De este modo se establece la variable document . imagen. src, a la que se atribuye el grafico imagen1.gif. Posteriormente, debemos crear una segunda imagen del mismo tamaiio, destinada a sustituir la primera imagen cuando se produzca el contacto con el puntero. El valor de docu- ment . imagen . src se puede modificar, lo que hard que cambie la imagen. Entonces pocemos pasar a asignar, de forma muy simple, otro archivo de imagen, por ejemplo de esta forma: document .imagen.src="imagen2.gif" Esto puede funcionar también en el PC de origen. Sin embargo, la realidad de la Web muestra que plantea algunos problemas: el navegador sdlo exige la segunda imagen cuando el ratn est en contacto con Ia imagen inicial. Pero para esto los ingenieros de programacién también han encontrado una solu- cién: cuando se carga el documento se crea una nueva imagen que no aparece representada en el nave- gador. Esto es posible mediante el c6digo siguiente: sustitucion-new Image sustitucion.src="imagen2.gif” Para conservar también la imagen original en la memoria activa, proceda de la misma forma. El cédigo fuente completo deberd ser como este: imagen" sr imagenl.gif">33 Los objetos estandar Comencemos dando algunas explicaciones sobre el c6digo fuente. El cddigo fuente JavaScript completo se ejecuta al cargar la pagina. Este hace que se carguen los datos de las imagenes imagenl.gif e Amagen2 gf como se ha descrito arriba, Cuando el puntero entra en contacto con la imagen, ésta es sustituida mediante onMouseOver, mientras que onMouseOut restablecerd la primera imagen cuando el puntero salga del campo de la imagen. Si el ratén no toca el enlace, la viswalizacién en el navegador sera parecida a esta: Saeed [- oT] file Edit View Go Communicator Help inactivo ne Document: Done % i oP we) 4 Si el puntero del rat6n se coloca sobre la imagen, se genera la imagen siguiente: File Edit View Go Communicator Help ACTIVO én o> file: (/C|AcwifesfiavascripyH™M es 3 Esta aplicacién se puede incorporar tal cual en un sitio Web. Si desea colocar varias imagenes de este tipo en una misma pagina deberd elegir, como es natural, un nombre distinto para cada una de las im4- genes. De otro lado, como ilustraremos en el siguiente ejemplo, una imagen puede aparecer también en varios lugares. Una flecha deber4 indicar sobre qué enlace de la lista se encuentra el puntero. Para ello se vi- sualiza una tabla que contiene dos columnas y, en nuestro caso, tres lineas, En las celdas de la derecha apareceréin las imagenes que tienen nombres distintos, y a los que se atribuiré el mismo archivo de ima- gen. En las celdas de la izquierda se establecen los enlaces que modifican una imagen cuando se hace contacto con el ratén, como en el ejemplo anterior. En este caso, sin embargo, la imagen se cambiar sin que se haya colocado un enlace detrés. Para ello, iinicamente es necesario indicar el nombre de otra imagen (en nuestro ejemplo, el nombre de la imagen que aparece en la celda vecina). Para que sea més fécil comprenderlo, he aqui las dos imagenes activo.gif e inactivo.gif que deben tener el mismo tamafio: ¢ activo.gif a inactivo.gifLos objetos estandar 34 El c6digo fuente es el siguiente;

Ir a la pag. 3

Ir a la pag. 2
Ir a la p% 4

El principio se extrae del ejemplo anterior, cuyo funcionamiento ya hemos explicado, He aqui el resul- tado que obtenemos en Netscape: 2p File Edit View Go Communicator Help file:///C| Aowjes/iavascripYHTML fpagina3 him | Ss SP35, Los objetos estandar document.frames document . frames es, en realidad, un subobjeto del objeto document, pero, dado que es indepen- diente de este tiltimo, lo trataremos en un capitulo aparte. El objeto document . frames practica- mente se utiliza s6lo para permitir la modificacién de varios marcos con s6lo hacer clic con el rat6n, Por este motivo nos parece conveniente explicarlo mediante un ejemplo prictico: Queremos crear un conjunto de marcos que dividan verticalmente la pantalla en dos partes. La parte de Ja derecha debe dividirse también en dos. El marco de la izquierda debe contener un indice de Conteni- do a partir del cual sea posible hacer clic en varios nombres de animales. Si hacemos clic, por ejemplo, en “Elefante”, deberé aparecer el titulo “Mamiffero” en el marco situado en la parte superior derecha, mientras que en el marco inferior del mismo lado se presentara informacién sobre los elefantes. Si, de lo contrario, hacemos clic en “Cocodrilo”, aparecern “Reptil” y “Cocodrilo” en los marcos correspon- dientes, Para realizar este proyecto, necesitamos antes que nada un conjunto de marcos al que llamare- mos infoanimales.htm: animal_inicio.htm"> Elarchivo especie animal .htm—que no necesita tener otro titulo, dado que se visualiza en un ‘marco- serd parecido a este: Especie animal 'Y este serd el archivo animal_inicio.htm: M&s adelante se visualizaré aqui la informacién relativa al animal. : Los objetos estandar 36 Ahora debemos crear tres archivos que serdn précticamente iguales al archivo espe- cie_animal.htm: mamifero.htm, reptil.htmy pez.htm. Es en estos archivos donde el texto Bspecie animal se sustituye pormamifero, reptilopez. Por otro lado, también necesitaremos algunos “archivos de animales”. Modifique también el archivo animal_inicio. htm. Sustituya el texto por informacién relativa a un animal y cambie el nombre del archivo. Nuestros ejemplos son: raton-htm, elefante.htm, cocodrilo.htm, lagar- to.htm, tiburonblanco.htmy pezrojo.htm. En cuanto al archivo contenido .htm, que contiene el cédigo JavaScript : En él encontraremos los enlaces que remiten a una funcién JavaScript. Pero esto ya lo sabemos; las ins- trucciones serdn parecidas a estas: elefante Las funciones siguientes deben definirse en la parte JavaScript del archivo: function change_frames(archivol, archivo2) { parent .frames[1] .location.hrefsarchivol parent. frames [2] .location-href=archivo2 > Explicacién: el conjunto de marcos se organiza como un Arbol. El archivo principal (aqui infoani- males .htm) ¢s el tronco y los marcos son las ramas. Para pasar de una rama a otra debemos pasar por el tronco. En JavaScript, para pasar de un marco a otro, debemos pasar por el archivo principal. Esto indica la competencia del miembro parent de la instruccién. Para volver a realizar una ramifica- cin en el marco, debemos indicar su indice. Al declarar un conjunto de marcos, el navegador empieza a contar desde 0, es decir, el indice 0 se atribuye al marco de la izquierda, el indice | al marco relativo a Jas especies animales y el indice 2 al marco situado en la parte inferior derecha. En el caso que nos ocu- pa, los marcos 1 y 2 deben modificarse consecuentemente, Podemos acceder a location. href me- diante el nombre del archivo. De este modo, con JavaScript podemos atribuir simulténeamente a los. marcos de la derecha nombres de archivo distintos, que se encuentran dentro de los parimetros ax- chivol y archivo? en la funcién. El c6digo fuente completo del archivo contenido . htm seré parecido a este: mamifero:
37 Los objetos esténdar vatén
elefante

reptil:
cocodrilo
lagarto

pez :
tiburén blanco
pezrojo

He aqui la apariencia que tendrfa inicialmente esta pagina en el navegador al cargarse el archivo 4n- foanimales.htm ear LE ile Edit View Go Communicator Help no | Especie animal elefante reptil: cocodrilo lagarto ‘Mas adelante se visualizar4 aqui la informacién relativa al animal. pez: tiburon blanco: ezrojo lina Document: Done He es BP Gee |gLos objetos estandar 38 Haga clic en "Ratén" con el ratén del ordenador y obtendré Ia imagen siguiente: Mamifero El raton El raton es muy pequeiio pero a pesar de ello es muy répido. Pero igualmente he conseguido cazarlo con mi trampa para ratones. REE! Document: Done 2 oP document.forms Como ocurre con los marcos, al elaborar un archivo HTML cada formulario recibe un indice en el que el navegador empieza a contar partiendo de 0. Pero, en general, es un formulario con el indice 0 el que se utiliza, El objeto forms tiene unas propiedades determinadas: document . forms [0] . length indica, por ejemplo, el nimero de campos de entrada del formulario con el indice 0. En la prictica, sin embargo, no se utiliza mucho. Mucho més importante es un subobjeto de document . forms, con- cretamente document . forms [0] «elements, por medio del cual elements es sustituido por un nombre de elemento. Gracias a este objeto es posible leer y sustituir un formulario en los campos de entrada. Pero para tratar este tema debemos presentar antes un poco de teorfa, dado que los diferentes tipos de elementos se asocian a instrucciones diferentes. En el c6digo fuente HTML, todos los elementos reciben un nombre; en adelante, utilizaremos como nombre Nombreelemento. Campos de entrada de texto La siguiente propiedad puede leer o sustituir el texto actual del campo de entrada: document . forms [0] .Nombreelemento.value La siguiente propiedad lee o coloca en el campo de entrada el texto prestablecido: document .forms[0] .Nombreelemento.defaultValue (ValorInicial) La siguiente funcién selecciona el texto del campo de entrada: document . forms [0] .Nombreelemento. select () La funcién a continuacién, que coloca el cursor en el campo, sin duda se define a partir de todos los ‘campos de entrada, aunque se utiliza casi exclusivamente en los campos de entrada de texto: document . £orms [0] .Nombreelemento. focus()39 Los objetos estandar Botones de seleccién y casillas de verificacién Esta propiedad lee o escribe si se ha seleccionado un bot6n de selecci6n. El indice del botén de seleccién se representa con n ~como es habitual, el navegador empieza a contar a partir de 0. Los valores posi- bles para esta propiedad son 0 (no seleccionado), 1 (seleccionado) u, opcionalmente, los valores fa - se (no seleccionado) y trrue (seleccionado). document . forms [0] .Nombreelemento{n] .checked Por medio de esta propiedad, el valor inicial del bot6n de seleccién se puede leer y escribir (el indice y los valores posibles son los mismos que en la propiedad anterior): document . forms [0] .Nombreelemento.defaultChecked Las casillas de verificacién tienen las mismas propiedades; n representa aqui el indice de un elemento ‘cuando en un mismo grupo se utilizan varios elementos con el mismo pardmetro name. Listas desplegables Las listas desplegables presentan una propiedad por medio de la cwal es posible leer 0 escribir si una ‘opci6n ha sido seleccionada (indice y valores posibles igual que arriba): document . forms [0] .Blementonombre.options[n] .selectedindex El valor value se puede leer o escribir: document . forms [0] .Zlementonombre.options[n] .value aa domicilio El ejemplo a continuacién explica la funcién del objeto document . £orms. Su finalidad es realizar un pedido de una pizza que puede tener diferentes caracteristicas (tamaiio, ingredientes). Al enviar el formulario se deberd visualizar un mensaje que detalla al cliente hambriento la pizza que acaba de pe- dir, He aquf el c6digo fuente, algo largo, de la aplicacién: f Pizza a domicilio

Su nombre:
Su direccién: Dimensiones: pequefia mediana grande
Ingredientes:
caja de cartén
direccion" size=20>

ingrediente">jamén
ingrediente">pepinillo
caja isotérmica

— 4 Los objetos estandar

La parte HTML del documento est compuesta por un formulario de entrada de lo més usual, en el que se obtienen los nombres de los campos. En la etiqueta

aparece la direcciGn de correo electré- nico a la que deberd enviarse el formulario completado —que deberd modificar, ya que es ficticia. Por otro lado, mediante el controlador de eventos onSubmit se asocia el formulario a la funcién con- £irmacion, que se ejecuta al enviar el formulario. En primer lugar, en la funci6n se incluye una variable con el contenido Querido/ Querida. Esta va- riable se prolonga poco a poco mediante una frase que se mostrar en pantalla. Como ya hemos dicho, se afiade primero el nombre y después el texto“, ha pedido una pizza”. Las diferentes selec- ciones permiten determinar el tamafio, los ingredientes y el tipo de embalaje de la pizza, tal como hemos explicado en la secci6n anterior. En tiltimo lugar se afiade la direccién del destinatario. El comando alert permite que se visualice toda la variable en forma de mensaje, constituyendo una frase. En Netscape, este pedido de pizza se confirma de la siguiente forma: Pizza a domicilio Sunombre: ftiguel Pérez Ecinanlenen (Quer ido/Querica Miguel Pérez, ha pedido una pizza mediana con queso, tomate y jamén y pepinillo. Le sera entregada en una caja Isotérmica en la direccién siguiente: C/Informética 99 © caja de carton © caja isotérmica Padido e "Document: Done a Puede ampliar el formulario de la pizza afladiendo otros ingredientes o tipos de paquete, lo cual le per- mitird familiarizarse un poco més con el objeto document . form, También puede insertar otro cam- po de entrada para el domicilio del destinatario, que a su vez deberd figurar en el mensaje. Y también pueden afiadirse botones de seleccién para especificar si el envio debe hacerse por via normal o exprés.La calouladora en euros 42 La calculadora en euros Relacionado con el objeto form, existe todavia otro buen ejemplo que ilustra la forma en que se puede escribir en los campos de entrada de texto por medio de JavaScript. Se trata de una calculadora en euros que convierte en euros todas las monedas europeas, y viceversa. A continuaciGn mostramos el c6digo fuente HTML. No incluiremos ahora la funci6n JavaScript actualizar porque requiere un trata- miento especial.

Calculadora en euros

ATS BEF/LUF DEM ESP FIM FRF IEP ITL NLG PTE corresponde a Euro.
rn Actualizar" onClick="actualizar()*>43 La calculadora en euros Creamos un formulario en el archivo HTML, que contiene dos campos de texto (uno con el total en eu- 10s y el otro con el total en la otra moneda), un campo para la actualizacién y un campo de selecci6n. Mas tarde trataremos las instrucciones onChange.. E] campo de selecci6n contiene todas las monedas que pueden convertirse a euros. El valor value representa el tipo de cambio fijo. Al hacer clic sobre el botén Actualizar o bien al modificar la moneda se ejecuta una funci6n JavaScript ala que llamamos actualizar. Bsta funcién es la encargada de realizar la conversién cada vez que se modifica el tiltimo total -en euros o en otra moneda. Ahora queda claro el significado de la variable a: en el momento en que se modifica un campo de entrada, se modifica también esta variable. Si se mo- difica el valor en euros, se le atribuye el valor 1; de lo contrario, se le atribuye el valor 0. Esta variable necesita la funcién para reconocer cuil es el valor que se ha modificado en wiltimo lugar y que, por tan- to, debe ser convertido. La funcién se inserta de la forma siguiente: function actualizar() { if (a==0){ document . forms [0] .euro.value=Math.round (document . forms [0].total.v alue / document . forms [0] .moneda [document . forms [0] .moneda. selectedIndex].value * 100) / 100 } Af (a==1){ document . forms [0].total.value=Math. round (document. forms [0].euro.v alue * document. forms [0].moneda [document . forms [0] .moneda. selectedindex].value * 100) / 100 } } Su funcionamiento: cuando a tiene el valor 0 se modifica el campo de entrada en euros. Math. round redondea a un ntimero entero. El valor se redondea en el primer campo de entrada, se divide por el valor value de la opcisn del campo de seleccién que est activo (que comesponde al tipo de conversi6n) y se ‘multiplica por 100, Para terminar, el nimero obtenido se divide por 100, La multiplicacién por 100, que nuevamente se redondea y se divide por 100, permite mostrar el resultado con dos decimales. $i a=1, el valor introducido en euros se multiplica de la misma forma con el tipo de conversién; esta parte de la funci6n trabaja de la misma forma. He aqui un ejemplo en el que se muestra en el navegador la equivalencia en pesetas de 9,98 euros: Calculadora en euros 1660) ESP corresponde a|9.98 Euro. Actualizar = a Document: Bone a oP aeLas cadenas 44 Las cadenas En el lenguaje informético, las cadenas (0 strings) representan conjuntos de caracteres. JavaScript cuenta con algunos comandos titiles que permiten modificar las cadenas de caracteres registradas en las variables 0 leerlas una vez modificadas, EI objeto string A continuacién presentamos los comandos més importantes, todos ellos pertenecientes al objeto string: length Esta propiedad se utiliza para leer el ntimero de caracteres que tiene una cadena. El valor xy . length es el niimero de caracteres de la variable xy. Si esta iltima contiene, por ejemplo, el texto “jCuenta el ntimero de letras!”, el valor ser 26. substring Esta funcién devuelve una parte de una cadena de caracteres. $i los 10 primeros caracteres de una ca- dena xy, han de escribirse en una variable 2, el comando serd el siguiente: z=xy. substring (0,9), ya que el recuento ha empezado en 0. toLowerCase Este método pone en mimtisculas todas las letras de una cadena, Para cambiar, por ejemplo, el texto “jMe voy a DORMIR!” registrado en la variable acy por ‘“jme voy a dormir!”, deberemos utilizar el comando siguiente: xy=xy . toLowerCase toUpperCase Esta funci6n transforma Jas mintisculas en maytisculas y funciona del mismo modo que la anterior. Si él contenido de la variable axy debe registrarse en maytisculas en la variable z, deberemos establecer el cédigo siguiente: z=xy . toUpperCase Texto en movimiento En estos momentos, sin duda debe estar preguntandose para qué pueden servir todas estas funciones de cadenas de caracteres. Vea el programa que proponemos a continuacién, a modo de ejemplo, para la vi- sualizacién de un texto en movimiento en la linea de estado del navegador. El cédigo sera parecido a este: jEche una ojeada a la linea de estado! Y asi es como funciona el programa: se declara una variable global texto a la que se le asigna el texto que deberd aparecer en movimiento més adelante. Por otro lado, se declara otra variable a la que aqui hemos llamado visualizacion y se inicializa inmediatamente en el inicio. En el curso de la carga del documento, se invoca una funcién texto_en_movimiento mediante la instruccién on- Load de la ctiqueta Body. Es aqui donde se pide si la visualizacion contiene la cadena de ca- racteres inicio. Este es el caso durante la primera llamada de la funci6n, por lo que el bucle siguiente se ejecuta 140 veces. Se colocan 140 espacios vacios antes del texto de origen. En la linea de estado, el texto se visualiza siempre justificado a la izquierda, Para hacer que se visualice el texto desde la dere- cha, debemos introducirlo precedido por espacios vacfos que se reducirén poco a poco. El mimero ideal de espacios depende de la resoluci6n de pantalla ~debe encontrarse un término medio. La cadena de la variable texto se asigna a la variable visualizacion. A partir de ese momento, la variable texto ya no se modifica més, ya que, si el valor de la variable visualizacion tuviera que modi- ficarse, la instruccién 4£ podria omitirse al realizar Futuros llamamientos de funciones. Se suprime el primer cardcter de la variable vi sua1izacion -en realidad, se vuelve a transcribir la variable con los caracteres que lo componen desde Ia segunda posici6n. En esos momentos se escribe en la linea de estado. Si ya se han suprimido todos los caracteres, vuelve a encontrarse vacfa de todo contenido y se sustituye con el valor de inicio por medio de una instruccién 4£, valor que se registra siempre en la va- riable texto. El comando set Timeout ("texto_en_movimiento()",150) lees descono- cido por el momento: informa al navegador de que debe llamarse la funcién tex- to_en_movimiento al cabo de 150 milésimas de segundo. Asi es como se ven los resultados de la funci6n. 150 milésimas de segundo mis tarde, vuelve a ser lanzada por el navegador, la visualizacién se reduce un cardcter y el proceso se repite hasta que no se visualiza nada, momento en que visuali- zacion recibe el valor de inicio. Y asf es como se repite interminablemente este pequeiio juego, hasta que se carga otra pégina HTML “texto_en_movimiento()"; return true> El resultado obtenido en el navegador es el siguiente:Las cadenas File Edit View Go Communicator Help jEche una ojeada a la linea de estado! a IE FC Barcelona ha ganado 8-1 contra el wb oP Se Este efecto no debemos crearlo en sitios que busquen dar una impresiGn de seriedad, puesto que en este contexto el efecto est bastante mal visto. En paginas privadas 0 de conversaci6n, es perfecto para pre- sentar novedades o para el “chiste del d47 Objetos personalizados Objetos personalizados El objetivo de este capitulo puede hacerse mucho mAs accesible mediante un ejemplo concreto, Deben registrarse los nombres y las edades de varios colaboradores de una sociedad en variables, Para ello, podemos declarar un gran nimero de variables, por ejemplo saez_nombre, saez_edad, go- mez_nombre, gomez_edad, etc. o bien crear objetos. Para hacerlo, necesitaremos antes que nada Ja funcién siguiente: function colaborador (nombre, edad) { this.nombresnombre this.edad=edad > La funcién se invoca mediante el comando var saez=new colaborador ("Jaime Saez" , 43): se crea un nuevo objeto y se le afiaden el nombre y la edad. Posteriormente se acceder’ al nombre con saez.nombre y a la edad con saez.edad. Ademés, podemos declarar objetos personalizados con el comando siguiente: saez-new Object Sus propiedades pueden definirse libremente, por ejemplo de este modo: saez.nombre="Jaime" saez.apellid saez.hobby="futbol~ Saez" Las matrices Una matriz (0 array) es un niimero entero de variables del mismo tipo que se expresan con el mismo. nombre y con un indice. Enel ejemplo a continua (consulte los nombres reservados, pagina 62) “in se declara una matriz nueva nueva puede sustituirse por otro nombre nueva = new Array También se crean una serie de variables, concretamente nueva [1], nueva [2], nueva[3], etc. Pero estas variables deben ser todas del mismo tipo, es decir, nueva [1] no puede ser un ntimero si nueva [2] es un conjunto de caracteres. Mis adelante incluimos un ejemplo de 1a aplicacién de objetos personalizados y arrays, en el capitulo Juego de preguntas y respuestas, pagina 51Trabajar con marcos Trabajar con marcos 48 ‘Todos los ejemplos que hemos visto hasta ahora, incluso las informaciones sobre animales, se limitan basicamente a una sola p4gina HTML. En aplicaciones mas complejas, las variables a menudo deben estar disponibles en varias paginas HTML. Para ello, normalmente se necesitan secuencias de coman- dos o scripts en el lado del servidor, que muchos proveedores no aprueban. Pero hay un pequetio truco que permite acceder a buena parte de estas posibilidades con JavaScript. Para ello es necesario trabajar con marcos. El archivo principal, que no es visible ya que tnicamente contiene un enlace a los archivos inferiores, contiene las variables correspondientes. Aunque se modifiquen los marcos individuales, las variables permanecerén incluidas en el archivo principal. Dado que todo esto es bastante abstracto, a continuacién presentamos un pequefio ejemplo: El archivo principal con el nombre MARCOS.HTM divide horizontalmente la ventana del navegador en dos partes, y en la parte JavaScript se declara una variable global nombre: ff El archivo PUBLICIDAD.HTM, que contiene un banner publicitario, sera asi: El cédigo fuente del otro archivo que agrupa todos los marcos, es decir, el archivo INICIO.HTM, sera asf:49 Trabajar con marcos

jBienvenido a mi pdgina personal!

Introduzca su nombre:

El archivo contiene un formulario, que permite escribir el nombre del visitante, y el botén Continuar. Si se activa este bot6n, se invoca la funcién continuar. Esta coloca la variable en el marco inme- diatamente superior, es decir en MARCOS.HTM, con el contenido del campo de entrada. Una pequefia vi- sin de conjunto para clarificarlo: ‘© parent. se ramifica en el marco inmediatamente superior. * top. se ramifica en el marco més alto del navegador. © frames [n] . se ramifica en el marco inmediatamente inferior con el indice n (consulte también el ejemplo de ta informacién sobre animales). La direccion de la pagina que debe visualizarse se indica mediante 2ocument . location. href Se trata, en este caso, del archivo HTML PAGINA2.HTM. Este archivo tendré el siguiente cédigo fuente:

He aqui la pdgina 2

Y, si, , por desgracia es también la ultima pdgina. : El nombre del usuario registrado en el. conjunto de marcos se visualiza en pantalla. Lo que hemos he- cho, por tanto, ha sido colocar una variable en un archivo HTML y leerla en otro archivo.Trabajar con marcos 5 4s: jfunciona! El navegador muestra lo siguiente: File Edit View Go Communicator Help. Lavo blanco ~ y bien... ~Quien soy? He aqui la pagina 2 'Y, si, Miguel Pérez , por desgracia es también la dltima pagina. on Document: Done 2 so51 Juego de preguntas y respuestas Juego de preguntas y respuestas Ahora vamos a presentar un ejemplo mas importante que se sirve del contenido de la mayor parte de ca- pitulos que hemos visto hasta el momento. Se trata de un juego de preguntas y respuestas que invita al usuario a desplazarse con un coche a través de un laberinto. Hay un campo de salida y un campo de Ile- ¢gada, asi como varios campos de eventos situados entre estos dos. Cuando el coche llega a un campo de evento, se le formula una pregunta. Si la respuesta es correcta, el jugador suma 100 puntos en el conta- dor. Si la respuesta es incorrecta, pierde 40 puntos. Ademés, al inicio de la partida se le retiran 25 pun- tos en concepto de gasolina. Si es demasiado perezoso para escribir la gran cantidad de cédigo fuente necesario, o si se considera un mal dibujante y no quiere disefiar los gréficos, podra descargar todo el c6digo fuente y los gréficos en la secciGn perteneciente a este manual del sitio www. pe-cuadernos.. com. A continuacién presenta- ‘mos las imagenes que se utilizan en el Laberinto y sus nombres. Todos los campos horizontales son campos de eventos. La organizaci6n gréfica estd en sus man¢ | | a | | SALIDA.GIF HORLGE HORLGIF HORI.GIE SD.GIF (horizontal) (horizontal) (horizontal) | (superior derecha) D LLEGADA.GIF ‘VACIO.GIF SLGIF HORI.GIF ID.GIF (campo vacio) | (superior izquierda) | (horizontal) | (inferior derecha) ' s HO ILGIE SD.GF INTERD.GIF HORLGIP SD.GIE (inferior izquierda) | (superior derecha) | (intersecci6n ala | (horizontal) | (superior derecha) derecha) 1 r = = : VACIO.GIF VERTICAL. GIF LaF HORLGIF INTERL.GIF (campo vaefo) (vertical) (inferior izquierda) | (horizontal) | interseccién a la izquierda) 0 = 3 r 4 +34 VACIO.GIF GF HORLGIF * | HORLGIF DOF (campo vacio) | (inferior izquierda)} (horizontal) (horizontal) | (inferior derecha)Juego de preguntas y respuestas 52 A excepcién del archivo VACIO.GIF, deberé crearse una versi6n de todos los archivos donde aparezca el coche. Entonces insertaremos una M delante del nombre del archivo. Por ejemplo, tendremos un archivo MILGIF como pareja de 1.GIF El juego deberd constar de un conjunto de marcos. El laberinto se representaré a la iz- quierda, con el volante del coche a la derecha, alternando con las preguntas, y el ntimero de puntos en la parte inferior derecha. He aqui un archivo en el que aparece el conjunto de marcos, al que llamaremos LABERINTO.HTM: ' BI juego consta en total de 40 preguntas. Encontraré todas las preguntas en el archivo del suplemento JavaSup.zip, labyrinthe.txt.Juego de preguntas y respuestas 54 El archivo es sin duda imponente, aunque relativamente simple de comprender. Todas las variables se declaran en el inicio, ya que el archivo principal no se modifica nunca y por ese motivo las variables se mantienen durante toda la duracién del juego. ‘* puntos suma los puntos del jugador y se inicializa en 0. © xey indican la posicién horizontal y vertical del coche que debe arrancar a partir de la posicién 1/1. * La variable answered cuenta el ntimero de respuestas que el jugador ya ha respondido, Mas ade- lante veremos para qué puede servir esto. Se inicializa también en 0. ‘© La variable campo se declara como matriz (array), mientras que las variables campo [1] a cam- po [5] se definen como campos de datos mediante el bucle for. Existen, por lo tanto, cinco matri- ‘ces que cubren una linea del campo de juego. A continuacién se asigna a las matrices los archivos de imagen correspondientes sin la extensién .GIE. Si la llegada se encuentra, por ejemplo, en la situaci6n 1/2, tendremos una linea campo [1] [2] = “llegada" Acto seguido se crea la matriz pregunta. En nuestor caso utilizamos 40 preguntas. Las preguntas comprendidas entre la pregunta [1] y la pregunta [40] se declaran como objetos mediante un bucle for (consulte el capitulo Objetos personalizados, pagina 47). La propiedad asked se fija siempre en el valor £a1ge, lo cual significa que la pregunta no ha sido planteada todavia. A continuacién, se establecen las propiedad de todas las preguntas. Por motivos de espacio no se han incluido las preguntas de la 5 a la 40. texto es la pregunta, solucion1, solucion2 y solu- cion3 son las opciones de respuesta y respuesta contiene el indice de la respuesta exacta (por ejemplo 1, en el caso de que la soluciom1 contenga la respuesta acertada). También deberé inventar las preguntas 5 a 40 y establecer sus propiedades del mismo modo. Por tiltimo se define el conjunto de marcos. Los comandos de pilotaje deben aparecen en la parte supe- rior derecha y el nombre de puntos en la parte inferior derecha (PILOTAJE.HTM y PUNTOS.HTM). El ar- chivo LABE.HTM es el laberinto propiamente dicho. A continuacién mostramos el més simple de los tres archivos de marcos, PUNTOS.HTM. Muestra la va- riable puntos del conjunto de marcos.

Su resultado:

55 Juego de preguntas y respuestas El archivo LABE.HTM, es decir, el laberinto propiamente dicho, es también muy simple:

Enel cuerpo del archivo HTML se crea una tabla y se invoca la funcién print_1aberinto. Por Ultimo, se cierra la tabla. La funcién se compone bisicamente de dos bucles for. El primero cuenta las Iineas con la variable numérica 4, mientras que el segundo cuenta las columnas con la variable 3. En cada ciclo del primer bucle se abre una columna con document .write (""). Posteriormente se abre cinco veces tuna celda con una imagen. La instruccién 4£ controla que las variables numéricas concuerden con las, coordenadlas del coche -si concuerdan, se escribe una m correspondiente a la imagen modificada en el archive HTML. Después se escribe el nombre del archivo de imagen correspondiente con pa~ rent . campo [4] [4], se completa con la extensiGn .gif del nombre de archivo y se cierra la celda.Juego de preguntas y respuestas 56 El archivo mas complicado es el archivo PILOTAJE.HTM:  

Después de una alineacién vertical en el centro, se vuelve a abrir una tabla en el cuerpo del documento. Esta vez se llama a la funcién print_volante y se cierra la tabla. Para comprender la funcién, en la pagina siguiente presentamos la construccién del volante, en forma de tabla:Juego de preguntas y respuestas 58 hy ‘SUPERIORROJO.GIF IZQUIERDAROJO.GIF | VOLANTE.GIF | DERECHAROJO.GIF WwW INFERIORROJO.GIF Las cuatro flechas también han de registrarse en color gris con el nombre correspondiente (por ejemplo, IZQUIERDAGRIS.GIF). Estos archivos de imagen pueden descargarse también desde el sitio www. pe~ cuadernos.com. print_volante fija en primer lugar los comandos HTML para la celda vacia situada en la parte superior izquierda, ¢ inmediatamente se abre una celda. El nombre del archivo de imagen de la posicién actual del coche se lee en la variable £, a partir de parent . campo [parent .x] [parent .y]. La instruccién 4£ permite controlar si el coche se encuentra sobre un campo a partir del cual tenga derecho adesplazarse hacia arriba. | | significa o; para introducir dos veces el trazo vertical deberd utilizar la combinacién de teclas Alt Gr + 1. Cuando se da el caso, la flecha roja que sefiala hacia arriba se visua- liza mediante un enlace que apunta a la funci6n go (0, ~1) Si el desplazamiento hacia arriba no esta autorizado (¢18e = “si no”, el contrario de i£), se visualiza sin enlace el gréfico gris. La funcién go se describe a continuacién: el primer pardmetro indica el movimiento x (0 cuando el movimiento es ver- tical) mientras que el segundo pardmetro indica el movimiento y (-1 significa un desplazamiento hacia abajo). La tabla se completa de forma andloga, con la imagen VOLANTE.GIF en el centro. La funcién go resta, en primer lugar, 25 puntos del total para la gasolina. A partir de entonees, las co- ordenadas del coche se modifican de acuerdo con la direccién del movimiento. A continuaci6n se visua- liza el archivo LABE.HTM en el marco de la izquierda: puesto que se han cambiado las coordenadas, el coche se encuentra en otra posiciGn, Por iltimo, se comprueba si el coche se encuentra sobre una linea horizontal, es decir sobre un campo de pregunta. De ser asi, el archivo preguntas .htm se coloca en el marco superior derecho. Si, por el contrario, el coche se encuentra en el campo de llegada, se asigna a este marco el archivo 1legada.. htm. De no ser asi, se actualiza el archivo PILOTAJE.HTM, ya que de- bern mostrarse otras flechas. Para terminar, se actualiza el recuento de puntos. PREGUNTAS.HTM es otro archivo algo més complicado: - En el cuerpo, esta vez se invoca la funcién pregunta ()Juego de preguntas y respuestas 60 Acto seguido se comprueba si el mimero de preguntas que ha respondido el jugador es igual al nimero de preguntas existentes. Si es asi, slo se envia una indicaci6n sobre este hecho al archivo PILOTA- JE.HTM por medio de un enlace. asMath. round (Math. random()*39) +1 calcula al azar un nimero entre 1 y 40. Math. random) lige, también al azar, una fraccién decimal entre 0 y 1 y Math. random() *39 un niimero entre 0 y 39. Math . round redondea este iiltimo mimero en un mimero entero, Para obte- ner un nimero entre 1 y 40, es necesario afiadir 1. Esto se repite en el bucle while hasta que se en- cuentra una pregunta que todavia no se ha planteado. El nimero de preguntas planteadas aumenta en 1 y la propiedad asked de la pregunta correspondiente se establece en true. Por iiltimo, se visualiza el texto de la pregunta seguido por un salto de pérrafo. Las tres posibilidades de respuesta se muestran en forma de enlaces que redirigen a la funcién res- puesta con los pardmetros a (indice de la pregunta) y el ntimero de la respuesta seleccionada. La funcién respuesta controla si la respuesta seleccionada es la respuesta verdadera. Si es correcta, aparece un mensaje y se suman. 100 puntos al contador; en caso contrario, se restan 40 puntos y tam- bién se visualiza un mensaje. A continuacién, los comandos de pilotaje vuelven a aparecer en el marco superior derecho y se actualiza el niimero de puntos en el marco inferior derecho. El tiltimo archivo utilizado se llama LLEGADA.HTM:

jFelicidades!

Ha llegado al final con puntos.

_parent'">Volver a jugar JAVASCRIPTES61 Juego de preguntas y respuestas Indica al vencedor el nimero de puntos con Jos que ha alcanzado la meta y Je propone empezar una nueva partida. He aqui la imagen del navegador durante Ja partida; Su resultado: 225 Puede probar el juego completo en wmv. pe-cuadernos..com.El explorador 62 El explorador EI proyecto Después del juego de preguntas y respuestas, que es mas que mada una aplicacién destinada a divertir al navegante, para terminar este manual vamos a presentar una aplicacién algo més seria, Servird para re- solver el problema de las paginas Web en las que la falta de claridad crece a medida que aumenta el niimero de paginas. Aunque se creen botones con las inscripciones Siguiente o Volver, cuando uno empieza a hacer clic aqut y alld es muy probable que pierda ripidamente a vision de conjunto, Para solucionar este problema a menudo se utilizan marcos: en la parte izquierda de la ventana del na- vegador aparece un marco con los enlaces a las demas paginas y en el marco derecho se representa la pagina ya seleccionada. Esto funciona bien cuando el niimero de paginas por las que el usuario se des- plaza es un mimero de una o dos cifras (en cuyo caso debe tratarse de un niimero muy elevado). Si el nimero de paginas es mucho mayor, hay otra forma de solucionar este inconveniente, También de- beremos utilizar dos marcos, y presentar los contenidos en el marco de la derecha, mientras que en el marco de la izquierda se mostrara una estructura arb6rea idéntica a la del explorador de Windows. Al abrirse y cerrarse una carpeta después de otra, las pAginas que el usuario considera importantes estén visibles y son, por tanto, de facil acceso. Para que pueda hacerse una idea més clara del proyecto, pre- sentamos a continuacién una imagen de la pagina terminada, print_explorador() 0000FF"> La funcién print_explorador se encarga de toda la construccién de la pégina. Para poder imitar grficamente la estructura del explorador son necesarias las imégenes siguientes (con ‘un nombre de archivo adecuado en cada caso). (También pueden descargarse desde el sitio Web: www.pe-cuadernos.com). 8 a DRGASEOF —EACERRADAGR.-BXARCHG EXFIN.GIF EXMENOS.GIF — EXABIERTA.GIF cm POSOF VERTICAL EXWACIAGE Para garantizar que estas imagenes se visualizan bien en el navegador unas después de otras y sin inter- valos, es necesario crear una tabla para cada linea. Esto podria parecer complicado en un primer mo- ‘mento, pero, que yo sepa, no hay ninguna otra solucién que sea compatible con Netscape y Internet Ex- plorer al mismo tiempo. La funcién siguiente, que se invoca al construir la pagina, debe insertarse en la parte JavaScript del archivo.El explorador 66 function print_explorador () { var i=0 while (parent.ex[i].level!=-1){ if (parent .ex[i] .level<=max) { document .write("") if (parent.ex[1].level==0) { exbase() > else if (parent.ex[i].filename: document .write("") exvacia(i) excarpeta (1) document .write("") , else( document .write("") exvacia(i) exarchivo(i) document .write("") ) document .write ("") } ise , > Acto seguido, se establece una variable numérica que cuenta las lineas del explorador con var Conwhile (parent.ex[i] .level!=-1), el bucle se ejecuta hasta que se llega a la dltima It- nea. Por ese motivo es necesaria esta linea final en la que se ha establecido un nivel de -1. A continuacién se comprueba si el nivel es inferior o igual al contenido de las variables max. Si una carpeta estd cerrada, la variable max se colocard a su tiempo en el nivel de la carpeta correspondiente, De este modo se evita que se visualicen en esta linea archivos y carpetas inferiores (que tendrfan un ni- vel més elevado). Si se debe mostrar una linea, en primer lugar deberemos abrir una tabla, Después se comprueba de qué tipo de linea se trata. Si el nivel es 0, se tratard de la carpeta principal y por consiguiente se Hamaré a la funcién exbase. Si, por el contrario, es una carpeta, el nombre del archivo asociado estard vacfo y se invocaré la funcién exvacia. Esta funcién se ocupa de representar los campos vacfos que preceden a las carpetas, de mo- do que la carpeta se desplace suficientemente hacia la derecha. Las lineas verticales que llevan a otros archivos y carpetas también las traza esta funcién, Después se invoca la funcién excarpeta, que di- buja la carpeta. El argumento i permite a la funcién conocer en cada momento de qué linea se trata exactamente, Los campos vacios, las lineas verticales y la carpeta se colocan en una columna de la tabla que es tam- bién la tinica de que consta dicha tabla y que ya se ha abierto y cerrado en la funcién print_explorador.87 El explorador En todos Jos demés casos, lo que tendremos ser una linea que representa un archivo, Las llamadas a funciones son parecidas a las lineas de las carpetas que hemos descrito arriba, sélo que en esta ocasién se invoca exarchivo en lugar de excarpeta. Para terminar, se cierra la tabla y se aumenta la variable numérica para continuar en la Iinea siguiente. ‘Veamos ahora las distintas funciones necesarias, empezando por extbase: function exbase(){ document .write(" " + parent.ex[0].descripcion + "") if (parent.ex[0] .opened==false) { max=0 > else{ max=1000 > > Esta funcién es invocada ahora por la primera Ifnea. Dibuja el icono de la carpeta principal en una celda de la tabla y utiliza para ello la funcién unopen, que permite abrir y cerrar carpetas, y de la que habla- remos més adelante. El nombre de la carpeta principal (parent .ex[0] .deseripcion) se escribe después en una celda nueva que crea un vinculo a la pagina principal (parent .ex[0] . filename) del marco derecho. Las etiquetas de fuente sirven para utilizar una escritura adaptada al explorador. Mediante el comando i £ podemos determinar si la carpeta principal esta abierta o cerrada, En el se- gundo caso, se atribuye el valor 0 a la variable max, de modo que no se visualice ninguna carpeta y ningiin archivo inferior; en el primer caso, max recibe un valor suficientemente alto para permitir la vi sualizacién del conjunto de archivos y carpetas. Consideremos ahora excarpeta: function excarpeta(i){ var imagenl="exabierta.gif" var imagen2="exmenos.gif" if (parent.ex[i] .opened==false) { imagen1="excerrada.gif* imagen2="exmas.gif" } document .write("anbsp;" + parent.ex[i].descripcion + "") if (parent .ex[i] .opened==false) { max=parent .ex [1] .level } else{ max=1000El explorador 68 > ) Los nombres de archivo de las imagenes que se deben visualizar se atribuyen a las variables imagen. ¢ dmagen2 en las primeras lineas: si se abre una carpeta deberd aparecer un signo menos y una car~ peta abierta, pero, si se cierra una carpeta, deberd visualizarse un signo mas y una carpeta cerrada. EI flujo del desarrollo de la funci6n corresponde al de la funcién exbase. En el lugar correspondiente del indice 0 de la carpeta principal s6lo se visualiza una 4 que representa la Ifnea actual. También se muestran dos imagenes, y los nombres de los archivos de imagen se obtienen mediante las wariables imagen e imagen2, Como se trata de una carpeta, nos faltard también un enlace a una pagina, La tercera funcién que permite visualizar Iineas se denomina exarchivo: function exarchivo(i){ var imagen="exarch.gif" if (parent.ex[i].level! imagen="exfin.gif" } document .write(" " + parent.ex[i].descripcion +"") 3 Es entonces cuando se determina si existe una carpeta 0 un archivo con el mismo nivel a continuaci6n del archivo. De ser asf, la variable imagen contendré el nombre del archivo EXARCH.GIF; de lo contra rio, contendré EXFIN.GIF. La linea se completa del mismo modo que en la funcién exbase. No es nece- sario modificar las variables max, ya que un archivo no puede abrirse o cerrarse del mismo modo que una carpeta. Todavia no hemos invocado la funcin asociada a la representacién de las celdas vacias iniciales. Lo haremos asi: =parent .ex[i+1] .level) { "+ imagen + function exvacia(i){ for (j=0; j<=parent.ex[i].level-2; j++){ paint=false kei+l while ((parent.ex[k] .level>=j-2)&& (parent .ex[k] .level!=-1)){ if (parent.ex[k] .level==parent .ex[i] . level) { paint-true if (paint: document .write("") exvacia.gif'>")69 El explorador } Mediante el bucle £or 1a variable numérica 3 cuenta uno a uno todos los desplazamientos destinados a espacios vacfos o a Ifneas verticales. El bucle whi le, acompafiado por la variable numérica k, prueba todas las I{neas que se encuentran alrededor, hasta que encuentra una celda con un nivel més elevado o hasta que no encuentra mas archivos 0 carpetas con el mismo nivel que Ia linea actual. Si esta compro- bacién se produce una sola vez, la variable paint recibird el valor true. Si vuelve a existir una linea con el mismo nivel, se dibujaré una linea vertical y, de lo contrario, se visualizard un campo vacfo. La funci6n més simple es la funcién unopen: function unopen(nr) { parent.ex[nr] .opened=!parent.ex[nr] opened parent .frames[0] .location.href="explorador. htm" ) Esta funci6n invierte la variable que determina si una carpeta est4 abierta y carga en el marco la pégina del explorador. A continuacién, una vista preliminar de todo el cédigo fuente: Para terminar, el archivo completado debe grabarse con el nombre EXPLORADOR.HTM.