Informática

15

Prof. Gonzalo Müller

gmullerb@mail.com
Facultad de Ingeniería
Universidad Central de Venezuela
Clase Anterior

Datos Agrupados del mismo tipo → Arreglos

Un arreglo esta definido:

Nombre.

Tamaño

Arreglos en VBScript:

Declaración: dim variable(TAMAÑO)

Manejo: variable(índice)

índice ∈ [0, TAMAÑO)

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 2

Clase Anterior

Manejo de un arreglo:

Tamaño

Cantidad ≤ Tamaño.

Bucle.

Contador < Cantidad

Asignación = NO realiza la asignación de todos los

valores del arreglo, pero permite realizar la
clonación arreglo

Arreglos como retorno: No es de gran utilidad

Arreglos como parámetros: por referencia o por
valor
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 3
Eventos

EVENTO

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 4

Eventos

EVENTO

Es algo que ocurre sin “conocimiento previo”

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 5

Eventos

Los eventos son fundamentales en aplicaciones que
tiene interacción visual con el usuario:

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 6

Eventos

Los eventos son fundamentales en aplicaciones que
tiene interacción visual con el usuario:

La aplicación no tiene conocimiento de cuando el

usuario va a interactuar con algún elemento de esta.

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 7

Eventos

Cuando el usuario interactúa con un elemento se
genera un evento:
Interacción Usuario - Aplicación Evento

Clic de Botón

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 8

Manejo de Eventos

Al interactuar con la aplicación el usuario espera una
respuesta de esta:
Interacción Usuario - Aplicación Evento

Clic de Botón

Aplicación

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 9

Manejo de Eventos

Al interactuar con la aplicación el usuario espera una
respuesta de esta:
Interacción Usuario - Aplicación Evento

Clic de Botón

Aplicación

Un evento se puede definir como una señal recibida por la aplicación

debido a una interacción del usuario con un elemento de su interface
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 10
Manejo de Eventos

Un manejador de evento es el encargado de ejecutar la
tarea o el conjunto de tareas pertinentes al activarse un
evento específico.

Clic de Botón

tarea 1

tarea 2
.
Aplicación .
.
tarea N

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 11

Manejo de Eventos

Un elemento de la aplicación es capaz de activar una
gran cantidad de eventos distintos, sólo ese elemento.

Aplicación

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 12

Manejo de Eventos

Un elemento de la aplicación es capaz de activar una
gran cantidad de eventos distintos, sólo ese elemento.

Aplicación

Por esto, es necesario establecer en la aplicación para

cuales elementos y cuales eventos se deben capturar.

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 13

Manejo de Eventos

Un elemento de la aplicación es capaz de activar una
gran cantidad de eventos distintos, sólo ese elemento.

Aplicación

Por esto, es necesario establecer en la aplicación para

cuales elementos y cuales eventos se deben capturar.
Un evento es capaz de enviar información adicional,
como por ejemplo posición del cursor, entre otros
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 14
Programación Orientada a Eventos

Una secuencia de interacciones del usuario con la
aplicación controlan la ejecución del programa:

Evento

Interacción
Usuario - Aplicación

Aplicación

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 15

Metodología de la POE

Diagrama de Casos de Uso
Constituyen un modelo del sistema desde el punto de
vista del usuario, que permite definir claramente como
utilizará el usuario el sistema.
Elementos:

Actor: Entidad que inicia un secuencia de eventos

Sistema.

Caso de Uso: Secuencia de eventos que representan
una interacción entre el Actor y el Sistema, definen
un uso.
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 16
Metodología de la POE

Diagrama de Casos de Uso
Constituyen un modelo del sistema desde el punto de
vista del usuario, que permite definir claramente como
utilizará el usuario el sistema.
Elementos:

Actor: Se representa con un .
nombre
nombre

Sistema: Se representa con un recuadro.

Caso de Uso: Se representa con un ovalo
etiquetado. nombre

Líneas de interconexión.
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 17
Metodología de la POE
Ejemplo: Construir una pagina web con VBScript para
Sumar o Restar 2 números. Construir el Diagrama de
Casos de Uso.

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 18

Metodología de la POE
Ejemplo: Construir una pagina web con VBScript para
Sumar o Restar 2 números. Construir el Diagrama de
Casos de Uso.

Calculadora

Sumar

Usuario Restar

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 19

