Suma y Resta de números en Javascript

Las prácticas de javascript deben de ser de lo más simple para que se pueda entender la lógica de la programación.

En esta ocasión voy a presentar la suma y resta de dos números utilizando HTML, CSS y JAVASCRIPT, con el código que se explica a continuación no solo es factible en suma y resta si no en varios operadores matemáticos solo hace falta modificar dependiendo de que operación se quiera mostrar.

Primero vamos a crear el formulario para otorgarle el nombre de la clase a los inputs y a los labels.

con esto obtendremos el formulario y le botón para sumar y restar, pero se verá de una forma muy sencilla, aunque mi fuerte no es CSS vamos a dejarlo de tal manera que se vea un poco más amigable.

Vamos a darle color de fondo ordenar los inputs de forma vertical y encapsular dentro de un cuadro.

Le agregue comentarios para que se entienda un poco mejor, claro esto es para que se vea mas amigable nuestra practica no es gran ciencia, bien quedaría de esta forma.

Ahora sí vamos a empezar con la programación en Javascript, la idea es Sumar y restar dos números.
pasos a seguir:
1.- Obtener el valor del primer numero y guardarlo en una variable.
2.- Obtener el valor del segundo número y guardarlo en una variable.
3.- sumar el primer número + segundo número y guardarlo en una variable.
4.- mostrar el valor de la suma.
5.- Guardar los pasos desde el 1 hasta el 4 en una función sumar().
6.- llamar a la función desde html donde se encuentra el botón.
--------------------------------------------------------------------------------------------------------------------------
1.- Obtener el valor del primer número y guardarlo en una variable.

Al obtener un valor con getElementById los cacha como un String, para que lo tome como un entero o un valor numérico tenemos que especificar a que al momento de obtenerlo lo convierta en numerico con parseInt. muy bien si se dan cuenta el argumento que se pasa ('valor1') este es el id que se le puso al input en nuestro archivo html. Ahora si guardamos el valor a la variable num1.

2.- Obtener el valor del segundo número y guardarlo en una variable

Es prácticamente lo mismo nadamas se le cambia el valor del argumento que en este caso es ('valor2') y lo guardamos en la variable num2.

3.- sumar el primer número + segundo número y guardarlo en una variable.

De los valores que se obtuvieron se suman y lo almacenamos en una variable en este caso var suma.

4.- mostrar el valor de la suma.

Para mostrar el valor se desarrolla de la siguiente forma: 
* document: Hace referencia al documento que se esta trabajando es una valor que tiene que llevar.
* form: Esta etiqueta la agregamos en html hace referencia al formulario.
* resultado: Es el nombre del tercer input, en este caso el input resultado.
* value: nos dice pasame el valor que quieres mostrar.
* suma: pasamos el valor a mostrar que es la variable suma.
Si se dan cuenta se va desarrollando de forma de capas porque empieza del documento, busca el formulario, y por ultimo busca el input donde se va almacenar la variable y por ultimo lo muestra.

5.- Guardar los pasos desde el 1 hasta el 4 en una función sumar().

Bien hasta ahorita tenemos este código, lo que se tiene que hacer es guardarlo en una función.

6.- llamar a la función desde html donde se encuentra el botón.

En html agregamos un botón, el cual lo vamos a utilizar para llamar a la función sumar que acabamos de crear para que al dar click al botón realice las operaciones que contiene la función suma, agregamos en el botón la siguiente linea onclick="suma()". con esto ya tenemos la suma de los dos números.

Pero ahora falta el código de restar, pues bien es practicamente el mismo código solo que en ves de sumar vamos a restar y vamos a llamar a la función restar(). 

Y vamos a invocar esta función desde el boton que teníamos destinado para la resta en html.

A aqui el codigo completo.

Les agregue comentarios para que sea mas entendible.