JavaScript in HTML definieren und einbinden - Webseitenbau

5.3.1 JavaScript in HTML definieren und einbinden

1 Allgemein
2 JavaScript im Kopfbereich definieren
3 Script im Kopfbereich einbinden
4 Script aus extra Datei einbinden
5 Script im Textbereich einbinden

In Bearbeitung / under construction / en cours d'élaboration

1 Allgemein

Grundsatz:

Im Kopf des HTML-Dokumentes soll der Script-Inhaltstyp definiert werden.
Scripts dürfen sowohl im head- als auch im body-Bereich eingebaut werden.
(auch beide zusammen, nicht nur entweder/oder)

Prinzip:

1) Script-Tags ohne Artribute:

Die <script> und </script>-Tags

Dieses Elemente bilden einen Container mit dem Scripts in HTML-Dokumente eingebettet werden.

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

2) Script-Tags mit Artributen:

<script language="JavaScript" type="text/javascript"> </script>

Attribute: language="JavaScript" und type="text/javascript"

Die language und type-Attribute geben einen Hinweis welche Art von Inhalt in script vorgefunden wird.

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

3) Das Grundgerüst des HTML-Dokumentes ist nun wie folgt:

Position von script im Kopfbereich des HTML-Dokumentes.

Die Position von script im Kopf der Seite bietet sich an, um dort Funktionen, Variablen und weitere Datenstrukturen zu definieren, die zu einem späteren Zeitpunkt verwendet werden.

<html>
 <head><title>... der Titel des Dokuments ...</title>
 <script language="JavaScript" type="text/javascript">
   ... hier steht das JavaScript-Programm ...
 </script>
 </head>
 <body>
   ... hier steht die HTML-Seite ...
 </body>
</html>

Workshops

javascript-workshop.de: Grundlagen

2 JavaScript im Kopfbereich definieren

Prinzip:

Damit alle Scripts als JavaScript interpretiert werden, sollte man im Kopf des HTML-Dokumentes grundsätzlich den Script-Inhaltstyp definieren.
Dies wird in vorliegender Website mit einem Meta-Tag gemacht.

Meta-Tag Code:

<meta http-equiv="Content-Script-Type" content="text/javascript">

1) Quelltext im HTML-Dokument:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
...
</body>
</html>

Grundlagen und Workshops:

droeppez.de: Wie baue ich JavaScript in ein HTML/XML-Dokument ein

Angaben von Wikibooks

So, wie es in dieser Website gemacht wird:

Der Script-Inhaltstyp wird im Kopfbereich angegeben.

<html>
  <head>
    <title>Seiten-Titel</title>
      <scrript type="text/javascript" language="javascript">
        <!--
        //-->
      </script>
  </head>
  <body>
  </body>
</html>

Alternative:

Es ist auch möglich, den Script-Inhaltstyp nicht im Kopfbereich sondern zusammen mit dem Script nur im Textbereich anzugeben.

<html>
  <head>
    <title>Seiten-Titel</title>
  </head>
  <body>
    <script type="text/javascript" language="javascript">
      <!--
      //-->
    </script>
  </body>
</html>

Wikibooks: Websiteentwicklung: JavaScript: Der SCRIPT Tag

3 Script im Kopfbereich einbinden

Prinzip

Scripts in the head section

Scripts to be executed when they are called, or when an event is triggered, go in the head section. When you place a script in the head section, you will ensure that the script is loaded before anyone uses it.

W3Schools: Scripts in the head section

Beispiel

W3Schools: JavaScript in the head section

4 Script aus extra Datei einbinden

Prinzip:

Im Kopf wird zusätzlich zur Angabe des Script-Inhaltstyps eine externe Datei mit einem Script eingebunden.

Using an External JavaScript:

Sometimes you might want to run the same JavaScript on several pages, without having to write the same script on every page.
To simplify this, you can write a JavaScript in an external file. Save the external JavaScript file with a .js file extension.
Note: The external script cannot contain the <script> tag!
To use the external script, point to the .js file in the "src" attribute of the <script> tag:

Meta-Tag Code:

<script type="text/javascript" src="irgendwas.js"></script>

1) Quelltext im HTML-Dokument:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="irgendwas.js"></script>
</head>
<body>
...
</body>
</html>

Workshops:

droeppez.de: Einbindung separater Dateien

droeppez.de: Wie baue ich JavaScript in ein HTML/XML-Dokument ein

W3Schools: An external JavaScript

5 Script im Textbereich einbinden

Allgemein

Prinzip

Das Script wird im body-Bereich eingebettet.

Scripts in the body section:

Scripts to be executed when the page loads go in the body section. When you place a script in the body section it generates the content of the page.

Ganzer Script-Code:

<script language="JavaScript">  </script>

Anfangs- und End-Tags:

<script language="JavaScript">...</script>

"Verstecken" des Scripts:


Die HTML-Kennung für den Beginn eines Kommentars, dient dazu, das eigentliche Script vor Browsern zu "verstecken", die kein JavaScript beherrschen.
Am Ende wird das "Verstecken" des JavaScripts mit der HTML-Kennung --> abgeschlossen. Da wir uns aber noch innerhalb des Scripts befinden, muß diese HTML-Kennung wiederum vor dem JavaScript-Interpreter versteckt werden. Dazu dient das //, daß innerhalb von JavaScript einen Kommentar kennzeichnet.

Quelltext des Programms:

document.write("Hello World");
Die Erklärung dieser Codes erfolgt später.
Am Ende wird das "Verstecken" des JavaScripts mit der HTML-Kennung --> abgeschlossen. Da wir uns aber noch innerhalb des Scripts befinden, muß diese HTML-Kennung wiederum vor dem JavaScript-Interpreter versteckt werden. Dazu dient das //, daß innerhalb von JavaScript einen Kommentar kennzeichnet.

1) Quelltext im HTML-Dokument:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<script language="JavaScript">
<!--
document.write("Hello World");
//-->
</script>
</body>
</html>

2) Anzeige durch den Browser:

Workshops:

droeppez.de: Hello World - das erste Programm

droeppez.de: Definition von JavaScript-Bereichen in HTML

Beispiel von W3CSchool

1) Quelltext im HTML-Dokument:

<script language="JavaScript">
document.write("Hello World!");
</script>

2) Anzeige durch den Browser:

W3Schools: Write text with JavaScript
W3Schools: Write HTML tags with JavaScript
W3Schools: JavaScript in the body section

Beispiel mit folgendem Script

1) Quelltext im HTML-Dokument:

<center>
<script language="JavaScript">
<!--
  document.write("<font size=+2>");
  document.write("Hello World!");
  document.write("</font>");
//-->
</script>
</center>

2) Anzeige durch den Browser:

bingo-ev.de: Einbindung von JavaScript in eine HTML-Seite

↑