JavaScript

Die Erfindung der Sprache JavaScript ist mittlerweile 22 Jahre her.
Der damalige Browser Hersteller Netscape stand unter starkem Konkurrenzdruck. Microsoft befürchtete, dass sich Netscape als eine Art Middleware auf Windows durchsetzen würde. Damit wäre Microsofts damaliges Betriebssystem Monopol bei PCs gefährdet gewesen. Microsoft entwickelte 1995 einen eigenen Browser, nannte ihn Internet Explorer, und wollte ihn zum kostenlosen Standard Browser machen. Netscape hatte damals mehr als 80% Marktanteil und verkaufte seinen Browser an die Kunden! Der Netscape Browser bot die Möglichkeit Programme, die in „der“ Programmiersprache Java geschrieben waren, im Browser als sogenannte Applets darzustellen. Diese Applets hatten Schnittstellen zu herkömmlichen Java Programmen und zur HTML basierten Website in der sie eingebettet waren. So konnten „die Website“, „das Applet“ und „der Server“ miteinander kommunizieren. Microsoft hatte keine vergleichbare Technologie, konnte aber den Internet Explorer mit dem Windows Betriebssystem unter Missachtung gängiger Standards enger verzahnen als Netscape und hatte außerdem ein vergleichsweise endlos großes Budget. Netscape benötigte also auf Sicht ein weiteres Feature das Microsoft nicht hatte.

In einem gemeinsamen Projekt mit der Firma Sun, die hinter der Sprache Java stand, entstand die neue Skriptsprache LiveScript um Benutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und so die Möglichkeiten von HTML und CSS auch ohne den Einsatz von Java zu erweitern. LiveScript war gut, weil man bei der Erstellung von Programmen keine Java Entwicklungsumgebung benötigte und „viel einfacher“ programmieren konnte. 1996 wurde LiveScript, in Absprache mit der Firma Sun, in JavaScript umbenannt um von der großen Popularität der Java Technologie zu profitieren.

JavaScript ist eine dynamisch typisierte, objektbasierte, aber klassenlose Skriptsprache mit einer ähnlichen Syntax wie C, Perl oder Java, unterscheidet sich jedoch in vielerlei Hinsicht von Java. Trotz der Ähnlichkeit der Namen der beiden Programmiersprachen unterscheidet sich Java stärker von JavaScript als zum Beispiel von C++ oder C#. JavaScript wird vornehmlich in HTML-Seiten zur eingebetteten Programmierung verwendet, um interaktive Webapplikationen zu ermöglichen.
Wikipedia

Von 1995 bis 2003 sank der Marktanteil des Netscape Navigator von über 80 Prozent auf unter vier Prozent, während der Marktanteil des Internet Explorer im selben Zeitraum von unter drei Prozent auf über 95 Prozent stieg.

Die Programmiersprache JavaScript ist seitdem immer wieder auf- und untergetaucht. Meist im Zusammenhang mit Sicherheitsproblemen durch das Sandbox Prinzip. JavaScript Programme werden in einer Sandbox ausgeführt um sie von anderen Anwendungen aus Sicherheitsgründen abzuschirmen. Wenn du in einem Fenster die Website deiner Bank hast und Geld überweist, möchtest du nicht, dass die Website in einem anderen Browserfenster den Transfer mitlesen oder anderweitig beeinflussen kann. Mittlerweile scheint JavaScript allerdings weitgehend sicher zu sein und wird gern zum Ausprobieren neuer Ideen genommen. Seit ein paar Jahren werden die meisten interessanten technologischen Neuigkeiten in dieser Sprache programmiert. Dabei geht es oft um Erweiterungen bestehender Systeme, wie beispielsweise das Gutenberg oder das Calypso Projekt in WordPress.

Die Sprache läuft auch auf Servern (Node.js) und ist wirklich sehr weit verbreitet.

Microsoft ist heute einer der stärksten Befürworter einer Standardisierung von JavaScript und bietet Schnittstellen zu den meisten Microsoft Produkten an, beispielsweise für Office (JavaScript API for Office reference). Mit dem Entwicklungstool Visual Studio lassen sich mit JavaScript Apps für Android (Google/Java) und iOS (Apple, Objective-C, Swift) Geräte erstellen.

Die Zukunft sieht wohl so aus, dass immer mehr Firmen proprietäre Softwareprodukte mit Schnittstellen anbieten, die dann von JavaScript angesprochen werden können.

Es ist also wirklich höchste Zeit JavaScript zu lernen.
Das ist nicht schwer und macht Spaß.

HTML

Das Gerüst einer HTML Seite sieht heute so aus:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Test</title>
  </head>
  <body>
    Hallo Welt
  </body>
</html>

Der Browser interpretiert die Seite und gibt „Hallo Welt“ aus. Der Text „Hallo Welt“ muss in einer Datei stehen (test.html). Das heisst, wenn ein anderer Text ausgegeben werden soll, muss diese Datei geändert werden. Genau das möchte man aber vermeiden bei interaktiven Techniken. Um den Text ändern zu können, benötigt man eine Datenquelle aus der der Text kommt und eine Programmiersprache, die das alles organisiert.

HTML + JavaScript

Fangen wir mit der Programmiersprache an. Das ist das komplette Programm. Es muss als Datei mit der Endung HTML gespeichert und dann im Browser aufgerufen werden.

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Test</title>
    <script>
      window.onload = function()
      {      
document.getElementById("output").innerHTML = "Hallo Welt";
      }
    </script>
  </head>
  <body>
    <div id="output"></div>
  </body>
</html>

