CSS, HTML & Javascript mit {stil}

Grundlagen: Javascript für Webseiten

Javascript ist die Programmiersprache des Internets – entwickelt für Webseiten und laufend 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 Grundlagen der Programmierung

Javascript-Anwendungen

Heute ist Javascript überall – auf Webseiten, in mobilen und Desktop-Apps, in eBooks, PDF und Photoshop – und ist nicht länger 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 Inhalt und Struktur einer Webseite, nachdem die Seite 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 Programmieren mit C erst lernen muss. Javascript hingegen halten viele Programmierer für Kinderkrams. Dabei setzt Javascript einige der besten Konzepte von Programmiersprachen um. Dass Javascript in der Vergangenheit so verrufen war, lag an den alten Fehlern und Inkonsistenzen der Browser und nicht am Konzept und der Syntax der Sprache.

Wer definiert die Standards für Javascript?

Javascript wird von zwei Quellen gespeist:

  • ECMAScript ist zuständig für die Syntax,
  • das W3C für das Document Object Model.

Darüber hinaus existiert eine vielschichtige Menge von Dialekten, Libraries und Frameworks.

Vanilla (natives) Javascript

Einfaches Javascript ohne Libraries. Basis und Grundlange für alles

ECMAScript

ECMAScript legt die Syntax der Programmiersprache fest: Versionen von ES5 über ES6, ES7 ….

W3C

Grundlage für das Scripting von Webseiten ist das DOM (Document Object Model) des W3C

ES2024

Javascript ECMAScript® 2024 language specification – 15th edition

ES6

ECMAScript-Version von 2015, damals ein großer Schritt, heute eine sichere Basis und Industriestandard, die von allen modernen Browsern unterstützt wird. Hat const, let, Module und Arrow Functions mitgebracht.

Node.js

Javascript-Runtime – ein Javascript-Server.

React

Javascript-Framework, z.B. Grundlage für den Gutenberg-Editor von WordPress

Angular

Javascript-Framework, setzt genauso wie React auf Javascript aus, schon etwas älter.

jQuery

Die bekannteste Javascript-Library mit dem "$"-Zeichen. War ein Hit, wird heute nicht mehr gebraucht.

Sie versprechen allesamt eine schnellere und einfachere Entwicklung, aber für den Einstieg gilt: Einfach Javascript ist die Grundlage, die bleibt. Frameworks und Libraries kommen und gehen.

Mit Javascript erledigen Anfänger Aufgaben überraschend einfach, auch ohne viel Erfahrung und selbst mit wenig Hintergrund in Programmierung, denn Javascript ist ausdrucksstark. Trotzdem darf man den Faktor Erfahrung nicht außer Acht lassen: Programmierung braucht Erfahrung und einen ordentlichen Schuss Routine, damit Scripting nicht zu Nervenkrisen und Frust führt.

Die beste Voraussetzung für einen schmerzfreien Eintritt in die Programmierung mit Javascript ist korrektes valides HTML.

Javascript einbinden

Javascript kann für die ersten Schritte mit dem script-Tag direkt in das HTML-Markup gesetzt werden, direkt vor das schließende body-Tag:

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

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

Solider ist es allerdings, das Skript als externe Datei einzubinden (vorzugsweise im head-Element der Seite nach dem CSS):

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

</body>
</html>

Über das defer-Attribut des script-Tags

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. Wir überlassen Chrome, Firefox & Co die komplexen Niederungen der Programmierung wie das Speichern, Drucken und das Memory Management.

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 meist eine Idee im Blick, die er mit Javascript programmieren möchte und sucht sich ein passendes Script, um es an die eigenen Vorstellungen anzupassen.

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

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

<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
const slides = document.querySelectorAll('#slides .slide');
let currentSlide = 0;

// setInterval() steuert eine Javascript-Animation
const 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 das HTML nicht korrekt ist. Falsch verschachteltes HTML wird in Javascript im Handumdrehen falsch verdrahtet.
  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 ohne serverseitige Anwendung (z.B. ein PHP-Programm) keinen Zugriff auf die Daten auf dem Server 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« oder »Einsatz« und »Durchsatz«. 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.

So sehen wir von Zeit zu Zeit in Foren und Tutorials die Javascript-Version. Das kann z.B. ES6 oder ES2021 sein.

Welche Programmiersprachen sind unbeliebt? auf Stackoverflow.

Node.js

Habe ich oben behauptet, Javascript kann Dateien nicht speichern? Javascript kann XML und JSON-Dateien lesen und und in NodeJS sowohl lesen als auch speichern und versteht sich auf relationale Datenbanken.

Node.js ist eine Laufzeitumgebung für Netzwerk-Anwendungen (Javascript Runtime Environment). Damit läuft Javascript ohne Browser auf dem Rechner, und zwar unter Windows, Mac OS und Unix.

NodeJS ermöglicht also Javascript-Anwendungen – der Programm-Editor Adobe Brackets ist ein Beispiel, denn Brackets ist hauptsächlich in HTML, CSS und Javascript programmiert.

Suchen auf mediaevent.de