Kommentare und Zusammenfassung – Programmieren lernen mit JavaScript – Thytos
Nächstes Video startet in 3 Sekunden.
Programmieren lernen mit JavaScript

Kommentare und Zusammenfassung

Mit Kom­men­ta­ren können Hin­wei­se und Er­klä­run­gen in Code hin­zu­ge­fügt wer­den. Au­ßer­dem gibt es eine Zu­sam­men­fas­sung der Serie bis zu die­sem Punkt.

Stellt euch vor, ihr seid Entwickler in einer Webagentur und euer Kollege ist krank geworden. Ihr sollt für ihn einspringen und den Code weiterschreiben, den er begonnen hat. Ihr schaut rein und versteht nicht, was der Code tut, warum er so geschrieben wurde und wie ihr nun weitermachen sollt. Ihr braucht sehr lange, um das Programm zu verstehen und es fortzuführen.

Das ist keine ungewöhnliche Situation. Es kommt häufig vor, dass Programmcode angefasst wird, der nicht von euch ist oder mit dem ihr schon länger nicht mehr gearbeitet habt, sodass ihr erstmal die Funktionsweise und das Vorgehen des Codes nachvollziehen müsst. Deswegen sollte schon beim Programmieren auf Lesbarkeit des Codes geachtet werden.

Eine Hilfe, die ihr dabei nutzen könnt, sind Kommentare im Code. Mit denen können Anmerkungen in den Programmcode geschrieben werden, um Stellen zu dokumentieren und Hinweise oder Erklärungen hinzuzufügen. Was in den Kommentaren steht, wird nicht ausgeführt.

// parseInt("foo"); Wird nicht ausgeführt

In JavaScript gibt es zwei Möglichkeiten, Kommentare zu schreiben:

  • Ein einzeiliger Kommentar wird durch zwei Schrägstriche begonnen und durch einen Zeilenumbruch beendet // …
  • Ein mehrzeiliger Kommentar wird durch einen Schrägstrich mit Asterisk begonnen und einen Asterisk mit Schrägstrich beendet /* … */
// Beispiel:
var nr = 5; // Beliebige Zahl

// Soll ein einzeiliger Kommentar über
// mehrere Zeilen gehen, muss jede Zeile
// mit zwei Schrägstrichen anfangen

/* Andernfalls kann dafür auch die
Schreibweise für mehrzeilige Kommentare
genutzt werden. Dort werden Anfang und
Ende markiert. Was dazwischen steht,
einschließlich wie viele Zeilen dazwischen
stehen, ist dabei egal. */

Außerdem: Zwischenzeitliche Zusammenfassung

