@@ Line 7: / Line 7: @@
 <html>
 <head>
-   <script type="text/javascript"
+   <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.6/jsxgraphcore.js"></script>
-   src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.6/jsxgraphcore.js"></script>
+  <script type="text/javascript" src="https://cdn.rawgit.com/mathjax/MathJax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
     <style>
     .button1{
@@ Line 24: / Line 24: @@
       top: 105px;
       left: 530px;
-}
+   }
     .button1:active {
      background-color: #939393;}
-     .hinweis1 {
+     .formel {
          background-color: #f5f5f5;
          border-radius: 4px ;
-         padding: 20px 60px;
+         padding: 20px 40px;
+        font-family: arial;
+        position:absolute;
+        top: 150px;
+        left: 10px;
+    }
+    .text5 {
          font-family: arial;
+        color:blue;
+        font-size:0.75em;
          position:absolute;
-         top: 159px;
+         top: 860px;
+        left: 480px;
+    }
+    .text2 {
+        font-family: arial;
+        font-size:0.75em;
+        position:absolute;
+        top: 860px;
          left: 100px;
+    }
+    .text3 {
+        font-family: arial;
+        font-size:0.75em;
+        position:absolute;
+        top: 860px;
+        left: 220px;
+    }
+    .text4 {
+        font-family: arial;
+        font-size:0.75em;
+        position:absolute;
+        top: 860px;
+        left: 360px;
+    }
+    .text1 {
+        font-family: arial;
+        font-size:0.75em;
+        position:absolute;
+        top: 860px;
+        left: 20px;
      }
@@ Line 44: / Line 85: @@
 <form id="myForm">
+<!-- Resetbutton, Checkbox und Formel -->
-<h2 class="text" style="color:#939393; font-weight:bold; top:-10px; left:90px; font-family:arial; font-size:1.5em;position:absolute;">Periodendauer <I>T</I><sub>0</sub> periodischer Signale</h2>
 <button class="button1" style="font-size:0.750em" onclick="zurueck()">Reset</button>
 <p><span class="separate" style="position:absolute; top:123px; left:454px; font-family:arial; font-size:0.750em;">mit Gitter<input name="gridbox" id="gridbox" type="checkbox" onclick="showgrid();" checked="checked"></span></p>
-<box class="hinweis1">  </box>
+<box class="formel">\(x(t)=A_1\cdot cos\Big(2\pi f_1\cdot t- \frac{2\pi}{360}\cdot \phi_1\Big)+A_2\cdot cos\Big(2\pi f_2\cdot t- \frac{2\pi}{360}\cdot \phi_2\Big)\)</box>
+<!-- Festlegen der Ausgabefelder -->
+<div class="text1">
+    <span><I>x(t)</I>=<span id="x(t)"></span></span>
+</div>
+<div class="text2">
+    <span><I>x(t+T</I><sub>0</sub><I>)</I>=<span id="x(t+T_0)"></span></span>
+</div>
+<div class="text3">
+    <span><I>x(t+2T</I><sub>0</sub><I>)</I>=<span id="x(t+2T_0)"> </span></span>
+</div>
+<div class="text4">
+    <span><I>x</I><sub>max</sub>=<span id="x_max"></span></span>
+</div>
+<div class="text5">
+    <span><I>T</I><sub>0</sub>=<span id="T_0"></span></span>
+</div>
 <div id="box2" class="jxgbox" style="width:500px; height:100px; float:top; margin:-10px 20px 100px 0px;"></div>
 <div id="box1" class="jxgbox" style="width:600px; height:600px; border:1px solid black; margin:-10px 20px 100px 0px;"></div>
@@ Line 56: / Line 111: @@
 <script type="text/javascript">
+//Grundeinstellungen der beiden Applets
 var brd2 = JXG.JSXGraph.initBoard('box2', {showCopyright:false, showNavigation:false, axis:false, grid:false, zoom:{enabled:false}, pan:{enabled:false}, boundingbox: [-1, 2.2, 12.4, -2.2]});
-var brd1 = JXG.JSXGraph.initBoard('box1', {showCopyright:false, axis:false, grid:false, boundingbox: [-0.9, 2.2, 12.4, -2.2]});
+var brd1 = JXG.JSXGraph.initBoard('box1', {showCopyright:false, axis:false, zoom:{factorX:1.1, factorY:1.1, wheel:true, needshift:true, eps: 0.1}, grid:false, boundingbox: [-0.5, 2.2, 12.4, -2.2]});
 brd2.addChild(brd1);
-xaxis = brd1.create('axis', [[0, 0], [1,0]], {name:'<I>t</I>/ms', withLabel:true, label:{position:'rt', offset:[-25, 15]}});
+//Einstellungen der Achsen
-yaxis = brd1.create('axis', [[0, 0], [0, 1]], {name:'<I>x(t)</I>/V', withLabel:true, label:{position:'rt', offset:[10, -5]}});
+xaxis = brd1.create('axis', [[0, 0], [1,0]], {name:'<I>t</I>/<I>T</I>', withLabel:true, label:{position:'rt', offset:[-25, 15]}});
+yaxis = brd1.create('axis', [[0, 0], [0, 1]], {name:'<I>x(t)</I>', withLabel:true, label:{position:'rt', offset:[10, -5]}});
+//Festlegen der Schieberegler
 a = brd2.create('slider',[[-0.7,1.5],[3,1.5],[0,0.5,1]], {suffixlabel:' <I>A</I>_1=', unitLabel: 'V', snapWidth:0.01}),
 b = brd2.create('slider',[[-0.7,0.5],[3,0.5],[0,1,10]], {suffixlabel:'<I>f</I>_1=', unitLabel: 'kHz', snapWidth:0.1}),
-c = brd2.create('slider',[[-0.7,-0.5],[3,-0.5],[-180,0,180]], {suffixlabel:'<I>&phi;</I>_1=', unitLabel: 'Grad', snapWidth:1}),
+c = brd2.create('slider',[[-0.7,-0.5],[3,-0.5],[-180,0,180]], {suffixlabel:'<I>&straightphi;</I>_1=', unitLabel: 'Grad', snapWidth:5}),
 d = brd2.create('slider',[[6,1.5],[9.7,1.5],[0,0.5,1]], {suffixlabel:'<I>A</I>_2=', unitLabel: 'V', snapWidth:0.01}),
 e = brd2.create('slider',[[6,0.5],[9.7,0.5],[0,2,10]], {suffixlabel:'<I>f</I>_2=', unitLabel: 'kHz', snapWidth:0.1}),
-g = brd2.create('slider',[[6,-0.5],[9.7,-0.5],[-179,90,180]], {suffixlabel:'<I>&phi;</I>_2=',unitLabel: 'Grad', snapWidth:5}),
+g = brd2.create('slider',[[6,-0.5],[9.7,-0.5],[-180,90,180]], {suffixlabel:'<I>&straightphi;</I>_2=',unitLabel: 'Grad', snapWidth:5}),
-t = brd2.create('slider',[[-0.7,-1.5],[3,-1.5],[0,0,10]], {suffixlabel:'<I>t</I>=', unitLabel: 'ms',snapWidth:0.01}),
+t = brd2.create('slider',[[-0.7,-1.5],[3,-1.5],[0,0,10]], {suffixlabel:'<I>t</I>=', snapWidth:0.2}),
+//Definition der Funktion
+signaldarstellung = brd1.create('functiongraph',[function(x){
+        return (a.Value()*Math.cos(2*Math.PI*b.Value()*x-2*Math.PI*c.Value()/360)+d.Value()*Math.cos(2*Math.PI*e.Value()*x-2*Math.PI*g.Value()/360))
+    }], {strokeColor: "red"});
+//Definition des Punktes p_T0, des Hilfspunktes p_T0h und der Geraden l_T0 für Periodendauer T_0
+p_T0=brd1.create('point', [function(){ return Math.round(getT0() *100)/100;},
+      function(){ return a.Value()*Math.cos(2*Math.PI*b.Value()*(Math.round(getT0() *100)/100)-2*Math.PI*c.Value()/360)
+        +d.Value()*Math.cos(2*Math.PI*e.Value()*(Math.round(getT0() *100)/100)-2*Math.PI*g.Value()/360);}], {color:"blue", fixed:true, label:false, size:1, name:''})
+p_T0h = brd1.create('point', [function(){ return Math.round(getT0() *100)/100;}, 2], {visible: false, color:"blue", fixed:true, label:false, size:1, name:''})
+l_T0 = brd1.create('line', [p_T0, p_T0h])
+//Bestimmung des Wertes T_0 mit der Funktion von Siebenwirth
+setInterval(function() {
+var y=Math.round(getT0() *100)/100
+document.getElementById("T_0").innerHTML = y;
+}, 0.1);
+    function getT0() {
+        var A, B, C, Q;
+        if (b.Value() < e.Value()) {
+            A = b.Value();
+            B = e.Value();
+        } else {
+            B = b.Value();
+            A = e.Value();
+        }
+        console.log('Berechne T0 mit A=' + A, 'B=' + B);
+        for (var x = 1; x <= 100; x++) {
+            C = A / x;
+            Q = B / C;
+            console.log(x + '. Durchgang: C = ' + C, 'Q = ' + Q);
+            if (isInt(Q)) {
+                console.log('Q ist eine Qanzzahl!!! T0 ist damit ', 1 / C);
+                return 1 / C;
+            }
+            if (x === 10) {
+                return 10;
+            }
+            if ((1/C) > 10)
+                return 10
+        }
+    }
+    function isInt(n) {
+        return n % 1 === 0;
+    }
+//Ausgabe des Wertes x(t)
+setInterval(function() {
+document.getElementById("x(t)").innerHTML=Math.round((a.Value()*Math.cos(2*Math.PI*b.Value()*t.Value()-2*Math.PI*c.Value()/360)+d.Value()*Math.cos(2*Math.PI*e.Value()*t.Value()-2*Math.PI*g.Value()/360))*1000)/1000;
+}, 0.1);
+//Ausgabe des Wertes x(t+T_0)
+setInterval(function() {
+document.getElementById("x(t+T_0)").innerHTML = Math.round((a.Value()*Math.cos(2*Math.PI*b.Value()*(t.Value()+Math.round(getT0() *1000)/1000)-c.Value())+d.Value()*Math.cos(2*Math.PI*e.Value()*(t.Value()+Math.round(getT0() *1000)/1000)-g.Value()))*1000)/1000;
+}, 0.1);
-brd2.createElement('text', [6.95,-1.48, "V"], {fixed:true});
+//Ausgabe des Wertes x(t+2T_0)
-brd2.createElement('text', [7.8,-1.6, "<I>T</I>_0="], {fixed:true});
+setInterval(function() {
-brd2.create('text',[5.4,-1.48, function()
+document.getElementById("x(t+2T_0)").innerHTML = Math.round((a.Value()*Math.cos(2*Math.PI*b.Value()*(t.Value()+2*Math.round(getT0() *1000)/1000)-c.Value())+d.Value()*Math.cos(2*Math.PI*e.Value()*(t.Value()+2*Math.round(getT0() *1000)/1000)-g.Value()))*1000)/1000;
-  { return '<I>x(t)</I>='+(a.Value()*Math.cos(2*Math.PI*b.Value()*t.Value()-c.Value())+d.Value()*Math.cos(2*Math.PI*e.Value()*t.Value()-g.Value())).toFixed(3) ;}], {fixed:true});
+}, 0.1);
-signaldarstellung = brd1.create('functiongraph',[function(x){
+//Ausgabe des Wertes x_max
-         return (a.Value()*Math.cos(2*Math.PI*b.Value()*x-2*Math.PI*c.Value()/360)+d.Value()*Math.cos(2*Math.PI*e.Value()*x-2*Math.PI*g.Value()/360))
+setInterval(function() {
-    },0], {strokeColor: "red"});
+  var x = new Array(50000);
+    for (var i = 0; i < 50001; i++) {
+         x[i] = Math.round((a.Value()*Math.cos(2*Math.PI*b.Value()*(i/1000)-2*Math.PI*c.Value()/360)+d.Value()*Math.cos(2*Math.PI*e.Value()*(i/1000)-2*Math.PI*g.Value()/360)) *1000)/1000;
+}
+document.getElementById("x_max").innerHTML = Math.max.apply(Math, x);
+}, 0.1);
+//Definition der Funktion zum An- und Ausschalten des Koordinatengitters
 function showgrid() {
       if (gridbox.checked) {
@@ Line 91: / Line 215: @@
       brd1.fullUpdate();
 };
 </script>
 </form>
+<script>
-<script>
+//Definition des Reset-Buttons
 function zurueck() {
      document.getElementById("myForm").reset();
-}
+};
 </script>

Difference between revisions of "Applets:Periodendauer periodischer Signale"

Revision as of 20:26, 9 September 2017