Die erste Möglichkeit JavaScript zu definieren ist die Definition im HTML-Body, wo das JavaScript benötigt wird.
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
Schon kleinere JavaScript Elemente können den umgebenen HTML-Quelltext schnell unleserlich machen. Eine Möglichkeit, die Lesbarkeit zu erhöhen besteht darin, aufwendigere Script-Elemente in den Header auszulagern. Hierzu definierten wir im Header einfach eine Funktion, die den gewünschten JavaScript Quelltext enthält. Im Body des HTML-Dokumentes können wir nun auf die im Header definierte Funktion zugreifen. Das nachfolgende Beispiel zeigt diese Vorgehensweise.
<html>
<header>
<script type="text/javascript">
function complicated() {
document.write("Puh, das war kompliziert.");
}
</script>
</header>
<body>
<h1>Hello JavaScript</h1>
<p>
<script type="text/javascript">
complicated();
</script>
</p>
</bod<>
</html>
Die dritte Möglichkeit ist JavaScript in einer externen Datei zu definieren. Um das JavaScript
aus der externen Datei verwenden zu können müssen wir die entsprechende Datei mit dem HTML-Tag
script in die HTML-Seite einbinden. Eine gute Position für die Einbindung externer
JavaScript-Dateien ist der head-Bereich der HTML-Seite. Danach können wir auf die JavaScript-Elemente
zugreifen, als ob Sie im Header definiert worden sind.
Nachfolgend ein Beispiel für eine externe JavaScript-Datei. Wir benennen diese Datei mit den Namen "myJavaScript.js" (in einem beliebigen Projektverzeichnis). ".js" ist die Standardendung für JavaScript-Dateien.
function externalFunction() {
document.write("Ich komme aus separater Datei");
}
Im nachfolgenden HTML-Beispiel verwenden wir zuvor erstellte JavaScript-Datei. Dazu erzeugen wir eine Datei mit den Namen "text.html" (im gleichen Verzeichnis wie "myJavaScript.js") mit folgendem Inhalt:
<html> <header> <script language="javascript" type="text/javascript" src="./myJavaScript.js"></script> </header> <body> <h1>Hello JavaScript</h1> <p> <script type="text/javascript"> externalFunction(); </script> </p> </body> </html>
Das Auslagern von JavaScript sollte in der Regel der bevorzugte Weg sein. Die Auslagerung von JavaScript in einer externen Datei bringt mehrere Vorteile mit sich. Zum einen lassen sich die so definierten Scripte in mehreren HTML-Dateien einbinden und so zentral verwalten und pflegen. Des Weiteren lässt sich so eine Trennung der Aufgaben (engl. separation of concerns) erreichen:
welche alle in separaten Dateien getrennt verwaltet und gepflegt werden können.
Eine weitere Möglichkeit der JavaScript-Einbindung besteht in der JavaScript Definition in einem Link. Das entsprechende JavaScript wird dann ausgeführt, sobald der Anwender diesen Link betÃĪtigt.
Im nachfolgenden Beispiel definieren wir einen Link mit dem Text "Hier bitte klicken". Aktiviert der Anwender diesen wird ein Meldungsfenster mit dem Text "Ich bin ein JavaScript Link" angezeigt.
<html>
<body>
<a href="javascript:window.alert('Ich bin ein JavaScript Link')">
Hier bitte klicken.
</a>
</body>
</html>