›  Demo: 10 Schritte zur eigenen mobilen Webseite
›   Teil 1: Mobile Webseite mit HTML, CSS, JavaScript und JSON

Dieser Demonstrator des elab2go zeigt, wie mit Hilfe grundlegender Web-Technologien (HTML, CSS, JavaScript, JSON, PHP) in 10 Schritten eine eigene mobile Webanwendung entwickelt und auf einem Webserver gehostet wird. Teil 1: Mobile Webseite mit HTML, CSS, JavaScript und JSON beschäftigt sich mit dem Erstellen einer statischen Webseite mit HTML, CSS, JavaScript und JSON. Teil 2: Mobile dynamische Webseite mit PHP zeigt, wie eine dynamische Webseite mit Datenbankanbindung mit Hilfe der Skriptsprache PHP erstellt wird.

Wir erläutern die Grundlagen der Sprachen 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 dienen ebenfalls dem responsivem Webdesign.

Vorbereitung der Entwicklungsumgebung

Moderne Webanwendungen werden mit Hilfe von Programmierplattformen und Frameworks entwickelt, die die Entwicklung und Ausführung von Anwendungsprogrammen unterstützen. Programmierplattformen unterstützen standardisierte Spezifikationen für verteilte Softwarearchitekturen und stellen Komponenten, Schnittstellen und verschiedene Dienste zur Verfügung, so dass Softwareentwickler bei der Implementierung schon mit einem vorhandenen Gerüst anfangen können.
Häufig eingesetzte Programmierplattformen sind der XAMPP-Stack, Java Enterprise Edition, das Java Spring Framework, und Microsoft .NET. In dieser Demo verwenden wir den XAMPP-Stack, da dies für Einsteiger am einfachsten zugänglich ist.

Das XAMPP-Paket ist ein Open-Source-Programmpaket, bestehend aus dem Apache Webserver, als verwendbare Datenbank die MariaDB oder MySQL-Datenbank, der Syntax-Unterstützung für PHP und PERL. XAMPP ist für das Windows-, Linux- und MAC-Betriebssystem erhältlich. 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. Die Bestandteile des XAMPP-Paketes werden ohne lange Konfigurationszeiten installiert und stehen unmittelbar zur Verfügung.

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 NetBeans oder Eclipse verwendet werden, die auch Unterstützung bei der Fehlersuche bieten, wobei in dieser Demo NetBeans verwendet wird.

Schritt 1 - Verzeichnisstruktur erstellen

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.

Schritt 2 - HTML-Dokument 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 Versionen 4.0, XHTML oder die neue Version HTML 5. 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.

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.

Schritt 3 - CSS Stylesheet erstellen

Neben der Strukturierung eines WWW-Dokuments anhand des HTML-Dokuments spielt bei der Formatierung des Dokuments eine weitere Sprache eine Rolle. Durch die Formatierungssprache Cascading Style Sheets (CSS) wird das Layout des HTML-Dokuments festgelegt.

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.

Eine CSS-Datei ist in CSS-Syntax geschrieben. Für jede Formatierungsangabe wird ein Regelsatz angegeben, der zwei Bestandteile hat:

• 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.

Erweitertes HTML-Dokument und CSS-Datei am mywebsite-Beispiel des Dienstleistungs-Unternehmens

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.

 <!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 Dientsleistungs-Unternehmens</h2>
 <!-- Inline-Formatierung über das "style"-Attribut, überschreibt die 
 Formatierung in der externen CSS-Datei: -->
 <!-- <h2 style="color:slateblue">Titel des Dientsleistungs-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="new">Hier</a>
 geht es zur Hochschule KL!
 </p>
 </body>
 
 </html>

 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;} 

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 Media Queries und welche Wirkung haben diese Abfragen auf das Layout?

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;}
 } 

HTML-Dokument und CSS-Datei mit Media Queries

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

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>

Ausgabe im Hochformat und Querformat

Schritt 4 - Erweiterung um interaktive JavaScript-Elemente

JavaScript ist eine Skriptsprache, die verwendet wird, um dynamische 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. Dies wird insbesondere bei der Erstellung mobiler Webseiten eingesetzt.
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.
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.

Die Syntax der Skriptsprache JavaScript wird direkt am Anwendungsbeispiel des Dienstleistungs-Unternehmens erläutert.

Verwendung von JavaScript im mywebsite-Beispiel des Dienstleistungs-Unternehmens

Wir verwenden in diesem Abschnitt die index.html-Datei aus dem Verzeichnis mywebsite/schritt4/ , die um einen inline-Aufruf von JavaScript-Code erweitert wurde.

Die HTML-Datei enthält in den Zeilen 35 bis 45 einen JavaScript-Code, der beim Anklicken des Buttons „Zeitstempel anzeigen“ ausgeführt wird, und zwar wird beim Anklicken in dem gelb markierten Bereich der Zeitstempel angezeigt, wann die Datei zuletzt geändert wurde.

 <!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 Dienstleistungs-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>Infos zum Stand der Webseite</h1>
   <p>Letzte Änderung der Webseite anzeigen, bitte Button anklicken:</p> 
   <div style="width:100%;height:100px;background-color:yellow;">     
    <span id="span1">
    Zuletzt geändert:
   </span> </div> 
  <button id="bt1">Zeitstempel anzeigen</button> 
  <script>     
    var elem1 = document.getElementById("bt1");     
    elem1.addEventListener("click", showTimeStamp);     
    function showTimeStamp() {         
     var elem2 = document.getElementById("span1");         
     var text = document.createTextNode(document.lastModified);         
     var absatz = document.createElement("p");         
     absatz.appendChild(text);
     elem2.appendChild(absatz);              
     } 
  </script> 
  </div> 	      		  
 </body>
 </html>

Schritt 5 - JSON - 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.

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"],
}
        

Verwendung eines JSON-Datensatzes im mywebsite-Beispiel des Dienstleistungs-Unternehmens

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.

 <!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>

Autoren, Tools und Quellen