JavaScript-BibliothekenEin Vortrag von Johan Gründer und Stefan Hinrichs

Hochschule Emden/Leer

Inhalt des Vortrags

I. JavaScript-Grundlagen

II. Bibliotheken und deren Anwendung, Vor- und Nachteile

JavaScript-Bibliotheken

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 Document Object 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

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

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

1. jQuery

2. MooTools

3. Prototype

4. Scriptaculous

5. Dojo

6. 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

• unit testing

• Controls: GUI-Elemente, Drag&Drop, Autocompletion, in place editing

• 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

VIELEN DANK FÜR EURE AUFMERKSAMKEIT!

JavaScript-Bibliotheken

Quellen:• http://www.magjs.de/2012-01/kammergruber/kammergruber.html

http://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/