Programmieren für Journalisten

Programmiersprachen sind die flexiblesten Werkzeuge, die der Mensch jemals entwickelt hat. Sie helfen uns zeitraubende Aufgaben zu automatisieren und komplexe Probleme zu lösen. Egal ob Smartphone, Waschmaschine oder Ampelanlage, mittlerweile wird unser Leben an vielen Stellen von Software bestimmt. Programmieren zu lernen, hilft dabei eine zunehmend digitale Welt besser zu verstehen.

Gerade für Journalisten ist diese Verständnis zunehmend wichtig, um kritisch über Herausforderungen und Probleme zu berichten, die durch die Digitalisierung unserer Gesellschaft entstehen. Außerdem können Journalisten selbst Methoden und Werkzeuge aus der Softwareentwicklung nutzen, um Geschichten in großen Datensätzen finden und interaktiv für die Veröffentlichung online aufzubereiten.

Glücklicherweise ist Programmieren lernen so einfach wie noch nie und erfordert vor allem Spaß am Lernen und Ausprobieren.

Ziel des Seminars

Teilnehmer des Seminars sollen die Grundlagen der Web-Entwicklung mit HTML, CSS und JavaScript lernen. Dabei steht die praktische Vermittlung von Programmierkenntnissen, so wie das Entwickeln von Problemlösungsstrategien im Vordergrund.

Legende

📖 Quellen und Literatur
💡 Tipps und Tricks
⚠️ Warnungen und Probleme
💻 Praktische Aufgaben

Journalistische Anwendung

Journalisten verwenden Methoden der Programmierung für unterschiedliche Aufgaben. Meistens geht es jedoch darum, entweder Werkzeuge für die Recherche zu entwickeln oder darum eine Geschichte online aufzubereiten.

• Scraping: Daten aus dem Internet einmalig oder regelmäßig herunterladen. Datenquellen können Webseiten, Datenbanken, APIs oder etwas RSS-Feeds sein.
• Datenanalyse: Um Analysen nachvollziehbar und reproduzierbar zu gestalten, verwenden Datenjournalisten oft Skripte um (große) Daten zu analysieren.
• Recherche-Werkzeuge: Werkzeuge die bei der eigene Recherche helfen. Beispiel: Eine interne Plattformen zum Durchsuchen, Analysieren und Kommentieren von geleakten Dokumenten.
• Longreads: Speziell gestaltet Artikel zum Präsentieren einer großen Recherche oder Geschichte (Leuchturmprojekte) außerhalb des normalen Redaktionssystems.
• Grafiken: Manche Grafiken lassen sich leichter programmieren als händisch zu bauen. Beispiel: Eine Symbolkarte mit hundert Orten und jeweils unterschiedlichen Werten.
• Interaktive Anwendungen: Alle Formen von Rechnern, Quizzes und Spielen im journalistischen Kontext.
• Web-Analytics: Benutzerverhalten auf einer Webseite zu verstehen, um den Erfolg einer interaktiven Umsetzung zu messen und zu verbessern.

Diese Anwendungsbereiche sind vor allem für Datenjournalisten, Grafiker (Visual Journalism) und Newsroom-Entwickler relevant. Außerdem wird das Thema künstliche Intelligenz, oder genauer gesagt Maschine Learning, zunehmend wichtig. Methoden aus diesem Bereich können Journalisten dabei helfen, unstrukturierte Daten wie Dokumente, Bilder oder Videos automatisiert zu analysieren, wie diese Beispielen eindrucksvoll zeigen: Illegaler Bernsteinabbau (Texty) oder Geheime Überwachungsflüge (BuzzFeedNews).

Programmieren lernen

Es gibt viele Gründe dafür programmieren zu lernen. Der Einstieg ist leicht und die Vorteile vielzählig:

1. Effizienter und produktiver arbeiten: Viele zeitraubende Aufgaben lassen sich schnell mit ein paar Zeilen Code lösen oder komplett automatisieren. Das gilt für allem für einfache, sich wiederholende Aufgaben. Work smart, not hard.
2. Besser kommunizieren und zusammenarbeiten: Auch wenn man selbst kein Experte ist, hilft ein grundlegendes Verständnis von Programmierung bei der Kommunikation mit Programmieren, auch wenn es darum geht einzuschätzen, welche Probleme überhaupt durch Software lösbar sind.
3. Verstehen wie Software funktioniert: Mit ein bisschen IT-Wissen wirkt die ganze digitale Welt weniger magisch und hilft dabei kritisch über Algorithmen und wie sie unser Leben bestimmen nachzudenken.
4. Neue Problemlösungsstrategien lernen: Programmieren lernen erfordert ganz neue Problemlösungsstrategien. Die Fähigkeit ein großes Problem in viele kleine Probleme herunterbrechen zu können, ist in vielen Bereichen des Lebens wichtig.
5. Neue Chancen im Job: Eine Programmiersprache zu beherrschen ist mittlerweile eine gefragte Qualifikation im Lebenslauf und kann dabei helfen einen Job zu finden oder sich in seinem bestehenden Beruf weiterzuentwickeln.

Programmieren lernen ist ein Prozess. Dabei geht es vor allem um die stetige Weiterentwicklung der eigenen Fähigkeiten. Dieser Prozess erfordert viel Zeit und ist im Idealfall nie abgeschlossen. Unterm Strich ist Programmieren lernen aber nicht schwerer als eine Fremdsprache oder ein Instrument zu erlernen. Talent ist weniger wichtig als eine hohen Motivation und Spaß am Lernen.

Am besten lernt man Programmieren durch kleine Coding-Projekte. Dabei soll es vorallem darum gehen, am Ende ein fertiges Produkt zu haben. Es ist nicht schlimm, wenn die Qualität des Codes nicht perfekt ist, die Software kleine Fehler (Bugs) hat oder man die Hälfte der Funktionen aus einem anderen Projekt kopiert hat. Projekte fertig zu bekommen ist enorm wichtig für die eigene Motivation.

Web-Seminare und Coding-Plattformen helfen beim Einstieg. Durch kleine Aufgaben wird man Schritt für Schritt an eine Programmiersprache herangeführt. Gute Beispiele für solche Plattformen sind Khan Academy, Codecademy, Code School, Treehouse, FreeCodeCamp, Coursera und Udacity.

Programmieren als Job

Programmieren ist ein Job der sich in den letzten Jahren stark spezialisiert hat. Hier ein kleiner Überblick wo Entwickler im Medienbereich arbeiten:

• Frontend-Entwickler und UI-Entwickler entwickeln vor allem Benutzeroberflächen von Webseiten und Web-Anwendungen. Für diesen Job ist ein grundsätzliches Verständnis von benutzerfreundlicher Gestaltung (Usability) erforderlich, oft geschieht die Entwicklung in enger Zusammenarbeit mit Designern.
• App-Entwickler (Mobile Developer) entwickeln vor allem Apps für Smartphones (Android und Apples iOS). Dabei geht es vor allem um Usability und Leistungsoptimierung, da mobile Endgeräte meistens sehr beschränkte Ressourcen haben.
• Backend-Entwickler kümmern sich um die Funktionalität einer Anwendung, welche meist durch Dienste die auf irgendwelchen Servern laufen bereitgestellte werden. Der Job erfordert meist eine enge Absprache mit den Frontend-, App- und gegebenfalls Datenbank-Entwicklern.
• Dev-Ops (Developer Operations) verwalten die Server und teilweise auch die Netzwerkinfrastruktur eines Unternehmens. Meist sind sie eine Art Dienstleister für alle anderen Entwickler die auf funktionierende Server angewiesen sind.
• Data Scientist sind meistens Entwickler mit einen Statistikhintergrund. Diese Fähigkeiten sind für den Bereich Datenjournalismus wichtig, aber auch wenn es um Medienforschung, Sales oder Business Intelligence geht.

Eher seltener im Medienbereich anzutreffen sind folgende Berufe:

• Desktop-Entwickler entwickeln Software für Desktop-Computer, beispielsweise Office-Anwendungen, Grafik- oder Schnittprogramme. Die meisten Medienunternehmen kaufen solche Programme ein, statt sie selbst zu entwickeln.
• Game Developer entwickeln Spiele. Diese Aufgabe kann sehr kreativ sein, aber auch sehr herausfordernd, wenn es beispielsweise um die Entwicklung von leistungsstarken Grafik- und Physikmodellen geht.
• Datenbank-Entwickler kümmern sich um das Speicher und langfristiges Archivieren von Daten. Dabei geht es viel um Persistenz, Sicherheit und Geschwindigkeit. In kleineren Unternehmen wird dieser Job oftmals durch Backend-Entwickler erledigt.
• Embedded-Entwickler: beschäftigen sich vor allem mit der Entwicklung und Programmierung von (Mikro-)controllern, wie sie im Maschinenbau, der Automobil- oder Flugzeugbauindustrie und in viele anderen Branchen verwenden werden.
• Experten-Entwickler sind beispielsweise Wirtschaftsinformatiker, Bioinformatiker und Geoinformatiker sind in Bereichen tätig, in denen bestimmtes Fachwissen gefragt wird.

Unterschiedliche Programmiersprachen

Wikipedia zählt über 700 verschieden Programmiersprachen. Davon sind aber die wenigsten tatsächlich relevant. Mittlerweile habe sich ungefähr 15 Programmiersprachen durchgesetzt, welche bei den meisten Projekten zum Einsatz kommen. Es gibt verschieden Möglichkeiten Programmiersprachen in Kategorien einzuordnen. Hier ein Auswahl populärer Programmiersprachen nach Anwendungsfall:

• Frontend-Entwicklung: JavaScript, (HTML), (CSS)
• Backend-Entwicklung: JavaScript, Python, Ruby, Java, PHP, Scala, Go
• Desktopanwendung: C++, C#, Objective–C, Java, Python
• Mobile Entwicklung: Swift, Java, C#
• Spieleentwicklung: C++, C#
• Datenanalyse: R, SAS, Matlab

HTML und CSS sind streng genommen keine Programmiersprachen, da sie sich nicht für die Formulierung von logischen Anweisungen eignen. HTML ist eine Auszeichnungssprache und CSS ist eine Stylesheet-Sprache. Trotzdem sind beide Sprache ein wichtige Grundlage für alle Menschen die sich mit Web-Entwicklung beschäftigen.

Mittlerweile ist es sehr selten, dass Unternehmen nur auf eine Programmiersprache setzen. Durch Containerlösungen und Virtualisierung können mittlerweile unterschiedeliche Programmiersprachen parallel eingesetzt werden. Das ist durchaus sinnvoll, da jede Programmiersprache ihre eigenen Stärken hat.

Für Journalisten sind jedoch vor allem fünf Programmiersprachen relevant:

• JavaScript wird in Kombination mit HTML und CSS für die Entwicklung von interaktiven Webseiten, Grafiken und Anwendungen im Internet verwendet. Außerdem kann man mit JavaScript (Node.js) auch einfach Backendend-Anwendungen entwickeln.
• Python ist eine universelle Programmiersprache, welche gerne für das Scrapen, Analysieren und Aufbereiten von Daten verwenden wird. Mit dem populäres Framework Django können außerdem komplexe Web-Anwendungen entwickelt werden. Python ist einfach zu lernen und einfach zu lesen.
• Ruby ist ähnlich wie Python für verschieden Aufgaben im Bereich Datenverarbeitung geeignet. Außerdem wir Ruby on Rails gerne für die Entwicklung von großen Web-Anwendungen verwendet.
• PHP ist eine ältere Programmiersprache und findet sich oft in CMS-Lösungen wie Wordpress.
• R eignet sich vor allem für statistische Analysen und das Erstellen einfacher Diagramme und Karten.

📖 Learneroo: The Different Programming Languages
📖 GeeksForGeeks: Top 10 Programming Languages of the World

Code-Editor

Visual Studio Code ist ein kostenloser Editor, der viele Programmiersprachen unterstützt und mit Plugins erweitert und angepasst werden kann.

