JavaScript einbauen Grundlagen - Script einfügen
 HomeJavaScript • javaScript einbinden 01 Druckversion 

1) JavaScript einbinden - Grundlagen

Kenntnisse über des Aufbau eines HTML-Dokuments, zumindest darüber wie das 'Grundgerüst' aussieht, werden hier vorausgesetzt! Das HTML-Grundgerüst. Wenn Sie den Quellcode eines HTML-Dokuments betrachten sollten Sie erkennen, wo der 'Head-' und der 'Body-Bereich' ist.
JavaScript Grundlagen Einführung Erklärung Einbindung

JavaScript einbinden - Grundlagen

JavaScript einbinden
JavaScript-Beispiele in Ihre Seite übernehmen.

Eine vorsichtige Erklärung für Beginner.

Auf web-toolbox.net finden Sie JavaScript-Beispiele die Sie in ihre Seiten 'einbauen' können. In den Textdateien der Quellcodes oder auch auf den Beispielseiten spreche ich dann von
  • "im Head-Bereich notieren"
  • "im Body-Tag notieren"
  • "im Body-Bereich notieren"
.. wenn es darum geht, wo die JavaScript-Anweisungen platziert werden sollen.

Zum Einfügen von Scriptcode muss man wissen, was man unter HEAD- und BODY-Bereich eines HTML-Dokuments versteht.


   Im Quellcode

Wenn Sie JavaScript-Code in einen bestimmten Bereich einfügen möchten, müssen Sie Ihr HTML-Dokument mit einem Editor öffnen, um den HTML-Code (Quellcode) der Seite einzusehen um die Bereiche 'Head' und 'Body' zu lokalisieren.

Suchen Sie im Quellcode ihrer Seite das HTML-Tag, welches den HEAD-Bereich abschließt. Gleich darunter finden Sie in der Regel das HTML-Tag welches den Beginn des Body-Bereichs darstellt:
</head>
<body text="#000000" link="#0090E0" ... >
Genau an dieser Stelle ist die Grenze zwischen Head und Body (Kopf und Körper ) Ihres HTML-Dokuments.

Oberhalb des </head>-Tags ist der HEAD-Bereich der Seite.
Unterhalb des <body>-Tags beginnt der Inhaltsbereich der Seite.


Den Scriptcode an entsprechender Stelle einfügen

a) Soll er im Head-Bereich stehen, oberhalb des Ende-Head-Tags.
b) Soll er im Body-Bereich stehen, unterhalb des Anfang-Body-Tags.

Oft ist es von Bedeutung, wo genau im Body-Bereich die JavaScript-Anweisungen stehen. Das wird für einen solchen Fall auf meinen Beispielseiten dann erwähnt. Die Faustregel lautet: Wenn eine JavaScript-Funktion (oder ein Aufruf einer solchen Funktion) etwas in die HTML-Seite schreiben soll, erfolgt die Notierung an genau der Stelle, wo das Resultat erscheinen soll.

Den Script-Code übernehmen Sie am Besten durch kopieren und einfügen. Dazu arbeiten Sie mit einem simplen Texteditor wie den 'Windows-Editor' oder 'Word-Pad', Programme die einen Text ohne zusätzliche Steuerzeichen abspeichern können. Diese Editoren finden Sie idR unter 'Zubehör'. Bietet der Editor beim Speichern mehrere Optionen, wählen Sie die 'nur Text - ohne Steuerzeichen-Option' oder 'plain text'. Komfortabler wäre ein HTML-Editor, aber wenn Sie sich da erst einarbeiten müssten, verzichten Sie zu Anfang darauf.




  JavaScript im BODY oder HEAD?

Wenn eine Script eine Funktion enthält, die möglicherweise erst später aufgerufen werden soll, dann wird das Script im HEAD-Bereich des HTML-Dokuments notiert. So wird das gesamte Script beim Laden des Dokuments bereits eingelesen und im browserinternen Speicher bereitgehalten.

