Anleitung zur Erstellung einer responsiven Website

Dies Tutorial des elab2go zeigt, wie mit Hilfe grundlegender Web-Technologien (HTML, CSS, JavaScript, JSON) in fünf Schritten eine eigene Website mit responsive Design entwickelt wird.

Wir erläutern die Grundlagen der Sprachen HTML, CSS, Javascript und den Umgang mit den Bibliotheken am Beispiel der Webseite mywebsite eines fiktiven Dienstleistungs-Unternehmens. Die Erstellung der Webseite erfolgt auf Basis eines statischen HTML-Dokumentes, das durch die Verwendung der Skriptsprache JavaScript um interaktive Funktionalität erweitert wird, und dessen Layout in einer externen CSS-Datei festgelegt wird. Durch die Anwendung von Media-Queries im CSS-Stylesheet wird das Responsive Design, also die Berücksichtigung der Anforderungen des jeweiligen Endgerätes, der Webseite auf einfache und schnelle Weise umgesetzt. Die Datenaustausch-Sprache JSON und die JavaScript-Bibliothek jQuery erweitern die Funktionalität der Webseite um einen einfacheren Umgang mit Daten und Funktionen.

Vorbereitung der Entwicklungsumgebung

Moderne Webanwendungen werden mit Hilfe von Programmierplattformen und Frameworks entwickelt, die standardisierte Spezifikationen, Komponenten, Schnittstellen und verschiedene Dienste zur Verfügung stellen, so dass Softwareentwickler bei der Implementierung mit einem vorhandenen Gerüst anfangen können.
In diesem Tutorial verwenden wir den XAMPP-Stack, da Installation und Konfiguration für Einsteiger damit besonders einfach ist. Der XAMPP-Stack ist ein Open-Source-Programmpaket, bestehend aus dem Apache Webserver, MySQL bzw. MariaDB alsDatenbank, PHP und PERL als Programmiersprachen für dynamische Webanwendungens. XAMPP ist nicht für den Einsatz als öffentlicher Webserver gedacht, sondern für die Entwicklung eines möglichst schnellen und kompakten Testsystems einer Webanwendung.

Für die Entwicklung kleinerer Webanwendungen reicht es aus, einen Text-Editor mit Syntax-Unterstützung zu verwenden, z.B. Notepad++. Für größere Anwendungen können integrierte Entwicklungsumgebungen wie VSCode, Netbeans oder Eclipse verwendet werden, die auch Unterstützung bei der Fehlersuche bieten.

1 Die Verzeichnisstruktur

Statische Webanwendungen bestehen aus einer Sammlung verlinkter HTML-Seiten und anderer Ressourcen (Bilder, Videos), und enthalten ggf. noch Cascading Stylesheets für das Layout und JavaScript-Programme für interaktive Inhalte. Vor dem Anlegen einer neuen Webseite sollte eine passende Verzeichnisstruktur erstellt werden, in der die Dateien abgelegt werden. Bilder werden im Verzeichnis images abgelegt, CSS-Dateien im Ordner css, und JavaScript-Dateien im Ordner js. Die in unserer Beispielwebseite verwendeten Dateien liegen in folgender Verzeichnisstruktur vor:

Startseiten einer Webanwendung werden üblicherweise index.html genannt und haben die Besonderheit, dass der Webserver bei einer URL-Anfrage der Form http://www.mywebsite.de/ automatisch die Datei index.html zurückliefert, also die URL http://www.mywebsite.de/index.html aufruft.

2 HTML-Dokumente erstellen

Digitale Dokumente, die Text, Hyperlinks, Bilder und Videos enthalten, werden im WWW mit Hilfe der standardisierten Hypertext Markup Language (HTML) beschrieben. HTML wurde 1989 von Tim Berners-Lee, dem Erfinder des WWW, vorgeschlagen und in verschiedenen Versionen durch das W3C Konsortium standardisiert und weiterentwickelt. Aktuell verwenden die meisten Webseiten die neue Version HTML 5, einige auch noch die Versionen 4.0 oder XHTML. HTML-Dokumente haben die Dateiendung .html und .htm und können von jedem Webbrowser gelesen und dargestellt werden. HTML ist eine beschreibende Auszeichnungssprache, deren Sprachelemente lediglich die Struktur eines WWW-Dokumentes angeben, d.h., wie die Information gegliedert ist (z.B. in Bereiche, Tabellen) und mit anderer Information verknüpft ist (über Links). Um das Layout eines WWW-Dokumentes zu gestalten, wird noch eine weitere Sprache benötigt: CSS-Stylesheets, siehe den nächsten Schritt.

