Tag: Tutorial JavaScript Básico

Neste artigo, serão disponibilizados e explicados os códigos utilizados na parte três do nosso projeto de calculadora. Caso ainda não tenha visto as partes 1 e 2 do projeto da Calculadora, acesse e obtenha o HTML e CSS necessários para a criação do layout desta calculadora: JavaScript Básico 15 – Projeto Calculadora (Parte 1), JavaScript Básico 16 – Projeto Calculadora (Parte 2)

Dentro do nosso projeto, podemos começar criando uma função de soma, que irá receber dois valores como parâmetros e irá somá-los:

// Função que soma dois valores
function somarValores(valor1, valor2){
    return valor1 + valor2;
}

Após isso, criaremos uma função de subtração, que irá subtrair o segundo valor do primeiro valor:

// Função que subtrai o segundo valor do primeiro
function subtrairValores(valor1, valor2){
    return valor1 - valor2;
}

Criadas essas duas funções, podemos criar também uma função para multiplicar valores:

// Função que multiplica dois valores
function multiplcarValores(valor1, valor2){
    return valor1 * valor2;
}

Para criar a função de divisão, devemos:

• Criar uma estrutura condicional;
• Se o segundo valor for zero, retornar uma mensagem de erro.

// Função que divide o primeiro valor pelo segundo
function dividirValores(valor1, valor2){
    if(valor2 == 0){
        return "Erro, divisão por zero!";
    }else{
        return valor1 / valor2;
    }
}

Realizada a criação das funções, precisamos criar uma função específica para limpar os dados do input e os objetos de cálculo.

// Limpa todos os dados do input e objeto de calculo
function limparDados(){
    inputResultado.value = "";

    calculo.primeiroValor = 0;
    calculo.segundoValor = 0;
    calculo.funcaoParaCalcular = null;
}

Está gostando deste projeto? Deixe o seu comentário!
Bons estudos!

Calculadora (Parte 4)

Neste artigo, serão disponibilizados e explicados os códigos utilizados na parte dois do nosso projeto de calculadora. Caso ainda não tenha visto a Parte 1 do projeto da Calculadora, acesse e obtenha o HTML e CSS necessários para a criação do layout desta calculadora: JavaScript Básico 15 – Projeto Calculadora (Parte 1)

Dentro de nosso projeto, precisamos criar uma variável para mostrar os elementos no nosso display.

// Criando uma variável para capturar o elemento
// do HTML pelo Id. Este elemento mostrará os valores no display.
let inputResultado = document.getElementById("inputDisplayResultado");

Após isso, criaremos um objeto com os dados e a função para calcular.

// Objeto para mantermos controle dos dados e funcão para calcular.
let calculo = {
    primeiroValor: 0,
    segundoValor: 0,
    funcaoParaCalular: null
}

Utilizando o window.addEventListener, ao carregar a janela, inicializaremos todos os métodos e variáveis criados:

// Ao carregar a janela, inicializa os métodos e variaveis
window.addEventListener("load", function () {
    atribuirEventos();
})

Agora, precisamos de uma função para a inserção de números na tela. Para isso:

• Utilizaremos o inputResultado.value para exibir os valores preenchidos pelo usuário no display.
• Se este valor não for um número, ele será substituído pelo próximo número clicado.
• Se o valor for zero, também será substituído pelo próximo número clicado.
• Se o valor for diferente de zero e for um número, a calculadora adicionará este número ao input, para que as operações sejam realizadas.

// Adiciona o número na tela
function inserirNumero() {
    // Se o valor na tela não for um número,
    // substitui pelo número/valor do botão
    if (isNaN(inputResultado.value)) {
        inputResultado.value = event.target.textContent;
        // Senão, adiciona o texto junto com o existente
    } else {
        // Se o valor na tela for zero, substitui o valor na tela pelo número clicado
        if (inputResultado.value == 0) {
            inputResultado.value = event.target.textContent;
        // Senão adiciona o número ao input para criar digitos maiores que 0
        } else {
            inputResultado.value += event.target.textContent;
        }
    }
}

Adicionaremos a função inserirNumero no evento de click de cada um dos botões de números da calculadora, para que, assim que clicados, o valor do respectivo botão apareça na tela do usuário.

//Atribui os eventos a todos os botões da calculadora
function atribuirEventos() {
    //Atribui eventos aos números
    document.getElementById("btnValor0").addEventListener("click", inserirNumero);
    document.getElementById("btnValor1").addEventListener("click", inserirNumero);
    document.getElementById("btnValor2").addEventListener("click", inserirNumero);
    document.getElementById("btnValor3").addEventListener("click", inserirNumero);
    document.getElementById("btnValor4").addEventListener("click", inserirNumero);
    document.getElementById("btnValor5").addEventListener("click", inserirNumero);
    document.getElementById("btnValor6").addEventListener("click", inserirNumero);
    document.getElementById("btnValor7").addEventListener("click", inserirNumero);
    document.getElementById("btnValor8").addEventListener("click", inserirNumero);
    document.getElementById("btnValor9").addEventListener("click", inserirNumero);
}

Está gostando deste projeto? Deixe o seu comentário!
Bons estudos!

Calculadora (Parte 3)