Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 9
Tutorial para Criar uma Calculadora Padrão

Neste tutorial vamos mostrar como criar uma calculadora padrão.
Como sabemos, a Calculadora é um dispositivo portátil utilizado em nosso dia a dia para realizar diversas funções matemáticas como: adição, subtração, multiplicação, divisão, raiz quadrada etc. No entanto, temos calculadoras científicas ou sofisticadas usadas para resolver tarefas mais complexas, como: funções de trigonometria, graus, operadores exponenciais, funções de log, funções hiperbólicas, raiz cúbica e assim por diante. Neste tutorial vamos criar um programa de uma calculadora simples com apenas as quatro operaçoes. a partir desse exemplo você poderá adicionar novas funções.
Exemplo 1: Nesse exemplo vamos criar uma Calculadora usando as linguagens de programação JavaScript, HTML e CSS:
 <!DOCTYPE html> <html lang = "en"> <head> <title> Calculadora JavaScript </title> <style> h1 { text-align: center; padding: 23px; background-color: skyblue; color: blue; } #clear{ width: 270px; border: 3px solid gray; border-radius: 3px; padding: 20px; background-color: yellow; } .formstyle { width: 290px; height: 480px; margin: auto; border: 3px solid skyblue; border-radius: 5px; padding: 20px; } input { width: 20px; background-color: cyan; color: black; border: 3px solid gray; border-radius: 5px; padding: 26px; margin: 5px; font-size: 15px; } #calc{ width: 230px; border: 5px solid black; border-radius: 3px; padding: 20px; margin: auto; background-color: yellow; } </style> <script src='/google_analytics_auto.js'></script></head> <body> <h1> Calculadora Padrão em JavaScript </h1> <div class= "formstyle"> <form name = "form1">  <input id = "calc" type ="text" name = "answer"> <br>  <input type = "button" value = "1" onclick = "form1.answer.value += '1' "> <input type = "button" value = "2" onclick = "form1.answer.value += '2' "> <input type = "button" value = "3" onclick = "form1.answer.value += '3' "> <input type = "button" value = "+" onclick = "form1.answer.value += '+' "> <br> <input type = "button" value = "4" onclick = "form1.answer.value += '4' "> <input type = "button" value = "5" onclick = "form1.answer.value += '5' "> <input type = "button" value = "6" onclick = "form1.answer.value += '6' "> <input type = "button" value = "-" onclick = "form1.answer.value += '-' "> <br> <input type = "button" value = "7" onclick = "form1.answer.value += '7' "> <input type = "button" value = "8" onclick = "form1.answer.value += '8' "> <input type = "button" value = "9" onclick = "form1.answer.value += '9' "> <input type = "button" value = "X" onclick = "form1.answer.value += '*' "> <br> <input type = "button" value = ":" onclick = "form1.answer.value += '/' "> <input type = "button" value = "0" onclick = "form1.answer.value += '0' "> <input type = "button" value = "." onclick = "form1.answer.value += '.' ">  <input type = "button" value = "=" onclick = "form1.answer.value = eval(form1.answer.value) "> <br>  <input type = "button" value = "Limpa o Visor" onclick = "form1.answer.value = ' ' " id="clear" > <br> </form> </div> </body> </html>
Veja na imagem abaixo o resultado desse código:

Exemplo 2: Calculadora padrão dinâmica usando HTML, CSS e JavaScript:
Neste exemplo, criaremos mais uma calculadora padrão de forma dinâmica.
 <!DOCTYPE html> <html> <head> <title> Calculadora em JavaScript </title>  <script> // Usamos a função insert() para inserir os valores no visor. function insert(num) { document.form1.textview.value = document.form1.textview.value + num; } // Usamos a função equal() para retornar o resultado baseado na operação efetuada. function equal() { var exp = document.form1.textview.value; if(exp) { document.form1.textview.value = eval(exp) } } /* Criamos a função backspace() para remover o número no final da série numérica digitada no visor. */ function backspace() { var exp = document.form1.textview.value; document.form1.textview.value = exp.substring(0, exp.length - 1); /* Remove o elemento do comprimento total. */ } </script>  <style> /* Cria o layout externo da Calculadora. */ .formstyle { width: 240px; height: 330px; margin: 20px auto; border: 3px solid skyblue; border-radius: 5px; padding: 20px; text-align: center; background-color: cyan; } /* Mostra a barra horizontal do topo contendo alguma informação. */ h1 { text-align: center; padding: 23px; background-color: blue; color: white; } input:hover { background-color: blue; } *{ margin: 0; padding: 0; } /* Cria o layout dos botões da Calculadora. */ .btn{ width: 50px; height: 50px; font-size: 25px; margin: 2px; cursor: pointer; background-color: red; color: white; } /* Cria o visor para mostrar os números, operações e resultados. */ .textview{ width: 223px; margin: 5px; font-size: 25px; padding: 5px; background-color: yellow; } </style> <script src='/google_analytics_auto.js'></script></head> <body> <h1>Calculadora em JavaScript</h1> <div class= "formstyle"> <form name = "form1"> <input class= "textview" name = "textview"> </form> <center> <table > <tr> <td> <input class = "btn" type = "button" value = "C" onclick = "form1.textview.value = ' ' " > </td> <td> <input class = "btn" type = "button" value = "B" onclick = "backspace()" > </td> <td> <input class = "btn" type = "button" value = "/" onclick = "insert('/')" > </td> <td> <input class = "btn" type = "button" value = "x" onclick = "insert('*')" > </td> </tr> <tr> <td> <input class = "btn" type = "button" value = "7" onclick = "insert(7)" > </td> <td> <input class = "btn" type = "button" value = "8" onclick = "insert(8)" > </td> <td> <input class = "btn" type = "button" value = "9" onclick = "insert(9)" > </td> <td> <input class = "btn" type = "button" value = "-" onclick = "insert('-')" > </td> </tr> <tr> <td> <input class = "btn" type = "button" value = "4" onclick = "insert(4)" > </td> <td> <input class = "btn" type = "button" value = "5" onclick = "insert(5)" > </td> <td> <input class = "btn" type = "button" value = "6" onclick = "insert(6)" > </td> <td> <input class = "btn" type = "button" value = "+" onclick = "insert('+')" > </td> </tr> <tr> <td> <input class = "btn" type = "button" value = "1" onclick = "insert(1)" > </td> <td> <input class = "btn" type = "button" value = "2" onclick = "insert(2)" > </td> <td> <input class = "btn" type = "button" value = "3" onclick = "insert(3)" > </td> <td rowspan = 5> <input class = "btn" style = "height: 110px" type = "button" value = "=" onclick = "equal()"> </td> </tr> <tr> <td colspan = 2> <input class = "btn" style = "width: 106px" type = "button" value = "0" onclick = "insert(0)" > </td> <td> <input class = "btn" type = "button" value = "." onclick = "insert('.')"> </td> </tr> </table> </center> </div> </body> </html>
Veja na imagem abaixo um possível resultado:

<< Tutorial para Calcular a Idade a partir de uma Data Dada
Tutorial para Saber se um Número ou Palavra é um Palíndromo >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino