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

From JSXGraph Wiki
(New page: <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /...)
 
No edit summary
 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<title>Orlando Camargo Rodríguez - ensino</title>
</head>
<body>
<h2>Geometria básica no plano: áreas e perímetros</h2>
<p></p>
<ul>
<ul>
<li><strong>Triângulo rectângulo:</strong> <i>b</i> = base, <i>h</i> = altura,  
<li><strong>Triângulo rectângulo:</strong> <i>b</i> = base, <i>h</i> = altura,  
Line 16: Line 6:
Arraste o ponto <i>A</i> para ver a variação do perímetro  
Arraste o ponto <i>A</i> para ver a variação do perímetro  
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>
<center>
</html>
&nbsp;<p></p>
 
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><p></p>
<jsxgraph box="box">
&nbsp;
  var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 5, 5, -5], axis:true});
</center>
  var po    = board.create('point',[0,0], {name:'O',style:5,fixed:true});
<script type="text/javascript">
  var pa    = board.create('point',[2,2], {name:'A',style:5});
  var board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 50, unitY: 50, axis:true});
  var pb    = board.create('point',["X(A)",0], {name:'B',style:5});
  var po    = board.createElement('point',[0,0], {name:'O',style:5,fixed:true});
  var t    = board.create('polygon',["O","A","B"]);
  var pa    = board.createElement('point',[2,2], {name:'A',style:5});
  var tarea = board.create('text',[3,2.0,function(){area = 0.5*Math.abs(pa.Y()*pb.X());return "&aacute;rea = "+area.toFixed(6);}]);
  var pb    = board.createElement('point',["X(A)",0], {name:'B',style:5});
  var tperi = board.create('text',[2.45,2.5,function(){
  var t    = board.createElement('polygon',["O","A","B"]);
  var tarea = board.createElement('text',[3,2.0,function(){area = 0.5*Math.abs(pa.Y()*pb.X());return "&aacute;rea = "+area.toFixed(6);}]);
  var tperi = board.createElement('text',[2.45,2.5,function(){
  b = Math.abs(pa.X()); h = Math.abs(pa.Y());
  b = Math.abs(pa.X()); h = Math.abs(pa.Y());
  p = b+h+Math.sqrt(b*b+h*h);return "per&iacute;metro = "+p.toFixed(6);}]);
  p = b+h+Math.sqrt(b*b+h*h);return "per&iacute;metro = "+p.toFixed(6);}]);
  var h    = board.createElement('text',[3.35,3.50,function(){altura=Math.abs(pa.Y());return "h = "+altura.toFixed(6);}]);
  var h    = board.create('text',[3.35,3.50,function(){altura=Math.abs(pa.Y());return "h = "+altura.toFixed(6);}]);
  var b    = board.createElement('text',[3.35,3.00,function(){base  =Math.abs(pa.X());return "b = "+base.toFixed(6);}]);
  var b    = board.create('text',[3.35,3.00,function(){base  =Math.abs(pa.X());return "b = "+base.toFixed(6);}]);
</script>
</jsxgraph>
 
<html>
<li><strong>Quadrado:</strong>
<li><strong>Quadrado:</strong>
<i>a</i> = lado (ou aresta),   
<i>a</i> = lado (ou aresta),   
Line 41: 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;
  var board = JXG.JSXGraph.initBoard('box2', {boundingbox: [-5, 5, 5, -5], keepAspectRatio:true, axis:true});
</center>
  var l1s  = board.create('line', [[0,0], [1,1]],{strokeWidth:0});  
<script type="text/javascript">
  var pas  = board.create('point',[2,2], {name:'A',style:5,slideObject:l1s});
  var board = JXG.JSXGraph.initBoard('box2', {originX: 250, originY: 250, unitX: 50, unitY: 50, axis:true});
  var pbs  = board.create('point',["X(A)" ,"-Y(A)"], {name:'B',style:5});
  var l1s  = board.createElement('line', [[0,0], [1,1]],{strokeWidth:0});  
  var pcs  = board.create('point',["-X(A)","-Y(A)"], {name:'C',style:5});
  var pas  = board.createElement('point',[2,2], {name:'A',style:5,slideObject:l1s});
  var pds  = board.create('point',["-X(A)","Y(A)" ], {name:'D',style:5});
  var pbs  = board.createElement('point',["X(A)" ,"-Y(A)"], {name:'B',style:5});
  var s    = board.create('polygon',["A","B","C","D"]);
  var pcs  = board.createElement('point',["-X(A)","-Y(A)"], {name:'C',style:5});
  var sarea = board.create('text',[3  ,2.5,function(){side=2*Math.abs(pas.X());area = side*side;return "&aacute;rea = "+area.toFixed(6);}]);  
  var pds  = board.createElement('point',["-X(A)","Y(A)" ], {name:'D',style:5});
  var speri = board.create('text',[2.45,3.0,function(){side=2*Math.abs(pas.X());peri = 4*side  ;return "per&iacute;metro = "+peri.toFixed(6);}]);  
  var s    = board.createElement('polygon',["A","B","C","D"]);
  var a    = board.create('text',[3.40,3.5,function(){side=2*Math.abs(pas.X());return "a = "+side.toFixed(6);}]);
  var sarea = board.createElement('text',[3  ,2.5,function(){side=2*Math.abs(pas.X());area = side*side;return "&aacute;rea = "+area.toFixed(6);}]);  
