Crear una calculadora simple en Microsoft Visual Studio 2010 (El Código) Parte I _ Friki Bloggeo.pdf

29/5/2014

[2] Cr Cr ea ear un una cal cu cul ad ador a si mp mpl e en Mi cr cr os osoft Vi su sual St Studi o 2010 ( El El Có Códig o) o) Pa Par te te I | F ri ri ki Bl Bl og og ge geo

Friki Bloggeo Tutoriales de programación web y desktop. HTML/CSS Python C++ VB.net Java Javascript Blogger  Wordpress PHP Generadores Plantillas

Buscar

Mapa del sitio Enlazame Contactame

12/5/20 12/5/2013 [2] Crear Crear una una calculadora simple en Microsoft Visual Studio 2010 (El Código) Parte I Continuando con el tutorial sobre como crear una calculadora en Microsoft Visual Studio 2010, les traigo la segunda parte y la mas importante y no complicada, sino que hay que concentrarse y nunca  perder la la atenci atención. ón. Si no has visto la primera parte de este tutorial, puedes verla haciendo clic aquí. En esta segunda parte les explicaré como darle dinamismos a esos controles estáticos que puedes p uedes ver en la imagen, imagen, a realizar realizar las opera op eraciones ciones de suma, resta, resta , multi multipli plica cación ción y división división raíz cuadrad cuad rada, a,  porcentaj  porcentaje, e, entre entre otros. otros. 2) El Código

Los Núm N úmeros: eros: hablamos de aquellos botones representados por los números de 0 al 9 ¿Qué necesitamos hacer? Necesitamos que cada vez que se presioné el botón 0, 1, 2, 3, 4, 5, 6, 7, 8 y 9 http://fr iki blog g eo.blog spot.com/2013/05/2- cr ear - una- cal culador a- si mpl e- en.html

1/12

29/5/2014

[2] Cr ear una cal cul ador a si mpl e en Mi cr osoft Vi sual Studi o 2010 ( El Códig o) Par te I | F ri ki Bl og geo

aparezca escrito en el cuadro de texto principal o caja de operaciones. No es tan dificil si lo miramos desde el  punto de vista que todos los botones requieren el mismo código, cambiando solamente, una parte, que sera lo mismo que aparecerá escrito. Veamos el código Me.TextBox2 .Text = TextBox2.Text & "0"

Entendamos el código mostrado, correspondiente a la tecla o botón "0", en color Azul vemos el nombre de la cuadro de texto principal, o la caja de operaciones ¿Porque está en color azul? Está de ese color por que el nombre del control puede variar según tu versión de Visual o el nombre que le hayas puesto al momento de insertarlo, en la calculadora que yo creé se llama TextBox2 y es el nombre predeterminado que Visual Studio da a este tipo de controles. ¿No s abes el nombre de tu caja de operaciones? Fíjate en la siguiente figura.

Figura 1 Agrand ar Imagen

En el punto 1 de la figura 1 te muestra el nombre de tu control, como ves, coincide con el código que anteriormente te he mostrado, en el punto 2 de la figura 1 podrás personalizar este nombre, colocar el que tu quieras, pero recuerda, siempre que lo cambies, debes sustituirlo en el código también pues si no lo haces, el código será inservible. Veamos de nuevo el código. Me.TextBox2 .Text = TextBox2.Text & "0"

Como ya he dicho antes, el 0 en color rojo está en ese lugar puesto que al presionar la tecla 0, obviamente en la caja de operaciones o Textbox2 debe aparecer un cero. ¿Que hacer con los otros numeros ? Copia y pega ese mismo código en todos los números haciendo doble clic en cada uno de ellos, ejemplo, si haces doble clic el numero 1, sustituye el 0 entre comillas por un 1, y haras lo mismo con los demas hasta llegar al 9, como se muestra en la siguiente figura

http://frikibloggeo.blogspot.com/2013/05/2-crear-una-calculadora-simple-en.html

2/12

29/5/2014

[2] Cr ear una cal cul ador a si mpl e en Mi cr osoft Vi sual Studi o 2010 ( El Códig o) Par te I | F ri ki Bl og geo

Figura 2 Agrand ar Imagen

Presiona la tecla F5 y en la vista previa a la aplicación, prueba que al presionar los botones de los números aparezcan en la caja de operaciones, como en la siguiente figura.

Figura 3

