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 12/2014: ANONYM & SICHER

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

Ubuntu 14.10 und VirtualBox
Ubuntu 14.10 und VirtualBox
Tim Schürmann, 08.11.2014 18:45, 0 Kommentare

Wer Ubuntu 14.10 in einer virtuellen Maschine unter VirtualBox startet, der landet unter Umständen in einem Fenster mit Grafikmüll. Zu einem korrekt ...

Aktuelle Fragen

Nach Ubdates alles weg ...
Maria Hänel, 15.11.2014 17:23, 4 Antworten
Ich brauche dringen eure Hilfe . Ich habe am wochenende ein paar Ubdates durch mein Notebook von...
Brother Drucker MFC-7420
helmut berger, 11.11.2014 12:40, 1 Antworten
Hallo, ich habe einen Drucker, brother MFC-7420. Bin erst seit einigen Tagen ubuntu 14.04-Nutzer...
Treiber für Drucker brother MFC-7420
helmut berger, 10.11.2014 16:05, 2 Antworten
Hallo, ich habe einen Drucker, brother MFC-7420. Bin erst seit einigen Tagen ubuntu12.14-Nutzer u...
Can't find X includes.
Roland Welcker, 05.11.2014 14:39, 1 Antworten
Diese Meldung erhalte ich beim Versuch, kdar zu installieren. OpenSuse 12.3. Gruß an alle Linuxf...
DVDs über einen geeigneten DLNA-Server schauen
GoaSkin , 03.11.2014 17:19, 0 Antworten
Mein DVD-Player wird fast nie genutzt. Darum möchte ich ihn eigentlich gerne abbauen. Dennoch wür...