1 / 57

capítulo 5 JavaScript

Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript. capítulo 5 JavaScript. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript.

eljah
Download Presentation

capítulo 5 JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript capítulo 5 JavaScript

  2. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Las páginas web del tipo de las que se han estado abordado hasta el momento adolecen de algunas limitaciones no menores. En efecto, la mayoría de los sitios web que se pueden visitar en la www admiten algún grado mayor o menor de interactividad, es decir, algún grado mayor o menor de diálogo entre una página web y su visitante, o bien autonomía, es decir, se actualizan en tiempo real y en forma automática. • Desde este punto de vista, las páginas web se pueden clasificar como: • estáticasdinámicasactivas • Las estáticas no prevén interactividad con los visitantes ni actualización automática de su contenido. Corresponden, en efecto, al tipo que hemos estado viendo hasta al momento. • Las activas tampoco prevén interactividad con los visitantes aunque sí la actualización autónoma de su contenido. Por ejemplo, páginas web presentando la hora oficial, la temperatura actual, un padrón electoral o la guía telefónica deben poder actualizarse en forma automática y regular. Esto demanda una conexión permanente con el servidor (por qué ?). • Las dinámicas prevén diálogo con los visitantes, es decir, dentro de su finalidad, se adaptan a lo que estos requieran. Por ejemplo, sitios web que brinden una calculadora en línea o un servicio de conversión de unidades de medida. (qué diferencia en el tipo de servicio con las activas ?)

  3. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Nuestro siguiente objetivo consiste en abordar los rudimentos de la construcción de páginas web dinámicas, que, además de aspecto, presenten comportamiento. HTML, como se lo ha presentado hasta el momento, no ofrece prestación alguna que permita implementar interacción. En efecto, la incorporación de diálogo con el visitante requiere del uso de otra(s) herramiemtas(s) que se integren a HTML. Una vía de entrada -la conexión- entre HTML y estas nuevas herramientas es el par de etiquetas <script></script>. Entre éstas se puede incorporar texto correspondiente a un lenguaje no ya declarativo, como HTML, sino procedural, como es el caso de JavaScript (JS). Esta diferencia entre declarativo y procedural es fundamental. Una descripción declarativa indica cómo es o cómo luce algo. (Quite del castellano los verbos dejando solo sustantivos y adjetivos) En cambio, una declaración procedural indica cómo se comporta algo. (Vuelva a incluir a los verbos) Nuestro lenguaje natural -castellano- admite ambas posibilidades ‘por el mismo precio’. En cambio, HTML no. HTML es solo declarativo (sin verbos).

  4. Que su empleado sea incansable y veloz contribuye a un trabajo eficiente pero, la fundamental característica de ser riguroso le permite a Ud. evitar la supervisión y quedarse solo con el diseño cuidadoso de una lista de tareas a realizar, un programa de trabajo mediante el que Ud. indica cómo debe comportarse (qué debe hacer) a cada paso y frente a cada situación. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Claramente entonces, para especificar interactividad, es decir, cómo debe una página responder frente a determinados estímulos, se requieren verbos. Se deben prever respuestas automáticas a preguntas del tipo ‘que debería ocurrir si…?’, y, respuestas de este tipo necesariamente incluyen verbos (...‘debe ocurrir tal y cual cosa’). Ya hemos visto los rudimentos para indicar el aspecto de una página HTML. Ahora, cómo cree Ud. que se puede indicar comportamiento ?. Cómo lo haría si fuera Ud. el encargado de uno o más operarios rigurosos, incansables y muy, muy veloces ? -1

  5. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript JS es un lenguaje que, como muchos otros, permite especificar comportamiento a una computadora pero, en su caso particular, es directamente integrable a HTML, lo que no ocurre en forma directa con la mayoría de los otros lenguajes. Páginas web dinámicas HTML JS La integración entre JS y HTML se produce cuando, mediante JS, se indica qué debe ocurrir cuando se produce un suceso determinado, en la jerga de JS, cómo debe responder una página HTML frente a determinados eventos. Y qué es un ‘evento’ entonces ? Es una manifestación que el navegador de páginas web en general -y una página web en particular- es capaz de reconocer como promotor o disparador de un comportamiento. Por ejemplo, hacer click en un botón de un formulario, o desplegar una lista de opciones, o seleccionar un ítem entre otros, o cargar una nueva página en el navegador, o abandonar la actual, etc., etc., etc. Todas estas manifestaciones son reconocidas por el navegador y pueden ser aprovechadas para ‘disparar’ un comportamiento (cuyos detalles se especifican mediante JS). La capacidad para reconocer estos eventos está construida internamente en el navegador de modo tal que solo hay que aprovecharla.

  6. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Por ejemplo, se desea que al hacer click sobre el botón ‘convertir’, la magnitud que figura en la caja que indica ‘cm’ sea convertida a pulgadas y ubicada en la caja correspondiente. Para lograr este comportamiento se debe redactar lo antedicho en JS y se lo debe agregar en alguna parte del texto HTML de la página web. Se debe asumir entonces que JS es capaz, al menos, de ‘leer’ (conocer el contenido) una caja de texto, de multiplicar dos valores, y también de ‘escribir’ (modificar el contenido) en una caja de texto. En efecto, así es. Traducido a castellano, el texto en JS debiera decir algo así como lo siguiente… cuando se haga click sobre el botón, escriba en la caja de texto de la derecha el resultado de dividir el contenido de la de la izquierda por 2.54. A la acción asociada a la respuesta a un evento se la denomina manejador del evento. En este caso, ‘escriba en la caja de texto de la derecha el resultado de dividir el contenido de la de la izquierda por 2.54’ es el manejador asociado al evento ‘hacer click sobre el botón’.

  7. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Una cuestión muy importante a tener en cuenta es que los diversos elementos de diálogo en una página deben poder individualizarse. En el ejemplo hay un solo botón de modo tal que bastaría aludir a ‘el botón’ para que esté claro de cuál se trata. Pero, y si hubiera 2, 3 o más ? Además, hay DOS cajas de texto. Esta individualización se produce mediante la posibilidad de dar un nombre a cada elemento de diálogo, y como una denominación es una característica declarativa (parte de la descripción del elemento de la página) se la indica en HTML cuando el elemento es creado (mediante al atributo NAME de la etiqueta INPUT). <FORM NAME='form_cm_a_pulg'> <P> <INPUT TYPE='TEXT' NAME='CM' SIZE='5'> cm <INPUT TYPE='BUTTON' NAME='cm_a_pulg' VALUE='Convertir’> <INPUT TYPE='TEXT' NAME='PULG' SIZE='5'> pulgada(s) </FORM> Del mismo modo, y si se va a hacer referencia a ellas en el código JS, también deben recibir denominación las cajas de texto, como también muestra el ejemplo.

  8. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript La asociación entre un evento y el manejador correspondiente se produce también en la declaración del elemento de diálogo. <INPUT TYPE='BUTTON' NAME='cm_a_pulg' VALUE='Convertir’ onClick=‘conv(this.form)’> • Diferentes elementos de diálogo (caja, botones, listas, ventanas, etc.) reconocen diferentes eventos, algunos en común y otros no, y a cada uno se puede asociar un manejador de evento mediante el atributo ‘onEvento=nombre_del_manejador’, donde ‘Evento’ debe ser reemplazado por la particular denominación del evento deseado. • Por ejemplo, para un botón, eventos típicos son: • onClick (al hacer click sobre el botón)(onClick = ‘manejador_de_onClick()’) • onFocus (al recibir el foco) (onFocus = ‘manejador_de_onFocus()’) • onBlur (al perder el foco) (onBlur = ‘manejador_de_onBlur()’) • de entre onClick, onFocus, onBlur, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown y onKeyUp, y, en el ejemplo particular de la página de conversión de unidades, el manejador asociado el evento click del botón denominado ‘cm_a_pulg’ se ha bautizado ‘conv()’.

  9. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript <INPUT TYPE='BUTTON' NAME='cm_a_pulg' VALUE='Convertir’onClick=‘conv(this.form)’> Entonces, cuando se hace click sobre el botón, se dispara el manejador ‘conv()’ que es una denominación general para englobar todas las acciones que se haya decidido que deban tener lugar frente a ese evento, en este caso: escriba en la caja de texto denominada ‘PULG’ el resultado de dividir el contenido de la denominada ‘CM’ por 2.54. Y, así, en alguna parte de la página y en lenguaje JS, se debe establecer que ‘conv()’ debe desencadenar ‘escriba en la caja de texto denominada ‘PULG’ el resultado de dividir el contenido de la denominada ‘CM’ por 2.54.’, es decir, se deben asociar ambas cosas, la denominación con su definición. La definición de la función se realiza entre etiquetas <SCRIPT></SCRIPT>, típicamente en la cabecera de la página HTML, y la asociación buscada se obtiene en la mera coincidencia entre el nombre del manejador de evento y la denominación de una función definida. Dicho sea de paso, esto permite la definición de funciones que no son manejadores de eventos.

  10. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript <HTML> <HEAD> <TITLE>cm a pulgadas</TITLE> <SCRIPT LANGUAGE='JavaScript'> function conv(f) { // manejador del evento Click para el botón ‘cm_a_pulg’ f.PULG.value = f.CM.value / 2.54; } </SCRIPT> </HEAD> <BODY BGCOLOR='YELLOW'> <H2>Conversor de cm a pulgadas (consigne el valor en cm y oprima luego el botón) </H2> <P> <FORM NAME='form_cm_a_pulg'> <INPUT TYPE='TEXT' NAME='CM' SIZE='5'> cm &nbsp;&nbsp;&nbsp; <INPUT TYPE='BUTTON' NAME='cm_a_pulg' VALUE='Convertir' onClick='conv(this.form)'> &nbsp;&nbsp;&nbsp; <INPUT TYPE='TEXT' NAME='PULG' SIZE='5'> pulgada(s) </FORM> </BODY> </HTML>

  11. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript <HTML> <HEAD> <TITLE>cm a pulgadas</TITLE> <SCRIPT LANGUAGE='JavaScript'> function conv(f) { // manejador del evento Click para el botón ‘cm_a_pulg’ f.PULG.value = f.CM.value / 2.54; } </SCRIPT> </HEAD> ... </HTML> Para el manejador del ejemplo caben las siguientes observaciones: El código JS se ubica entre etiquetas <SCRIPT></SCRIPT> de HTML. Cuando el intérprete HTML lee estas etiquetas de inmediato transfiere la tarea de seguir la interpretación al intérprete JS (en caso de estar habilitado en el navegador). Normalmente, el texto JS se ubica en la cabecera del documento HTML, es decir, en la sección definida entre las etiquetas <HEAD> y </HEAD>.

  12. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript function conv(f) { // manejador del evento Click para el botón ‘cm_a_pulg’ f.PULG.value = f.CM.value / 2.54; } Para JS, los manejadores de eventos se denominan genéricamente funciones. De ahí la palabra inicial de la definición function, seguida de la denominación ‘conv()’ adoptada. En efecto, se pueden crear en JS funciones de servicio que no sean manejadoras de eventos aunque todos los manejadores de eventos son funciones. Esto es, los manejadores de eventos son un subconjunto de las funciones. funciones de JS manejadores de eventos Así como en HTML es posible colocar comentarios, entre etiquetas <!-- y -->, en JS también se lo puede hace, antecediendo cada línea por //, o bien encerrando todo un bloque (várias líneas) entre /* y */. Y, finalmente, la sentencia interesante: f.PULG.value = f.CM.value / 2.54; cuya interpretación (para nosotros y para el intérprete JS!) es la siguiente: asigne a la propiedad ‘value’ de la caja denominada ‘PULG’ que está en el formulario indicado por ‘f’, el resultado de dividir el contenido de la caja denominada ‘CM’ y que está en el formulario indicado por ‘f’, por 2.54.

  13. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript f.PULG.value = f.CM.value / 2.54; asigne a la propiedad ‘value’ de la caja denominada ‘PULG’ que está en el formulario indicado por ‘f’, el resultado de dividir el contenido de la caja denominada ‘CM’ y que está en el formulario indicado por ‘f’, por 2.54. Todo eso dice ? La asignación es una de la sentencias básicas de cualquier lenguaje procedural. Mediante un asignación se modifica un valor, por ejemplo, el contenido de una caja de texto. La redacción correcta (o sintaxis) de una asignación en JS es: nombre de lo que se va a modificar = expresión cuya evaluación produce el valor a asignar ; Toda expresión que el intérprete halla en su camino es evaluada y se produce un valor como resultado de la evaluación. Este valor puede ser parte de una asignación, como en el ejemplo, o bien servir a otros fines.

  14. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript En efecto, una expresión es una formulación válida para JS, consiste en una lista de operandos y operadores, cuya evaluación produce un valorde un tipo válido para JS (numérico, alfanumérico -cadenas o strings- o lógico) (hay otros tipos posibles pero no serán abordados en detalle en el curso). Los operandos pueden ser constantes o expresiones y los operadores son los previstos en JS para operar sobre esos operadores. Así, una expresión es una secuencia de constantes y expresiones, unidas mediante operandos adecuados, correctamente escrita en JS, y cuya evaluación produce un valor. // Por ejemplo… 20 //expresión que consiste en una constate numérica 20 + 40 //expresión que representa a la operación suma aritmética de dos constantes ‘hola’ //expresión que consiste en una constate alfabética TRUE //expresión que consiste en una constate lógica cm.value = 20 / 50 //expresión que asigna el resultado de evaluar 20/50 pulg.value = 22 * (cm.value - 11.0) cm.value = ‘valor’ + ‘ ’ + ‘inválido!’

  15. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Fuera de las sentencias de asignación, las sentencias lógicas o de control revisten particular interés porque son parte inseparable de un segundo tipo de operaciones de los lenguajes procedurales, que complementa a las asignaciones: las operaciones de control. Mediante estas es posible hacer que se tomen decisiones en forma automática. A diferencia de la asignación, que es única, hay varias formas de sentencias de control, especializada cada una para diversas situaciones. Por ejemplo, y volviendo a la página de conversión de unidades, no sería interesante proveer a la función conv() con la posibilidad que convierta a las unidades adecuadas según se halla consignado un valor en la caja de la derecha o la de la izquierda ?

  16. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Determinar en qué caja se ha escrito un valor tiene el carácter de sentencia lógica (en el fondo, de una pregunta). En efecto, que haya un valor en una caja solo puede ser verdadero o falso! Y, para implementar lo mencionado se debiera redactar en JS algo como lo siguiente: Si (el contenido en la caja denominada ‘CM’ no es vacío) entonces asigne a la propiedad ‘value’ de la caja denominada ‘PULG’ que está en el formulario indicado por ‘f’, el resultado de dividir el contenido de la caja denominada ‘CM’ y que está en el formulario indicado por ‘f’, por 2.54. Sino asigne a la propiedad ‘value’ de la caja denominada ‘PULG’ que está en el formulario indicado por ‘f’, el resultado de multiplicar el contenido de la caja denominada ‘PULG’ y que está en el formulario indicado por ‘f’, por 2.54. es decir... function conv(f) { if (f.CM.value != '') f.PULG.value = f.CM.value / 2.54; else f.CM.value = f.PULG.value * 2.54; } Es la pregunta adecuada ? -1

  17. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Si se verifica tal condición Con esto se ha conseguido que el comportamiento de la función se adapte en forma automática a diversas situaciones previsibles -en este caso solo dos-. Utilizando una representación más conocida... Haga ésto... Haga lo otro... Y cómo se interpreta la sintaxis de la pregunta ? La pregunta (condición a verificar) dice: Si‘f.CM.value’ no está vacío entonces asigne a PULG.value... caso contrario asigne a CM.value... function conv(f) { if (f.CM.value != '') f.PULG.value = f.CM.value / 2.54; else f.CM.value = f.PULG.value * 2.54; } Si bien esta operación de control (if) es típica no es única, existiendo otras de estructura apropiada para otros fines, principalmente para gobernar comportamientos repetitivos. Se las presentará más adelante.

  18. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript ** VARIABLES ** En matemática se utiliza el concepto de variable como una denominación genérica para representar valores de determinado tipo. En efecto, y = a2x2 + a1x + a0 , x, y, ai  tiene variables y, x, a2, a1 y a0 que representan a cualquier número real. En efecto, 10 = 3 * 12 + 2 * 1 + 5 y 29 = 3 * 22 + 2 * 6 + 5 son ambas ejemplos de la misma ecuación para valores puntuales diferentes de las mismas variables. Se podría asimilar una variable a un caja en que se pueden colocar diferentes contenidos. La forma, color y demás características de la caja son inmutables, salvo su contenido, que puede asumir diferentes valores aunque solo uno por vez. Para la ecuación de más arriba, por ejemplo, solo números reales. X …y conoce algún ejemplo informático de estas características ?

  19. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Claro! Las celdas de una planilla electrónica de cálculo como MSExcel tienen, justamente, este comportamiento. Por ejemplo, la celda X2 es siempre la celda X2. Lo único que puede cambiar es su contenido o aspecto y, por cierto, solo puede contener un valor a la vez. Podrá esta celda contener un valor numérico, o una fecha o una cadena de caracteres, y, dependiendo del tipo de contenido (tipo de dato), diferentes operaciones podrán aplicársele, pero se sostiene que, sea lo que fuera que contenga, se trata de solo un valor por vez. Más aún, cada celda no es sino una representación visual de un sitio específico en la memoria principal de la computadora. Hola! 227.3 =X2*A3 24/03/03 De modo similar y para muchas situaciones los lenguajes de programación -JS en particular- requieren de variables para representar y almacenar información. En efecto, la finalidad preponderante de una variable JS es conservar un valor que luego se utilizará con algún propósito. Al igual que nuestra propia memoria, sirve para conservar información que en algún momento (futuro!) será de utilidad.

  20. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript A diferencia de sus parientes matemáticas y a igualdad con las celdas de MSExcel, las variables de un programa JS tienen existencia física en la memoria de la computadora, de hecho, ocupando uno, dos o más Bytes de la memoria primaria cuando el programa está siendo ejecutado. El intérprete JS es el encargado, cada vez que advierte nuestra intención de crear una variable, (a) de buscarle un lugar en la RAM (una dirección de inicio), (b) de asociarle la denominación que se haya elegido, y (c) de guardar dicha asociación. 0100 X 0101 0110 0111 1101 1110 El intérprete JS advierte nuestra intención de crear una variable cada vez que en el lado izquierdo de una asignación halla un nombre por vez primera. En esas condiciones procede con los pasos (a), (b) y (c) antedichos. A = 100; Velocidad = A * 10; Dia = ‘LUNES’; La regla para elegir nombres válidos para variables (y para funciones) JS es la siguiente: una secuencia de letras, dígitos y guión-bajo para la que el 1er carácter debe ser una letra. (Atención: JS distingue mayúsculas de minúsculas!)

  21. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Así, una variable ocupa un sitio de la memoria primaria al que el intérprete JS ha asociado una denominación (el nombre de la variable). En estas condiciones, es clara la razón por la que una variable solo puede contener un valor a la vez. Mediante las sentencias del programa el programador indica cómo se denomina cada variable y cuál va a ser contenido en cada momento. El intérprete JS se encarga del resto. Una forma alternativa de crear variables en JS es mediante la sentencia var. Ésta, seguida de las denominaciones de las variables que se deseen crear, indica al intérprete JS que debe proceder con los pasos (a), (b) y (c) antes mencionados aún sin asignar valor alguno al espacio reservado. var A , Velocidad, Dia; ... A = 100; Velocidad = A * 10; Dia = ‘LUNES’; ... function prueba_1() { var B, Cartel; Cartel = ‘Valor para la variable ?’; A = prompt(Cartel, ‘0’); alert(A); B = 500; alert(A + B); } Por supuesto, para ensayar esta función habrá que convertirla o utilizarla en un manejador de evento. Cómo ?

  22. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript • Como se dijo, características de una variable son: • denominación • espacio que ocupa en la memoria • valor que contiene en cada momento • hay dos características adicionales de suma importancia: • tiempo de vida • alcance (o visibilidad) Una variable es una asociación entre una denominación y un espacio en la memoria 1ria. Cuánto tiempo dura esta asociación ? Comienza cuando la variable se crea. Finaliza -desapareciendo la variable- cuando se cierra la ventana del navegador ? O cuando se carga una nueva página ? O permanece hasta que se apaga la computadora ? El tiempo de vida de una variable está asociado a este concepto y funciona del siguiente modo: Si una variable es creada mediante la sentencia var en el contexto de una función, su tiempo de vida finaliza cuando la función termina. Caso contrario, el tiempo de vida de una variable se extiende desde su creación hasta que la página que la creo es reemplazada por otra, hasta que la ventana que la contiene sea cerrada, o hasta que se apague la computadora, lo que ocurra primero.

  23. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript En el 1er caso la variable se denomina de tipo automática (o dinámica) y es re-creada cada vez que la función es vuelta a invocar. Esto último implica que muy posiblemente ocupe en cada nueva creación una ubicación diferente en la memoria principal. La otra clasificación para el tiempo de vida se denomina estática (la coincidencia con la clasificación de páginas web es circunstancial). function prueba_uno() { var A, Cartel; // automáticas: existen hasta el fin de la función Cartel = ‘Valor para la variable ?’; A = prompt(Cartel, ‘0’); alert(A); B = 500; // estática: es creada y existe más allá del fin de la función alert(A + B); } function prueba_dos() { prueba_uno(); //observe: invocación a función que no es manejadora de evento alert(A); // dará un error ! (A no existe en el contexto de prueba_dos()) alert(B); // valdrá 500 ! var A = ‘Lunes’; //se crea A como variable automática y se incializa con ‘Lunes’ alert(A); //ahora A sí existe ! }

  24. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript La visibilidad (o alcance) de una variable tiene que ver con cuáles funciones tienen acceso a utilizar y modificar el valor de una variable. En efecto, en este sentido hay variables locales y globales. Las globales son accesibles desde cualquier punto del código. Las locales solo dentro del contexto de las funciones en que son creadas. Si una variable es creada mediante la sentencia var en el contexto de una función, su alcance es la propia función. Caso contrario la variable es global. Entonces, qué diferencia hay entre las variables dinámicas y las locales ? Para JS, las variables automáticas son a su vez locales. Las variables estáticas son a su vez globales. En JS es posible hacer que una variable local sea a la vez estática, pero es una prestación para un propósito avanzado que no será abordado. var G; //G global var L1; //L1 local // L2, L3 inaccesibles var L2; //L2 local // L1, L3 inaccesibles var L3; //L3 local // L1, L2 inaccesibles En estos casos, la invisibilidad (o inaccesibilidad) está directamente justificada directamente en la inexistencia de las variables L1, L2 y/o L3 según el caso.

  25. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript var G = ‘soy global’; // **atención**: sentencia exterior a toda función! function prueba_uno() { var L1 = ‘vivo en prueba_uno()’ alert(G); //mostrará ‘soy global’ alert(L1); //mostrará ‘vivo en prueba_uno()’ alert(L2); //dará un error porque L2 no existe alert(L3); //dará un error porque L3 no existe } function prueba_dos() { var L2 = ‘vivo en prueba_dos()’ alert(G); //mostrará ‘soy global’ alert(L1); //dará un error porque L1 no existe alert(L2); //mostrará ‘vivo en prueba_dos()’ alert(L3); //dará un error porque L3 no existe } function prueba_tres() { var L3 = ‘vivo en prueba_tres()’ alert(G); //mostrará ‘soy global’ alert(L1); //dará un error porque L1 no existe alert(L2); //dará un error porque L2 no existe alert(L3); //mostrará ‘vivo en prueba_tres()’ }

  26. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Suponga que en nuestro formulario de conversión de cm a pulgadas deseamos llevar una cuenta de la cantidad de veces que se convierten valores, o de la suma de longitudes en cm que se han convertido hasta el momento. Cómo haría eso ? La ‘cantidad de veces que se se han convertido valores’ o ‘la suma de longitudes en cm que se han convertido’ son datos que deben tener una representación interna en la memoria para poder ser manipulados (para acumular valores, en este caso). Es clara la conveniencia de utilizar variables. cantidad de veces que se se han convertido valores suma de longitudes en cm que se han convertido Lo que estamos buscando es que, cada vez que se produce una nueva conversión (mediante el click del botón denominado ‘cm_a_pulg’ y la consecuente invocación al manejador ‘conv()’ del evento onClick), se incremente en 1 la cuenta de cantidad de conversiones y en la cantidad de cm convertidos la suma correspondiente. Genéricamente, buscamos que se modifique el valor de una o más variables. Y para esto ya teníamos una operación: la asignación.

  27. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript function conv(f) { if (isNaN(f.CM.value) || f.CM.value == '') //obsere, de paso, el uso de la fc. isNaN() alert('debe dar una magnitud numérica!'); else { f.PULG.value = f.CM.value / 2.54; CantConversiones++; SumaCMConvertidos = SumaCMConvertidos + parseInt(f.CM.value); } } Se han introducido las variables CantConversiones y SumaCMConvertidos y se las ha ubicado en sendas sentencias de asignación, haciendo que, cada vez que se verifica la calidad numérica del valor a convertir, se incremente en 1 la cuenta de conversiones y en la cantidad de cm a convertir la suma de cm convertidos. Observe que se han dado a las variables denominaciones adecuadas a su propósito. (las variables deben ser bautizadas para poder ser usadas!) Complementariamente, se debiera alterar el código HTML incorporando la posibilidad que algún evento de lugar a exponer los valores acumulados para la cuenta de conversiones y la suma de cantidades convertidas. Por ejemplo, un botón adicional sería apropiado al efecto.

  28. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript <BODY BGCOLOR='YELLOW'> <H2>Conversor de cm a pulgadas (consigne el valor en cm y oprima luego el botón) </H2> <P> <FORM NAME='form_cm_a_pulg'> <INPUT TYPE='TEXT' NAME='CM' SIZE='5'> cm &nbsp;&nbsp;&nbsp; <INPUT TYPE='BUTTON' NAME='cm_a_pulg' VALUE='Convertir' onClick='conv(this.form)'> &nbsp;&nbsp;&nbsp; <INPUT TYPE='TEXT' NAME='PULG' SIZE='5'> pulgada(s) <INPUT TYPE='BUTTON' NAME=’val_acum' VALUE=’valores acumulados' onClick=’valores_acumulados()'> </FORM> </BODY> Y para el manejador correspondiente bastaría lo siguiente: function valores_acumulados() { alert(’cantidad de conversiones: ’ + CantConversiones); alert(’suma de valores convertidos: ’ + SumaCMConvertidos); } A ser también ubicada junto a conv(), en la cabecera del archivo HTML, entre las etiquetas <SCRIPT> y </SCRIPT>.

  29. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Se podría considerar a la propiedad ‘value’ de las cajas de texto (o la de otros elemento de diálogo de HTML que la tengan) como variables para JS ? ** FUNCIONES ** FUNCIONES ** FUNCIONES ** y más FUNCIONES ** Cuando se definieron los manejadores de eventos se mencionó que eran un subconjunto de las funciones, pudiendo haber funciones que no son manejadores de eventos. Más aún, para ensayar las funciones usadas como ejemplo se las debió asociar con eventos. funciones de JS manejadores de eventos Qué propósito podrían tener las funciones que no son manejadores de eventos y, en todo caso, cómo se las invoca ? (obs.: ya se presentó un ejemplo) Las funciones genéricas implementan tareas de servicio definidas a discreción y según conveniencia a los efectos de encapsular operaciones de su uso frecuente y/o para mejorar la legibilidad de los programas. Por ejemplo, y siguiendo con la conversión a pulgadas, suponga que interesa acotar a a dos decimales la presentación de los valores acumulados y su promedio.

  30. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Primera cuestión… cómo acotar a N -por ejemplo, 2- la cantidad de decimales de la presentación de un valor real ? Por ejemplo, para 3.14159267, la presentación en dos decimales -N = 2- sería 3.14. a) 3.14159267 * 100 --> 314.159267 b) enteros(314.159267) --> 314 c) 314 / 100 --> 3.14 Una posibilidad es multiplicar por 100, tomar la parte entera y luego dividir por 100. a) Y <-- X * 10N b) Z <-- enteros(Y) c) resultado <-- Z / 10N …y para N decimales y cualquier valor real X ? Para eso hay que observar que 100 = 102 y, en general, para N decimales, cabría adoptar 10N. Si se tratara de matemática se podría haber definido una función que represente el procedimiento f(X,N) = enteros(X * 10N ) / 10N De modo similar, en un programa JS se pueden también definir funciones a voluntad que, sin estar destinadas necesariamente a ser manejadores de eventos, sirvan a algún fin particular.

  31. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript a) Y <-- X * 10N b) Z <-- enteros(Y) c) resultado <-- Z / 10N f(X,N) = enteros(X * 10N ) / 10N functionacotar_decimales(X, N) { Y = X * Math.pow(10, N); Z = Math.floor(Y); return(Z / Math.pow(10, N); } Al igual que en los manejadores de eventos, la definición de una función JS principia con la palabra reservada function y continúa con su denominación de bautizmo, en este caso, ‘acotar_decimales’. Siguen luego entre peréntesis () los así denominados argumentos de la función y finaliza la definición con el cuerpo de la misma, entre llaves {}. Los argumentos de la función, tal como ocurre en matemática, sirven a los efectos de representar mediante variables los posibles valores con que la función debe trabajar. En la definición al tope figura f(X,N), donde X y N representan todos los posibles valores para la cantidad cuyos decimales se van a acotar y N el número de decimales a tener en cuenta. Así, acotar_decimales(X, N), servirá (está definida) para cualquier valor de X y cualquiera de N. Claro, ambos deberían ser numéricos y, además, N debe ser entero.

  32. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Al igual que los manejadores de eventos conv() y valores_acumulados(), acotar_decimales() se puede ubicar en la cabecera del archivo HTML, entre las etiquetas <SCRIPT> y </SCRIPT>. <SCRIPT LANGUAGE='JavaScript'> function conv(f) { if (isNaN(f.CM.value) || f.CM.value == '') alert('debe dar una magnitud numérica!'); else { f.PULG.value = f.CM.value / 2.54; CantConversiones++; SumaCMConvertidos = SumaCMConvertidos + parseInt(f.CM.value); } } function valores_acumulados() { alert(’cantidad de conversiones: ’ + CantConversiones); alert(’suma de valores convertidos: ’ + SumaCMConvertidos); } function acotar_decimales(X, N) { Y = X * Math.pow(10, N); Z = Math.floor(Y); return(Z / Math.pow(10, N)); // return(), predefinida en JS } </SCRIPT>

  33. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Segunda cuestión: cómo utilizar una función, por ejemplo acotar_decimales() ? De la misma forma que las funciones predefinidas de JS ya vistas (isNaN(),alert(), prompt()), y las ya conocidas de MSExcel. function valores_acumulados() { alert(’cantidad de conversiones: ’ + CantConversiones); alert(’suma de valores convertidos: ’ + acotar_valores( SumaCMConvertidos, 2 )); alert(‘promedio: ’ + acotar_valores(SumaCMConvertidos / CantConversiones, 2)); //recordar que acotar_valores() devuelve un valor! } Así, las funciones genéricas de JS se comportan como las matemáticas o las de MSExcel: se les asigna valores a sus argumentos y “de inmediato” retornan un valor que corresponde a su evaluación para esos valores. Una observación importante: la asociación de los argumentos entre invocación y definición de una función es de carácter posicional. Esto significa que, por ejemplo, entre acotar_decimales(X, N) {...} (definición)y acotar_valores(SumaCMConvertidos, 2); (una invocación), a X corresponderá SumaCMConvertidos (por el solo hecho de ser 1ro. en la lista de argumentos) mientras que a N corresponderá 2 (por el solo hecho de ser el 2do.).

  34. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Se podrá escribir código JS fuera del contexto de funciones ? Todo lo que el intérprete HTML halla entre etiqueta etiquetas <SCRIPT> y </SCRIPT>.es derivado al intérprete JS, asumiendo que se trata de código JS. Esto involucra tanto definición de funciones como a sentencias fuera del contexto de funciones. Estas últimas son interpretadas y ejecutadas en la misma secuencia en que son leídas por el intérprete. Como consecuencia, no se requiere de la ocurrencia de evento alguno para su acción. <HTML> <HEAD> </HEAD> <BODY> <SCRIPT LANGUAGE = ‘JavaScript’> Mensaje = ‘Digite la hora actual…’ Hora = prompt(Mensaje, “00:00”); Hora = ‘ya no son las ’ + Hora + ‘…’; </SCRIPT> <FORM> <INPUT TYPE = ‘BUTTON’ onClick=‘alert(Hora);’> </FORM> </ BODY> </HTML> Una última cuestión: antes de comenzar la redacción de una función debe tener claro en su mente qué y cómo deberá trabajar !!! …return();

  35. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript ** OTRAS SENTENCIA DE CONTROL ** Cómo hacen las hormigas para trasladar toda una pila de arena ? function impares() { var I = 1; alert(I); I = I + 2; alert(I);I = I + 2; alert(I); I = I + 2; alert(I); I = I + 2; alert (I); } Es muy frecuente que en el desarrollo de una función, se trate o no de un manejador de eventos, se decida que una tarea debe ser repetida dos o más veces. Por ejemplo, suponga que se desea presentar los 5 1ros números impares. Cómo procedería ? …y si deseara obtener los 1ros. N números impares ? La naturaleza de la tarea es claramente repetitiva (repetir sumas y presentar el resultado). Más aún, como están planteadas las cosas, habría que construir una función distinta para cada N. Poco flexible… Felizmente, todos los lenguajes procedurales proveen herramientas específicas para manejar repeticiones a voluntad.

  36. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Suponga poder contar con una sentencia que implemente la siguiente posibilidad: K = 1 Para K a partir de 1 y en tanto K nosupere N, repita una tarea y luego sume 1 a K. K >= N ? no tarea .,.sería para Ud. La solución buscada! K = K +1 La sentencia correspondiente en JS se denomina ‘ lazo for’ y su sintáxis es la siguiente: for (K = 1; K < N; K = K + 1) {//tarea a repetir} O, más genéricamente, for (VbleDeControl = ValorInicial; CondDeFin; ModifVbleControl) { //tarea a repetir (cero o más sentencias) } (Observe que se repite todo un bloque (cero o más sentencias))

  37. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript for (VbleDeControl = ValorInicial; CondDeFin; ModifVbleControl) {//tarea a repetir} VbleDeControl = ValorInicial Lo que podría resolver el problema del siguiente modo: alcanza CondDeFin ? no tarea a repetir function impares(N) { var I = 1; for (k = 1; k <= N; k = k+1) { alert(I);I = I + 2; } } si ModifVbleControl Y otro: listado de las casillas del triángulo superior de una matriz cuadrada de lado N. Otro ejemplo: listado de todos los múltiplos de M, desde M y hasta L. function triángulo_superior (N) { for (Fil = 1; Fil <= N; Fil = Fil +1) for (Col = 1; Col <= N; Col = Col +1) if (Col >= Fil) alert(Fil + ‘ - ’ + Col); } function multiplos (M, L) { for (i = M; i <= L; i = i+M) alert(i); }

  38. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Las sentencias de repetición no están limitadas en JS al lazo for. De hecho, habrá observado que una de la condiciones de este lazo requiere conocer previo a su inicio cuál es la condición que gobierna su finalización. Otras estructuras de repetición no requieren de este conocimiento previo. Por ejemplo, el lazo while (del inglés, ‘mientras’). Este presenta el siguiente comportamiento: Condición verdadera ? si Mientras sea verdadera un condición, reitere un tarea. tarea a repetir no function division_entera (N, Q) { D = 0; while (N >= Q) { N = N - Q; D = D + 1; //o bien D++; } return(D); } function validar_clave (ClaveCorrecta) { ClaveOK = 0; while (ClaveOK == 0) { ClaveDigitada = prompt(“digite la clave”, “”); if (ClaveDigitada == ClaveCorrecta) ClaveOK = -1; else { alert(“Clave incorrecta. Intente nuevamente.”); ClaveOK = 0; } } }

  39. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Arreglos Cada mañana, en la oficina de correo, se organiza la correspondencia previo a ser distribuida entre los carteros para su reparto. Cómo cree Ud. que se debiera realizar esta organización postal ? Cree Ud. que en la bolsa de cada empleado se debieran despositar cartas al azar para su posterior reparto ? O más bien convendría elegirlas favoreciendo algún criterio ? Una posibilidad sería intentar minimizar el recorrido de los carteros. Otra, reducir el riesgo de que se los catreros pierdan, por ejemplo, asignando cartas de la misma calle. En este último caso bastaría que cada cartero supiera la calle -única- en que debe repartir y, en lo sucesivo, bastaría con que se fijara la altura de la misma a que va dirigida cada carta, comenzando desde su extremo. 120 140 160 180 San Martín 130 150 170 En JS -y, a ciencia cierta, en todos los lenguajes de programación procedurales de alto nivel- existe la posibilidad de contar con variables que responden a este mismo tipo de organización: una denominación única para todo un grupo de celdas o casillas que solo se distinguen unas de otras mediante el número de su dirección. Este tipo de variables se denominan variables subindicadas o arreglos. (observe la similitud con la organización con la memoria RAM)

  40. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Hasta el momento, el concepto de ‘variable’ presentado consistió en la analogía con una caja con una denominación, un tipo de dato (numérico, alfanumérico, lógico, etc.) y un contenido. Esta ‘forma’ de variables es sin duda imprescindible para conseguir que mediante una función se llegues a implementar algunos comportamientos básicos. X Y sin duda es mucho lo que puede hacer con estas variables simples. Pero su extrema simplicidad presenta fronteras. No sirven para cualquier cosa. Veamos un ejemplo casi trivial… Suponga que debe construir una función que requiera dos valores de texto y presente como resultado la cadena que forman. function dos_valores () { A = prompt(‘digite el 1er texto...’, ‘’); B = prompt(‘digite el 2do texto...’, ‘’); alert(A + B); } Suponga ahora que deben ser tres valores alfanuméricos. function tres_valores () { A = prompt(‘digite el 1er texto...’, ‘’); B = prompt(‘digite el 2do texto...’, ‘’); C = prompt(‘digite el 3er texto...’, ‘’); alert(A + B + C); } …y si debieran ser N valores ?

  41. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript 0 1 2 3 4 5 ... El impedimento en este caso consiste, claramente, en que, al ser N desconocido, no es posible disponer en la código de la ‘N’ variables necesarias. Es en casos como éste cuando los arreglos vienen en nuestro auxilio. A Como se dijo, los arreglos son una colección de casillas iguales, todas bajo la misma denominación e individualizables mediante una dirección -o índice- numérico. En esas condiciones, una función como la mostada haría eficientemente el trabajo requerido. function N_valores (N) { for (i=0; i<N; i++) A[i] = prompt(‘digite el texto...’, ‘’); R = ‘’; for (i=0; i<N; i++) R = R + A[i]; alert(R); } La sintaxis que da acceso a cada casilla de un arreglo, por ejemplo, uno denominado X[], es X[<expr>], donde X representa a la denominación genérica para todo el arreglo, y el par de corchetes están reservados para consignar en su interior la dirección -numérica- de la casilla que se desea visitar, por ejemplo, mediante una constante, mediante una variable (como en la fc. N_Valores()) o, en general, mediante una expresión numérica cualquiera. De hecho, que el índice de un arreglo pueda provenir de la evaluación una expresión numérica cualquiera es lo que confiere verdadera flexibilidad a la construcción.

  42. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Siendo la 1er casilla de los arreglos en JS la número 0 (recordar ésto!), entonces, por ejemplo, la 3er casilla de un arreglo X[] es X[2]. A la casilla I-ésima sigue la (I+1)-ésima y, la N-esima, está en la celda N-1. 0 1 2 3 4 5 ... Claramente, los lazos repetitivos (for, while) están muy emparentados con los arreglos dado que sus casillas se pueden recorrer mediante variables que apunten a las diferentes direcciones y, esta tarea de recorrida consiste entonces en, repetitivamente, modificar en forma adecuada el valor de estos apuntadores, sin ir más lejos, como en el ejemplo previo. A i A[i] Un caso típico del uso de arreglos consiste en ordenar en forma creciente o decreciente N valores. Ordenar solo dos es trivial. Basta una pregunta. Para ordenar 3 ya se requieren 5 preguntas, y para 4, 23 preguntas, pero, aun cuando pudiéramos manejar con simplicidad estan N!-1 preguntas, cómo representar solo con variables simples a esos N valores ? Mediante arreglos. If (A > B) { Mayor = A; Menor = B; } else { Mayor = B; Menor = A; } If (A > B) if (B > C) { Mayor = A; Medio = B; Menor = C; } else ...

  43. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Un enfoque empírico adecuado para resolver el problema se podría basar en explicar cómo haría Ud. para ordenar N tarjetas numeradas. Una posibilidad es la siguiente: Buscar entre todas las tarjetas la de menor valor. Una vez encontrada ubicarla en 1er lugar. Con las que quedan y en tanto no sea una sola, reiterar el procedimiento. Dicho en otros términos…: En tanto la cantidad de tarjetas *aun no ordenadas* sea mayor que 1, buscar entre todas ellas la de menor valor y, hallada, ubicarla al final de las ya ordenadas. 10 8 30 25

  44. 10 8 10 30 8 25 30 25 30 25 25 10 10 30 8 8 Y funciona para cualquier N ! Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript 10 8 30 En tanto la cantidad de tarjetas *aun no ordenadas* sea mayor que 1, buscar entre todas ellas la de menor valor y, hallada, ubicarla al final de las ya ordenadas. 25 -5

  45. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript En JS (‘ordenar.html’): function leer_ordenar_mostrar() { var A = new Array(); N = prompt(‘cant de valores ?’, 0); leer(A, N); mostrar(A, N); ordenar(A, N); mostrar(A, N); } function ordenar (A, N) { for (I=0; I<N-1; I++) { MenorEn = I; for (J=I+1; J<N; J++) if (A[J] < A[MenorEn]) MenorEn = J; intercambio(A, I, MenorEn); } } function leer (A, N) { for (i=0; i<N; i++) A[i] = parseInt(prompt(‘digite el valor...’, ‘’)); } function intercambio (A, Y, Z) { Temp = A[Y]; A[Y]= A[Z]; A[Z] = Temp; } function mostrar(A, N) { Result = ‘’; for (i=0; i<N; i++) Result = Result + ‘, ’ + A[i]; alert(Result); } Observe que los arreglos pueden ser sin inconveniente alguno parámetros de funciones tanto como lo son las variables simples.

  46. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript function ordenar (A, N) { for (I=0; I<N-1; I++) { MenorEn = I; for (J=I+1; J<N; J++) if (A[J] < A[MenorEn]) MenorEn = J; intercambio(A, I, MenorEn); } } function intercambio (A, Y, Z) { Temp = A[Y]; A[Y]= A[Z]; A[Z] = Temp; } 10 30 8 25 I MenorEn J A[J]<A[MenorEn] ------------------------------------------ 0 0 1 NO 0 0 2 SI 0 2 3 NO 0 1 2 3 8 30 10 25 0 1 2 3 I MenorEn J A[J]<A[MenorEn] ------------------------------------------ 1 1 2 SI 1 2 3 NO 8 10 30 25 0 1 2 3

  47. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript function ordenar (A, N) { for (I=0; I<N-1; I++) { MenorEn = I; for (J=I+1; J<N; J++) if (A[J] < A[MenorEn]) MenorEn = J; intercambio(A, I, MenorEn); } } function intercambio (A, Y, Z) { Temp = A[Y]; A[Y]= A[Z]; A[Z] = Temp; } 8 10 30 25 I MenorEn J A[J]<A[MenorEn] ------------------------------------------ 2 2 3 SI 0 1 2 3 8 10 25 30 0 1 2 3 8 10 25 30 0 1 2 3

  48. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Finalmente, es importante mencionar que los arreglos no están limitados a contener solo tipos simples de datos (numéricos, alfanuméricos o lógicos). En efecto, las celdas de un arreglo pueden contener… otros arreglos! …y cómo luciría un arreglo dentro de una celda de otro ? 0 1 2 ... 0 1 2 ... 0 1 2 ... ... T 0 1 2 Claramente ahora, al apuntar a una celda de T[] se hace referencia al arreglo que contiene y, si de desea acceder a un de sus celdas, entonces hace falta un direccionamiento adicional. En efecto... T[i] [j] El 1er índice indica las celdas ‘principales’ y el 2do las ‘secundarias’.

  49. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Conoce en la vida real alguna organización de este tipo ? Por ejemplo, los edificios organizan la denominación de de los departamentos de este modo. Un número indica el piso y otro el departamento. pisos En modo abstracto, esta construcción representa a cualquier organización de información que tenga forma de tabla. dptos Para crear y acceder a tablas basta extender naturalmente (!?) lo ya conocido: var T = new Array(); for (I = 0; I<N; I++) T[I] = new Array(); for (I = 0; I<N; I++) for (J = 0; J<M; J++) T[I][J] = prompt(); (ver ‘matrices.html’) Y siguiendo con los edificios… cómo se podrá representar la organización de los departamentos para edificios en torre ?

  50. Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript Tal como lo está temiendo… con arreglos, dentro de arreglos… DENTRO DE ARREGLOS (dos niveles de anidamiento, es decir, tablas 3D) y si fuera necesario, este anidamiento puede seguir construyéndose en niveles crecientes. T3D Para finalizar con los arreglos y a modo de síntesis, es importante recordar que, más allá de la cantidad de dimensiones (una, dos o más) con que se los requiera, su finalidad principal consiste en posibilitar la representación de colecciones de entidades numerables. Por eso, las tarjetas en una caja, o los departamentos de un edificio, o los días de un mes, o las razas de los perros, o miles de etcéteras, son colecciones aptas para ser representadas mediante este tipo de construcciones. Razas_caninas[] 0 1 2 3 4

More Related