Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.

Interfaz de Visual Basic

Visual Basic es un lenguaje de programación orientado a objetos, Visual Basic está diseñado para simplificar
la creación de aplicaciones.

En esta unidad veremos manualmente

como hacemos nuestra aplicación.
Elementos a usar: Formulario, objetos y codificación.

Formulario – Es la pantalla o ventana principal en la que diseñamos nuestra aplicación, aquí colocamos todos
los objetos o herramientas que se requieren para la elaboración de nuestro programa.

Objeto – Son todos las herramientas o elementos que se requieren para la solución de nuestro programa,
cada objeto tiene sus propias funciones y propiedades.

Codificación – Es el código (lenguaje) en Visual Basic que lleva un objeto, este código tú lo escribes y hace
referencia a uno o más objetos de nuestro formulario, para así poder obtener el resultado de nuestro
programa.

Formulario: por default tiene el nombre de Form1

Unid. 2 - Apuntes - 201 - Pág. 1

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Objetos o Herramientas: solo explicamos los 3 que usaremos inicialmente:

Button
(Botón) Objeto donde
generalmente escribes
el código de lo que va a
realizar este botón.

Label
(Etiqueta) Objeto
que usamos
generalmente para
colocar un letrero o
bien para desplegar
TextBox
un resultado (salida
(Cuadro de texto)
de datos).
Objeto que
usamos
generalmente
para la entrada
y/o salida de
datos.

Unid. 2 - Apuntes - 201 - Pág. 2

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Ejemplo 01

Elaborar el algoritmo, diagrama de flujo, comprobación, formulario y codificación para calcular la suma de
dos números.

Diseñar el algoritmo Diagrama de flujo Comprobación

1. Inicio Inicio

2. Pedir primer valor ( A )

3. Pedir segundo valor ( B ) A,B A=5

B=8
4. Hacer la suma C = A + B
C=A+B C = A+B = 5+8 = 13
5. Desplegar o mostrar el resultado ( C )
C=13
6. Fin C

Fin

Nuestro formulario inicial (agregamos los objetos que usaremos para nuestro programa)

Label
(Etiqueta) Objeto que usamos
generalmente para colocar un
letrero o bien para desplegar un Solo
resultado (salida de datos).
Cambiaremos

TextBox el contenido
(Cuadro de texto) Objeto que
usamos generalmente para la del objeto,
entrada y/o salida de datos.
no su

Button nombre.
(Botón) Objeto donde
generalmente escribes el código
de lo que va a realizar este
botón.

Unid. 2 - Apuntes - 201 - Pág. 3

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Explicación para la creación de nuestro formulario y herramientas u objetos

Para todos los objetos que usemos en nuestro formulario manejaremos dos conceptos:
Nombre del Objeto y Contenido del objeto

Esta es la pantalla de nuestra aplicación, la muestro solo para que veas lo que es el nombre del objeto y el
contenido del objeto

Objeto
Label1

Nombre del
Objeto: Label1

Contenido del Objeto Label1:

2o Z – Tu nombre completo

Unid. 2 - Apuntes - 201 - Pág. 4

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Cambiaremos el contenido de los objetos, mas no el nombre del objeto

2º Z Tu nombre completo Ejemplo 01

Dame dato ( A ) Dato ( A )

Dato ( B )
Dame dato ( B )

Resultado
Suma A + B de la suma
A+B

No olvidemos los nombres de nuestros objetos

Label 2
Label 1

Label 3 TextBox 1

TextBox 2
Label 4

TextBox 3

Button 1

Unid. 2 - Apuntes - 201 - Pág. 5

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Código para que se realice la suma

Vamos a sumar TextBox1 más TextBox2 y el resultado lo colocamos en TextBox3

TextBox3 = TextBox1 + TextBox2 ; en nuestro diagrama de flujo: C = A + B
Nota: TextBox es una caja de texto, por lo tanto, su propiedad o contenido es texto.
Si necesitamos obtener el valor numérico de ese texto usamos el comando VAL
TextBox3.Text = Val(TextBox1.Text) + Val(TextBox2.Text)
El valor de TextBox1 más el valor de TextBox2 lo guardamos en TextBox3
TextBox3 tiene la suma pero con formato de texto, no como numérico.

Código preestablecido para

el objeto Button1, este
código no lo modificamos
para nada.
Lo dejamos tal y como está.

Este es el código que llevara nuestro objeto Button1,

para que haga la suma, es lo único que tú vas escribir.

Ejecutando nuestra aplicación o programa

Tecleamos un 5 para A (TextBox1) Al dar clic en Suma se ejecuta el código de nuestro