El punto: el código es el mismo que el anterior pero añadiéndole otra linea que hará una acción bien importante dentro de nuestra calculadora. Me.TextBox2 .Text = TextBox2.Text & "." Button3.Enabled = False

Como saben, el texto en Azul es lo que puede variar, el nombre. Recuerden que la caja de operaciones en la calculadora que yo creé es TextBox2 pero ustedes pueden cambiarlo por el nombre que les asigne el programa. Ahora, explico la linea Button3.Enabled = False Como pueden observar, la palabra Button3 también está remarcada en azul, pues puede variar porque es el nombre del botón que contiene el punto, para ver o cambiar el nombre que les asigno Visual deben hacer el mismo  procedimiento de la Figura 1. Pero, ¿Que acción hace esta linea? Como todos sabemos, en una calculadora el punto  puede escribirse una sola vez ya que si se escribe mas de una vez produciría unSYNTAX ERROR o Error de sintaxis, esta linea hace una acción muy simple pero bien importante, ya que al presionar el botón del punto se desactivará el botón de manera que ya no podremos presionarlo sino hasta cuando nos toque escribir la otra cantidad.

Declaración de variables: hemos llegado al punto exacto de la interacción. Tenemos una calculadora que nos  permite colocar números y el punto hasta ahora, pero aun no podemos realizar las operaciones básicas. Antes de entrar al punto de operaciones básicas por suma, resta, multiplicación o división debemos declarar nuestras variables, que será el espacio en la memoria que almacenará nuestros números o datos para que el programa  pueda recordarlos al momento de darnos un resultado. Si no se declararán las variables, este tutorial no tendría sentido, pues es la parte mas esencial para iniciar todo el proceso del resultado final. Para comenzar, busca la siguiente linea de código . http://frikibloggeo.blogspot.com/2013/05/2-crear-una-calculadora-simple-en.html

3/12

29/5/2014

[2] Cr ear una cal cul ador a si mpl e en Mi cr osoft Vi sual Studi o 2010 ( El Códig o) Par te I | F ri ki Bl og geo

Public Class Form1

Justo debajo, pega el siguiente.

       

Dim Dim Dim Dim

numerouno As Double numerodos As Double total As Double operacion As Double

El código en azul está precisamente de este color por ser el nombre de las variables, nombre que tu puedes cambiar   por cualquier otro, pero siempre recordándolo ya que influye en la interpretación de otros códigos que te mostraré mas adelante. A continuación, te explico que dato guardará cada una de estas cuatros variables presentes en el código anterior. -

numerouno: guardará el primer dato o número introducido. numerodos: guardará el segundo dato o número introducido. total: como la palabra lo dice, guardará el resultado obtenido. operacion: nos permitirá saber que operación básica se está realizando entre numerouno y numerodos.

Las variables son declaradas As Double o Como Decimal en español ya que precisamente, pueden ser cantidades decimales, y también, cantidades enteras, pero si se declarará As Intenger  o Como Entero, el  programa reconocería solo lo que esta antes de la coma e ignoraría lo que venga después totalmente.

Operaciones básicas: la suma, la resta, la multiplicación y la división son dichas operaciones básicas que realizaremos con un código muy simple y parecido en todos los casos. Echemos un vistazo al siguiente código.

Button3.Enabled = True Button2.Enabled = True TextBox1.Text = "+" operacion = 2 numerouno = Val(TextBox2 .Text) TextBox2.Clear()

Entendamos el código, en azul son los nombres de los controles y de nuestras variables, en rojo, opciones a cambiar. Recuerdas el Button3 o el boton del punto, recordemos que este se des-habilitaba al hacer clic sobre el mismo, pero ¿Por qué la linea button3.Enabled = True está presente dentro del código que corresponde al signo "+"? Hay una  palabra clave dentro de este linea, la cual es "True" o verdadero, en el código del botón del punto en lugar de "True", estaba "False" o falso, pensemos que cada vez que presionemos el signo "+" es porque deseamos escribir otra cantidad, y está cantidad también puede ser decimal, lo mismo ocurre en el caso de Button2 o en la calculadora de yo creé, el símbolo de mas o menos (+-) ubicado al lado derecho del punto. Al presionar este botón al igual que el botón del punto des-habilitará y al dar clic en un símbolo de operaciones básicas se habilitara de nuevo ya que es momento de escribir una nueva cantidad. TextBox1 es el cuadrito ubicado encima de la teclaMC. Este mostrará el símbolo según la operación que se este realizando, por eso, si el código anterior es de la suma, en el cuadro se http://frikibloggeo.blogspot.com/2013/05/2-crear-una-calculadora-simple-en.html

