„In JavaScript lässt sich je nach Bedarf objektorientiert, prozedural oder funktional programmieren.“ (JavaScript auf de.wikipedia.org. Abgerufen am 04.04.2022).

JavaScript wird in Webanwendung client- wie auch serverseitig eingesetzt. Mit JavaScript lassen sich Anwendungen, Spiele und Mikrocontroller programmieren. In der Schule bietet sich besonders die Webprogrammierung an – dafür sprechen mehrere Gründe: Jeder geht täglich mit einem Browser oder anderen Programmen ins Internet. Anwendungen im Web reichen von einfachster Darstellung, die je nach Vorkenntnissen von einem 5.- bis 7.-Klässler erbracht werden kann, bis zu komplexen Anwendungen, bei denen im Backend Datenbanken angebunden werden, für höhere Klassenstufen. Die Szenarien einer Webanwendung sind so breit gefächert, dass sich viele Lehrplaninhalte damit abdecken und realisieren lassen – nachfolgend einige Beispiele. 

Struktur und Aufbau einer HTML-Seite mit Objekten und Attributen

Direkt im Anschluss an erste Erfahrungen mit zum Beispiel EOS kann mithilfe objektorientierter Sprache eine Internetseite erstellt werden. In HTML stehen Objektnamen in Spitzklammern und rahmen, wie mit Klammern in der Mathematik, das Objekt ein. Im Beispiel steht links der HTML-Programmcode, rechts die damit erzeugte Seite in einem Browser: 

Als Beispiel steht <h1> für eine Überschrift (header) der Kategorie 1 oder <p> für einen Absatz (paragraph). Ein Eingabefeld ist das Objekt <input> und mit dem Attribut type und dem Attributwert number wird es als Eingabefeld für Zahlen spezifiziert.

Algorithmen mit JavaScript

Mit JavaScript lassen sich beliebige Aufgaben programmieren, wie hier zum Beispiel eine Rechnung.

und klassische Algorithmen wie die Gaußsche Summenformel(Gaußsche Summenformel von de.wikipedia.org. Abgerufen am 04.04.2022). Die nach Karl Friedrich Gauß benannte Lösungsformel berechnet die Summe der ersten n natürlichen Zahlen: 1 + 2 + 3 + ... + n = (n*(n+1))/2, wie zum Beispiel 1 + 2 + 3 + ... + 10  ist 55.

CSS

Der Inhalt einer Webseite wird mit HTML erstellt, das Aussehen mit Stylesheets. CSS steht für Cascading Style Sheets, was übersetzt „gestufte Stilvorlagen“ bedeutet. Es handelt sich dabei im Allgemeinen um Attribute zu den HTML-Objekten, im Speziellen um Eigenschaften zur Gestaltung und Formatierung. Diese ‘Beschreibungs-Dateien‘ können genau wie das JavaScript in einer separaten Datei stehen. In größeren Projekten arbeiten auf diese Weise unterschiedliche Entwicklerteams, zum einen am Inhalt der Seite, zum anderen am Design und ein weiteres Team erstellt die Programmierung. Wir finden diese Unterscheidung zwischen Webdesigner und Webprogrammierer auch in den Ausbildungsberufen. Das Profil eines Webdesigners liegt mehr im künstlerischen Bereich, aber und auch der Bedienbarkeit und Bedienungsfreundlichkeit einer Seite und damit gut in den gestaltenden Zweig der Realschule. Wahrscheinlich gibt es heutzutage kaum mehr ein Produkt, was sich ohne ein entsprechendes Aussehen und Handhabung verkauft.

Es geht also um Design, Stil und die strukturelle Gestaltung einer Webseite. Das nachfolgende Beispiel zeigt denselben HTML-Code, einmal mit und einmal ohne CSS.

Mit CSS bekommt die Seite eine 2-dimensionale Einteilung in verschiedene Bereiche wie Kopf- und Fußzeile, einen linken Bereich für den Hauptinhalt und rechten z. B. für Sponsoren oder Werbung. Dazu wird Schrift und Farbe angepasst und Absätze in einer Art weißen Kärtchen dargestellt. Das HTML-Objekt <div class=“card“>…</card> kann als Beispiel über das Attribut class und dem Namen “card“ nun mit CSS-Code beschrieben werden kann:

Client-, Servearchitektur und Datenbanken

Das Konzept einer verteilten Anwendung meint im professionellen Bereich eine Anwendung, die zusammen mit einer Datenbank auf einem Server läuft. Der Client kann sich über ein Netzwerk mit dem Server verbinden und einen Dienst anfordern.

