Einbindung in HTML

Allgemeines zu JavaScript

Ziel des Einsatzes von JavaScript ist es, mit dem User in Form von Dialogen, die in HTML eingebettet sind, in Kontakt zu treten. Dazu bedarf es einer zusätzlichen Sprache, die in Form von kleinen Programmen eine dynamische Komponente in das statische Gerüst von HTML einbaut. So ist es möglich, dass persönliche Vorgaben oder Anpassungen des Users berücksichtigt werden können. Es müssen (kleine) Programme, die Scripts, verfasst werden, diese werden in den HTML-Code eingebunden und auf dem Server gespeichert. Bei Anforderung der Webseite wird der Script-Code genau wie der HTML-Code zunächst uninterpretiert an den Client übertragen. Der Browser des Benutzers interpretiert anschließend beides und führt die Programme aus. JavaScript ist damit eine "clientseitige" Scriptsprache. Die Scripts werden durch den Browser des Benutzers interpretiert und ausgeführt. Es wurde speziell zur Webseitenoptimierung entwickelt.

Das Besondere an JavaScript ist die Plattformunabhängigkeit. Es wird lediglich ein Browser benötigt, der die Scripts interpretieren kann, was bei allen aktuellen Browsern der Fall ist. Aufgrund dieser Browserabhängigkeit ist JavaScript allerdings auf den Einsatz für das Internet beschränkt. Browserabhängigkeit meint in diesem Kontext nicht die Abhängigkeit von einem bestimmten Browser, sondern die Tatsache, dass zur Interpretation eines Javascripts ein Browser benötigt wird. Die unterschiedlichen Browseranwendungen reagieren leider auf gleiche Scripte nicht immer gleich... Besonders hinzuweisen ist auf den Unterschied von JavaScript und Java. Dies wird hier im Allgemeinen erörtert.

Ressourcen zum Thema

Ein etwas älteres, aber vollständig kostenloses <openbook> von Galileo Computing finden Sie im folgenden ZIP-Archiv: JavaScript lernen

Die Einführung der w3schools finden Sie hier.

JavaScript in HTML

Das <script>-Element

Ein JavaScript kann direkt in den HTML-Quellcode geschrieben werden. Um ein solches Script durch den Browser ausführen zu lassen, wird zunächst ein neues HTML-Element <script> </script> benötigt:

<script type="text/javascript" defer>
	// hier steht bald unser JavaScript Code
</script>

Dieses Element kann grundsätzlich sowohl im <head> wie auch im <body> platziert werden. Das type-Attribut ist sinnvoll, da es neben JavaScript noch andere Scriptsprachen gibt, die von Browsern unterstützt werden und das Attribut defer bewirkt, das erst die Seite geladen wird und anschließend das Script.

Das <noscript>-Element

Über das <noscript>-Element können User älterer Browser (oder solcher, die JavaScript deaktiviert haben) darauf hingewiesen werden, dass zur korrekten Darstellung der Daten oder zur vollen Nutzung der Funktionalität einer Seite die Aktivierung von JavaScript notwendig ist. Die Verwendung wird nur im ersten Beispiel einmal vorgestellt und dann der Übersicht wegen weggelassen, grundsätzlich sollte jedoch nicht auf das Tag verzichtet werden.

<script type="text/javascript">
	alert("Hello World!");
</script>
<noscript>
	Your browser does not support JavaScript!
</noscript>

Beispiel 1

<!DOCTYPE html> 
<html>
	<head> 
		<title>Titel der Seite</title>
	</head> 

	<body> 
		<script type="text/javascript"> // hier steht bald unser JavaScript Code </script>
		<noscript> Your browser does not support JavaScript! </noscript>
	</body> 
</html>

JavaScript als externe Ressource

Üblicherweise wird der Javascript-Code jedoch in eine eigene Datei geschrieben (Dateiendung .js). Das hat mehrere Vorteile:

  1. Zusammenarbeit: In der Webentwicklung gibt es oftmals Personen für einen speziellen Bereich. Dabei ist es sinnvoll, getrennte Dateien zu haben, dass sich die Mitarbeiter während der Bearbeitung nicht in die Quere kommen.
  2. Übersichtlichkeit: Zu Beginn ist der Code allgemein noch nicht sehr umfangreich. Wird die Webseite komplexer, kann es jedoch sehr viel mehr werden. Sind die unterschiedlichen Sprachen in entsprechende Dateien aufgeteilt, ist der Code sehr viel übersichtlicher und natürlich auch kürzer.
  3. Wiederverwendbarkeit: Hat man CSS und JS in separaten Dateien, kann der entsprechende Code leicht in jede notwendige HTML-Datei eingebunden werden. Das ist sehr praktisch, wenn es viele HTML-Seiten hat, da man sich dabei das Kopieren des Codes spart.

Beispiel 2

HTML-Datei

<!DOCTYPE html> 
<html>
	<head> 
		<title>Titel der Seite</title>
		<script src="functions.js" defer></script>
	</head> 

	<body> 
		
	</body> 
</html>

JS-Datei (functions.js)

alert("Hello World!");
alert("Hello World again!");

Einbindung

Grundsätzlich kann das script-Tag, das auf die externe JS-Datei referenziert, entweder im head oder ans Ende des body-Elementes stehen. Darüber, welche der beiden Stellen am Besten ist, gibt es viele Diskussionen. Hier findet sich eine Erklärung). Innerhalb dieses Seminars empfiehlt es sich, das script-Element in den head zu schreiben.