JavaScript in Drupal

Transkript

1 JavaScript in Drupal

2 JavaScript JavaScript ist nicht Java JavaScript ist keine reine Web-Sprache JavaScript ist benutzbar

3 Web 1.0 Dreamweaver Mouseover-Scripts Dinge, die dem Cursor nachfliegen Schneeflocken auf der Website JavaScript-Links Spielereien

4 Web 2.0 Unobtrusive JavaScript Navigationshilfen Usabilityverbesserungen Beschleunigung der Interaktion Nutzen

5 Merke: Eine Website muss ohne JavaScript vollständig bedienbar sein.

6 Interaktivität implementieren Zuerst jegliche Funktionalität ohne JavaScript programmieren Erst danach die Interaktivitäts-Schicht hinzufügen Hilfreich: Bereits bei der Programmierung an später denken

7 JavaScript Objektorientierte Skriptsprache Anonyme Funktionen und Closures Prototypenbasierte Vererbung Alles ist ein Objekt: "das ist ein string".touppercase(); /^haus\w+$/i.test('hausbau') === true

8 JavaScript-Grundlagen var tstr = "wert"; var tint = 1; var tarr = [ 'eins', 2, "drei" ]; tarr[0] = 1; var tobj = { foo: 'eins', 'bar': 2 }; tobj.foo = 1; tobj['foo'] = 1;

9 JavaScript-Grundlagen function foo() { //... } var foo = function() { //... }; var baz = foo; baz(); (function() { /*... */ })();

10 JavaScript-Grundlagen var foo = function() { /*... */ }; foo.test = "string"; foo(); alert(foo.test); var foo = { prototype: { 'bar': function() { /*... */ } } }; var test = new foo(); test.bar();

11 DOM Das Document Object Model stellt den Zugriff auf die Website bereit Jedes HTML-Element ist ein Node Diverse Funktionen zum Zugriff (getelementbyid, getelementsbytagname, ) Aufwändig zu Programmieren

12 jquery JavaScript-Bibliotheken vereinfachen den Zugriff Stellen Cross-Browser-Kompatibilität her jquery ist die Standard-Bibliothek für Drupal Zugriff per CSS-Selektoren oder XPath $('div.box wählt alle externen Links innherhalb von div.box aus

13 jquery Verkettung von Befehlen: $('p:first').css('opacity', 0.5).slideDown(); Event-Handler: $('p:first').click(function() { /*... */ }); onready-handler: Sobald das DOM bereitsteht Hilfsfunktionen: jquery.extend(this, {... }); jquery.each(myarr, function() { /*... */ });

14 jquery $(document).load(function() { $('a.toggle').click(function() { var name = this.id.match(/^edit-toggle-(.+)$/)[1]; $('#'+ name).parents('fieldset:first').slidetoggle(); }); });

15 Drupal und jquery jquery seit Drupal 5 Bestandteil von Drupal Grund: Vereinfachung der Programmierung Geringe Code-Größe (~19 KB) Keine Verschmutzung des Namespaces Wird hinzugefügt, sobald JavaScript auf der Seite ist Wird mit jeder Version aktualisiert Backport-Patch für jquery für Drupal 5

16 JavaScript in Drupal 5 drupal.js: Hilfsfunktionen, Shared Code autocomplete.js: Autovervollständigung von Textfeldern collapse.js: Zusammenklappbare Fieldsets progress.js: Fortschrittsanzeige (Upload-Modul, Update-Scripts) tableselect.js: Schnelles Auswählen von Checkboxen textarea.js: Größenveränderbare Textareas upload.js: JavaScript-Uploads farbtastic.js/color.js: Farbwähler

17 drupal.js Form-Submits in iframes umleiten Position von DOM-Elementen bestimmen Größe von DOM-Elementen bestimmen Mausposition bestimmen JSON parsen Globales html.js

18 JavaScript hinzufügen drupal_add_js(...); $data: Pfad, Array oder Code $type: core/module/theme setting inline $scope: header/footer $defer: Ausführung verzögern $cache: Caching verhindern

19 JS-Dateien hinzufügen drupal_add_js( drupal_get_path('module', 'mymodule').'/mymodule.js' ); drupal_add_js(array('mymodule' => 'mysetting'), 'setting'); drupal_add_js('$(document).ready(function() { alert('hello World!'); });', 'inline');

20 JSON JavaScript Object Notation Datenaustauschformat Bequemer und einfacher als XML { } 'property': 'value', 'foo': ['one', 2, 'drei', 4, 'cinq'], 'bar': { 'property': 'value' }

21 AJAX-Callbacks Im Menüsystem: $items[] = array( 'path' => 'mymodule/js', 'callback' => 'mymodule_js', ); Menü-Callback: function mymodule_js() { drupal_set_header( 'Content-Type: text/javascript; charset=utf-8'); $data = array('result' => TRUE); return drupal_to_js($data); }

22 Drupal 6 Übersetzung von JavaScript-Dateien Behaviors JavaScript-Themeing Klebrige Tabellenköpfe Anrisstext-Splitter Viele kleine Usability-Verbesserungen

23 Übersetzung Wie in PHP Drupal.t('This is a string.'); Drupal.t('Do you really want to delete %object?', { '%object': object.name }); Drupal.formatPlural(count, '1 comment', '@count comments');

24 Behaviors Alle Funktionen in Drupal.behaviors werden onready ausgeführt Funktionen müssen nicht-destruktiv aufgerufen werden können Vorteil: Können auch später aufgerufen werden

25 Themeing Theme-Funktionen für HTML-Code Vorteil: Themes können Markup beeinflussen Im Modul-JavaScript: var elem = Drupal.theme('mymodule'); $('body').append(elem); Drupal.theme.prototype.mymodule = function() {... } Im Theme-JavaScript: Drupal.theme.mymodule = function() { return $('<div class="mymodule"></div>'); }

26 ?