Zum Inhalt

Inhaltsverzeichnis • Teil 1 - Anfänger • Dynamik • Dynamisches HTML
⇦ Programme verstehen / Dokument Object Model ⇨
30.07.2014 10:45:08

Dynamisches HTML

DHTML

Wie schon erwähnt bringt erst der Einsatz von JavaScript Interaktivität auf eine Webseite. Man spricht dann auch von dynamischen HTML, da JavaScript HTML zur Laufzeit (also nach dem Laden der Seite) ändern kann.

Anmerkung: Das unterscheidet JavaScript von einer Sprache wie PHP, Perl oder ASP die schon vor dem Ausliefern einer Seite auf dem Server ausgeführt werden.

Da moderne Webseiten aber nicht ohne Interaktivität auskommen, biete ich Ihnen in diesem Kapitel einen Einstieg in JavaScript. Sie können so zumindest bestehenden Code aus dem Web in ihre Projekte einfügen.

Eine Einführung in JavaScript bietet der fünfte Teil.

JS als Spamschutz

Als sinnvolle Anwendung für eine Visitenkarte bietet sich JavaScript beispielsweise an, wenn man aus Spamschutzgründen die E-Mail-Adresse nicht direkt in den HTML-Code schreiben will. Dort kann sie nämlich von sogenannten Spidern (spezialisierte Such­maschinen) gefunden und in Spam-Verteiler eingetragen werden.

Damit der Browser erkennt, dass an dieser Stelle Javascript steht, wird das Skript innerhalb des Tags <script> [s,a,w] geschrieben. In JavaScript kodiert, kann das dann folgendermaßen aussehen:

Editor - 11_visitenkarte_js_inline.html
<p>
  <!-- Script an Stelle des direkten Links -->
  <script type="text/javascript">
    var name   = "hilfe";
    var domain = "hartnick";
    var tld    = "de";
    document.write('\n<a href=\"mailto:' + name + '@' + domain + '.' + tld + '\">'
                   + name + '@' + domain + '.' + tld
                   + '</a>');
  </script>
  <noscript>_nick_at_domain_._de_</noscript> <br />
</p>

Sollte der Browser kein JavaScript darstellen, bestimmen sie im <noscript> [s,a,w] Bereich einen alternativen Text.

Noch einmal der Hinweis: Nicht umsonst wird in diesem Buch verschiedene Farben für die verschiedenen Sprachen HTML, CSS und JavaScript benutzt. Ihre Syntaxen sind grundlegend verschieden und sie sollten sie deshalb nicht durcheinander bringen.

Übung:

Bauen sie das Skript an der entsprechenden Stelle in ihre Visitenkarte ein.

(Beispiel 11_visitenkarte_js_inline.html)

Anhang: Tastaturkommandos

Anmerkung: Bedenken sie, dass das Beispiel nur der Weg zum Verständnis von JavaScript dient. Normalerweise binden sie bei ihrem Wissensstand, keinen JavaScript-Code sondern höchstens JavaScript-Funktionen ein.

Externes JS

Etwas komfortabler und noch sicherer ist die Auslagerung der Funktionalität in eine externe Datei. So können sie den JavaScript-Code dann auch auf anderen Webseiten nutzen. Dazu verfrachten sie den Code in eine eigene Datei mit der Endung .js und wandeln ihn in eine Funktion ohne Rückgabewert (Funktion enthält kein "return") um: (Beispiel 12)

Anmerkung: In JavaScript umschließen Hochkommas  ''  oder Hochkommatas  ""  eine Zeichenkette (String). Soll jetzt in der Zeichenkette ein ' oder ein " Zeichen erscheinen, muss dieses besonders gekennzeichnet werden. Dazu schreibt man das Escape-Zeichen  \  davor. Weitere Zeichen finden sie im Anhang: JS Escape-Sequenzen

Die externe JS-Datei ist im Header ihrer HMTL-Datei anzugeben. Der Funktionaufruf erfolgt an gewohnter Stelle im HTML-Code:

Editor - 12_visitenkarte_js.html
<html>
  <head><script src="12_visitenkarte.js" type="text/javascript"></script>
  </head>

  <body><p>
      <!-- Script an Stelle des direkten Links -->
      <script language="JavaScript" type="text/javascript">
        insertEmail("nick","domain","de")
      </script>
      <noscript>_nick_at_domain_._de_</noscript> <br /></p>
  </body>
</html>

Auf diese Weise binden sie jegliche externe JavaScript-Funktion ein. Normalerweise finden sie im Netz eine entsprechende Funktion mit einer Anleitung, wie diese einzubinden ist. Meist ist dann auch eine externe CSS-Datei dabei:

Editor - meine_seite.html
  <head><script type="text/javascript" src="externe_funktion.js"></script>
    <link rel="stylesheet" type="text/css" href="externe_funktion.css" />
  </head>

Übung:

Bauen sie das Skript ihrer Visitenkarte im Header und Body entsprechend um und legen sie die externe Funktion an:

(Beispiel 12_visitenkarte_js.html
, Beispiel 12_visitenkarte.js)

Anhang: Tastaturkommandos

Zusammenfassung

⇦ Programme verstehen / Dokument Object Model ⇨
Nach oben