La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

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

Presentaciones similares


Presentación del tema: "Elementos de Computación - EC2644 - www.lip.uns.edu.ar/ec2644 capítulo 5 - Páginas web dinámicas - JavaScript."— Transcripción de la presentación:

1 Elementos de Computación - EC capítulo 5 - Páginas web dinámicas - JavaScript

2 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 3Las 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. 3Las 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é ?). 3Las 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 - EC 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. 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 Elementos de Computación - EC 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 ? 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. -1

5 Elementos de Computación - EC 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. HTMLJS Páginas web dinámicas 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 - EC 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 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 - EC 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). cm pulgada(s) 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 - EC 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. 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 atributoonEvento=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: 3onClick (al hacer click sobre el botón)(onClick = manejador_de_onClick()) 3onFocus (al recibir el foco) (onFocus = manejador_de_onFocus()) 3onBlur (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 - EC capítulo 5 - Páginas web dinámicas - JavaScript 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 Y, así, en alguna parte de la página y en lenguaje JS, se debe establecer queconv() 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, 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 - EC capítulo 5 - Páginas web dinámicas - JavaScript cm a pulgadas function conv(f) { // manejador del evento Click para el botón cm_a_pulg f.PULG.value = f.CM.value / 2.54; } Conversor de cm a pulgadas (consigne el valor en cm y oprima luego el botón) cm pulgada(s)

11 Elementos de Computación - EC capítulo 5 - Páginas web dinámicas - JavaScript cm a pulgadas function conv(f) { // manejador del evento Click para el botón cm_a_pulg f.PULG.value = f.CM.value / 2.54; }... Para el manejador del ejemplo caben las siguientes observaciones: El código JS se ubica entre etiquetas 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 y.

12 Elementos de Computación - EC 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, 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 - EC capítulo 5 - Páginas web dinámicas - JavaScript 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 f.PULG.value = f.CM.value / 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 - EC 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 valor de 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 //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 ) cm.value = valor + + inválido!

15 Elementos de Computación - EC 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 - EC 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 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 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 decir... Es la pregunta adecuada ? -1

17 Elementos de Computación - EC capítulo 5 - Páginas web dinámicas - JavaScript 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... Si se verifica tal condición 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... 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. function conv(f) { if (f.CM.value != '') f.PULG.value = f.CM.value / 2.54; else f.CM.value = f.PULG.value * 2.54; }

18 Elementos de Computación - EC capítulo 5 - Páginas web dinámicas - JavaScript En matemática se utiliza el concepto de variable como una denominación genérica para representar valores de determinado tipo. En efecto, y = a 2 x 2 + a 1 x + a 0,x, y, a i tiene variables y, x, a 2, a 1 y a 0 que representan a cualquier número real. En efecto, 10 = 3 * * 1 + 5y 29 = 3 * * 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 ? ** VARIABLES **

19 Elementos de Computación - EC capítulo 5 - Páginas web dinámicas - JavaScript 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. 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

20 Elementos de Computación - EC capítulo 5 - Páginas web dinámicas - JavaScript X 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. 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 - EC 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 - EC 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 - EC 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 - EC 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 - EC 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 - EC 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 - EC 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 - EC capítulo 5 - Páginas web dinámicas - JavaScript Conversor de cm a pulgadas (consigne el valor en cm y oprima luego el botón) cm pulgada(s) 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 y.

29 Elementos de Computación - EC 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 ? 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. ** FUNCIONES ** FUNCIONES ** FUNCIONES ** y más FUNCIONES **

30 Elementos de Computación - EC 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 , la presentación en dos decimales -N = 2- sería a) * > b) enteros( ) --> 314 c) 314 / > 3.14 …y para N decimales y cualquier valor real X ? Para eso hay que observar que 100 = 10 2 y, en general, para N decimales, cabría adoptar 10 N. a) Y <-- X * 10 N b) Z <-- enteros(Y) c) resultado <-- Z / 10 N Una posibilidad es multiplicar por 100, tomar la parte entera y luego dividir por 100. Si se tratara de matemática se podría haber definido una función que represente el procedimiento f(X,N) = enteros(X * 10 N ) / 10 N 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 - EC capítulo 5 - Páginas web dinámicas - JavaScript function acotar_decimales(X, N) { Y = X * Math.pow(10, N); Z = Math.floor(Y); return(Z / Math.pow(10, N); } f(X,N) = enteros(X * 10 N ) / 10 N a) Y <-- X * 10 N b) Z <-- enteros(Y) c) resultado <-- Z / 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 - EC 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 y. 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 }

