Sinus- und Kosinusfunktion/3. Allgemeine Sinusfunktion und MediaWiki:Common.js: Unterschied zwischen den Seiten

Aus ZUM-Unterrichten
< Sinus- und Kosinusfunktion(Unterschied zwischen Seiten)
K (- ZUM2Edutags)
Markierung: 2017-Quelltext-Bearbeitung
 
KKeine Bearbeitungszusammenfassung
 
Zeile 1: Zeile 1:
{{Navigation verstecken|{{Lernpfad Sinus- und Kosinusfunktion}}
/* Das folgende JavaScript wird für alle Benutzer geladen. */
|Lernschritte einblenden|Lernschritte ausblenden}}
(function(){
  console.log("initializing zum-toggle");
  const run = function() {
    document.querySelectorAll('[data-zum-toggle-target]').forEach(function (elem) {
      var target = elem.dataset.zumToggleTarget;
      if(!target){ return; }
      elem.addEventListener('click', function (ev) {
        var value = elem.dataset.zumToggleValue !== 'true';
        document.querySelectorAll(target).forEach(function (tElem) {
          tElem.dataset.zumToggleVisible = value;
        });
        elem.dataset.zumToggleValue = String(value);
      });
    });
  };


==Station 3: Die allgemeine Sinusfunktion==
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", run);
  } else {
    run();
  }
})();


Sinusfunktionen und Kosinusfunktionen schauen nicht immer gleich aus.
/*
z.B. <br><br>
* Dialog Javascript for
<math> f(x) = \color{Brown}2\color{Black}\cdot sin(x) </math><br><br>
* Vorlage:DialogButton
<math> g(x)= \color{Brown}0,5\color{Black}\cdot sin(\color{Blue}3\color{Black}\cdot (x-\color{Magenta}5)</math><br><br>
*
<math> h(x)= sin(\color{Blue}4\color{Black}x) +\color{Green}3</math><br><br>
*
<br>
  */