y un 8 para B (TextBox2) botón y TextBox3 tiene la suma del Valor de
TextBox1 más el valor de TextBox2, lo que hace
que TextBox3 obtenga 13.

Unid. 2 - Apuntes - 201 - Pág. 6

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Ejemplo 02

Elaborar un algoritmo, diagrama de flujo, comprobación, formulario y codificación para calcular la suma de
cuatro números.

Algoritmo Diagrama de flujo Comprobación

A. Inicio Inicio

B. Pedir primer valor ( A )

A , B, C , D
C. Pedir segundo valor ( B )
D. Pedir tercer valor ( C )
E = A + B +C+ D
E. Pedir cuarto valor ( D )
F. Hacer la suma E = A + B + C + D
E
G. Desplegar o mostrar el resultado ( E )
H. Fin
Fin

Nuestro formulario inicial (agregamos los objetos que usaremos para nuestro programa)

Label
(Etiqueta) Objeto que usamos
generalmente para colocar un
letrero o bien para desplegar un Solo
resultado (salida de datos).
Cambiaremos

TextBox el contenido
(Cuadro de texto) Objeto que
usamos generalmente para la del objeto,
entrada y/o salida de datos.
no su

Button nombre.
(Botón) Objeto donde
generalmente escribes el código
TextBox5 de lo que va a realizar este
botón.

Unid. 2 - Apuntes - 201 - Pág. 7

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Cambiaremos el contenido de los objetos, mas no el nombre del objeto

2º Z Tu nombre completo Ejemplo 02

Dame dato ( A ) Dato ( A )

Dame dato ( B ) Dato ( B )

Dame dato ( C ) Dato ( C )

Dame dato ( D ) Dato ( D )

Cálculos

TextBox5 Resultado de
la suma
Suma

No olvidemos los nombres de nuestros objetos

Label 1
Label 2

Label 3 TextBox 1

Label 4 TextBox 2

Label 5 TextBox 3

Label 6 TextBox 4

Button 1
TextBox 5

Label 7

Unid. 2 - Apuntes - 201 - Pág. 8

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Codificación, el código lo escribes en el boton1 (Button1)

Este es el código que llevara nuestro objeto Button1,

para que haga la suma, es lo único que tú vas escribir.

REM – Es para que coloques los comentarios que creas necesarios para la
documentación de tu programa.
Siempre documenta tus programas, para que puedas ubicar rápidamente que hace y en
donde se hace cierto calculo.
Lo que esta después de REM no se ejecuta. (color verde)

Ejecutamos nuestra aplicación (Programa)

Con los datos que usamos en la comprobación del algoritmo y diagrama de flujo, observamos que da el mismo
resultado.

Unid. 2 - Apuntes - 201 - Pág. 9

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Ejemplo 03

Elabora el algoritmo, comprobación, diagrama de flujo, formulario y codificación para calcular el área y el
perímetro de un circulo proporcionando solo el radio.

Algoritmo
1. Inicio Comprobación, Propongamos un radio de 5
2. Pedir el Radio ( R ) R=5
3. Calcular el Diámetro …… D = R + R D = 5 + 5 Tenemos D = 10
4. Calcular el Área …………… A = 3.14159 x R x R A = 3.14159 x 5 x 5 Tenemos A = 78.53975
5. Calcular el Perímetro ….. P = 3.14159 x D P = 3.14159 x 10 Tenemos P = 31.4159
6. Desplegar o mostrar el resultado del Área ( A ) Área = 78.53975
7. Desplegar o mostrar el resultado del Perímetro ( P ) Perímetro = 31.4159
8. Fin OK - Perfecto - OK

Diagrama de flujo
Inicio

El texto de este color que encuentres

Dame el Radio R
(Diámetro) D = R + R
(Área) A = 3.14159 * R * R
en los siguientes diagramas de flujo,
significan que es un letrero, el cual
nos indica que se está solicitando o
bien que es lo que se despliega como
resultado.
Este color lo usaremos solo en
entrada y salida de datos.

(Perímetro) P = 3.14159 * D

Área = A
Diámetro = D
Perímetro = P

Fin

Unid. 2 - Apuntes - 201 - Pág. 10

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Formulario

Diseñamos nuestro formulario y cambiamos el contenido de los objetos

(agregamos los objetos que usaremos para nuestro programa)

2º Z Tu nombre completo
Ejemplo 03

Dame Radio (R) Dato del Radio (R)

Tú lo proporcionas

Calcular
Resultado
Dato Diámetro (D)

Diámetro (D)
Resultado
Dato Área (A)
Área (A)

Perímetro (P) Resultado

Dato Perímetro (P)