Hier eine kleine Installationsanleitung für Windows-PC ohne Administratorrechte:

1. Visual Studio Code hier herunterladen (Windows, 64 bit, Zip)
2. Zip-Datei in einen Ordner VSCode entpacken
3. Im Ordner VSCode einen neuen Ordner data erstellen (Portable-Modus)
4. Code.exe ausführen, um den Editor zu starten

Um den Editor optimal nutzen zu können, sollten man noch ein paar Plugins (extensions) installieren:

• ESLint: Fehlerüberprüfung für JavaScript-Code
• HTMLHint: Fehlerüberprüfung für HTML
• Prettier: Code richtig formatieren und einrücken
• EditorConfig: Einstellungen für den Editor aus Datei laden
• Live Server: kleiner Web-Server

Sogenannten Linter helfen dabei, Fehler im Code frühzeitig zu erkennen. Das erspart viel Ärger und Arbeit bei der Fehlersuche.

💡 Es gibt in Visual Studio Code vor allem eine wichtige Tastenkombination: Strg + Shift + P öffnet das Befehlsmenü, über das man schnell häufig genutzte Funktionen aufrufen kann. So muss man sich keine hundert Tastenkombinationen merken, sondern kann einfach eingeben, was man gerne tun möchte.

Weitere gute Code-Editoren sind Sublime Text, Notepad++, Atom, Coda und Brackets.

HTML

HTML (Hyper Text Markup Language) ist keine Programmiersprache im engere Sinne, sondern eine Auszeichnungssprache. Es beschreibt und definiert den Inhalt einer Webseite zusammen mit dem grundlegenden Layout der Webseite. HTML besteht aus einer Reihe von Elementen, sogenannte Tags, welche dazu verwenden werden, um bestimmte Inhalte wie beispielsweise Überschriften, Absätze oder Bilder einzubinden.

💻 Übung 1: Einfache HTML-Seite bauen
💡 Lösung 1: Webseite über die afrikanische Schwarzfußkatze

Grundstruktur eine Seite

Hier ein einfaches Beispiel für die Grundstruktur einer Seite mit Titel, Überschrift und einem Textabsatz:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>Titel der Webseite</title>
  </head>

  <body>
    <h1>Überschrift</h1>
    <p>Paragraph mit normalem Fließtext</p>
  </body>
</html>

Der <html>-Tag umschließt alle Inhalte der Seite. Mit dem Attribut lang kann zudem die Hauptsprache einer Seite festgelegt werden.

Das <head>-Element einer Seite enthält Information zu einer Seite, welche aber nicht unbedingt angezeigt werden. An dieser Stelle werden Meta-Informationen (für Social Media und SEO) eingetragen, Grundeinstellungen festgelegt und Skripte (JavaScript und CSS) eingebunden.

Im <body>-Element finden sich die eigentlichen Inhalte einer Seite wie Texte, Bilder oder Videos.

Elemente

HTML unterstützt zur Zeit etwa 130 verschiedene Elemente. In der Praxis braucht man aber meistens nur einen kleinen Teil davon. Im Folgenden werden nur eine Handvoll Elemente vorgestellt, die man als Einsteiger braucht um ein einfache Webseite zu bauen.

Grundsätzlich besteht ein Element aus dem Element-Tag und bei bestimmten Elementen zusätzlich noch aus verschiedenen Attributen und Werten. Hier ein Beispiel für ein Bild-Tag <img> mit zwei Attributen src und alt:

<img src="image.jpg" alt="Beispielbild" />

src ist das sogenannte Attribut und image.jpg der Wert. Zusammen geben sie an wo sich das Bild befindet, welches eingebunden werden soll. Das Attribut alt ist die Bildbeschreibung, welche für die Barrierefreiheit wichtig ist und auch dann angezeigt wird, wenn das Bild nicht geladen werden kann.

<img> gehört zu den Elementen, welche keinen schließenden Tag benötigen. Davon gibt es aber sehr wenige. Die wichtigsten sind: <img>, <input>, <br>, <hr>, <meta> und <link>.

Die meisten Elemente benötigen einen schließenden Tag. Ein Beispiel dafür ist das <a>-Element, welches für Links (Anchor) verwendet wird. Hier verwenden wir das <a>-Element innerhalb eines <p>-Paragraphen. Das Verschachteln von unterschiedlichen Elementen ist typisch für HTML:

<p>
  Mehr Informationen zum Thema HTML gibt es auf der
  <a href="https://developer.mozilla.org/">MDN-Webseite</a>.
</p>

Der <a>-Tag umschließt den Linktext MDN-Webseite. Das Attribut href gibt an, wohin der Link führen soll. Weiter unten gibt es mehr Informationen zur Verwendung von Links. Welche Elemente es gibt und welche Attribute diese besitzen, lässt sich auf den Seiten des Mozilla Developer Networks nachschlagen: 📖 HTML Element Reference

⚠️ Fehlende schließende Tags sind gerade für Einsteiger eine häufige Fehlerquelle und können das Layout einer Seite zerschießen. Das Problem wird dadurch verstärkt, dass der Browser selbstständig versucht ungültiges HTML zu reparieren und offene Tags wieder zu schließen. Im Zweifelsfalls hilft es, das eigene HTML auf nicht geschlossenen Tags hin zu überprüfen. Ein gute Code-Editor kann dabei helfen, solche Fehler frühzeitig zu erkennen.

IDs und Klassen

Es gibt zwei spezielle Attribute die auf jedes Element angewendet werden können: id und class. IDs und Klassen sind essenzielle Konzepte um Elemente eindeutig identifiziert zu machen. Dies ist vor allem in Verbindung mit CSS und JavaScript relevant, wo man einen bestimmten Style oder eine bestimmte Funktionalität nur auf bestimmte Argumente anwenden möchte. IDs dürfen jeweils nur einmal vergebene werden, Klassen mehrfach. Hier ein Button mit einer ID, der genau eine Aktion auslöst:

<button id="submit">Abschicken</button>

Im Gegensatz dazu werden Klassen für Elemente verwendet, welche den gleichen Style oder die gleiche Funktion haben sollen:

<ul>
  <li class="list-item">Gemüse einkaufen</li>
  <li class="list-item">Fahrrad reparieren</li>
  <li class="list-item">Zahnarzttermin vereinbaren</li>
</ul>

Ein Element kann auch mehrere Klassen haben. In diesem Fall dient beispielsweise die Klasse list-item nur dazu das Element zu stylen. Die Klasse removable kann hingegen einen funktionelle Aspekt haben, um beispielsweise zu ermöglichen, dass der Listeneintrag gelöscht werden kann:

<ul>
  <li class="list-item removable">Gemüse einkaufen</li>
  <li class="list-item removable">Fahrrad reparieren</li>
  <li class="list-item removable">Zahnarzttermin vereinbaren</li>
</ul>

In CSS und JavaScript wählt man IDs jeweils mit einer Raute aus #id und Klassen mit einem Punk .class.

CSS-Beispiel:

#submit {
  background: red;
}

.list-item {
  color: green;
}

JavaScript-Beispiel:

// Einen Button nach ID auswählen
document.querySelector("#submit");

// Alle Listeneinträge nach Klasse auswählen
document.querySelectorAll(".removable");

Text

Gerade für Journalisten sind dies die wohl wichtigten HTML-Elemente. Grundsätzlich besteht:

• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Überschriften in absteigender Hierarchie und Textgröße. Eine Hauptüberschrift ist meistens <h1> oder h2, während man für Zwischentitel eher eine h3 verwenden würden.
• <p>: Ein Textabschnitt und damit wohl das am häufigsten verwenden HTML-Element.

Um innerhalb des Texts bestimmte Abschnitte oder Wörter hervorzuheben, gibt es folgenden Auszeichnungselemente:

• <strong> Markiert besonders wichtigen (stark hervorgehobenen) Text und wird meistens fettgedruckt dargestellt.
• <em> Steht für hervorgehobenen Text (emphasis) und wird standardmäßig kursiv dargestellt.

Ein Beispiel:

<h1>Überschrift</h1>
<p>Paragraph mit normalem Fließtext und einer <strong>Hervorhebung<strong></p>

💡 Meistens sind drei Überschriftengrößen (<h1>, <h2>, <h3>) völlig ausreichend.

💡 Von der Verwendung der alten Texthervorhebungen <i> (kursiv), <b> (fett) und <u> (unterstrichen) wird abgeraten, da sie keine semantische Bedeutung haben und nur das Aussehen eine Textabschnitts beeinflussen.

Links

Der <a>-Tag bezeichnet einen Hyperlink , der auf eine andere Seite oder einen Anker innerhalb der Seite verweist, angegeben durch das href-Attribut.

Ein Beispiel für einen Link:

<p>
  Mehr Informationen zum Thema HTML gibt es auf der
  <a href="https://developer.mozilla.org/">MDN-Webseite</a>.
</p>

Ein Beispiel für einen Anchor:

<p>
  Mehr Informationen zum Thema Anker erfahren unter dem Abschnitt
  <a href="#anchor">Anker</a>.
</p>

<p id="anchor">
  Anker sind eine großartige Möglichkeit um Inhalte auf einer Seite
  untereinander zu verlinken.
</p>
<p></p>

Anker beziehen sich immer auf das id-Attribut eines Elements und beginnen mit einer Raute #.

💡 Oft sieht man auch das Attribut target="_blank". Dieses dient dazu einen Link in einem neuen Fenster oder Tab zu öffnen. Grundsätzlich wird aber von der Verwendung abgeraten, da der Benutzer selbst entscheiden soll, wo er einen Link öffnet. Ist man aber auf die Verwendung von target="_blank" angewiesen, sollte man aus Sicherheitsgründen auf jeden Fall zusätzlich das Attribut rel="noopener" setzen.

📖 CSS-Tricks: When to use target=”_blank”

Bilder

Bilder sind auf einer Webseite mindestens ebenso wichtig wie Texte. In HTML werden Bilder mit dem <img>-Element eingebunden. Dieses benötigt im Gegensatz zu den meisten anderen Elementen keinen schließenden Tag und sollte immer ein ein src- und ein alt-Attribut besitzen.

Ein Beispiel:

<img src="image.jpg" alt="Beispielbild" />

Das alt-Attribut ist der Alternativtext eines Bildes. Suchmaschinen benutzen dieses Attribut, um den Bildinhalt zu erkennen, da die Bilddateien selbst in der Regel nicht direkt ausgelesen werden können. Für sehbehinderte Nutzer trägt das alt-Attribut zur Barrierefreiheit bei. Dadurch lassen sich Webseiten mit einem Screenreader vorlesen.

Bilder lassen sich mit dem src-Attribut aus verschiedenden Quellen laden. Im Beispiel oben wird das Bild aus dem Hauptverzeichnis der Webseite geladen, wo sich auch die index.html-Datei befindet. Oftmals werden Bilder jedoch in einem Unterordner images (oder so ähnlich) gespeichert. In diesem Fall muss das src-Attribut entsprechend angepasst werden.

<img src="images/image.jpg" alt="Beispielbild" />

Bilder können jedoch auch direkt von anderen Webseiten geladen werden:

<img
  src="https://de.wikipedia.org/static/images/project-logos/dewiki.png"
  alt="Wikipedia-Logo"
/>

Die Größe und Position eine Bildes lassen sich über CSS-Regeln definieren. Für Bilder ist das Thema Responsivität sehr wichtig. Dabei geht es darum, dass sich ein Bild an die verschiedenen Bildschirmgrößen (Smartphone, Tablet, Desktop-Computer) anpasst.

💡 Die Dateigröße von Bildern trägt maßgeblich zur Gesamtgröße und damit auch Ladezeit einer Webseite bei. Daher empfiehlt es sich die Bilder vorher auf die maximal notwendige Auflösung zu verkleinern und im JPEG-Format (85 bis 95 % Kompression) abzuspeichern.

📖 MDN: Images in HTML
📖 MDN: Responsive Images

Listen

