Un script (cuya traduccin literal es 'guion') o archivo de rdenes o archivo de procesamiento por lotes es un programa usualmente simple, que

por lo regular se almacena en un archivo de texto plano. Los script son casi siempre interpretados, pero no todo programa interpretado es considerado un script. El uso habitual de los scripts es realizar diversas tareas como combinar componentes, interactuar con el sistema operativo o con el usuario. Por este uso es frecuente que los shells sean a la vez intrpretes de este tipo de programas.

Programacin de scripts
En un ambiente NIX se le llama intrprete de comandos al programa con el que regularmente llamamos a otros programas para que inicien. Este intrprete llamado shell es el equivalente a command.com de DOS y puede ser el Bourne Shell (sh), C-Shell (csh), Korn Shell y en sistemas modernos Borne Again Shell (bash). Estos shell interpretan las rdenes que ingresamos por medio del teclado y nos permiten automatizar algunas tareas en la que se repiten las mismas rdenes en archivos que agrupan a stas, estos archivos se les conoce como scripts. En su forma ms sencilla, un script simplemente agrupa una o mas instrucciones:
echo Hola, mundo

Para este ejemplo, vamos a crear un archivo llamado hola con el contenido anterior y lo ejecutamos de la siguiente forma: $ sh hola Hola, mundo Cada shell tiene diferencias con respecto a los dems, principalmente entre sh y csh, el ksh y bash son derivados de sh, por lo que casi cualquier script escrito para este shell se puede ejecutar con los otros 2. El sh es de todos estos el mas viejo, existe desde 1977 y su sintaxis es muy simple, en sistemas abiertos como Linux, en realidad el sh es una liga a otro shell, regularmente el bash. El csh utiliza una sintaxis inspirada en el lenguaje C, al menos es lo que llevan aos diciendo sus autores, su uso ya no es muy recomendado en la actualidad y las diferentes distros lo mantienen para mantener la compatibilidad, principalmente, de scripts ya muy viejos. Hay sistemas en los que el csh es sustituido por el ms moderno tcsh. El ksh est basado en sh, mantiene la misma sintaxis y tiene mejoras principalmente en lo que respecta a mantener un histrico de comando y la posibilidad de edicin de las instrucciones.

El bash est desarrollado para mantener la compatibilidad con sh y su licencia es GNU, por lo que puede ser portado a cualquier "NIX.

Regularmente la industria reconoce a ksh como el estndar y bash regularmente no tiene problemas para ejecutar scripts desarrollados para ksh por lo que es el que voy a utilizar para estos ejemplos.
#!/bin/ksh # # hola1 # Primera correccion al script hola echo Hola $1!

En los scripts, los renglones que inician con el signo de nmero de consideran comentarios. Si el comentario inicia con #! el resto se considera el programa con el que se va a ejecutar el script, esta es una manera de formalizar al script indicando cual es el shell para el que fue desarrollado, adems de que vamos a poder forzar su ejecucin en el caso de que el usuario utilice otro shell, por estndar, el path completo del ksh es /bin/ksh. La cadena $1 representa a un parmetro que vamos a pasar en tiempo de ejecucin. Vamos a hacerlo ejecutable y lo corremos de la siguiente forma:

$ chmod 755 hola1 $ ./hola1 Alejandro Hola Alejandro! Con el comando chmod activamos el bit de ejecucin para todos, igual hubiera funcionado chmod +x hola1. Despus de esto, lo ejecutamos con ./hola1, esto lo hice as debido a que, regularmente, el directorio actual no est incluido en el path de ejecucin (variable PATH). Para los siguientes ejemplo voy a agregar el directorio al path de ejecucin para evitar confusiones. Observen que despus del nombre del script le d un espacio y continuacin escrib mi nombre, esta cadena es llamada parmetro. Observen que ejecuta el echo dentro del script sustituyendo a $1 con la cadena Alejandro, en ksh, el signo $ al inicio de un identificador representa el valor de una variable de entorno, es decir, que al aparecer la cadena $var va a reemplazarla por el valor de la variable var. Esta variable debe estar definida previamente de la forma: var=valor, por ejemplo: $ var1=Alejandro $ var2=Jaramillo $ echo $var1 $var2 Alejandro Jaramillo Observen algo muy importante, para definir una variable no se utiliza el signo $. Existen variables ya predefinidas, algunas son:

# Nmero de parmetros 1..9 Parmetro 1 al 9 ? Valor devuelto por ltimo comando ejecutado PWD Directorio actual PATH Path de bsqueda para ejecutables