Allgemein:    <math> \color{Brown}a \color{Black}\cdot sin(\color{Blue}b\color{Black}\cdot (x-\color{Magenta}c\color{Black}) + \color{Green}d </math> 
<br><br>
In dieser Station findest du heraus, wie sich die vier Parameter a, b, c und d auf den Verlauf des Graphen auswirken. Viel Spass!


<br><br>
(function(){
===Was ist was?===
  /* add dialog opener event handler */
  const run = function(){
    document.querySelectorAll('[data-dialog-opener-id]').forEach(function(elem) {
      if(elem.dataset.dialogOpenerAdded === 'true') { return; }


{{Box|1=Üben|2=
Untersuche gezielt und mit Auge für Details, wie sich eine Veränderung der einzelnen Parameter auf den Graphen der Funktion auswirkt.
<br>
<ggb_applet id="X6XAZTDT" width="100%" height="500" border="888888" />
|3=Üben}}


Halte deine Erkenntniss nun fest:
      var dialogId = elem.dataset.dialogOpenerId;
      var dialog = document.getElementById(dialogId);


{{Box|Aufgabe 3 - allgemeine Sinusfunktion|Bearbeite die Aufgabe 3a auf dem Arbeitsblatt.|Arbeitsmethode}}
      elem.dataset.dialogOpenerAdded = 'true';
      elem.addEventListener('click', function(ev) {
        dialog.showModal();
        ev.stopPropagation();
        return false;
      });
    });
  };
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", run);
} else {
  run();
}
})();
(function(){
    /* close on click outside of dialog content */
    const run = function(){
    document.querySelectorAll('dialog.zum-dialog').forEach(function(elem){
      if(elem.dataset.dialogCloseonBackdropAdded === 'true') { return; }
      elem.dataset.dialogCloseonBackdropAdded = 'true';


{{Lösung versteckt|
      elem.addEventListener('mousedown', function(ev){
a: verändert die Amplitude, also Strecken bzw. Stauchen in y-Richtung<br>
        if(ev.target !== elem){return true;}
b: Verschiebung in x-Richtung ''(nach links und rechts)''<br>
        var rect = ev.target.getBoundingClientRect();
c: verändert die Periodenlänge, also Strecken bzw. Stauchen in x-Richtung<br>
        if(ev.x >= rect.left
d: Verschieben entlang der y-Achse ''(nach oben und unten)''<br>
        && ev.x <= rect.right
|Lösung anzeigen|Lösung verbergen}}
        && ev.y >= rect.top
        && ev.y <= rect.bottom) { return true; }


<br>
        ev.target.close();
'''
        ev.stopPropagation();
Schreibe folgenden Hefteintrag in dein Schulheft!
        return false;
'''
      });
{{Box|1=Merke|2=
    });
Die allgemeine Sinuskurve <math> y = a\cdot sin(b\cdot(x-c)+d </math> geht so aus der normalen Sinuskurve <math> y=sin(x)</math> hervor: <br>
  };
* Die Amplitude ist der Betrag von a . Die y-Werte liegen also zwischen -a und a. Bei negativem a wird noch an der x-Achse gespiegelt.
if (document.readyState === "loading") {
* Die Periode ist <math> \frac{2\pi}{b} </math>
  document.addEventListener("DOMContentLoaded", run);
* Verschiebung um c in x-Richtung
} else {
* Verschiebung um d in y-Richtung
  run();
<br>
}
'''<u>Beispiel:</u>''' <br><br>
})();
<math> y = 3\cdot sin(0.5\cdot(x-\pi)) </math> bedeutet
(function(){
* Amplitude ist 3
  /*cleanup empty p tags, at beginning and end of dialogs created by Vorlage:DialogButton */
* Periode ist <math> \frac{2 \pi}{0.5}= 4\cdot \pi</math>
  const run = function() {
* Verschiebung um <math> \pi</math> in positive x-Richtung ("nach rechts")
    document.querySelectorAll('dialog.zum-dialog').forEach(function(elem) {
* keine Verschiebung in y-Richtung
      if(elem.dataset.dialogCleanedup === 'true') { return; }
<br>
      elem.dataset.dialogCleanedup = 'true';
[[Datei:Beispiel Sinus.png|left|600px|Beispiel Sinus]]
      [elem.firstElementChild, elem.lastElementChild]
|3=Merksatz}}
        .filter(function(e){return e && e.tagName === 'P' && e.textContent === '';})
<br>
        .forEach(function(e) { elem.removeChild(e);})
 
    });
<br>
    document.querySelectorAll('[data-dialog-opener-id]').forEach(function(elem) {
{{Box|Aufgabe - 3 allgemeine Sinusfunktion|Bearbeite die '''Aufgabe 3b''' auf dem Arbeitsblatt.|Arbeitsmethode}}
      if(elem.dataset.dialogCleanedup === 'true') { return; }
<br>
      elem.dataset.dialogCleanedup = 'true';
<br>
      [elem.firstElementChild, elem.lastElementChild]
{|
        .filter(function(e){ return e && e.tagName === 'P' && e.textContent === '';})
'''Ok, jetzt schauen wir uns die drei Parameter noch etwas genauer an. Have fun...!
        .forEach(function(e){ elem.removeChild(e);})
 
    });
{{Fortsetzung|weiter=Weiter|weiterlink=/3.1 Parameter}}
  };
 
if (document.readyState === "loading") {
[[Kategorie:Mathematik]]
  document.addEventListener("DOMContentLoaded", run);
[[Kategorie:Interaktive Übung]]
} else {
[[Kategorie:GeoGebra]]
  run();
}
})();
(function(){
  /* overrule mediawiki default popup-close event handler */
  const run = function() {
    document.querySelectorAll('dialog.zum-dialog')
    .forEach(function(elem) {elem.querySelectorAll('button.popup-close')
      .forEach(function(btn) { btn.addEventListener('click', function(ev) {
        ev.stopImmediatePropagation();
      });});});
  };
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", run);
} else {
  run();
}
})();

Version vom 18. Februar 2024, 16:52 Uhr

/* Das folgende JavaScript wird für alle Benutzer geladen. */
(function(){
  console.log("initializing zum-toggle");
  const run = function() {
    document.querySelectorAll('[data-zum-toggle-target]').forEach(function (elem) {
      var target = elem.dataset.zumToggleTarget;
      if(!target){ return; }
      elem.addEventListener('click', function (ev) {
        var value = elem.dataset.zumToggleValue !== 'true';
        document.querySelectorAll(target).forEach(function (tElem) {
          tElem.dataset.zumToggleVisible = value;
        });
        elem.dataset.zumToggleValue = String(value);
      });
    });
  };

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", run);
  } else {
    run();
  }
})();

/*
 * Dialog Javascript for
 * Vorlage:DialogButton
 *
 *
 */

(function(){
  /* add dialog opener event handler */
  const run = function(){
    document.querySelectorAll('[data-dialog-opener-id]').forEach(function(elem) {
      if(elem.dataset.dialogOpenerAdded === 'true') { return; }


      var dialogId = elem.dataset.dialogOpenerId;
      var dialog = document.getElementById(dialogId);

      elem.dataset.dialogOpenerAdded = 'true';
      elem.addEventListener('click', function(ev) {
        dialog.showModal();
        ev.stopPropagation();
        return false;
      });
    });
  };
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", run);
} else {
  run();
}
})();
(function(){
    /* close on click outside of dialog content */
    const run = function(){
    document.querySelectorAll('dialog.zum-dialog').forEach(function(elem){
      if(elem.dataset.dialogCloseonBackdropAdded === 'true') { return; }
      elem.dataset.dialogCloseonBackdropAdded = 'true';

      elem.addEventListener('mousedown', function(ev){
        if(ev.target !== elem){return true;}
        var rect = ev.target.getBoundingClientRect();
        if(ev.x >= rect.left 
        && ev.x <= rect.right 
        && ev.y >= rect.top 
        && ev.y <= rect.bottom) { return true; }

        ev.target.close();
        ev.stopPropagation();
        return false;
      });
    });
  };
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", run);
} else {
  run();
}
})();
(function(){
  /*cleanup empty p tags, at beginning and end of dialogs created by Vorlage:DialogButton */
  const run = function() {
    document.querySelectorAll('dialog.zum-dialog').forEach(function(elem) {
      if(elem.dataset.dialogCleanedup === 'true') { return; }
      elem.dataset.dialogCleanedup = 'true';
      [elem.firstElementChild, elem.lastElementChild]
        .filter(function(e){return e && e.tagName === 'P' && e.textContent === '';})
        .forEach(function(e) { elem.removeChild(e);})
    });
    document.querySelectorAll('[data-dialog-opener-id]').forEach(function(elem) {
      if(elem.dataset.dialogCleanedup === 'true') { return; }
      elem.dataset.dialogCleanedup = 'true';
      [elem.firstElementChild, elem.lastElementChild]
        .filter(function(e){ return e && e.tagName === 'P' && e.textContent === '';})
        .forEach(function(e){ elem.removeChild(e);})
    });
  };
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", run);
} else {
  run();
}
})();
(function(){
  /* overrule mediawiki default popup-close event handler */
  const run = function() {
    document.querySelectorAll('dialog.zum-dialog')
     .forEach(function(elem) {elem.querySelectorAll('button.popup-close')
       .forEach(function(btn) { btn.addEventListener('click', function(ev) {
         ev.stopImmediatePropagation();
       });});});
  };
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", run);
} else {
  run();
}
})();