Grundsätzlich gibt es zwei Arten von Aufzählungen:

• <ol>: geordnete Liste, bei der die Einträge eine bestimmte Reihenfolge haben müssen. Hier wird jedem Listeneintrag eine Zahl vorangestellt.
• <ul>: Liste ungeordneter Einträge mit Bullet-Points.
• <li>: Kennzeichnet einen Listeneintrag innerhalb einer Liste

Hier ein Beispiel für eine ungeordnete Liste:

<ul>
  <li>Gemüse einkaufen</li>
  <li>Fahrrad reparieren</li>
  <li>Zahnarzttermin vereinbaren</li>
</ul>

💡 Listen werden auch gerne dafür eingesetzt, um eine Seitennavigation zu bauen. Das Aussehen einer Liste kann dabei durch CSS stark verändert werden.

Tabellen

Tabellen sind nützliche Helfer um Daten und Informationen strukturiert darzustellen. Eine Tabelle besteht immer aus mehreren verschachtelten HTML-Elementen:

• <table>: Markiert eine Tabelle, d.h. Daten mit mehr als einer Dimension.
• <tr>: Steht für eine Zeile mit Tabellenzellen.
• <td>: Kennzeichnet eine einzelne Tabellenzelle.
• <th>: Kennzeichnet eine Tabellenzelle mit einer Beschriftung.

Diese zusätzliche Elemente helfen dabei die Tabelle inhaltlich zu strukturieren, sind aber nicht zwingend notwendig:

• <tbody>: Steht für die Spalten, die die eigentlichen Daten einer Tabelle enthalten.
• <thead>: Markiert die Gruppe der Tabellenzeilen, die die Beschriftungen der Tabellenspalten enthalten.
• <tfoot>: Markiert die Gruppe der Tabellenzeilen, die die Zusammenfassungen der Tabellenspalten enthalten.

Ein Beispiel für eine dreispaltige Tabelle mit vier Zeilen:

<table>
  <tr>
    <th>Vorname</th>
    <th>Nachname</th>
    <th>Alter</th>
  </tr>
  <tr>
    <td>Philipp</td>
    <td>Primus</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Oskar</td>
    <td>Optimus</td>
    <td>27</td>
  </tr>
  <tr>
    <td>Marlene</td>
    <td>Maximus</td>
    <td>22</td>
  </tr>
</table>

Daraus entsteht folgende Tabelle:

💡 HTML-Tabellen können auch mit dem praktischen Tables Generator online erstellt werden.

📖 MDN: Table Element

Formulare

Formulare und die dazugehörigen Elemente sind Grundlage um Benutzereingaben zu verarbeiten. Formulare sind nicht nur im Bereich E-Commerce wichtig sondern auch um interaktive Webprojekte zu realisieren. Hier eine Auswahl der wichtigsten Eingabeelemente:

• <form>: Markiert ein Formular. Formulare bestehen typischerweise aus einer Reihe von Kontrollelementen, deren Werte zur weiteren Verarbeitung an einen Server übertragen werden.
• <label>: Kennzeichnet die Beschriftung für ein Formular-Kontrollelement (z.B. Texteingabefelder).
• <input>: Steht für ein Feld für Benutzereingaben eines bestimmten Typs. Der Typ (Radiobutton, Ankreuzfeld, Texteingabe, etc.) wird anhand des type-Attributs angegeben.
• <button>: Markiert einenButton .
• <select>: Kennzeichnet ein Kontrollelement, mit dem aus einer Reihe von Optionen ausgewählt werden kann.
• <datalist>: Steht für eine Sammlung vordefinierter Optionen für andere Kontrollelemente.
• <option>: Steht für eine Auswahloption innerhalb eines <select>-Elements, oder einen Vorschlag innerhalb eines <datalist>-Elements.
• <progress>: Ein Element zur Fortschrittsanzeige einer bestimmten Aufgabe.

Ein einfaches Beispiel für Kommentarfeld:

<form id="comment" name="comment" action="/save-comment" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail" />
  </div>
  <div>
    <label for="msg">Nachricht:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
  <div class="button">
    <button type="submit">Kommentar speichern</button>
  </div>
</form>

In diesem Beispiel gehen wir davon aus, dass der Server einen Endpunkt /save-comment bereitstellt, der die Benutzereingaben entgegennimmt und speichert. Das ist aber nicht immer der Fall. Alternativ kann auch eine JavaScript-Funktion verwendet werden, um die Benutzereingeben zu verarbeiten.

Dazu müssen die action- und method-Attribute des Formulars im HTML entfernt werden:

<form id="comment"></form>

Um eine Aktion auszulösen, wenn der Submit-Button geklickt wird, muss ein Event-Handler registriert werden:

<script>
  document.querySelector("#comment").addEventListener("submit", handleSubmit);

  function handleSubmit(e) {
    var form = e.target;

    // Formulardaten auslesen
    var userName = form.querySelector('[name="user_name"]').value;
    var userMail = form.querySelector('[name="user_mail"]').value;
    var userComment = form.querySelector('[name="user_comment"]').value;

    // Formulardaten ausgeben
    console.log(userName, userMail, userComment);

    // Verhindern, dass die Seite neu geladen wird
    e.preventDefault();
    return false;
  }
</script>

💡 Sobald es um das Verabeiten von Benutzereingaben geht, kommt man fast nicht mehr darum herum JavaScript zu verwenden. Gute Formulare zu bauen ist sehr aufwendig, vor allem wenn es um darum geht das – standardmäßig sehr hässliche – Design der Eingabeelemente anzupassen. Hier empfiehlt es sich eine Front-End-Bibliothek wie Bootstrap, Foundation, Bulma oder UIKit einzusetzen.

📖 MDN: Form Guide
📖 FreeCodeCamp: A step-by-step guide to getting started with HTML forms
📖 Tuts+: Best Form Practices for Beginners

iFrames

iFrames können dazu verwendet werden um Inhalte von einer anderen Webseite einzubetten.

Beispiel für eine eingebettete Karte (OpenStreetMap):

<iframe
  width="640"
  height="360"
  src="https://www.openstreetmap.org/export/embed.html?bbox=11.4071%2C48.0284%2C11.7191%2C48.2326&layer=mapnik"
></iframe>

Beispiel für ein YouTube-Embed:

<iframe
  width="640"
  height="360"
  src="https://www.youtube.com/embed/jpmeWXISU5E?&rel=0&showinfo=0"
  frameborder="0"
  allowfullscreen
></iframe>

💡 Meistens empfiehlt es sich die Breiten- und Höhenangaben in einem iFrame wegzulassen und die Größe über eine CSS-Regel zu definieren. Das ist deutlich flexibler und erlaubt auch prozentuale Größenangeben wie width: 100%;

Mittlerweile verwenden viele Seiten andere Methoden um ihre Inhalte zum Einbetten anzubieten. Hier ein Beispiel für das Einbetten eines Posts von Twitter:

<blockquote class="twitter-tweet" data-lang="de">
  <p lang="en" dir="ltr">
    &quot;Weeks of coding can save you hours of planning.&quot; - Unknown
  </p>
  &mdash; Programming Wisdom (@CodeWisdom)
  <a
    href="https://twitter.com/CodeWisdom/status/1031158088018083841?ref_src=twsrc%5Etfw"
    >19. August 2018</a
  >
</blockquote>
<script
  async
  src="https://platform.twitter.com/widgets.js"
  charset="utf-8"
></script>

📖 MDN: iFrame Element
📖 MDN: Multimedia and Embedding

Abschnitte und Blöcke

Semantische Abschnitte helfen dabei eine Seite logisch zu strukturieren und Suchmaschinen und Screen-Readern Hinweise darauf zugeben, wie wichtig einzelne Abschnitte sind und welche Funktion sie erfüllen.

• <header>: Mit dem <header>-Element wir der Kopfbereich eines Sinnabschnitts ausgezeichnet. Er wird auch für den Kopfbereich der gesamten Website verwendet und enthält üblicherweise das Seitenlogo, einen Slogan und ein <nav>-Menü.
• <nav>: Das <nav>-Element kennzeichnet die Seitennavigation. Meistens ist dies eine Liste interner Links.
• <article>: Abgeleitet von dem Artikel für die Zeitung werden alle in sich abgeschlossenen Inhalte, wie zum Beispiel Beiträge in einem Blog mit dem <article>-Element umfasst.
• <section>: Beschreibt einen thematischen Abschnitt eines Dokuments. Jede <section> sollte daher auch eine Überschrift haben.
• <aside>: Inhalte, die nicht zum Hauptinhalt einer Seite zählen, werden mit dem <aside>-Element ausgezeichnet. Mit <aside> kann beispielsweise eine Sidebar auf der Website eingerichtet werden.
• <footer>: Die Informationen im Fußbereich der Website oder eines Sinnabschnitts werden mit dem <footer>-Element umschlossen.
• <main>: Definiert den Hauptinhalt der Seite. Es ist nur ein <main> Element pro Seite zulässig.

Ein Beispiel:

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Titel der Webseite</title>
  </head>
  <body>
    <header>
      <h1>Überschrift für die gesamte Webseite</h1>
      <nav>
        <ul>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </nav>
    </header>
    <article>
      <h2>Überschrift des ersten Artikels</h2>
      <p>Text des ersten Artikels</p>
    </article>
    <article>
      <h2>Überschrift des zweiten Artikels</h2>
      <p>Text des zweiten Artikels</p>
    </article>
    <aside>
      <h3>Überschrift Sidebar</h3>
      <p>Text in der Sidebar</p>
    </aside>
    <footer>
      <h3>Überschrift Footer</h3>
      <p>Text im Footer</p>
    </footer>
  </body>
</html>

Sehr häufig sieht man auch das unspezifische Blockelement <div>. Dieses wird für Abschnitte verwendet, welche keine inhaltliche Bedeutung haben. Oftmals dient es vor allem dazu Container zu erstellen, die dann über CSS gestylt werden können.

💡 Semantisches HTML ist die Grundlage einer barrierefreien Webseite. Gerade Menschen mit Sehbehinderungen nutzen oftmals technisches Hilfsmittel wie Screen-Reader, welche auf semantische Auszeichnungen, aber auch sinnvolle Bildbeschreibungen, angewiesen sind.

📖 MDN: HTML Dokumentation
📖 Kulturbanause: HTML-Elemente und Semantik

Meta-Tags

Meta-Tags sind die Grundlage für eine gute Suchmaschinen-Optimierung (SEO). Sie helfen den Suchmaschinen dabei zu verstehen, was der Kerninhalt einer Webseite ist. Außerdem ermöglichen sie, dass in sozialen Netzwerken wie Twitter oder Facebook eine Vorschau des Webseiteninhalts, meistens mit Bild, angezeigt werden können (Beispiel).

Die Meta-Tags werden im <head>-Bereich einer Webseite eingebunden:

  <meta name="author" content="Steffen Kühne" />
  <meta name="title" content="Informationen zur Schwarzfußkatze" />
  <meta name="description" content="Die Schwarzfußkatze ist die kleinste afrikanische Katze. Hier erfahren Sie alles über ihr Aussehen, ihren Lebensraum und warum sie bedroht ist." />
  <meta name="keywords" content="Schwarzfußkatze, kleinste Katze, Afrika, Aussehen, Lebensraum, Verbreitung, bedroht, Schwarze Liste" />

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@stekhn" />
  <meta name="twitter:creator" content="@stekhn" />
  <meta name="twitter:title" content="Informationen zur Schwarzfußkatze" />
  <meta name="twitter:description" content="Die Schwarzfußkatze ist die kleinste afrikanische Katze. Hier erfahren Sie alles über ihr Aussehen, ihren Lebensraum und warum sie bedroht ist." />
  <meta name="twitter:url" content="https://schwarzfusskatze.info/" />
  <meta name="twitter:image" content="https://schwarzfusskatze.info/vorschau.jpg" />

  <meta property="og:type" content="article" />
  <meta property="og:locale" content="de_DE" />
  <meta property="og:site_name" content="BR" />
  <meta property="og:title" content="Informationen zur Schwarzfußkatze" />
  <meta property="og:description" content="Die Schwarzfußkatze ist die kleinste afrikanische Katze. Hier erfahren Sie alles über ihr Aussehen, ihren Lebensraum und warum sie bedroht ist." />
  <meta property="og:url" content="https://schwarzfusskatze.info/" />
  <meta property=" og:image" content="https://schwarzfusskatze.info/vorschau.jpg" />

