e1:javascript

JavaScript

Mit HTML werden die Struktur und der Inhalt von Webseiten beschrieben, mit CSS wird das Layout von Webseiten gestaltet und JavaScript verwendet man für Interaktivität von Webseiten. JavaScript ist eine objektorientierte Skriptsprache, die in Browsern eingesetzt wird. JavaScript ermöglicht es mittels Event-Handlern Nutzerinteraktionen auszuwerten und dementsprechend die Struktur, den Inhalt und das Layout einer Webseite zu verändern. Die Syntax von JavaScript ist ähnlich der von Java. Zur Entwicklung von Skripten setzt man im Firefox-Browser die Firebug-Erweiterung ein. Analog zu CSS kann man JavaScript direkt im HTML-Dokument speichern oder in eine separate js-Datei auslagern. Im nachfolgenden Beispiel wird dem Button Hinweis der Event-Handler onclick zugewiesen. Im zugehörigen Attributwert steht die JavaScript-Anweisung drin, die beim Anklicken ausgeführt werden soll, im Beispiel also der Aufruf der JavaScript-Funktion Hinweis(). 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<script type="text/javascript">
<!--
function Hinweis() {
  alert("alert() öffnet ein modales Fenster");
}
//-->
</script>
</head>
<body><p>Ein wichtiger
<input type="button" value="Hinweis" onclick="Hinweis()"></p>
</body>
</html>

DOM – Document Object Model

Zur Realisierung der Interaktivität kann JavaScript auf das Document Object Model, also auf den Dokumentbaum zugreifen. Dieser steht als Objekt mit dem Namen document direkt zur Verfügung, muss also nicht erst mit einem Konstruktor erzeugt werden. Mit den Methoden getElementById, getElementsByName und getElementsByTagName kann man auf HTML-Elemente zugreifen (vgl. http://de.selfhtml.org/javascript/objekte/document.htm). Für jedes HTML-Element stehen spezifische Attribute und Methoden zur Bearbeitung zur Verfügung. Ein <a>-Element hat natürlich andere Attribute als ein <img>-Element. Wir betrachten dieses Beispiel: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tastaturereignisse</title>
<script>
function zeigeAnzahlZeichen(value) {
  document.getElementById('AnzahlZeichen').innerHTML =  value.length + " Zeichen";
}
</script>
</head>
<body>
<h3>Tastaturereignisse</h3>
<p>
Dein Gezwitscher (max. 140 Zeichen):<br>
<textarea id="message" name="message" cols="50" rows="2"
          onkeyup="zeigeAnzahlZeichen(this.value)">
</textarea><br>
<span id="AnzahlZeichen">0 Zeichen</span>
</p>
</body>
</html>

Dem textarea-Element wird über das onkeyup-Attribut die JavaScript-Methode zeigeAnzahlZeichen mit dem Parameter this.value zugewiesen. this bezieht sich auf das zugehörige textarea-Element, das ein Attribut value hat (http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#textarea) in dem der eingegebene Text „Hier wird getwittert!“ steht. In der JavaScript-Funktion zeigeAnzahlZeichen wird mit value.length die Länge (http://de.selfhtml.org/javascript/objekte/string.htm) des übergebenen String-Parameters value ermittelt und der Text „ Zeichen“ drangehängt. Mit document.getElement¬ById('AnzahlZeichen') wird im Dokument das HTML-Element gesucht, das im Attribut id den Wert AnzahlZeichen hat. Es handelt sich um das span-Element. Über innerHTML hat man lesenden und schreibenden Zugriff auf den Inhalt dieses Elements, also zu Beginn auf 0 Zeichen. Dieser Inhalt wird über die Zuweisung an innerHTML bei jedem Tastendruck aktualisiert.

Aufgaben

  1. Verwende getElementsByName anstelle von getElementById Siehe auch
  2. Beschränke die Eingabe auf 140 Zeichen.

Variablen und Kontrollstrukturen

Eine ausführliche Zusammenstellung der JavaScript-Sprachbestandteile findet man unter http://webkompetenz.wikidot.com/html-handbuch:ecmascript-sprachbestandteile. Wir analysieren das RGB-Beispiel: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Farben</title>
  <script language="javascript">
  function setElementBackground( elementID ) {
    var red   = Math.floor(Math.random() * 256);
    var green = Math.floor(Math.random() * 256);
    var blue  = Math.floor(Math.random() * 256);
    var rgb   = 'rgb(' + red + ',' + green + ',' + blue + ')';
    var obj = document.getElementById(elementID);
    if (obj != null) {
      obj.style.background = rgb;
      document.getElementsByTagName("p")[1].innerHTML = rgb;
    }
  }
  </script>
  <style type="text/css">
  #Farbflaeche {
    width:    18em;
    padding:  1em;
    border:   1px solid #999999;
  }
  </style>
</head>
<body>
  <div id="Farbflaeche">
    <p>Ändere die hässliche Hintergrundfarbe!</p>
    <p></p>
  </div>
  <button onclick="setElementBackground('Farbflaeche');">Klick mich!</button>
</body>
</html>

Dem Button-Element wird über das Attribut onclick die JavaScript-Funktion setElementBackground zugewiesen. Als Parameter wird die ID der Farbfläche übergeben. Die JavaScript-Funktion berechnet zufällige red, green und und blue-Werte. In der String-Variablen rgb wird das Ergebnis zusammen¬gesetzt. Falls es ein HTML-Element mit dem Attribut id = 'Farbflaeche' gibt, so wird dessen Hinter¬grundfarbe auf die Zufallsfarbe gesetzt.

Aufgabe Verwende document.getElementsByTagName, um im zweiten <p>-Element den rgb-Wert als String anzuzeigen. http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name

Verweise ändern

Im nächsten Beispiel werden dynamisch Verweise geändert. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Coole Links</title>
<script>
var Links = [
    "http://www.storiesinflight.com/html5/",
    "http://html5boilerplate.com/",
    "http://www.cssclip.com/",
    "http://www.iconarchive.com/",
    "http://www.oswd.org/"
];
var AktuellerLink = 0;
 
function CoolLink() {
  document.getElementById("CoolerLink").href = Links[AktuellerLink];
  document.getElementById("CoolerLink").innerHTML = Links[AktuellerLink];
  AktuellerLink += 1;
  if (AktuellerLink >= Links.length)
    AktuellerLink = 0;
}
</script>
</head>
<body onload="CoolLink();">
<div style="width: 500px; padding: 5px; border: 2px solid silver; font-size: 20px">
  <a id="CoolerLink"></a>
</div>
<button type="button" onclick="CoolLink();">nächster Verweis</button>
</body>
</html>

Über den Eventhandler onclick wird die JavaScript-Funktion CoolLink aufgerufen. Im JavaScript-Bereich ist eine Variable Links als Feld von fünf URL-Strings definiert. In der Variablen AktuellerLink wird der aktuelle Index in das Feld gespeichert. Beim Aufruf von CoolLink wird mit document.getElementById(„CoolerLink“) das <a>-Element mit id=„CoolerLink“ bestimmt. Zuerst wird dessen href-Attribut und dann sein Inhalt auf den aktuellen Link gesetzt. Danach wird der Wert von AktuellerLink erhöht und bei Bedarf auf 0 gesetzt. CoolLink wird wegen des Eventhandlers onload auch nach dem Laden des Dokuments aufgerufen.

Aufgabe Erweitere das Dokument so, dass zusätzlich AktuellerLink ausgegeben wird.

  • /var/www/infowiki/data/pages/e1/javascript.txt
  • Zuletzt geändert: 2017/12/09 08:09
  • von admin03