Um den „Hallo Welt“ Text verändern zu können, muss er ansprechbar sein, also gewissermassen eine Adresse (ID) haben. Das <div> Tag eignet sich in HTML gut für solche Dinge. Ich ersetze einfach den Hallo Welt Text aus dem ersten Beispiel durch ein div-Tag mit einer ID.

<div id="output"></div>

Nun ist es möglich zu sagen „Schreibe an die Stelle mit der ID output den folgenden Text“. Normalerweise schreibt man solche Befehle in den <head> Bereich einer Seite, da sie ja die Ausgabe im <body> Bereich beeinflussen und daher außerhalb stehen sollten. Damit der Browser weiß, dass nun Programmierbefehle kommen, muss der Befehl noch in <script> Tags eingeschlossen werden.

  <head>
    <title>JavaScript Test</title>
    <script>
      ...
    </script>
  </head>

Der eigentliche Befehl ist eher wie eine Geschichte zu lesen.

• Zunächst muss definiert werden, wann der Text geändert werden soll. Dafür benötigt man einen der vielen sogenannten EventHandler. In meinem Fall soll der Zeitpunkt sein, wenn die Seite geladen wird – window.onload.
• Der nächste Schritt ist die Beschreibung was denn passieren soll. Wir wollen an einer bestimmten Stelle im Dokument etwas ausgeben. Also müssen wir diese Stelle im Dokument irgendwie laden und ihr einen Wert zuweisen.
  document – Das ist das komplette Dokument
  getElementById(„output“) – Suche nach der ID output
  innerHTML = „…“ – weise den Text zu
  Diese Befehle werden mit Punkten verbunden, so dass ein langer Befehl entsteht.

window.onload = function()
{
  document.getElementById("output").innerHTML = "Hello World";
}

Im Browser hat sich nicht wirklich etwas geändert. Wieder steht dort Hallo Welt. Diesmal ist der Text aber dynamisch erzeugt worden.
Wenn ich einen anderen Text haben will, muss ich allerdings immer noch die Datei verändern. Die Datenquelle meiner Texte fehlt noch. Datenquellen sind sehr unterschiedlich und so fragen wir einfach den Benutzer, ob er etwas eintippt.

Ein Editor

Es ist praktisch, einen Editor mit einer auto-vervollständingen Funktion zu haben damit die Eingabe des Programm Codes einfacher ist, ich benutze Sublime.

Eine Benutzereingabe ausgeben

Ich will, dass der Besucher der Seite etwas eintippt und dieser Text wird soll dann auf der Seite ausgegeben werden. Hört sich einfach ist, ist aber doch ein recht komplexes Unterfangen, da ich ein Eingabefeld für den Text benötige, einen Buttonklick, um zu wissen wann die Texteingabe abgeschlossen ist und dann noch die Ausgabe irgendwie organisieren muss. So soll das am Ende aussehen:

Das ist der Quellcode:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Ein- und Ausgabe</title>
    <script>
      window.onload = function()
      {
        var submitButton = document.getElementById("meinButton");
        submitButton.addEventListener("click", output);
      }
      function output(){
        var name = document.getElementById("name").value;
        document.getElementById("output").innerHTML = "<h1>Hallo " + name + " </h1>";
      }
    </script>
  </head>
  <body>
    <label for = "name">Name:</label>
    <input type="text" id="name" />
    <button type="submit" id="meinButton">Ausgabe</button>
    <div id="output"></div>
  </body>
</html>

Eingabefeld: In HTML lässt sich mit <label> und <input> ein Eingabefeld erstellen. Hier mit der ID name.

    <label for = "name">Name:</label>
    <input type="text" id="name" />

Button: Auch ein Button ist leicht erstellt:

<button type="submit" id="meinButton">Ausgabe</button>

Nun kommt der JavaScript Teil. Ich will dieses Mal nicht gleich beim Laden der Seite etwas ausgeben, sondern erst, wenn der Button geklickt wird. Ich erzeuge mir eine Variable submitButton und weise die Werte meines Buttons zu.

var submitButton = document.getElementById("meinButton");

Wie beim anderen Beispiel auch, benötige ich einen EventListener für das Klick-Event. Das „klebe“ ich gewissermaßen an die Werte der Button Variable. Im Falle eines Klicks, soll die Funktion output aufgerufen werden.

submitButton.addEventListener("click", output);

In der Funktion output wird der Wert des Input Felds ausgelesen und in die Variable name gespeichert.

var name = document.getElementById("name").value;

Der Text wird in dem div Tag, wie oben, ausgeben.

document.getElementById("output").innerHTML = "<h1>Hallo " + name + " </h1>";

Jetzt kann ich tatsächlich Daten eingeben, die auf Knopfdruck ausgegeben werden, ohne den Quellcode der Seite zu verändern.

JavaScript und WordPress

Ich benutze WordPress und so liegt es nahe, dass ich gern JavaScript in diesem Artikel live verwenden möchte … und siehe da … es klappt … probier mal!

Name:

Ausgabe

 Wie geht das in WordPress?

Normalerweise darf man aus Sicherheitsgründen kein JavaScript in WordPress Artikeln ausführen. Es gibt aber natürlich verschiedene Möglichkeiten, um JavaScript auszuführen. Ich benutze das Plugin Scripts n Styles. Damit lässt sich JavaScript für einen Post einfügen.

Fazit

Es lohnt sich JavaScript zu lernen. Es ist nicht schwer und es bietet gerade im Zusammenhang mit einem CMS unendliche Möglichkeiten.

Links:

• Browserkrieg
• Editor: sublimetext.com
• WordPress Plugin: Scripts n Styles
• JavaScript lernen mit SELFHTML
• JavaScript lernen mit Katzen: jsforcats.com

---

tl;dr: JavaScript stellt sich im Nachhinein als nützlich heraus

Save

Save

Save