📖 metatags.io: Metatags erstellen
📖 CSS-Tricls: The Essential Meta Tags for Social Media

Favicons

Als Favicon wird das kleine Symbol neben dem Titel in der Kopfzeile eines Browsers oder eines Browser-Tab bezeichnet. Favicons sind ein wichtiges Branding-Element und helfen Benutzern dabei eine Webseite schnell wiederzufinden.

Leider gibt es nicht den einen Standard, wie man Favicons auf einer Seite einbinden. Verschiedene Geräte- und Browserhersteller verwenden verschieden Größenverhältnisse und Bildformate.

Hier ein einfaches Beispiel für Favicons, welche in den meisten modernen Browsern funktionieren sollte. Die Meta-Tags werden im <head>-Bereich einer Webseite eingebunden:

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

📖 Favicon Generator: Create Favicons for different devices
📖 CSS-Tricks: How to Favicon in 2021

CSS

CSS (Cascading Style Sheets) ist eine Beschreibungssprache, die das Design einer Webseite bestimmt. Während HTML genutzt wird, um die Struktur und Semantik Ihrer Inhalte zu definieren, dient CSS dazu, deren Erscheinung und Layout zu beeinflussen. So lässt sich CSS beispielsweise nutzen, um die Schriftarten, Farben, Größen und räumliche Abstände der Inhalte zu verändern. Außerdem lassen sich Inhalte in mehreren Spalten anzuordnen oder Animationen und andere dekorative Merkmale hinzuzufügen.

💻 Übung 2: Einfache Seite mit CSS designen
💡 Lösung 2: Webseite über die afrikanische Schwarzfußkatze

Einbinden

CSS kann auf deiner eigene Seite auf zwei Wegen eingebunden werden. Für kleine Webprojekte kann man CSS-Regel direkt in einem <style>-Element, meistens im <head>-Bereich einer Seite, definieren:

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Titel der Webseite</title>

    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
      }

      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Überschrift</h1>
  </body>
</html>

Für größere Projekte empfiehlt es sich jedoch die CSS-Regel in einer eigenen CSS-Datei zu schreiben und diese über einen link-Tag einzubinden:

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Titel der Webseite</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <h1>Überschrift</h1>
  </body>
</html>

💡 Man kann <style> und <link>-Tags auch an anderer Stelle im HTML verwenden. Durch das Einbauen im <head>-Bereich wird jedoch sichergestellt, dass die Styles geladen sind, bevor die Seite dargestellt wird. Das ist oftmals wichtig, wenn man auf darauf angewiesen ist, dass ein Element eine bestimmte Höhe hat, bevor man damit arbeitet.

Aufbau

Jede CSS-Regel besteht aus einem (oder mehreren) Selektor und meistens mehreren Eigenschaften und Werten. Der Selektor bestimmt, welche Elemente beeinflusst werden und die Eigenschaften und Werte wie die Elemente aussehen sollen. Ein Beispiel

p {
  font-size: 1.2em;
  color: red;
  margin-top: 1em;
  margin-bottom: 2em;
}

Selektoren

Selektoren dienen dazu bestimmte Elemente oder Gruppen von Elementen auszuwählen, um sie zu stylen. Ein wichtiges Konzept dabei ist Spezifität. Spezifität bedeutet, dass wenn es mehrere Style-Regeln für ein Element gibt, wird die jeweils spezifiste Regel angewandt. Universalselektor sind am unspezifisten, ID-Selektoren und Inline-Styles am spezifisten und daher am stärkesten. Hier die Selektoren in aufsteigender Spezifität:

• Universalselektor: *
• Typselektoren: element
• Klassenselektoren: .class
• Attributselektoren: [attribute] oder [attribute="value"]
• Pseudoklassen: element::pseudo
• ID-Selektoren: #id
• Inline-Styles: <element style>

Um das ganze noch ein bisschen komplizierter zu machen, kann man Selektoren auch miteinandern kombinieren:

• A, B: Es wird A und B selektiert.
• A B: Es wird B (child) selektiert, welches in der Hierarchie irgendwo unter A (parent) liegt

Eher seltener zum Einsatz kommen diese Selektorkombinationen:

• A > B: Es wird B (direct child)selektiert, welches in der Hierarche unmittelbar unter A (parent) liegt.
• A ~ B: Es wird B (sibling) selektiert, welches in der Hierarchie neben A (sibling) liegt.
• A + B: Es wird B (direct sibling) selektiert, welches in der Hierarchie direkt neben A (sibling) liegt.

Um die grundlegende Konzepte zu verdeutlichen, erstellen wir drei unterschiedliche Listen. Diese sollen gestylt werden.

<ul id="todo-list">
  <li class="list-item">Gemüse einkaufen</li>
  <li class="list-item">Fahrrad reparieren</li>
  <li class="list-item done">Zahnarzttermin vereinbaren</li>
</ul>

<ul id="name-list">
  <li class="list-item">Philipp</li>
  <li class="list-item">Oskar</li>
  <li class="list-item">Marlene</li>
</ul>

<ul>
  <li>München</li>
  <li>Hamburg</li>
  <li>Berlin</li>
</ul>

Schriftart für die ganze Webseite setzen:

body {
  font-family: Arial, Helvetica, sans-serif;
}

Für alle Listen das Aufzählungszeichen und den Innenabstand ändern:

ul {
  list-style-type: square;
  list-style-position: inside;
  padding: 0;
}

Alle Elemente mit Klasse .list-item bekommen einen graue Textfarbe und einen größeren Außenabstand.

.list-item {
  margin: 1em 0;
  color: grey;
}

Die Liste mit der ID #todo-list bekommt einen hellblauen Hintergrund:

#todo-list {
  background: aliceblue;
}

Die Liste mit der ID #todo-list bekommt einen hellblauen Hintergrund:

#name-list {
  background: antiquewhite;
}

Die Listeneinträge der ToDo-Liste bekommen eine blaue Textfarbe. Die ursprüngliche Farbe Grau wird automatisch überschrieben. Hier könnte man auch #todo-list li schreiben.

#todo-list .list-item {
  color: darkblue;
}

Einträge mit der in der ToDo-Liste mit der Klasse done werde grün eingefärbt. Der vorher gesetzte Farbwert blau wird nochmals überschrieben. Auch hier könnte man auch #todo-list li.done schreiben.

#todo-list .list-item.done {
  color: darkgreen;
}

💡 Man kann einzelne CSS-Regeln auch mit dem Attribut !important erzwingen .error { color: red !important; }. Das ist aber in den wenigsten Fällen empfehlenswert. Ist man häufiger darauf angewiesen !important zu verwenden, deutet das auf schlecht strukturiertes HTML oder CSS hin.

📖 MDN Combinators and selector lists

Box-Model

Das CSS-Boxmodell ist die Grundlage für das Layout im Web. Jedes Element wird als rechteckige Box dargestellt. Jedes Element kann einen Innenabstand (padding), einen Rahmen (border) und einen Außenabstand (margin) haben. Diese Werte ergeben zusammen mit der intrinsischen Höhe/Breite die absolute Höhe/Breite eines Elements:

+-----------------------------------------------------------------+
|                             margin                              |
|    +-------------------------------------------------------+    |
|    |                        border                         |    |
|    |    +---------------------------------------------+    |    |
|    |    |                   padding                   |    |    |
|    |    |    +-----------------------------------+    |    |    |
|    |    |    |              element              |    |    |    |
|    |    |    |                                   |    |    |    |
|    |    |    |                                   |    |    |    |

Als Beispiel dient hier eine Container für eine Infobox:

<section class="info-box">
  <p>Eine Absatz mit informativem Inhalt</p>
</section>

Die Breite des Containers wird auf 100% der Seitenbreite gesetzt. Die Höhe wird nicht gesetzt und daher von der Größe des Inhalts (viel Text, wenig Text) bestimmt. Außerdem bekommt der Container einen Außenabstand, einen farbigen Rand und Außenabstand von jeweils 20px.

.info-box {
  width: 100%;
  margin: 20px;
  padding: 20px;
  border: 20px solid red;
}

Shorthand-Eigenschaften

Vor allem wenn man mit Größenangaben arbeiten, erleichtern einem sogenannte Shorthand-Properties die Arbeit ungemein. Grundsätzlich kann man die Außenabstände eine Containers einfach einzeln angeben:

.info-box {
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
}

Wenn diese Werte aber gleich sind, kann man aber auch folgende Abkürzung verwenden, um die Werte für alle Seiten auf einmal zu setzen:

.info-box {
  margin: 20px;
}

Wenn jedoch der untere und obere Abstand größer sein soll, kann man dies mit folgender Abkürzung erreichen:

.info-box {
  margin: 40px 20px;
}

Wenn der unter Abstand noch größer sein soll, kann man diese mit der dreifachen Shorthand-Property festlegen:

.info-box {
  margin: 40px 20px 60px;
}

Man kann auch alle Abstände mit nur einer Eigenschaft setzten:

.info-box {
  margin: 40px 20px 60px 10px;
}

Für die Eigenschaften margin und padding gibt es also vier verschieden Shorthand-Properties:

• margin: (top, right, bottom, left);
• margin: (top, bottom) (right, left);
• margin: top (right, left) bottom;
• margin: top right left bottom;

💡 Es gibt noch viele weitere CSS-Eigenschaften (background, font, box-shadow), welche bestimmte Shorthand-Properties unterstützen. Gerade am Anfang aber sollte man eher sparsam damit umgehen.

📖 MDN Shorthand Properties

Größenangaben

In CSS gibt es verschiedene Arten Größenangaben zu definieren. Um Layouts genau umzusetzen und leicht anpassbar zu entwickeln, ist es wichtig die unterschiede zwischen den verschiedenen Einheiten zu verstehen.

• px: Pixel ist die einfachste, aber auch unflexibelsten Einheit, welche man meistens eher vermeiden sollte. Diese liegt vor allem daran, dass jeder Benutzer vor einen unterschiedlich großen Bildschirm sitzt und es schwer ist für jede Konstellation die richtige Pixelgröße zu finden.
• %: Prozentangaben sind flexibel und vor allem für Größenangaben bei Bildern, Containern und Spalten geeignet
• em: Eine beliebte relative Größenangaben die meisten für alles verwendet wird, was irgendwie mit Typografie zusammenhängt: Schriftgröße, Durchschuss, Abstände etc.
• rem: Funktioniert wie em, nur dass sich rem immer auf die (Schrift-)größe des <body>-Elements bezieht, während sich em immer auf die (Schrift-)größe des Elternelementes (parent) bezieht.
• vh und vw: Eine weiter relative Größeangabe, welche sich auf die Höhe des Benutzerbildschirms (vh) oder die Breite (vw) bezieht. Sehr praktisch für Aufmacherbilder und Container.

Außerdem gibt es die Einheiten pc (Pica) und pt (Punkt), welche aus den Urzeiten des Schriftsetzens kommen und im modernen Webdesign eigentlich keine Relevanz mehr haben.

📖 W3C: CSS-Einheiten

Farbwerte

Genauso wie Größenangaben lassen sich Farbwerte über verschiedenen Einheiten definieren. Hier ist es vor allem nützlich, wenn sich mit der sehr gängigen hexadezimalen Farbdefinition auseinandern gesetzt hat. Die Beispiele benutzen alle den gleich blauen Farbton:

