JavaScript: Die Grundlagen für Einsteiger:innen

Du hast deine Website mittlerweile mit HTML erstellt sowie mithilfe von CSS gestaltet, aber nun fehlen dir noch Interaktionsmöglichkeiten und Funktionen? JavaScript ist hier die notwendige Programmiersprache. Wir haben Grundlagen für JavaScript-Einsteiger:innen gesammelt und erklären dir, wofür du JavaScript brauchst.

Was ist JavaScript?

JavaScript ist eines der drei Tools, die man für die Webentwicklung können muss. HTML wird benötigt für den Inhalt der Website, CSS sorgt für das Aussehen der Website und JavaScript ist für die Interaktion und Dynamik der Website weitestgehend zuständig. Die dynamische Programmiersprache scheint zuerst sehr komplex, aber tatsächlich gilt sie als durchaus anfängerfreundlich sowie leicht zu erlernen.

Wir haben für dich auch Grundkenntnisse in HTML und CSS gesammelt:
HTML: Die Grundlagen für Einsteiger:innen >
CSS: Die Grundlagen für Einsteiger:innen >

Die Anwendungsfälle für JavaScript sind unglaublich vielseitig. Grundsätzlich kann man interaktive Inhalte einer Website hinzufügen. So sind simple Anwendungen, wie z. B. Karusselle, (Bilder-)Galerien, variable Layouts und Events auf Button-Klicks sowie ganze Spiele, animierte 2D- und 3D-Grafiken, Apps und vieles mehr möglich.

Noch mehr Anwendungsbeispiele haben wir für dich in unserem “Was ist JavaScript”-FAQ.

Durch Tools und Frameworks kann die an sich kompakte Programmiersprache flexibel erweitert werden. Darunter fallen Programmierschnittstellen (APIs) sowie APIs und Frameworks von Drittanbieter:innen oder Bibliotheken. Da es hier aber nur um Grundlagen von JavaScript gehen soll, wird nicht weiter auf diese Tools eingegangen. Wer sich später aber mit fortgeschrittenen Themen befassen möchte, findet darüber zahlreiche hilfreiche Websites.

Syntax

Die JavaScript-Syntax bezieht sich allgemein auf die Art, wie du dein Programm schreibst. Nur bei JavaScript-Implementierungen direkt in einer HTML-Datei musst du darauf achten, dass dein Code zwischen <script>-Tags steht. In externen JavaScript-Dateien musst du diese Tags nicht verwenden. Dazu aber später mehr.

Kommentare

Kommentare erstellst du genau wie in CSS. Diese helfen dir vor allem, den Code zu erklären. Vor Funktionen eignen sie sich, um kurz die Aufgabe der Funktion und gegebenenfalls welche Parameter benötigt werden, zu erklären.

/*
Längere Kommentare schreibst du am besten so.
So kannst du auch mehrzeilige Kommentare schreiben.
*/
// Kurze Kommentare so.

Variablen

Variablen sind Container, die Informationen beziehungsweise Werte speichern. Es gibt drei verschiedene Schlüsselwörter bei Variablen: var, let und const. let und const sind erst später zu JavaScript hinzugefügt worden und haben mittlerweile fast vollständig var ersetzt.

const nimmst du dann, wenn sich der Variablenwert nicht mehr ändern wird. let nimmst du, wenn sich der Variablenwert nochmal ändern könnte. Grundsätzlich brauchst du kein Schlüsselwort für das Erstellen einer Variable, empfohlen wird es aber.

Deklaration

Bei der Deklaration werden sozusagen neue Variablen erstellt, denen sofort oder später Werte zugewiesen werden können.

var x;
let y;
const z;

Zuweisung

Hier wird der Variable ein Wert gegeben. Dies kann wie in diesem Beispiel gleich bei der Deklaration stattfinden oder später erst gemacht werden.

let x = 2;
let y = 4;
let z = x + y; // =6

Variablenwerte ändern

Werte können auch noch im Nachhinein geändert werden, solange das Schlüsselwort nicht const lautet!

let x = 2;
let y = 4;
let z = x + y; // =6

let y = 2;
let z = x + y; // =4

Warum brauchst du also Variablen beim Programmieren? Sie sind notwendig, um Werte änderbar zu machen. Würdest du nur mit fixen Werten programmieren, könntest du nichts Dynamisches entwickeln. Du könntest unter anderem keine Interaktionen mit den Nutzerinnen und Nutzern implementieren.

