JavaScript einbinden

JavaScript kann man auf 2 Arten in eine HTML-Seite einbinden. Mit der ersten Art ist das JavaScript direkt auf der Seite. Das hat Vorteile und auch Nachteile:

Einbinden von JavaScript direkt auf HTML-Seite

Das Einbinden geschieht über folgenden Aufbau (i.d.R. im Head-Bereich der HTML-Seite)

<script language="javascript" type="text/javascript">
<!--
... hier kommt das JavaScript-Programm
-->
</script> 

Ab HTML5 ist das Einbinden von JavaScript noch einfacher. Dann reicht die Angabe <script> aus, also:

<script>
<!--
... hier kommt das JavaScript-Programm
-->
</script> 

Das Auskommentieren ist nur für sehr alte Browser notwendig. Daher kann auch das wegfallen.

<script>
... hier kommt das JavaScript-Programm
</script> 

Vorteile

  • JavaScript ist direkt auf der Seite bearbeitbar

Nachteile

  • vergrößert den Quellcode (was es auch bei einer externen Art (siehe 2 Art) macht). Das ist solange kein Problem, wenn das entsprechende JavaScript-Programm nur für diese Einzelseite benötigt wird. Wird es auf mehreren HTML-Seiten benötigt, muss beim Pflegen und Ändern der JavaScripts dies auf allen Einzelseiten geschehen und wehe denjenigen, der eine Datei vergisst.
  • verlangsamt, da für jede Seite geladen werden muss

Einbinden von JavaScript in HTML-Seite als externe Datei

Dazu wird im Head-Bereich der HTML-Datei folgender Zeile integriert:

<!DOCTYPE html>
<html lang="de">

<head>
<title>JavaScript als externe Datei einbinden</title>
<script language="javascript" type="text/javascript" src="dateiname.js"></script>
</head>
<body>
...

Kürzer ist schöner - daher folgt hier die Kurzfassung. Wichtig ist einfach, dass man auch mal die längere gesehen hat, wenn man fremde Seiten analysiert.

<!DOCTYPE html>
<html lang="de">

<head>
<title>JavaScript als externe Datei einbinden</title>
<script src="dateiname.js"></script>
</head>
<body>
...

Dies hat den großen Vorteil, dass auf allen HTML-Seiten auf die JavaScript-Funktionen zugegriffen werden kann, sobald der Link im Kopf-Bereich der HTML-Datei integriert ist.

Dadurch wird die Pflege auch einfacher (da nur noch 1 JavaScript-Datei zu pflegen ist) und die Ladezeit verkürzt, da diese Datei zwischengespeichert werden kann.