Code - A lâmpada
Código em JavaScript que acende e apaga uma lâmpada

Nesta matéria utilizarei o código que faz a uma lâmpada acender e apagar.

Clique nas abas para visualizar as partes separadamente: HTML, JS e resultado.

See the Pen a lâmpada by Flávio Micheletti (@flaviomicheletti) on CodePen.

A lógica do programa é bem simples, utilizamos 2 imagens:

Analisando o caminho do arquivo podemos descobrir se ela está ou ligado.

Invertemos o estado alterando o caminho, hora para acessa (“lampada-on”), hora para apagada (“lampada-off”).

Faremos isso a cada click na tag <img>.

se (o caminho da imagem contiver o pedaço de string "lampada-on") então
    desligue a lâmpada
se não
    ligue a lâmpada

Explicando o código

Precisamos buscar o elemento img para podermos manipulá-lo. Fazemos isso utilizando a função getElementById(). Ela buscará um elemento HTML na árvore DOM que contenha o atributo id='myimage'

var element = document.getElementById('myimage');

Esperamos que nosso HTML tenha uma (única) tag <img> com o atributo id definido. O atributo scr indica o local onde encontra-se a imagem e o atributo alt é uma boa prática, ele será exibido caso não encontre o arquivo da imagem definido no atributo src.

<img id="myimage" scr="local-da-imagem" alt="texto-alternativo" />

Com o elemento devidamente capturado e atribuído a variável element, devemos ligar (anexar) nossa função ao evento click.

element.onclick = function() {
    //
    // faz alguma coisa!
    //
};

Em outras palavras, a cada clique no elemento HTML capturado será disparado uma função previamente atribuída.

No JavaScript é muito comum colocarmos uma função dentro de uma variável e executarmos a função referenciando-se a variável, essa técnica chama-se funções anônimas, veja:

var minha_funcao = function(a, b) {return a + b};

Agora nos deparamos com o conteúdo de nossa função, ela deve refletir nossa lógica.

Para saber se a lâmpada está ligada utilizamos a função string.match(), o trecho string é representado pelo source da imagem (element.scr).

A linha do if está “dizendo” o seguinte: “Se a lâmpada estiver ligada…”.

if (element.src.match("lampada-on")) {
    //
    // desligar
    //
} else {
    //
    // ligar
    //
}

Ligar e desligar é fácil, basta substituir o atributo scr pelo caminho da imagem correspondente.

// ligar
element.src="caminho/para/imagem/lampada-on.gif";

// desligar
element.src="caminho/para/imagem/lampada-off.gif";

Veja o código funcionando em sua máquina

Para executar o exemplo em sem computador clone o repositório do GitHub ou simplesmente faça o download do repositório.

Navegue até a pasta javascript-exemplos/lampada/ e abra o arquivo index.html em seu navegador.

Seu feedback é importante!

Este pequeno código tem o objetivo de motivar o leitor no estudo da linguagem JavaScript.

• Ele foi suficientemente simples para seu entendimento?
• Ou foi tão simples que ficou até entediante?
• Faltou alguma explicação?
• Você pode tirar suas duvidas nos comentários abaixo.

Veja esse e outros códigos no .