Datentypen

Variablen nehmen Datentypen an, mit denen du verschieden weiterarbeiten kannst. JavaScript ist eine lose typisierte Sprache. Du musst einer Variable nicht den eigenen Datentyp mitteilen. Bei Skriptsprachen wie JavaScript und PHP wird der Datentyp anhand des Variablenwertes automatisch zugeteilt. Variablen sind nicht direkt mit einem bestimmten Datentyp verbunden, und jeder Variable können Werte aller Typen zugewiesen werden. Außerdem ist es auch möglich, einer Variable, die zuvor einen Integer als Werttyp hatte, später einen String mitzugeben.

Variable	Erklärung	Beispiel
String	Text Beim Deklarieren musst du den Text in Anführungszeichen setzen.	let a = ‘World4You’;
Number bzw. Integer	Nummer Hier sind keine Anführungszeichen nötig.	let b = 4;
Boolean	wahr/falsch Diese sind spezielle Schlüsselwörter und brauchen keine Anführungszeichen.	let webhosting = true;
Array	Erlaubt es dir mehrere Werte in einer einzigen Referenz zu speichern.	let kunde = [1, ‘Max’, ‘Mustermann’, ‘20’];bezieht sich auf jeden Eintrag des arrays, aufruf: kunde[0], kunde[1], …
Object	alles Alles in JS ist ein Objekt und kann so in einer Variable gespeichert werden.	let c = document.querySelector(’h1’);& alle Beispiele darüber

Operatoren

Operatoren sind mathematische Symbole, die basierend auf zwei Werten beziehungsweise Variablen ein Ergebnis erzeugen. Es gibt eine Vielzahl an Operatoren, wir zeigen dir die einfachsten und wichtigsten.

Operator	Erklärung	Symbol(e)	Beispiele
addieren/verbinden	Addieren zwei Zahlen oder hängen zwei Strings zusammen.	+	6 + 9; x + y; ”World” + 4 + “You”;
subtrahieren, multiplizieren, teilen	Verhalten sich genau so, wie es aus der Mathematk bekannt ist.	-, *, /	6 – 9; 8 * 2; 4 / 3;
Zuweisungsoperator	Wert wird einer Variable zugewiesen.	=	let x = 2; let y = 3; (und vorherige Zuweisungsbeispiele)
Vergleichoperatoren	Vergleichen zwei Werte und liefern true oder false (Boolean).	== bzw. === gleich!= nicht gleich>größer>= größergleich< kleiner<= kleinergleich	x == 1; //false x != 1; //true y > x; //true 2 >= x; //true y < x; //false 2 <= x; //true

Hier findest du eine detaillierte Liste von Operatoren: W3Schools JS-Operatoren

Bedingungen

Oft soll Code nur dann ausgeführt werden, wenn eine Bedingung erfüllt beziehungsweise wahr ist. Dafür verwendest du Bedingungen. Die am häufigsten vorkommende Bedingung ist die if-else-Bedingung:

• if wird verwendet, um einen Codeblock zu implementieren, der ausgeführt wird, wenn die angegebene Bedingung erfüllt bzw. wahr ist.
• Der else-Codeblock wird ausgeführt, wenn dieselbe Bedingung nicht erfüllt bzw. falsch ist. Das heißt: else wird ausgeführt, wenn if nicht stimmt.

let wissen = 'Anfänger:in';
if(wissen === 'Anfänger:in'){
	//wissen ist gleich 'Anfänger:in', also kommt man hier her
	alert('Du solltest diesen Beitrag weiter lesen! :) ');
}
else {
	//wenn wissen nicht gleich 'Anfänger:in' ist, kommt man hier her
	alert('Es gibt bestimmt noch mehr zu lernen! :) ');
}

Hier wird abgefragt, ob der Wert von der Variable ‘wissen’ ‘Anfänger:in’ ist. Wenn diese Bedingung stimmt, wird ‘Du solltest diesen Beitrag weiter lesen! : ) ‘ ausgegeben. Wenn der Wert allerdings nicht ‘Anfänger:in’ ist, dann wird ‘Es gibt bestimmt noch mehr zu lernen! : ) ‘ ausgegeben.

