|
Neste programa vamos utilizar o JavaScript para calcular o Teorema de Pitágoras, ou seja, a hipotenusa e os catetos.
A fórmula do Teorema de Pitágoras é a seguinte:
a2 = b2 + c2 (a hipotenusa ao quadrado é igual à soma dos quadrados dos catetos).
Então vejamos como fazer isso:
• Primeiro Passo:
Inicialmente abra o seu editor de HTML, como o Notepad++, por exemplo, e em seguida, selecione a linguagem de programação
que você vai utilizar, por exemplo HTML, CSS, JavaScript.
• Segundo Passo:
Copie o código CSS abaixo, e em seguida, cole no seu Editor de HTML entre as tags <head>.... </head>.
Código CSS:
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
margin:0px;
padding:0px;
color:#000000;
font-size:16px;
font-family:Arial,Verdana,Helvetica,sans-serif;
border-style:none;
min-height: 100%;
background: #ff00aa;
}
body {
line-height:unset !important;
}
@media only screen and (max-width:799px) {
#header { height:auto; padding:8px 20px; }
#header a {
font-size:large;
}
#header>div {
max-width:100%;
width:auto;
padding:0;
}
}
#lcol {
display:inline-block;
vertical-align:top;
width:650px;
padding-right:10px;
}
#doc {
padding:0px;
margin-left:30px;
}
#rcol {
padding:20px 0px 10px 0px;
display:inline-block;
vertical-align:top;
width:300px;
}
@media only screen and (max-width: 799px) {
#nav { margin-top:0; }
#lcol { width:100%; padding-right:0; }
#rcol { margin-left:0px; width:100%; padding:20px 0; }
#ban-ad { margin:30px auto; width:300px; }
.adslot_2 { display:none; }
.adslot_3 { width:300px; height:250px; margin:auto }
}
@media only screen and (max-width: 799px) and (orientation: portrait) {
.adslot_1 { max-width:100%; height:100px; }
}
@media only screen and (max-width: 799px) and (orientation: landscape) {
.adslot_1 { max-width:320px; height:50px; }
}
@media only screen and (max-width: 320px) and (orientation: portrait) {
.adslot_3 { margin-left:-10px }
}
#rcol li {
margin-left: -11px;
}
#wrapper H1,H2,H3
{
font-weight:normal;
}
H1
{
margin-bottom:4px;
padding-bottom:0px;
color: ##aaff33;
}
H1 { font-size: 1.8em; margin-top:0; }
H2 { font-size: 1.4em; letter-spacing: 0px; margin-top: 10px; margin-bottom: 3px;}
H3 { font-size: 1.4em; letter-spacing: 0px; margin-top: 10px; margin-bottom: 3px;}
H4 { font-size: 1.1em; margin-top: 5px; margin-bottom: 2px; font-weight: bold;}
H5 { font-size: 0.9em; margin-top: 5px; margin-bottom: 2px; font-weight: bold;}
H6 { font-size: 1.1em; color: #333333; font-weight: normal; font-style: italic; margin-top: 3px; margin-bottom: 0px; }
#rcol H5 { font-size: 0.9em; font-weight: bold; margin-top: 5px; margin-bottom: 2px; background:#e0e0e0; padding:5px 5px 5px 10px}
input { font-size: 1em; }
@media only screen and (max-width:799px) {
.btn { font-size: 1.2em; padding:7px; }
}
@media only screen and (min-width:800px) {
.btn { font-size: 1.2em; padding:4px; }
}
.intext { background: #ffffff; padding-left:3px; border:1px inset #eee}
.outtext { background: #e0f0e0; padding-left:3px; border:1px solid #ccc}
a:link { text-decoration: none; color: #083d8d; }
a:visited { text-decoration: none; color: #083d8d; }
a:active { text-decoration: underline; color: #000000; }
a:hover { text-decoration: underline; color: #000; }
a:focus { outline: none; }
.math { font-family: "Times New Roman"; font-size: 1.6em; padding-left: 6px; font-weight: normal;}
.mathsymbol { font-family: "Times New Roman"; font-size: 1.2em; font-weight: normal; }
.text { font-family: "Times New Roman", Times, serif; font-size: 1.2em }
.code { font-family: "Courier New"; font-size: 1.0em; padding-left: 6px;}
.codebg { font-family: "Courier New"; font-size: 1.0em; color: #000; background:#f0f0f0; margin-top: 0px; margin-bottom: 0px; padding: 10px; }
.codebg.p { font-family: "Courier New"; font-size: 1.0em; color: #000; background:#f0f0f0; margin-top: 0px; margin-bottom: 0px;}
p.code { font-family: "Courier New"; font-size: 1.0em; color: #000; background:#f0f0f0; margin:0px; padding:5px; border-width:1px; border-color:#ccc; border-style:solid; line-height:20px}
p.wcode { font-family: "Courier New"; font-size: 1.0em; color: #000}
p.tcode { font-family: "Courier New"; font-size: 1.0em; color: #000; background:#f0f0f0; margin:0px; padding:5px; border-width:1px; border-color:#ccc; border-style:solid; line-height:20px }
.table1 .hov { border: 2px black solid; padding: 4px; }
.table1 .ho2 { border: 2px #707070 solid; padding: 4px; }
.table1 .td { border: 1px black solid; padding: 5px; }
table.dtable, table.ntable { border: 1px #ccc solid; border-collapse:collapse; padding: 5px;}
table.dtable th, table.dtable td, table.ntable th, table.ntable td { border: 1px #ccc solid; border-collapse:collapse; padding: 5px; font-weight:normal;}
table.dtable th, table.ntable th { text-align:center }
table.ntable td { text-align:right }
/*table.calc, .calc2 {*/
.calc, .calc2 {
border-spacing: 0px;
border-collapse: separate;
background: #e8e8e8;
border:1px #ddd solid;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
table.calc td, .calc2 td {
padding: 2px;
border-width: 0px;
border-style: none;
background: #e8e8e8;
}
.calc2 select { padding:4px 2px; font-size:1.2em; font-family:Arial, Helvetica, sans-serif }
@media only screen and (max-width: 576px) {
.calc2 { padding:8px; margin-left:auto; margin-right:auto; }
.calc2 td { float:left; }
.calc2 td:nth-child(2) { clear:left; }
.calc2 tr td:nth-child(3) { padding-top:10px; }
.calc2 input[type=text], .calc2 input[type=number], .calc2 input[type=url] { width:190px; font-size:x-large; padding-left:3px; }
.calc2 tr td:nth-child(3) select { margin-top:-8px; }
}
@media only screen and (min-width: 577px) {
.calc2 { padding:15px; }
.calc2 tr { line-height:40px; }
.calc2 input[type=text], .calc2 input[type=number], .calc2 input[type=url] { width:220px; font-size:x-large; padding-left:3px; }
}
@media all and (max-width:1000px) {
#banokbtn { margin-left:0; }
}
</style>
• Terceiro Passo:
Copie o código HTML abaixo e, em seguida, cole no seu Editor de HTML entre as tags <body>... </body>.
Código HTML:
<div id="lcol">
<div id="doc">
<!-- #BeginEditable "doctext" -->
<h1>
Cálculo do Teorema de Pitágoras</h1>
<form name="calcform" autocomplete="off">
<p>
Cálculo da Hipotenusa (a):</p>
<table class="calc2">
<tbody>
<tr>
<td>Digite o valor do cateto(b):</td>
<td><input type="number" name="a1" min="0" step="any" oninput="calc_c()" autofocus></td>
</tr>
<tr>
<td>Digite o valor do cateto(c):</td>
<td><input type="number" name="b1" min="0" step="any" oninput="calc_c()"></td>
</tr>
<tr>
<td>Valor da Hipotenusa (a):</td>
<td><input type="number" step="any" name="c1" class="outtext" readonly></td>
</tr>
</tbody>
</table>
<p>
Cálculo do Cateto (c):</p>
<table class="calc2">
<tbody>
<tr>
<td>Digite o valor do cateto(b):</td>
<td><input type="number" name="b2" id="b2" min="0" step="any" oninput="calc_lega()"></td>
</tr>
<tr>
<td>Digite o valor da hipotenusa(a):</td>
<td><input type="number" name="c2" id="c2" min="0" step="any" oninput="calc_lega()"></td>
</tr>
<tr>
<td>Valor do cateto (c):</td>
<td><input type="number" step="any" name="a2" class="outtext" readonly></td>
</tr>
</tbody>
</table>
<p>
Cálculo do cateto(b):</p>
<table class="calc2">
<tbody>
<tr>
<td>Digite o valor do cateto(c):</td>
<td><input type="number" name="a3" id="a3" min="0" step="any" oninput="calc_legb()"></td>
</tr>
<tr>
<td>Digite o valor da hipotenusa(a):</td>
<td><input type="number" name="c3" id="c3" min="0" step="any" oninput="calc_legb()"></td>
</tr>
<tr>
<td>Valor do cateto (b) result:</td>
<td><input type="number" step="any" name="b3" class="outtext" readonly></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
• Quarto Passo:
Copie o código JavaScript abaixo e cole no seu editor de HTML logo acima da tag </body>.
Código JavaScript:
<script type="text/javascript">
function setfocus() {
document.calcform.x.focus();
}
function calc() {
x = document.calcform.x.value;
y = calcfunc(x);
y = roundresult(y);
document.calcform.y.value = y
}
function calc_a() {
x = document.calcform2.x.value;
y = calcfunc_a(x);
y = roundresult(y);
document.calcform2.y.value = y
}
function calc3() {
x1 = document.calcform.x.value;
x2 = document.calcform.x2.value;
y = calcfunc(x1,x2);
y = roundresult(y);
document.calcform.y.value = y;
}
function calc4() {
a = document.calcform.x.value;
b = document.calcform.x2.value;
c = document.calcform.x3.value;
d = b*b-4*a*c;
document.calcform.y0.value = roundresult(d);
if( d>=0 )
{
document.calcform.y1.value = roundresult((-b+Math.sqrt(d))/(2*a));
document.calcform.y2.value = roundresult((-b-Math.sqrt(d))/(2*a));
}
else
{
re = roundresult(-b/(2*a));
im = roundresult(Math.sqrt(-d)/(2*a));
document.calcform.y1.value = re+' + i'+im;
document.calcform.y2.value = re+' - i'+im;
}
b=-b;
document.calcform.y3.value = '('+b.toString()+' \xb1 \u221A('+d.toString()+')) / (2\xd7'+a.toString()+')';
}
function calc5() {
x = document.calcform.x.value;
y = calcfunc(x);
y = roundresult(y);
if( x>0 ) y='\u00B1'+y;
document.calcform.y.value = y
}
function calc6() {
x1 = document.calcform.x.value;
x2 = document.calcform.x2.value;
val=x2;
if( x2<0 ) val=-val;
y = calcfunc(x1,val);
y = roundresult(y);
if( x2>0 && (x1/2)==Math.round(x1/2) ) y='\u00B1'+y;
if( x2<0 ) {
if( (x1/2)==Math.round(x1/2) )
y='NaN';
else
y=-y;
}
document.calcform.y.value = y;
}
function roundresult(x) {
y = parseFloat(x);
y = roundnum(y,10);
return y;
}
function roundnum(x,p) {
var i;
var n=parseFloat(x);
var m=n.toPrecision(p+1);
var y=String(m);
i=y.indexOf('e');
if( i==-1 ) i=y.length;
j=y.indexOf('.');
if( i>j && j!=-1 )
{
while(i>0)
{
if(y.charAt(--i)=='0')
y = removeAt(y,i);
else
break;
}
if(y.charAt(i)=='.')
y = removeAt(y,i);
}
return y;
}
function roundnum2(x,p) {
var i;
var n=parseFloat(x);
var m=n.toFixed(p);
var y=String(m);
i=y.length;
j=y.indexOf('.');
if( i>j && j!=-1 )
{
while(i>0)
{
if(y.charAt(--i)=='0')
y = removeAt(y,i);
else
break;
}
if(y.charAt(i)=='.')
y = removeAt(y,i);
}
return y;
}
function removeAt(s,i) {
s = s.substring(0,i)+s.substring(i+1,s.length);
return s;
}
var gcd = function(a, b) {
if ( ! b) {
return a;
}
return gcd(b, a % b);
};
function calc_c() {
var a = document.calcform.a1.value;
var b = document.calcform.b1.value;
var c = Math.sqrt(a*a+b*b);
document.calcform.c1.value = roundresult(c);
}
function calc_lega() {
var b = document.calcform.b2.value;
var c = document.calcform.c2.value;
b = parseFloat(b);
c = parseFloat(c);
if( b=="" || c=="" ) return;
if( c<b ) {
document.getElementById("b2").style.backgroundColor = "#ffdddd";
document.getElementById("c2").style.backgroundColor = "#ffdddd";
document.calcform.a2.value = "";
return;
}
document.getElementById("b2").style.backgroundColor = "white";
document.getElementById("c2").style.backgroundColor = "white";
var a = Math.sqrt(c*c-b*b);
document.calcform.a2.value = roundresult(a);
}
function calc_legb(){
var a = document.calcform.a3.value;
var c = document.calcform.c3.value;
b = parseFloat(b);
c = parseFloat(c);
if( a=="" || c=="" ) return;
if( c<a ) {
document.getElementById("a3").style.backgroundColor = "#ffdddd";
document.getElementById("c3").style.backgroundColor = "#ffdddd";
document.calcform.b3.value = "";
return;
}
document.getElementById("a3").style.backgroundColor = "white";
document.getElementById("c3").style.backgroundColor = "white";
var b = Math.sqrt(c*c-a*a);
document.calcform.b3.value = roundresult(b);
}
</script>
Salve esse arquivo como: TeoremaPitagoras.html.
Execute no navegador clicando no botão abaixo e veja se está igual ao da imagem acima:
|
