Einsatzbereiche:
JavaScript wird unter dem Namen ECMAScript (kurz ES) standardisiert
// this is a comment
let a = 3;
let b = 4;
console.log(a * b);
if (a * b > 10) {
console.log('greater');
}
Optionen, um JavaScript-Code auszuführen:
Zugriff auf eine JavaScript-Konsole:
nodeStatement = einzelne Anweisung in einer Programmiersprache
Statements werden üblicherweise mit Semikolons abgeschlossen (diese können in JavaScript aber auch meist weggelassen werden)
Daten können mit einem Namen versehen werden
Variablen werden oft mit let deklariert
let birthYear = 1970;
let currentYear = 2000;
let age = currentYear - birthYear;
Variablennamen werden üblicherweise zusammen geschrieben, wobei neue Wortanfänge groß geschrieben werden
Variablennamen dürfen nur aus Buchstaben, Ziffern und Unterstrichen bestehen
Ãœberschreiben (neu setzen) von Variablen:
let birthYear = 1962;
birthYear = 1970;
birthYear = birthYear + 1;
Number: ZahlString: TextBoolean: Ja/Nein - Wert (Wahrheitswert)null: fehlender / unbekannter Wertundefined: (noch) nicht zugewiesenBeispiel:
((7 - 3) * 0.5) / 3.5;
Ein String - auch Zeichenkette genannt - repräsentiert Text
Strings werden entweder mit einfachen oder doppelten Anführungszeichen begrenzt
let greeting = 'Hello';
let name = "Tom";
Zusammensetzen von mehreren Strings:
let name = 'Tom';
let message = 'Hello, ' + name + '!';
weitere Möglichkeit, Strings zu erstellen - mit Backticks begrenzt (`)
Erlauben das Einsetzen von Werten
let name = 'Tom';
let message = `Hello, ${name}!`;
Wie schreiben wir dieses Zeichen: ` ?
Shift + Taste neben der Löschtaste, dann Leertaste
oder:
2x Shift + Taste neben der Löschtaste
Problem: Wie setzen wir besondere Zeichen wie z.B. ' innerhalb eines gewöhnlichen Strings?
Ungültig:
let text = 'I'm ready.'
Lösung:
let text = 'I\'m ready';
JavaScript interpretiert die Zeichenfolge \' wie ein einzelnes '
Zeilenumbruch in 1 Zeile: \n
let a = 'line 1\nline 2';
Einzelner Backslash:
let b = 'C:\\docs';
Boolescher Wert: Ja/Nein - Wert
In JavaScript: true oder false
Null repräsentiert einen unbekannten oder fehlenden Wert
let firstName = 'Michael';
let middleName = null;
let lastName = 'Jones';
Undefined tritt z.B. bei Variablen auf, die noch nicht zugewiesen wurden
let firstName;
Bestimmen des Typs einer Variable mittels typeof:
let answer = '42';
typeof answer;
Umwandlung in andere Datentypen: Number(...), String(...), Boolean(...), ...
Alternativen: .toString(), parseInt(), parseFloat()
Funktion: "Unterprogramm", das eine bestimmte Aufgabe erledigen kann
Beispiele für allgemeine vordefinierte Funktionen:
Math.sqrt(2) - berechnet QuadratwurzelMath.round(3.14) - rundet eine Zahlconsole.log("foo") - schreibt in die (Browser-)KonsoleBeispiele für vordefinierte Funktionen im Browser:
alert("foo") - öffnet eine Pop-Up-Nachrichtopen('https://google.com', '_self') - öffnet eine SeitescrollBy(0, 200) - scrollt horizontal bzw vertikalFunktionen können Parameter übergeben bekommen und einen Rückgabewert zurückliefern
Beispiel: Math.sqrt(2) - Zahl als Parameter, Zahl als Rückgabewert
Beispiel: scrollBy(0, 200) - zwei Zahlen als Parameter, kein Rückgabewert
Methode: eine Funktion, die zu einem bestimmten Objekttyp gehört (z.B. zu String)
Beispiele für String-Methoden:
firstName.toUpperCase()firstName.includes("x")firstName.replaceAll("a", "@")Ressource: MDN (https://developer.mozilla.org)
Beispiele:
Math-Objekt: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/MathString-Typ: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Stringopen-Funktion: https://developer.mozilla.org/en-US/docs/Web/API/Window/openein object kann benannte Einträge (Properties) haben
let person = {
firstName: 'John',
lastName: 'Doe',
nationality: 'Canada',
birthYear: 1980,
};
Zugriff auf Properties:
person.firstName
person.firstName = 'Jane';
alternative Syntax mit Anführungszeichen (erlaubt Sonderzeichen):
let person = {
'first-name': 'John',
'last-name': 'Doe',
};
alternative Syntax zum Zugreifen auf Properties:
person['first-name']
person['first-name'] = 'Jane';
Ãœbung:
Erstelle und verändere Objekte, die verschiedenes repräsentieren - z.B.:
Arrays repräsentieren eine Folge von Elementen
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 },
];
Auslesen von Array-Elementen mittels Index (bei 0 beginnend)
let users = ['Alice', 'Bob', 'Charlie'];
users[0]
users[1]
Ãœberschreiben von Array-Elementen
users[0] = 'Andrew';
Anhängen von Array-Elementen
users.push('Dora');
Entfernen des letzten Elements:
users.pop();
Entfernen eines Elements anhand des Index:
users.splice(2, 1);
Die Länge eines Arrays bestimmen:
users.length
Erstelle und ändere Daten, die aus Objects und Arrays bestehen und die verschiedene Objekte repräsentieren, z.B.:
JSON = JavaScript Object Notation: Datenformat, das auf JavaScript basiert und insbesondere in der Webentwicklung wichtig ist
Strings: in JSON immer mit doppelten Anführungszeichen:
"Hello, world!"
in JSON müssen die Property-Namen eines Objekts mit Anführungszeichen umschlossen sein
{
"firstName": "Thomas",
"lastName": "Edison",
"birthYear": 1847,
"living": false
}
Beispiel für JSON-Daten:
Was ist der Wert von a am Ende dieses Programms?
let a = [1, 2, 3];
let b = a;
b.push(4);
Eine Zuweisung (z.B. b = a) versieht ein existierendes Objekt mit einem neuen (zusätzlichen) Namen.
Im Hintergrund steht nach wie vor nur ein einzelnes Objekt.
Falls das Original erhalten bleiben soll, kann es kopiert werden oder die abgeänderte Variante basierend auf dem alten Objekt erstellt werden:
let a = [1, 2, 3];
// creating a new copy
let b = a.slice();
// modifying b
b.push(4);
let a = [1, 2, 3];
// creating a new object b based on a
let b = a.concat([4]);
// alternative:
let c = [...a, 4];
Ob eine Methode ein Objekt direkt abändert (wie push) oder ein neues Objekt zurückgibt (wie concat) muss in der Dokumentation nachgelesen werden.
Manche Datentypen können direkt verändert (mutiert) werden - z.B. via .push(), .pop(), ...
Beispiele: object, array
Einige einfache Objekte sind nach ihrer Erstellung unveränderlich.
Beispiele: number, string, boolean
Entwicklungsumgebungen für JavaScript:
Siehe die Präsentation VS Code
Zwei wichtige Möglichkeiten:
Einbinden in eine HTML-Seite, aufrufen der Seite im Browser:
<script src="myscript.js"></script>
Direktes Ausführen mittels node.js:
node myscript.js
Einbinden in HTML-Seite:
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="myscript.js" type="module"></script>
Kommentare dienen Entwicklern, um ihren Code zu beschreiben und zu erklären. Sie werden bei der Ausführung von JavaScript ignoriert.
Ãœblicherweise stehen Kommentare oberhalb des Codes, den sie beschreiben
Es gibt zwei Möglichkeiten, Kommentare zu erstellen:
// dies ist ein Kommentar über 1 Zeile
/*
dies ist
ein mehrzeiliger
Kommentar
*/
Wie wir schon gesehen haben: Variablen werden üblicherweise mit let deklariert
Alternativen:
const (nicht mehr neu zuweisbar)var ("veraltete" Version von let)Mit let oder const deklarierte Variablen sind nur innerhalb des enstprechenden Codeblocks (innerhalb der umgebenden geschweiften Klammern) gültig. (Mehr dazu später)
mit const deklarierte Zuweisungen können nicht mehr geändert werden
ungültig:
const names = ['Alice', 'Bob', 'Charlie'];
names = [];
Objekte, die hinter diesen Variablennamen stecken, dürfen aber abgeändert werden:
const names = ['Alice', 'Bob', 'Charlie'];
names.push('Dana');
Wir schreiben ein einfaches JavaScript-Programm für den Browser
index.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>hello!</h1>
<script src="index.js" type="module"></script>
</body>
</html>
index.js:
alert('hello!');
zwei einfache Funktionen, die im Browser vordefiniert sind:
alert() - um Text in einem Dialog anzuzeigenprompt() - um den Benutzer in einem Dialog nach einer Eingabe zu fragenEingabe: Mit Hilfe von prompt:
let name = prompt('What is your name?');
prompt liefert immer einen String zurück
Ausgabe der Begrüßung
alert(`Nice to meet you, ${name}!`);
Schreibe ein Programm, das den Benutzer nach dem Geburtsjahr fragt und dann angibt, wie alt diese Person im Jahr 2022 wird
Benutzer gibt einen Höchstwert ein (z.B.: 10)
Programm gibt eine Zufallszahl im gewünschten Intervall aus (z.B.: 7)
Verwende hierfür Funktionen aus dem Math-Objekt (schlage selbst in der Dokumentation nach)
Mit Kontrollstrukturen können wir bestimmten Code z.B. wiederholt ausführen lassen, oder Code nur in bestimmten Situationen ausführen lassen
Die zwei essenziellen Kontrollstrukturen in jeder Programmiersprache:
Beispiel: if-Abfrage
let a = 3;
if (a > 0) {
console.log('a is greater than 0');
console.log('a is positive');
}
Beispiel: for-of-Schleife
let names = ['Alice', 'Bob', 'Charlie'];
for (let name of names) {
console.log(`Hello, ${name}!`);
console.log(`Bye, ${name}!`);
}
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)
Viele Entwickler verwenden nur die strikten Vergleichsoperatoren === und !==, um unterwartete Fehler zu vermeiden
Beispiele:
3 === '3'; // false
3 == '3'; // true
0 == []; // true
[] == ''; // true
console.log(a < b); // less than
console.log(a > b);
console.log(a <= b); // less than or equal to
console.log(a >= b);
Das Resultat eines Vergleichs ist ein boolescher Wert (True / False)
Wir können das Resultat in einer Variablen speichern:
let isAdult = age >= 18;
&& bedeutet und|| bedeutet oder! bedeutet nichtBeispiele:
let canBecomeUsPresident =
person.age >= 35 && person.nationality === 'us';
let isTemperatureExtreme =
temperatureCelsius < -10 || temperatureCelsius > 40;
let isTemperatureNormal = !isTemperatureExtreme;
Codeblock: Folge von zusammengehörenden Anweisungen (Statements)
insbesondere wichtig bei Kontrollstrukturen und Funktionsdefinitionen
Begrenzung eines Codeblocks: mittels { und }
Inhalte typischerweise eingerückt (z.B. mit 2 Leerzeichen)
Beispiel im Zusammenspiel mit if:
let a = 3;
if (a > 0) {
console.log('a is greater than 0');
console.log('a is positive');
}
Scope: Variablen sind nur innerhalb von Codeblöcken verfügbar, in denen sie (z.B. mit let) deklariert wurden
ungültiger Code:
let a = 3;
if (a > 0) {
let message = 'a is positive';
} else {
let message = 'a is negative or 0';
}
console.log(message); // ReferenceError!
korrigierter Code:
let a = 3;
let message;
if (a > 0) {
message = 'a is positive';
} else {
message = 'a is negative or 0';
}
console.log(message);
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 (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');
}
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
Mit einer for-of-Schleife können wir die Inhalte eines Arrays durchlaufen
Bezeichnung in anderen Programmiersprachen: for-each
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.
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
Eine if-Abfrage führt einen Codeblock einmal aus, wenn ein Kriterium zutrifft
Eine while-Schleife wiederholt einen Codeblock, solange ein Kriterium zutrifft
Beispiel:
let a = 1;
while (a < 2000) {
console.log(a);
a = a * 2;
}
Schlüsselwörter:
break: Beenden einer Schleifecontinue: Beenden eines DurchlaufsBei verschachtelten Schleifen beziehen sie sich auf die innerste Schleife
Beispiel:
let a = 1;
while (true) {
a = a * 2;
console.log(a);
if (a > 1000) {
break;
}
}
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 (augmented assignment): folgende Statements sind äquivalent zueinander
a = a + 1;
a += 1;
a++;
Ãœbung: Ausgabe einer Multiplikationstafel
1 x 7 = 7
2 x 7 = 14
3 x 7 = 21
4 x 7 = 28
...
Ãœbungen zu for-of-Schleifen und while-Schleifen:
Ãœbung: Einkaufsliste
Beispiel für Interaktion:
enter an item or "x" to quit:
milk
enter an item or "x" to quit:
bread
enter an item or "x" to quit:
apples
enter an item or "x" to quit:
x
your shopping list is:
- milk
- bread
- apples
// users and passwords
let users = [
{ username: 'Alice', password: '1234' },
{ username: 'Bob', password: 'password' },
{ username: 'Charlie', password: 'paris41' },
];
Beispielhafter Programmlauf:
Enter your username:
lice
No such user.
Enter your username:
Alice
Enter your password:
123
Wrong password
Enter your password:
1234
Logged in as Alice!
wichtige "eingebaute" Funktionen in JavaScript
console.log() - Text in der Browser-Konsole ausgebenMath - mathematische FunktionenDate - Arbeiten mit Uhrzeit und DatumJSON.parse(), JSON.stringify() - Konvertieren zwischen JS-Objekten und JSON-Stringsdocumentalert, promptfetchText in der Konsole ausgeben:
console.log('foo');
aktueller Timestamp:
let a = new Date();
Methoden:
a.toLocaleTimeString();
a.toLocaleDateString();
a.toISOString();
a.getHours();
// ...
Math.round, Math.ceil, Math.floorMath.max, Math.minMath.randomMath.PIWir kennen schon einige vordefinierte Funktionen, z.B. alert(), console.log()
Funktionen können Parameter übergeben bekommen und Rückgabewerte haben.
Beispiel: Math.max(2, 9, 4) → 9
Parameter: 2, 9, 4
Rückgabewert: 9
"traditionelle" Funktionsdefintion:
function average(a, b) {
let m = (a + b) / 2;
return m;
}
In Funktionen können Standardwerte für Parameter definiert werden:
function join(strings, separator = '') {
// ...
}
Aufruf:
join(['foo', 'bar'], '-');
join(['foo', 'bar']);
Eine Funktionsdefinition öffnet einen neuen Scope, einen Geltungsbereich für Variablen
Im folgenden Beispiel: zwei separate Variablen, die beide mit m benannt sind:
let m = 'Hello, world';
function average(a, b) {
let m = (a + b) / 2;
return m;
}
x = average(1, 2);
console.log(m); // logs "Hello, world"
Alternative Möglichkeiten, Funktionen zu definieren:
Pfeilfunktion:
let average = (a, b) => {
let m = (a + b) / 2;
return m;
};
Funktionsausdruck (heutzutage weniger verbreitet)
let average = function (a, b) {
let m = (a + b) / 2;
return m;
};
Kurzschreibweise einer Pfeilfunktion, wenn der Rückgabewert ein einzelner Ausdruck ist:
let average = (a, b) => (a + b) / 2;
Klammern für den Codeblock und return werden weggelassen
Achtung: { und } sind mehrdeutig (können sowohl Objekte als auch Codeblöcke begrenzen)
// unzulässig:
const getPerson1 = () => {
firstName: 'Thomas',
lastName: 'Edison',
birthYear: 1847,
};
// stattdessen:
const getPerson1 = () => ({
firstName: 'Thomas',
lastName: 'Edison',
birthYear: 1847,
});
True oder False zurückgibtfür Strichcodes / Primzahlen: % - Operator
JavaScript-Code kann in einzelne Dateien (Module) aufgeteilt und aus diesen importiert werden
um das im Browser zu erlauben, muss das Einstiegs-Skript in HTML als Modul gekennzeichnet werden:
<script src="index.js" type="module"></script>
benannte Imports und Exports:
// mymodule.js
const foo = 1;
const bar = 2;
const baz = 3;
export { foo, bar, baz };
// index.js
import { foo, bar } from './mymodule.js';
es kann einen default export geben:
// mymodule.js
const foo = 1;
const bar = 2;
const baz = 3;
export { foo, bar, baz };
const main = 0;
export default main;
// index.js
import main, { foo, bar } from 'mymodule.js';
Imports müssen immer zuoberst in einer Datei stehen
Markup-Sprache für Dokumentation zu Funktionen / Klassen / ... in entsprechenden Kommentaren
Beispiel:
/**
* Computes the n-th fibonacci number.
*
* @param {number} n the index of the fibonacci number
* @returns {number} n-th fibonacci number
*/
function fibonacci(n) {
...
}