April 30, 2024

Sortiert bleiben

Sortierverfahren

Weiterlesen
Juli 17, 2023

Animate this

Simple Js Animation

Weiterlesen
Mai 3, 2021

Bruchailromantik

Bruchrechnen in JavaScript

Weiterlesen
April 14, 2021

Mal schnell ein paar Zahlen

Mathehausaufgaben aus dem Zufallsgenerator

Weiterlesen
Cover Image

Sortiert bleiben

Sortierverfahren

April 30, 2024 - Lesezeit: 3 Minuten

Es gibt ein ganze Menge verschiedener Sortierverfahren, die man benutzen kann um etwas Ordnung in das Chaos zu bekommen. Jedes Verfahren hat bei vor und Nachteile.Wenn man in Javascript nicht selber sortiert, sondern das dem Browser überlässt ist es natürlich irrelevant, welches Verfahren tatsächlich verwendet wird. Trotzdem kann das beschäftigen mit diesen Verfahren neue Denkanstöße liefern.

Der Bubble Sort

Bei diesem Verfahren "blubbern" die Werte einfach nach oben. Das Verfahren ist langsam und eignet sich nur bedingt für große Mengen. Aber es ist einfach zu verstehen und genauso einfach zu implementieren.

Laden...

Der Selection Sort

Dieses Verfahren "selektiert" die zu sortierenen Einträge vorher und ist daher effizienter als Bubble Sort.

Laden...

Der Insertion Sort

Bei diesem Verfahren werden die Einträge an der richtigen Stelle einsortiert. Es eignet sich am besten für vorsortierte Werte, bei denen ein neuer Wert an die passende Stelle hinzugefügt werden soll.

Laden...

Der Quick Sort

Der Quicksort teilt die Arbeit in kleine Teilabschnitte auf und muss nicht erneut bereits sortierte Abschnitte prüfen. In dem Beispiel habe ich mehr Werte genommen, da ansonsten die ganze Power den Verfahrens nicht richtig sichtbar wird.

Laden...

Cover Image

Animate this

Simple Js Animation

Juli 17, 2023 - Lesezeit: ~1 Minute

Wenn man mal schnell eine Idee ausprobieren will ist js immernoch am besten dafür geeignet. Hier mal schnell eine kleine Idee für einen lustigen Zeitvertreib. Einfach mit der Maus klicken und sich überraschen lassen:

Animation

Die ganzen Animationen sind mit ein wenig Mathe und einer grundsätzlichen Engine einfach implementiert.

Cover Image

Bruchailromantik

Bruchrechnen in JavaScript

Mai 3, 2021 - Lesezeit: 41 Minuten

So, hier jetzt also ein JavaScript für Bruchrechenaufgaben. Das ist diesmal etwas größer, um der Anzeige von Bruchzahlen auch gerecht zu werden und nicht irgendeine komische Schreibweise verwenden zu müssen.