33 Elementos de Computación - EC 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 - EC 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 y.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. Mensaje = Digite la hora actual… Hora = prompt(Mensaje, 00:00); Hora = ya no son las + Hora + …; 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 - EC capítulo 5 - Páginas web dinámicas - JavaScript 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 ? function impares() { var I = 1; alert(I); I = I + 2; alert (I); } …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. ** OTRAS SENTENCIA DE CONTROL ** Cómo hacen las hormigas para trasladar toda una pila de arena ?

36 Elementos de Computación - EC capítulo 5 - Páginas web dinámicas - JavaScript Suponga poder contar con una sentencia que implemente la siguiente posibilidad: Para K a partir de 1 y en tanto K no supere N, repita una tarea y luego sume 1 a K. K = 1 K >= N ? tarea K = K +1 no.,.sería para Ud. La solución buscada! 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 - EC capítulo 5 - Páginas web dinámicas - JavaScript function impares(N) { var I = 1; for (k = 1; k <= N; k = k+1) { alert(I); I = I + 2; } Lo que podría resolver el problema del siguiente modo: for (VbleDeControl = ValorInicial; CondDeFin; ModifVbleControl) {//tarea a repetir} VbleDeControl = ValorInicial alcanza CondDeFin ? tarea a repetir ModifVbleControl no si Otro ejemplo: listado de todos los múltiplos de M, desde M y hasta L. function multiplos (M, L) { for (i = M; i <= L; i = i+M) alert(i); } Y otro: listado de las casillas del triángulo superior de una matriz cuadrada de lado N. 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); }

38 Elementos de Computación - EC 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: Mientras sea verdadera un condición, reitere un tarea. Condición verdadera ? tarea a repetir no si 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 - EC 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. San Martín 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 - EC 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 - EC capítulo 5 - Páginas web dinámicas - JavaScript 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

42 Elementos de Computación - EC capítulo 5 - Páginas web dinámicas - JavaScript 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 iA[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... 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.

43 Elementos de Computación - EC 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

44 Elementos de Computación - EC capítulo 5 - Páginas web dinámicas - JavaScript 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 Y funciona para cualquier N ! -5-5

45 Elementos de Computación - EC capítulo 5 - Páginas web dinámicas - JavaScript function ordenar (A, N) { for (I=0; I

46 Elementos de Computación - EC capítulo 5 - Páginas web dinámicas - JavaScript function ordenar (A, N) { for (I=0; I

47 Elementos de Computación - EC capítulo 5 - Páginas web dinámicas - JavaScript function ordenar (A, N) { for (I=0; I

48 Elementos de Computación - EC 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 ?... T[i] [j] T 012 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... El 1er índice indica las celdas principales y el 2do las secundarias.

49 Elementos de Computación - EC 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. En modo abstracto, esta construcción representa a cualquier organización de información que tenga forma de tabla. pisos dptosdptos Para crear y acceder a tablas basta extender naturalmente (!?) lo ya conocido: var T = new Array(); for (I = 0; I

50 Elementos de Computación - EC 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[] 01234

51 Elementos de Computación - EC capítulo 5 - Páginas web dinámicas - JavaScript Integración entre JS y HTML Para que haya un verdadero matrimonio entre JS y HTML no basta con que HTML tenga un espacio reservado para que JS lo habite (entre las etiquetas ), y que HTML pueda indicarle a JS qué espera de él (invocando a manejadores de eventos) sino que, además, JS debe tener acceso a las estructuras internas de HTML, en particular a cada elemento de cada ventana del navegador. Y esto es posible porque el navegador web expone a JS la así denominada jerarquía de objetos del navegador. Esta jerarquía de objetos del navegador es el esqueleto del navegador web y el acceso a las diferentes vértebras, huesos y costillas, cada uno de estos objetos con sus propiedades, eventos y métodos, permite que JS se sirva libremente de la información que representan y, a su vez, pueda controlarlo según sea necesario. En la jerarquía se hallan representados los elementos de diálogo de un formulario (cajas de texto, botones, listas desplegables, etc.), las imágenes, los hipervínculos, los documentos HTML completos, los frames que los contienen y las ventanas mismas del navegador.

52 Elementos de Computación - EC capítulo 5 - Páginas web dinámicas - JavaScript Conocer y comprender esta estructura es muy importante para poder aprovechar al máximo las posibilidades que JS ofrece.

53 Elementos de Computación - EC capítulo 5 - Páginas web dinámicas - JavaScript Observe por ejemplo, dónde se halla en la estructura el objeto text (nuestra conocida caja de texto). El camino para llegar a ella es: window -> document -> form -> text Este sendero indica que una caja de texto (text) es uno de los posibles objetos que pueden estar contenidos en un formulario (form), formulario que a su vez puede ser parte de un documento HTML (document), documento que por su parte está contenido en una ventana del navegador (window). Por su parte, la imágenes no requieren de un formulario que las contenga y, asi, el camino que lleva a ellas es: window -> document -> image Este sendero indica que una imágen (image) es uno de los posibles objetos que pueden estar ser parte de un documento HTML (document), documento que por su parte está contenido en una ventana del navegador (window).

54 Elementos de Computación - EC capítulo 5 - Páginas web dinámicas - JavaScript Cada uno de estos objetos que el navegador expone a JS (ventanas, marcos, formularios, cajas de texto, botones, etc.) cuentan con propiedades, eventos y métodos. 4 Las propiedades indican las características de cada uno. 4 Los eventos, que estímulos reconocen y a que pueden de responder 4 Los métodos, qué acciones se pueden ejercer sobre ellos. Claramente, cada diferente objeto tendrá distintos representantes para sus propiedades, eventos y métodos, de hecho, poniendo de manifiesto sus características y disímiles personalidades. (y si, de paso, teme que esta colección de objetos tenga o pueda tener algún parentezco con los arreglos, vaya asumiendo que sus sospechas están en camino de resultar acertadas...) Tomamos como ejemplo el objeto button. Se ve en la jerarquía que está ubicado en window -> document -> form -> button y, como ya se ha visto, tiene algunas de las siguientes características: 4propiedades (o atributos): NAME, VALUE, etc. 4eventos: onClick, onBlur, onFocus, onMouseOver, etc. 4métodos: Click, Blur, Focus, etc. OK

55 Elementos de Computación - EC capítulo 5 - Páginas web dinámicas - JavaScript Por lo tanto, si por alguna razón se desea hacer referencia en una función JS a un botón en particular, se deberá individualizar (a) la ventana, (b) el documento, (c) el formulario y (d) el nombre del botón particular, de modo tal que no queden dudas al intérprete JS sobre a qué se hace mención. Afortunadamente, en muchos casos todas estas especificaciones pueden ser asumidas por el intérperete como valores por defecto y no se hace necesario indicarlas explícitamente. A menos, claro, que se desee hacer referencia a objetos diferentes a los implícitamente asumidos por defecto. Es es la razón por la que -habrá observado-, es muy frecuente que los manejadores de evetos tomen como argumentos de invocación a this, o a this.form. El objeto this de JS resulta siempre automáticamente instanciado al elemento de diálogo desde el que se invoca un manejador y, así, al pasar como argumento, la función manejadora gana acceso a los atributos, métodos y eventos del elemento que la invocó, por ejemplo, a los del formulario que lo contiene. De ahí la mención a this.form. Y como, visto desde el formulario, su finalidad es contener a una colección de elementos de diálogo, todos y cada uno puede ser accedidos en forma de arreglo, de hecho, el arreglo elements[]. Así, this.form. elements[] es la colección de elementos de diálogo del formulario desde el que se lo invoca. (ver jerarquia.html).

56 Elementos de Computación - EC capítulo 5 - Páginas web dinámicas - JavaScript

57


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

Presentaciones similares


Anuncios Google