4/12

29/5/2014

[2] Cr ear una cal cul ador a si mpl e en Mi cr osoft Vi sual Studi o 2010 ( El Códig o) Par te I | F ri ki Bl og geo

mostrara el símbolo "+". A continuación, una parte bastante esencial y que hay que tener muy en cuenta, recuerdan que la variable operacion es la nos permitirá saber que operación básica se está realizando entre numerouno y numerodos. Por esto, a dicha variable se le asignara un valor distinto por cada operación en mi caso use el valor 2 para identificarla, pero podrias usar el 3, 4, 5 o cualquier numero que se te venga a la mente, incluso una palabra encerrada entre comillas. Al hacer clic en el boton de suma, necesitamos que la variable numerouno capture el numero que se encuentra en ese momento en la caja de operaciones, que lo guarde para despues sumarlo al siguiente numero que tecleemos. Por este motivo, numerouno sera igual al texto convertido en valor que se encuentra en la caja de operaciones. Como necesitamos que guarde ese valor, pero que al mismo tiempo lo borre, ya que necesitaremos escribir otro numero, es neceserario el codigo TextBox2.Clear() presente en el código anterior. A continuación, los códigos por operación básica - Resta o Sustracción

Button3.Enabled = True Button2.Enabled = True TextBox1.Text = "-" operacion = 3 numerouno = Val(TextBox2 .Text) TextBox2.Clear()

- Multiplicación

Button3.Enabled = True Button2.Enabled = True TextBox1.Text = "*" operacion = 4 numerouno = Val(TextBox2 .Text) TextBox2.Clear()

- División

Button3.Enabled = True Button2.Enabled = True TextBox1.Text = "/" operacion = 5 numerouno = Val(TextBox2 .Text) TextBox2.Clear()

 Nota que todos los códigos serian idénticos sino fuera por dos puntos bien importantes. En la tercera linea es necesario cambiar el símbolo dependiendo de la acción que estemos realizando, y que la variable operación necesita tener un valor único por cada operación de manera que pueda identificarse en el siguiente punto que trataremos.

http://frikibloggeo.blogspot.com/2013/05/2-crear-una-calculadora-simple-en.html

5/12

29/5/2014

[2] Cr ear una cal cul ador a si mpl e en Mi cr osoft Vi sual Studi o 2010 ( El Códig o) Par te I | F ri ki Bl og geo

Boton Igual (=): este será la puerta que nos mostrará el resultado, y el que contendrá el identificador de la variable operación. Veamos su código

 

 

 

numerodos = Val(TextBox2 .Text) If operacion = 2 Then total = numerouno + numerodos TextBox2 .Text = total ElseIf operacion = 3 Then total = numerouno - numerodos TextBox2 .Text = total ElseIf operacion = 4 Then total = numerouno * numerodos TextBox2.Tex t = total ElseIf operacion = 5 Then total = numerouno / numerodos TextBox2 .Text = total End If

Recordemos que la variable operación esta representada por valores diferentes que corresponden con cada operación básica a realizar. - Suma: 2 - Resta: 3 - Multiplicación: 4 - División: 5 En la primera linea del codigo se puede ver la variable numerodos; ya que al dar clic en el boton igual lo primero que necesitamos el capturar el numero que sumará, restará, multiplicará o dividirá al numerouno. En la siguiente linea necesitamos reconocer la operación, por eso, en el simbolo igual utilizamos el comun If-Else el cual define dentro de nuestra calculadora la identificación de cada operación, pero ¿Cómo funciona? Si la variable operacion es igual al valor 2 el total o resultado será igual al numerouno mas el numerodos y la caja de operaciones será la encargada de mostrar el total en pantalla, pero si la variable operacion fuera igual a 3 el total o resultado será igual al numerouno menos el numerodos y la caja de operaciones será la encargada de mostrar el total en pantalla, y asi sucesivamente hasta llegar a la division. Pulsa la tecla F5 y ya las operaciones básicas de la calculadora deben estar funcionando.

La Raíz Cuadrada (sqrt): Para sacar el sqrt (Square Root ) o Raíz cuadrada en español, hacemos doble clic en dicho botón y entre las lineas del código donde nos redireccionó, pegamos el siguiente código.