• navy: Es gibt eine Liste an vordefinierten Farbwerten, die alle über ihren jeweiligen Namen verwendet werden können. Sehr praktisch, da einfach im Code zu lesen.
• #000080: Mit der hexadezimalen Farbdefinition lassen sich über 16 Millionen Farben (256^3) darstellen. Die ersten beiden Ziffern geben den Rotwert, die mittleren beiden Ziffern den Grünwert und die letzten beiden Ziffern den Blauwert an. Die Ziffernpaare geben jeweils einen Hexadezimalwert zwischen 00 (0) und FF (255) an. Farbwerte bei den alle Ziffernpaare gleich sind lassen sich auf drei Stellen verkürzen, wie bei diesem Türkiston: #005588 wird zu #058.
• rgb(0, 0, 128): Die dezimale Farbdefinition funktioniert im Prinzip wie die hexadezimalen Farbdefinition und bestimmt den Rot-, Grün- und Blauanteil einer Farbe von 0 bis 255. Aus dem hexadezimalen Wert 80 wird ind dieser Definition der dezimale Wert 128.
• rgba(0, 0, 128, 0.5): Die dezimale Farbdefinition hat noch einen vierten Parameter der die Transparenz einer Farbe bestimmt. 0 ist durchsichtig, 1 ist undurchsichtig.

📖 MDN: Farben

Layout

Mit CSS kann man Elemente auf einer Webseite auf unterschiedliche Arten anordnen. Hier sind die vier wichtigsten Möglichkeiten:

• Position: Mit der CSS-Eigenschaft position kann man das Verhalten von Elementen in Bezug auf ihre ursprüngliche Position im Dokument steuern. Es gibt fünf verschiedene Einstellungen: static,relative,absolute,fixed und sticky.
• Float: Mit float kann man Elemente neben anderen Elementen positionieren, indem man sie „schwimmen“ lässt. Hierbei wird das Element aus dem normalen Fluss des Dokuments entfernt und rechts oder links neben anderen Elementen positioniert.
• Flexbox: Ermöglicht es, Elemente flexibel in einer Reihe oder Spalte anzuordnen sowie die Größe und Ausrichtung der Elemente festzulegen. Diese Prinzip ist besonders nützlich für mobile Layout, da durch flexible Anordnung fast jede Bildschirmgröße abgedeckt werden kann.
• Grid: Ermöglicht es, Elemente in einem Raster anzuordnen. Hierbei kann man Spalten und Zeilen definieren und die Elemente innerhalb dieses Gitters positionieren. CSS Grid bietet eine hohe Kontrolle über das Layout und ist besonders nützlich für die Anordnung von Elementen auf größeren Geräten wie Desktops.

Jede dieser Methoden hat ihre Stärken und Schwächen und es hängt von den Anforderungen des Projekts ab, welche Methode am besten geeignet ist.

Bücher, Webtexte, Wikipedia und Artikel

Float

Die float-Eigenschaft ermöglicht es Bilder und Textblöcke aus dem Textfluss herauszunehmen und nach links oder rechts zu verschieben. Die Methode ist nur schlecht dazu geeignet aufwendige, mehrspaltige Seitenlayouts zu bauen. Hierfür sollte man immer Flexbox oder Grid verwenden.

Das folgende Beispiel zeigt einen Zitatkasten, welchen wir nach rechts verschieben wollen („ausblocken“). Außerdem folgen drei Absätze Blindtext, um den Effekt von float zu verdeutlichen:

<section class="quote">
  <p>„Ein tiefgründiges Zitat zum Zustand der Welt“</p>
</section>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet.
</p>

<p>
  Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
  orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
  ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
  ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et
  a urna. Ut id ornare felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus.
</p>

Die halbe Breite sorgt dafür, dass der übrige Text den Zitatkasten umfließen kann. Eine größere Schrift und die Hintergrundfarbe helfen dabei, denn Zitatkasten hervorzuheben:

.info-box {
  float: right;
  width: 50%;
  margin: 20px;
  font-size: 2em;
  background-color: lightgray;
}

📖 MDN: Floats

Position

Die CSS-Eigenschaft position gibt die Art der Positionierungsmethode an, die für ein Element verwendet wird. Dabei kann ein Element, ähnlich wie bei float, aus dem normalen Textfluss herausgenommen werden. Folgenden Eigenschaften stehen zur Verfügung:

• static: Standardwert. Das Element ist im normalen Fluss. Die Eigenschaften top, right, bottom oder left haben keine Auswirkungen.
• relative: Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, da an der ursprünglichen Position Platz gelassen wird.
• absolute: Das Element wird aus dem normalen Fluss gelöst und unabhängig verschoben. Dabei können andere Elemente verdeckt werden. Diese verhalten sich so, als ob das Element nicht vorhanden wäre und lassen keinen Platz für das Element.
• fixed: Die Verschiebung orientiert sich am Viewport. Das Element wird aus dem normalen Fluss gelöst und bleibt auch beim Scrollen an seiner fest definierten Position. Beim Drucken wird das Element auf jeder Seite an der positionierten Stelle angezeigt.
• sticky: Eine Mischung zwischen fixed und relative: Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, solange es sich innerhalb des Viewports befindet. Sobald es sich ausserhalb befindet, wird das Element aus dem normalen Fluss gelöst und bleibt so beim Scrollen an seiner fest definierten Position.

Wird ein Elemente mit absolute, fixed oder sticky aus dem normalen Textfluss genommen, muss mit den Eigenschaften top, right, bottom oder left angegeben werden, wo es auf der Seite erscheinen sollen.

Hier ein Beispiel für ein fixierte Navigationsleiste mit drei Menüpunkten die immer oben im Browserfenster angezeigt wird, auch wenn den Benutzer nach unten scrollt:

<nav id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</nav>

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: black;
}

.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 1em;
  text-decoration: none;
}

📖 MDN: Position
📖 MDN: Top, Right, Left, Bottom

Flexbox

CSS Flexbox ist ein Layout-Modell in CSS, das es Entwicklern ermöglicht, flexible Layouts zu entwickeln. Es ermöglicht das Ausrichten, Anordnen und Skalieren von Elementen innerhalb eines Containers.

Um Flexbox zu verwenden, wird einem Container-Element die CSS-Eigenschaft "display: flex" zugewiesen. Von hier aus kann man weitere Eigenschaften wie "justify-content" (Ausrichtung entlang der Hauptachse), "align-items" (Ausrichtung entlang der Querachse) und "flex-wrap" (Zeilenumbruch bei Bedarf) verwenden, um die Kinder-Elemente innerhalb des Containers anzupassen.

Ein Beispiel:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

Diese Einstellungen zentrieren alle Elemente eines Containers sowohl horizontal (justify-content: center) als auch vertikal (align-items: center). Sind zu viele Element in einem Container, dürfen die Elemente in die nächste Zeile umbrechen (flex-wrap: wrap).

Flexbox ist gute Alternative zu CSS Floats und erleichtert das Ausrichten von Elementen im Seitenlayout enorm.

📖 MDN: Flexbox
📖 CSS-Tricks: A Complete Guide to Flexbox

Grid

CSS Grid ist ein weiteres Layout-Modell in CSS, das es Entwicklern ermöglicht, komplexe Layouts mithilfe eines Gestaltungsrasters zu erstellen, in dem Elemente in Zeilen und Spalten positioniert werden können.

Um CSS Grid zu verwenden, wird einem Container-Element die CSS-Eigenschaft "display: grid" zugewiesen. Dann kann man die Größe der Zeilen und Spalten des Rasters definieren, indem man die CSS-Eigenschaften "grid-template-columns" und "grid-template-rows" verwendet. Die Elemente innerhalb des Containers können dann positioniert werden, indem man die Eigenschaften "grid-column" und "grid-row" zuweist.

Zum Beispiel:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
}

.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.item2 {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

In diesem Beispiel wird ein 3-spaltiges Raster mit zwei Zeilen erstellt. Das erste Element (.item1) wird in der linken oberen Hälfte und das zweite Element (.item1) wird in rechten oberen und unteren Hälfte des Rasters platziert.

+------------+------------+
| .item1     | .item2     |
+------------+            |
|            |            |
+------------+------------+

CSS Grid bietet auch fortgeschrittene Funktionen wie gleichmäßige oder ungleichmäßige Spaltenverteilung und automatisches Rasterlayouts. Es ist ein mächtiges Werkzeug für responsive Layouts und komplexe Designs.

📖 MDN: Grids
📖 CSS-Tricks: A Complete Guide to CSS Grid

Media Queries

Media Queries können dazu verwendet werden, um das Design einer Seite abhängig von der Darstellungsgröße zu beeinflussen. Das spielt vor allem für das responsive Webdesign eine große Rolle, da man zum Beispiel in der Smartphone-Darstellung einer Webseite weniger Informationen anzeigen möchte als in der Desktop-Darstellung einer Seite.

In diesem Beispiel wird die Seitenleiste #sidebar ausgeblendet sobald der Seite weniger als 600 Pixel in der Breite zur Verfügung stehen:

@media (max-width: 600px) {
  #sidebar {
    display: none;
  }
}

📖 Wikipedia: Responsive Webdesign
📖 MDN: Media Queries

JavaScript

JavaScript ist die Programmiersprache des Internets. Mit Hilfe von JavaScript können Webseiten interaktiv gestaltet werden. Dazu gehören grundlegende Funktionen wie Buttons, Werte berechnen und das Verarbeiten von Nutzereingaben. Zusammen mit HTML und CSS bildet JavaScript die Grundlage moderner Web-Technologie. Doch mittlerweile kann JavaScript auch für andere Aufgaben verwendet werden. Durch die Laufzeitumgebung V8 und Node.js können mittlerweile auch leistungsfähige Server- und Desktop-Anwendungen mit JavaScript entwickelt werden.

💻 Übung 3: JavaScript-Aufgaben
💡 Lösung 3: Funktionen, Bedingungen, Schleifen

💻 Übung 4: API anbinden
💡 Lösung 4: OpenWeatherMaps-API

💻 Übung 5: Einfaches Ratespiel programmieren
💡 Lösung 5: Rate die Zahl! (Programmablauf)

Einbinden

JavaScript kann auf deiner eigene Seite auf zwei Wegen eingebunden werden. Für kleine Webprojekte kann man den JavaScript-Code direkt in einem <script>-Element schreiben:

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Titel der Webseite</title>
  </head>
  <body>
    <button id="submit">Abschicken</button>
    <script>
      document.querySelector("button#submit").addEventHandler("click", () => {
        console.log("Button wurde geklickt");
      });
    </script>
  </body>
</html>

Für größere Projekte empfiehlt es sich jedoch den JavaScript-Code in eine eigenen Datei zu schreiben und diese über einen <script>-Tag mit src-Attribut einzubinden:

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Titel der Webseite</title>
  </head>
  <body>
    <button id="submit">Abschicken</button>
    <script src="script.js"></script>
  </body>
</html>

Im Gegensatz zu unserem CSS-Beispiel haben wir die Skripte nicht im <head>-Bereich der Seite eingebunden. Das liegt daran, dass unser JavaScript-Code davon abhängt, dass das Element <button> schon erstellt wurde. Das ist jedoch nur sichergestellt, wenn wir unseren JavaScript-Code in der Dokumentenstruktur (DOM) erst nach dem oder den benötigeten Elementen einbauen.

Alternativ kann man den JavaScript-Code so schreiben, dass er erst ausgeführt wird, wenn die ganze Seite geladen wurde:

// Führe die Funktion init aus, wenn die Seite geladen wurde
document.addEventListener("DOMContentLoaded", init, false);

function init() {
  // Hier können wir sicher sein, dass der Button schon erstellt wurde
  document.querySelector("button#submit").addEventHandler("click", () => {
    console.log("Button wurde geklickt");
  });
}

Neues JavaScript

In den letzten Jahren hat sich JavaScript als Sprache stark weiterentwickelt. Das hat auch einige Veränderungen in der Syntax mit sich geführt, so dass neueres JavaScript ein wenig anders aussieht als altes JavaScript

Altes JavaScript (auch ECMAScript 5 oder auch ES5)

