Voraussetzung für dieses Kapitel sind Grundkenntnisse der Programmiersprache Python. Wir werden hier Javascript nur knapp erläutern, und dafür Vergleiche mit Python heranziehen.

Die Beispiele können online getestet werden: https://jsitor.com/

Datenstrukturen und -typen #

Variablen #

let x = 12;
x = x + 1;
console.log(x);

x = 12
x = x + 1
print(x)

Konstanten #

Möchten wir in einen Wert definieren, der nicht mehr geändert werden soll, so verwenden wir bei der Initialisierung statt let das Schlüsselwort const:

const pi = 3.14;

PI = 3.14

einfache Datentypen #

Auch Javascript kennt Datentypen für Text, Zahlen und Wahrheitswerte:

Daneben gibt es zwei spezielle Datentypen, die jeweils nur einen Wert haben können:

• Definiert man eine Variable ohne sie zu Initialisieren (also ohne einen ersten Wert zuzuweisen), so hat diese den Wert undefined.
• Man kann einer Variable explizit den Wert null zuweisen.

Listen #

Listen werden wie in Python mit eckigen Klammern definiert. Mehrere Elemente werden durch Kommas getrennt:

const colors = ["Red", "Yellow", "Green", "Orange"];
console.log(colors[1]);

colors = ["Red", "Yellow", "Green", "Orange"]
print(colors[1])

let primes = [];
primes.push(7);
primes.push(11);
console.log(primes.length);

primes = []
primes.append(7)
primes.append(11)
print(len(primes))

Objekte #

• Ein Objekt beinhaltet durch Komma getrennte Eigenschaften in Form von Schlüssel-Wert-Paaren (key-value-pairs).
• Objekte werden durch geschweifte Klammern gekennzeichnet.
• Werte von Objekten können alle Datentypen, aber auch Listen oder andere Objekte sein
• Auf die einzelnen Eigenschaften kann mit der Punktnotation zugegriffen werden

var car = {
	model: "BMW X3",
	color: "white",
	doors: 5
}
console.log(car.model);

👉 siehe auch JSON

Programmstrukturen #

Der grösste Unterschied ist wohl die Abgrenzung der Blöcke: Während Python die Programmblöcke mittels Einrücken kennzeichnet, verwendet Javascript geschweifte Klammern.

Sequenz #

In Python gilt ein Zeilenumbruch als neue Anweisung. In Javascript müssen wir die einzelne Anweisung einer Sequenz explizit mit einem Semikolon abschliessen:

let x = 12;
x = x + 1;
console.log(x);

x = 12
x = x + 1
print(x)

Blöcke #

Während bei Python die Programmblöcke mittels Einrücken gekennzeichnet werden, verwendet Javascript dafür geschweifte Klammern.

Unterprogramme (Funktionen) #

• Statt def verwenden wir das Schlüsselwort function
• Der Funktionsblock wird durch geschweifte klammern abgegrenzt

function pythagoras(a, b) {
	const result = Math.sqrt(a**2 + b**2);
	return result;
}

console.log(pythagoras(3, 4));

from math import sqrt

def pythagoras(a, b):
	result = sqrt(a**2 + b**2)
	return result
	
print(pythagoras(3, 4))

Wiederholungen #

Javascript kennt die aus Python bekannten Strukturen while und for-in (heisst in JS for-of – for-in iteriert über Eigenschaften eines Objektes). Dazu kommen einige weitere wie for oder do-while.

let i = 0;
while (i < 12) {
	console.log(i);
	i = i + 1;
}
console.log("fertig");

i = 0
while i < 12:
	print(i)
	i = i + 1
print("fertig")

Verzweigungen #

Javascript kennt if-else, aber kein elif – hier müsst man mit verschachtelten if-Strukturen arbeiten:

function wie_war_ich(note) {
	if (note > 4) {
		console.log("gut")
	}
	else {
		if(note < 4) {
			console.log("nicht gut")
		}
		else {
			console.log("gerade noch genügend");
		}
	}
}
wie_war_ich(5);
wie_war_ich(3);
wie_war_ich(4);

def wie_war_ich(note):
	if note > 4:
		print("gut")
	elif note < 4:
		print("nicht gut")
	else:
		print("gerade noch genügend!")
	
wie_war_ich(5)
wie_war_ich(3)
wie_war_ich(4)

def wie_war_ich(note):
	if note > 4:
		print("gut")
	else:
		if note < 4:
			print("nicht gut")
		else:
			print("gerade noch genügend!")
	
wie_war_ich(5)
wie_war_ich(3)
wie_war_ich(4)

Tipps #

Querystring-Parameter auslesen #

Rufen wir eine Seite mit einem Querystring auf, dann können wir die Parameter mit Javascript auslesen.

Wenn wir also z.B. suche.html?q=Curry aufrufen, dann kann die Seite suche.html mit Javascript auf den Querystring zugreifen. Dies geschieht in drei Schritten:

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const search = urlParams.get('q');	

Zeile 1

wir holen den Querystring über die Eigenschaft search der URL des aktuellen Fensters

dies ergibt im Beispiel den String q=Curry

Zeile 2

mit URLSearchParams können wir diesen String parsen, d.h. es wird überprüft, ob es sich um korrekte Parameter handelt und welche Datentypen dabei vorkommen.

Zeile 3

mit der Methode get() von URLSearchParams können nun Werte für einzelne Elemente abgerufen werden. Wenn wir also den Wert für den Paramater q abfragen, erhalen wir nun den vom Beuntzer eingegebenen Suchbegriff Curry zurück.