Inhaltsverzeichnis
Javascript – die Sprache des Webs. Wer anfangen will, mit Javascript die ersten Projekte umzusetzen ist hier beim richtigen Beitrag gelandet.
Beim Programmieren gilt, probieren geht über studieren – sicher sind einige Resourcen zum starten wichtig – aber der richtige Lerneffekt tritt erst ein wenn man selber Projekte umsetzt. Deshalb stellen wir euch heute einige Ideen für Javascript Projekte für Anfänger vor.
Javascript ist neben html und css die wichtigste Sprache im Web. Wobei man dazu sagen muss, dass HTML und CSS nicht wirklich richtige Programmiersprachen sind.
Die allererste Übung, die man mit Javascript machen kann ist ein simples „Hello World“ in der Konsole. Dazu kann man einfach die Entwicklertools im Webbrowser per Rechtsklick -> Untersuchen öffnen. Danach kann die Konsole geöffnet werden.
Hier kann man direkt Javascript-Code eingeben – unser erster Befehl:
console.log("hello world")
Jetzt mit Enter bestätigen und es erscheint hello world in der Konsolenausgabe.

Das war unsere erste Line Javascript Code und das direkt im Webbrowser. Natürlich kann man auch in anderen Entwicklungsumgebungen oder Texteditoren Javascript Code schreiben. Besonders gut finden wir VSCode.
Für Beginner empfehlen wir sich erst mal mit den Grundlagen der Sprache Javascript vertraut zu machen. So ist es sinnvoll, Variablen, Schleifen, Funktionen und mehr erst mal zu beherschen.
Danach können die ersten Projekte gestartet werden, z.B. ein Taschenrechner.
Ein weiteres Projekt, dass wir für Anfänger empfehlen können ist die Erstellung einer eigenen Homepage. So kriegt man ein gutes Gefühl dafür, wo Javascript überhaupt auf einer Website verwendet wird. Das hilft auch dann, sobald einige Sachen bei einer WordPress Seite umgeändert werden müssen. WordPress nimmt zwar das meiste ab – man muss im Prinzip gar nicht programmieren, aber es schadet sicher nicht, einige Javascript Tricks zu können. Für WordPress selbst wird allerdings PHP notwendig werden. Lediglich kleine frontend Sachen können mit javascript behandelt werden.
Welche Projekte eignen sich nun also für Javascript Anfänger?
- Taschenrechner
- eigene Homepage
Gute Javascript Bücher:
Entwicklungsumgebungen
Empfehlenswert ist allerdings eine Entwicklungsumgebung, die dir beim Programmieren hilft. Sie unterstützt auch bei Javascript Projekten für Anfänger. Solche Tools sind meist kostenlos. Sie geben dir eine Übersicht über alle Dateien, die zu deinem Projekt gehören. Das ist nützlich, da wir für unsere Seite mehrere Dateien bearbeiten müssen. Zudem bieten Entwicklungsumgebungen Syntax-Highlighting, um Codeabschnitte und Schlüsselwörter farbig hervorzuheben. Zusammen mit einer automatischen Formatierung, die zusammengehörige Blöcke korrekt einrückt, erhöht dies die Übersichtlichkeit des Programmtextes enorm. Debugging hilft uns bei der Fehlersuche. In diesem Beispiel nutzen wir VSCode von Microsoft. Es ist für Windows, Linux in Form von RPM- und DEB-Paketen und Mac kostenlos verfügbar.
Deine erste Webseite
1. Erstelle dir nun einen Ordner an einem beliebigen Ort auf deiner Festplatte. Zum Beispiel nennen wir ihn „stoppuhr“. Als Unterordner legst du dir darin ein „js“- und ein „css“-Verzeichnis an.
2. Um die Vorbereitung so kurz wie möglich zu halten, kannst du dir diese beiden Dateien von Bootstrap herunterladen:
https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js
Die css-Datei legst du in den css-Unterordner, die js-Datei in den js-Ordner. Im css-Ordner erstellst du die Datei style.css und füllst sie mit diesem Inhalt:
body { padding-top: 70px; }
Des Weiteren findest du bei getbootstrap.com das Grundgerüst der index.html mit „Hello World“-Beispiel:
https://getbootstrap.com/docs/5.2/getting-started/introduction/
3. Die index.html gehört direkt in den „stoppuhr“-Ordner. Nun kannst du in VSCode unter Datei -> Ordner öffnen das „stoppuhr“-Verzeichnis auswählen und öffnen. Die Ordnerstruktur wird links im Navigationsbereich angezeigt.
4. Mit F5 kannst du das Projekt einmal ausführen. Dir erscheint eine Auswahl, mit welcher Web App die Seite laufen soll. Hier siehst du die installierten Webbrowser und kannst deine eigene Auswahl treffen. Der Browser öffnet sich und du siehst die „Hello, world!“-Seite.
5. Glückwunsch, der HTML-Teil steht. Es ist alles statischer Inhalt, den wir nun mit dem Leben einer Stoppuhr füllen wollen. Dieses Leben bringen wir durch JavaScript hinein, während CSS den Inhalt ein wenig ansehnlicher macht. Alle Anpassungen in diesem Punkt 5 finden in der Datei index.html statt.
Im Bereich head der index.html kannst du der Seite einen Titel geben:
title Stoppuhr /title
Außerdem benötigen wir im head-Block die Verweise auf das CSS-Style-Pakete
link href=“css/bootstrap.min.css“ rel=“stylesheet“
link href=“css/style.css“ rel=“stylesheet“
Im Block body bringen wir folgende Elemente unter:
– eine Navigationsleiste (Navbar), um gegebenenfalls durch Unterseiten zu navigieren
– die aktuelle Uhrzeit
– das Zählwerk der Stoppuhr
– den Start/Stopp-Knopf
Die Navbar legen wir direkt unter dem Beginn des body-Blocks an. Hier vergeben wir das Design und die Einträge der Navigationsleiste. Es wird in diesem Beispiel nur den Eintrag „Stoppuhr“ geben, muss aber nicht bei einem bleiben:
Als nächstes verwenden wir das CSS-Element „row“, um die kommenden Bestandteile unserer Stoppuhr-Seite nebeneinander anzuzeigen. Der Block div row… umfasst die Uhrzeit, die Stoppuhr sowie den Start/Stopp-Button und wird erst am Ende durch /div geschlossen. Für die spaltenweise Anordnung dieser Elemente nutzen wir div col…:
Uhrzeit
19:53:00
Stoppuhr
00:00:00
CSS teilt die Breite der Seite in zwölf Spalten auf. Verwenden wir col-md-5, nimmt dieses Element fünf Spalten Platz ein. Eine weitere Spalte der Breite fünf ergibt eine Gesamtbreite von zehn. Der Button ganz rechts beansprucht zwei Spalten. Somit beanspruchen wir die komplette verfügbare Seitenbreite.
Für den Text „Uhrzeit“ und „Stoppuhr“ sowie die Zeitanzeigen nutzen wir die großen h1-Überschriften. Die Werde für „id=“ verweisen auf die Variablen, die den Stoppuhr-Zähler und die Uhrzeit enthalten. Wir brauchen sie gleich im JavaScript-Teil des Projektes.
Das Element „button“ erhält die Id „startstop“, die ebenfalls für JavaScript von Bedeutung ist. Denn ein Klick auf diesen Knopf soll die Funktion ausführen, die die Stoppuhr steuert.
6. Den JavaScript-Code selbst implementieren wir nun in der Datei js\script.js. Hier folgt nun die Verwirklichung der Funktionalität, die der Nutzer mittels Start/Stop-Button in Gang setzt und die Uhrzeit und Stoppuhr laufend aktualisiert.
Am Anfang stehen die Funktionen registerClock() und setTime(). In registerClock() wird das Intervall zur Aktualisierung der Zeitanzeigen gesetzt, zu Anfang kann dies 250 Millisekunden betragen und jederzeit angepasst werden. In diesem Intervall wird die Funktion updateClock() ausgeführt. Diese enthält zwei weitere Funktionsaufrufe, setTime() und setStopWatch(). setTime() füllt die Variable currentDate mit dem aktuellen Zeitstempel und gibt jeden Bestandteil von Datum und Zeit in den Textstring datetime aus. currentdate stellt als Datumsvariable die Funktionen
– getDate()
– getMonth()
– getFullYear()
– getHours()
– getMinutes()
– getSeconds()
bereit. Durch die laufende Aktualisierung mittels des 250 ms-Intervalls ist die Uhrzeit stets auf die Sekunde aktuell. Der String datetime wird der HTML-Seite über die id=“time“ übergeben.
7. Du hast in der index.html den Button mit id=“startstop“ angelegt. Im JavaScript-Code kannst du dem Klick-Ereignis dieses Buttons nun eine Funktionalität geben. Wir legen dazu eine Bool-Variable stopWatchRunning an. Diese wird bei jedem Invervalldurchlauf mittels der Funktion setStopWatch geprüft. Hat stopWatchRunning den Wert false, geschieht nichts und die Funktion wird verlassen. Der Klick auf den Start-Stop-Knopf ändert den Wert der Bool-Variable von false auf true oder andersherum. Außerdem setzt der Klick die aktuelle Uhrzeit in der Variable startTime fest. Der Wert true von stopWatchRunning sorgt für den Durchlauf der Funktion setStopWatch(). Hierbei wird die Startzeit von der aktuellen Uhrzeit abgezogen. Diese Differenz bildet den Wert der Stoppuhr, die sich bei jedem Intervalldurchlauf von updateClock() erhöht. Wird der Start/Stopp-Button erneut gedrückt, wird die Zeitdifferenz zwischen Startzeit und aktueller Zeit nicht mehr laufend aktualisiert und bleibt bei der gestoppten Zeit stehen. Ein dritter Klick gleicht Startzeit und aktuelle Zeit wieder an, die Differenz ergibt Null und die Stoppuhr läuft von vorne los.
Hier ist diese eine mögliche Lösung für die Datei style.css einer Stoppuhr:
$(function() {
registerClock();
setTime();
});
function registerClock() {
setInterval(updateClock, 250);
}
function updateClock() {
setTime();
setStopWatch();
}
var currentdate;
function setTime() {
currentdate = new Date();
var datetime = + currentdate.getDate() + "."
+ (currentdate.getMonth()+1) + "."
+ currentdate.getFullYear() + " "
+ currentdate.getHours() + ":"
+ currentdate.getMinutes() + ":"
+ currentdate.getSeconds();
$("#time").text(datetime);
}
var stopWatchRunning = false;
var startTime;
$("#startstop").click(function() {
if (stopWatchRunning == false) {
startTime = new Date();
stopWatchRunning = true;
} else {
stopWatchRunning = false;
}
});
function setStopWatch() {
if (stopWatchRunning == false) {
return;
}
var duration = new Date(currentdate - startTime);
var showDuration = duration.getHours()-1 + ":"
+ duration.getMinutes() + ":"
+ duration.getSeconds();
$("#tracker").text(showDuration);
}
Dieses Beispiel hat Potential für Verbesserungen. Zum Einen zeigt die Zeitdarstellung Zahlen kleiner als Zehn nur einstellig ohne führende Null an. Zum Anderen könnte die Stoppuhr zusätzlich Millisekunden anzeigen. Beschäftige dich weiter mit JavaScript und finde heraus, wie du diese Mankos beheben kannst. Genauso stehen dir Designmöglichkeiten für die Gestaltung des Buttons und der Navigationsleiste zur Verfügung. Überlege, ob du zusätzlich zur Stoppuhr weitere Funktionen wie einen Wecker mit Soundausgabe oder einen Timer realisieren kannst.