Prcticas con Javascript Javascript a travs de ejemplos A continuacin proponemos al lector una aproximacin al lenguaje que haga acopio de todo lo estudiado hasta ahora, abordando tareas concretas dentro de la problemtica actual de construccin de pginas web de cliente. A travs de los ejemplos que propondremos, se trata de ver la utilidad del lenguaje, sus caractersticas de uso y sus posibilidades. Ejercicios bsicos Construccin y llamada a una funcin A modo de recordatorio, veamos la construccin bsica de funciones en JavaScript, cuya misin fundamental es la de abstraer rutinas de cdigo fuente otorgndoles un nombre, y permitiendo de esa forma su reutilizacin. <HTML> <HEAD> <SCRIPT language="javascript"> function mensaje( ) } alert( "Funcin de Javascript" )HTML Dinmico, modelos de Objetos y JavaScript Grupo EIDOS 112 { mensaje() //Llamada a la funcin </SCRIPT> </HEAD> <BODY> // aqu va el cdigo HTML </BODY> </HTML> Cdigo fuente 78

La ejecucin de un archivo de comandos Javascript se realiza segn el denominado flujo TopDown, o sea, de forma secuencial. Utilizacin de cajas de dilogo El lector recordar que hemos abordado este punto en el primer captulo dedicado a HTML Dinmico. No obstante, <HTML> <SCRIPT LANGUAJE="JavaScript"> function RecogerDatos(BotonOpcion) } var coleccion, cad; coleccion = document.all[BotonOpcion]; for (i=0;i<coleccion.length;i++) { if (coleccion[i].checked) cad = coleccion[i].value; { cad = 'Nombre: ' + txtUsuario.value + '// F.Pago: ' + cad; alert(cad); { </SCRIPT> <BODY> <fieldset style="width:100px"> <legend>Seleccione Forma de Pago</legend> <INPUT type=radio name=FPago value="Contado">Contado<br> <INPUT type=radio name=FPago checked value="Tarjeta">Tarjeta<br> </fieldset> Entre nombre:

<input type="text" ID="txtUsuario" size="10"> <input type="button" name="cmdBtn" value="Ver valor" onClick="RecogerDatos('FPago');"> </BODY> </HTML> Cdigo fuente 79 La pgina muestra una seleccin con dos botones de radio y una caja de texto. Cuando el usuario selecciona un valor e introduce un dato en la caja de texto, al pulsar el botn cmdBtn, se visualiza el Grupo EIDOS 4. Prcticas con JavaScript 113 resultado. El cdigo fuente, realiza la accin asociando al evento onclick del botn la llamada a la funcin RecogerDatos, y pasndole como argumento el nombre del botn de radio ( Fpago ). Una vez en la funcin, utilizamos un bucle for simple para recorrer todos los botones de radio disponibles, y devolver el dato value (el equivalente a la caption) del control cuya propiedad checked valga verdadero. Hay que destacar la forma de acceso a la coleccin de botones mediante la propiedad all del objeto document. El procedimiento se puede generalizar para muchas situaciones similares. Figura 29. Salida de la pgina web propuesta en el ejercicio anterior Las propiedades del objeto window Muchas caractersticas de los sitios web actuales se gestionan a travs de propiedades del objeto window, como location, history, URL, o appName.. Veamos algunas de ellas relacionadas con la seguridad de acceso, la navegabilidad, la ubicacin actual del documento y cmo determinar la versin y el tipo de navegador utilizado: Control de usuarios mediante password El Cdigo fuente 80 efecta una comprobacin inicial al entrar en la pgina, preguntando al usuario su password. Dependiendo de la respuesta, lo reenva a una pgina de error, o permite el acceso a una supuesta pgina de socios. <html> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Control de usuarios</title> <script language="JavaScript"> function Password(){

if(prompt("Clave de acceso:","") == "Leoncio"){ window.location = "/DatosParaSocios.html"; }else{ window.location = "/VentanaDeError.html"; { { </script> </head>HTML Dinmico, modelos de Objetos y JavaScript Grupo EIDOS 114 <body onload="Password()"> <b> Debe introducir su contrasea para acceder al rea de socios </b> </body> </html> Cdigo fuente 80 Hay que resaltar aqu que la propiedad que se utiliza es la propiedad location del objeto window. Dependiendo el valor introducido, al asignar un valor URL vlido a es propiedad, el navegador llevar a continuacin a usuario a la pgina correspondiente. Navegabilidad mediante la propiedad history La propiedad history almacena un array con todas las direcciones a las que se ha navegado en la sesin actual. Eso, unido a las propiedades y mtodos de history, nos permite crear pginas en las que mediante mecanismos de redireccin, podamos reenviar al usuario a la pgina anterior, incluso sin que nuestra pgina sepa a priori de cual se trata. Mediante los mtodos back, forward y go, podemos navegar a la pgina anterior, a la siguiente o ir a una pgina concreta del historial. Tambin se puede conocer el nmero de pginas visitadas mediante la propiedad length. Ubicacin actual mediante URL, y referencias agrupadas mediante with

La pgina puede conocer siempre cual es la ubicacin actual mediante la propiedad URL. Adems en el caso de que tengamos que hacer referencia a ms de una propiedad de un objeto, la estructura de agrupacin with, permite hacer referencias mltiples a las propiedades de un objeto. El Cdigo fuente 81 lo demuestra. <html> <head> <title>Manual EIDOS de HTML Dinmico, Modelos de objetos y Javascript</title> </head> <body> <script type="text/javascript"> with(document){ write("Hola!"); write("<br>El ttulo del documento es, \"" + title + "\"."); write("<br>La URL de este documento es: " + URL); write("<br>No es necesario usar el prefijo del objeto cada vez!"); { </script> </body> </html> Cdigo fuente 81 La estructura with, permite hacer referencia a las propiedades del objeto document sin repetir el prefijo con el nombre del objeto en cada llamada. Se produce una salida donde el valor del ttulo y la URL se toman automticamente de las propiedades del objeto document: Grupo EIDOS 4. Prcticas con JavaScript Averiguar la versin y el tipo de navegador utilizado: En numerosas ocasiones es preciso escribir cdigo polivalente: es decir, que pueda ser usado para cualquier tipo de navegador, espcecialmente, cuando es importante que nuestras pginas sean accedidas por el mayor nmero de usuarios posible. Para estas situaciones, podemos utilizar las

funciones provistas por el objeto window a tal efecto: appName, appVersion, etc. Veamos un ejemplo De su utilizacin,en el Cdigo fuente 82, mostrando la lista de propiedades disponibles. <html> <head> <title>Manual EIDOS de HTML Dinmico, Modelos de objetos y Javascript. Marino Posadas. (Grupo EIDOS)</title> </head> <body> <script language="JavaScript"> --!> document.write("navigator.appCodeName: ".bold() + navigator.appCodeName + "<br>"); document.write("navigator.appName: ".bold() + navigator.appName + "<br>"); document.write("navigator.appVersion: ".bold() + navigator.appVersion + "<br>"); document.write("navigator.language: ".bold() + navigator.language + "<br>"); document.write("navigator.mimeTypes: ".bold() + navigator.mimeTypes + "<br>"); document.write("navigator.platform: ".bold() + navigator.platform + "<br>"); document.write("navigator.plugins: ".bold() + navigator.plugins + "<br>"); document.write("navigator.userAgent: ".bold() + navigator.userAgent + "<br>"); document.close(); <---// </script> </body> </html>

Cdigo fuente 82 HTML Dinmico, modelos de Objetos y JavaScript Grupo EIDOS Como vemos, el nmero de propiedades es suficiente para conocer en todo momento bajo qu entorno de ejecucin se est viendo nuestra pgina. Dependiendo de esas situacin podremos escribir cdigo ejecutable para cada circunstancia. En este caso, la salida del Cdigo fuente 82, produce una pantalla de referencias generales sobre todas las caractersticasque muestra la Figura 30. Figura 31. Pgina mostrando las caractersticas del navegador Nota para programadores experimentados en orientacin a objetos A pesar de la apariencia de las relaciones clase-subclase en la jerarqua Javascript, muchos de los aspectos tradicionales de un entorno orientado a objetos no son aplicables a Javascript. En realidad la jerarqua Javascript es ms una jerarqua de contenidos o de envoltorios que una jerarqua de herencia. No se heredan ni propiedades ni mtodos de los objetos ms altos en la cadena. No hay un mecanismo de trasvase de mensajes entre objetos en ninguna direccin. Por lo tanto, no puede invocar un mtodo ventana mediante el envo de un mensaje a l desde un documento o plantilla. Cualquier referencia a un objeto debe ser explcita. Los objetos Javascript predefinidos son generados slo cuando el cdigo HTML que contiene sus definiciones se carga en el navegador. No se puede aadir o modificar propiedades, mtodos o manejadores de ningn objeto (aunque pueda aadir una propiedad a una variable que pertenece a un objeto). A lo sumo se puede modificar algunos valores de las propiedades. Creacin de un objeto La mejor forma de verlo es con un ejemplo, lo primero que vamos hacer es crear un objeto al que le llamamos foroEIDOS y sus propiedades. function foroEIDOS ( nNumICQ, cNombre, cApodo ) Grupo EIDOS 4. Prcticas con JavaScript } this.nNumICQ = nNumICQ this.cNombre = cNombre this.cApodo = cApodo { Cdigo fuente 83 Con esto no creamos ninguna instancia especial. El objeto posee tres propiedades, Nmero de ICQ,

Nombre y Apodo. Para crear una instancia necesitaremos el constructor new. Con ello comunicamos a Javascript que deseamos crear una nueva instancia y no ejecutar una funcin. Como indica el Cdigo fuente 84. userForo1 = new foroEIDOS( 4053781, "Lagarto Juancho", "Juancho" ) Cdigo fuente 84 Con la instruccin que aparece en el Cdigo fuente 85 establecemos la instancia userForo1 que tiene las propiedades. userForo1.nNumICQ userForo1.cNombre userForo1.cApodo Cdigo fuente 85 Todas las instancias de un objeto son independientes entre s. Por lo tanto, tambin podramos asignar una instancia especial con propiedades adicionales. userForo1.seccion = "Reptiles" Cdigo fuente 86 Esta propiedad especial slo es vlida para la instancia userForo1. Si deseamos asignar esta propiedad a todas las instancias, la definicin correspondiente deber colocarse en el constructor del objeto afectado. function foroEIDOS ( nNumICQ, cNombre, cApodo, cSeccion ) } this.nNumICQ = nNumICQ this.cNombre = cNombre this.cNick = cApodo this.seccion = cSeccion { Cdigo fuente 87HTML Dinmico, modelos de Objetos y JavaScript Grupo EIDOS

Ms aplicaciones de los objetos: Presentar Fechas y Horas Las funciones de fecha y hora nos permiten hacer un control de los valores de reloj en Javascript, utilizando algunas de las funciones asociadas con el objeto Date. En el Cdigo fuente 88, incluimos un ejemplo para mostrar la hora actual al cargarse una pgina web. <html> <head> <script type="text/javascript"> --!> function Reloj (Horas, Minutos){ this.Horas = Horas; this.Minutos = Minutos; this.PonerEnHora = PonerEnHora; this.MostrarLaHora = MostrarLaHora; { function PonerEnHora (Horas, Minutos){ this.Horas = Horas; this.Minutos = Minutos; { function MostrarLaHora (){ var line = this.Horas + ":" + this.Minutos; document.write ("<hr>Hora del Reloj: " + line); { <--// </script> </head> <body> <script type="text/javascript">

--!> var HoraActual = new Date(); miReloj = new Reloj(HoraActual.getHours (), HoraActual.getMinutes ()); miReloj.MostrarLaHora (); <--// </script> </body> </html> Cdigo fuente 88 Este documento, instancia un nuevo objeto Date llamado HoraActual y utiliza sus mtodos getHours()y getMinutes() para obtener los valores que nos presenta como salida (la hora actual del sistema): Hora del Reloj: 12:39 Otro ejemplo, ms completo En el Cdigo fuente 89 se presenta un ejemplo ms completo, accediendo a todos los recursos de fecha y hora para presentarlos como parte de la salida de una pgina. Se utilizan los mtodos getMonth(), getDate() y getHours() del objeto Date. <script type="text/javascript" language="JavaScript1.1"> --!> Date.prototype.getActualMonth = MesActual; Grupo EIDOS 4. Prcticas con JavaScript 119 Date.prototype.getActualDay = DiaActual; Date.prototype.getCalendarDay = LeerSemanaCalendario; Date.prototype.getCalendarMonth = LeerMesCalendario; function MesActual() { var n = this.getMonth();

n += 1; return n; { function DiaActual() { var n = this.getDay(); n += 1; return n; { function LeerSemanaCalendario() { var n = this.getDay(); var dow = new Array(7); dow[0] = "Domingo"; dow[1] = "Lunes"; dow[2] = "Martes"; dow[3] = "Mircoles"; dow[4] = "Jueves"; dow[5] = "Viernes"; dow[6] = "Sbado"; return dow[n]; { function LeerMesCalendario() { var n = this.getMonth(); var moy = new Array(12); moy[0] = "Enero"; moy[1] = "Febrero"; moy[2] = "Marzo";

moy[3] = "Abril"; moy[4] = "Mayo"; moy[5] = "Junio"; moy[6] = "Julio"; moy[7] = "Agosto"; moy[8] = "Septiembre"; moy[9] = "Octubre"; moy[10] = "Noviembre"; moy[11] = "Diciembre"; return moy[n]; { // Comprobar los mtodos creados var Hoy = new Date(); document.write("<b>La presente rutina se est ejecutando en " + Hoy.getCalendarDay() + ", el da " + Hoy.getDate() + " de " + Hoy.getCalendarMonth() + " del ao del Seor de " + Hoy.getFullYear() + " D.C. a las " + Hoy.getHours() + " horas. </b>"); <--// </script> Cdigo fuente 89 La salida de esta pgina sera: La presente rutina se est ejecutando en Mircoles, el da 31 de Enero del ao del Seor de 2001 D.C. a las 13 horas.HTML Dinmico, modelos de Objetos y JavaScript Grupo EIDOS

Escritura dinmica de un documento Una de las capacidades del objeto document es la de poder escribir en el bfer de la pantalla de visualizacin, lo que nos permite crear documentos on-line. En el Cdigo fuente 90, vemos como el cdigo que sigue puede escribir y sobrescribir en un documento, dependiendo de cmo usemos el mtodo write del objeto document: Si la rutina se encuentra en el cuerpo del documento, la instruccin document. write aadir el contenido al generado por las etiquetas, mientras que si la llamada se produce una vez cargado el documento, el mtodo write sobrescribir todo el bfer anulando los valores generados por cualquier etiqueta anterior. <HTML> <BODY> Ejemplo de documento con una parte fija y otra creada dinmicamente. <BR> <SCRIPT LANGUAGE="JavaScript"> document.write('Parte dinmica terminada con fecha: '); document.write(document.lastModified); </SCRIPT> </BODY> </HTML> Cdigo fuente 90 En este caso la salida es: Ejemplo de documento con una parte fija y otra creada dinmicamente. Parte dinmica terminada con fecha: 01/30/2001 14:06:10 Esto es debido a que el script est contenido dentro del cuerpo (<BODY>) del documento, pero veamos lo que sucede si sacamos el script fuera de <BODY>, y aadimos un mensaje interno (Cdigo fuente 91) <HTML> <HEAD>

<SCRIPT LANGUAGE="JavaScript"> function EscribirDocumento() { document.write('Parte dinmica terminada con fecha: '); document.write(document.lastModified); } </SCRIPT> </HEAD> <BODY onLoad="EscribirDocumento()"> Saludos cordiales, desde el cuerpo del documento </BODY> </HTML> Cdigo fuente 91 En este caso la salida anula el contenido del cuerpo de la pgina, y solo veremos la primera parte: Parte dinmica terminada con fecha: 01/30/2001 14:12:07 Los saludos son sobrescritos, porque primero se ejecuta la carga del documento, y una vez terminada, se produce el evento onload, que ordena volver aescribir el bfer del documento, ignorando el mensaje de saludo. Grupo EIDOS 4. Prcticas con JavaScript Llamada condicional a una funcin En Javascript, podemos generar estructuras complejas que se ejecuten en funcin de varias condiciones. Por ejemplo podemos crear funciones para el tratamiento de situaciones que dependen del navegador en el que la pgina se est ejecutando. En el Cdigo fuente 92, la funcin a la que se llama en el cdigo depende del resultado combinado del operador condicional (?:) function funcionIE() {...} function funcionNetscape() {...} var funcion = (IE) ? funcionIE : funcionNetscape; // Si IE es verdadero, funcion hace referencia a funcionIE, en caso contrario // funcion es una referencia a funcionNetscape funcion();

// La llamada que haremos realmente depende de la // lnea anterior Cdigo fuente 92 Ejemplos de uso del modelo de objetos DOM Uso del mtodo cloneNode Mediante el mtodo cloneNode , podemos copiar informacin de otras etiquetas (elementos, desde el punto de vista de DOM), y modificar sus propiedades o aadir otras nuevas, implementando as una forma de herencia. Veamos, en el Cdigo fuente 93, un primer ejemplo de uso de estas propiedades mediante el acceso a informacin de una tabla, leyendo los datos de una sola celda, y mostrndolos en una caja de dilogo. <HTML> <BODY ID="bodyNode"> <TABLE ID="tableNode"> <BODY> <TR ID="tr1Node"><TD BGCOLOR="yellow">Fila 1, Columna 1</TD> <TD BGCOLOR="orange">Fila 1, Columna 2</TD> </TR> <TR ID="tr2Node"><TD BGCOLOR="yellow">Fila 2, Columna 1</TD> <TD BGCOLOR="orange">Fila 2, Columna 2</TD> </TR> <TR ID="tr3Node"><TD BGCOLOR="lightgreen">Fila 3, Columna 1</TD> <TD BGCOLOR="beige">Fila 3, Columna 2</TD> </TR> <TR ID="tr4Node"><TD BGCOLOR="blue">Fila 4, Columna 1</TD> <TD BGCOLOR="lightblue">Fila 4, Columna 2</TD> </TR> <TR ID="tr5Node"><TD BGCOLOR="orange">Fila 5, Columna 1</TD>

<TD BGCOLOR="purple">Fila 5, Columna 2</TD> </TR> </TBODY> </TABLE> <SCRIPT LANGUAGE="JavaScript"> tr4Obj = tr1Node.cloneNode(true); alert( "Primer Hijo = " + tr4Obj.firstChild + "\n" + "Nombre del Nodo= " + tr4Obj.nodeName );HTML Dinmico, modelos de Objetos y JavaScript Grupo EIDOS </SCRIPT> </BODY> </HTML> Cdigo fuente 93 Y su salida nos mostrara la tabla con diferentes colores, y la caja de mensaje a la que se llama a continuacin, nada ms cargarse el documento. Figura 32. Acceso a las propiedades de un elemento mediante DOM El mecanismo utilizado aqu consiste en clonar el contenido de una etiqueta (un objeto, en realidad, segn se ha visto en el primer captulo), para acceder despus a sus propiedades y mostrarlas en una caja de mensaje. Un poco ms compleja, pero basndose en los mismos principios es la situacin que sigue. Se crea una tabla totalmente a partir de cdigo fuente de DOM, generando por cdigo los nodos correspondientes y aadindolos a las colecciones del documento. Una vez terminado el proceso el mecanismo de rendering ser el encargado de visualizar la tabla como si se hubiera construido con etiquetas HTML tipo estndar. Obtendramos una salida en el navegador similar a la Figura 33. Figura 33. Construccin dinmica de tablas mediante DOM Grupo EIDOS 4. Prcticas con JavaScript Y el cdigo fuente que corresponde con esta ventana es el que aparece en el Cdigo fuente 94. <HTML> <HEAD>

<TITLE>Construccin de Tablas mediante DOM</TITLE> </HEAD> <BODY ID="bodyNode"> <SCRIPT LANGUAGE="JavaScript"> --!> Fila1Columna1Obj = document.createTextNode("Fila 1, Columna 1 "); tableObj = document.createElement("TABLE"); tbodyObj = document.createElement("TBODY"); tr1Obj = document.createElement("TR"); tr1td1Obj = document.createElement("TD"); tr1td2Obj = tr1td1Obj.cloneNode(false); tr2td1Obj = tr1td1Obj.cloneNode(false); tr2td2Obj = tr1td1Obj.cloneNode(false); tr3td1Obj = tr1td1Obj.cloneNode(false); tr3td2Obj = tr1td1Obj.cloneNode(false); tr2Obj = tr1Obj.cloneNode(false); tr3Obj = tr1Obj.cloneNode(false); Fila1Columna2Obj = Fila1Columna1Obj.cloneNode(false); Fila2Columna1Obj = Fila1Columna1Obj.cloneNode(false); Fila2Columna2Obj = Fila1Columna1Obj.cloneNode(false); Fila3Columna1Obj = Fila1Columna1Obj.cloneNode(false); Fila3Columna2Obj = Fila1Columna1Obj.cloneNode(false); Fila1Columna2Obj.nodeValue = "Fila 1, Columna 2 "; Fila2Columna1Obj.nodeValue = "Fila 2, Columna 1 "; Fila2Columna2Obj.nodeValue = "Fila 2, Columna 2 "; Fila3Columna1Obj.nodeValue = "Fila 3, Columna 1 ";

Fila3Columna2Obj.nodeValue = "Fila 3, Columna 2 "; returnValue = tableObj.insertBefore(tbodyObj); tbodyObj.insertBefore(tr3Obj); tbodyObj.insertBefore(tr2Obj, tr3Obj); tbodyObj.insertBefore(tr1Obj, tr2Obj); tr1Obj.insertBefore(tr1td2Obj); tr1Obj.insertBefore(tr1td1Obj, tr1td2Obj); tr2Obj.insertBefore(tr2td2Obj); tr2Obj.insertBefore(tr2td1Obj, tr2td2Obj); tr3Obj.insertBefore(tr3td2Obj); tr3Obj.insertBefore(tr3td1Obj, tr3td2Obj); tr1td2Obj.insertBefore(Fila1Columna2Obj); tr1td1Obj.insertBefore(Fila1Columna1Obj); tr2td2Obj.insertBefore(Fila2Columna2Obj); tr2td1Obj.insertBefore(Fila2Columna1Obj); tr3td2Obj.insertBefore(Fila3Columna2Obj); tr3td1Obj.insertBefore(Fila3Columna1Obj); bodyNode.insertBefore(tableObj); <-- // </SCRIPT> </BODY> </HTML> Cdigo fuente 94 HTML Dinmico, modelos de Objetos y JavaScript Grupo EIDOS

Algunos efectos visuales Degradacin de fondos Entre los numerosos efectos visuales que se pueden conseguir mediante el nuevo modelo de objetos, uno de los ms populares es la degradacin del fondo de un formulario pasando de un color a otro mediante pequeos saltos de color. El Cdigo fuente 95 consigue este efecto mediante un bucle, combinando los colores rojo, verde y azul, aplicndolo a la propiedad bgColor del objeto document: <html> <head> <script type="text/javascript"> !> function Degradar(InicioRojo, InicioVerde, InicioAzul, FinalRojo, FinalVerde, FinalAzul, delay){ for(var i = 1; i <= delay - 1; i++){ var FinalPorcentaje = i/delay; var InicioPorcentaje = 1 - FinalPorcentaje; document.bgColor = Math.floor(InicioRojo * InicioPorcentaje + FinalRojo * FinalPorcentaje) * 256 * 256 + Math.floor(InicioVerde * InicioPorcentaje + FinalVerde * FinalPorcentaje) * 256 + Math.floor(InicioAzul * InicioPorcentaje + FinalAzul * FinalPorcentaje ); } { <--// </script> </head> <body> <script type="text/javascript"> !>

Degradar( 255,255,240,0,128,128,170 ); <--// </script> </body> </html> Cdigo fuente 95 Al mostrarse la pgina comienza con color clarito en verde que va volvindose verde oscuro segn se van aplicando los valores generados por el bucle a la propiedad bgcolor. Posicionamiento por capas mediante estilos Aunque ya se ha tratado el tema en el captulo 2, el cdigo siguiente muestra un ejemplo sencillo de posicionamiento por capas utilizando estilos definidos en la misma pgina. Grupo EIDOS 4. Prcticas con JavaScript Figura 34. Posicionamiento por capas mediante estilos Efecto que se consigue mediante el Cdigo fuente 96 <html> <head> <style type="text/css"> --!> #Primero{ background-color: green; height: 100; left: 0; position: absolute; top: 0; width: 100; z-index: 2; {

#Segundo{ background-color: red; height: 100; left: 20; position: absolute; top: 20; width: 100; { #Tercero{ background-color: blue; height: 100; left: 40; position: absolute; top: 40; width: 100; z-index: 1; { #Cuarto{ background-color: yellow; height: 100;HTML Dinmico, modelos de Objetos y JavaScript Grupo EIDOS 126 left: 60; position: absolute; top: 60; width: 100; {

<-</style> </head> <body> <p name="Capa1" id="Primero"> Capa1 </p> <p name="Capa2" id="Segundo"> Capa2 </p> <p name="Capa3" id="Tercero"> Capa3 </p> <p name="Capa4" id="Cuarto"> Capa4 </p> </body> </html> Cdigo fuente 96 Para ms informacin recomendamos al lector algunos sitios web, donde podr encontrar interesante informacin relacionada con funciones avanzadas del HTML Dinmico.

Sentencias repetitivas o bucles Las sentencias repetitivas o bucles permiten la repeticin de una sentencia o de un conjunto de sentencias. While..do La sentencia while es un bucle condicional que incluye un test al principio, es decir, ejecuta una sentencia mientras sea cierta una condicin o expresin lgica (condicin de entrada). Con este mecanismo, la sentencia puede no ejecutarse ni una sola vez, si la condicin es falsa nada ms llegar al bucle por primera vez. Por otro lado, es importante asegurarse de que, en algn momento de la ejecucin de la sentencia repetitiva, la condicin va a ser falsa, pues de lo contrario se caera en un bucle infinito. Sigue la siguiente estructura y el flujograma mostrado en la Figura 16: Sintaxis: while condicion_booleana do sentencia; El siguiente ejemplo escribe 9 lneas en la pantalla de texto numerndolas del 1 al 9 Ej.: var i:integer; begin i:=1; while i<10 do begin writeln('Esta es la linea n ',i); i:=i+1 end;

Repeat..until La sentencia repeat es un bucle condicional con test al final. Ejecuta una sentencia o sentencias hasta que sea cierta una condicin (condicin de salida). Con este mecanismo, la sentencia siempre se ejecuta al menos una vez. Como en el tipo de bucle anterior es importante asegurarse de que, en algn momento de la ejecucin, la condicin va a ser verdadera, pues de lo contrario se caera en un bucle infinito. Sigue la siguiente estructura y el flujograma mostrado en la Figura 17: Sintaxis: repeat sentencia_1; sentencia_2; { mas sentencias ... } sentencia_n until condicion; El siguiente ejemplo de utilizacin de la sentencia repeat visualiza nueve lneas en la pantalla de texto y es equivalente al anterior ejemplo del bucle while. Ej.: var I:integer;

Begin Datos estructurados 59 I:=1; repeat writeln('Esta es la linea n ',I); I:=I+1 until I>9;

For ... to/downto ... do La sentencia for es un bucle predeterminado que ejecuta una sentencia repetidamente mientras se asigne a la variable de control o contador una progresin de valores. Esta progresin puede ser ascendente (to) o descendente (downto). El flujograma correspondiente a esta sentencia se muestra en la Figura 18 y respeta la siguiente estructura sintctica: Sintaxis: for contador:=valorinicial to/downto valorfinal do sentencia; donde

contador es el identificador de una variable ordinal. La variable contador toma el valor inicial especificado y cada vez que se ejecuta el bucle, incrementa o decrementa implcitamente su valor al sucesivo en la progresin correspondiente. El siguiente ejemplo de utilizacin de la sentencia for visualiza nueve lneas en la

pantalla de texto y es equivalente a los anteriores ejemplos de los bucles while y repeat. Ej.: begin for i:=1 to 9 do writeln ('Esta es la linea n',i); Otro ejemplo de empleo de la sentencia for permite asignar valores va teclado a cada uno de los elementos de una variable de tipo vector (array[0..9] of real): Ej.: type vector = array[0..9] of real; var i:integer;

var a : vector; i : integer; begin for i:=0 to 9 do readln(a[i]); La variable contador, el valor inicial y el valor final han de ser del mismo tipo ordinal o subrango de tipo ordinal. No valen datos de tipo real!. En general, los valores inicial y final sern expresiones (constantes, variables o una combinacin) de este tipo que se evalan al principio de la ejecucin del bucle. Una vez evaluados, los valores inicial y final de la progresin se almacenan en la memoria y quedan fijos hasta el final del bucle.

El valor asignado a la variable de control puede variarse dentro del bucle FOR con la correspondiente modificacin en la progresin de valores que en principio hubiera tomado dicha variable. Por lo que, si el valor de la variable contador se modifica explcitamente dentro de la sentencia o grupo de sentencias que se repiten, ha de hacerse con mucho cuidado. Hacindolo de esta manera, esta caracterstica del bucle FOR puede emplearse para cambiar el ritmo de la progresin. En general, las sentencias repetitivas tambin pueden anidarse unas dentro de otras. En el siguiente ejemplo, se emplean dos sentencias anidadas para asignar valores a todos los elementos de una variable tipo matriz bidimensional: type matriz = array[1..3,1..4] of real; var a : matriz; i,j : integer; begin for i:=1 to 3 do

for j:=1 to 4 do begin write('El elemento a[', i,',',j,'] es : '); readln(a[i,j]); end;

COMENTARIOS Los comentarios se utilizan para facilitar la comprensin de los programas cuando son leidos por otras personas distintas de las que los escribieron. Informan sobre las distintas operaciones, elementos o estructuras de los programas pero sin afectarlos. En TurboPascal hay dos maneras de incluir comentarios dentro de cdigo fuente de los programas: encerrados entre llaves { esto es un comentario } o entre este par de caracteres (* esto tambin es un comentario *). Al principio de cada programa se debera incluir un comentario con la siguiente informacin: programador, fecha y una breve descripcin del programa.

Sentencias selectivas El shell invoca las rdenes de un fichero una detrs de otra. Si se desea que una orden o conjunto de

rdenes se ejecuten si una condicin es verdadera y otras si la condicin es falsa, se utiliza el operador if. Adems, existe otro operador ms potente que proporciona la capacidad de ejecutar diferentes rdenes en funcin del valor de una variable: el operador case. 7.1El operador if La sintaxis del operador if es la siguiente: if expresion then orden/es fi Si expresin es verdadera ejecuta la/s orden/es comprendidas entre

then y fi. expresion puede ser cualquier expresin lgica o una orden que devuelva un valor. Si expresion retorna (devuelve) cero o lo que es lo mismo el resultado de expresin se evala a cierto (TRUE), entonces se ejecuta las rdenes a continuacin de la parte then. Si se necesita ejecutar otras rdenes cuando expresion intaxis es: 5SHELL SCRIPT DE LINUX if expresion then orden/es else orden/es es falsa (FALSE), es decir cuando devuelve un valor distinto de cero, se utiliza el operador else. Su s

fi Si se desea incluir otro operador if a continuacin de else se utiliza la forma abreviada elif (else if). if expresion then orden/es elif expresion then orden/es fi La orden test La orden test proporciona valores al operador if. Una de las aplicaciones de test es evaluar si existe una variable de entorno. Ejercicio 2: $ if test $PWD > then echo El directorio de trabajo es $PWD > fi $ Si la variable PWD existe ejecutar la orden echo, devolviendo el directorio de trabajo La orden test puede ser sustituida por [ ] (corchetes), en cuyo caso los argumentos se incluyen dentro de los corchetes. La orden test permite, dependiendo de sus argumentos, operar con ficheros, comparar nmeros, cadenas de caracteres y valores de variables de entorno.

Java es un lenguaje de programacin (como el pascal, el Basic o el C y C++) que fue desarrollado por la empresa Sun fundamentalmente para crear aplicaciones para internet. El lenguaje java es completo, es decir permite realizar cualquier operacionsobre el ordenador (coom por ejemplo borrar un archivo) y su aprendizaje es costoso. Javascript es lo que se conoce como lenguaje script, es decir: se trata de cdigo de programacin que se inserta dentro de un documento. Java script fue desarrollado por la empresa Netscape con la idea de potenciar la creacin de paginas web dinamicas para su navegador (NAVIGATOR) Javascript ( en contra de lo que se podra suponer) es totalmente distinto de java. Java crea programas totalmente independientes y operativos; Javascript es mas sencillo porque lo nico que permite es insertar cdigo especial dentro del HTML de una pagina, su funcin es ampliar las posibilidades de HTML. Java script no crea programas independientes, depende por copleto del cdigo HTML de la pgina.

El cdigo en java se debe compilar (convertir en una instruccin del ordenador) y entoncs podr ser utilizadopor los navegadores (son las famosas applets). Sin embargo javascript se incrusta dentro del cdigo HTML de la pagina.

1.4.1. Incluir JavaScript en el mismo documento XHTML El cdigo JavaScript se encierra entre etiquetas <script> Y se incluye en cualquier parte del documento .Aunque es correcto incluir cualquier bloque de cdigo en cualquier zona de la pgina, se recomienda definir el cdigo JavaScript dentro de la cabecera del documento (dentro de la etiqueta <head> ): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1"/>