1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
<html>
<head>
<title>JSXGraph example</title>
<link rel="stylesheet" type="text/css" href="../distrib/jsxgraph.css" />
<script type="text/javascript" src="/javascript/prototype/prototype.js"></script>
<script type="text/javascript" src="../src/loadjsxgraph.js"></script>
</head>
<body>
<h1>Sinus und Cosinus am Einheitskreis</h1>
<!-- Die beiden Zeichenflaechen, schoen nebeneinander angeordnet in einer Tabelle -->
<table border="0">
<tr><td>
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
</td><td>
<div id="box2" class="jxgbox" style="width:500px; height:500px;"></div>
</td></tr>
</table>
Die Kurven im rechten Board kann man sich auch über eine <a href="javascript:void(0);" onclick="animate(b1p1, -10, 41);">Animation</a>
des Gliders A im linken Bild erstellen lassen. Ganz neu: <strong>Hooks</strong>.
<!-- Die Tabelle mit den Werten -->
<table style="border: 0px solid black; text-align: center" width="500px">
<tr><th style="border: 1px solid black" width="100px">Winkel (in rad)</th><th style="border: 1px solid black" width="100px">Winkel (k*pi)</th><th style="border: 1px solid black" width="100px">Winkel (in Grad)</th><th style="border: 1px solid black" width="100px">S.Y()</th><th style="border: 1px solid black" width="100px">C.Y()</th></tr>
<tr><td id="print_rad">1</td><td id="print_kpi">2,5</td><td id="print_grad">2</td><td id="print_sin">3</td><td id="print_cos">4</td></tr>
</table>
<script type="text/javascript">
/* <![CDATA[ */
// board links oben initialisieren
board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 150, unitY: 150});
// Einheitskreis
b1c1 = board.create('circle', [[0,0],[1,0]]);
// Gleiter auf dem Einheitskreis, startet in [1, 0]
b1p1 = board.create('point', [2, 0], {slideObject: b1c1});
// Achsen erzeugen
b1axisx = board.create('axis', [[0,0], [0,1]], {});
b1axisy = board.create('axis', [[0,0], [1,0]], {});
// Sekrechten vom Gleiter auf die Achsen zeichnen
perp = board.create('perpendicularsegment', [b1axisx,b1p1]); //,{strokeColor:['#ff0000',null],visible:[true,false]});
// perp = board.create('perpendicular', ['X-Achse',b1p1], [{strokeColor: '#ff0000', visible: true}, {visible: false}]);
perp2 = board.create('perpendicularsegment',[b1axisy,b1p1]); //,{strokeColor:['#0000ff',null],visible:[true,false]});
// das zweite board oben rechts initialisieren, Y-Achse ist skaliert
board2 = JXG.JSXGraph.initBoard('box2', {originX: 100, originY: 250, unitX: 50, unitY: 150, axis:true});
// Punkt der sinus zeichnet
b2p1 = board2.create('point', [
function(){ return JXG.Math.Geometry.rad([1,0], [0,0], b1p1); },
function() { return b1p1.Y() }],
{fixed: true, trace: true, strokeColor: '#ff0000', name: 'S'});
// Punkt, der cosinus zeichnet
b2p2 = board2.create('point', [
function(){ return JXG.Math.Geometry.rad([1,0], [0,0], b1p1); },
function() { return b1p1.X() }],
{fixed: true, trace: true, strokeColor: '#0000ff', name: 'C'});
// Die Abhaengigkeiten speichern. Mittlerweile nur noch wichtig, falls b1p1 geloescht werden sollte.
board.addChild(board2);
// Deklarationen fuer die Animation
var animated = false;
function animate(point, direction, count) {
if(animated) {
point.stopAnimation();
animated = false;
} else {
point.startAnimation(direction, count);
animated = true;
}
}
// Hook-Funktion definieren
function print_table() {
var rad = JXG.Math.Geometry.rad([1,0], [0,0], b1p1);
$('print_rad').innerHTML = Math.round(rad,2);
$('print_kpi').innerHTML = Math.round(rad*Math.PI,2) + ' * pi';
$('print_grad').innerHTML = Math.round(rad/Math.PI*180,2);
}
// und beim board registrieren.
print_table_id = board.addHook(print_table,'update');
/* ]]> */
</script>
<h1>Thaleskreis</h1>
<table border="0" width="800px" cols="300px,500px">
<tr><td>
Der Winkel zwischen B, C und A beträgt <span id="print_angle">...</span> Rad. Dies entspricht <span id="print_angle_grad">...</span> Grad.
<br>
Der Winkel zwischen A, B und C beträgt <span id="print_angle_2">...</span> Grad.
</td><td>
<div id="box3" class="jxgbox" style="width:500px; height:500px;"></div>
</td></tr>
</table>
<script type="text/javascript">
/* <![CDATA[ */
// Das Objekt geonext ist global und wird in Geonext.js initialisiert
// board links oben initialisieren
board3 = JXG.JSXGraph.initBoard('box3', {originX: 250, originY: 250, unitX: 50, unitY: 50});
// Durchmesserpunkte
// Kreis
b3p1 = board3.create('point', [4, 0], {fixed: true});
b3p2 = board3.create('point', [-4, 0], {fixed: true});
b3c1 = board3.create('circle', [[0,0], b3p1]);
// Gleiter auf dem Kreis, startet in [1, 0]
b3s1 = board3.create('point', [1, 1], {slideObject: b3c1});
// Die beiden Schenkel des Dreiecks
b3l1 = board3.create('line', [b3p1, b3s1], {straightFirst: false, straightLast: false});
b3l2 = board3.create('line', [b3p2, b3s1], {straightFirst: false, straightLast: false});
// Achsen erzeugen
b3axisx = board3.create('axis', [[0,0], [0,1]], {});
b3axisy = board3.create('axis', [[0,0], [1,0]], {});
// Hook anlegen fuer die Ausgabe des Winkels
function test() {
var rad;
// Je nachdem ob der Glider ober- oder unterhalb der X-Achse liegt, muss die Winkelreihenfolge getauscht werden.
if(b3s1.Y() < 0)
rad = JXG.Math.Geometry.rad(b3p1, b3s1, b3p2);
else
rad = JXG.Math.Geometry.rad(b3p2, b3s1, b3p1);
$('print_angle').innerHTML = Math.round(rad,2);
$('print_angle_grad').innerHTML = Math.round(rad/(2*Math.PI)*360,2);
}
hook_id = board3.addHook(test);
board3.addHook(function() {
$('print_angle_2').innerHTML = Math.round(JXG.Math.Geometry.rad(b3p1, b3p2, b3s1)/Math.PI*180,2);
});
/* ]]> */
</script>
</body>
</html>
|