Hier als Beispiel ein Gästebuch auf einer Homepage zum schriftlichen Austausch mit anderen Schülern. Die Mitteilungen werden über ein HTML-Formular auf einen Server geleitet und dort in einer Datenbank gespeichert. Im minimalsten Fall gibt es so in der Datenbank zwei Tabellen, eine mit allen Schülern und eine zweite mit den Gästebucheinträgen, mit Namen und E-Mail der Person, die den Eintrag geschrieben hat. Daraus ergibt sich eine 1:n Beziehung zwischen den beiden Tabellen. Ein Zugriff mittels SQL auf die Tabellen der Datenbank sieht im Programmcode dann wie folgt aus:

Gästebucheintrag in der DB speichern:

INSERT INTO gaestebuch (name, email, text, user_id)

                        VALUES (:name, :email, :text, (SELECT id FROM user WHERE name = :user));

Gästebucheinträge aus der DB für den angegebenen Benutzer nach neustem Eintrag sortiert holen:

SELECT * FROM gaestebuch WHERE user_id =

                              (SELECT id FROM user WHERE name = :user)

                              AND deleted_at IS NULL ORDER BY created_at DESC

Einführung in die Programmierung

In den Jahrgangsstufen 6 oder 7 beginnen wir mit dem Einstieg in HTML. Eine eigene Seite mit Links zum Lieblingshobby und einem Bild, vielleicht einem selbst erstellten Logo, womit ein Bezug zum Modul 1.5 „Einführung in die Bildbearbeitung“ gegeben ist. Die dabei typischen HTML-Objekte zur Textgestaltung wie Schriftart und Schriftschnitt, Absatz, Überschrift, Listen und Aufzählungen, Tabellen, Abstände und Farben beleuchten beiläufig das Modul 1.3 „Einführung in die Textverarbeitung“ von einer objektorientierten Seite. Auch die Einbindung einer Präsentation auf der Seite ist möglich. Das Foliendesign ist das der eigenen Webseite, das Logo vielleicht selber gemacht, die Größen skalieren sich dank SVG-Grafiken und -Texten von selbst und passen sich dem Ausgabemedium an. Fremde Lehrfilme, Animationen, selber erstellt Audio- oder Videodateien, Querverweise, die auf Nachfrage direkt gezeigt werden können, Fragen und Abstimmungen, die direkt ausgewertet werden und zum Abschluss ein kleiner Test mit Fragen, bei dem die Zuhörer mit ihren Handys teilnehmen. 

Modellieren und Codieren von Algorithmen

Die allermeisten Programme verfügen zur Ein- und -ausgabe über eine grafische Benutzeroberfläche. Dies geschieht bei einer Webseite im HTML-Code. Die Programmlogik, die Berechnungen, die Algorithmen werden mit JavaScript programmiert.

Erste einfache Aufgaben sind zum Beispiel das Quadrat einer Zahl oder die Erstellung einer Rechnung mit MwSt. Dabei liegt der Fokus auf dem Programmablauf und der Benutzung von Variablen:

var ergebnis = stunden * stundensatz * (1 + mwst);

Nach diesen Basics sind wesentlichen Konstrukte einer Programmiersprache Bedingungen und Schleifen. So würden im nächsten Schritt Programme erstellt, bei denen der Ablauf des Programms von Bedingungen abhängig ist, wie zur Berechnung des BMI – Body-Mass-Index, bei dem die Aussage, ob berechneter BMI nun als untergewichtig oder normal gewichtig gilt, vom Alter abhängt. Oder beim Lösen eine quadratische Gleichung muss nach dem Vorzeichen der Diskriminante unterschieden werden.

In einem letzten Schritt kommen Schleifen hinzu. Mit diesen Mehrfachanweisungen lassen sich dann so gut wie alle klassischen Algorithmen umsetzten.

Beispiele: Der Kleine Gauß, die Fakultät, Zinseszinsrechnung einschließlich einer Zielwertberechnung, Sortierungen, Zufallszahlen, der Euklidischer Algorithmus zur Ermittlung des ggT oder das Sieb des Eratosthenes.

Objektorientierter Softwareentwicklung