operacion = 6 If operacion = 6 Then numerouno = Val(TextBox2.Text) TextBox2 .Text = System.Math.Sqrt( numerouno) End If

La raíz cuadrada al igual que las operaciones básicas, es una operación, valga la redundancia, por esta razón http://frikibloggeo.blogspot.com/2013/05/2-crear-una-calculadora-simple-en.html

6/12

29/5/2014

[2] Cr ear una cal cul ador a si mpl e en Mi cr osoft Vi sual Studi o 2010 ( El Códig o) Par te I | F ri ki Bl og geo

necesitamos identificarla, el valor que yo le he dado ha sido 6 como ves en el código de arriba, y debajo de la variable he puesto el identificador que reconocerá si la operación es igual a 6 entonces el la variablenumerouno capturará el valor que se encuentra en ese momento en la caja de operaciones o TextBox2 en mi caso, y en la misma caja mostrará el resultado de la raiz cuadrada de el numero capturado.

El porcentaje: Hay varias maneras de calcular el porcentaje de un número en una calculadora, pero esta vez lo haré de la forma sencilla que puedo mostrarles. Antes de comenzar, en el cuadro de herramientas o ToolBox  buscamos la herramienta Label y la arrastramos hasta cualquier espacio libre de la calculadora de esta manera.

Figura 4

Ahora, haz clic en cualquier espacio libre del formulario, donde no haya puesto ningun boton, ni ninguna caja de texto, ni ninguna label, ni ningun menu, solo haz doble clic en cualquier espacio de la ventana gris. Entre las lineas que se encuentra el cursor de escritura, pega el siguiente código.

Label1.Visible = False

Label1 será el nombre del nuevo control que hemos insertado, pero ¿Qué hace precisamente este código? Como no queremos que ese label se vea al momento de arrancar el programa, ya que solo será un "puente" para obtener  nuestro resultado de porcentaje, le quitamos visibilidad con el atributo Visible en False. A continuación, nos vamos al diseño, y hacemos doble clic en el boton de porcentaje, entre las lineas que se encuentra el cursor de escritura, pega el siguiente código.

numerodos = Val(TextBox2 .Text) If operacion = 4 Then total = numerouno * numerodos Label1.Text = total http://frikibloggeo.blogspot.com/2013/05/2-crear-una-calculadora-simple-en.html

7/12

29/5/2014

[2] Cr ear una cal cul ador a si mpl e en Mi cr osoft Vi sual Studi o 2010 ( El Códig o) Par te I | F ri ki Bl og geo

End If TextBox2.Text = Val(Label1.Text) / 100

Para sacar el porcentaje de descuento, necesitamos de una operación básica; la multiplicación. En este caso, el  porcentaje será quien haga la función que hace el botón igual al momento que se hace una multiplicación. Para empezar, con el botón porcentaje debemos capturar el numero en la caja de operaciones con la variable numerodos ya que el  primer numero ya lo habríamos capturado al presionar el símbolo de multiplicación primero. Entonces, ya que hemos capturado el numerodos, reconocemos si antes se hizo la operacion 4 que corresponde a la multiplicación, si fue asi entonces en Label1 se mostrará el producto de numerouno por numerodos, mientras que al presionar el botón de  porcentaje se realizará la operación de dividir el producto enlabel1 entre 100, es simple, se hace una regla de tres para obtener nuestro resultado de porcentaje.

El botón mas o menos (+-): este botón nos permitirá pasar una cantidad escrita de mas a menos, así como  poner en negativo cualquier cantidad próxima a escribir. La hace negativa ya que el positivo esta  predeterminado. Haz doble clic sobre el, y entre las lineas donde se encuentra el cursor de escritura pega el siguiente código.

TextBox2.Text = "-" & TextBox2.Text Button2.Enabled = False

En la primera linea del código lo que hacemos en anteponer un signo menos a lo que ya esta escrito en la caja de operaciones, o lo que está por escribirse, la segunda linea, simplemente des-habilita el botón una vez se haya  presionado, y no sera habilitado de nuevo hasta que se presione un botón de operaciones o el botónC que veremos a continuación.

El botón C: Clean o Limpiar sera la accion que realizara este boton al dejar en blanco la caja de operaciones. Haz doble clic en el boton C y entre las lineas de codigo donde se encuentra el cursor de escritura pega el siguiente código. Button3.Enabled = True Button2.Enabled = True TextBox2.Clear()