var names = ["Philipp", "Andrea", "Sophie"];

var sayHello = function (array) {
  for (var i = 0; i < array.length; i++) {
    console.log("Hallo " + array[i] + ".");
  }
};

sayHello(names);

Neues JavaScript (auch ECMAScript 6, ES6, ES2015, ES2016, ES2017 ...):

const names = ["Philipp", "Andrea", "Sophie"];

const sayHello = (array) => {
  for (let i = 0; i < array.length; i++) {
    console.log(`Hallo ${array[i]}.`);
  }
};

sayHello(names);

Da noch nicht alle Browser das neue JavaScript perfekt beherrschen, braucht man so genannte Transpiler die zwischen den unterschiedlichen JavaScript-Version hin und her übersetzen können. Der bekannteste Transpiler um neues JavaScript in altes JavaScript zu übersetzen ist Babel. Um altes JavaScript in neues JavaScript zu übersetzen gibt es Lebab (Babel rückwärts geschrieben).

💡 Am einfachsten lässt sich neues JavaScript an den Variablennamen let, const und der Arrow-Funktionen () => {} erkennen.

📖 Ralf S. Engelschall: ECMAScript 6 – New Features

Variablen und Konstanten

Variablen let und Konstanten const sind notwendig um Werte zu speichern und später wieder aufzurufen. Diese Konzept gibt es in eigentlich jeder Programmiersprache.

Variablen können, nach dem sie erstellt (deklariert wurde), mit einem anderen Wert überschrieben werden.

// Deklaration der Variable
let name = 'Philipp';

// Kann überschrieben werden
name = 'Marlene';

Konstanten können, wie der Name andeutet, nicht überschrieben werden:

// Deklaration der Konstanten
const name = 'Philipp';

// Kann nicht überschrieben werden und führt zu einem Fehler:
// Uncaught TypeError: Assignment to constant variable.
name = 'Marlene';

In altem JavaScript-Code findet man oft noch var-Variablen. Diese funktionieren relativ ähnlich wie let-Variablen, sollten aber nicht mehr verwendet werden. Wo möglich immer const verwenden, für alles andere let.

Datentypen

Datentypen beschreiben die Werte die eine Variable (oder Konstante) annehmen kann. In JavaScript gibt es sieben verschieden Datentypen.

• Boolean: Wahrheitswert true oder false
• Undefined: Nicht zugewiesener Wert undefined.
• Null: Fehlender Wert null. Meistens sollte man jedoch undefined verwenden.
• Number: Zahlenwert, zum Beispiel 25, 12.6251 oder -5
• String: Zeichenkette, zum Beispiel 'I bims, ein String.'. Verwendet einfache (empfohlen) oder doppelte Anführungszeichen.
• Symbol: Unveränderlichen, eindeutiger Wert. Versteht aber niemand.
• Object: ein komplexer Datentyp, im einfachsten Fall aber einfach ein nachschlagbare Liste {Philipp: 25, Marlene: 27, Marlene: 22}
• Array eigentlich auch ein Objekt, aber vor allem eine sortierte Werteliste ['Philipp', 'Oskar', 'Marlene'].

JavaScript ist eine schwach typisierte oder dynamische Programmiersprache. Datentypen werden bei einer Variable nicht explizit deklariert und jede Variable kann mit Werten jedes Typen überschrieben werden. Anderen Programmiersprachen lassen dies nicht zu um Fehler zu vermeiden.

Operatoren

Mathematische Operatoren:

• + addiert zwei Zahlen zusammen: 6 + 9 ergibt 15
• - subtrahiert zwei Zahlen: 20 - 15 ergibt 5
• * multipliziert zwei Zahlen miteinander: 3 * 7 ergibt 21
• / teilt zwei Zahl durcheinander: 10 / 5 ergibt 2
• % Modulo, teilt zwei Zahl durcheinander und gibt den Restwert zurück: 10 % 3 ergibt 1
• ** Potenz, multipliziert eine Zahl entsprechend ihres Exponenten: 4 ** 3 ergibt 64

Vergleichsoperatoren:

• === überprüft, ob die linken und rechten Werte miteinander identisch sind: 5 === 2 + 4 ergibt false
• !== überprüft, ob die linken und rechten Werte nicht identisch sind: 5 !== 2 + 3 ergibt false
• < testet, ob der linke Wert kleiner als der rechte ist: 10 < 6 ergibt false
• > testet, ob der linke Wert größer als der rechte ist: 10 > 20 ergibt false
• <= testet, ob der linke Wert kleiner oder gleich dem rechten ist: 3 <= 2 ergibt false
• >= testet, ob der linke Wert größer oder gleich dem rechten ist: 5 >= 4 ergibt false

Logische Operatoren:

• && logisches UND liefert einen Wahrheitswert true wenn beide Vergleichswerte true sind: true && false ergibt false
• || logisches ODER liefert einen Wahrheitswert true wenn einer der beiden Vergleichswerte true ist: true || false ergibt true
• ! logisches NICHT kann einen Wahrheitswert umkehren: !true ergibt false

📖 MDN: Logical Operators
📖 Marius Schulz: The && and || Operators in JavaScript

Funktionen

Funktionen sind eine sinnvolle Möglichkeit JavaScript-Programme zu strukturieren und wiederverwendebare Code-Schnipsel zu definieren. Hier die wichtigsten Eigenschaften:

• Funktionen sind Unterprogramme, welche bestimmte Aufgabe erfüllen.
• Funktionen werden erst dann ausgeführt, wenn sie aufgerufen werden.
• Werte können als Parameter an die Funktion übergeben und innerhalb der Funktion als Argumente verwendet werden.
• Funktionen geben immer Wert zurück. Wenn eine Funktion kein return-Statement hat, wird immer undefined zurückgegeben.

Es gibt verschiedene Möglichkeiten, eine Funktion in JavaScript zu definieren:

Eine Funktionsdeklaration definiert eine benannte Funktion. Um eine Funktionsdeklaration zu erstellen, verwenden Sie das functionSchlüsselwort gefolgt vom Namen der Funktion. Beim Verabeiten des JavaScript-Codes werden Funktionsdeklaration immer an den Anfang des Codes gesetzt, sodass die Funktion verwendet werden kann, bevor sie definiert wurde.

// Funktion kann verwenden werden, bevor sie definiert wurde
sayHello('Philipp');

function sayHello(name)  {
  console.log('Hallo ' + name);
};

Ein Funktionsausdruck definiert eine benannte oder anonyme Funktion. Eine anonyme Funktion ist eine Funktion die keinen Namen hat. Funktionsausdrücke können erst verwendet werden, nach dem sie definiert wurden:

const sayHello = function (name)  {
  console.log('Hallo ' + name);
};

// Funktion kann erst verwendet werden, nach dem sie definiert wurde
sayHello('Philipp');

Ein Pfeilfunktionsausdruck ist eine kürzere Syntax zum Schreiben von Funktionsausdrücken. Pfeilfunktionen erzeugen keinen eigenen this-Wert.

const sayHello = (name) => {
  console.log('Hallo ' + name);
};

// Funktion kann erst verwendet werden, nach dem sie definiert wurde
sayHello('Philipp');

📖 MDN: Functions
📖 Codeburst: JavaScript Functions

Textmanipulation

Mit Zeichenketten (strings) zu arbeiten gehört zum Alltag eines jeden Programmierers. JavaScript bietet dafür viele nützliche Methoden:

Strings verketten:

const name = "Philipp";
const age = 25;
const occupation = "Koch";
const city = "Stuttgart";

// Modernes JavaScript
console.log(
  `${Philipp} ist ${age} Jahre alt und arbeitet als ${occupation} in ${city}`
);

// Oldschool JavaScript
console.log(
  name + " ist " + age + " Jahre alt und arbeitet als " + occupation + " in " + city
);

Die moderne Methode ist gerade bei mehreren Variablen deutlich einfach zu schreiben und vermeidet Fehler durch fehlende +-Zeichen und Leerzeichen.

Länge eines Textstrings ermitteln:

const name = "Philipp";
console.log(name.length);

// 7

Jede String ist für JavaScript ein Array and Buchstaben und Zeichen und hat daher auch eine Länge. Auf die einzelnen Werte kann über den Index (die Position im Array) auch direkt zugegriffen werden:

const name = "Philipp";
console.log(name[1]);

// h

Um einen Zeichenkombination in eine String zu finden, können wir die Array-Methode Array.indexOf() verwenden:

const phrase = "Philipp ist cool";
console.log(phrase.indexOf("ist"));

// 8

Das Wort ist finde wir an achter Stelle im Array. Wir eine Zeichenkombination nicht gefunden, gibt die Methode immer -1 zurück. Das ist nützlich um zum Beispiel zu überprüfen ob ein bestimmter Wert in einer Liste (Array) an Werten vorkommt oder nicht:

const participants = ["Philipp", "Andrea", "Sophie"];

if (participants.indexOf("Jana") === -1) {
  console.log("Sorry, du stehst nicht auf unserer Liste");
}

String in Klein- oder Großbuchstaben umwandeln:

const name = "Philipp";
console.log(name.toLowerCase()); // philipp
console.log(name.toUpperCase()); // PHILIPP

Das kann nützlich sein, um Benutzereingaben zu vereinheitlichen, zum Beispiel um daraus Benutzernamen zu generieren oder sie in einer Datenbank zu speichern.

Zeichen in einer Zeichenfolge ersetzt:

const phrase = "Philipp ist cool";
console.log(phrase.replace("Philipp", "Jana"));

// Jana ist cool

⚠️ *Wenn man mit Strings arbeitet, ersetzt Array.replace() immer nur den ersten Treffer. Wenn man mehrer Vorkommen eines Strings ersetzen möchte, muss man dazu eine sogenannte Regular Expression verwenden: phrase.replace(/Philipp/g, 'Jana')

📖 MDN: Useful string methods

Bedingungen

Mit Bedingungen (conditionals) kann man den Ablauf eines Programms steuern. Das Konzept ist relativ leicht zu verstehen, da es sich um eine einfache „Wenn, dann, ansonsten“-Logik handelt.

const isHungry = true;

if (isHungry) {
  console.log("Geh was essen!");
} else {
  console.log("Mach deine Hausaufgaben!");
}

// Geh was essen!

Wenn die Bedingung isHungry wahr, also true ist, wird der erste Block ausgeführt. Beim ersten Treffer wird die Schleife abgebrochen. Wenn keine Bedingung zutrifft, wird der else-Block ausgeführt werden. Der else-Block ist jedoch optional und kann auch weggelassen werden. In diesem Fall würde einfach nichts passieren, beziehungsweise ausgegeben werden.

Man kann auch mehrere Bedingungen definieren:

const isHungry = false;
const isThirsty = true;

if (isHungry) {
  console.log("Geh was essen!");
} else if (isThirsty) {
  console("Du solltest was trinken!");
} else {
  console.log("Mach deine Hausaufgaben!");
}

// Du solltest was trinken!

In diesem Fall würde der zweite Block else if-Block ausgeführt werden.

const isHungry = true;
const isThirsty = true;

if (isHungry) {
  console.log("Geh was essen!");
} else if (isThirsty) {
  console("Du solltest was trinken!");
} else {
  console.log("Mach deine Hausaufgaben!");
}

// Geh was essen!

Wenn beide Bedingungen wahr sind, würde nur die erste davon ausgegeben werden, da die Schleife abbricht sobald eine Bedingung erfüllt ist.

const isHungry = false;
const isThirsty = false;

if (isHungry) {
  console.log("Geh was essen!");
} else if (isThirsty) {
  console("Du solltest was trinken!");
} else {
  console.log("Mach deine Hausaufgaben!");
}

// Mach deine Hausaufgaben!

Wenn keine Bedingung erfüllt wird, tritt der else-Fall ein.

Man kann in den Bedingungen auch mit logischen Operatoren arbeiten. Wichtig ist aber, dass diese irgendeinen Wahrheitswert zurückgeben. In diesem Beispiel ist auch die Reihenfolge der Bedingungen wichtig, da diese logisch aufeinander aufbauen.