Zunächst ist mit JavaScript eine objektorientierte Programmierung möglich. Dazu stehen Objekte, Konstruktoren, Klassen und Prototypen zur Verfügung. Neben der OOP (Objektorientierte Programmierung) kommen in den verschiedenen Phasen einer objektorientierten Softwareentwicklung typische Werkzeuge wie Mindmapping-Tools in der Analyse, Strukturdiagramme wie UML und Programmablaufdiagramme im Entwurf hinzu. Zu einem echten Entwicklungsprozess gehört natürlich immer die Testphase dazu. Beim folgenden Beispiel zur Berechnung des Body-Mass-Index, BMI, könne alle Schüler über die erstellte Webseite zusammen testen:

Webdesign

Hier zwei Zitate zu den Kompetenzerwartungen des LehrplanPLUS: „verwenden die Auszeichnungssprache HTML, um Texte zu formatieren und zu strukturieren, Objekte einzubinden und Verknüpfungen zu erzeugen.“ und „Strukturen und Regeln für die Auszeichnungssprachen HTML und CSS nach den Standards des World Wide Web Consortium“ und ein Zitat zu den Inhalten: „entwerfen das Design für eine Webseite und berücksichtigen die dafür erforderlichen gestalterischen Ziele, Anforderungen und Standards.“

IT Projekt

Ein IT-Projekts bietet die Chance für aufwändigere Aufgaben: eine Homepage, die mit serverseitiger Logik und Datenbank daherkommt; Lern-Apps, bei denen die Programmierung aufwändiger ist und bei der die Daten ebenfalls in einer Datenbank gespeichert werden oder kleinerer Spiele. Denkbar wäre aber auch das Erstellen einer Lerneinheit für ein beliebig anderes Schulfach mit moodle oder ein Multimediaprojekt mit Video- und Bildbearbeitung, die in einer Webseite eingebettet sind.

Datenbanken

Wie die vorangegangenen Beispiele gezeigt haben, gibt es viele Webanwendung mit Backend. Backend bezeichnet Programme, die auf dem Server ausgeführt werden und bei der eine Datenbank angebunden ist. Voraussetzung ist ein Webserver und eine Datenbank auf dem Schulrechner. Mit XAMPP gibt es eine beliebte und schon seit Jahren freie Software mit dem Apache Webserver und der MariaDB (vormals MySQL) als Datenbank. Damit ist man dann auch schon ganz im Lehrplanmodul Datenbanken und hat die Möglichkeit, mit einer echten DB zu arbeiten. Dazu gehören auch Datenbankabfragen mit SQL. SQL – Structured Query Language – ist die Datenbanksprache schlecht hin.

SELECT * FROM fach; bzw. SELECT * FROM jgst;.

Je nach gewähltem Kriterium werden entsprechende Test aus der Tabelle ‘testname‘ gesucht und in die 3. Dropdown-Liste geladen.

SELECT name, bemerkung FROM testname WHERE id_jgst =

                       (SELECT id FROM jgst WHERE jgst = 7) AND id_fach =

                       (SELECT id FROM fach WHERE fach = ‘Mathematik GW‘)

                        AND id_testart =

                       (SELECT id FROM testart WHERE testart = ‘mc‘);

Netzwerke

Beim Thema Netzwerke kommen zwei unterschiedliche Aspekte zum Tragen. Zum einen sind es die URL und das Übertragungsprotokoll http bzw. https bis herunter zum TCP/IP, die in den Ebenen 3 bis 7 im OSI-Modell eingebettet sind. Auf der anderen Seite ist die Geschichte des Internets, spannend und von allgemeinbildender Bedeutung. Vom Arpanet der 70er Jahre, mit der Entwicklung von TCP/IP im Sommer 1973 von Robert E. Kahn und Vinton Cerf, der ersten E-Mail 1971 von Ray Tomlinson, der Erfindung des HTML von Sir Timothy Berners-Lee 1990 am CERN, bis zum ersten Webbrowser Mosaic 1993. Seit 1998 gibt es Google mit ihrer Suchmaschine auf und seit 2008 existiert Android, ein Jahr später als Apples iPhones, auf den ersten Smartphones.

Mit TCP/IP „Die Identifizierung der am Netzwerk teilnehmenden Rechner … über IP-Adressen.“ und dem „Transmission Control Protocol … ist ein Netzwerkprotokoll, das definiert, auf welche Art und Weise Daten zwischen Netzwerkkomponenten ausgetauscht werden sollen“(Transmission Control Protocol auf de.wikipedia.org. Abgerufen am 04.04.2022), ist man übers Internet tief im Thema Netzwerke. Hier besteht ein schöner fließender Übergang einer Webanwendung, eingebettet in einem geschichtlichen Rahmen, bis zu kleinen Netzen aus technischer Sicht.