KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum...
-
Upload
benedikt-raiser -
Category
Documents
-
view
107 -
download
1
Transcript of KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum...
![Page 1: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/1.jpg)
KIT-BIBLIOTHEK
KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft
jQuery – DIE Javascript-Library
Uwe DierolfINETBIB 2010, 14. April .2010
![Page 2: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/2.jpg)
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek2 11.04.23
Inhalt
Motivation
Selektoren
Events
Animationen
DOM Manipulation
AJAX
Plugins
Tipps für Entwickler
Beispiele
![Page 3: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/3.jpg)
Motivation
Rich ClientsBeispiele
jQuery UI = User Interface http://jqueryui.com/
Comicstrip Navigation http://paulbakaus.com/lab/navigation/comicstrip/
Einfache Manipulation von SeiteninhaltenBeispiel KVK
KVK-Suchmaske „Eigene Kataloge“
Zugriff auf Daten und Ereignisse in SeitenBeispiel KIT-Katalog
Loggen von Mausklicks auf externe Links
Tastatursteuerung
Browserunabhängige Erstellung von Javascript-Code
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek3 11.04.23
![Page 4: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/4.jpg)
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek4 11.04.23
Unobtrusive Javascript ?
Bedeutungunaufdringlich, unauffällig
IdeeCSS trennt Layoutinformation vom HTML
jQuery trennt Javascript vom HTML
Separation von Funktionalität (behaviour layer)
Einklinken in HTML-SeitenLaden von jQuery und eigenem JS-Programm
$(document).ready(function() {….});
![Page 5: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/5.jpg)
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek5 11.04.23
Selektoren
Schnell mal "Objekte" im HTML auffindenIDs, Klassen, Attribute, Attribute mit speziellen Werten etc.
$('#id') , $('.class'), $('element')
Attribute[name=value]
Multiple selectorsAND [name=value][name2=value2]
OR (“selector1, selector2, selectorN”)
Hierarchisch$('ancestor descendant') , $('parent > child' )
Filter$('p:first') , $('div:visible' ) , $('*:header' )
U.v.a. mehr (s. jQuery)$('div:has(img.thumbnail[src$=.png ]:not(:hidden))' )
![Page 6: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/6.jpg)
Selektoren II
Liefern Treffermengen (wrapped set), auf die Aktionen angewandt werden können
Chaining von AktionenJede Methode liefert die Objekte zurück, auf denen Sie arbeitet
BeispielSuche alle Paragraphen und mache darin den Text rot und blende sie dann langsam aus$("p").css("color","red").hide("slow")
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek6 11.04.23
![Page 7: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/7.jpg)
Events
Ereignisse abfangenEvents an Objekte binden (bind / unbind)
$('#id').bind('click' , callbackHandler)
$('#id').bind('click', function() { alert('User clicked on "foo."'); });
Shortcut für bind('eventname‘)click()
mouseenter() etc.
Eventhandler erhält das Event ObjectPraktisch, um z.B. das Objekt zu ermitteln, auf das geklickt wurde
Live-EventsEvents Objekten zuordnen, die es noch nicht gibt
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek7 11.04.23
![Page 8: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/8.jpg)
Animationen
Von jQuery UI (= user interface) lernenComicstrip animation (a la Macintosh)
Z.B. von Paul Bakaus
Fisheye http://interface.eyecon.ro/demos/fisheye.html
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek8 11.04.23
![Page 9: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/9.jpg)
DOM-Manipulation
Insert / change / replace / remove nodes
Inside .append(content) / .prepend(content)
Outside .after(content) / .before(content)
Around .wrap(content) / .wrapAll(content)
Einfache Operationen$('#id').text('der Text') / $('#id').html('<p>huhu</p>')
$('#id').empty() / .remove()
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek9 11.04.23
![Page 10: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/10.jpg)
AJAX
Laden von "externen" InhaltenVORSICHT: Sicherheitsmodell schränkt ein
Extern heißt "auf dem eigenen Server !"
Man sieht nicht unbedingt sofort, dass AJAX im Spiel ist
$('#id').load("externalData.html" )Praktisch: load() erlaubt auch die Angabe von Selektoren
load(file #id)
$.get("http://. . ." , [ data ] , [callback] , [ type ] ) ;Analog POST-Requests
$.getScript("meinJavascript.js" , [callback] ) ;
Callback wird nur bei Erfolg aufgerufen !
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek10 11.04.23
![Page 11: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/11.jpg)
Tipps
Möglichst oft IDs und Klassennamen im HTML einsetzenSowas kann man einfach per Selektor suchen
Man kann mehr als nur einen Klassennamen verwendenWird oft zum Speichern eines Status benutzt
Beliebige eigene Attributnamen sind praktischKann man mit attr() leicht lesen und ändern
$('#id').attr('attributname')
$('#id').attr('attributname',newValue)
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek11 11.04.23
![Page 12: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/12.jpg)
Plugins nutzen
Wer suchet, der findet !Nicht gleich alles selber programmieren
Es gibt tausende von Plugins
Eigene Plugins zu erstellen, ist nicht (so) schwer
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek12 11.04.23
![Page 13: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/13.jpg)
"Meine" Plugins
jquery.cookies.2.2.0.jsCookie-Management
jquery.hotkeys.js
jquery.json-2.2.jsJSON-Behandlung
jquery.values.jsVerwaltung von Formularwerten
jquery.sync-load.js (Jakob Westhoff)Synchrone load()-function zum Laden von HTML in Variablen
jtip.js (modified)Tooltips von Cody Lindley
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek13 11.04.23
![Page 14: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/14.jpg)
Fallstricke beim Entwickeln
Fehler (frühzeitig) erkennenBeispiel
Include eines jQuery-Plugins vergessen aber Plugin-function aufgerufen
Ready-Handler bricht mitten drin ab !
Firefox-Fehlerkonsole öffnen
Firebug-Konsole benutzenUnten am Rand aufs rote Kreuz achten
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek14 11.04.23
![Page 15: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/15.jpg)
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek15 11.04.23
Fallstricke bei event-Handlern I
Man kann einen Event mehrmals an ein Objekt binden vorher unbind() verwenden
Hilfreich: "namespaces"$('div').bind('click.mynamespace' , function () {/* ... */ });
$('div').unbind('click.mynamespace') ;
Alles entfernen:$('div').unbind('. mynamespace') ;
Event-Modell hängt LEIDER DOCH vom Browser abZum Glück nur selten !
Bsp.: change-Event kommt beim IE erst nach blur
Bubbling von unten nach oben
Ggfs. stopPropagation verwenden
![Page 16: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/16.jpg)
Fallstricke bei event-Handlern II
Callback ohne Argumente$.get('myhtmlpage.html', myCallBack);
Callback mit ArgumentenFalsch: $.get('myhtmlpage.html',
myCallBack(param1, param2));
Richtig$.get('myhtmlpage.html',
function(){ myCallBack(param1, param2); });
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek16 11.04.23
![Page 17: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/17.jpg)
Javascript-Tipps
Rückgabewerte Sind manchmal null oder undefined oder der String "undefined"
Rückgabewerte sind manchmal Objekte, manchmal StringsBeispiel JSON
Firefox ab 3.5 behandelt JSON intern als Objekt, IE noch nicht
Führt zu JSON.parse-Fehlern
Code schützen Google Closure Compiler
http://code.google.com/intl/de-DE/closure/compiler/
JS Obfuscatorhttp://javascript-obfuscator.software.informer.com/
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek17 11.04.23
![Page 18: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/18.jpg)
VORSICHT Cookies
Cookies als GedächtnisKann ins Auge gehen, da zu viel zum Server übertragen wird
Error 500
Abhilfe: localStorage
Nachteil: Kennen noch nicht alle Browsern
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek18 11.04.23
![Page 19: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/19.jpg)
jQuery lernen
jQuery in Action lesenHerumspielen mit den diversen Labs
http://www.ubka.uni-karlsruhe.de/jquery/jquery-in-action-DEMO/chapter1/document.ready.html
Tools für FirefoxFirebug
FireQuery
Eventbug
Livehttpheaders
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek19 11.04.23
![Page 20: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/20.jpg)
Fazit
Wer es nicht benutzt, ist selber schuldjQuery ist klein
Ziemlich gut getestet
Sehr performant
Kompatibel mit anderen JS-Libraries (noConflict)
jQuery 1.4 ist noch neuZ.T. um Faktoren schneller
Vorsicht bei Verwendung alter Plugins oder UI
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek20 11.04.23
![Page 21: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/21.jpg)
Vielen Dank
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek21 11.04.23
Noch fit für Fragen ?
![Page 22: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/22.jpg)
Literatur
jQuery in Action, Bear Bibeault undYehuda Katz, engl.
jQuery, Ralph Steyer), dt.,
Learning jQuery 1.3, PACKT Publishing, engl.
jQuery Reference Guide, PACKT Publishing, engl.
jQuery UI 1.6, PACKT Publishing, engl. (neu 1.7)
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek22 11.04.23
![Page 23: KIT-BIBLIOTHEK KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft jQuery – DIE Javascript-Library.](https://reader036.fdocuments.net/reader036/viewer/2022062417/55204d7549795902118c9c0c/html5/thumbnails/23.jpg)
Links
http://docs.jquery.com/Main_Page
http://www.ubka.uni-karlsruhe.de/jquery/jquery-in-action-DEMO/
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
http://westhoffswelt.de/blog.html
http://westhoffswelt.de/data/portfolio/webtechcon_2009_bubbles_and_trees_with_jquery.pdf
Dipl.-Inform. Uwe Dierolf - KIT-Bibliothek23 11.04.23