//(
var myCalcer = (NumberToUse, targetElement) => {
  // the brain -> calcing stuff
  function Fraction(zahl) {
    let numerator = 0;
    let denominator = 0;
    for (i = 1; true; i *= 10) {
      if ((zahl * i) == Math.floor(zahl * i)) {
        numerator = (zahl * i);
        denominator = i;
        break;
      }
    }
    return ([numerator, denominator]);
  }

  function calc_ggt(a, b) {
    let h = (a > b) ? b : a;
    for (i = h; i > 1; i--) {
      if ((a % i) == 0 && (b % i) == 0) {
        return i;
      }
    }
    return 1;
  }
  // the eye -> formatting output
  function writeFraction(zaehler, nenner) {
    let outSpan = document.createElement("SPAN");
    outSpan.setAttribute('class', 'frac');
    outSpan.setAttribute('style', 'padding-right:5px;');
    outSpan.innerHTML = `<sup>${zaehler}</sup><span>/</span><sub>${nenner}</sub>`;
    targetElement.appendChild(outSpan);
  }

  function writeOperatorOrLine(opToWrite) {
    let outSpan = document.createElement("SPAN");
    outSpan.setAttribute('style', 'vertical-align:14px;padding-right:5px;');
    outSpan.innerText = opToWrite;
    targetElement.appendChild(outSpan);
  }

  function addcss() {
    let styleHelper = document.createElement("style");
    styleHelper.id = 'styleHelper';
    styleHelper.innerHTML = `span.frac {
          display: inline-block;
          text-align: center;
        }

        span.frac>sup {
          display: block;
          border-bottom: 1px solid;
          font: inherit;
        }

        span.frac>span {
          display: none;
        }

        span.frac>sub {
          display: block;
          font: inherit;
        }`;
    targetElement.appendChild(styleHelper);
  }
  // the hand -> doing things
  let bruch = Fraction(NumberToUse);
  let ggt = calc_ggt(bruch[0], bruch[1]);
  addcss();
  writeOperatorOrLine(NumberToUse);
  writeOperatorOrLine("=");
  writeFraction(bruch[0], bruch[1]);
  writeOperatorOrLine(":");
  writeOperatorOrLine(ggt);
  writeOperatorOrLine("=");
  writeFraction(bruch[0] / ggt, bruch[1] / ggt);
};
//)(0.45);
var inputElement = document.createElement("INPUT");
var buttonElement = document.createElement("BUTTON");
var targetOutElement = document.createElement("DIV");
buttonElement.innerHTML = "Calc";
buttonElement.onclick = () => {
  /*
  for(var mainCounter = 1; mainCounter < 100; mainCounter++ ) {
    myCalcer(
      mainCounter /
      Math.pow(10, ("" + mainCounter).length),
      targetElement
    );
    targetElement.appendChild(document.createElement("BR"));
    targetElement.appendChild(document.createElement("BR"));
  }
  */
  targetOutElement.innerHTML = "";
  let numberToUse = parseFloat(inputElement.value.replace(',', '.'));
  myCalcer(numberToUse, targetOutElement);
};
targetOutElement.style.backgroundColor = "white";
targetOutElement.style.border = '1px solid black';
targetOutElement.style.borderRadius = '4px';
targetOutElement.style.padding = '10px';
targetOutElement.style.margin = 'auto';
targetOutElement.style.width = '200px';
targetOutElement.style.textAlign = 'center';
document.body.appendChild(inputElement);
document.body.appendChild(buttonElement);
document.body.appendChild(targetOutElement);

Hierbei teilt sich die Funktion myCalcer in 3 Teile. Der erste Teil sind die Berechnungsfunktionen. Der zweite Teil regelt die Ausgabe und der dritte Teil macht die Rechnung. Am Ende kommt noch ein bisschen Styling dazu, damit das auch was hermacht. Kann man direkt in der Konsole benutzen oder hier:

EOF

Cover Image

Mal schnell ein paar Zahlen

Mathehausaufgaben aus dem Zufallsgenerator

April 14, 2021 - Lesezeit: ~1 Minute

Und wieder hilft mir ein kleines Script in Übung zu bleiben.

for(let i =0; i<20; i++){
  var op     = parseInt((Math.random(i)*4).toString());  
  var x        = parseInt((Math.random(i)*100).toString()); 
  var y        = parseInt((Math.random(i)*100).toString()); 
  
  if(op===0)    console.log(x + ' + '+y + ' = ' + (x+y));
  if(op===1)    console.log(x + ' - '+y + ' = ' + (x-y));
  if(op===2)    console.log(x + ' * '+y + ' = ' + (x*y));
  if(op===3)    console.log(x + ' / '+y + ' = ' + (x/y));
}

Aber man sollte natürlich nicht direkt das Ergebnis prüfen. Brüche kann der Gernerator auch nocht nicht. Den gibt es dann beim nächsten Mal.

Kategorien

Navigation

Tags