Bezug zum Kerncurriculum:
Ich kann Übergabeparameter und Rückgabewerte in Operationen verwenden.
Bei längeren Programmen kann der Quellcode recht lang und unübersichtlich werden. Oft kommt es vor, dass manche Sequenzen mehrfach in einem Programm verwendet werden. Diese sich wiederholenden Sequenzen kann man in einem eigenen Block zusammenfassen und im Hauptprogramm aufrufen.
Eine Sequenz von Anweisungen, die man in einem eigenständigen Block zusammenfasst, nennt man eine Operation.
Das Schlüsselwort in Javascript, mit welchem man eine Operation festlegt ist: function.
Im folgenden Beispiel wird mit dem Bubble-Sort-Verfahren eine Liste von Zahlen sortiert. Wenn man auf die Leiste CONSOLE klickt, kann man die unsortierte und sortierte Liste in der Konsolenausgabe sehen:
In einem neuen Fenster starten: Bubble-Sort
Wenn mehrere Listen von Zahlen sortiert werden sollen, dann könnte man jedesmal den Sortierblock in das Programm einfügen:
In einem neuen Fenster starten: Mehrfacher Bubble-Sort
Das ist nicht wirklich sinnvoll, da sehr viel identischer Code im Quelltext steht. Dadurch benötigt man mehr Platz, das Programm wird unübersichtlich und bei Änderungen in der Bubble-Sort-Sortierung muss man den Code an mehreren Stellen ändern. Sinnvoller ist es, wenn man den Bubble-Sort-Code in einer Operation auslagert. Dazu:
Man legt eine Operation wie folgt fest:
function BubbleSort(zahlenListe) {
... Anweisungen
}Im Hauptprogramm ruft man die Operation mit dem Namen der Operation auf und übergibt die zu sortierenden Zahlenliste an die Operation, indem man den Variablennamen der zu sortierenden Zahlenliste in die Klammern hinter den Operationsnamen schreibt. In der Operation BubbleSort wird die Zahlenliste mit einem anderen Namen (hier: zahlenListe) gespeichert. Die sortierte Liste wird dann zurückgegeben und in der Variablen sortierteListe1 gespeichert:
let sortierteListe1 = BubbleSort(zListe1);Mit Hilfe des Schlüsselworts return gibt man die sortierte Liste wieder zurück an das Hauptprogramm:
return zahlenListe;Damit sieht das Programm mit der Operation BubbleSort wie folgt aus:
In einem neuen Fenster starten: Operation: Bubble-Sort
Mit folgendem Programm wird die größte Zahl in einer Liste von Zahlen gesucht.
In einem neuen Fenster starten: Suche größte Zahl
Bauen Sie das Programm so um, dass die Suchroutine in die Operation
function sucheGroessteZahl(zahlenListe) {
...
return groessteZahl;
}geschrieben wird und dann vom Hauptprogramm aus aufgerufen wird. Suchen Sie damit in folgenden Zahlenmengen erfolgreich die größte Zahl:
let zListe1 = [378, -132, 0.087, 98.785, -143, -3, 819.9, 0.5, 113, 41];
let zListe2 = [-3, -64, -1784, 0.01, -0.5, 0.006, -18.9];Mit folgendem Programm werden drei bunte Ellipsen gemalt.
In einem neuen Fenster starten: Ellipsen malen
Bauen Sie das Programm so um, dass die Ellipsen mit folgender Operation gemalt werden:
function maleEllipse(fuellfarbe, randfarbe, randdicke, xKoord, yKoord, breite, hoehe) {
...
}Im Hauptprogramm sollen dann mindestens 5 verschiedene Ellipsen gemalt werden, indem man man folgenden Operationsaufruf eingibt:
maleEllipse('IndianRed', 'Chartreuse', 8, 150, 80, 60, 90);Die Zahlen im Argument von 'maleEllipse' werden in der entsprechenden Reihenfolge den Variablen übergeben, also:
Auf folgender Seite finden Sie die Farbnamen, die im Webbrowser verwendet werden können: HTML Color Names.
Beim Programmieren steht man oft vor der Entscheidung, ob man einen komplexen Algorithmus selbst programmieren soll oder ob man eine freie Blibliothek nutzt, mit welcher das gewünschte Ergebnis erreicht werden kann. Dazu ein Beispiel:
In einem kleinen Programm soll eine Hügellandschaft gestaltet werden. Durch folgende Punkte sollen die Kuppen der Hügel verlaufen.
In einem neuen Fenster starten: Hügellandschaft 1
Wenn man die Kuppen mit Linien verbindet, dann sieht das nicht wirklich nach einer Hügellandschaft aus:
In einem neuen Fenster starten: Hügellandschaft 2
Schöner wäre es, wenn die Linien gekrümmte Linien wären. Aus dem Mathematik-Unterricht kennt man Regressionen, Splines,..., aber wie soll das programmiert werden?
Vielleicht wurde bereits eine Bibliothek von jemandem programmiert, die eine gekrümmte Linie durch eine gegebene Menge von Punkten legen und die mit einer freien Lizenz genutzt werden kann. Um eine solche Bibliothek zu finden, kann man in eine Suchmaschine folgende Begriffe eingeben:
Suchbegriffe: "Kurve durch Punkte".
Man findet damit nicht das Gewünschte. Die Sprache der Informatik ist Englisch und man sucht eine Bibliothek für die Programmiersprache JavaScript. Also wird die Suchanfrage geändert:
Suchbegriffe: "javascript curve through points"
Eines der Suchergebnisse liefert folgenden Internet-Link: Smooth.js. Der erste Link führt zu einer GitHub-Seite: Github: Smooth.js mit einer Aussage die vielversprechend klingt:
What is this for? Smooth.js takes an array of numbers or vectors and returns a parametric function that continuously interpolates that array. Smooth.js supports several interpolation methods, and flexible options for boundary behavior. Smooth.js is written in clean, easy-to-read CoffeeScript, and has no external dependencies. It is licensed under the permissive MIT license, so you can use it in just about any project.
Die Bibliothek könnte das Gewünschte leisten. Man übergibt der Bibliothek ein Array von Punkten und Smooth.js liefert eine Funktion, die passend zu den übergebenen Punkten die Punkte einer Kurve berechnet, welche durch die gegebenen Punkte verläuft. Die Lizenz der Bibliothek ist die MIT-Lizenz, so dass die Bibliothek in eigenen Programmen verwendet werden kann, solange man den Copyright-Hinweis mit dem Namen des Autors nicht am Anfang der Bibliothek entfernt.
Die Dokumentation zu der Bibliothek Smooth.js erklärt, wie man das gewünschte Ergebnis erzielen kann. Man legt eine Variable Kurvenfunktion fest und übergibt der Operation Smooth die Punkte als Liste. Die Operation Smooth gibt die Funktion zurück, mit welcher die Kurvenpunkte berechnet werden können:
kurvenFunktion = Smooth(yPunkteArray);Der Funktion kurvenFunktion übergibt man einen gewünschten x-Wert und kurvenFunktion liefert einen passenden y-Wert, der zum Verlauf der Hügel passt:
kurvenFunktion(i/50)Zusätzlich zu der Bibliothek Smooth.js wird in das Programm die Bibliothek quicksettings.js eingebunden, damit problemlos Steuerelemente in das Programm gesetzt werden können. Aktivieren Sie in den Steuerelementen "Linien anzeigen" und "Smoothie anzeigen":
In einem neuen Fenster starten: Smooth
Eine kurze Erklärung zu den wichtigen Zeilen:
kurvenFunktion = Smooth(yPunkteArray);Das Array yPunkteArray mit den y-Werten wird an die Funktion Smooth übergeben. Die Funktion Smooth ermittelt auf der Basis der übergebenen Werte eine Funktion, mit deren Hilfe die Kurvenpunkte berechnet werden können. Diese Funktion wird in der Variablen kurvenFunktion gespeichert.
if (smoothieAn) {
for (let i=0; i<=500; i++) {
strokeWeight(0);
fill('STEELBLUE');
ellipse(i, height-kurvenFunktion(i/50), 3, 3);
}
}Jetzt soll die Kurve gezeichnet werden. Wenn die Boolsche Variable smoothieAn den Wert wahr hat, dann sollen 501 Ellipsen als Kurve gezeichnet werden. Der x-Wert ist i, der y-Wert wird mit Hilfe der kurvenFunktion berechnet. Am Anfang der draw-Funktion wird das Koordinatensystem mit translate(50, 0); um 50 nach rechts verschoben. Die y-Werte werden von der Höhe der Zeichenfläche height abgezogen, da der Koordinatenursprung ja oben links liegt.
Als Übergabeparameter an die kurvenFunktion wählt man i/50, da man 10 Bezugspunkte hat, aber 501 y-Werte benötigt. Der Rückgabewert der kurvenFunktion ist der interpolierte y-Wert, den die Funktion ellipse verwendet, so dass eine stetige und differenzierbare Kurve entsteht.
Folgendes Programm ist ein Schülerprojekt vom Abiturjahrgang 2021:
In einem neuen Fenster starten: Oszillator
Folgendes Programm ist ein Schülerprojekt vom Abiturjahrgang 2021. Fügen Sie mit Hilfe der Maus weitere Punkt in die Zeichenfläche ein.
In einem neuen Fenster starten: Schwanenhals
Wenn Sie selbst externe Bibliotheken in ein Projekt einbinden wollen, dann nutzen Sie dazu bitte den p5.js-Webeditor oder eine Entwicklungsumgebung wie Code-Sandbox oder repl.it. Dort haben Sie die Möglichkeit eigene Dateien einzufügen oder Bibliotheken einzubinden.