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

info-icon Motivation

Mobiles Webdesign ein Muss

In der heutigen Zeit der Tablets und Smartphones ist die Verwendung eines mobilen Designs ein Muss. Für den großen Webauftritt kommen Content-Management-Systeme wie TYPO3 zum Einsatz, für kleinere Webseiten werden häufig Baukastensysteme eingesetzt.

Problem: Abhängigkeit vom Anbieter

Die Abhängigkeit vom Angebot des Anbieters und dessen Auswahl an Technologien schränkt die Funktionalität der Technologien sehr ein. Kostenpflichtige Angebote haben oft sehr mächtige Funktionalität, die Expertenwissen erfordert. Kostenlose Baukastensysteme habe andererseits stark eingeschränkte Funktionalität oder weisen das Branding des Anbieters aus.

Lösung: Flexibilität durch Web-Technologien

Die Verwendung von Basis-Web-Technologien zur Erstellung einer Webseite bietet mehr Flexibilität als die Verwendung von angebotenen Webbaukasten-Systemen, da diese in der kostenlosen Version oft ein reduziertes Angebot an Technologien aufweisen und das Labeling des Anbieters nicht entfernt werden kann.

Unsere Demo vermittelt auf einfache und anschauliche Weise das benötigte Wissen, um die Flexibilität und Möglichkeiten der neuen Web-Technologien für Einsteiger der Webseitenprogrammierung zugänglich zu machen.

info-icon 5 Schritte zur mobilen Webseite mit HTML, CSS, JavaScript und JSON

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.

Die Schritte eins bis fünf zur eigenen statischen mobilen Webanwendung werden im Folgenden aufgeführt:

Vorbereitung: Programmierplattform und Entwicklungsumgebung

Dieser Schritt bietet einen Überblick über die gängigen Programmierplattformen und deren Einsatzgebiete. Weiterhin werden Vorteile und Nachteile gängiger Entwicklungsumgebungen angesprochen.

Schritt 1: Verzeichnisstruktur erstellen

Eine Webseite besteht aus Ressourcen-Dateien (HTML-Seiten, CSS-Dateien, JavaScript-Dateien) Bilder, die in einer überschaubaren Verzeichnisstruktur abgelegt werden sollten.

Schritt 2: HTML-Dokument erstellen

Die Bedeutung und der Aufbau eines HTML-Dokuments werden erläutert und die Syntax anhand einer ersten HTML-Datei verdeutlicht.

Schritt 3: CSS-Stylesheet erstellen

Dieser Schritt beinhaltet die Anpassung des Layouts eines HTML-Dokuments mit Hilfe einer CSS-Datei. In der CSS-Datei wird durch Abfragen zum Endgerät eine einfache und schnelle Umsetzung eines Responsive, d.h. des mobilen, Designs ermöglicht.

Schritt 4: JavaScript für die Erzeugung interaktiver Inhalte

Dieser Schritt erläutert wie auf ein Element des HTML-Dokumentes zugegriffen und auch neue Elemente erzeugt werden können, diese können dann in Funktionen verwendet werden und bei Eintreten eines vom User ausgelösten Events verändert und angepasst werden.

Schritt 5: JSON für die Datenspeicherung

Dieser Schritt erläutert, wie das Datenaustauschformat JSON für die Datenspeicherung eingesetzt werden kann.

Vorbereitung: Programmierplattform und 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:

Hauptordner Unterordner Inhalt (Dateien)
mywebsite /schritt2 index.html
/schritt3a index.html
/schritt3a/css main.css
/schritt3b index.html
/schritt3b/css main.css
/schritt4 index.html
/schritt4/css main.css
/schritt5 index.html
/schritt5/css main.css

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:

Die HTML-Sprachelemente werden unterteilt in verschiedene Kategorien, wie

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 am mywebsite-Beispiel des Dienstleistungs-Unternehmens

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

HTML-Datei

 <!DOCTYPE html> <!-- Dokumenttyp-Deklaration -->
 <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 dem aktuellen Angeboten unseres Unternehmens. 
 </p>
 </body>
 
 </html>

