Hallo und herzlich Willkommen zum zweiten Teil zum Thema:
Wie man einen Zufallsgenerator programmiert.
Wie bereits im ersten Teil angekündigt, können wir uns heute auf etwas Coding freuen!
Die Anforderungen an die Software wurden dort definiert und müssen nun umgesetzt werden! Zunächst sollten wir uns aber einen Plan verschaffen, wie wir nun starten! Da wir nicht einfach blind am Ziel vorbei laufen wollen, verschaffen wir uns zunächst nochmal einen kleinen Überblick.
Ein Beispiel dafür aus dem Alltag:
Wenn ein Haus gebaut wird und sich noch im Rohbau befindet, sollten bauliche Maßnahmen zunächst fertig gestellt werden, bevor man die Möbel reinstellt. Sonst muss man während den Baumaßnahmen sowie kurz vor Schluss, wenn es ans Malern und Tapezieren geht, die ganze Zeit die Möbel umstellen. Das ist sehr problematisch und kostet im Endeffekt nur wertvolle Zeit und Zeit ist bekanntlich Geld.
Um Projekte effektiv planen zu können, gibt es verschiedene Hilfsmittelchen wie zum Beispiel die Netzplantechnik. Ein Netzplan zur Planung einer Hochzeig könnte ungefähr so aussehen:
Urhebernachweis
Dabei handelt es sich hier um eine vereinfachte Darstellung ohne den Faktor Zeit.
Wer mag, kann sich hier zu diesen Thema weiterbilden.
Für den Zufallsgenerator kümmern wir uns heute hierum:
<input type="text" id="teilnehmer" placeholder="Name des Teilnehmers"/>
Der placeholder ist dafür da, den Text der dort hinterlegt wurde anzuzeigen, solange das Feld nicht gefüllt ist. Die id vergeben wir, damit wir später mit Hilfe von JavaScript einfacher auf den Wert des input feldes zugreifen können.
Zudem verwenden wir zum speichern eines Datensatzes einen button.
<button id="knopf">Steemian hinzufügen</button>
Zur visuellen Darstellung der Daten verwenden wir eine unordered list, kurz ul. Für die Verarbeitung mit JavaScript halten wir uns diese auch in Form eines Arrays.
<ul id="teilnehmerliste"></ul>
// für das JavaScript ein leerer Array
var teilnehmerliste = [];
Den Knopf möchten wir nun etwas Leben einhauchen, und zwar sollen ein paar Dinge passieren, wenn der Nutzer draufdrückt:
Um den Knopf ein Click Event zu verpassen, haben wir 2 Möglichkeiten. Entweder wir verpassen ihn die Logik über das onclick attribut oder aber wir schreiben einen Eventlistener. Für das Tutorial nehme ich den Eventlistener, wird in der Arbeitswelt auch lieber gesehen ;)
var teilnehmerliste = [];
knopf.addEventListener("click", function(){
// feld selektieren
var eingabefeld = document.getElementById("teilnehmer");
var wert = eingabefeld.value;
// feld leeren
eingabefeld.value = "";
// wenn wert nicht leer, in liste eintragen!
if (wert != "") {
teilnehmerliste.push(wert);
}
console.log(teilnehmerliste);
});
Geben wir nun einfach mal Test in das Eingabefeld ein und drücken auf Steemian hinzufügen erscheint folgendes in der Console
Drücken wir erneut ohne etwas in das Feld einzutragen, sehen wir wieder nur den einen Eintrag.
Es ist also sichergestellt, das sich zu keinen Zeitpunkt leere Einträge in der Teilnehmerliste befinden.
Nun wollen wir noch die Daten aus dem Teilnehmer Array in die Liste packen, damit wir diese auch auf unseren Bildschirm bewundern können:
// ul liste holen
var guiTeilnehmerliste = document.getElementById("teilnehmerliste");
// ul liste füllen
for (var i=0; i < teilnehmerliste.length; i++) {
var li = document.createElement("li");
var textKnoten = document.createTextNode(teilnehmerliste[i]);
li.appendChild(textKnoten);
guiTeilnehmerliste.appendChild(li);
}
Die Daten werden dabei mit Hilfe einer For-Schleife ausgelesen. Für die einzelnen Einträge im Array wird ein listenelement erstellt,welches den jeweiligen Text bekommt und an unsere ul angehangen wird.
Zudem müssen wir die dargestellte Liste jedes mal leeren, wenn wir neue Datensätze anfügen, damit diese nicht doppelt und dreifach in der Liste vorkommen. Das machen wir so:
// ul liste leeren
while (guiTeilnehmerliste.firstChild) {
guiTeilnehmerliste.removeChild(guiTeilnehmerliste.firstChild);
}
Mit Hilfe der While-Schleife werden solange Kindelemente vorhanden sind, diese einfach rausgelöscht.
Anbei noch ein Screenshot, was nun passiert, wenn man Test eingibt und auf den Knopf drückt.
Screenshot vom Ergebnis:
Ich freue mich schon auf Teil 3 und wünsche euch allen ein schönes Wochenende :)
Ein Link zum Fiddle des aktuellen Stands findet ihr hier.