Ein HTML-Dokument hat eine hierarchische Struktur und besteht aus drei Bereichen:

• der Dokumenttypdeklaration, die die verwendete Dokumenttypdefinition (DTD) angibt
• einem Kopfteil (HEAD), der Informationen über das Dokument enthält. Diese Informationen werden nicht im Anzeigebereich des Browsers dargestellt.
• dem Körper (BODY), der die sichtbaren Informationen des Dokumentes enthält.

Die HTML-Sprachelemente werden unterteilt in verschiedene Kategorien, wie

• Elemente zur Beschreibung der Dokumentstruktur: html, head, body
• Elemente für die Seitenstrukturierung: body, header, h1, h2, h3
• Elemente für die Beschreibung von Links: a
• usw.

Jedes Element des HTML-Dokuments wird durch ein Tag-Paar (Markup-Tags, Tag = engl. Etikett, Markierung) kennzeichnet, das aus einem Start- und einem End-Tag besteht. Ein Start-Tag beginnt mit <, danach folgt der Elementname und eine Liste von Tag-Attributen, die auf die gewünschten Werte gesetzt werden. Ein End-Tag beginnt mit < /, gefolgt vom Elementnamen. Kommentare werden in HTML mit < !-- begonnen und mit -- > beendet.

2-1 HTML-Dokument des mywebsite-Beispiels

Wir verwenden in diesem Abschnitt die index.html-Datei aus dem Verzeichnis mywebsite/schritt2/

 <!DOCTYPE html>
 <html lang="de">
 <head> <!-- Header -->
 <title>Titel des Unternehmens</title>
 </head>
 <body> <!-- Body -->
 <h2>Titel des Dienstleistungs-Unternehmens</h2> 
 <p>Hier entsteht unsere Webseite.
 <br>
 Mit den aktuellen Angeboten unseres Unternehmens. 
 </p>
 </body>
 </html>

• Zeile 1 deklariert das Dokument als HTML-Typ. Das HTML-Dokument beginnt mit dem Start-Tag <html lang="de">, das als Attribut die Sprache auf Deutsch festsetzt, und endet in Zeile 15 mit dem End-Tag </html>.
• Der Header beginnt in Zeile 3 und endet mit Zeile 5, dieser enthält das title-Element zur Angabe des Titels des Dokuments. Das body-Element (Zeile 6-12) enthält die im Browser sichtbaren Informationen.
• Das Textstrukturierungs-Element h2 gliedert den Inhalt in verschiedene Abschnitte mit den im h2-Element angegebenen Überschriften und gibt dabei das Format (z.B. die Schriftart, -farbe und -größe) der Überschriften vor. Durch das Textstrukturierungs-Element p wird ebenfalls das Format des angezeigten Textes vorgegeben. Mit <br> wird ein Zeilenumbruch erzeugt, dieses Text-Element besitzt nur einen Start-Tag und keinen End-Tag.

3 CSS-Stylesheet erstellen

Während die Markup-Sprache HTML die Struktur eines Dokumentes beschreibt (Überschriften, Abschnitte, Tabellen, Bilder), wird für Formatierungsangaben eine weitere Sprache benötigt, nämlich die Formatierungssprache Cascading Style Sheets (CSS), mit deren Hilfe das Layout des HTML-Dokuments festgelegt wird, z.B. Schriftarten, Schriftgrößen, Text- und Hintergrundfarben etc. Es gibt drei Möglichkeiten, CSS-Formatierungen in HTML-Dokumenten einzubinden:

• Inline-Style: Formatierung direkt in einem style-Attribut festlegen
• Formate zentral in einem style-Element festlegen
• Einbinden einer externen Datei.

Das Einbinden einer externen CSS-Datei ist zu bevorzugen und wird bei großen Anwendungen empfohlen. Dabei wird eine externe CSS-Datei angelegt, die alle Formatierungsangaben enthält.

3-1 CSS-Syntax

