AA_tree_bernadg_sxc_1382003.jpg

© Bernadg, sxc.hu

Blick aufs Objekt

Javascript, JQuery und das DOM-Modell im Zusammenspiel

18.10.2012
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
 

Ähnliche Artikel

Kommentare

Infos zur Publikation

LU 11/2014: VIDEOS BEARBEITEN

Digitale Ausgabe: Preis € 4,95
(inkl. 19% MwSt.)

Mit der Zeitschrift LinuxUser sind Sie als Power-User, Shell-Guru oder Administrator im kleinen Unternehmen monatlich auf dem aktuelle Stand in Sachen Linux und Open Source.

Sie sind sich nicht sicher, ob die Themen Ihnen liegen? Im Probeabo erhalten Sie drei Ausgaben zum reduzierten Preis. Einzelhefte, Abonnements sowie digitale Ausgaben erwerben Sie ganz einfach in unserem Online-Shop.

NEU: DIGITALE AUSGABEN FÜR TABLET & SMARTPHONE

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

Tipp der Woche

Schnell Multi-Boot-Medien mit MultiCD erstellen
Schnell Multi-Boot-Medien mit MultiCD erstellen
Tim Schürmann, 24.06.2014 12:40, 0 Kommentare

Wer mehrere nützliche Live-Systeme auf eine DVD brennen möchte, kommt mit den Startmedienerstellern der Distributionen nicht besonders weit: Diese ...

Aktuelle Fragen

Artikelsuche
Erwin Ruitenberg, 09.10.2014 07:51, 1 Antworten
Ich habe seit einige Jahre ein Dugisub LinuxUser. Dann weiß ich das irgendwann ein bestimmtes Art...
Windows 8 startet nur mit externer Festplatte
Anne La, 10.09.2014 17:25, 4 Antworten
Hallo Leute, also, ich bin auf folgendes Problem gestoßen: Ich habe Ubuntu 14.04 auf meiner...
Videoüberwachung mit Zoneminder
Heinz Becker, 10.08.2014 17:57, 0 Antworten
Hallo, ich habe den ZONEMINDER erfolgreich installiert. Das Bild erscheint jedoch nicht,...
internes Wlan und USB-Wlan-Srick
Gerhard Blobner, 04.08.2014 15:20, 2 Antworten
Hallo Linux-Forum: ich bin ein neuer Linux-User (ca. 25 Jahre Windows) und bin von WIN 8 auf Mint...
Server antwortet mit falschem Namen
oin notna, 21.07.2014 19:13, 1 Antworten
Hallo liebe Community, Ich habe mit Apache einen Server aufgesetzt. Soweit, so gut. Im Heimnet...