In diesem Beispiel bauen wir einen Empfehlungsalgorithmus, der bestimmt wann ein Kind zuhause sein muss:

const age = 15;

if (age > 18) {
  console.log("Sei bitte bis spätestens 2 Uhr zuhause!");
} else if (age > 16) {
  console.log("Sei bitte bis spätestens 24 Uhr zuhause!");
} else if (age > 14) {
  console.log("Sei bitte bis spätestens 22 Uhr zuhause!");
} else if (age > 12) {
  console.log("Sei bitte bis spätestens 20 Uhr zuhause!");
} else {
  console.log("Wenn du älter bist, darfst du auch mal aus dem Haus.");
}

// Sei bitte bis spätestens 22 Uhr zuhause!

Außerdem kann man Bedingungen ineinander verschachteln. In diesem Fall darf ein Kind länger wegbleiben, wenn eine volljährige Aufsichtsperson mit dabei ist. Es sei denn, dass Kind ist 14 oder jünger, dann muss es um 22 Uhr zuhause sein.

const hasChaperone = true;
const age = 15;

if (hasChaperone) {
  if (age <= 14) {
    console.log("Sei bitte bis spätestens 22 Uhr zuhause!");
  } else {
    console.log("Egal wann du nach Hause kommst, aber benimm dich!");
  }
} else {
  if (age >= 18) {
    console.log("Sei bitte bis spätestens 2 Uhr zuhause!");
  } else if (age >= 16) {
    console.log("Sei bitte bis spätestens 24 Uhr zuhause!");
  } else if (age >= 14) {
    console.log("Sei bitte bis spätestens 22 Uhr zuhause!");
  } else if (age >= 12) {
    console.log("Sei bitte bis spätestens 20 Uhr zuhause!");
  } else {
    console.log("Wenn du älter bist, darfst du auch mal aus dem Haus.");
  }
}

// Sei bitte bis spätestens 22 Uhr zuhause!

💡 Man sollte es mit dem Verschachteln von if-Bedingungen nicht übertreiben. Mehr als drei Logik-Ebenen sind schwer zu verstehen, führen zu endlosen Fehlersuchen und werden generell als schlechten Stil angesehen.

⚠️ Wenn man eine definierte Variable, Konstante oder Funktion als Bedingungen angibt, ist diese immer true. Die kann man dazu nutzen, um zu überprüfen ob Benutzereingaben stimmen. Allerdings ist diese Verhalten auch ein häufige Fehlerquelle. Am besten prüft man immer explizit, ob ein Wert definiert ist: if (userName !== undefined)

📖 MDN: Conditionals

Schleifen

Schleifen (loops) sind nützlich, um sich wiederholende Aufgaben innerhalb eines Programms schnell zu erledigen. In JavaScript gibt es verschieden Möglichkeiten Schleifen zu programmieren. Jede Möglichkeit hat bestimmte Vor- und Nachteile.

For-Schleifen sind die flexibelsten Formen von Schleifen und bestehen aus for(Zähler, Abbruchbedingung, Iterator). Der Zähler i definiert eine Variable und ihren Startwert (meistens Null). Die Abbruchbedingung definiert, wann die Schleife zu Ende sein soll – in diesem Beispiel bevor der Zähler den gleichen Wert hat, wie die Anzahl der Personen (names.length). Der Iterator legt den Betrag fest, um den der Zähler i erhöht (oder erniedrigt) wird. i++ bedeutet in diesem Fall, dass der Zähler immer um eins erhöht wird.

const names = ["Philipp", "Andrea", "Sophie"];

for (let i = 0; i < names.length; i++) {
  console.log(`Hallo ${names[i]}, du bist die Nummer ${i}`);
}

// Hallo Philipp, du bist die Nummer 0
// Hallo Philipp, du bist die Nummer 1
// Hallo Philipp, du bist die Nummer 2

Direkt auf den Zähler zugreifen zu können ist dann praktisch, wenn man zum Beispiel nur jede zweite Person ausgeben möchte i += 2, kurz für i = i + 2. Wichtig ist, dass die Abbruchbedingung erreicht werden kann, da die Schleife sonst endlos läuft und das Programm oder der Browser abstürzen kann. Die folgenden Möglichkeiten eine Schleife zu schreiben sind deutlich sicherer:

For-Of-Loops für Arrays kann man dann verwenden, wenn man nicht auf einen Zähler angewiesen ist:

const names = ["Philipp", "Andrea", "Sophie"];

for (let name of names) {
  console.log(`Hallo ${name}.`);
}

For-In-Loops für Objekte funktioniert ganz ähnlich, werden aber eher selten verwendet:

const names = {
  personA: "Philipp",
  personB: "Andrea",
  personC: "Sophie",
};

for (let name in names) {
  console.log(`Hallo ${name}.`);
}

Array.forEach() ist eine weitere Funktion mit der man über Arrays iterieren (Nerd-Sprech für Schleifen bauen) kann. Der Vorteil ist, dass man hier auch auf den Index (Position im Array) eines Wertes zugreifen kann:

const names = ["Philipp", "Andrea", "Sophie"];

names.forEach((name, index) => {
  console.log(`Hallo ${name}, du bist die Nummer ${index}.`);
});

Vergleichbare Schleifen kann man mit den Funktionen Array.map() oder Array.reduce() bauen, welche genutzt werden können, um die Daten eines Arrays entweder zu verändern oder zusammenzufassen. Außerdem gibt es noch While-Schleifen und Do-While-Schleifen, die aber keinen Vorteil gegenüber der normalen For-Loop bieten und ein wenig „oldschool“ sind.

📖 MDN: Looping code
📖 Impressive Webs: What’s the Best Way to Write a JavaScript For Loop?

Arrays

Arrays sind die einfachste Möglichkeit um Listen in JavaScript zu erstellen. Diese Listen können beliebige Informationen erhalten. Neben Zeichen, Zahlen und Wahrheitswerten können Arrays auch weitere Arrays oder Objekte enthalten.

Hier ein Beispiel für ein einfaches Array mit drei Namen:

const names = ["Philipp", "Andrea", "Sophie"];

Die einzelnen Einträge in einem Array kann man über ihren Stellenwert (Index) abfragen:

const names = ["Philipp", "Andrea", "Sophie"];

console.log(names[0]);
// Philipp
console.log(names[1]);
// Andrea
console.log(names[2]);
// Sophie

💡 In den meiste Programmiersprachen ist das erste Element eines Arrays immer das nullte Element. Das ist auch insofern verwirrend, da die Länge eines Elements normal gezählt wird. Hat ein Array fünf Elemente, ist das letzte Element das vierte Element, die Länge des Arrays array.length ist aber trotzdem Fünf. Um auf das letzte Element zuzugreifen, kann man sich das zunutze machen und array[array.length - 1] schreiben.

Um einem Array neue Elemente hinzuzufügen, kann man die Methode Array.push() verwenden:

const names = ["Philipp", "Andrea", "Sophie"];

names.push("Yusuf");
console.log(names);
// ['Philipp', 'Andrea', 'Sophie', 'Yusuf']

Array.reverse() dreht die Reihenfolge der Element in einem Arrays um:

const names = ["Philipp", "Andrea", "Sophie"];

names.reverse();
console.log(names);
// ['Sophie', 'Andrea', 'Philipp']

Mit der Methode Array.sort() ein Array sortieren:

const names = ["Philipp", "Andrea", "Sophie"];

names.sort();
console.log(names);
// ['Andrea', 'Philipp', 'Sophie']

Allerdings sortiert JavaScript die Werte eines Arrays lexikalisch. Daher braucht man eine extra Funktion, um Zahlenwerte aufsteigend sortieren zu können:

const numbers = [5, 12, 8, 130, 11, 44];

numbers.sort();
console.log(numbers);
// [11, 12, 130, 44, 5, 8]

numbers.sort((a, b) => a - b);
console.log(numbers);
// [5, 8, 11, 12, 44, 130]

Man kann Arrays mit Array.find() auch nach bestimmten Bedingungen durchsuchen. In diesem Beispiel wollen wir alle Zahlen finden, welche größer als 10 sind:

const numbers = [5, 12, 8, 130, 11, 44];
const found = numbers.find((n) => n > 10);

console.log(found);
// [12, 11]

Es gibt noch unzählige weitere Methoden, um mit Arrays zu arbeiten. Arrays können beispielsweise geteilte, mit anderen Arrays verbunden oder in Text umgewandelt werden. Besonders wichtig ist die Methode Array.forEach() welche im Kapitel Schleifen besser beschrieben wird.

📖 MDN: Array

Objekte

Objekte sind ähnliche wie Arrays (Listen) eine weitere Methode um Daten in JavaScript zusammenzuhalten. Im Gegensatz zu Arrays können die einzelnen Eigenschaften (properties oder keys) eines Objekts aber benannt werden.

const person = {
  name: "Philipp",
  age: 23,
  city: "Hamburg",
};

Die einzelnen Werte in einem Objekt kann man über den jeweiligen Namen mit der sogenannten Punktnotation (dot notation) abfragen:

const person = {
  name: "Philipp",
  age: 23,
  city: "Hamburg",
};

console.log(person.name);
// Philipp

Genauso kann man Objekten relativ einfach neue Eigenschaften hinzufügen:

const person = {
  name: 'Philipp',
  age: 23,
  city: 'Hamburg'
};

person.job = 'teacher':

console.log(person)
// {
//   name: 'Philipp',
//   age: 23,
//   city: 'Hamburg',
//   job: 'teacher'
// }

