1 Gedächtnis bitte!
In Variablen können Werte mit unterschiedlichen Datentypen gespeichert werden.
Über eine Zuweisung wird ein Wert in einer Variable gespeichert. Im folgenden Beispiel wird der Variable mit dem Namen name der Wert "Marvin" zugewiesen.
name = "Marvin"Je nachdem wie die Variable deklariert wurde, kannst du sie dann über ihren Namen verwenden (lesen, schreiben,...). Deklarieren bedeutet Bezeichnen, d.h. du gibst der Variable einen Namen.
Wenn du (wie im Beispiel oben) kein Signalwort vor den Namen der Variable schreibst, entscheidet der Interpreter, was für eine Art von Variable verwendet wird. Das Signalwort bestimmt dabei den Gültigkeitsbereich und die Eigenschaften der Variable.
1//Globale Variable: schreiben und lesen überall im Code
2var keksegesamt = 100
3
4//Lokale Variable: schreiben und lesen nur im aktuellen Code-Block (also in der Funktion fuettern)
5function fuettern(){
6let anzahlkekse = 20
7}
8
9//Konstante: lokale Variable, die nach der Initialisierung nur gelesen werden kann
10const skalierung = 50Durch eine Initialisierung der Variablen wird ihr ein erster Wert zugewiesen. Wird eine Variable nicht initialisiert bekommt sie automatisch den Wert undefined.
JavaScript ist eine dynamisch typisierte Sprache. Anders als bei streng typisierten Sprachen wie z.B. C, wo der Programmierer angeben muss, welche Art von Werten in einer Variable gespeichert werden (Zahlen, Text, Wahrheitswerte,...), entscheidet das in einer dynamisch typisierten Sprache der Interpreter zur Laufzeit des Programmes anhand der Werte bei der Initialisierung.
2 Datentypen
Die Art der Werte bestimmt man mit einem Datentyp. In JavaScript ist die Anzahl der Datentypen sehr überschaubar. Man unterscheidet zwischen primitiven Datentypen und Objekten (mit Typ Object).
JavaScript ist eine objektorientierte Sprache, d.h. im Grunde ist alles ein Objekt. In einem der folgenden Kurse gehen wir darauf genauer ein. Kennengelernt hast du solche Objekte aber schon z.B. beim DOM.
3 Operationen auf Daten
Bei der Zuweisung von Werten zu Variablen lassen sich natürlich auch Operationen durchführen, d.h. die Werte werden verändert. Wenn es sich bei den Werten um Zahlen (Datentyp Number) handelt, dann sind das z.B. die üblichen Rechenoperationen Plus +, Minus -, Mal *, Geteilt /. Dabei gibt es jedoch auch Kurzschreibweisen. Eine besondere Kurzschreibweise ist dabei das Inkrementiere, d.h. das schrittweise Erhöhen einer Variablen mit der Schreibweise
var zahl = 5
zahl++Oder das Dekrementieren, d.h. das schrittweise Verringern einer Variable.
var zahl = 42
zahl--Bei Zeichenketten bzw. Text als Werte (Datentyp String) verhält sich das etwas anders. Das Zeichen + steht hier für eine Konkatenation, also das Anhängen einer Zeichenkette an eine andere (das siehst du später im Video).
Mehr Informationen dazu findest du hier: https://developer.mozilla.org/de/docs/Web/JavaScript/Guide/Expressions_and_Operators
4 Timeing-Funktionen
Mit den Funktionen setTimeout() und setInterval() des Window-Objekts lassen sich Handler-Funktionen nach einer gewissen Wartezeit (Angabe in Millisekunden) aufrufen. Im Fall von setTimeout() wird die Handler-Funktion dann genau einmal aufgerufen. Bei setInterval() wird die Handler-Funktion immer nach Ablauf der angegebenen Wartezeit erneut aufgerufen.
Weitere Informationen findest du hier: https://wiki.selfhtml.org/wiki/JavaScript/Window/setTimeout
5 Konvertierung von Datentypen
Um Werte verschiedener Datentypen miteinander zu verbinden oder verrechnen zu können, ist es notwendig z.B. aus einem vom Benutzer eingegebenen Text (Datentyp String) eine Zahl (Datentyp Number) zu machen oder umgekehrt. In der Regel werden Benutzereingaben immer zunächst als Text entgegengenommen.
Den Vorgang dieser "Übersetzung" oder Umwandlung der Datentypen in einen anderen Datentyp nennt man Konvertierung. Man unterscheidet dabei implizite und explizite Konvertierung.
Eine implizite Konvertierung wird vom Interpreter direkt erkannt und kann dann erfolgen, wenn bei der Konvertierung keine Fehler auftreten können, z.B. wenn von einem anderen Datentyp zu einem string konvertiert wird. Denn Zahlen und Buchstaben können in Zeichenketten problemlos dargestellt werden.
const eineZahl = 42
let einBool = true
//Konkatenation mit +-Operator bei string
var einText = 'Die Zahl ' + eineZahl+' ist so ' + einBool + '!'Bei einer expliziten Konvertierung müssen Funktionen genutzt werden. Diese Funktionen prüfen und übersetzen die Werte, sodass z.B. der String "42" in die Number 42 übersetzt werden kann, bei der Übersetzung des String "hallo" jedoch als Ergebnis NaN (Not a Number) ausgegeben wird.
Weitere Informationen zur Typumwandlung findest du hier: https://www.mediaevent.de/javascript/string-zu-zahl.html
6 Aufgabe und Video
Schau dir das Video an und bearbeite die Aufgaben, die dir im Video gestellt werden. Bearbeite anschließend die Aufgaben unter dem Video.
7 Zusatzaufgabe
Modifiziere dein Projekt so, dass sich das Monster beim Füttern von Keksen bedankt. Gib dazu einen geeigneten Text aus, der den Namen des Monsters und die Anzahl der gefütterten Kekse enthält.
Erweitere den HTML-, CSS- und JavaScript-Code so, dass die Textausgabe des Monsters (Danksagung) nicht über alert() oder die Konsole geschieht, sondern in einer Sprechblase neben dem Monster. Sprechblasen lassen sich mit CSS sehr schön direkt formatieren, wie das geht, siehst du z.B. hier: https://cssarrowplease.com/
8 Materialien
Das Material zu diesem Kurs findet sich auf GitHub. Als angehender Entwickler solltest du dich auf jeden Fall mal mit git beschäftigen. Du kannst dir den Code auf GitHub aber auch einfach nur anschauen, ohne das Repository direkt clonen zu müssen.