Metodología de la POE
Ejemplo: Construir una pagina web con VBScript para
Sumar o Restar 2 números. Construir el Diagrama de
Casos de Uso.

Calculadora

Sumar

Usuario Restar

Un caso de uso puede incluir otro caso de uso ( incluir )

o extender un caso de uso ( extender )
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 20
Metodología de la POE
Ejemplo: Construir una pagina web con VBScript para
Sumar o Restar 2 números. Construir el Diagrama de
Casos de Uso.

Calculadora

Sumar

Usuario Restar

Los diagramas de secuencias son otra herramienta

útil para el análisis y diseño de POE
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 21
Manejo de Eventos en HTML
En HTML los manejadores de eventos se asocian con
un elemento a través de su etiqueta como un atributo
adicional y su nombre comienza con “on” seguido del
nombre del evento a manejar:
Ejemplo:
Interacción Usuario - Aplicación Evento

Clic de Botón

Evento Manejador
click onclick

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 22

Manejo de Eventos en HTML

1º Se debe incluir en la etiqueta del elemento deseado el

manejador de evento (onx) para el evento deseado (x).
<etiqueta … onx>…</etiqueta>

2º Al manejador de evento deseado se deben asociar el

módulo o conjuntos de módulos a ejecutar en caso de
activarse el evento correspondiente.
<etiqueta … onx="módulo1():…">…</etiqueta>

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 23

Principales Eventos en HTML
Evento Descripción
click clic sobre el elemento
dblclick doble clic sobre el elemento
change cambio el contenido del elemento
focus elemento obtuvo foco
blur elemento perdió foco
mouseover ratón se movió sobre elemento
mouseout ratón salió de elemento
mousemove ratón se mueve
mousedown se presionó botón de ratón
mouseup se soltó botón de ratón
keydown se presionó una tecla
keyup se soltó una tecla
keypressed se presionó y soltó una tecla
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 24
Eventos en HTML
Ejemplo: Construir una pagina web con VBScript para
Sumar o Restar 2 números. Utilizar el evento click.

Fase 1: Diseño y Análisis:

Diseño de Interface, Diagramas de Casos de Uso.
DRE ó DF, LV y CF de Métodos o Módulos.
Fase 2: Codificación: pagina Web con VBScript.
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 25
Ejercicio

Construir una pagina web con VBScript para

calcular el seno, el coseno o la tangente de un número
en función de la selección del usuario. Utilizar el
evento dblclick.

Fase 1: Diseño y Análisis:

Diseño de Interface, Diagramas de Casos de Uso.
DRE ó DF, LV y CF de Métodos o Módulos.
Fase 2: Codificación: pagina Web con VBScript.
Evaluación: Eventos
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 26
Etiquetas HTML

Elementos de interacción:
Etiqueta Función
button define un botón
input define una entrada de texto

Tablas:
Etiqueta Función
table define una tabla
tr define una fila dentro de una tabla
td define una columna dentro de la fila
th define un encabezado
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 27
Etiquetas HTML
Ejemplo:
<html>
<head>
<title>Documento HTML 3</title>
</head>
<body>
<input/>
<button>Bot&oacute;n</button>
</body>
</html>

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 28

Etiquetas HTML

Salida en Mozilla
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 29
Etiquetas HTML
Ejemplo:
<html>
<head>
<title>Documento HTML 4</title>
</head>
<body>
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
</body>
</html>
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 30
Etiquetas HTML

Salida en Mozilla
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 31
Atributos HTML

id: Es un atributo que permite identificar un elemento
del documento de forma única.

Forma de uso:
<etiqueta id="identificador">…</etiqueta>

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 32

Atributos HTML

id: Es un atributo que permite identificar un elemento
del documento de forma única.

Forma de uso:
<etiqueta id="identificador">…</etiqueta>

Ejemplo:
<input id = "nombre"/>

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 33

Atributos HTML

id: Es un atributo que permite identificar un elemento
del documento de forma única.

Forma de uso:
<etiqueta id="identificador">…</etiqueta>

Ejemplo:
<input id = "nombre"/>
<span id = "salida">Resultado</span>
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 34
Atributos HTML

Una vez definido el atributo id de un elemento es
posible acceder a este en cualquier parte de nuestro
código VBScript:
identificador.atributo

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 35

Atributos HTML

Una vez definido el atributo id de un elemento es
posible acceder a este en cualquier parte de nuestro
código VBScript:
identificador.atributo
Ejemplo:
nombre.title = "Nombre del Estudiante"

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 36