Du kannst diese Bedingungen mit weiteren Abfragen erweitern, dafür verwendest du zwischen if und else den Befehl else if. Wenn if nicht simmt, dann wird else if abgefragt und je nachdem wird entweder else if ausgeführt oder weiter zu else gegangen.

Funktionen

Dieser Codeblock beinhaltet eine gewisse Aufgabe und wird nur dann ausgeführt, wenn er von ‘etwas’ aufgerufen wird. Die Funktion kann durch folgende Dinge aufgerufen werden:

• Wenn ein Ereignis eintritt. Zum Beispiel, wenn Benutzer:innen einen bestimmten Button klicken.
• Wenn es an einer anderen Stelle im JavaScript-Code aufgerufen wird.
• automatisch

Funktionen sind außerdem dafür da, dass man bestimmten Code auch leicht wiederverwenden kann. So muss nicht immer der gleiche Code abgetippt werden – Zeit und Speicherplatz werden gespart. Abgesehen von deinen eigenen Funktionen gibt es auch welche, die JavaScript bereitstellt, zum Beispiel “alert()”. An den runden Klammern neben dem Namen kannst du erkennen, dass es sich um eine Funktion handelt und nicht um eine Variable. In den Klammern können Parameter mitgegeben werden. Diese werden für manche Funktionen gebraucht.

Das folgende Beispiel zeigt eine Funktion, die zwei Zahlen als Parameter aufnimmt und diese addiert:

function add(num1, num2){
	let sum = num1 + num2;
	console.log(sum);
}

add(2,3); //=5
add(5,6); //=11

Ereignisse (Events)

Eine der wichtigsten Funktionen, die JavaScript ermöglicht, ist, dass du auf ein HTML-Element zugreifen kannst. Dies kannst du für Interaktionen nutzen. Ein Klick mit dem Mauszeiger auf einen Button oder eine Enter-Eingabe als Bestätigung können dafür genutzt werden, dass gewisse Funktionen aufgerufen und ausgeführt werden. Es gibt viele Möglichkeiten, ein Ereignis mit einem HTML-Element zu verbinden. Eine gängige Art ist diese:

document.querySelector('html').addEventListener('click', function () {
  alert('Du hast das HTML-Element geklickt!');
});

Hier haben wir auf das <html>-Element ein Event gesetzt. Die auszuführende Funktion haben wir direkt angehängt, in diesem Fall soll ‘Du hast das HTML-Element geklickt!’ als Pop-Up geöffnet werden, wenn die Benutzerin oder der Benutzer auf den <html>-Bereich klickt.

Dies ist aber nur eine Art von vielen, ein Event zu nutzen und zu implementieren. Hier findest du noch mehr Anwendungsbeispiele und Implementierungsarten: W3Schools JavaScript-Ereignisse

Einbindung

Der Javascript-Quelltext kann entweder in einer externen Datei abgespeichert sein und dann in der HTML-Datei referenziert werden, oder mit einem <script>-Tag direkt in die HTML-Datei eingearbeitet werden. Es wird empfohlen den JS-Quelltext extern zu speichern, da so der Inhalt sowie Funktion sauber getrennt sind und beides später leichter anpassungsfähig ist. Außerdem kann so die JS-Datei auch für mehrere HTML-Dokumente verwendet werden. Sie können die externe Datei im <header> oder <body> referenzieren. Hier wird das Ende des bodys empfohlen.

<script src="myScript.js"/>

Zusammenfassung

Mit diesen Kenntnissen kannst du nun deinen HTML– und CSS-Code deines ersten Website-Projekts mit JavaScript ergänzen! Ich empfehle dir nicht nur bei den Grundkenntnissen zu bleiben. Damit stoßt du bestimmt irgendwann an die Grenzen. Recherchieren, Lernen und Testen ist bei der Erstellung einer Website unvermeidbar.

JavaScript gilt als eine der einfachsten Programmiersprachen, aber lass dich nicht entmutigen, wenn mal etwas nicht so funktioniert wie es sein sollte. Lies JavaScript-Dokumentationen, befasse dich mit Frameworks und fordere dich heraus. Dann sollte irgendwann nichts mehr zwischen dir und JavaScript stehen. Ich empfehle dir zur Weiterbildung die Tutorials von W3Schools und Mozilla.

Wir wünschen dir viel Glück bei deinem ersten JavaScript-Projekt!