AA_tree_bernadg_sxc_1382003.jpg

© Bernadg, sxc.hu

Javascript, JQuery und das DOM-Modell im Zusammenspiel

Blick aufs Objekt

Javascript hat sich zu einer der wichtigsten Programmiersprachen entwickelt. Wer die Grundlagen beherrscht, hat im Handumdrehen das Web 2.0 gemeistert.

Bei den meisten Webanwendungen und dynamischen Webseiten sitzt die Programmlogik auf dem Server: Ein in PHP, Java, Python, oder Perl geschriebenes Skript erzeugt auf Benutzeranfragen zugeschnittene HTML-Seiten. Doch die Browser selbst enthalten mit ihren Javascript-Interpretern eine vollständige und dazu sehr leistungsfähige Laufzeitumgebung.

Javascript-Programme reagieren auf Eingaben des Benutzers und greifen über eine DOM genannte API auf die geöffnete HTML-Seite zu. Diese Schnittstelle von Javascript zu HTML erlaubt es, Attribute für jedes Tag auf der Seite (Farbe, Größe oder Sichtbarkeit) zu ändern. Darüber hinaus bietet sie die Möglichkeit, Bereiche der Seite zu entfernen oder beliebige HTML-Elemente an jeder Stelle der Seite einzufügen (Abbildung 1).

Abbildung 1: Die Javascript-Laufzeitumgebung, die über die DOM-Schnittstelle in beide Richtungen mit der HTML-Seite kommuniziert, reagiert auf Eingaben des Benutzers wie Mausklicks und verändert Inhalt und Eigenschaften von HTML-Tags.

Alte Bekannte

Abgesehen von der Objektorientierung ähnelt Javascript der Programmiersprache C. Viele andere Sprachen, von Java bis Perl, teilen diese Grundstrukturen (Schleifen, Bedingungen, Operatoren) ebenfalls. Darum fällt der Umstieg leicht, solange Sie nur ausschließlich die prozeduralen Elemente der Sprache einsetzt, was das Gliedern des Quellcodes in Routinen für bestimmte Aufgabe umfasst.

Für kleinere Anwendungen funktioniert dies gut. Die für größere Programme unverzichtbare Objektorientierung setzt Javascript allerdings sehr eigenwillig um. Die zweite Hälfte des Artikels widmet sich deshalb dieser speziellen Variante des Kapselns von Daten und Vererbung.

Die Wahl des Namens Javascript folgte eher Marketingüberlegungen als sachlichen Gründen: Außer einem Grundinventar, das Java ohnehin mit C und weiteren Sprachen teilt, übernimmt Javascript nur die Dot-Notation Objekt.Attribut vom großen Bruder. Anders als bei Java handelt es sich bei Javascript jedoch nicht um eine streng objektorientierte Sprache.

Außerdem integriert Javascript Elemente des funktionalen Programmierens, die Java bis heute fehlen. Funktionale Programmiersprachen basieren im Kern auf namenlosen, an Variablen gebundene Funktionen (anonyme Funktionen, Lambda-Funktionen), die Sie auch als Parameter für Funktionen verwenden dürfen. Einen vollständigen Überblick über die Sprachelemente von Javascript, mit Ausnahme der Objektorientierung, finden Sie im Web [2].

Nachhilfe gefragt

Kaum ein Programmierer spricht die DOM-API heute noch direkt an: Zu sehr unterscheidet sich die Implementation von Browser zu Browser, obwohl die Zahl der Unterschiede in den letzten Jahren abgenommen hat. Abgesehen von solchen Problemen das DOM für sich gesehen als unhandlich und sperrig. Deswegen nutzen die meisten Programmierer die Bibliothek JQuery [3] als Zwischenschicht. Dieser einführende Artikel konzentriert sich ausschließlich auf diesen Ansatz.