Estos 3 resultados
los genera Button1

No olvidemos el nombre de los objetos

Label 1
Label 2

Label 3 TextBox1

Button 1
TextBox2

Label 4
TextBox3
Label 5

Label 6 TextBox4

Unid. 2 - Apuntes - 201 - Pág. 11

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Codificación, el código lo escribes en el boton1 (Button1)

REM – Es para que coloques los comentarios que creas necesarios para la
documentación de tu programa.
Siempre documenta tus programas, para que puedas ubicar rápidamente
que hace y en donde se hace cierto calculo.
Lo que esta después de REM no se ejecuta. (color verde)

Ejecutamos nuestra aplicación (Programa)

En la comprobación que realizamos en el algoritmo y diagrama de flujo, propusimos un Radio de 5

y con ese dato Radio=5 probamos nuestro programa, TextBox1 toma un 5 y clic en Calcular

Como puedes ver los datos que arroja

el programa son los mismos que
realizamos en nuestra comprobación
con un Radio = 5

Unid. 2 - Apuntes - 201 - Pág. 12

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Ejemplo 04
Elaborar el algoritmo, diagrama de flujo, su comprobación, formulario y codificación para calcular el subtotal
(suma) del costo de 5 productos, calcular el iva (16%) y calcular el neto.
Solución
Subtotal = producto1 + producto2 + producto3 + producto4
IVA = 16% de subtotal usar la regla de tres IVA = (subtotal x 16) / 100 , IVA = Subtotal x 0.16
Neto = subtotal + IVA

Algoritmo
1. Inicio Comprobación, Propongamos costos a los 5 productos
2. Pedir costo del producto 1 (P1) Producto 1 P1 = 5
3. Pedir costo del producto 2 (P2) Producto 2 P2 = 10
4. Pedir costo del producto 3 (P3) Producto 3 P3 = 8
5. Pedir costo del producto 4 (P4) Producto 4 P4 = 2
6. Pedir costo del producto 5 (P5) Producto 5 P5 = 25
7. Subtotal = P1 + P2 + P3 + P4 + P5 Subtotal = 5 + 10 + 8 +2 +25 = 50
8. IVA = ( Subtotal x 16 ) / 100 IVA = (50 x 16 ) / 100 = 8
9. Neto = Subtotal + IVA Neto = 50 + 8 = 58
10. Desplegar o mostrar Subtotal Subtotal = 50
11. Desplegar o mostrar IVA IVA = 8
12. Desplegar o mostrar Neto Neto = 58
13. Fin OK - Perfecto - OK

Diagrama de flujo
Inicio A

P1, P2, P3, P4, P5

Subtotal = Subtotal
Subtotal = P1 + P2 + P3 + P4 + P5
IVA = IVA

IVA = ( Subtotal * 10 ) / 100 Neto = Neto

Neto = Subtotal + IVA Fin

Unid. 2 - Apuntes - 201 - Pág. 13

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Formulario

Diseñamos nuestro formulario y cambiamos el contenido de los objetos

(agregamos los objetos que usaremos para nuestro programa)

2º Z Tu nombre completo Ejemplo 04

Producto 1
Valor del Producto 1
Producto 2 Valor del Producto 2

Producto 3 Valor del Producto 3

Producto 4 Valor del Producto 4

Producto 5 Valor del Producto 5

Cálculos Resultado Subtotal

Subtotal Resultado IVA 16%

Resultado Neto
IVA 16%

Neto

No olvidemos el nombre de los objetos

Label 1 Label 2

Label 3
TextBox 1
Label 4 TextBox 2
Label 5 TextBox 3

Label 6 TextBox 4
Label 7 TextBox 5

Button 1 TextBox 6

Label 8 TextBox 7

TextBox 8
Label 9

Label 10

Unid. 2 - Apuntes - 201 - Pág. 14

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Ejecutamos nuestra aplicación (Programa)

La ejecución de nuestro programa la realizamos con los datos que usamos en la comprobación de nuestro
algoritmo y diagrama de flujo, como puedes ver son los mismos resultados.

Lo que está dentro del recuadro rojo es lo único que tu tecleas

(Tú código para resolver el problema).

Código y Comentarios

Tenemos que dar el costo (número) a cada producto y posteriormente dar CLIC en el botón Cálculos para que
se muestren los resultados de subtotal, iva y neto.

Unid. 2 - Apuntes - 201 - Pág. 15

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Ejemplo 05
Elaborar el algoritmo, diagrama de flujo, su comprobación, formulario y codificación para calcular la suma,
resta, división y multiplicación de dos números.
Solución:
Tenemos dos valores N1 y N2
Suma S = N1 + N2
Resta R = N1 - N2
División D = N1 / N2
Multiplicación M = N1 x N2