Üblicherweise wird dann im Body-Bereich ein Aufruf für diese JavaScript-Funktion notiert. Dieser Aufruf kann beim Einlesen der Seite oder bei einem bestimmten Ereignis (z.B. durch ein Mausklick) ausgelöst werden.

JavaScript einbinden

Wenn die Anweisungen beim Laden / beim Anzeigen der Seite gleich ausgeführt werden sollen, werden die JavaScript-Anweisungen manchmal auch direkt im Body-Bereich notiert. Dann muss das Script für gewöhnlich an der Stelle notiert werden, wo die Information angezeigt / ausgegeben werden soll.


   Beispiel mit beiden Optionen

Sie kopieren eine Funktion zum Ausdrucken der Seite in den Head-Bereich. Dort stehen nun alle Anweisungen und warten auf den 'Auslöser', irgendeine Aktion die den Druckvorgang startet.

Nun haben Sie 2 Möglichkeiten:

1) Druckvorgang starten, gleich beim Laden der Seite

2) Druckvorgang starten z.B. bei einem Mausklick auf ein Drucker-Symbol


Für die Möglichkeit 1) könnten Sie den Befehl die Funktion zu starten in das Body-Tag schreiben und dort sagen "beim Laden ausführen"

<body OnLoad="drucken()" ...

Für die Möglichkeit 2) könnten Sie auf der Seite (im Body-Bereich) hinter einem Drucker-Bildchen einen Befehl 'verstecken', der beim Anklicken ausgeführt wird.

<a href="javascript:drucken()" ...




  JavaScript-Code im HEAD

Für JavaScript spielt es in der Regel keine Rolle wo genau im Head Sie alles hinein kopieren. Eine gute Regel ist es, alles unmittelbar vor die Zeile mit dem Ende-Head Befehl zu kopieren.

Soll der Code im Head-Bereich eingetragen sein, gehört er zwischen <head> und <\head>

... den Code hier einkopieren
<\head>



  JavaScript-Code im BODY

Manchmal ist unwesentlich an welcher Stelle im Body der Code notiert wird. Oft möchten Sie jedoch den Code dort hinein kopieren, wo das Resultat des Scripts erscheinen soll. Dann kopieren Sie den JavaScript Code genau dort hin.

Soll der Code im Body-Bereich eingetragen sein, gehört er zwischen

<body> und <\body>





  JavaScript-Code im BODY-Tag

Auch im eigentlichen BODY-Tag (Begin des Bodies) können ebenfalls JavaScript-Anweisungen stehen. In der Regel handelt es sich um einen Aufruf eines Scripts, dass im Kopfbereich notiert wurde. Diese Technik kommt dann zur Anwendung, wenn beim Laden der Seite etwas ausgelöst werden soll.

(Beginnen wir ganz vorne, nun wird es kompliziert für HTML-Beginner)

Das simple Body-Tag sieht so aus:
<body>
Das Body-Tag enthält oft weitere HTML-Zusätze (Attribute), die durch Leerzeichen voneinander getrennt sind:

<body bgcolor="#FFFFFF" text="#000000" ... >

Dort hinein kann man auch JavaScript Anweisungen notieren, die z.B. beim Laden der Seite ausgeführt werden sollen.

Sollen JavaScript-Anweisungen innerhalb des Body-Tags stehen, werden Sie am besten hinter der öffnenden spitzen Klammer und dem Begriff 'body' nach einem Leerzeichen , aber (natürlich) vor der schließenden spitzen Klammer eingefügt.

Beispiel:
<body onLoad="setTimeout()" bgcolor="#FFFFFF" text="#000000">






Auf der Seite 2 behandle ich ein Beispiel für Script-Anweisungen, die direkt im Body notiert sind. Üblicherweise sind das Script-Anweisungen, deren Resultat(e) dann an genau dieser Stelle des HTML-Dokuments angezeigt werden sollen.







Ein JavaScript 'einbauen' 2) Script im Body-Bereich

Ein JavaScript 'einbauen' 3) Script im Head-Bereich

Ein JavaScript 'einbauen' 4) Script in externer Datei

Ein JavaScript-Beispiel mit Anweisungen für alle 3 Bereiche