Grundlagen

Codebeispiel

// this is a comment

let a = 3;
let b = 4;
console.log(a * b);

if (a * b > 10) {
  console.log('greater');
}

Interaktive Konsole

im Webbrowser: Developer Tools (F12) - Konsole

Deklarieren von Variablen

Vor ihrer Verwendung: Variablen werden üblicherweise mit let deklariert

let a = 3;

später können sie überschrieben werden

a = 4;

Statements

Statements werden üblicherweise mit ; beendet

Kommentare

// single-line comment

/*
multi-
line
comment
*/

Dokumentation

gute Ressource: - MDN (Mozilla Developer Network)

Grundlegende (primitive) Datentypen

Number
String
Boolean
null: fehlender / unbekannter Wert
undefined: (noch) nicht zugewiesen

Zusammensetzen von Strings

Zusammensetzen von mehreren Strings:

let name = 'Tom';
let message = 'Hello, ' + name + '!';

Template Strings

weitere Möglichkeit, Strings zu erstellen - mit Backticks begrenzt (`)

Erlauben das Einsetzen von Werten

let name = 'Tom';
let message = `Hello, ${name}!`;

Boolean

Boolescher Wert: Ja/Nein - Wert

In JavaScript: true oder false

Null

Null repräsentiert einen unbekannten oder fehlenden Wert

let firstName = 'Michael';
let middleName = null;
let lastName = 'Jones';

Undefined

Undefined tritt z.B. bei Variablen auf, die noch nicht zugewiesen wurden

let firstName;

Zusammengesetzte Datentypen: object, array

Object

Gemeinsamkeiten mit:

Python dict
Python Objekt

Object

ein object kann benannte Einträge (Properties) haben

let person = {
  firstName: 'John',
  lastName: 'Doe',
  nationality: 'Canada',
  birthYear: 1980,
};

Object

Zugriff auf Properties:

person.firstName

oder

person["firstName"]

Object

Übung:

Erstelle und verändere Objekte, die verschiedenes repräsentieren - z.B.:

einen Kalendereintrag
eine Person
ein Produkt in einem Online-Shop
...

Arrays

ähnlich zu Listen in Python

let primes = [2, 3, 5, 7, 11];

let users = ['Alice', 'Bob', 'Charlie'];

let products = [
  { name: 'IPhone 12', price: 949 },
  { name: 'Fairphone', price: 419 },
  { name: 'Pixel 5', price: 799 },
];

Übungen

Erstelle und ändere Daten, die aus Objects und Arrays bestehen und die verschiedene Objekte repräsentieren, z.B.:

Einträge auf einer Todo-Liste
Kalendereinträge
Produkte in einem Online-Shop
Transaktionen auf einem Bankkonto

Einbinden von JavaScript in HTML

direkt in der gleichen Datei:

<script type="module">
  // javascript code here
</script>

Einbinden von JavaScript in HTML

traditionelle Möglichkeit - erlaubt auch Entwicklung im lokalen Dateisystem:

<script src="myscript.js"></script>

moderne Möglichkeit - ermöglicht imports in JavaScript - muss auf einem Server gehostet sein (kann auch ein lokaler Server sein)

<script src="index.js" type="module"></script>

Input und Output mittels Dialogen

zwei einfache Funktionen, die im Browser vordefiniert sind:

alert() - um Text in einem Dialog anzuzeigen
prompt() - um den Benutzer in einem Dialog nach einer Eingabe zu fragen

Eingabe und Ausgabe

Eingabe: Mit Hilfe von prompt:

let name = prompt('What is your name?');

prompt liefert immer einen String zurück

Eingabe und Ausgabe

Ausgabe der Begrüßung

alert(`Nice to meet you, ${name}!`);

Übung

Alter anhand Geburtsjahr
Zufallszahl mit benutzerdefiniertem Höchstwert (verwende Funktionen aus dem Math-Objekt)

Kontrollstrukturen

if / else
for-of
while
for

Konrtollstrukturen

Beispiel: if-Abfrage

let a = 3;
if (a > 0) {
  console.log('a is greater than 0');
  console.log('a is positive');
}

Konstrollstrukturen

Beispiel: for-of-Schleife

let names = ['Alice', 'Bob', 'Charlie'];
for (let name of names) {
  console.log(`Hello, ${name}!`);
  console.log(`Bye, ${name}!`);
}

Vergleiche

Für den Einsatz von grundlegenden Kontrollstrukturen müssen wir Werte vergleichen können:

let a = 2;
let b = 3;
let c = '2';

console.log(a == b); // a gleich b
console.log(a == c); // a gleich c
console.log(a === c); // a gleich c (strikt)

console.log(a != c); // a ungleich b
console.log(a !== c); // a ungleich c (strikt)

Vergleiche

Viele Entwickler verwenden nur die strikten Vergleichsoperatoren === und !==, um unterwartete Fehler zu vermeiden

Beispiele:

3 === '3'; // false
3 == '3'; // true
0 == []; // true
[] == ''; // true

Vergleiche

console.log(a < b); // less than
console.log(a > b);
console.log(a <= b); // less than or equal to
console.log(a >= b);

Vergleiche

Das Resultat eines Vergleichs ist ein boolescher Wert (True / False)

Wir können das Resultat in einer Variablen speichern:

let isAdult = age >= 18;

Verknüpfung mit &&, ||, !

&& bedeutet und
|| bedeutet oder
! bedeutet nicht

Verknüpfung mit &&, ||, !

Beispiele:

let canBecomeUsPresident =
  person.age >= 35 && person.nationality === 'us';

let isTemperatureExtreme =
  temperatureCelsius < -10 || temperatureCelsius > 30;

let isTemperatureNormal = !isTemperatureExtreme;

If / else

Beispiel:

let age = 30;
let ageSeconds = age * 365 * 24 * 60 * 60;

if (ageSeconds <= 1000000000) {
  console.log('You are less than 1 billion seconds old.');
} else {
  console.log('You are older than 1 billion seconds.');
}

if / else if ... / else

if (ageSeconds <= 100000000) {
  console.log('You are less than 100 million seconds old.');
} else if (ageSeconds < 1000000000) {
  console.log('You are less than 1 billion seconds old');
} else if (ageSeconds < 2000000000) {
  console.log('You are less than 2 billion seconds old');
} else {
  console.log('You are older than 2 billion seconds');
}

Beispiel und Übung: Münzwurf

let coinSide;
// random number between 0 and 1
let number = Math.random();
if (number > 0.5) {
  coinSide = 'heads';
} else {
  coinSide = 'tails';
}

Weitere Übung: Lasse den Benutzer das Ergebnis raten und teile ihm mit, ob er richtig lag

For-of-Schleifen

Mit einer for-of-Schleife können wir die Inhalte eines Arrays durchlaufen

Bezeichnung in anderen Programmiersprachen: for-each

For-of-Schleifen

const names = ['Alice', 'Bob', 'Charlie'];

for (let name of names) {
  console.log(`Hello, ${name}`);
}

Die Variable name nimmt nacheinander jeden der in names angegebenen Werte an.

Übung: For-of-Schleifen und If-Statements

Beginne mit einem Array von Zahlen, z.B. [2, 5, -3, 8, 1, -5]

Gib alle positiven Einträge aus, z.B. 2, 5, 8, 1

Gib den größten Eintrag aus, z.B. 8

Gib den größten und den kleinsten Eintrag aus z.B. 8, -5

While-Schleifen

Beispiel:

let a = 1;

while (a < 2000) {
  console.log(a);
  a = a * 2;
}

Übungen

While-Schleife, die die Zahlen 1 bis 10 ausgibt
While-Schleife, die die Zahlen der 7er-Reihe des Einmaleins ausgibt

Break und continue

Schlüsselwörter:

break: Beenden einer Schleife
continue: Beenden eines Durchlaufs

Bei verschachtelten Schleifen beziehen sie sich auf die innerste Schleife

Break

Beispiel:

let a = 1;
while (true) {
  a = a * 2;
  console.log(a);
  if (a > 1000) {
    break;
  }
}

For-Schleifen

Zählen von 0 bis 9:

for (let i = 0; i <= 9; i++) {
  console.log(i);
}

äquivalent zu:

let i = 0;
while (i <= 9) {
  console.log(i);
  i++;
}

Erweiterte Zuweisung

erweiterte Zuweisung (augmented assignment): folgende Statements sind äquivalent zueinander

a = a + 1;

a += 1;

a++;

For-Schleifen

Übung: Ausgabe einer Multiplikationstafel

1 x 7 = 7
2 x 7 = 14
3 x 7 = 21
4 x 7 = 28
...