sitebuff ebook

In 7 Schritten zu mehr Traffic fĂŒr dein Webprojekt

Erhalte das kostenlose E-Book indem du dich fĂŒr unseren Newsletter anmeldest. Wir zeigen dir in 7 Schritten, wie du mehr Besucher fĂŒr deine Website generieren kannst.

javascript projekte fĂŒr anfĂ€nger

🔰 JavaScript Projekte fĂŒr AnfĂ€nger: 🌟 Einfache Schritte zum Erfolg! đŸ“šđŸ’»

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.

hello world

 

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:

FĂŒr fortgeschrittene Javascript-Benutzer können wir empfehlen, sich mit React zu befassen.

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:

				
					<nav class="navbar navbar-default"> <!-- Navbar mit Titel -->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Stoppuhr</a>
</div>
</div>
</nav>
				
			

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…:

				
					<div class="row"> <!-- Zeile mit Uhrzeit -->

<div class="col-md-5">
<h1>Uhrzeit</h1>
<h1 id="time">19:53:00</h1>
</div>
<div class="col-md-5">
<h1>Stoppuhr</h1>
<h1 id="tracker">00:00:00</h1>
</div>
<div class="col-md-2">
<button id="startstop" class="btn btn-default">Start/Stop</button>
</div>
</div>
				
			

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.

Hat Javascript noch Zukunft?

Diese Frage können wir mit einem klaren Ja beantworten. Immer mehr Web Projekte laufen auf Javascript. Siehe neue Frameworks wie React.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Neuroflash logo

Sichere dir 2000 Wörter im Monat als Bonus

Tage
Stunden
Minuten
Sekunden

Teste Neuroflash ausfĂŒhrlich und kostenlos