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 10/2016: Kryptographie

Digitale Ausgabe: Preis € 0,00
(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

Probleme mit MPC/MPD
Matthias Göhlen, 27.09.2016 13:39, 0 Antworten
Habe gerade mein erstes Raspi Projekt angefangen, typisches Einsteigerding: Vom Raspi 3B zum Radi...
Soundkarte wird erkannt, aber kein Ton
H A, 25.09.2016 01:37, 6 Antworten
Hallo, Ich weiß, dass es zu diesem Thema sehr oft Fragen gestellt wurden. Aber da ich ein Linu...
Scannen nur schwarz-weiß möglich
Werner Hahn, 20.09.2016 13:21, 2 Antworten
Canon Pixma MG5450S, Dell Latitude E6510, Betriebssyteme Ubuntu 16.04 und Windows 7. Der Canon-D...
Meteorit NB-7 startet nicht
Thomas Helbig, 13.09.2016 02:03, 4 Antworten
Verehrte Community Ich habe vor Kurzem einen Netbook-Oldie geschenkt bekommen. Beim Start ersch...
windows bootloader bei instalation gelöscht
markus Schneider, 12.09.2016 23:03, 1 Antworten
Hallo alle zusammen, ich habe neben meinem Windows 10 ein SL 7.2 Linux installiert und musste...