capítulo 5 JavaScript

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 ?)


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


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


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.

HTML JSPá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.


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


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.


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()’.


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


<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 <INPUT TYPE='BUTTON' NAME='cm_a_pulg' VALUE='Convertir' onClick='conv(this.form)'> <INPUT TYPE='TEXT' NAME='PULG' SIZE='5'> pulgada(s) </FORM>

</BODY></HTML>


<HTML> <HEAD> <TITLE>cm a pulgadas</TITLE>



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

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

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


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.

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.


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

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!’


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 ?


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.

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


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 verificatal 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 entoncesasigne 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; }


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 ?

** VARIABLES **


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


0100010101100111

11011110

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!)


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 ?


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.


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 !}


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


var L3; //L3 local


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.


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 sehan convertido valores

suma de longitudes en cmque 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.


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.


<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 <INPUT TYPE='BUTTON' NAME='cm_a_pulg' VALUE='Convertir' onClick='conv(this.form)'> <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>.


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 JSmanejadoresde 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 **


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

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

a) Y <-- X * 10N

b) Z <-- enteros(Y)

c) resultado <-- Z / 10N

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


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 * 10N ) / 10Na) Y <-- X * 10N

b) Z <-- enteros(Y)

c) resultado <-- Z / 10N

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.


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


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>


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


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();


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); I = I + 2; alert(I); I = I + 2; 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 ?


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))


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ónverdadera

?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; } }}


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

SanMartín

120

130

140

150

160

170

180

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)


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 ?


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.

0 1 2 3 4 5 ...

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.


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.

0 1 2 3 4 5 ...

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

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.


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

308

25


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

308

25

10

308

25

10

30 825

30

25

10

8

30

25

10

8

Y funciona para cualquier N !

-5




10 25830

0 1 2 3

I MenorEn J A[J]<A[MenorEn]------------------------------------------ 0 0 1 NO 0 0 2 SI 0 2 3 NO

8 251030

0 1 2 3 I MenorEn J A[J]<A[MenorEn]------------------------------------------ 1 1 2 SI 1 2 3 NO

8 253010

0 1 2 3




I MenorEn J A[J]<A[MenorEn]------------------------------------------ 2 2 3 SI

8 253010

0 1 2 3

8 302510

0 1 2 3

8 302510

0 1 2 3


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]

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

El 1er índice indica las celdas ‘principales’ y el 2do las ‘secundarias’.


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

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();

Y siguiendo con los edificios… cómo se podrá representar la organización de los departamentos para edificios en torre ?

(ver ‘matrices.html’)


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


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 <SCRIPT></SCRIPT>), 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.


Conocer y comprender esta estructura es muy importante para poder aprovechar al máximo las posibilidades que JS ofrece.


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’).


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.

Las propiedades indican las características de cada uno. Los eventos, que estímulos reconocen y a que pueden de responder 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:propiedades (o atributos): NAME, VALUE, etc.eventos: onClick, onBlur, onFocus, onMouseOver, etc.métodos: Click, Blur, Focus, etc.

OK


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’).

capítulo 5 JavaScript

Documents

Transcript of capítulo 5 JavaScript