Das erste kleine Übungsprogramm fügt mithilfe einer Schleife vier farbige Boxen in eine leere Seite ein. Als Beispiel für Interaktivität öffnet ein Klick auf eine der Boxen einen Dialog mit einem abhängig von der Farbe wechselnden Text. Die Zeilen aus Listing 1 zeigen bereits viele Grundzüge der Javascript-Programmierung. In Abbildung 2 sehen Sie das Ergebnis.

Listing 1

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){ //ausführen, wenn Anzeige fertig
  var colors = ["red", "green", "blue", "yellow"];
  var names =["rot", "grün", "blau", "gelb"];
  var sayings = {
    "rot":"Rot steht für die Liebe.",
    "grün":"Grün sind die Bäume im Mai.",
    "blau":"Auch roter Wein macht blau.",
    "gelb":"Das Angesicht des Neids ist gelb."
  };
  for (var i in colors){
    var div = $("<div>");
    div.css({"height":"50px", "width":"150px", "background-color":colors[i]});
    div.addClass("colorbox");
    div.html(names[i]);
    $("body").append(div);
  }
  $(".colorbox").on("click", function(){
    var clicked = $(this);
    var farbe = clicked.text();
    alert(sayings[farbe]);
  });
});
</script>
Abbildung 2: Was wie eine simpler, statischer Inhalt aussieht hat der Browser per Javascript dynamisch in eine leere Seite geschrieben. Auf einen Mausklick reagieren die farbigen Felder außerdem mit einem zur Farbe passenden Text-Popup.

Zeile 1 bindet die JQuery-Bibliothek ein, die beim Manipulieren des HTML-Codes zum Einsatz kommt. Enthält das Tag <script> ein Attribut src, verweist es auf eine externe Javascript-Datei. In unserem Fall deutet die URL auf die von Google gehostete Version von JQuery, was den Download der Bibliothek erspart. Der zweite Script-Tag enthält kein entsprechendes Attribut. Dafür umschließt er direkt eingebetteten Programmcode. Der Typ text/javascript verweist in beiden Fällen auf die Sprache der eingebetteten Skripte.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 5 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

Kommentare

Infos zur Publikation

LU 12/2016: Neue Desktops

Digitale Ausgabe: Preis € 5,99
(inkl. 19% MwSt.)

LinuxUser erscheint monatlich und kostet 5,95 Euro (mit DVD 8,50 Euro). Weitere Infos zum Heft finden Sie auf der Homepage.

Das Jahresabo kostet ab 86,70 Euro. Details dazu finden Sie im Computec-Shop. Im Probeabo erhalten Sie zudem drei Ausgaben zum reduzierten Preis.

Bei Google Play finden Sie digitale Ausgaben für Tablet & Smartphone.

HINWEIS ZU PAYPAL: Die Zahlung ist ohne eigenes Paypal-Konto ganz einfach per Kreditkarte oder Lastschrift möglich!

Aktuelle Fragen

Brother Drucker DCP-J4120
Achim Zerrer, 09.12.2016 18:08, 0 Antworten
Hallo, ich wollte unter Leap 42.1 den Brother Drucker installieren und dazu das PPD- Datei vom do...
Drucker Epson XP-332 unter ubuntu 14.04 einrichten
Andrea Wagenblast, 30.11.2016 22:07, 2 Antworten
Hallo, habe vergeblich versucht mein Multifunktionsgerät Epson XP-332 als neuen Drucker unter...
Apricity Gnome unter Win 10 via VirtualBox
André Driesel, 30.11.2016 06:28, 2 Antworten
Halo Leute, ich versuche hier schon seit mehreren Tagen Apricity OS Gnome via VirtualBox zum l...
EYE of Gnome
FRank Schubert, 15.11.2016 20:06, 2 Antworten
Hallo, EOG öffnet Fotos nur in der Größenordnung 4000 × 3000 Pixel. Größere Fotos werden nic...
Kamera mit Notebook koppeln
Karl Spiegel, 12.11.2016 15:02, 2 Antworten
Hi, Fotografen ich werde eine SONY alpha 77ii bekommen, und möchte die LifeView-Möglichkeit nu...