CSS, HTML und Javascript mit {stil}

Grundlagen: Javascript für Webseiten

Grundlagen der Programmierung mit Javascript Zeigt einen dreigeteilten Bleistift HTML, CSS und 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 ist überall – auf Webseiten, in eBooks, PDFs und Photoshop – 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 sie in den Browser geladen wurde. Wir nutzen Javascript

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

Keine Programmiersprache wird so unterschätzt wie Javascript. Bei Programmiersprachen wie C ist klar, dass man Programmierung mit C erst lernen muss. Javascript hingegen hält man für Kinderkrams. Dabei setzt Javascript einige der besten Konzepte von Programmiersprachen um. Dass Javascript in der Vergangenheit so verrufen war, lag an den Fehlern und Inkonsistenzen der Browser und nicht am Konzept und der Syntax der Sprache.

Trotzdem: Mit Javascript erledigen Anfänger Aufgaben überraschend einfach, auch ohne viel Erfahrung und selbst mit wenig Hintergrund in Programmierung, denn Javascript ist ausdrucksstark.

Javascript einbinden

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

Javascript am Ende des Dokuments einbinden
<!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):

Javascript-Datei am Ende des Dokuments einbinden
<!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 ('Hallo Welt');

Scriptsprache vs Programmiersprache

Skriptsprachen wie Javascript werden Zeile für Zeile ausgewertet – das macht die Programmierung mit Javascript so einfach. C oder Java müssen vor der Ausführung in eine maschinennahe Sprache übersetzt (kompiliert) 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 erstes 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 / Carousel

Wie fange ich an? Das ist die Frage für diejenigen, die nicht bereits von einer anderen Programmiersprache kommen. Bei Computer- und Software-Herstellern beginnen Einsteiger meist mit dem Support bestehender Anwendungen: Fehlerkorrekturen und kleine Erweiterungen.

Ein taufrischer Einsteiger hat ebenfalls meist eine Idee im Kopf, was er gerne mit Javascript programmieren würde und sucht sich ein passendes Script, um es an die eigenen Vorstellungen anzupassen.

Javascript Slideshow ohne jQuery
HTML ohne zusätzliches Markup
Nur ein paar Zeilen Javasctipt

In diesem kleinen Script stecken sowohl Javascript- als auch CSS-Techniken:

Ausführliches Tutorial zu einer anders aufgebauten Javascript-Slideshow – ebenfalls »Vanilla Javascript« (ohne jQuery).

HTML
<div id="slides">
   <figure class="slide showing">
      <img src="slide-01.jpg">
      <figcaption>Javascript Slideshow ohne jQuery</figcaption> 
   </figure>
   <figure class="slide">
      <img src="slide-02.jpg">
      <figcaption>HTML ohne zusätzliches Markup</figcaption> 
   </figure>
   <figure class="slide">
      <img src="slide-03.jpg">
      <figcaption>Nur ein paar Zeilen Javasctipt</figcaption> 
   </figure>
</div>
CSS
#slides {
   position: relative;
}

.slide {
   position: absolute;
   left: 0; top: 0;
   width: 100%; height: 100%;
   opacity: 0;
   z-index: 1;
   transition: opacity 1s;
}

.showing {
   opacity: 1;
   z-index: 2;
}
Script für die einfache Slideshow
// querySelectorAll sammelt alle Elemente mit der Klasse .slide
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;

// setInterval() steuert eine Javascript-Animation
var slideInterval = setInterval(nextSlide,2000);

function nextSlide() {
   slides[currentSlide].className = 'slide';
   currentSlide = (currentSlide+1) % slides.length;
   slides[currentSlide].className = 'slide showing';
}

Das Script ist nur eine Starthilfe (damit es übersichtlich bleibt) und lässt viel Raum für Erweiterungen und Verbesserungen. Der Benutzer kann die Slideshow nicht steuern und anhalten, die Position innerhalb der Slideshow wird nicht angezeigt (üblich sind die kleinen runden Punkte).

Javascript programmieren – Voraussetzungen

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

  1. Ohne fundierte Kenntnis von HTML geht gar nichts. Das Document Object Model verweigert, wenn der HTML-Quelltext nicht sauber codiert ist.
  2. Wer Javascript programmieren will, muss CSS wie seine Muttersprache beherrschen.
  3. Wissen, wie der Benutzer tickt … unentbehrlich.
  4. Früher oder später gehören Grundkenntnisse in serverseitiger Programmierung (z.B. für Formulare) in jede Programmierstube.

Ich kann z.B. kein Betriebssystem mit Javascript schreiben und nicht einmal den Drucker ansprechen. Javascript hat keinen Zugriff auf die Daten auf dem Server ohne serverseitige Anwendung (z.B. ein PHP-Programm) und kommt auch nicht an lokale Dateien (nur über ein Eingabefeld für den Dateiupload). 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änkt).

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.

Javascript hatte bislang also enge Grenzen: 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 …

Javascript, Java und ECMAScript

Java und JavaScript haben so wenig miteinander am Hut wie »Auszug« 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.
HTML CSS JavaScript