Wie verarbeitet man Strings? | Programmieren lernen mit JavaScript #8
In diesem Video zeige ich euch, wie ihr Strings verarbeiten könnt und Informationen daraus
auslest.
Am Schluss dieses Videos werdet ihr wissen, wie man so was hier machen kann: Es erscheint
ein Eingabefeld — das hatte ich euch ja schon im letzten Video gezeigt, wie das funktioniert
— dann steht da "Wie heißt du?"
und ich trag meinen Namen ein und dann könnt ihr nämlich am Schluss so was hier machen:
"Hi, Name (in dem Fall 'Oli')!
Dein Name ist 3 Buchstaben lang, d.h. ich werde euch zeigen, wie man herausfindet, wie
viele Buchstaben in einem String sind, und der erste Buchstabe ist ein 'O'".
D.h. ihr werdet jetzt lernen, wie man auf einzelne Zeichen des Strings zugreifen kann.
Öffnet die Konsole.
Was ich im letzten Video gezeigt hab, ist, dass ihr mit der Funktion prompt ein Eingabefeld
erzeugen könnt, nämlich so was hier.
Und wenn ich dort etwas eingebe, dann ist der Rückgabewert, nämlich die Eingabe, hier
in der Konsole.
Und dort bringt uns das nicht viel, weil wir damit nicht arbeiten können.
Wir müssen den Rückgabewert irgendwie aufnehmen, damit wir den dann halt verarbeiten können.
Und da hab ich euch im letzten Video gesagt, da solltet ihr mal vielleicht irgendwie drüber
nachdenken und das Video von davor nochmal ansehen.
Und das Video von davor war natürlich über Variablen.
Das heißt, die Antwort ist, dass wir das in einer Variablen speichern können... und
sollten.
Und dadurch können wir die Eingabe dann weiter verarbeiten.
Wie geht das?
Der Anfang, die Deklaration der Variablen ist natürlich gleich.
Also "var" und dann irgendwie ein Variablenname, in dem Fall "name" passt auch, halt "Wie heißt
du?"
und dann kommt halt der Name.
Und dieser Variable soll halt der Rückgabewert der Funktion zugewiesen werden.
Und das funktioniert einfach, indem wir die Funktion dahinter schreiben.
prompt("Wie heißt du?");
Da wird dann jetzt der Rückgabewert in die Variable geschrieben.
Also wenn wir uns die Variable auslesen, haben wir jetzt den Rückgabewert hier zur Verfügung.
Wenn wir uns das Ergebnis angucken, was am Schluss des Videos herauskommen soll, das
beginnt mit "Hi," und dann der Name.
Wie funktioniert das?
Also wir können natürlich einen String schreiben mit "Hi, "
Aber wie kriegen wir jetzt den Namen da rein?
Das einfach hinter zu schreiben, funktioniert nicht.
Das in den String zu schreiben, äh, bringt auch nichts, weil dann schreiben wir einfach
"name" als String — das ist dann nicht, dass der Wert der Variablen da genommen wird.
Es muss also eine andere Möglichkeit geben, diesen String von name diesem String "Hi,
" hinten anzufügen.
Und diese andere Möglichkeit gibt es natürlich und die heißt: String-Verkettung.
name ist ja auch ein String, nämlich hier "Oli".
Und wir können zwei Strings einfach aneinander anhängen, indem wir das Plus-Zeichen verwenden.
Und dann können wir so auch gleich weitermachen, nämlich der nächste Abschnitt ist
"Hi, Oli!
Dein Name ist hmhmhm Buchstaben lang" Das wissen wir noch nicht, aber wir können
zumindest bis dahin den String fertig stellen.
Wie geht das nun?
Wie kriegen wir heraus, wie viele Buchstaben in diesem String name sind, also in dieser
Variablen name?
Das geht ziemlich einfach: Wir nehmen einfach die Variable name, schreiben einen Punkt und
da sehen wir schon, da gibt es eine Liste, die plötzlich aufploppt.
Vielleicht in eurem Browser nicht, aber in den meisten Browsern schon.
Und da gibt es auch, wenn wir l drücken, den Listeneintrag length.
Was genau das für eine Liste ist und was diese einzelnen Listeneinträge zu bedeuten
haben, dazu komme ich später in dieser Videoserie.
Wichtig ist jetzt nur dieser length-Listeneintrag.
Und wenn wir Enter drücken, bekommen wir die Zahl 3, und das ist die Länge des Strings,
die Anzahl der Buchstaben.
Hier steht nämlich "Oli" und das sind halt 3 Buchstaben.
Wenn wir einen anderen String nehmen, zum Beispiel "Hallo" Punkt length, bekommen wir
5, weil "Hallo" fünf Buchstaben enthält.
Das heißt, wenn wir dieses Punkt length an einen String hängen, erhalten wir die Anzahl
der Buchstaben, die Länge des Strings.
Wie ihr seht, sind die Werte blau, d.h. das sind Zahlen, aber das macht nichts.
Wenn wir nämlich einen String mit einer Zahl verknüpfen, dann wird einfach die Zahl dem
String hinzugefügt.
Und damit können wir weitermachen.
"Dein Name ist 3 Buchstaben lang und der erste Buchstabe ist ein "
Und jetzt müssen wir auf die einzelnen Buchstaben des Strings zugreifen.
Wie machen wir das?
Im Grunde ist das auch ziemlich einfach, man muss halt nur wissen, wie es geht.
Ein String ist ja, wie der Name schon sagt, eine Kette, eine Zeichenkette.
Und genauso ist ein String auch intern im Computer gespeichert, nämlich als eine Kette,
als eine Liste von Zeichen.
Jeder Buchstabe hat seinen eigenen Platz in dieser Liste, und um das Zeichen an einem
bestimmten Platz abzufragen, muss man einfach nur den String nehmen und eckige Klammern
dahinter setzen und dort den Index des jeweiligen Platzes, der jeweiligen Stelle reinschreiben.
Versuchen wir das mal.
Wir haben unsere Variable name und wir wollen das erste Zeichen abfragen, den ersten Buchstaben.
D.h. ich nehme eine eckige Klammer auf, schreibe eine 1 und eine eckige Klammer zu, und drücke
Enter.
Und es ist ein l?!
Das ist eigentlich der zweite Buchstabe, nicht der erste.
Was passiert denn, wenn ich hier eine 2 reinsetze?
Dann bekommen wir das i, das ja der dritte, der letzte Buchstabe in dem Namen ist.
D.h. offensichtlich muss ich unter 1 gehen, ich muss auf 0 gehen.
Und dann bekomme ich den ersten Buchstaben.
Und das ist nämlich eine ganz wichtige Lektion, die man gelernt haben muss: In der Informatik
beginnt man im Grunde immer bei Null zu zählen, nicht bei Eins.
D.h. in diesem Fall, wenn wir diesen String mit dem Inhalt "String" nehmen, wäre am nullten
Index der Buchstabe S.
Bei Index 1 der Buchstabe t, bei 2 r, 3 i, 4 n und 5 g.
D.h. um den ersten Buchstaben oder das erste Zeichen im String zu kriegen, muss man den
Index 0 verwenden.
Das können wir jetzt einsetzen und wieder zu unserem Hauptstring zurückkehren.
Und hinschreiben: "Der erste Buchstabe ist ein", name, eckige Klammer auf, Null, eckige
Klammer zu und Semikolon.
"Hi, Oli!
Dein Name ist 3 Buchstaben lang und der erste Buchstabe ist ein O"
Jetzt möchte ich noch gern, dass das O in Anführungszeichen steht.
Da können wir dann die einfachen Anführungszeichen nehmen oder wir müssen die doppelten escapen.
Das hatte ich euch ja alles schon in dem Video über Strings gezeigt.
Ich nehme jetzt einfach mal einfache Anführungszeichen und füg das auch noch hier hinten an.
Und jetzt steht das O auch in Anführungszeichen.
Das ganze wollen wir aber natürlich nicht einfach nur in der Konsole ausgeben, sondern
in einem Dialogfenster, deswegen nehme ich die alert-Funktion, die ich auch im letzten
Video vorgestellt habe, und setze den String in runde Klammern, drücke Enter und das ist
das Ergebnis.
"Hi, Oli!
Dein Name ist 3 Buchstaben lang und der erste Buchstabe ist ein 'O'"
Jetzt würde ich noch einmal gerade zurückkehren, weil wir haben so viel hier in der Zwischenzeit
gemacht, und das ursprüngliche prompt nochmal ausführen.
"Wie heißt du?"
Und jetzt gebe ich mal einen Anderen Namen ein.
Und jetzt rufe ich nochmal das alert auf.
Und damit funktioniert das jetzt auch: "Hi, Anderer Name!
Dein Name ist 12 Buchstaben lang und der erste Buchstabe ist ein 'A'"
Jetzt haben wir also genau das, was ich am Anfang vorgestellt habe.
Ich hoffe, ihr habt das auch mit euren Namen ausprobiert und nicht mit "Oli", es sei denn
ihr heißt Oli.
Was ihr auch noch machen könnt, ist, dass ihr diese Ausgabe ebenfalls in eine Variable
schreibt.
Das sähe dann so aus: "Hi, " + name Und dann können wir nämlich folgendes machen:
Wir können da zum Beispiel schon aufhören und das ganze aufteilen in mehrere Anweisungen.
Also dann käme als nächstes "Dein Name ist" + name.length + "Buchstaben lang"
Plusgleich.
Dieses Plusgleich hatte ich euch ja auch schon in dem Video über Variablen gezeigt.
"und der erste Buchstabe ist ein", name, in eckigen Klammern Null.
Und dann kann ich diese Variable output ausgeben und habe genau dasselbe, bis auf dass ich
hier das Ausrufezeichen vergessen habe und hier ein Leerzeichen, aber ansonsten — ihr
versteht das Prinzip!
Spielt damit ruhig rum!
Lernt das ganze kennen!
Probiert mit Variablen rum!
Im nächsten Video werden wir auch hier so was machen, da zeige ich euch dann, wie ihr
die Quadratzahl errechnet von einer Eingabe und wie ihr diese dann auch wieder ausgeben
könnt usw.
Um das zu sehen, klickt hier in das große Feld in der Mitte, oder falls ihr dieses Video
in einer Playlist seht, zum Beispiel auf css3-html5.de, bleibt einfach dran.