• einer oder mehrere Selektoren, die z.B. ein Element auswählen
• einem Deklarationsbereich, der in geschweifte Klammern gesetzt wird. Im Deklarationsbereich stehen die Formatierungs-Deklarationen, die durch ein Semikolon getrennt werden. Eine Deklaration ist ein Eigenschaft-Wert-Paar: der angegebenen Eigenschaft wird der angegebene Wert zugewiesen.

Ein Beispiel-Regelsatz, um die Schriftart und -größe eines gesamten Dokumentes zu ändern, ist

Eine genauere Beschreibung dieser Formatierung erfolgt im Beispiel-CSS-Code.

3-2 CSS-Datei am mywebsite-Beispiel

Wir verwenden in diesem Abschnitt die index.html-Datei aus dem Verzeichnis mywebsite/schritt3a/, diese Datei enthält einen Link zur Hochschule Kaiserslautern. Die CSS-Datei main.css aus dem Verzeichnis mywebsite/schritt3a/css gibt das Layout des HTML-Dokuments vor.

CSS-Datei: mywebsite/schritt3a/css/main.css

 body{font-family: Arial;font-size:1.5em;} 
 p {color:black;} 
 h2 {color:red;} 
 a {font-weight:bold;vertical-align:middle;} 
 a:link, a:visited {color: blue;} 
 a:hover, a:active {color: green;} 

In Zeile 1 wird die Schriftart und -größe des gesamten HTML-Dokumentes geändert. Alle Anweisungen im body-Element unterliegen dieser Regel, wenn dies nicht explizit durch eine Inline-Formatierung eines Elements geändert wurde. Die Schriftfarbe des p-Elements ist schwarz und der Überschriften (h2-Element) rot, wenn nicht wie in Zeile 13 der obigen index.html-Datei explizit durch das style-Attribut überschrieben. Der Link (a-Element) wird fett hervorgehoben mit mittlerer, vertikaler Ausrichtung (Zeile 4), und ändert seine Standardfarbe blau in grün, wenn die Maus darüber fährt.

HTML-Datei: schritt3/index.html

 <!DOCTYPE html> <!-- Dokumenttyp-Deklaration --> 
 <html lang="de">
     
 <head> <!-- Header -->
 <title>Titel des Unternehmens
 <link rel="stylesheet" href="css/main.css">
 </head>
 
 <body> <!-- Body -->
 <h2>Titel des Dienstleistungs-Unternehmens</h2>
 <!-- Inline-Formatierung über das "style"-Attribut, überschreibt die 
 Formatierung in der externen CSS-Datei: -->
 <!-- <h2 style="color:slateblue">Titel des Dienstleistungs-Unternehmens</h2> -->
 <p>Hier entsteht unsere Webseite.
 <br>
 Mit dem aktuellen Angeboten unseres Unternehmens.
 </p>
 <h2>Links zu interessanten Webseiten</h2>
 <p>Weitere Links:
 <a href="http://hs-kl.de" target="_blank">Hier</a> geht es zur Hochschule KL!
 </p>
 </body>
 </html>

Der Inhalt ist um eine neue Überschrift (h2-Element, Zeile 18) erweitert. Der neue Abschnitt enthält einen Link, der mit dem a-Element (Zeile 20) eingebunden wird. Mit dem href-Attribut wird die URL der verlinkten Seite festgelegt, das Attribut target legt fest, ob der Link in demselben oder in einem neuen Tab geöffnet wird, "_self" ist der Default und bedeutet, dass die Seite in demselben Tab geöffnet wird, "_blank" bedeutet, dass die verlinkte Seite in einem neuen Tab geöffnet werden soll. Der Text, der im a-Element zwischen Start- und End-Tag eingeschlossen ist, wird als Text angezeigt (z.B. der Text: "Hier").

Die externe CSS-Datei main.css wird in Zeile 6 in das HTML-Dokument eingebunden. Eine zweite Möglichkeit eine CSS-Formatierung in das HTML-Dokument einzubinden ist mit dem Inline-Style in Zeile 13 umgesetzt, durch das style-Attribut des h2-Elements wird die Schriftfarbe, nur dieser Überschrift, auf slateblue gesetzt, wenn es durch Auskommentierung aktiv wird, siehe "Browseransicht 2". Das h2-Element in Zeile 10 folgt den Regeln der externen CSS-Datei, siehe "Browseransicht 1".

