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.