Aus dem Kurs: Grundlagen der Programmierung: Basiswissen

Hands on: if-Statements in JavaScript

Aus dem Kurs: Grundlagen der Programmierung: Basiswissen

Hands on: if-Statements in JavaScript

“

Quellcode ist für uns Menschen da, und den schauen wir uns jetzt an. Ich gehe in die Datei conditions.html, mache mal den Explorer hier wieder zu und habe hier links auch meine conditions.html geöffnet. Ich habe die Entwicklertools auf, ich bin auf der Konsole und zeige mir die Benutzereingaben und Benutzernachrichten an, also die User Messages. Hier mache ich mal den html-Bereich zu und gehe jetzt in diesen script-Tag. So, jetzt geht es tatsächlich los. "Dieser Code wird nicht angezeigt", steht hier in dieser Zeile, und tatsächlich hier steht: "Dieser Code wird angezeigt", das ist genau das, was in Zeile 18 ausgegeben wird, also dieser Code hier wird angezeigt, aber der nicht. Warum ist das so? Weil die Bedingung hier oben falsch ist und hier unten ist sie true. Schauen wir uns das Ganze mal im Einzelnen an. Ich habe ein if, also ein englisches Wenn, und dann habe ich runde Klammern und alles, was in diesen runden Klammern steht, ist entweder wahr oder falsch. Da gibt es tatsächlich keine dritte Möglichkeit. Es gibt kein Vielleicht. Es ist ganz eindeutig, entweder wahr oder falsch. Kein Vielleicht. Und wichtig ist hier das if. Da können Sie an diesem Wort nichts drehen, dann habe ich runde Klammern. Auch die sind zwingend vorgeschrieben. Das ist die sogenannte Bedingung in den runden Klammern, und in geschweiften Klammern, da steht, was dann passieren soll, wenn dieses if wahr ist, also wenn dieses if zutrifft, d.h., in dem Falle geht der Computer nicht in diesen Code rein, weil es ganz ja falsch ist. Bei true geht er rein, also ich bin hier in der Datei conditions.html: Zeile 18, das ist genau hier. Da bin ich drin. Jetzt kann ich das Ganze mit true und false machen. Das ist ziemlich witzlos. Ich kann natürlich auch Variablen testen. Das mache ich jetzt in Zeile 22, also a ist 1, schauen wir uns mal das Ganze an. a ist 1 hier wird in Zeile 23 ausgegeben, d.h., diese Bedingung ist offensichtlich wahr. Achten Sie darauf, ich habe hier zwei Gleichheitszeichen. Das ist zwingend notwendig, und das vergisst man auch oft oder macht öfter Fehler. Wenn ich ein Gleichheitszeichen habe, dann ist es eine Zuweisung. Das bedeutet, die Variable a soll den Wert 1 bekommen. Wenn ich zwei Gleichheitszeichen habe, dann ist es ein Test, d.h., ich schaue nach, ob denn die Variable a den Wert 1 hat. Das heißt, in dem Falle ändere ich den Wert einer Variablen. In diesem Falle frage ich ihn nur ab. Wenn Sie die Anzahl der Gleichheitszeichen hier vertauschen, kommt nur Blödsinn raus, d.h., ganz wichtig, achten Sie auf diese Anzahl der Gleichheitszeichen. Ich kann verschiedene Bedingungen auch miteinander verknüpfen, also ich kann hier z.B. sagen, ich gehe rein, a ist 2 und b ist 2. Das ist natürlich hier falsch. Hier muss eine 1 rein, aber reintippen kann ich ja, was ich möchte, a ist 1 und b ist 2. Ich schaue mal nach, a ist 1 und b ist 2 in Zeile 28. Auch diese Bedingung ist offensichtlich wahr, d.h., a ist hier 1, das haben wir oben schon getestet, das passt und b ist 2, b wurde hier gerade angelegt. Und ich kann diese beiden Bedingungen miteinander verknüpfen mit zwei kaufmännischen UND-Zeichen. Das bedeutet, ich teste, ob beides zutrifft. In dem Falle ist es so, also gehe ich in dieses Statement rein. Ich kann das Ganze nicht nur mit UND verknüpfen, sondern auch mit ODER. Das sehen wir nun hier, also Zeile 32, Code in Zeile 32. Auch das ist wahr, d.h., entweder ist a gleich 8. Wir wissen, das ist nicht der Fall, aber ich verknüpfe das Ganze mit ODER. Das ist so dieser senkrechte Strich. Den finden Sie auf vielen Tastaturen links unten, meistens neben der A- bzw. Y-Taste. Das ist von Tastatur zu Tastatur unterschiedlich. Wichtig ist, das sind zwei senkrechte Striche und die verbinden die beiden Bedingungen mit einem logischen ODER, d.h, entweder ist das eine oder das andere richtig oder sogar beides, dann wird das Ganze wahr, und ich gehe in diesen if-Block hinein. Ich kann natürlich auch den Wert von zwei Variablen einfach überprüfen, also ob a den gleichen Wert hat wie b, a == b. Sie sehen, nein, das ist nicht der Fall, a ist ungleich b. Ich gehe in die Zeile 38. Hier steht noch mal die 38, und es liegt daran, dass a und b eben unterschiedlich sind, und dann geht der Computer in diese else-Verzweigung, d.h., nach den geschweiften Klammern schreibe ich ein else, das ist mein Schlüsselwort, und dann wieder in geschweiften Klammern, worum es denn eigentlich gehen soll, wenn es hier reingeht. D.h., wenn a gleich b ist, dann mach das, ansonsten, so kann man das vielleicht übersetzen, ansonsten geh eben hier hinein. Ich kann nicht nur auf Gleichheit prüfen, sondern auch ob a größer 0 ist, also einfach mit diesem Größer- bzw. mit dem Kleiner-Zeichen, natürlich auch kleiner. Und dann sage ich a ist größer 0, und das passt hier auch. Auf diese Weise kann ich mit diesem if-Statement natürlich auch hier Passwort-Abfrage machen. Schauen wir uns das Ganze mal hier an. Ich mache mal hier die Kommentar-Zeichen raus. Jetzt wird hier die Seite neu geladen, und Sie sehen: "Bitte geben Sie das Passwort ein." Also das Passwort lautet "geheim". Klicke ich darauf, und dann sehe ich hier, dieser Text ist geheim. Also das ist natürlich kein sicheres Passwort und auch keine sichere Funktion. Ich wollte Ihnen nur mal zeigen, was Sie mit dem if-Statement alles machen können. Schauen wir uns das Ganze hier mal an. Ich habe hier ein "let password", d.h., ich habe eine Variable erzeugt, die heißt "password". Und was in dieser Variablen steht, das lasse ich den Nutzer oder die Nutzerin mit diesem Wort prompt eingeben, d.h., wenn ich hier die Seite neu aufrufe, dieses prompt sorgt dafür, dass genau dieses kleine Fenster hier aufgeht. Und jetzt gebe ich hier mal was Falsches ein, also eine 123, gehe auf OK und dann steht eben hier kein geheimer Text. Das heißt, ich überprüfe hier, ist denn der Inhalt der Variablen password -- lautet der denn geheim. Und wenn das so ist, dann schreibe ich einfach hier document.write. Dieser Text hier ist geheim. Und vorher lösche ich noch den Text, der vorher da steht mit document.body.innerHTML ist gleich ein leerer String, d.h., damit lösche ich den bisherigen Inhalt des Dokumentes hier oben, der bisher lautete "Bitte öffnen Sie die Entwicklertools", und schreibe hier meinen neuen Text darauf. Überlegen Sie doch mal, wie Sie es hinbekommen, dass der Nutzer oder die Nutzerin zwei Eingaben machen muss. Einerseits das Passwort, das haben wir schon und andererseits auch den Benutzernamen und wie Sie dann das if-Statement umschreiben müssen, dass sowohl Benutzername als auch Passwort richtig sind und nur dann wird dieser super geheime Text angezeigt. Wie würden Sie das angehen? Nehmen Sie sich ein bisschen Zeit. Ich bin mir sicher, Sie schaffen das.

Inhalt