230 likes | 349 Views
JavaScript-Bibliotheken. Ein Vortrag von Johan Gründer und Stefan Hinrichs. Hochschule Emden/Leer. Inhalt des Vortrags. JavaScript-Grundlagen Bibliotheken und deren Anwendung, Vor- und Nachteile. I. Historie und Grundlagen. Entwicklung im Jahr 1995 durch Brendan Eich, Netscape
E N D
JavaScript-Bibliotheken Ein Vortrag von Johan Gründer und Stefan Hinrichs Hochschule Emden/Leer
Inhalt des Vortrags • JavaScript-Grundlagen • Bibliotheken und deren Anwendung, Vor- und Nachteile JavaScript-Bibliotheken
I. Historie und Grundlagen • Entwicklung im Jahr 1995 durch Brendan Eich, Netscape • Abkömmling von der Programmiersprache C, nicht mit Java zu verwechseln (!!!) • Standardisierung unter Namen „ECMAScript“ (ECMA-262) • Konkurrenzkampf gegen Microsofts „JScript“ • Einführung des DocumentObject Models (DOM) zur Standardisierung und Vereinheitlichung eines Modells mit Script-Sprache für viele Browser (heute: DOM Level 3) • Script-Sprache durch eigenen Browser interpretiert (vgl. PHP serverseitige Interpretation) • Aktuelle Version 1.8.6, Entwicklung: Mozilla JavaScript-Bibliotheken
I. Anwendungsgebiete • dient der Optimierung und Manipulation von HTML-Websites (DOM) • Implementierung und Überprüfung von Formularen, Suchfunktionen, Navigation, Quickbars u.v.m. • Implementierung von komplett eigenen Anwendungen (nur browserinterpretiert!) • kann Buttons, Checkboxes usw. definieren und mit einer Funktion beschreiben • Funktionen von HTML und CSS können abgenommen werden • arbeitet clientseitig (vgl. PHP serverseitig) JavaScript-Bibliotheken
I. Syntax • Beliebiges JavaScript-Dokument reicht zur Erklärung JavaScript-Bibliotheken
II. Was ist eine JavaScript-Bibliothek • „Handbuch“, Frameworks • erleichtert, verkürzt die Programmierung • vollständige Problemlösungen gerade bei komplexen Funktionen • große Nachfrage erfordert Entwicklung leicht zu benutzender Interfaces JavaScript-Bibliotheken
II. Eine moderne ausgereifte Bibliothek… • browserübergreifende Unterstützung • alte JavaScript-Objekte müssen weiter funktionieren • globale Namespace soll so wenig wie möglich verschmutzt werden • ausführliche, aktuelle „Anleitung“ • Umgang mit DOM erleichtern • fertige User-Interface-Elemente • die Bibliothek kann durch eigene Funktionen erweitert werden JavaScript-Bibliotheken
II. Bibliotheken und deren Anwendung • jQuery • MooTools • Prototype • Scriptaculous • Dojo • YUI JavaScript-Bibliotheken
jQuery • freie JavaScript-Bibliothek • Veröffentlichung: Jan 2006 durch John Resig • zwei unabhängige Versionsstränge Browserkompatibilität • September 2008: Microsoft und Nokia kündigen an mit jQuery zu arbeiten • aktuelle Versionen: 1.10.2 / 2.0.3 JavaScript-Bibliotheken
jQuery - Funktionen • Elementselektion im DOM • DOM-Manipulation • erweitertes Event-System • Hilfsfunktionen • Animationen und Effekte • Ajax-Funktionalitäten • zahlreiche freie Plug-ins JavaScript-Bibliotheken
Prototype • freie JavaScript-Bibliothek • Veröffentlichung: 2005 von Sam Stephenson • war Bestandteil von Ruby on Rails • heute Grundlage von script.aculo.us • aktuelle Version: 1.7.1 JavaScript-Bibliotheken
Prototype - Funktionen • Unterstützung klassischer objektorientierter Programmierung • Programmierhilfen für Ajax • XMLHttpRequest-Verfahren (asynchrone Verarbeitung) JavaScript-Bibliotheken
MooTools • Veröffentlichung: 2006 durch Valerio Proietti • zunächst Effekt-Plugin für Prototype • dann Entwicklung zum eigenständigen Framework • meist verwendet von: phpMyAdmin, Chrysler, MTV Germany, Nintendo usw. • setzt sich aus dem Paketen „Core“ und „More“ zusammen • aktuelle Version: 1.2.4 JavaScript-Bibliotheken
MooTools - Funktionen • „Core“ und „More“ Komponenten • Core: Element-Selektoren, einfache Effekte, Ajax-Funktionen • More: Plugins wie Formular-Validator, Drag&Move, Date-Funktionen etc. • Objektorientierte Programmierung, Klassenvererbung JavaScript-Bibliotheken
Scriptaculous • Script.acul0.us , Open-Source-Projekt • Veröffentlichung: 2005 durch Thomas Fuchs • stammt aus dem Webtool „fluxiom“ • in Ruby on Rails integriert, kann auch separat verwendet werden • Add-On zu Prototype Framework (Benutzung von Prototype vorausgesetzt) • genutzt von: NASA, APPLE, IKEA, Gucci, Shopify, Ruby on Rails • aktuelle Version: 1.9.0 JavaScript-Bibliotheken
Scriptaculous - Funktionen • Visuelle Effekte (5 Kerneffekte) • Animation Framework • Ajax controls • unittesting • Controls: GUI-Elemente, Drag&Drop, Autocompletion, in placeediting • Builder: DOM-Elemente können dynamisch erzeugt werden JavaScript-Bibliotheken
Dojo • freies modulares Framework • Veröffentlichung: 2004 durch Alex Russell, Dylan Schlemann und David Schontzler • Dojo-Foundation Ziel: Verbreitung von Tool-Kits • genutzt von: IBM, Sun Microsystems, AOL etc. • aus drei Komponenten: Hauptteil: Dojo, 2. Teil: Dijit, 3. Teil: DojoX JavaScript-Bibliotheken
Dojo - Funktionen • Widgets (Dijit: Menüs, Tabellen, Vektorgrafiken, Online-Editor etc.) • Asynchrone Kommunikation • Clientseitige Datenspeicherung • Serverseitige Datenspeicherung (!) JavaScript-Bibliotheken
YUI • Yahoo! User Interface Library, Open-Source • Veröffentlichung: 2005 durch Yahoo! • vor allem für interaktive Webanwendungen • im mehreren Komponenten geteilt (zur besseren Übersicht) JavaScript-Bibliotheken
YUI - Funktionen • Komponenten: • Core: DOM-Scripting, Events • Infrastructure: YUI-Basisklassen • Developer-Tools: Konsole, Unit-Tests • Utilities: viele Hilfsfunktion (drag&drop, Rich-Text-Editor, Resizer) • CSS: Arbeit mit den Stylesheets .css , CSS-Reset • Widgets: unterschiedliche Elemente JavaScript-Bibliotheken
FAZIT • alle Bibliotheken zum Teil sehr ausgereift • durchgehende Weiterentwicklung durch Open-Source • es gibt nicht die „eine“ Bibliothek • es ist letztendlich vom Nutzen abhängig, womit man programmiert • es gibt zusammenhängende Bibliotheken, wobei es eine Grundlage gibt, die man erlernen muss • einige Bibliotheken können ohne JavaScript-Kenntnisse benutzt werden JavaScript-Bibliotheken
VIELEN DANK FÜR EURE AUFMERKSAMKEIT! JavaScript-Bibliotheken
Quellen: • http://www.magjs.de/2012-01/kammergruber/kammergruber.htmlhttp://de.wikipedia.org/wiki/JQuery • http://www.webmasterpro.de/coding/article/javascript-mootools-grundlagen.html • http://my.opera.com/sonchen80/blog/2011/12/29/jquery-vorteile • http://script.aculo.us/ • http://de.wikipedia.org/wiki/Script.aculo.us • http://de.wikipedia.org/wiki/Dojo_Toolkit • http://prototypejs.org/ • http://de.wikipedia.org/wiki/Prototype_(Klassenbibliothek) • http://yuilibrary.com/