Falls ihr diese Serie von Anfang an mitgemacht habt, habt ihr euch bereits durch zwölf Artikel gelesen oder durch zwölf Videos geguckt. Das ist einiges, weswegen es an dieser Stelle nochmal eine Kurzzusammenfassung gibt.

  1. Im ersten Video ging es darum, die Konsole im Browser zu öffnen und eine erste Ausgabe zu erstellen.
  2. Im zweiten Video wurden Strings eingeführt. Ihr habt gelernt, dass ihr mit der Pfeil-nach-oben-Taste die letzte Eingabe in der Konsole aufruft und dass Strings Zeichenketten sind, um Wörter und Text zu schreiben.
    Um einen String zu erstellen, nehmt ihr doppelte oder einfache Anführungszeichen und könnt zwischen denen völlig beliebige Zeichen schreiben.
    "Ein 'String'"
    'Ein \'String\''
    
    Wenn die Bedeutung eines Zeichens ignoriert werden soll, z.B. wenn ihr in einem String ein Anführungszeichen habt, das noch nicht das Ende des Strings markieren soll, dann schreibt ihr einen Backslash davor, um es zu escapen.
  3. Im dritten Video ging es um Zahlen, im Englischen Numbers. Natürliche Zahlen werden ohne jede Besonderheit in die Konsole eingetippt. Für Kommazahlen wird ein Punkt benutzt. Vor negative Zahlen wird ein Minus geschrieben.
    1
    2.3
    -4
    
    In JavaScript spielt es keine Rolle, wie viele Leerzeichen oder Leerzeilen zwischen einzelnen Code-Bestandteilen stehen.
    Mit Klammern werden Rechenoperationen aber auch beliebiger anderer Code zusammengefasst und zuerst ausgeführt.
    Computer können keine beliebig hohen Zahlen verarbeiten. Deswegen gibt es in JavaScript eine größte und eine kleinste Zahl, die aber groß genug sind bzw. klein genug sind, um sich von ihnen nicht in der regulären Arbeit einschränken zu lassen.
    Es gibt auch eine Exponentialschreibweise in JavaScript für extrem große oder extrem kleine Zahlen. Noch höher hinaus geht es mit Infinity, Unendlichkeit, bzw. -Infinity für negative Unendlichkeit.
    // Exponentialschreibweise
    1.7976931348623157e+308 // Größtmögliche Zahl
    5e-324 // Kleinstmögliche Zahl
    // Unendlichkeit
    Infinity * -Infinity
    // => -Infinity
    
  4. Im vierten Video ging es darum, wie Werte miteinander verglichen werden.
    Vergleichsoperatoren sind, als ob dem Computer eine Frage gestellt würde, und der Computer mit Ja oder Nein antwortet, im Sinne von true oder false.
    /* Ist */ 10 < 20 /* ? */
    // => true
    
    Das sind die Bool'schen Datentypen, im Englischen Boolean, und sie sind mit Numbers und Strings die drei Datentypen, die bis dahin in der Serie vorgestellt wurden.
    Es gibt acht verschiedene Vergleichsoperatoren: Kleiner als (<), Größer als (>), Kleiner oder gleich (<=), Größer oder gleich (>=) und zwei verschiedene Möglichkeiten, zu testen, ob Werte gleich oder ungleich sind.
    Werden zwei Werte mit zwei Gleichzeichen verglichen (==), wird der Datentyp der Werte ignoriert, bei drei Gleichzeichen (===) wird er berücksichtigt. Dasselbe mit ungleich, wobei ein Ausrufezeichen und ein oder zwei Gleichheitszeichen verwendet werden.
    "5" == 5
    // => true
    "5" === 5
    // => false
    "5" != 5
    // => false
    "5" !== 5
    // => true
    
  5. Im fünften Video ging es um Variablen. Variablen sind Stellvertreter für bestimmte Werte.
    Eine Variable wird geschrieben, indem das Schlüsselwort var verwendet wird, zusammen mit einem beliebigen Namen, gefolgt von einem Gleichheitszeichen und dem Wert.
    var name = "Wert";
    
    Am Ende wird ein Semikolon geschrieben, das in JavaScript optional ist und durch einen Zeilenumbruch ersetzt werden kann.
    Bei der Wertzuweisung von Variablen wird zuerst die rechte Seite der Zuweisung ausgeführt, um zu ermitteln, welcher Wert der Variable zugeordnet werden soll.
    Will man eine Variable auf Basis ihres aktuellen Werts verändern, können die Operatoren Plusgleich (+=), Minusgleich (-=), Malgleich (*=) und Durchgleich (/=) verwendet werden.
    Die Inkrement- und Dekrementoperatoren, Plusplus (++) und Minusminus (--), erhöhen eine Variable um 1 bzw. ziehen 1 von ihrem Wert ab.
    Wird eine Variable erstellt, wird sie zuerst deklariert und anschließend definiert.
    Wird sie nicht definiert, ist sie undefiniert, im Englischen undefined, was der vierte Datentyp ist, der in der Serie vorgestellt wurde.
  6. Im sechsten Video habt ihr mit der Funktion alert euer erstes eigenes Dialogfenster erstellt.
    Um eine Funktion aufzurufen, schreibt ihr den Namen der Funktion, danach eine runde Klammer auf und eine runde Klammer zu. Je nach Funktion können zwischen den Klammern Parameter stehen, die durch Kommas getrennt sind.
    alert("Dieser Text wird ausgegeben");
    
    Die Parameter heißen Argumente, arguments.
    Mit der Funktion prompt habt ihr euer erstes eigenes Eingabefenster erstellt.
    Das, was in das Eingabefenster geschrieben wird, kommt von der Funktion wieder zurück. Das ist der Rückgabewert der Funktion.
    Um diesen Rückgabewert weiterzuverarbeiten, sollte er zwischengespeichert werden, zum Beispiel in einer Variable.
  7. Im siebten Video ging es um die Verarbeitung von Strings. Sollen zwei Strings miteinander verknüpft werden, passiert das in JavaScript mit einem Plus dazwischen. Dasselbe funktioniert auch, um einen String mit einer Zahl zu verknüpfen. Das kann genutzt werden, wenn eine Zahl in einen String umgewandelt werden soll.
    "A" + "B"
    // => "AB"
    "" + 5
    // => "5"
    
    Um zu erfahren, wie viele Zeichen in einem String sind, wird hinter den String ein Punkt und length geschrieben, was Englisch für Länge ist. Dasselbe gilt natürlich auch bei Variablen, denen ein String zugeordnet ist.
    "foo".length
    // => 3
    
    Um das Zeichen an einer bestimmten Stelle eines Strings auszulesen, wird in eckigigen Klammern der Index der Stelle hinter den String geschrieben.
    Wichtig dabei zu wissen ist, dass der Index bei 0 beginnt. Das gilt außerdem in den meisten anderen Bereichen des Programmierens ebenso. Das heißt, das erste Zeichen befindet sich an der Stelle 0.
    var str = "String";
    str += str[0]; // Plusgleich funktioniert auch bei String
    str;
    // => "StringS"
    
  8. Im achten Video ging es darum, dass alles beim Computer und in der Datenverarbeitung dem EVA-Prinzip entspricht: Es gibt eine Eingabe, die Daten dieser Eingabe werden verarbeitet, und heraus kommt die Ausgabe. E V A.
    Außerdem habt ihr gelernt, dass Zahlen, die in Strings stehen, nicht addiert werden können, weil bloß die Strings zusammengefügt werden, da das Plus eine Bedeutung als Operator für Strings hat. Stattdessen müssen diese Zahlen erst in echte Zahlenwerte umgewandelt werden, bspw. mit den Funktionen parseInt oder parseFloat, damit sie nicht mehr als Aneinanderreihung von Zeichen gesehen werden.
  9. Im neunten Video habt ihr if…else kennengelernt. Das ist eine Kontrollstruktur, um bestimmten Code nur dann auszuführen, wenn eine entsprechende Bedingung erfüllt ist.
    Zuerst schreibt ihr if, dahinter in runden Klammern die Bedingung, die true oder false ergeben muss, und dahinter kommt die Anweisung.
    if (10 < 20) alert("10 ist kleiner als 20");
    
    Wenn mehr als eine Anweisung bedingt ausgeführt werden sollen, müssen diese in geschweiften Klammern stehen. Es empfiehlt sich generell, geschweifte Klammern zu setzen, auch wenn nur eine Anweisung ausgeführt wird, um den Code konsistent zu halten.
    Soll auch Code ausgeführt werden, wenn die Bedingung nicht zutrifft, kann ein else-Teil erstellt werden, einen ansonsten-Teil. Auch hier müssen keine geschweifte Klammern gesetzt werden, wenn nur eine Anweisung ausgeführt werden soll, es empfiehlt sich aber trotzdem.
    Zwischen den geschweiften Klammern kann jeder beliebige JavaScript-Code stehen, einschließlich weiterer if…else-Konstrukten.
    Um mehrere Bedingungen abzugehen, könnt ihr else if nutzen.
  10. Im zehnten Video habt ihr einen einfachen Weg kennengelernt, um herauszufinden, ob eine Zahl gerade oder ungerade ist, nämlich Modulo.
    Der Modulo-Operator ist in JavaScript ein Prozentzeichen. Mit ihm bekommt ihr den Rest einer Divison heraus.
    Das ist praktisch, um zu erfahren, ob eine Zahl durch eine andere teilbar ist, da die Rechnung in dem Fall immer 0 ergibt, weil es keinen Rest gibt.
    4 % 2
    // => 0
    
  11. In JavaScript gibt es nicht nur true und false, es gibt auch truthy- und falsy-Werte und um die ging es im elften Video.
    Alle Werte in JavaScript, egal ob Zahlen oder Strings oder Werte anderer Datentypen, entsprechen auch booleschen Werten.
    Leere Strings gelten als false, genauso wie 0, der Wert NaN und undefined. Alle anderen Werte, die ihr bisher in der Serie kennengelernt habt, gelten als true.
    Das ist wichtig zu wissen, um Fehler zu vermeiden: Beispielsweise führt die if-Bedingung "Hallo" % 2 dazu, dass der Code aus dem else-Teil ausgeführt wird, statt dass ein Fehler geworfen wird.
    Um zu überprüfen, ob ein Wert keine Zahl ist, gibt es die Funktion isNaN, is Not a Number. Die gibt true zurück, wenn der übergebene Parameter keine gültige Zahl ist.
    isNaN("Not a Number");
    // => true
    
    Wenn es Nutzereingaben gibt, sollten diese generell auf Gültigkeit überprüft werden. Soll der Nutzer z.B. eine Zahl eingeben, sollte zuerst überprüft werden, ob er das auch tatsächlich getan hat, bevor seine Eingaben weiterverarbeitet werden.
  12. Sollen mehrere Bedingungen miteinander verknüpft werden, gibt es dafür logische Verknüpfungen, die im zwölften Video behandelt wurden.
    Es gibt drei verschiedene Arten: UND, ODER und NICHT.
    Soll etwas nur ausgeführt werden, wenn beide Bedingungen zutreffen, funktioniert das mit der UND-Verknüpfung, die in JavaScript zwei &-Zeichen sind (&&).
    Soll etwas ausgeführt werden, wenn die eine oder die andere Bedingung zutrifft oder beide, gibt es dafür die ODER-Verknüpfung, die in JavaScript mit zwei senkrechten Strichen (||) dargestellt wird.
    Soll etwas ausgeführt werden, wann immer die Bedingung nicht zutrifft, wird die Bedingung negiert, was durch ein Ausrufezeichen geschieht, das vor sie geschrieben wird.
    true && true
    // => true
    true || false
    // => true
    !false
    // => true
    
    Das ist nützlich, um truthy- und falsy-Werte zu echten booleschen Werten umzuwandeln. Wenn ein Wert falsy ist, wird er durch eine Negation zu true negiert und somit zu einem echten booleschen Wert.