Atributos HTML

Una vez definido el atributo id de un elemento es
posible acceder a este en cualquier parte de nuestro
código VBScript:
identificador.atributo
Ejemplo: Cambio de título
nombre.title = "Nombre del Estudiante"

Atributo a utilizar
Identificador de elemento

<input id = "nombre"/>

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 37

Atributos HTML
Cambio de título
nombre.title = "Nombre del Estudiante"
nuevo título

Salida en Mozilla
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 38
Atributos HTML

Una vez definido el atributo id de un elemento es
posible acceder a este en cualquier parte de nuestro
código VBScript:
identificador.atributo
Ejemplo:
nombre.title = "Nombre del Estudiante"
salida.style.color = "blue"
salida.style.display = "none"

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 39

Atributos HTML
salida.style.color = "blue"

Salida en Mozilla
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 40
Atributos HTML
salida.style.color = "blue"

Cambio de color de salida

Salida en Mozilla
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 41
Atributos HTML

value: Es un atributo que contiene el valor asignado a
un elemento.

Es muy utilizado en el script.

No todas las etiquetas HTML la soportan.

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 42

Atributos HTML

value: Es un atributo que contiene el valor asignado a
un elemento.

Es muy utilizado en el script.

No todas las etiquetas HTML la soportan.

Ejemplo:
alert("Nombre:" & nombre.value)

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 43

Atributos HTML
alert("Nombre:" & nombre.value)

Salida en Mozilla
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 44
Atributos HTML
alert("Nombre:" & nombre.value)
valor contenido en nombre

Salida en Mozilla
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 45
Atributos HTML

innerHtml: Es un atributo que permite acceder al
contenido de la etiqueta HTML.

Es exclusivamente utilizado en el script.

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 46

Atributos HTML

innerHtml: Es un atributo que permite acceder al
contenido de la etiqueta HTML.

Es exclusivamente utilizado en el script.

Ejemplo:
alert("Salida:" & salida.innerHTML)
salida.innerHTML = "Nombre es " & nombre.value

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 47

Atributos HTML

innerHtml: Es un atributo que permite acceder al
contenido de la etiqueta HTML.

Es exclusivamente utilizado en el script.

Lectura de
Ejemplo: Contenido
alert("Salida:" & salida.innerHTML)
salida.innerHTML = "Nombre es " & nombre.value

Modificación de
Contenido

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 48

Atributos HTML
alert("Salida:" & salida.innerHTML)

Salida en Mozilla
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 49
Atributos HTML
alert("Salida:" & salida.innerHTML)
contenido de salida

Salida en Mozilla
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 50
Atributos HTML
salida.innerHTML="Nombre es "&nombre.value

Salida en Mozilla
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 51
Atributos HTML
salida.innerHTML="Nombre es "&nombre.value
nuevo contenido

modificación de contenido
de salida
Salida en Mozilla
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 52
Atributos HTML
Ejemplo: Construir una pagina web con VBScript para
Sumar o Restar 2 números. Utilizar una tabla.

Fase 1: Diseño y Análisis:

Diseño de Interface, Diagramas de Casos de Uso.
DRE ó DF, LV y CF de Métodos o Módulos.
Fase 2: Codificación: pagina Web con VBScript.
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 53
Ejercicio

Construir una pagina web con VBScript para

calcular el seno, el coseno o la tangente. Utilizar una
tabla.

Fase 1: Diseño y Análisis:

Diseño de Interface, Diagramas de Casos de Uso.
DRE ó DF, LV y CF de Métodos o Módulos.
Fase 2: Codificación: pagina Web con VBScript.

Evaluación: id, value, innerHtml

Informática – Prof. Gonzalo Müller – Clase 15 – GM - 54
Resumen

Eventos:

Interacción Usuario - Aplicación → Evento

Manejador de evento:

Ejecuta tareas.

Seleccionar eventos a capturar.

Programación Orientada a Eventos.

Diagrama de Caso de Uso:

Actor.

Sistema.

Caso de Uso.
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 55
Resumen

Manejo de Eventos en HTML
<etiqueta … onx="módulo1():…">…</etiqueta>

Principales Eventos en HTML: click, dblclick, etc.

Etiquetas HTML.

Interacción: button, input.

Tablas: table, tr, td.

Atributos HTML.

id.

value.

innerHtml.
Informática – Prof. Gonzalo Müller – Clase 15 – GM - 56