dok.uni-lueneburg

Arbeitsumgebung

Browser

Nutzen Sie einen Browser mit einer Fehlerkonsole. Jeder moderne Browser bringt heute Entwicklertools mit. Sie können Sie aktivieren unter:

FireFox (V 22.0)
Extras > WebEntwickler > ...
Crome (28)
Anzeigen > Entwickler > ...
Safari (V6.0.5)
Safari > Einstellungen > Erweitert
Hier das Häckchen setzen, damit das Entwickler-Menü angezeigt wird
Opera (V 12.15)
Darstellung > Entwicklerwerkzeuge > ...

Codeeditor

Zu Beginn reicht ein einfacher Texteditor aus. Achten Sie aber beim Speichern darauf, das der Editor auch tatsächlich den Text so abspeichert, wie Sie ihn geschrieben haben und nicht vorher in HTML umsetzt! Wenn Sie im Browser ihren Quellcode sehen, ist genau dies geschehen. Speichern Sie Ihren Code als "nur Text" oder "ASCII Text" oder "plain text".

Wenn Sie etwas mehr programmieren werden die Vorteile von Entwicklungsumgebungen schnell evident. Die farbliche Hervorhebung der Syntax, automatischen Einrücken oder der eingabeute FTP-Client sind große Hilfen im Alltag.

Als einfache kostenlose Quelltexteditoren eignen sich zum Beispiel

Notepad++ (Win)
Phase 5 (Win)
Proton (Win)
TextWrangler (Mac)

Ausgereifte kostenlose Entwicklungsumgebungen sind zum Beispiel:

NetBeans (Win, Mac)
Eclipse (Win, Mac)
Aptana Studio 2 (Win, Mac)

JS Klassenbibliotheken

Für JavaScript existieren viele Klassenbibliotheken, die verwendet werden können wie z.B.: jQuery, Prototype, Scriptaculous oder Dojo. Diese Klassenbibliotheken sind Sammlungen von JavaScript-Funktionen, die der Webentwickler in seine Seite einbinden und dann verwenden kann. Damit wird ihm nicht nur viel Programmieraufwand abgenommen, sondern auch Anfänger können so sehr komplexe JavaScript-Funktionen auf ihren Webseiten nutzen. Die freie Klassenbibliothek jQuery ist derzeit die am weitest verbreitetste.

Einbinden von JQuery in die eigene Seite

jQlery lässt sich von der Website http://jquery.com/ kostenlos herunterladen. Die Datei wird dann in der Projektordner verstaut und in die Webseite eingebunden.

Es gibt auch immer eine komprimierte Version (jquery-1.3.2.min.js), die Sie verwenden sollten, um die Ladezeiten Ihres Skripts möglichst gering zu halten.

Sie können jQuery auch dynamisch einbinden, was Sie dann aber abhängig vom Service eines Anbieters macht.

Reihenfolge

Achten Sie beim Einbinden von jQuery im Head des HTML-Dokuments auf folgende Reihenfolge:

erst die CSS Dateien
dann jQuery
dann eigene JavaScript Funktionen

Objektrefernzierung

Dokument

In jQuery wird alles in Funktionen $() verpackt. Diese Funktion wird ausgeführt, wenn das Dokument (document) vollständig geladen (.ready) wurde und dann eine weitere anonyme (unbenannte) Funktion (function ()) ausgeführt. Die ready-Methode ist sinnvoll, wenn auf Bestandteile der Seite zugegriffen werden soll. Diese liegen ja erst vor, wenn die Seite fertig geladen wurde.

Dafür gibt es eine Abkürzung:

Elemente referenzieren

Innerhalb dieses Rahmens kann z.B. bei einem Klick eine alert-Box ausgegeben werden. Wobei $("a") sagt, das allen Links (<a...>) die anonyme Funktion hinzugefügt werden soll und zwar wenn auf den Link geklickt (.click) wird.

$("a").click(function(){
alert("Danke fuer den Besuch!");
});

oder ein div-Container mit der id "box" animiert sichtbar gemacht werden:

// soll dem Link mit der id "zauberei" bei einem Klick eine Funktion
$('#zauberei').click(function() {

// hinzugefügt werden, die die Box mit der id "box" langsam (slow) anzeigt.
$('#box').show('slow');
});
});
</script>
<a href="#" id="zauberei">Zauberei!</a>
<div id="box" style="display:none;">Hallo Welt!</div>