</jsxgraph>
  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);}]);
<html>
</script>
<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 65: 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;
  var board = JXG.JSXGraph.initBoard('box3', {boundingbox: [-5, 5, 5, -5], axis:true});
</center>
  var par  = board.create('point',[2,2], {name:'A',style:5});
<script type="text/javascript">
  var pbr  = board.create('point',["X(A)" ,"-Y(A)"], {name:'B',style:5});
  var board = JXG.JSXGraph.initBoard('box3', {originX: 250, originY: 250, unitX: 50, unitY: 50, axis:true});
  var pcr  = board.create('point',["-X(A)","-Y(A)"], {name:'C',style:5});
  var par  = board.createElement('point',[2,2], {name:'A',style:5});
  var pdr  = board.create('point',["-X(A)","Y(A)" ], {name:'D',style:5});
  var pbr  = board.createElement('point',["X(A)" ,"-Y(A)"], {name:'B',style:5});
  var r    = board.create('polygon',["A","B","C","D"]);
  var pcr  = board.createElement('point',["-X(A)","-Y(A)"], {name:'C',style:5});
  var rperi = board.create('text',[2.45,2.5,function(){
  var pdr  = board.createElement('point',["-X(A)","Y(A)" ], {name:'D',style:5});
  var r    = board.createElement('polygon',["A","B","C","D"]);
  var rperi = board.createElement('text',[2.45,2.5,function(){
  sidea=Math.abs(par.X());
  sidea=Math.abs(par.X());
  sideb=Math.abs(par.Y());
  sideb=Math.abs(par.Y());
Line 87: Line 72:
  area = sidea*sideb;
  area = sidea*sideb;
  return "&aacute;rea = "+area.toFixed(6);}]);
  return "&aacute;rea = "+area.toFixed(6);}]);
  var ar    = board.createElement('text',[3.35,3.50,function(){sidea=2*Math.abs(par.X());return "a = "+sidea.toFixed(6);}]);
  var ar    = board.create('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.create('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 97: 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;
  var board = JXG.JSXGraph.initBoard('box4', {boundingbox: [-5, 5, 5, -5], axis:true, keepAspectRatio:true});
</center>
  var poc    = board.create('point',[0,0], {name:'O',style:5,fixed:true});
<script type="text/javascript">
  var prc    = board.create('point',[2,2], {name:'P',style:5});
  var board = JXG.JSXGraph.initBoard('box4', {originX: 250, originY: 250, unitX: 50, unitY: 50, axis:true});
  var c    = board.create('circle',[[0,0], ["X(P)","Y(P)"]],
  var poc    = board.createElement('point',[0,0], {name:'O',style:5,fixed:true});
  var prc    = board.createElement('point',[2,2], {name:'P',style:5});
  var c    = board.createElement('circle',[[0,0], ["X(P)","Y(P)"]],
{strokeColor:'#0000ff',strokeWidth:3,fillColor:'#cccccc',fillOpacity:0.3});
{strokeColor:'#0000ff',strokeWidth:3,fillColor:'#cccccc',fillOpacity:0.3});
  var vr    = board.createElement('line',["O","P"],  
  var vr    = board.create('line',["O","P"],  
{strokeColor:'#0000ff',strokeWidth:3,straightFirst:false,straightLast:false,firstArrow:true,lastArrow:true});
{strokeColor:'#0000ff',strokeWidth:3,straightFirst:false,straightLast:false,firstArrow:true,lastArrow:true});
  var carea = board.createElement('text',[2.6,2.5,
  var carea = board.create('text',[2.6,2.5,
  function(){radius=Math.sqrt(prc.X()*prc.X()+prc.Y()*prc.Y());area = Math.PI*radius*radius;return "&aacute;rea = "+area.toFixed(6);}]);
  function(){radius=Math.sqrt(prc.X()*prc.X()+prc.Y()*prc.Y());area = Math.PI*radius*radius;return "&aacute;rea = "+area.toFixed(6);}]);
  var r    = board.createElement('text',[2.95,3.50,
  var r    = board.create('text',[2.95,3.50,
  function(){radius=Math.sqrt(prc.X()*prc.X()+prc.Y()*prc.Y());return "r = "+radius.toFixed(6);}]);
  function(){radius=Math.sqrt(prc.X()*prc.X()+prc.Y()*prc.Y());return "r = "+radius.toFixed(6);}]);
  var cperim = board.createElement('text',[2,3.00,
  var cperim = board.create('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>
<i>Última alteração em 23/07/2009</i></p><p>
<i>Última alteração em 23/07/2009</i></p><p>
Todos os gráficos interactivos foram criados com recurso à livraria  
Todos os gráficos interactivos foram criados com recurso à livraria  
<a href="http://jsxgraph.uni-bayreuth.de/wp/">JSXgraph</a>.  
<a href="https://jsxgraph.org">JSXGraph</a>.  
</body>
</body>
</html>
</html>
[[Category:Contributions]]

Latest revision as of 10:56, 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:

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

Todos os gráficos interactivos foram criados com recurso à livraria JSXGraph.

Retrieved from "http://jsxgraph.org/wiki/index.php?title=Geometria_básica_no_plano:_áreas_e_perímetros&oldid=7445"