decocode decocode deco    

JavaScript #

Die Programmiersprache JavaScript wurde geschaffen, um den Inhalt von Webseiten anzupassen, nachdem diese vom Client beim Server abgerufen wurden. Dazu können unter anderem Eigenschaften einer Webseite abgefragt werden, bestehende Inhalte geändert oder gelöscht sowie gänzlich neue Inhalte hinzugefügt werden.

JavaScript bietet daher einen wahren Fundus an zusätzlichen Möglichkeiten, Websites mit mehr oder weniger sinnvollen Extras zu bereichern. Da die Verwendung von JavaScript für Websites aber nicht elementar ist und die Funktionalität von JavaScript (aus gewissen berechtigten Gründen) in den Browsern auch abgestellt werden kann (man also nie sicher sein kann, ob das Extra, von dem man so begeistert ist, beim Besucher auch tatsächlich angezeigt wird), stelle ich hier nur ein paar Möglichkeiten vor, von denen ich doch gerne ab und zu Gebrauch mache. Da die Interpretation von JavaScript in den verschiedenen Browsern sehr unterschiedlich ausfallen kann, sollte jedes Skript mit möglichst vielen Browsern getestet werden.

Kleine Helfer
HTML-Elemente einfügen und entfernen
Abhängige Auswahllisten
Zeichnen auf Canvas
Landkarten von OpenStreetMap einbinden
Landkarten mit OpenLayers einbinden
Landkarten von Google Maps einbinden

Einbinden in HTML #

Ähnlich wie CSS können JavaScript-Funktionen auf unterschiedliche Weise in ein HTML-Dokument eingebunden werden.

• Über Referenzierung einer separaten JavaScript-Datei
• Im <head>-Bereich des HTML-Dokuments
• Im <body>-Bereich des HTML-Dokuments

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML>
<html lang='de'>
  <head>
    <title>JavaScript</title>
    <meta charset='UTF-8'>

    <meta name='description' content='JavaScript-Beispiel'>
    <script type='text/javascript' src='javascript.js'></script>
    <script type='text/javascript'>
      /* Beispiel für JavaScript
      innerhalb des head-Tags */
      /* <![CDATA[ */
      function openWindow (url,name,widgets) {
        PopUp = window.open (url,name,widgets);
        PopUp.focus();
      }
      /* ]]> */
    </script>
  </head>
  <body>
    <!-- Seiteninhalte -->
    <script type='text/javascript'>
      /* <![CDATA[ */
      // Beispiel für JavaScript innerhalb des body-Tags
      alert("Nur ein Test");
      /* ]]> */
    </script>
    <noscript><p>Der Browser unterstützt kein JavaScript!</p></noscript>
  </body>
</html>

Im obigen Script sind die drei Möglichkeiten dargestellt. In Zeile 8 sieht man die Referenzierung der Datei javascript.js, die die JavaScript-Funktionen beinhaltet. Die Zeilen 918 enthalten eine Funktion innerhalb des <head>-Tags, und in den Zeilen 2227 befindet sich die JavaScript-Anweisung innerhalb des <body>-Tags.

In den Beispielen 2 und 3 sind die Möglichkeiten dargestellt, einen mehrzeiligen (Zeilen 1011) bzw. einen einzeiligen (Zeile 24) Kommentar in JavaScript zu schreiben. Die Syntax dafür ist mit der von CSS identisch.

Diese Beispiele enthalten außerdem zwei auskommentierte CDATA-Tags (Zeilen 12 und 17 bzw. 23 und 26), die notwendig sind, um valides XHTML zu erzeugen. Siehe dazu auch mediavrog.net.

Schließlich wurde noch ein <noscript>-Tag eingefügt (Zeile 28), das nur dann ausgeführt wird, wenn JavaScript im Browser abgeschaltet wurde. Grundsätzlich sollte man immer bedenken, dass eine Website funktionstüchtig sein muss, auch wenn JavaScript abgeschaltet ist. Daher entweder keine wichtigen Funktionen verwenden, eine Alternative einbinden, die ohne JavaScript auskommt oder zumindest den Besucher darauf hinweisen, dass JavaScript aktiviert sein muss.