Algoritmo
1. Inicio Comprobación, Propongamos valores a los 2 números
2. Pedir primer valor N1 Valor 1 N1 = 10
3. Pedir segundo valor N2 Valor 2 N2 = 5
4. S = N1 + N2 Suma S = N1 + N2 = 10 + 5 = 15
5. R = N1 - N2 Resta R = N1 - N2 = 10 - 5 = 5
6. D = N1 / N2 División D = N1 / N2 = 10 / 5 = 2
7. M = N1 x N2 Multiplicación M = N1 x N2 = 10 x 5 = 50
8. Desplegar o mostrar suma (S) Suma = 15
9. Desplegar o mostrar resta (R) Resta = 5
10. Desplegar o mostrar división (D) División = 2
11. Desplegar o mostrar Multiplicación (M) Multiplicación = 50
12. Fin OK - Perfecto - OK

Diagrama de flujo
Inicio A

N1 , N2 M = N1 * N2

S = N1 + N2 Suma = S
Resta = R
R = N1 - N2 División = D
Multiplicación = M

D = N1 / N2
Fin

A
Unid. 2 - Apuntes - 201 - Pág. 16
Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Formulario

Diseñamos nuestro formulario y cambiamos el contenido de los objetos

(agregamos los objetos que usaremos para nuestro programa)

2º Z Tu nombre completo Ejemplo 05

Dato N1 Valor de N1

Dato N2 Valor de N2

Cálculos
Resultado de la suma
Suma
Resultado de la resta
Resta
Resultado de la división
División
Resultado de la multiplicación
Multiplicación

No olvidemos el nombre de los objetos y hacemos los ajustes necesarios en el diseño (reacomodo)
de los objetos, para una mejor presentación.

Label 1 Label 2

Label 3 TextBox 1

Label 4 TextBox 2

Button 1
TextBox 3
Label 5
TextBox 4
Label 6 4
TextBox 5
Label 7
TextBox 6
Label 8

Unid. 2 - Apuntes - 201 - Pág. 17

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Ejecutamos nuestra aplicación (Programa)

La ejecución de nuestro programa la realizamos con los datos con que usamos en la comprobación de nuestro
algoritmo y diagrama de flujo, como puedes ver son los mismos resultados.

Dar a N1 un 10

Dar a N2 un 5

Clic en Cálculos

Y se muestran los resultados

Código del Botón1 ( Button1)

Recuerda, solo se teclea lo que

está dentro del recuadro rojo.

Unid. 2 - Apuntes - 201 - Pág. 18

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Formulario Ejemplo 05 (Otro diseño llegando al mismo resultado), en este diseño vamos a tener un
botón para cada operación (botón para suma, botón para resta y así sucesivamente)

Diseñamos nuestro formulario y cambiamos el contenido de los objetos

(agregamos los objetos que usaremos para nuestro programa)

2º Z Tu nombre completo Ejemplo 05-2

Valor de N1
Dato N1
Valor de N2
Dato N2

Resultado de la suma
Suma
Resultado de la resta
Resta
Resultado de la división
División
Resultado de la multiplicación
Multiplicación

No olvidemos el nombre de los objetos y hacemos los ajustes necesarios en el diseño (reacomodo)
de los objetos, para una mejor presentación.

Label 1 Label 2

TextBox 1
Label 3
TextBox 2
Label 4

TextBox 3
Button 1
TextBox 4
Button 2
TextBox 5
Button 3
TextBox 6
Button 4

Unid. 2 - Apuntes - 201 - Pág. 19

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Codificación, el código lo escribes para cada botón

Recuerda que lo único que escribes es lo que está dentro de los recuadros
rojos, código para cada botón y su respectiva documentación (REM)

Dar el valor para N1 y N2

Dar clic en cada botón y se va mostrando el resultado en su respectivo TextBox

Unid. 2 - Apuntes - 201 - Pág. 20

Aplica Estructuras de datos con un lenguaje de programación I.S.C. F.D.L

Como puedes ver este último ejemplo 05, lo realizamos de dos maneras, el algoritmo y diagrama de flujo es
el mismo, lo único que cambiamos fue el diseño de nuestro formulario y por consecuencia el código.
Si observas el código es lo mismo, solamente lo adaptamos a nuestro diseño.

Primer Diseño y código del ejemplo 05

Código del Botón1 (Button1)

Segundo Diseño y código del ejemplo 05

Si observas el código es el mismo, solo lo

adaptamos al diseño de nuestro formulario.

Unid. 2 - Apuntes - 201 - Pág. 21