Erläuterung


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 4 und endet mit Zeile 6, dieser enthält das title-Element zur Angabe des Titels des Dokuments. Das body-Element (Zeile 7- 13) 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:

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:

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

CSS_Beispiel_1

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.

HTML-Datei

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

Erläuterung

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 verlinkte Seite festgelegt, der mit dem Eigenschaft-Wert-Paar target="new" in einem neuen Tab geöffnet wird. Der Text, der im a-Element Start- und End-Tag eingeschlossen ist, stellt den Link dar (hier 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 Tab "Anzeige im Webbrowser, 2". Das h2-Element in Zeile 10 folgt den Regeln der externen CSS-Datei, siehe Tab "Anzeige im Webbrowser, 1".

Das HTML-Dokument erzeugt folgende Anzeige im Webbrowser, wenn Zeile 10 im index-html für die Überschrift h2 verwendet wird:

Wenn Zeile 13 mit der Inline-Formatierung statt Zeile 10 aktiv, also nicht auskommentiert ist, dann erscheint folgende Ausgabe im Webbrowser:

CSS-Datei: 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;} 

Code-Beschreibung

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.

Responsives Webdesign: Media Queries im CSS-Stylesheet

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 am mywebsite-Beispiel des Dienstleistungs-Unternehmens

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

 /* 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 }
 }

Code-Beschreibung

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.

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

Code-Beschreibung

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.

Das HTML-Dokument erzeugt folgende Default-Anzeige auf dem Endgerät im Hochformat.

Das HTML-Dokument erzeugt folgende Anzeige auf dem Endgerät im Querformat.

Das HTML-Dokument erzeugt folgende Anzeige auf dem Notebook im Querformat.

Schritt 4: JavaScript - Erweiterung der Webseite um interaktive 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:

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:

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.

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 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>
  • Anweisungen sollten mit Semikolon abgeschlossen werden.
  • Variablen werden mit var deklariert, es wird kein Datentyp angegeben.
  • Es kann nur auf Elemente zugegriffen werden, die ein eindeutiges id-Attribut enthalten.
  • 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.
  • In den Zeilen 30 bis 33 wird mit dem <div>-Tag ein Bereich deklariert, der einen formatierten Text (<span>-Tag) enthält.
  • In Zeile 34 wird eine Schaltfläche mit Hilfe des <button>-Tags deklariert. Das <span>-Element und das <button>-Element erhalten jeweils eine eindeutige id.
  • Im JavaScript-Code wird in Zeile 36 mit Hilfe der Methode document.getElementById("bt1") das Button-Element geholt und in Zeile 37 wird die Funktion showTimeStamp als Eventhandler für das click-Event zugewiesen.
  • Die Funktion showTimeStamp() wird in Zeile 38-44 definiert:
    Zunächst wird das Element mit der ID span1 geholt, dann ein neuer Textknoten erzeugt, der als Inhalt den Zeitstempel enthält, dann ein Absatz-Element erzeugt und ihm dieser Textknoten zugewiesen, und zuletzt das Absatz-Element mit appendChild and das Element mit der ID span1 angefügt.

Das HTML-Dokument erzeugt folgende Default-Anzeige auf dem Endgerät im Hochformat.

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.

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().

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.

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.

Das HTML-Dokument erzeugt folgende Default-Anzeige auf dem Endgerät im Hochformat.

Üblicherweise stehen JSON-Daten nicht inline zur Verfügung, sondern werden in separate JSON-Dateien geschrieben. In diesem Fall wird JSON.parse() in einer Funktion aufgerufen.

JSON wird häufig als Datenformat bei JavaScript-Anwendungen namens Ajax verwendet, insbesondere auch im Zusammenspiel mit der JavaScript-Bibliothek jQuery, Erläuterungen dazu folgen in Teil 2 dieser Demo.

Mit Beiträgen von: Anke Welz, Eva Maria Kiss
Tools: XAMPP-Paket, NetBeans-Umgebung