Grundlagen der Programmierung: Basiswissen

Benutzereingaben verarbeiten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sämtliche Programmiersprachen können Benutzereingaben entgegennehmen und mit entsprechenden Ausgaben darauf reagieren. In JavaScript betrifft dies ausschließlich Interaktionen auf Websites.

Transkript

Bei Computerprogrammen geht es eigentlich nur um Ein- und Ausgaben, Input und Output. Bei den ersten Programmen, die noch auf Lochkarten geschrieben wurden, ging es um irgendeinen Ausdruck auf Endlospapier. Heute bedeutet "Input" z.B. ein Klick auf einen Button, oder die Bewegung der Maus, oder das Bewegen oder Wischen mit der Hand, vielleicht sogar in der Luft. All das ist Input. Und der "Output", also die Ausgabe, bedeutet, z.B. ändere das, was auf dem Bildschirm zu sehen ist oder vibriere mit dem Game-Controller, den dein Spieler gerade in der Hand hält. Unterschiedliche Sprachen haben unterschiedlichen In- und Output. Bei JavaScript geht es um Webseiten. Deswegen können wir mit JavaScript z.B. keine Dateien auf der Festplatte lesen. Wir können unseren Drucker damit nicht ansteuern. In erster Linie, kümmert sich JavaScript um das, was für Webseiten wichtig ist und wie man dort interagiert. Output haben wir schon kennengelernt: Eine Alert-Box zum Beispiel. Das ist vielleicht kein spannender Output, aber es ist Output. Unser Computerprogramm gibt irgendetwas auf dem Bildschirm aus. Das ist schön, aber das sollten wir noch ein bisschen aufpeppen. Ich habe hier wieder zwei Dateien, einmal "container.html" und mein "script.js". Container.html das hatten wir gerade schon, das ist einfach nur die HTML-Datei, die die JavaScript-Datei aufruft, die eigentliche Musik, die spielt hier in diesem "script.js"; das öffne ich hier in diesem Fall wieder mit "text edit"  und jetzt schreibe ich mal zwei Zahlen hinein und erläutere Ihnen dann im Anschluss, was die hier eigentlich machen. "var name=prompt" und dann mache ich wieder meine runden Klammern, meine Anführungszeichen, und dann schreibe ich, "Wie ist Ihr Name?", ich mache die Klammer wieder zu, Strichpunkt. Und in der zweiten Zeile, das kennen Sie von gerade eben, da schreibe ich "Alert", runde Klammer auf, Anführungszeichen, "Hallo", dann mache ich ein Leerzeichen, ich höre auf mit diesem String, indem ich die Anführungszeichen schließe, Leerzeichen plus Leerzeichen, und jetzt schreibe ich noch einmal "Name"; das ist dasselbe, was wir hier oben hatten. Was muss ich jetzt noch machen? Die runde Klammer zu und einen Strichpunkt setzen. Ich speichere das Ganze ab, kann das hier mal zur Seite schieben, und jetzt kann ich mit einem Doppelklick meinen Container wieder öffnen. Dieser Container, der startet ja dann in meinem Standardbrowser und lädt dann auch diese JavaScript-Datei. Also, Doppelklick, und dann haben wir einmal im Hintergrund, das ist eine einfache HTML-Seite, aber ganz neu: Wie ist Ihr Name? Und es ist auch schon ein Cursor, der hier blinkt, also schreibe ich jetzt mal rein: Thomas, ich klicke auf "OK", und dann haben wir hier ein: "Hallo Thomas". Ich habe hier einen modernen Browser, der hat erkannt, das hier jetzt viele Pop-up-Fenster "aufgeploppt" sind, und fragt mich jetzt, möchte ich diese Seite daran hindern, weitere Dialoge zu öffnen. In dem Fall möchte ich das nicht, das ist alles ok. Ich klicke auf "OK" und das Ganze war es eigentlich schon. Schauen wir uns mal an, was jetzt dieses Programm Zeile für Zeile macht, also wie diese Benutzereingaben verarbeitet werden. Normalerweise startet ein JavaScript-Programm in der ersten Zeile und rattert dann ohne Pause bis zum Ende durch. In dem Fall hört das Programm gleich in der ersten Zeile auf und wartet darauf, dass der Benutzer etwas einträgt, in dem Fall eben hier seinen Namen. Warum macht das das Programm? Weil wir diesen Befehl "prompt" verwenden. "Prompt" ist ein Befehl, der dafür sorgt, dass ein kleines Pop-up-Fenster aufgeht und dass der Benutzer eben aufgefordert wird, irgendeine Eingabe mit der Tastatur zu machen. In dem Fall schreiben wir dazu, was wir vom Benutzer erwarten, nämlich seinen Namen. Wir möchten aber jetzt auch mit diesem Namen, den der Benutzer eingibt, natürlich weiter arbeiten. Wir müssen eine Möglichkeit finden, wie wir diesen Namen zwischenspeichern können. Das macht man in Programmiersprachen mit Variablen. In dem Fall nennen wir diese Variable "name" oder "Name", das können wir frei vergeben, aber wir versuchen natürlich als Programmierer oder Programmiererin auch solche Variablennamen zu verwenden, die irgendwie einen Sinn ergeben, dass man irgendwie noch auch versteht, worum es eigentlich geht. Mit diesem Wörtchen "var", hier ganz vorne in blau, sagen wir Achtung, jetzt kommt eine Variable, die soll den Namen "Namen" haben und die soll speichern, was ein Benutzer eben in diesen prompt eingibt. Das heißt in dieser Zeile passiert eben Folgendes: Der Browser macht ein kleines Pop-up-Fenster auf, schreibt: Wie ist Ihr Name? Dann wartet das Programm so lange, bis der Benutzer auf "OK" geklickt hat. Bestenfalls schreibt er dann vorne seinen Namen hinein, in dem Fall: "Thomas". Und in dem Moment, in dem der Benutzer dann auf "OK" klickt, da verschwindet dieses Fenster wieder und der Inhalt dieses Namens wird in der Variablen "name" zwischengespeichert. Jetzt geht das Programm weiter, geht in die zweite Zeile, und da steht der Befehl "Alert Hallo". Also es soll nochmal eine Pop-up-Box aufgehen, da soll "Hallo" stehen, und hinter diesem "Hallo" kommt zuerst ein Leerzeichen und dann soll der Name nochmal ausgegeben werden. Sieht dann so aus: "Hallo Thomas". Und was Sie darunter sehen: Diese Seite daran hindern, weitere Dialoge zu öffnen; hat der Browser automatisch hinzugefügt, da haben wir als Programmierer oder als Programmiererin gar keinen Einfluss drauf. Benutzereingaben sind für Programmierer immer eine besondere Sache. Wenn ich jetzt hier nochmal die HTML-Datei aufrufe und statt "Wie ist Ihr Name?" einfach eine Zahl eintrage, dann auf "OK" klicke, dann schreibt der Computer: "Hallo 1234567". Wir haben dem Programm nicht gesagt, diese Benutzereingaben irgendwie zu überprüfen, auf Plausibilität oder ob das sein kann, oder wie auch immer. Der Computer erwartet eine Benutzereingabe, und in der zweiten Zeile, da gibt er diese Benutzereingabe aus, völlig egal, was da drin steht. Ich kann, um das nochmal zu testen, entweder dieses HTML-File noch einmal doppelklicken, nochmal aufmachen, oder ich lade die Seite einfach neu mit dem Reload-Button und ich kann hier auch bei "Wie ist Ihr Name?" gar nichts eintragen und dann steht eben hier nur ein "Hallo". Als Programmierer muss ich solche Benutzereingaben immer überprüfen, validieren. Stellen Sie sich vor, Sie haben ein Formular und erwarten vom Benutzer z.B. sein Geburtsdatum oder auch seine Postleitzahl, da müssen Sie überprüfen, wenn Sie damit weiter rechnen wollen also wenn Sie aus dem Geburtsdatum beispielsweise das Alter eines Nutzers berechnen wollen, müssen Sie sicher sein, dass er auch ein Datum eingibt, ein Geburtsdatum und nicht seinen Namen oder irgendeinen anderen Text, mit dem man gar nicht weiter rechnen kann. Der Computer ist relativ dumm, er macht genau das, was wir ihm sagen. Wenn wir ihm nicht sagen, überprüfe das, was der Nutzer oder die Nutzerin eingegeben hat, dann passiert das Ganze auch nicht. Unter Programmierern gibt es einen Spruch, der heißt: Garbage in, garbage out". Also Müll rein, Müll raus. D.h., wenn ich nicht überprüfe, was der Benutzer eingibt, dann kann es sein, dass wenn er Müll eingibt, auch tatsächlich Müll rauskommt.

Grundlagen der Programmierung: Basiswissen

Steigen Sie ein in die Welt der Computerprogrammierung und verschaffen Sie sich das Grundwissen, um schon bald eigene Lösungen und Anwendungen zu schreiben.

5 Std. 38 min (64 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!