# Javascript
Bevor es mit deinem Portfolio weitergeht, solltest du einen kurzen Blick auf Javascript werfen.
# Die Grenzen von HTML & CSS
Obwohl du bereits einiges mit HTML und CSS bauen konntest, sind die Möglichkeiten dieser beiden Sprachen begrenzt. Wie bereits in den Grundlagen erwähnt, sind HTML und CSS keine ”echten” Programmiersprachen. HTML dient als Auszeichnungssprache für die Strukturierung eines Webdokuments. CSS als Stylesheetsprache ist für die Gestaltung der HTML-Elemente zuständig. Sobald du auf Nutzerinteraktionen und Eingaben reagieren möchtest, Daten im Hintergrund vom Server lädst oder auch mathematische Aufgaben und Logik berechnen willst, stossen HTML und CSS an ihre Grenzen.
Für solche Zwecke setzen Web-Developer meist Javascript ein. Natürlich gibt es auch noch viele andere Progammiersprachen, die insbesondere serverseitig eingesetzt werden (Python, C#, PHP, Go, Rust etc.) Javascript ist allerdings die meistgenutzte Sprache im Web und derzeit auch die einzige, die sowohl als Serverinfrastruktur (NodeJS), als auch bei dir im Browser ausgeführt werden kann.
In der Praxis können heute über 99% der Browser mit Javascript umgehen und haben dieses auch aktiviert. Dennoch gibt es Ausnahmen. Beispielsweise grosse Onlinehändler wie Amazon müssen davon ausgehen, dass ihre Website auch auf sehr alten Browsern und Computern aufgerufen wird. Da Amazon immer und überall etwas verkaufen möchte, muss die Seite komplett ohne Javascript funktionieren, falls dies beim Besucher nicht verfügbar ist. Auch auf den Computersystemen vieler Unternehmen werden oft jahrelang keine Updates installiert, da sich Browser oft in andere Systeme integrieren müssen.
Grundsätzlich ist es also eine gute Sache, wenn eine Website auch ohne Javascript funktioniert. Das ist allerdings nicht immer möglich oder hätte massive Mehraufwände zur Folge. Anbieter wie etwa Google Maps stellen sich strikt gegen den Verzicht von Javascript und liefern dem Nutzer einfach nichts, wenn Javascript im Browser deaktiviert wurde.
Google Maps ohne JS
Einfache Websites, wie dein Portfolio, können ohne dynamische Scriptsprachen auskommen. Sobald allerdings viele Daten und eine hohe Nutzerinteraktion besteht, ist statisches HTML und CSS alleine nicht mehr ausreichend.
Aufgabe
Recherchiere anschauliche Beispiele oder Grafiken, damit du die Grenzen von HTML & CSS anschaulich der Klasse präsentieren kannst. Füge deine Links und Beispiele in dieses Google Doc ein.
# Grundprinzipien von Javascript
Es gibt eine riesige Menge an Prinzipien und Konzepten im Zusammenhang mit Javascript. Zu viele, um alle in diesem Kurs zu behandeln. Deshalb erfährst du nur das Wichtigste. Weiter unten findest du passende Links, falls du Javascript selbstständig lernen möchtest.
Hinweis
Obwohl sich Java und Javascript viele Prinzipien teilen und einen ähnlichen Namen besitzen, so sind sie nicht dasselbe! Java wird hauptsächlich für Android und Desktop-Software eingesetzt. Javascript wurde deutlich später für den Einsatz im Browser entwickelt. Es wird vermutet, dass der ähnliche Name durch einen Marketingentscheid beim Unternehmen Mozilla entstand, um von Java’s Popularität zu profitieren.
# Datatypes (Datentypen)
Damit eine Programmiersprache effizient mit Daten umgehen kann, muss sie wissen, welche Art von Daten sie verarbeiten soll. Javascript unterscheidet dabei zwischen Primitives (Primitive Datentypen) und Objects (Objekten).
// Primitives
0; // number (Nummer)
'Hallo, ich bin Jane.' // string (Text in Anführungszeichen)
true; // boolean (falscher Wert)
false; // boolean (richtiger Wert)
undefined; // nicht existenter Wert
null; // existenter, aber leerer Wert
// Objects
// object (Objekt mit untergeordneten Objects oder Primitives)
janeObject = {
nachname: 'Doe',
beruf: 'Interactive Media Designer'
}
// array (Kommagetrennte Liste aus Objects oder Primitives)
janeArray = ['Jane Doe', 'Interactive Media Designer', 2020]
// function (Funktion die etwas berechnet, ausführt und/oder Werte zurückgibt)
function calculate() {
return 1 * 2;
}
# Operators (Operatoren)
Wie in den meisten Programmiersprachen gibt es auch in Javascript viele mathematische Konzepte der Arithmetik, der Algebra und der Logik. So kannst du etwa Werte (Zahlen, Texte etc.) einer Variable zuweisen, diese dann in einer Gleichung verwenden oder Bedingungen für die Berechnung festlegen.
// Assignment Operators (Zuweisungsoperatoren)
const a = 10; // unveränderbare Variable
let b = 5; // veränderbare Variable
// Arithmetic Operators (Arithmetische Opteratoren)
a + b; // addieren, Resultat: 15
a - b; // subtrahieren , Resultat: 5
a * b; // multiplizieren , Resultat: 50
a / b; // dividieren , Resultat: 2
a % b; // Restbetrag/modulo (wie viel mal passt b in a und was bleibt dann übrig) , Resultat: 0
// Comparison Operators (Vergleichsoperatoren)
a === b; // Ist a und b identisch? Resultat: true
a !== b; // Ist a und b NICHT identisch? Resultat: true
a > b; // Ist a grösser als b? Resultat: true
a < b; // Ist a kleiner als b? Resultat: false
a <= b; // Ist a kleiner oder gleichgross wie b? Resultat: false
a || b; // ist a oder b nicht false? Resultat: true
a && b; // Ist a und b nicht false? Resultat: true
Mathematik in Javascript
Mit Javascript kannst du noch sehr viel mehr berechnen. Mit dem Math-Objekt kannst du etwa eine Zahl zwischen einem Minimum und einem Maximum berechnen. Ähnlich wie du es bereits in CSS für die font-size getan hast.
# Loops (Schleifen)
Schleifen sind ein mächtiges Werkzeug um wiederholende Aufgaben in der Programmierung zu lösen. Angenommen du hast eine Array-Liste mit 10'000 Einträgen. Es wäre sehr umständlich und ineffizient, alle Einträge einzeln in deinem Code zu behandeln. Stattdessen würdest du einen Loop verwenden, der für jeden Eintrag in der Liste den von dir definierten Code ausführt.
const a = [1,2,3,4, … ,10000];
a.forEach((aktuellerWert, aktuellerIndex) => {
return 'Der Loop ist aktuell an der Position: ' + aktuellerIndex + ' und hat den Wert:' + aktuellerWert;
})
Hinweis zur Schreibweise
Alle Klammern [], (), {}, das Semikolon ; und auch der Pfeil => gehören zur Syntax von Javascript. Damit wird festgestellt, wann welcher Befehl gemeint ist und was wo beginnt oder endet. Falls du Javascript im Detail lernen möchtest, stehen dir weiter unten entsprechende Links zu Anleitungen und Dokumentationen zur Verfügung.
# Events (Ereignisse)
Jede Interaktion, die ein Besucher auf deiner Website macht, löst sogenannte Events (Ereignisse) aus. Auf diese Events kannst du in Javascript reagieren. Beispielsweise könntest du bei jedem click, den ein Nutzer irgendwo auf deiner Seite macht, eine Meldung anzeigen.
document.addEventListener('click', (event) => {
alert('Hallo Besucher, du hast irgendwo geklickt!')
});
Weiterführende Links
Hinweis
Auf den ersten Blick erscheint die Schreibweise etwas kompliziert. Diese musst du dir im Rahmen dieses Kurses nicht merken. Merke dir, es gibt…
Event-Listener– definiert auf welchen Event “gehört“ werden sollEvent-Handler– definiert was bei diesem Event getan werden soll
# Conditionals (Bedingungen)
Viele Programme führen Dinge nur aus, wenn bestimmte Konditionen/Bedingungen erfüllt sind. So kannst du beispielsweise ein Formular nicht absenden, wenn die E-Mail-Adresse falsch eingegeben wurde. Oder du kannst dich nicht einloggen, wenn das eigegebene Passwort falsch ist. In Javascript kannst du mit Conditionals (Bedingungen) definieren, wann welcher Code ausgeführt werden soll.
if(a > b) {
return true;
} else {
return false;
}
In Kombination mit den zuvor genannten Comparison Operators kannst du damit komplexe Abfragen und logische Abläufe zusammenstellen. Du kannst auch mehrere Conditionals hintereinander anreihen.
if(a > b && a % b === 0) {
return 'Ja, a ist grösser als b UND der Restwert von a % b ist 0';
} else if(a > b || a !== b) {
return 'Ja, a ist grösser als b ODER a ist nicht identisch mit b';
} else {
return 'Nichts davon trifft zu.';
}
Aufgabe
Recherchiere anschauliche Beispiele oder Grafiken, damit du die Grundprinzipien von Javascript anschaulich der Klasse präsentieren kannst. Füge deine Links und Beispiele in dieses Google Doc ein.
# Javascript verwenden
Nachdem du die grundlegenden Prinzipien von Javascript gelernt hast, erfährst du jetzt, wie du es in deinem Portfolio einsetzen kannst.
# Vorgefertigtes Javascript integrieren
Selbst erfahrene Programmierer schreiben nicht sämtlichen Code selbst. Oft greifen sie auf Libraries (Code-Bibliotheken) oder Snippets (vorgefertigte Code-Teile) zurück. Die meisten Libraries, wie auch einzelne Javascript-Dateien, kannst du ähnlich wie eine CSS-Datei in einer HTML-Datei integrieren.
<!-- in der index.html vor dem schliessenden Body-Tag einfügen -->
<!-- Javascript Datei von einer externen Quelle laden -->
<script src="https://javascript.com/library.js"></script>
<!-- Javascript Datei aus einem Ordner deiner Website laden -->
<script src="js/library.js"></script>
Libraries & Snippets finden
Hier ein paar nützliche Links, unter denen du vorgefertigten Code und Beispiele finden kannst.
- Codepen (Frontend-Community mit vielen Code-Beispielen)
- Codrops (Frontend Beispiele mit Code)
- Glitch (Kollaborative Coding-Community)
- Stackoverflow (Weltgrösstes Coding-Forum)
- Github (Weltgrösste Coding-Plattform mit vielen öffentlichen Projekten)
# Javascript selbst schreiben
Eine Library alleine macht oft noch gar nichts. Du musst dieser in Javascript sagen, was sie auf deiner Website tun soll. Das gilt natürlich auch für jedes andere Javascript, welches unabhängig von Libraries oder Snippets integriert werden soll. Du kannst Javascript entweder direkt innerhalb eines script-Tags in dein HTML schreiben oder in eine separate .js-Datei auslagern, welche du dann wie zuvor beschrieben, integrierst.
<script>
// Vollständiges Datum mit Uhrzeit beim Laden der Seite in der Browser-Konsole ausgeben
console.log( new Date() );
</script>
Hinweis
Javascript inline, also direkt im HTML zu schreiben, ist in den wenigsten Fällen sinnvoll. Verwende wenn immer möglich eine separate .js Datei.
Weiterführende Links
# Javascript lernen
Javascript könnte in einem separaten Kurs wie diesen beigebracht werden. Deswegen wird nicht weiter darauf eingegangen. Falls du Javascript lernen möchtest, so gibt es dafür viele kostenlose und bezahlte Angebote.
Javascript lernen
- DEV.to (Kostenloses Community-Magazin für Developer)
- Freecodecamp (Kostenlose Tutorials und Challenges)
- Scotch.io (Teilweise kostenlose Tutorials)
- Codecademy (Teilweise kostenlose, qualitative Online-Tutorials)
- SuperHi (Kostenpflichtiges Online-Coaching)
Weitere empfehlenswerte Links und Ressourcen findest du auch im Kapitel Weiterführendes.
Aufgabe
Recherchiere anschauliche Beispiele oder Grafiken, damit du das Verwenden von Javascript anschaulich der Klasse präsentieren kannst. Füge deine Links und Beispiele in dieses Google Doc ein.
Passende Challenges
- #22 Dynamic Date (Füge im Footer die aktuelle Jahreszahl hinzu, die sich dynamisch jährlich ändert)
- #23 Dynamic Hello (Begrüsse Website Besucher passend zur Tageszeit)
- #24 Lazyloading Images (Lade Bilder erst, wenn Sie in den sichtbaren Bereich (Viewport) gelangen)
- #21 Click Events (Tausche ein Portfolio-Bild aus, sobald es angeklickt wurde)
- #29 Likes (Lass Besucher auf deiner Website Beiträge "liken". Stelle sicher, das diese Likes gespeichert und zusammengezählt werden)