En la primera linea, habilitamos el botón del punto, en la segunda, habilitamos el botón de mas o menos y en la tercera linea, simplemente limpiamos la caja de operaciones. Esto ha sido todo por este tutorial, los demás botones y el menú son códigos mas avanzados que estaré explicando próximamente. Publicado por Anthony Medina en 16:48 Etiquetas: Programacion, VB.NET, visual basic, visual studio 11 comentarios: http://frikibloggeo.blogspot.com/2013/05/2-crear-una-calculadora-simple-en.html

8/12

29/5/2014

[2] Cr ear una cal cul ador a si mpl e en Mi cr osoft Vi sual Studi o 2010 ( El Códig o) Par te I | F ri ki Bl og geo

ASD noviembre 04, 2013 8:25 p. m. La tercera parte! Responder 

ASD noviembre 04, 2013 8:25 p. m. Imbecil Responder 

Edinson M arquez noviembre 18, 2013 9:01 p. m.  porfa la tercera parte , te lo agradeceria Responder 

Jose Guadalupe Moo Peech enero 05, 2014 12:33 p. m. Sería mas fácil explicar y entender tu código si les pones a los controles nombres como por ejemplo btn0,  btnIgual, etc!!! Responder 

Javier Vargas enero 06, 2014 4:52 a. m. Hola amigo lo intente pero me da que no encuentra la pagina.. hice todo como guias en el tutorial pero de todas formas no me funciono note que dice 32bits el intalador, yo tengo un sist operativo de 64, es por eso? Responder 

mario quiche marzo 20, 2014 4:33 p. m.  pero como hacer RETROCESO aqui calculadora.....? Responder 

Alonso marzo 23, 2014 4:43 p. m. Ohhhhh el de arriba juega LOL *-* Responder 

Matty abril 23, 2014 11:08 a. m. Tengo un problemita con el igual.. tal vez me falta algun paso o algo.. soy nuevo con el Visual Basic.. Me http://frikibloggeo.blogspot.com/2013/05/2-crear-una-calculadora-simple-en.html

9/12

29/5/2014

[2] Cr ear una cal cul ador a si mpl e en Mi cr osoft Vi sual Studi o 2010 ( El Códig o) Par te I | F ri ki Bl og geo

ayudas porfa? cualquier cosa mi email es [email protected] Gracias. Responder 

yesica abril 24, 2014 12:01 p. m. tengo problemas con el Public C lass Responder 

Fer DM abril 24, 2014 1:37 p. m. super bien el codigo de colores que usaste!! gracias. Responder 

Anthony M edina

mayo 26, 2014 2:35 a. m.

:)) Responder 

Introduce tu comentario...

Comentar como:

Publicar 

Cuenta de Go

Vista previa

http://frikibloggeo.blogspot.com/2013/05/2-crear-una-calculadora-simple-en.html

10/12

29/5/2014

[2] Cr ear una cal cul ador a si mpl e en Mi cr osoft Vi sual Studi o 2010 ( El Códig o) Par te I | F ri ki Bl og geo

Únase a Google Partners google.com/partners

Sea un socio reconocido de Google. Obtenga gratis su insignia hoy.

Entrada más reciente

Página principal

Entrada antigua

Suscribirse a: Enviar comentarios (Atom)

Friki Bloggeo © Copyright 2014. Tema por Anthony Medina

Participar e n e ste sitio Google Friend Connect

Miembros (56) Más »

¿Ya eres miembro? Iniciar sesión

http://frikibloggeo.blogspot.com/2013/05/2-crear-una-calculadora-simple-en.html

11/12

29/5/2014

[2] Cr ear una cal cul ador a si mpl e en Mi cr osoft Vi sual Studi o 2010 ( El Códig o) Par te I | F ri ki Bl og geo

Tweets

Follow

Tone  @aimtone

28 May

"@JesusAlex23: "NO queremos Censuras como en Cuba" pic.twitter.com/qOpl97vWyj"wow, pareces el hombre Venezuela  jeje saludos

Tweet to @aimtone Friki Bloggeo Me gusta

 A 162 personas les gusta Friki Bloggeo.

Plug-in social de F acebook

http://frikibloggeo.blogspot.com/2013/05/2-crear-una-calculadora-simple-en.html

12/12