Das funktioniert aber nur so lange der Name der Eigenschaft ein Wort ohne Sonderzeichen ist. Kommen Umlaute, Leerzeichen oder Bindestriche im Namen vor, funktioniert die Punktnotation nicht mehr. In diesem Fall benötigen wir die Klammernotation (bracket notation). Außerdem müssen wir die Eigenschaft in Anführunszeichen (' oder ") schreiben:

const person = {
  name: "Philipp",
  age: 23,
  city: "Hamburg",
  job: "teacher",
  "last-job": "bike mechanic",
};

console.log(person["last-job"]);
// bike mechanic

Der Wert einer Eigenschaft ist nicht nur auf Texte oder Zahlen beschränkt und kann genauso gut auch eine Array oder eine Funktion sein:

const person = {
  name: "Philipp",
  age: 23,
  city: "Hamburg",
  married: false,
  partner: undefined,
  hobbies: ["reading", "climbing", "travelling"],
  sayHello: function () {
    console.log("Hi, my name is " + this.name);
  },
};

console.log(person.hobbies);
// ['reading', 'climbing', 'travelling']

console.log(person.sayHello());
// Hi, my name is Philipp

Relativ häufig sieht man die Verwendung in Verbindung mit Arrays. Um zum Beispiel die Daten eine Gruppe von Menschen zu speichern bietet sich ein sogenanntes Object Array an:

const persons = [
  {
    name: 'Philipp',
    age: 23,
    city: 'Hamburg'
  };
  {
    name: 'Andrea',
    age: 52,
    city: 'München'
  },
  {
    name: 'Sophie',
    age: 31,
    city: 'Berlin'
  }
];

Die Daten dieses Object Array lassen sich an einfachsten mit einer Schleife verarbeiten.

📖 MDN: Object Basics
📖 MDN: Property accessors
📖 MDN: Working with JSON

Events

Events sind bestimmte Aktionen oder Ereignisse, die eine bestimmte Reaktion auslösen können, wenn sie in einer JavaScript-Webseite ausgelöst werden. Diese Ereignisse können Dinge wie Klick auf einen Button, das Laden einer Seite, das Ändern eines Formularfeldes oder das Bewegen des Mauszeigers sein.

Um ein Event in JavaScript zu verarbeiten, kann man die addEventListener()-Methode verwenden. Die Syntax dafür ist folgende:

element.addEventListener(eventType, callbackFunction);

• element ist das HTML-Element, für das das Event verarbeitet werden soll.
• eventType ist der Typ des Events, z.B. "click" oder "load".
• callbackFunction ist die Funktion, die ausgeführt wird, wenn das Event ausgelöst wird.

Ein einfaches Beispiel für ein Click-Event auf einen Button wäre:

<button id="myButton">Klick mich</button>

<script>
  const button = document.querySelector("#myButton");
  button.addEventListener("click", () => {
    alert("Button wurde geklickt!");
  });
</script>

In diesem Beispiel wird das Button-Element ausgewählt und dann wird mit addEventListener angegeben, dass bei einem Klick auf den Button eine Funktion ausgeführt werden soll. Diese Funktion zeigt ein Alert mit der Meldung "Button wurde geklickt!" an.

Es ist wichtig zu beachten, dass ein Event auf ein Element nur ausgelöst werden kann, wenn das HTML-Element bereits vollständig geladen wurde. Daher muss man dafür sorgen, dass man erst nach dem Laden der Seite mit der Verarbeitung von Events beginnt. Das kann man tun, indem man die window.onload-Eigenschaft verwendet oder indem man das Event direkt an das document-Element bindet.

Events sind ein wichtiger Bestandteil jeder JavaScript-Webseite und ermöglichen es, interaktive Webseiten zu erstellen.

📖 MDN: Introduction to Events

DOM-Manipulation

DOM-Manipulation bezeichnet das Ändern von Webseiten-Elemente mithilfe von JavaScript. Der DOM (Document Object Model) ist, vereinfacht gesagt, die Struktur einer Webseite, wenn man sie als Baum mit Elementen und Unterelementen darstellen würden. Der Browser stellt bestimmte Methoden bereit, um auf den DOM zuzugreifen und Elemente verändern zu können. Neue Elemente können hinzugefügt, bestehende Elemente können geändert oder entfernt werden.

Zum Auswählen einzelner oder mehrere Elemente gibt es folgende Möglichkeiten:

1. getElementById: Diese Methode sucht nach einem Element auf der Basis seiner ID. Sie gibt das erste gefundene Element mit dieser ID zurück. Beispiel: document.getElementById("meineId")
2. getElementsByTagName: Diese Methode sucht nach allen Elementen mit einem bestimmten HTML-Tag. Sie gibt ein HTMLCollection (ähnlich einem Array) mit allen gefundenen Elementen zurück. Beispiel: document.getElementsByTagName("p")
3. querySelector: Diese Methode ist eine erweiterte Version von getElementById und getElementsByTagName. Man kann mittels eines CSS-ähnlichen Selektors nach einem Element suchen. Sie gibt das erste gefundene Element zurück. Beispiel: document.querySelector("#meineId .meineKlasse")
4. querySelectorAll: Diese Methode ist eine erweiterte Version von getElementsByTagName. Man kann mittels eines CSS-ähnlichen Selektors nach allen passenden Elementen suchen. Sie gibt ein NodeList (ähnlich einem Array) mit allen gefundenen Elementen zurück. Beispiel: document.querySelectorAll(".meineKlasse")

💡 querySelector und querySelectorAll sind die flexibelsten Methoden, um Elemente auszuwählen. Gerade für den Anfang lohnt es sich, einfach mit diesen beiden Methoden zu arbeiten und zu lernen, wie man Selektoren dafür schreibt. Die Selektoren funktionieren im Prinzip genauso, wie man sie in CSS schreiben würde.

Um ein Element mit JavaScript hinzuzufügen, muss zunächst ein neues Element erstellt werden. Dies kann mit der Methode document.createElement(elementName) erreicht werden, wobei elementName der gewünschte Name des Elements ist, zum Beispiel "h1" für eine Überschrift. Für das neu erstellte Element können dann bestimmte Eigenschaften festgelegt werden, wie Inhalt, ID, Klasse oder andere Attribute.

Zum Hinzufügen des Elements zur Seite kann es an ein bestehendes Element angehängt werden, indem die Methode appendChild des Elternelements, in diesem Fall der body, aufgerufen wird und das neue Element als Argument übergeben wird.

Beispiel:

var newHeadline = document.createElement("h1");
newDiv.textContent = "Ich bin ein neue Überschrift";
newDiv.id = "headline";
document.body.appendChild(newHeadline);

Um eine bereits bestehende Überschrift mit JavaScript zu ändern, kann man das entsprechende Element über seine ID oder Klasse mittels document.getElementById oder document.getElementsByClassName auswählen. In diesen Beispielen wird eine Überschrift mittels ihrer ID ausgewählt und entsprechend verändert. Auf ähnliche Weise kann man auch Überschriften, die mittels Klasse ausgewählt wurden, verändern.

Ändern des Textes:

const headline = document.querySelector("#headline");
headline.innerHTML = "Neuer Überschriftentext";

Ändern der Klasse:

const headline = document.querySelector("#headline");
headline.className = "new-class";
Ändern der Hintergrundfarbe:

Ändern der Hintergrundfarbe:

const headline = document.querySelector("#headline");
headline.style.backgroundColor = "lightblue";

Um die oben angelegte Überschrift zu löschen, muss man dessen Eltern-Element verwenden und dessen removeChild-Methode aufrufen. Hier ist ein Beispiel:

const headline = document.querySelector("#headline");
var parent = headline.parentNode;
parent.removeChild(headline);

Dass jeweils das Eltern-Element ermittelt werden muss, um ein Element zu löschen ist leider ein wenig aufwendig.

📖 MDN: Manipulating documents

Web-APIs

Web-APIs (Application Programming Interfaces) sind Schnittstellen, die vom Browser bereitgestellt werden, um bestimmte Funktionalitäten wie Geolokalisierung, Kamera- oder Dateien-Zugriff zu ermöglichen. Diese Funktionalitäten können direkt aus JavaScript heraus verwendet werden.

Ein einfaches Beispiel für die Verwendung einer Browser-API ist die Ermittlung des Standorts eines Benutzers. Hierfür kann die Geolocation-API verwenden werden:

<script>
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      console.log('Latitude: ' + position.coords.latitude);
      console.log('Longitude: ' + position.coords.longitude);
    });
  } else {
    console.log('Geolokalisierung wird von diesem Browser nicht unterstützt.');
  }
</script>

In diesem Beispiel wird zuerst überprüft, ob der Browser die Geolokalisierung unterstützt. Falls ja, wird mit navigator.geolocation.getCurrentPosition der Standort des Benutzers abgefragt. Die Funktion, die hier als Argument übergeben wird, wird aufgerufen, wenn die Geolokalisierung erfolgreich ermittelt wurde. In dieser Funktion werden dann Längen- und Breitengrad auf der Browser-Konsole ausgegeben.

💡 Es ist wichtig zu beachten, dass manche Browser APIs nur dann zur Verfügung stehen, wenn die Webseite über eine gültige SSL-Zertifizierung verfügt und sicher über HTTPS aufgerufen wird. Außerdem kann es sein, dass der Benutzer der Verwendung bestimmter APIs erst einmal genehmigen muss.

Browser APIs ermöglichen es, die Funktionalitäten des Browsers direkt von JavaScript aus zu nutzen und interaktive Webseiten zu erstellen, die besser auf die Bedürfnisse des Benutzers eingehen.

📖 MDN: Introduction to Web APIs

Bibliotheken

Durch Bibliotheken können Entwickler ihre Arbeit beschleunigen, indem sie auf bereits getestete und bewährte Lösungen zurückgreifen, statt jedes Mal eigenen Code schreiben zu müssen. Die meisten Bibliotheken sind für sehr bestimmte Aufgaben oder Probleme gemacht, wie zum Beispiel das Arbeiten mit Datumsangaben, Formularen oder bestimmten Datenschnittstellen. Die meisten Bibliotheken werden kostenlos und unter einen Open-Source-Lizenz angeboten.

💡 Häufig bezeichnet man Bibliotheken auch als Libraries, Packages, Dependencies oder auf Deutsch Abhängigkeiten.

Bibliotheken in JavaScript können über den Paketmanager NPM oder über ein CDN (Content Delivery Network) eingebunden werden. NPM bietet auch einen Überblick über die verfügbaren Bibliotheken. Um npm verwenden zu können, muss jedoch zuerst Node.js installiert werden. Node.js ermöglicht es JavaScript in der Kommandozeile auszuführen. Nach erfolgreicher Installation, können Bibliotheken über folgenden Befehle installiert werden:

npm install lodash

Lodash ist eine Bibliothek die bei der Arbeit mit Array und Daten allgemein hilft. Nach erfolgreicher Installation kann die Bibliothek mit folgendem JavaScript-Code in den Code eingebunden werden.

In diesem Beispiel wird die Funktion shuffle aus der Bibliothek lodash importiert:

var shuffle = require("lodash/shuffle");

Oder in modernem JavaScript:

import { shuffle } from "lodash";

Jetzt kann die importierte Funktion shuffle verwendet werden, um Array zufällig zu sortieren.

shuffle([1, 2, 3, 4]);
// => [4, 1, 3, 2]

Es ist auch möglich, Bibliotheken aus einem CDN (Content Delivery Network) einzubinden, ohne sie lokal zu installieren. Die Bibliothek kann über einen Script-Tag in einer HTML-Datei, meistens der index.html, eingebunden werden. Die Datei wird dann extern von den Server eines CDN-Anbieters wie CDNJS geladen.

Beispiel:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>

Nun sollte die Bibliothek über eine globale Variable verwendet werden können. Im Fall von lodash ist das ein Unterstrich, der namensgebend für die Bibliothek ist:

_.shuffle([1, 2, 3, 4]);
// => [4, 1, 3, 2]

Allerdings sollte man beachten, dass externe Bibliotheken immer eine Internetverbindung benötigen. Außerdem kann das externe Einbinden von Abhängigkeiten datenschutzrechtliche Implikationen haben. Daher wird in der Regel empfohlen, Bibliotheken lokal zu installieren und über npm zu verwalten, wenn man eine stabile und performante Anwendung erstellen möchte.

Weitere Workshops

Wer seine Fähigkeiten im Bereich Web-Entwicklung weiter ausbauen oder Kursinhalte wiederholen möchte wird hier fündig. Die meisten Online-Kurse sind kostenlos:

• Knight Lab: Digital Journalism, Bit by Bit
• Khan Academy: Computer Programming
• MDN: Learn Web Development
• FreeCodeCamp: Learn to Code
• Codecademy: Web Development
• Udemy: Front-End Development Foundations

Zum Thema Datenvisualisierung gibt es hier noch die Seminarunterlagen der Workshops, die ich im Rahmen des ifp Coding Bootcamps erstellt habe:

• Datenvisualisierung mit D3.js lernen
• Kartenvisualisierung mit Leaflet lernen
• Datenvisualisierung mit R lernen

Über den Autor

Steffen Kühne arbeitet als Tech Lead für das AI + Automation Lab des Bayerischen Rundfunks. Schwerpunkt seiner Arbeit ist die Automatisierung von journalistischen Inhalten und die Entwicklung von Werkzeugen, welche Journalisten bei ihrer täglichen Arbeit unterstützen. In seiner Rolle als Tech Lead beschäftigt sich Steffen Kühne damit, wie man künstliche Intelligenz sinnvoll und verantwortungsbewusst für öffentlich-rechtliche Medien einsetzen kann und welche Infrastruktur dafür notwendig ist. Für BR Data, dem datenjournalistischen Teams des BRs, entwickelt er investigativen Datenanalysen, Visualisierung und interaktive Storytelling-Formate. Nach einem Studium der Journalistik studierte Steffen Kühne Medieninformatik, um dann ein Volontariat als Datenjournalist und digitaler Designer bei der Süddeutschen Zeitung zu beginnen. Bis 2015 arbeitete er dort in der Entwicklungsredaktion. Außerdem ist Steffen Kühne als Trainer für verschiedene Medien und Journalistenschulen tätig.

• Webseite: stekhn.de
• Github: stekhn
• Twitter: stekhn
• LinkedIn: stekhn