Code - Somando
Código em JavaScript que soma e subtrai um número.

Este é um exemplo de JavaScript extremamente simples.

Se você nunca viu JavaScript e está começando a aprender, este é o exemplo mais básico que eu arrumei.

O exemplo serve também para entender um pouco sobre escopo, veja a variável num.

De diferente, temos, além da função getElementById(), a função innerHTML().

Ela “escreve” HTML no elemento referenciado, em nosso caso no elemento p (parâgrafo).

See the Pen Somando by Flávio Micheletti (@flaviomicheletti) on CodePen.

Preciso alertar que essa implementação não é a forma ideal de se programar em JavaScript. Na verdade, essa era a forma ideal praticada no anos 90. Hoje (nov/2014), podemos/devemos ao menos fazer algumas observações…

Primeiro, estamos poluindo o espaço global. A variável num e nossas 3 funções estão “soltas”, elas deveriam estar em um container, por exemplo:

var app = {
    num: 0,
    add: function() {
        ...
    },
    sub: function() {
        ...
    },
    mostrar: function() {
        ...
    }
}

Segundo, estamos utilizando a propriedade onclick dos botões HTML, não que isso seja proibido, mas normalmente “buscamos” o elemento via JavaScript e atribuímos a função desejada via código, exemplo:

var elem = document.getElementById("id-do-seu-botao");
elem.onclick = function() {
    ...
}

Ainda na questão do evento onclick, quando fazemos elem.onclick = function(){} ficamos limitados a atribuir uma única função ao evento onclick além de estarmos utilizando uma técnica ultrapassada (elem.onclick).

A forma ideal seria anexar funções com os recepetores de eventos (addEventListener()), veja exemplo:

var elem = document.getElementById("id-do-seu-botao");
var foo = function () {
    ...
}
elem.addEventListener('click', foo, false);

Para mais informações sobre como trabalhar com eventos no JavaScript leia Tratando Eventos (de navegadores).