(edit)
Hide minor edits - Show changes to markup
(:redirect 'http://docs.studip.de/develop/Entwickler/HowToJavascript':)
TODO (aklassen)
Diese Bibliothek stellt eine barrierefreie dynamische Validierungslogik für Formularfelder bereit. Genaueres ist hier dokumentiert: Wiki
Das placeholder-Attribut wird nicht in allen Browsern unterstützt. Dieses Plugin ermöglicht dennoch dessen Verwendung.
Das placeholder-Attribut wird nicht in allen Browsern unterstützt. Dieses Plugin ermöglicht dennoch dessen Verwendung. Damit kann man also Texteingabefelder einfach mit einem placeholder-Attribut garnieren und erhält dann das gewünschte Verhalten:
<input type="text" name="email" placeholder="E-Mail-Adresse">
Das Prototype Framework wird seit Stud.IP Version 1.11 nicht mehr verwendet und befindet sich nur aus Gründen der Kompatibilität zu vorhandenen Plugins, die noch Prototype verwenden, in Stud.IP. Prototype darf nicht mehr verwendet werden und wird in der nächsten Version aus Stud.IP entfernt.
Das script.aculo.us UI Framework wird seit Stud.IP Version 1.11 nicht mehr verwendet und befindet sich nur aus Gründen der Kompatibilität zu vorhandenen Plugins, die noch script.aculo.us verwenden, in Stud.IP. script.aculo.us darf nicht mehr verwendet werden und wird in der nächsten Version aus Stud.IP entfernt.
TableKit wurde zum clientseitigen Sortieren von Tabellen verwendet. Da es auf Prototype aufbaut, darf TableKit nicht mehr verwendet werden und wird in der nächsten Version aus Stud.IP entfernt.
Derzeit wird die aktuelle jQuery Version 1.5 verwendet.
Damit können die in HTML-Elementen gespeicherten data-*-Attribute einfach ausgelesen werden. Sobald alle Browser den diesbezüglichen HTML5-Standard implementieren, wird das Metadata-Plugin entfernt (bzw. nur für Progressive Enhancement verwendet).
TODO TableSorter-Pagination-Plugin
Dieses Plugin stellt ähnliche Möglichkeiten wie das vormalige TableKit-Plugin (s.o.) zur Verfügung und ermöglicht das flexible client-seitige Sortieren von Tabellen.
Das jQuery-UI-Multiselect-Plugin wandelt "multiple select inputs" in sexier aussehende Äquivalente um. Das Plugin wurde in den folgenden Changesets gepatchet:
Diese Bibliothek wird verwendet, um lokalisierte Strings in JS verwenden zu können. Weiteres ist bereits im Wiki dokumentiert.
…
Zur Zeit (Stud.IP 2.1) wird jQuery 1.5 und jQuery-UI 1.8.7 verwendet. Von jQuery-UI sind alle Funktionen bis auf die Tabs in Stud.IP geladen. Und die Tabs hauptsächlich deswegen nicht, weil es in Stud.IP andere Möglichkeiten gibt, die Tabs zu implementieren. Auf dieses Feature sollte man also aus Designgründen auch in Plugins verzichten.
Kleine Änderungen am Aussehen von jQuery-UI sind auf einer Parallelseite dokumentiert.
STUDIP.URLHelper.updateAllLinks("#container");
(:toc:)
Das Objekt STUDIP.URLHelper bietet für Javascript ähnliche Funktionalität wie der URLHelper in PHP. Dennoch darf man nicht vergessen, dass beide URLHelper gänzlich unabhängig voneinander sind und nicht miteinander kommunizieren können. Wozu braucht man dann einen URLHelper in Javascript? Zum Beispiel, um:
STUDIP.URLHelper
STUDIP.URLHelper.getLink(alte_url, {hallo: "welt"})
STUDIP.URLHelper.getLink("about.php")
STUDIP.URLHelper.getURL("about.php")
und fülle diese Methoden dann mit Leben. An diese Konvention sollten sich auch Plugin-Programmierer halten, wobei die noch speziell darauf zu achten haben, dass ihre Methodennamen auch tatsächlich eindeutig sind. Implementieren zwei unterschiedliche Plugins eine Methode STUDIP.my_plugin.go , so wird mindestens eines der beiden Plugins weinen. Sinnvoll ist es da, den eindeutigen Klassennamen des Plugins zwischen zu schieben, entweder über STUDIP.pluginclassname.go oder eventuell auch einfach nur pluginclassname.go.
STUDIP.my_plugin.go
STUDIP.pluginclassname.go
pluginclassname.go
und fülle diese Methoden dann mit Leben. An diese Konvention sollten sich auch Plugin-Programmierer halten, wobei die noch speziell darauf zu achten haben, dass ihre Methodennamen auch tatsächlich eindeutig sind. Implementieren zwei unterschiedliche Plugins eine Methode STUDIP.go , so wird mindestens eines der beiden Plugins weinen. Sinnvoll ist es da, den eindeutigen Klassennamen des Plugins zwischen zu schieben, entweder über STUDIP.pluginclassname.go oder eventuell auch einfach nur pluginclassname.go.
STUDIP.go
STUDIP.URLHelper.addLinkParam("hallo", "welt")
STUDIP.URLHelper.getLink("about.php?hallo=ich")
STUDIP.URLHelper.getLink("about.php", {hallo: "ich"})
Bis einschließlich Version 1.11 wurde in Stud.IP nicht jQuery verwendet, sondern Prototype und Scriptaculous. Verwenden Sie für AJAX und alle anderen optischen Effekte die von dieser Bibliothek vorgefertigten Funktionen, die hier dokumentiert sind:
http://api.prototypejs.org/ http://wiki.github.com/madrobby/scriptaculous/
Für den Aufbau des Javascript-Namespace und die Code-Konventionen gilt das selbe wie oben schon erwähnt.
und fülle diese Methoden dann mit Leben. An diese Konvention sollten sich auch Plugin-Programmierer halten, wobei die noch speziell darauf zu achten haben, dass ihre Methodennamen auch tatsächlich eindeutig sind. Implementieren zwei unterschiedliche Plugins eine Methode STUDIP.test_plugin.go , so wird mindestens eines der beiden Plugins weinen. Sinnvoll ist es da, den eindeutigen Klassennamen des Plugins zwischen zu schieben, entweder über STUDIP.pluginclassname.go oder auch einfach nur pluginclassname.go.
STUDIP.test_plugin.go
AJAX-Anfragen sollten über jQuery mit den Methoden .load .get oder .ajax durchgeführt werden. Die meisten AJAX-Aufrufe haben einen AJAX-Indicator, der dem Nutzer mitteilt, dass gerade etwas geladen wird. Falls dieser Indicator ungebeten sein sollte, kann man die AJAX-Methode einbetten wie folgt:
.load .get
.ajax
.load
.get
@]
STUDIP.ajax_indicator = false; $('#dynamischer_bereich').load(url); STUDIP.ajax_indicator = true;
Für alle Javascript-Programmierer wird von Interesse sein, dass einige Funktionen schon in Stud.IP implementiert sind, die auch an anderer Stelle nützlich sein könnten. Der Vorteil liegt auf der Hand: der Code bleibt klein und kann später besser um Funktionalitäten erweitert werden.
openclose: function(id) {}, open: function(id) {}, close: function(id) {}
openclose: function (id) {}, open: function (id) {}, close: function (id) {}
In Stud.IP wird mit der Zeit mehr und mehr Javascript für erweiterte und vereinfachte Bedienung oder auch einfach für besonders schöne Effekte benutzt.
Ab Oktober 2010 verwendet Stud.IP das meistbenutzte Javascript-Framework jQuery und sammelt eine eigene Bibliothek und eigene Funktionen in der Datei public/assets/javascript/application.js.
public/assets/javascript/application.js
Als Programmierer hat man sich im Grunde nur daran zu richten, dass der globale Namespace einigermaßen sauber gehalten wird (also globale Variablen müssen vermieden werden) und dass die Code-Konventionen eingehalten werden, die im Lifters005 zusammen gefasst sind. Die Code-Konventionen sind von Douglas Crockfords "Code Conventions for the JavaScript Programming Language" komplett übernommen.
Was den Namespace angeht, so sollen alle speziellen Stud.IP Funktionen unterhalb des STUDIP-Objektes angehängt werden. Programmiere ich also einige Funktionen für die News, fange ich an mit:
STUDIP.News = { openclose: function(id) {}, open: function(id) {}, close: function(id) {} }
Source: Basis-Wiki-Hilfe | Last change: April 01, 2011, at 11:17 PM, tthelen | Local view: Basis-Hilfe