3-3 Responsives Webdesign mit Media Queries

Eine Besonderheit bei der Entwicklung von Webanwendungen ist, dass die Größe und Auflösung der Displays auf den verschiedenen Endgeräten (Notebook, Tablet, Smartphone, Fernsehgerät) stark variieren kann. Vor allem seit der Verbreitung von Smartphones werden professionelle Webanwendungen mit einem responsiven Webdesign augestattet, was bedeutet, dass sich das Layout der Webanwendung an das jeweilige Endgerät anpassen kann. Durch die Anwendung von Media Queries im CSS-Stylesheet wird das Responsive Design, also das mobile Design, der Webseite auf einfache und schnelle Weise umgesetzt und das nur durch ein paar Zeilen in der CSS-Datei.

Was sind CSS Media Queries?
Media Queries, also Media Abfragen, passen Style-Angaben mit Hilfe spezieller Media-Tags und Breakpoints auf das jeweilige Endgerät an. Eine Media Query wird durch das @media-Tag eingeleitet und besteht aus einem Medientyp und einem oder mehreren Ausdrücken mit Medieneigenschaften, die als wahr oder falsch evaluiert werden. Wenn das Ergebnis der Media Query wahr ist, werden die entsprechenden Stylesheets oder Style-Regeln innerhalb des @media-Tags angewendet. Zulässige Medientypen sind z.B. all (alle Geräte), screen (Bildschirm), handheld (mobiles Gerät), print (Drucker). Zulässige Medieneigenschaften, die in dieser Demo verwendet werden, sind z.B.: min-height, max-height, min-width und max-width, die die Höhe und Breite der Ausgabefläche abfragen.

Eine Media Query kann auf zwei Arten verwendet werden. Entweder man schreibt für jedes Endgerät ein eigenes Stylesheet und verwendet die Media Query in der Deklaration der Stylesheets um jeweils das passende Stylesheet auszuwählen, siehe Beispiel 1, oder man schreibt ein einziges Stylesheet für alle Geräte, in welches man Style-Regeln für die anvisierten Endgeräte einfügt, siehe Beispiel 2 und die CSS-Datei unseres Unternehmens-Beispiels.

Beispiel 1: Media Queries in der Deklaration der Stylesheets
Das Stylesheet main568.css enthält Style-Regeln für Geräte, deren Breite maximal 568 Pixel ist, und analog enthält main800.css Style-Regeln für Geräte, deren Breite maximal 800 Pixel ist. Beim Laden der Webseite werden alle Stylesheets auf das Client-Gerät geladen, jedoch nur das passende wird für die Formatierung verwendet. Das dritte Default Stylesheet wird dann angewendet, wenn keine der vorigen Regeln zutrifft.
Der folgende Quellcode befindet sich im Kopfteil/Header der entsprechenden html-Datei.

 <link rel="stylesheet" media="(max-width:568px)" href="main568.css"/>
 <link rel="stylesheet" media="(max-width:800px)" href="main800.css"/>
 <link rel="stylesheet" href="main.css"/>

Beispiel 2: Media Queries in einer einzigen CSS-Datei
Die Style-Regeln zwischen den geschweiften Klammern werden nur ausgeführt, wenn Medientyp und Medieneigenschaften passen.
Zeile 1-3: Die Media-Regel legt fest, dass für alle Geräte und Ausgabefläche maximal 568 Pixel die Schriftgröße um Faktor 0.8 verkleinert wird.
Zeile 4-5: Die Media-Regel legt fest, dass für alle Geräte und Ausgabefläche maximal 800 Pixel die Schriftgröße um Faktor 1.2 vergrößert wird.
Zeile 7-8: Die Media-Regel legt fest, dass für Bildschirme im Vollbildmodus die Schriftgröße um Faktor 1.2 vergrößert und ein schwarzer Rand erzeugt wird.
Der folgende Quellcode befindet sich in einer einzigen main.css-Datei.

 @media all and (max-width:568px) {
 body {font-size:0.8em}
 }
 @media all and (max-width:800px) {
 body {font-size:1.2em}
 }
 @media screen and (display-mode: fullscreen) {
 body {font-size:2em; border: 5px solid black;}
 } 

