CSS, HTML und Javascript mit {stil}

Javascript für Webseiten

Einführung in Javascript

Javascript ist die Programmiersprache des Internets – entwickelt für Webseiten und erweitert für immer komplexere Anwendungen. Javascript wurde (anders als Programmiersprachen wie C++) nicht für alle Belange der Programmierung angelegt, sondern gezielt zur Manipulation von Webseiten.

Javascript wird für Webseiten, eBooks, PDF und Photoshop eingesetzt und ist nicht auf die Programmierung von Webseiten beschränkt wie PHP.

Javascript bringt Interaktion in statische HTML-Seiten und reduziert den aufwändigen Transfer zwischen Benutzer, Browser und Server. Scripte ändern den Inhalt einer Webseite, nachdem die Seite in den Browser geladen wurde. Wir nutzen Javascript

  • für Slideshows,
  • für Animationen,
  • für die Kommunikation mit dem Benutzer in Formularen,
  • in Shops
  • in den Editoren der Content Management Systeme.

Javascript einbinden

Javascript wird mit dem script-Tag direkt in das HTML-Markup gesetzt – vorzugsweise vor dem schließenden body-Tag

<!DOCTYPE html>
<html>
<head>
   <title>Einführung in Javascript</title>
</head>
<body>

<script>
   alert('Hallo Welt!');
</script>
</body>
</html>

oder als externe Datei eingebunden (auch hier vorzugsweise vor dem schließenden body-Tag):

<!DOCTYPE html>
<html>
<head>
   <title>Javascript-Datei einbinden</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>

In der Script-Datei stehen die Anweisungen ohne umschließendes script-Tag.

alert ('Von draussen komm ich her');

Scriptsprache vs Programmiersprache

Skriptsprachen wie Javascript werden Zeile für Zeile ausgewertet – das macht die Programmierung mit Javascript so einfach. Programmiersprachen wie C oder Java müssen zuerst in eine maschinennahe Sprache übersetzt (kompiliert) und können erst dann ausgeführt werden.

<script>
   alert("Hallo Welt!");
   document.querySelector("h1").setAttribute("style", "color:green");
</script>

Gib zuerst Hallo Welt aus und ändere dann die Farbe des h1-Tags zu Grün.

Die Ausgabe von Hinweisen mit alert ist ein gutes Feedback für den Einstieg. Heute bieten alle modernen Browser eine Javascript-Console unter den Entwickler- oder Developer-Tools, in denen wir den Ablauf eines Scripts durch den Befehl console.log ("…") nachvollziehen oder eine Anweisung mit Hilfestellung ausprobieren können.

Der Browser nimmt dem Programmierer einen großen Teil der Arbeit ab. Javascript (als client-seitige Scriptsprache) und PHP (als Scriptsprache auf dem Server) nutzen den Browser als Benutzeroberfläche. Sie überlassen Chrome, Firefox & Co die komplexen Niederungen der Programmierung wie das Speichern, Drucken und das Memory Management. Das macht Scriptsprachen wie Javascript und PHP so genial einfach für Einsteiger – Javascript ist schnell zu lernen.

Javascript Slideshow ohne jQuery

Für viele Aktionen und Effekte steht heute CSS3 anstelle von Javascript zur Verfügung. Auch wenn CSS mit weichen Transitionen und Keyframe-Animationen bereit steht, ist die Interaktion mit dem Benutzer effizienter, wenn Javascript und CSS im Team agieren.

»A better simple slideshow« – kurz BBS – ist eine responsive Slideshow, unterstützt eine Navigation mit den Pfeiltasten, mit dem Swipe auf Touch-Screens und beherrscht einen Fullscreen-Modus.

Das API ist so einfach wie die APIs der jQuery-Slideshows, aber A better simple slideshow ist reines natives Javascript.

Javascript Slideshow ohne jQuery
Sauberes HTML5 ohne zusätzliches Markup
Gerade mal etwas mehr als 3KB

Better Simple Slideshow

Javascript, Java und ECMAScript

Java und JavaScript haben so wenig miteinander am Hut wie »Anzug« und «Aufzug«. Die Namensgleichheit ist einfach unglücklich. »ECMAScript« wäre korrekter, aber wir haben uns an Javascript gewöhnt.

Die ECMA legt den Kern von Javascript fest. Für Anwendungen in HTML-Seiten springt das W3C ein:

Das Document Object Model (DOM) legt Empfehlungen für Zugriff auf Dokumente, Stylesheets, das Fenster des Browsers und das Event Handling vor.

Javascript programmieren

Habe ich behauptet, Javascript wäre einfach zu lernen? Das stimmt zwar, allerdings liegen die Hürden für den Einstiegt hoch:

  • Ohne fundierte Kenntnis von HTML geht gar nichts. Das Document Object Model verweigert, wenn der HTML-Quelltext nicht sauber codiert ist.
  • Wer Javascript programmieren will, muss CSS wie seine Muttersprache beherrschen.
  • Grundkenntnisse in serverseitige Programmierung gehören in jede Programmierstube.
  • Wissen, wie der Benutzer tickt … unentbehrlich.

Javascript hatte bislang enge Grenzen: Ich kann z.B. kein Betriebssystem mit Javascript schreiben und nicht einmal den Drucker ansprechen. Javascript sitzt in einem Browser, in Photoshop oder dem eBook und hat erst mit HTML5 lesenden Zugriff auf das Dateisystem des Rechners (und selbst dann nur eingeschränkten Zugriff).

Von den Editoren der Content Management Systeme bis zu browserbasierten Apps in der Cloud fallen Javascript immer mehr Aufgaben zu, die früher »richtigen« Programmiersprachen vorbehalten waren.

Mit node.js endet die Beschränkung auf Browseranwendungen und Javascript kann auch für Serveranwendungen eingesetzt werden. Wir könnten mit HTML, CSS und Javascript Desktop-Anwendungen programmieren, die auf einem Bierdeckel (also in jeder Umgebung) laufen. Das wird Programmiersprachen wie C++ und Objective C oder serverseitige Scriptsprachen wie PHP nicht überflüssig machen, aber ein Entwickler kann sein Wissen und seine Erfahrung auf weniger Puzzelstücke aufteilen. Das sind ja mal schöne Aussichten …