Ansprechen von Elementen:

$('h1')
$('#id')
$('.klasse')
$(this)

danach folgt immer ein Punkt mit einer jQ-Funktion. Z.B.

Sie können auch die Auswahl auf bestimmte Elemente (hier Absätze) bescränken:

$('#id p)...

Folgende Anweisung

$('.detail.wichtig')

findet nur Elemente in denen beide Klassen vorkommen

Elemente filtern

Filterausdrücke für Selektoren beginnen mit einem Doppelpunkt und werden z.B. so implementiert:

$('div p:first);
$('div p:not(:first);

Folgende Ausdrücke stehen zur Verfügung:

:first
:last
:even (Alle Elemente mit einem geraden Index in einer Collection)
:odd
:not(sel)
:eq(n) (Alle Elemente mit dem Index n aus der Colektion)
:lt(n) (Alle Elemente, deren Index kleiner ist als n)
:gt(n)
:animated (alle aktuell animierten Elemente)
:header (alle Elemente die Überschriften entsprechen)
:hidden
:visible
:button
:input (alle Eingabeelemente

Man kann auch mit der Funktion .filter()....end() beeinflussen, auf welche der ausgewählten Elemente bestimmte Methoden angewandt werden sollen. Die Methode .click() fügt eine Funktion hinzu, die bei einem Mausklick aufgerufen werden soll.

$("a")
.filter(".clickme")
.click( function() {
alert("Du wirst jetzt diese Seite verlassen.");
})
.end()

.filter(".hideme")
.click( function() {
$(this).hide(); return false;
})
.end();

Dieses Beispiel funktioniert für den folgenden HTML Code:

<a href="http://google.com/" class="clickme">Ich zeige eine Nachricht an</a>
<a href="http://yahoo.com/" class="hideme">Ich verschinde</a>
<a href="http://microsoft.com/">Ich bin ein normaler Link</a>

Inhaltsfilter

Eine andere Möglichkeit besteht darin, mit contains() nach dem Inhalt zu sehen. Das funktioniert nur, wenn die Absätze in eine jQuery Container (hier: box) verpackt werden!

$("#box p:contains('der 2. Absatz')").addClass("green");
...

<div id="box">
<p>Ich bin der 1. Absatz</p>
<p>Ich bin der 2. Absatz</p>
<p>Ich bin der 3. Absatz</p>
</div>

Ebenso gibt es

:contains(text)
:empty
:has(sel) (alle Elemente die mindestens ein Element sel entahlten)
:parent

Sichtbarkeit

:hidden
:visible

Attributfilter

$("[alt]")

Selektiert alle Elemente, die einen alt-Parameter haben. Das lässt sich auch weiter einschränken:

$("image[alt]")
$("image[alt=Bild]")

Hierzu gibt es noch zahlreiche weitere Varianten (z.B. [name*=wert], [name!=wert] etc.)

Kindsfilter

:first-child
:last-child
:only-child
:nth-child(n)

Ereignisse

Hier wird ein Button mit einer Funktion versehen. Mit .on wird ein EventHandler hinzugefügt:

$('button').on('click',function() {
window.alert('Ich fühle mich geklickt!');
});

Ereignistypen:

click()
dblclick()
hover()
mousemove()
mousedown()
mouseup()
keypress()
keydown()
keyup()
focus()
blur() // Element verliert focus
change()
submit()

Sollen Koordinaten der Maus angezeigt werden, so können diese durch ein Event-Objekt (neistens einfach e benannt) eingefangen werden. Das schöne an jQuery ist, das es auch auf nicht-standardkonformen Browsern wie den ImternetExplorer funktioniert.

$(document).ready(function() {
$('p').click(function(e) {
alert('Klick bei '+e.clientX+' und '+e.clientY);
});
});

Funktionen

Da jede jQuery-Methode (addClass, show, und html) das Objekt selbst zurück gibt, wird es möglich fortwährend eine weitere Methode anzuwenden.:

$("a").addClass("test").show().html("foo");

Funktionen für eine Collection

Bei der Objektreferenzierung entstehen meist sog. Collenctions, auf die wieder Methoden angewendet werden können:

$("box #p").each(
function() {...}
);

.each() wendet die Funktion auf alle Elemente der Collection an.

var images = $("box img").get();

.get() gibt ein Array aus DOM-Elementen zurück.

.size() bzw. .legth gibt die Anzahl der Elemente in der Collection zurück.

CSS Klassen hinzufügen und entfernen

Eine im Head deklarierte CSS-Klasse...

...kann durch den Befehl...

$('a').addClass('test');

...allen Links hinzugefügt werden.
Weitere Befehle sind:

.attr({name'wert})
.addClass(klasse)
.removeClass(klasse)
.removeClass(klasse)
.toggleClass()

jQuery und Ajax

$.get("url",fnction(daten) {
$("#ajax").html(daten);
});

Animationen

Elemente ein- und ausblenden

Zum ein- und ausblenden stehen folgende funktionen zur Verfügung:

.show()
.hide()
.toggle()
.slideToggle()
.slideUp()
.slideDown()
.slideToggle()
.fadeIn()
.fadeOut()
.fadeToggle()

Ein Beispiel:

Folgendes Skript lässt einen Link langsam verschwinden:

$("a").click(function(){
$(this).hide("slow");
return false;
});

Folgendes Beispiel 22 vergrößert bzw.verkleinert Textboxen, indem man auf das kleine + Klickt.

<html>
<head>
<script type='text/javascript' src="jquery-1.7.1.js"></script>
<style>
a { color:#fff; text-decoration:none;}
div { padding:15px; overflow:scroll; color:#fff;position:absolute;height:200;}
</style>

<script type="text/javascript">
$(document).ready(function(){

/*Box klein machen*/
$('a#klein').click(function(){
$('#links').animate({ left: 20, width: 200 }, "slow", function(){});
$('#rechts').animate({ left: 240, width: 500 }, "slow", function(){});

})
/*Die Box große machen*/
$('a#gross').click(function(){
$('#links').animate({ left: 20, width: 500 }, "slow", function(){});
$('#rechts').animate({ left: 540, width: 200 }, "slow", function(){});
})
});
</script>
</head>

<body>
<div id="links" style="background-color:#336699; left:20; width:200; ">
<p align="right"><a href="#" id="gross">+</a></p>
<p>
"Tiere gruppieren sich wie folgt: a) Tiere, die dem Kaiser gehören, b) einbalsamierte Tiere, c) gezähmte, d) Milchschweine, e) Sirenen, f) Fabeltiere, g) herrenlose Hunde, h) in diese Gruppierung gehörige, i) die sich wie Tolle gebärden, k) die mit einem ganz feinen Pinsel aus Kamelhaar gezeichnet sind, l) und so weiter, m) die den Wasserkrug zerbrochen haben, n) die von weitem wie Fliegen aussehen.“ Jorge Luis Borges
</p>
</div>

<div id="rechts" style="background-color:#996633; left:240; width:500;">
<p align="right"><a href="#" id="klein">+</a></p>
Hier steht etwas, was zunächst sichtbar ist. Das könnte die Titelseite sein. Wenn man den ganzen Text lenks lesen möchte, muss man auf das Pluszeichen oben in der Ecke klicken.
</div>
</body>
</html>

Manipulation des DOM-Baums

Das Document Object Model ist eine Abbildung der HTML-Seite als Baum.

Referenzieren von Knoten im Kontext

Ausgehend von einem Knoten lassen sich Geschister-, Kunds- und Elternknoten ansprechen:

children()
contents()
parent()
next()
prev()
nextAll() // alle filgenden Geschwisterknoten
prevAll()
siblings() // alle Geschwisterknoten aller Elemente der Collection

Hinzufügen von HTML Code

.prepend(code)
.append(code)

Mit append wird HTML Code an das Ende eines Elements angefügt; prepend tut das am Anfang.

$('h1').append('<p>Hallo</p>'); //ergibt
<h1>Überschrift<p>Hallo</p></h1>

.before(code)
.after(code)

dito nur:

$('h1').after('<p>Hallo</p>'); //ergibt
<h1>Überschrift</h1><p>Hallo</p>

.wrap(code)

Umschließt ein Element

$('h1').wrap('<header></header>'); ergibt:
<header><h1>Text</h1></header>

.html(code)

Der komplette Inhalt eines Elements wird ausgetauscht

$('h1').html('<p>Hallo</p>'); ergibt:
<h1><p>Hallo</p></h1>

.remove()

Löscht Elemente aus dem DOM-Baum (nicht ausgeblendet!)