Difference between revisions of "Geometria básica no plano: áreas e perímetros"

From JSXGraph Wiki
Jump to navigationJump to search
Line 7: Line 7:
 
e da área com a variação da base e da altura:</li>
 
e da área com a variação da base e da altura:</li>
 
</html>
 
</html>
 +
 
<jsxgraph box="box">
 
<jsxgraph box="box">
 
  var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 5, 5, -5], axis:true});
 
  var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 5, 5, -5], axis:true});
Line 20: Line 21:
 
  var b    = board.createElement('text',[3.35,3.00,function(){base  =Math.abs(pa.X());return "b = "+base.toFixed(6);}]);
 
  var b    = board.createElement('text',[3.35,3.00,function(){base  =Math.abs(pa.X());return "b = "+base.toFixed(6);}]);
 
</jsxgraph>
 
</jsxgraph>
 +
 
<html>
 
<html>
 
<li><strong>Quadrado:</strong>
 
<li><strong>Quadrado:</strong>
Line 28: Line 30:
 
e da área com a variação da aresta:
 
e da área com a variação da aresta:
 
</li>
 
</li>
<center>
+
</html>
&nbsp;<p></p>
+
 
<div id="box2" class="jxgbox" style="width:500px; height:500px;"></div><p></p>
+
<jsxgraph box="box2">
&nbsp;
 
</center>
 
<script type="text/javascript">
 
 
  var board = JXG.JSXGraph.initBoard('box2', {boundingbox: [-5, 5, 5, -5], axis:true});
 
  var board = JXG.JSXGraph.initBoard('box2', {boundingbox: [-5, 5, 5, -5], axis:true});
 
  var l1s  = board.createElement('line', [[0,0], [1,1]],{strokeWidth:0});  
 
  var l1s  = board.createElement('line', [[0,0], [1,1]],{strokeWidth:0});  
Line 44: Line 43:
 
  var speri = board.createElement('text',[2.45,3.0,function(){side=2*Math.abs(pas.X());peri = 4*side  ;return "per&iacute;metro = "+peri.toFixed(6);}]);  
 
  var speri = board.createElement('text',[2.45,3.0,function(){side=2*Math.abs(pas.X());peri = 4*side  ;return "per&iacute;metro = "+peri.toFixed(6);}]);  
 
  var a    = board.createElement('text',[3.40,3.5,function(){side=2*Math.abs(pas.X());return "a = "+side.toFixed(6);}]);
 
  var a    = board.createElement('text',[3.40,3.5,function(){side=2*Math.abs(pas.X());return "a = "+side.toFixed(6);}]);
</script>
+
</jsxgraph>
 +
 
 +
<html>
 
<li><strong>Rectangulo:</strong>  
 
<li><strong>Rectangulo:</strong>  
 
<i>a</i> = lado 1,  <i>b</i> = lado 2,  
 
<i>a</i> = lado 1,  <i>b</i> = lado 2,  
Line 52: Line 53:
 
e da área com a variação dos lados:
 
e da área com a variação dos lados:
 
</li>
 
</li>
<center>
+
</html>
&nbsp;<p></p>
+
 
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div><p></p>
+
<jsxgraph box="box3">
&nbsp;
 
</center>
 
<script type="text/javascript">
 
 
  var board = JXG.JSXGraph.initBoard('box3', {boundingbox: [-5, 5, 5, -5], axis:true});
 
  var board = JXG.JSXGraph.initBoard('box3', {boundingbox: [-5, 5, 5, -5], axis:true});
 
  var par  = board.createElement('point',[2,2], {name:'A',style:5});
 
  var par  = board.createElement('point',[2,2], {name:'A',style:5});
Line 76: Line 74:
 
  var ar    = board.createElement('text',[3.35,3.50,function(){sidea=2*Math.abs(par.X());return "a = "+sidea.toFixed(6);}]);
 
  var ar    = board.createElement('text',[3.35,3.50,function(){sidea=2*Math.abs(par.X());return "a = "+sidea.toFixed(6);}]);
 
  var br    = board.createElement('text',[3.35,3.00,function(){sideb=2*Math.abs(par.Y());return "b = "+sideb.toFixed(6);}]);
 
  var br    = board.createElement('text',[3.35,3.00,function(){sideb=2*Math.abs(par.Y());return "b = "+sideb.toFixed(6);}]);
</script>
+
</jsxgraph>
 +
 
 +
<html>
 
<li><strong>Círculo:</strong>
 
<li><strong>Círculo:</strong>
 
<i>r</i> = raio do círculo,   
 
<i>r</i> = raio do círculo,   
Line 84: Line 84:
 
e da área do círculo com a variação do raio:
 
e da área do círculo com a variação do raio:
 
</li>
 
</li>
<center>
+
</html>
&nbsp;<p></p>
+
 
<div id="box4" class="jxgbox" style="width:500px; height:500px;"></div><p></p>
+
<jsxgraph box="box4">
&nbsp;
 
</center>
 
<script type="text/javascript">
 
 
  var board = JXG.JSXGraph.initBoard('box4', {boundingbox: [-5, 5, 5, -5], axis:true});
 
  var board = JXG.JSXGraph.initBoard('box4', {boundingbox: [-5, 5, 5, -5], axis:true});
 
  var poc    = board.createElement('point',[0,0], {name:'O',style:5,fixed:true});
 
  var poc    = board.createElement('point',[0,0], {name:'O',style:5,fixed:true});
Line 103: Line 100:
 
  var cperim = board.createElement('text',[2,3.00,
 
  var cperim = board.createElement('text',[2,3.00,
 
  function(){radius=Math.sqrt(prc.X()*prc.X()+prc.Y()*prc.Y());perimeter=2*Math.PI*radius;return "per&iacute;metro = "+perimeter.toFixed(6);}]);
 
  function(){radius=Math.sqrt(prc.X()*prc.X()+prc.Y()*prc.Y());perimeter=2*Math.PI*radius;return "per&iacute;metro = "+perimeter.toFixed(6);}]);
</script>
+
</jsxgraph>
 +
 
 +
</html>
 
</ul>
 
</ul>
 
<hr>
 
<hr>

Revision as of 12:48, 23 June 2021

  • Triângulo rectângulo: b = base, h = altura, logo área = ( b × h )/2 e perímetro = b + h + (b2+h2)1/2.

    Arraste o ponto A para ver a variação do perímetro e da área com a variação da base e da altura:
  • Quadrado: a = lado (ou aresta), logo área = a2 e perímetro = 4a.

    Arraste o ponto A para ver a variação do perímetro e da área com a variação da aresta:
  • Rectangulo: a = lado 1, b = lado 2, logo área = a×b e perímetro = 2a + 2b.

    Arraste o ponto A para ver a variação do perímetro e da área com a variação dos lados:
  • Círculo: r = raio do círculo, logo área = πr2 e perímetro = 2πr.

    Arraste o ponto P para ver a variação do perímetro da circunferência e da área do círculo com a variação do raio:
  • </html>


Última alteração em 23/07/2009

Todos os gráficos interactivos foram criados com recurso à livraria <a href="http://jsxgraph.uni-bayreuth.de/wp/">JSXgraph</a>. </body> </html>