3-4 Responsive Webdesign am mywebsite-Beispiel

Wir verwenden in diesem Abschnitt die index.html-Datei aus dem Verzeichnis mywebsite/schritt3b/ und die CSS-Datei main.css aus dem Verzeichnis mywebsite/schritt3b/css, die zur Umsetzung des responsiven Designs um Media Queries erweitert wurde. Wir erstellen eine responsive Webseite, die sich an verschiedene Ausgabemedien anpasst. Das HTML-Dokument soll aus zwei Bereichen bestehen: einer Menüleiste ("Sidebar") und einem Content-Bereich für die Hauptinhalte der Webseite, und je nach Breite des Anzeigebereichs sollen die beiden Bereiche nebeneinander oder untereinander angezeigt werden. Dies responsive Verhalten wird mit Hilfe von Media-Queries im CSS-Stylesheets main.css erreicht.

CSS-Datei: main.css
Die angepasste css-Datei enthält die Media Queries für das responsive Webdesign.

• Zeile 1-6: Zunächst werden globale Style-Regeln für alle Geräte festgelegt. Insbesondere wird als Default festgelegt, dass für alle Medien Sidebar und Content-Bereich untereinander und mit einer Breite von 100% angezeigt werden.
• Zeile 7-13: Ist die Breite der Ausgabefläche mindestens 36em (das entspricht 576 Pixel), z.B. bei einem Smartphone im Querformat, werden die beiden Bereiche main (Bezeichnung für den Contentbereich) und sidebar (Bezeichnung für die Menüleiste) nebeneinander angezeigt, und zwar im Verhältnis 60% zu 40%.
• Zeile 13-19: Ist die Breite der Ausgabefläche mindestens 50em (das entspricht 800 Pixel), z.B. auf einem Notebook, werden die beiden Bereiche nebeneinander angezeigt, und zwar im Verhältnis 70% zu 30%.
• Auch wird die Schriftfarbe der Überschriften (h1-Element) von blau auf dunkelblau oder grün gesetzt, und auch die Schriftgröße vergrößert um den Faktor 1.1 oder 1.2.

 /* Globale Angaben */
 html, body {font-family: Arial; height:100%}
 h1 { color: blue; font-size:1em}
 /* Default-Verhalten für Sidebar und Content */ 
 .main { display:block; width:100%;background:#f4f5f8 }
 .sidebar { display:block; width:100%;background:#f4f5f8 }
 /* Breakpoint bei 576px = 36em für Smartphone im Querformat */
 /* Spalten untereinander 40:60, h1 = dunkelblau */
 @media all and (min-width: 36em){
	.main { float: left; width:60%;}
	.sidebar { float: left; width:40%;}
	h1 { color: darkblue; font-size:1.1em }
 }
 /* Breakpoint bei 800px=50em für Desktop im Querformat */
 /* Spalten nebeneinander 30:70, h1 = grün */
 @media all and (min-width: 50em){
 	.main { width:70%; }
 	.sidebar { width:30%;background:cornsilk }
 	 h1 { color: green; font-size:1.2em }
 }

HTML-Datei: mywebsite/schritt3b/index.html
Nach dem Einbinden des Stylesheets in die HTML-Datei (Zeile 7) wird demjenigem div-Element, das die linke Menüleiste enthält, die Klasse sidebar zugewiesen (Zeile 11), während der Hauptinhalt der Webseite in ein div-Element gesetzt wird, das die CSS-Klasse main zugewiesen hat (Zeile 16). Mehr ist in der HTML-Seite nicht zu tun, die Hauptarbeit des mobilen Designs passiert in dem CSS-Stylesheet.

 <!DOCTYPE html> 
 <html lang="de"> 
 <head> 
   <meta charset="utf-8"> 
   <title>Titel des Unternehmens
   <link rel="stylesheet" href="css/main.css">
 </head>
 <body> 
   <div class="sidebar">
   <h1>Sidebar</h1>
   <p>Menüleiste:
   <br>- Über uns<br>- Unser Angebot<br>- Projekte</p>         		  
   </div>
   <div class="main">
   <h1>Titel des Dienstleistungs-Unternehmens: Inhaltsbereich</h1>         
   <p>Hier entsteht unsere Webseite.
   <br>
   Mit dem aktuellen Angeboten unseres Unternehmens.
   </p>
   <h1>Links zu interessanten Webseiten</h1>
   <p>Weitere Links:
   <br>
   <a href="http://hs-kl.de" target="new">Hier
   geht es zur Hochschule KL!
   </p>	
   </div>	 	      		  
 </body>
 </html>

4 Interaktive JavaScript-Elemente

JavaScript ist eine Skriptsprache, die verwendet wird, um interaktive Webseiten zu erstellen. Mit Hilfe von JavaScript kann man Benutzerinteraktionen programmieren, HTML-Inhalte verändern, nachladen oder generieren, um so die Möglichkeiten von HTML und CSS zu erweitern.
Typische Anwendungsgebiete von JavaScript im Webbrowser sind:

• Datenvalidierung von Formulareingaben noch vor der Übertragung zum Server
• Anzeige von Dialogfenstern
• Datenaustausch, ohne dass der Browser die Seite neu laden muss

JavaScript-Dateien können nur in einem Browser ausgeführt werden, in dem JavaScript aktiviert ist, so dass der Code ausgeführt werden kann. Während JavaScript zunächst vor allem für die clientseitige Programmierung verwendet wurde und als unsicher galt, wird es heute verstärkt auch in der serverseitigen Programmierung eingesetzt.
Javascript-Code kann in eine HTML-Seite auf zwei Arten eingebunden werden:

• entweder inline in <script>-Tags eingebettet oder
• in separate Dateien mit der Endung .js eingefügt.

4-1 JavaScript-Syntax

Die Syntax von JavaScript ähnelt jener von Java oder C.

• Anweisungen sollten mit Semikolon abgeschlossen werden.
• Variablen werden mit let oder var deklariert, im ersteren Fall ist der Gültigkeitsbereich auf den Block der Variablen beschränkt. Es wird kein Datentyp angegeben.
• Arrays sind geordnete Listen von Werten, die unterschiedliche Datentypen haben können.
• In JavaScript gibt es if-else Bedingungen, while- und for-Schleifen wie in Java.
• Funktionen werden mit Hilfe des Schlüsselwortes function deklariert. Eine Funktion wird erst ausgeführt, wenn sie aufgerufen wird, z.B. indem man sie als Eventhandler einem Event zuweist.
• Es kann nur auf Elemente zugegriffen werden, die ein eindeutiges id-Attribut enthalten.

Eine gute JavaScript-Dokumentation mit vielen Beispielen gibt es online, z.B bei SelfHTML (deutsch) oder W3Schools (englisch). Für die Fehlersuche in JavaScript-Code bietet der Google Chrome Browser die Google Entwicklertools an.

4-2 JavaScript am mywebsite-Beispiel

Das mywebsite-Beispiel wird nun um folgende Funktionalität erweitert: bei Anklicken des Buttons "Zeitstempel anzeigen" soll das Datum der letzten Änderung des HTML-Dokumentes in einem farblich hervorgehobenen Abschnitt am Ende des Dokumentes angezeigt werden. Die Funktionalität kann in den hier eingebundenen Browseransichten überprüft werden, einfach den Button "Zeitstempel anzeigen" mehrfach anklicken.

HTML-Datei: mywebsite/schritt4/index.html
Für die Umsetzung wird die index.html-Datei aus dem Verzeichnis mywebsite/schritt4/ verwendet, die um einen inline JavaScript-Code erweitert wurde, sowie eine neu erstellte JavaScript-Datei main.css, die im Verzeichnis mywebsite/schritt4/css abgelegt wird. Im JavaScript-Code wird in Zeile 26 mit Hilfe der Methode document.getElementById("bnt1") das Button-Element geholt und in Zeile 27 wird die Funktion showTimeStamp() als Eventhandler für das click-Event zugewiesen.

 <!DOCTYPE html>
 <html lang="de"> 
 <head> 
   <title>Titel des Unternehmens</title>
   <link rel="stylesheet" href="css/main.css">
   <script src="js/main.js"></script>
 </head>
 <body> 
    <div class="sidebar">
      <h1>Sidebar</h1>
      <p>Menüleiste: <br>- Über uns<br>- Unser Angebot<br>- Projekte</p>         		  
    </div>
   <div class="main">
     <h1>Titel des Dienstleistungs-Unternehmens: Inhaltsbereich</h1>          
     <p>Hier entsteht unsere Webseite.
     <br>Mit aktuellen Angeboten unseres Unternehmens. </p>
     <h1>Links zu interessanten Webseiten</h1>
     <p>Weitere Links:<br>
     <a href="http://hs-kl.de" target="new">Hier geht es zur Hochschule KL! </p>
     <h1>Infos zum Stand der Webseite</h1>
     <p>Letzte Änderung der Webseite anzeigen, bitte Button anklicken:</p> 
     <div style="background-color:yellow;"> <span id="span1">Zuletzt geändert:</span> 
   </div> 
  <button id="bnt1">Zeitstempel anzeigen</button> 
  <script>     
    var mybtn = document.getElementById("bnt1");     
    mybtn.addEventListener("click", showTimeStamp);     
  </script></div></body></html>

JavaScript-Datei: mywebsite/schritt4/js/main.js
Die JavaScript-Funktion showTimeStamp schreibt das lastModified-Attribut des HTML-Dokumentes in das innerHTML-Attribut des Elementes mit der ID "span1". Sie kann entweder inline in den </script>-Bereich am Ende des HTML-Dokumentes geschrieben werden, oder in die externe JavaScript-Funktion main.js ausgelagert werden.

 function showTimeStamp() {         
     const elem = document.getElementById("span1");                       
     elem.innerHTML = '<p>' + document.lastModified + '</p>';           
 } 

5 Erweiterung der Webseite um Daten

JavaScript Object Notation (JSON) ist eine standardisierte Datenaustauschsprache, die auf JavaScript basiert und für den Datenaustausch zwischen Anwendungen und für die Datenspeicherung verwendet wird. JSON wird besonders bei mobilen Anwendungen eingesetzt, da die JSON-Syntax einfacher, lesbarer und leichter für die Weiterverarbeitung und gerade bei mobilen Anwendungen die Performance besser ist.

5-1 JSON-Syntax

Ein JSON-Dokument muss die Endung .json haben und die Daten in einer festgelegten Struktur speichern. JSON verwendet für die Darstellung der Daten zwei Strukturen: Objekte und Arrays.

• Ein JSON-Objekt ist eine ungeordnete Liste von Schlüssel-Wert-Paaren, die durch Kommata getrennt werden. Schlüssel und Wert werden mit Hochkommas kennzeichnet und durch Doppelpunkt (:) getrennt. Das gesamte Objekt wird in geschweifte Klammern gesetzt, z.B. {"Name": "Mustermann", "Vorname":"Max"}
• Ein JSON-Array ist eine geordnete Liste von Werten gleichen oder verschiedenen Typs, die durch Kommata getrennt werden. Das gesamte Array wird in eckige Klammern gesetzt, z.B. ["Führungsebene", "Mitarbeiter/Innendienst", "Mitarbeiter/Außendienst"]
• Die Werte in einem JSON-Dokument müssen einen der folgenden zulässigen Datentypen haben:
  Zahlen: Folge von 0 bis 9, optional mit Dezimalpunkt und/oder Exponent
  Zeichenkette: beginnt und endet mit Hochkommas (")
  Boolesche Werte (true, false), Nullwert (null)
  

Die meisten Programmiersprachen haben eine Schnittstelle zu JSON, d.h. man kann JSON-Objekte einlesen, ausgeben und manipulieren. Da JSON gültigen JavaScript-Code darstellt, kann JSON-Code einfach in ein Javascript-Objekt umgewandelt werden. Dabei wird das statische Objekt JSON verwendet, das Methoden für das Einlesen und Konvertieren von JSON-Objekten in JavaScript enthält, insbesondere die Methoden JSON.parse() und JSON.stringify().

• Die Methode JSON.parse() erzeugt aus einem JSON-formatierten Text ein entsprechendes JavaScript-Objekt.
• Die JSON.stringify() Methode konvertiert einen JavaScript-Wert in einen JSON-String.

Beispiel: mitarbeiter.json
Das folgende JSON-Dokument entspricht einem Datensatz der Tabelle Mitarbeiter eines Unternehmens. Das Objekt, das den Mitarbeiter Max Mustermann darstellt, besteht aus mehreren Schlüssel-Werte-Paaren. Der Wert für den Schlüssel Kontakt ist wiederum ein Objekt. Der Wert für den Schlüssel Funktionen ist ein Array.

{
   "Name": "Mustermann",
   "Vorname":"Max",
   "Kontakt": {
   "Telefon":"0123/456 701",
   "Mail":"max.mustermann@firma.de"
   },
   "Funktionen": ["Vorstand",  "Abteilungschef", "Mitarbeiter", "Projektmitarbeiter"],
}
        

5-2 JSON am mywebsite-Beispiel

Wir verwenden in diesem Abschnitt die index.html-Datei aus dem Verzeichnis mywebsite/schritt5/, die um einen Mitarbeiter-Datensatz erweitert wurde.

Die HTML-Datei enthält in den Zeilen 36 bis 49 einen JavaScript-Code, indem Mitarbeiter als JSON-Daten angelegt und mit Hilfe der Methode JSON.parse() in ein entsprechendes JavaScript-Objekt umgewandelt werden.

HTML-Datei

 <!DOCTYPE html>
 <html lang="de"> 
 
 <head> 
  <meta charset="utf-8"> 
  <title>Titel des Unternehmens
  <link rel="stylesheet" href="css/main.css">
 </head>
 
 <body> 
  <div class="sidebar">
   <h1>Sidebar
    <p>Menüleiste:
    <br>- Über uns<br>- Unser Angebot<br>- Projekte</p>         		  
  </div>
  <div class="main">
   <h1>Titel des Dientsleistungs-Unternehmens: Inhaltsbereich</h1>          
   <p>Hier ensteht unsere Webseite.
   <br>
   Mit dem aktuellen Angeboten unseres Unternehmens.
   </p>
   <h1>Links zu interessanten Webseiten
   <p>Weitere Links:
   <br>
   <a href="http://hs-kl.de" target="new">Hier
   geht es zur Hochschule KL!
   </p>
   <h1>Kontakte</h1>
   <p> 
   Nehmen Sie Kontakt zu uns auf! 
   </p> 
   <p id="p1"></p> 
   <p id="p2"></p> 
   <p id="p3"></p> 
   <p id="p4"></p> 
   <script> 
      var data1 = '[{"Name": "Mustermann", "Vorname": "Max", "Kontakt":{"Telefon":"0123/456 701","Mail":"max.mustermann@firma.de"},\n\ 
        "Funktionen":"Beratung/Angebote"}]'; 
      var data2 = '[{"Name": "Muster", "Vorname": "Maxima", "Kontakt":{"Telefon":"0123/456 702","Mail":"maxima.muster@firma.de"},\n\ 
        "Funktionen":"Beratung/Support"}]';              
      var obj1 = JSON.parse(data1); 
      document.getElementById("p1").innerHTML = obj1[0].Funktionen + ":"; 
      document.getElementById("p2").innerHTML = 
      obj1[0].Name + ", " + obj1[0].Vorname+ ", " + obj1[0].Kontakt.Mail; 
      var obj2 = JSON.parse(data2); 
      document.getElementById("p3").innerHTML = obj2[0].Funktionen + ":"; 
      document.getElementById("p4").innerHTML = 
      obj2[0].Name + ", " + obj2[0].Vorname+ ", " + obj[0].Kontakt.Mail + ", " + obj2[0].Kontakt.Telefon; 
  </script> 
  </div> 	      		  
 </body>
 </html>

In den Zeilen 32-35 werden Paragraphen (<p>-Tag) mit id-Attributen angelegt, diese werden im JavaScript-Code mit Text befüllt.

In den Zeilen 37-40 werden zwei Mitarbeiter im JSON-Datenformat angelegt, die dann in den Zeilen 41 und 45 in entsprechende JavaScript-Objekte obj1 und obj2 mit Hilfe der JSON.parse-Methode umgewandelt werden.

Die Eigenschaften (in JSON: die angelegten Schlüssel des JSON-Objekts) werden dann durch Punkt-Notation (obj1[0].Name, obj2[0].Funktionen, usw.) abgerufen und durch die JavaScript-Methode, z.B. document.getElementById("p1").innerHTML dem Paragraphen mit der id "p1" als String übergeben.

Autoren, Tools und Quellen