Grundlagen - Beispiel einfügen
    
WWW.WEB-TOOLBOX.NET
Druck-Version ZURÜCK SITEMAP  

  1) JavaScript einbinden - Grundlagen

Kenntnisse über des Aufbau eines HTML-Dokuments, zumindest darüber wie das 'Grundgerüst' aussieht, werden hier vorausgesetzt! Grundgerüst


JavaScript-Beispiele in ihre Seite übernehmen.

Eine vorsichtige Erklärung für Beginner.

Auf meinen Seiten finden sie JavaScripts, die sie in ihre Seiten einbauen können. In den Textdateien oder auch auf den Beispielseiten spreche ich dann von
  • "im Head notieren"
  • "im Body-Tag notieren"
  • "im Body notieren"
.. wenn es darum geht, wo die JavaScript-Anweisungen plaziert werden sollen.

Zum Einfügen eines Beispiels muss man wissen wo der HEAD- und wo der BODY-Bereich eines HTML-Dokuments ist.



   Im Quellcode

Wenn sie also einen JavaScript Code in einen bestimmten Bereich einfügen sollen, müssen sie ihr HTML-Dokument mit einem Editor öffnen, um den HTML-Code einzusehen und dann zu ergänzen.

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 das Script Funktionen enthält, die später z.B. duch ein Mausklick aufgerufen werden sollen, dann wird das Script im HEAD-Bereich des HTML-Dokuments stehen. So wird das Script beim Laden des Dokuments bereits eingelesen und die Funktionen im Speicher bereitgestellt.

Wenn die Anweisungen beim Laden / beim Anzeigen der Seite gleich ausgeführt werden sollen, werden die JavaScript-Anweisungen auch schon mal direkt im Body-Bereich notiert. Dann muss das Script gewöhnlich an der Stelle stehen, 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

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

<head> und <\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.


... den Code hier kopieren
<\head>



  JavaScript-Code im BODY

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

<body> und <\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.




  JavaScript-Code im BODY-Tag

Auch im eigenlichen BODY-Tag (Begin des Bodies) können 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 in der Regel weitere HTML-Zusätze (Attribute), die durch Leerzeichen voneinander getrennt sind:

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

Dort hinein kann man zusätzlich 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 vor der schließenden spitzen Klammer eingefügt.


Beispiel:

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




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







NACH OBEN