JavaScript Basics für Softwaretester

In diesem Guide lernst du die grundlegenden JavaScript-Themen, die du für deine Testautomatisierung brauchst. Wenn du die Beispiele und Übungen direkt ausprobieren möchtest, empfehlen wir dir für den Start einen einfachen Online-Editor wie playcode.io. Einfach den Link öffnen und loslegen!
JavaScript ist die wichtigste Programmiersprache für die Webentwicklung. Sie wurde Mitte der 1990er Jahre entwickelt und hat sich seitdem zu einer universellen Sprache entwickelt, die in jedem Browser läuft und mittlerweile auch für serverseitige Anwendungen eingesetzt wird. Für Softwaretester ist JavaScript besonders interessant, weil viele moderne Testtools fürs Web auf JavaScript basieren.
JavaScript-Grundlagen für Tester
1. Variablen & Datentypen
Variablen sind Behälter, in denen Werte gespeichert werden. Du kannst dir eine Variable wie eine beschriftete Box vorstellen, in der du etwas ablegst, z. B. eine Zahl, einen Text oder eine Liste.
let alter = 30; // 'alter' speichert die Zahl 30
const name = "Max"; // 'name' speichert den Text "Max"
let
bedeutet, der Wert in der Variable kann sich ändern (z. B.
alter
kann später 31 sein).
const
bedeutet, der Wert bleibt immer gleich (z. B. dein Name
bleibt "Max").
Wichtige Datentypen im Überblick:
Datentyp | Beschreibung | Beispiel |
---|---|---|
Number | Ganze Zahlen oder Dezimalzahlen | 42 , 3.14 |
String | Text, immer in Anführungszeichen | "Hallo Welt" |
Boolean | Wahrheitswerte | true , false |
undefined | Variable ohne Wert | let x; (x ist undefined) |
Codebeispiele zu den Datentypen:
// Number (Zahlen)
const anzahlTests = 42;
console.log(anzahlTests); // Ausgabe: 42
// String (Text)
const fehlermeldung = "Passwort falsch";
console.log(fehlermeldung); // Ausgabe: Passwort falsch
// Boolean (Wahrheitswerte)
const testErfolgreich = true;
console.log(testErfolgreich); // Ausgabe: true
// undefined (Variable ohne Wert)
let testErgebnis2;
console.log(testErgebnis2); // Ausgabe: undefined
2. Die console.log Funktion
Mit console.log()
kannst du den Wert einer Variablen in der
Konsole anzeigen lassen, super zum Nachvollziehen, was dein Programm gerade
macht!
let stadt = "Hamburg";
const geburtsjahr = 1980;
console.log("Ich wohne in " + stadt); // Ausgabe: Ich wohne in Hamburg
console.log("Geburtsjahr: " + geburtsjahr); // Ausgabe: Geburtsjahr: 1980
3. Die length
-Eigenschaft
Strings und Arrays haben eine length
-Eigenschaft. Da du jetzt
schon Arrays kennst, hier ein besseres Beispiel:
const text = "Hallo";
const früchte = ["Apfel", "Banane", "Orange"];
console.log(text.length); // 5 (Anzahl Buchstaben)
console.log(früchte.length); // 3 (Anzahl Früchte)
4. Funktionen: Warum sind sie so wichtig?
Funktionen sind wiederverwendbare Code-Blöcke, die spezifische Aufgaben erledigen. Sie nehmen Eingaben (Parameter) entgegen, verarbeiten diese und können Ergebnisse zurückgeben. Funktionen helfen dir, deinen Code übersichtlich zu halten, Wiederholungen zu vermeiden und komplexe Aufgaben in kleinere Teile zu zerlegen.
Beispiel: Eine einfache Funktion
function begruessung(name) {
console.log("Hallo " + name + "!");
}
begruessung("Max"); // Ausgabe: Hallo Max!
begruessung("Anna"); // Ausgabe: Hallo Anna!
Beispiel: Funktion mit Rückgabewert
function addiere(a, b) {
return a + b;
}
const ergebnis = addiere(5, 3);
console.log(ergebnis); // Ausgabe: 8
Die erste Funktion begruessung
gibt etwas aus, die zweite
Funktion addiere
berechnet etwas und gibt das Ergebnis zurück.
Objekte & Arrays verstehen
1. Arrays: Listen von Werten
Arrays sind Listen, die mehrere Werte speichern können. Stelle dir ein Array wie eine Einkaufsliste vor, du kannst mehrere Dinge hineinschreiben und später einzeln abrufen. Jedes Element hat eine Position (Index), die bei 0 anfängt.
const früchte = ["Apfel", "Banane", "Orange"];
const zahlen = [1, 2, 3, 4, 5];
console.log(früchte[0]); // "Apfel" (erstes Element, Index 0)
console.log(früchte[1]); // "Banane" (zweites Element, Index 1)
console.log(zahlen.length); // 5 (Anzahl Elemente)
2. Objekte: Zusammengehörige Daten
Objekte speichern zusammengehörige Informationen mit Namen (Schlüssel). Anstatt nur eine Liste zu haben, kannst du Daten benennen, wie ein Kontakt mit Name, Alter und Email. Du greifst auf die Werte mit dem Punkt-Operator zu.
const person = {
name: "Laura",
alter: 28,
email: "laura@example.com"
};
console.log(person.name); // "Laura"
console.log(person.alter); // 28
3. Arrays mit Objekten kombinieren
In der Praxis kombiniert man oft Arrays und Objekte. Du kannst eine Liste (Array) von Personen (Objekten) erstellen. Das ist sehr häufig, zum Beispiel für Kontaktlisten oder Produktkataloge.
const kontakte = [
{ name: "Laura", email: "laura@example.com" },
{ name: "Mark", email: "mark@example.com" }
];
console.log(kontakte[0].name); // "Laura" (Name der ersten Person)
console.log(kontakte[1].email); // "mark@example.com" (Email der zweiten Person)
Vergleiche & Bedingungen: Wie trifft dein Code Entscheidungen?
Um im Code verschiedene Wege zu gehen, benutzt man
if-else
Bedingungen. Dabei ist es wichtig, dass du den richtigen
Vergleichsoperator nutzt.
1. Wichtige Vergleichsoperatoren
===
gleich!==
ungleich<
kleiner als,>
größer als
2. Warum immer ===
statt ==
?
==
prüft nur den Wert, nicht den Typ, das kann zu Fehlern führen.
===
prüft Wert und Typ. Deswegen immer
===
verwenden!
3. Beispiel einer if-else Bedingung
let zahl = 5;
if (zahl === 5) {
console.log("Die Zahl ist genau 5"); // Ausgabe: Die Zahl ist genau 5
} else {
console.log("Die Zahl ist nicht 5");
}
// Weiteres Beispiel mit anderer Zahl
let andereZahl = 7;
if (andereZahl === 5) {
console.log("Die Zahl ist genau 5");
} else {
console.log("Die Zahl ist nicht 5"); // Ausgabe: Die Zahl ist nicht 5
}
Schleifen und moderne Iteration
Manchmal musst du eine Liste von Werten durchgehen, z. B. eine Kontaktliste oder Produktdaten. Anstatt jeden Wert einzeln zu schreiben, nutzt du Schleifen.
1. Moderne forEach-Methode
Die forEach-Methode ist moderner und lesbarer. Sie führt eine Funktion für jedes Element im Array aus, ohne dass du dich um Indizes kümmern musst:
const namen = ["Anna", "Boris", "Clara"];
namen.forEach((name) => {
console.log(name); // gibt nacheinander "Anna", "Boris", "Clara" aus
});
2. Array-Methoden: map und filter
map
transformiert jedes Element und erstellt
eine neue Liste. Beispiel: Alle Namen in Großbuchstaben umwandeln:
const namen = ["Anna", "Boris", "Clara"];
const grosseNamen = namen.map(name => name.toUpperCase());
console.log(grosseNamen); // ["ANNA", "BORIS", "CLARA"]
filter
filtert Elemente nach einer Bedingung und
behält nur die, die zutreffen:
const namen = ["Anna", "Boris", "Clara"];
const langeNamen = namen.filter(name => name.length > 4);
console.log(langeNamen); // ["Boris", "Clara"] (Namen mit mehr als 4 Buchstaben)
Modularisierung & Wiederverwendbarkeit im Testcode
Wenn dein Testcode wächst, willst du ihn strukturieren, damit er übersichtlich bleibt. Dafür teilst du deinen Code in kleine Module auf.
Exportieren und Importieren, so einfach geht’s:
// Datei: mathUtils.js
export function addiere(a, b) {
return a + b;
}
export function subtrahiere(a, b) {
return a - b;
}
// Datei: testScript.js
import { addiere, subtrahiere } from './mathUtils.js';
console.log(addiere(10, 5)); // Ausgabe: 15
console.log(subtrahiere(10, 5)); // Ausgabe: 5
Das macht deinen Code modular, leichter wartbar und wiederverwendbar.
Übungen zum Mitmachen
1. Übung: Erstelle Variablen und gib sie aus
Erstelle eine Variable für deinen Namen und eine für dein Alter. Gib beide mit console.log() aus.
💡 Lösung anzeigen
const meinName = "Anna";
let meinAlter = 25;
console.log("Mein Name ist: " + meinName); // Ausgabe: Mein Name ist: Anna
console.log("Ich bin " + meinAlter + " Jahre alt"); // Ausgabe: Ich bin 25 Jahre alt
2. Übung: Schreibe eine Funktion, die prüft, ob eine Zahl größer als 10 ist
Die Funktion soll "groß" zurückgeben, wenn die Zahl größer als 10 ist, sonst "klein".
Teste die Funktion mit den Zahlen 15 und 7.
💡 Lösung anzeigen
function istGross(zahl) {
if (zahl > 10) {
return "groß";
} else {
return "klein";
}
}
console.log(istGross(15)); // groß
console.log(istGross(7)); // klein
3. Übung: Füge einem Objekt einen neuen Schlüssel-Wert hinzu
Gegeben ist das Objekt: const person = { name: "Tina" };
Füge die Eigenschaft "alter" mit dem Wert 28 hinzu und gib das komplette Objekt aus.
💡 Lösung anzeigen
const person = { name: "Tina" };
person.alter = 28;
console.log(person); // { name: "Tina", alter: 28 }
4. Übung: Greife auf Array-Elemente zu
Gegeben ist das Array:
const früchte = ["Apfel", "Banane", "Orange"];
Gib das erste und das letzte Element des Arrays aus.
💡 Lösung anzeigen
const früchte = ["Apfel", "Banane", "Orange"];
console.log(früchte[0]); // Ausgabe: Apfel (erstes Element)
console.log(früchte[2]); // Ausgabe: Orange (letztes Element)
Abschluss & Tipp
Bleib dran und probiere jeden Code direkt im Browser auf playcode.io aus! Experimentiere mit kleinen Änderungen. Je mehr du spielerisch ausprobierst, desto besser verstehst du, wie JavaScript funktioniert und bist perfekt gerüstet für deine ersten eigenen automatisierten Tests!