Einführung zu JavaScript und JavaScript Libraries
Eine kurze Historie zu JavaScript
JavaScript ist eine dynamisch typisierte Skriptsprache mit objekorientierten und funktionalen Teilen. Im Gegensatz zu vielen anderen Skriptsprachen basiert der Vererbungsmechanismus nicht auf Klassen, sondern auf Prototypen. JavaScript wurde 1995 von dem Entwickler Brendan Eich (Netscape) erschaffen. Der ursprüngliche Name der Skriptsprache war LiveScript, wurde jedoch später aus Marketinggründen in JavaScript umbenannt. Trotz der ähnlichen Namen, haben JavaScript und Java nichts miteinander zu tun, auch wenn sich einige Ähnlichkeiten in den beiden Sprachen finden.
JavaScript wird primär für die clientseitige Enticklung im Front-End eingesetzt, ist jedoch nicht auf diese Laufzeitumgebung eingeschränkt und kann vielfältig eingesetzt werden. JavaScript kann unter anderem auf der Serverseite (node.js) oder Windows (Windows Script Host) eingesetzt werden.
Viele Software Produkte lassen sich über JavaScript steuern oder automatisieren, hierzu gehören z.B. viele Produkte von Adobe. Die Dokumentendatenbank CouchDB benutzt JavaScript um Views zu definieren und den Map-Reduce Algorithmus für diese zu implementieren.
JavaScript Libraries und warum man sie Einsetzen sollte
Aufgrund der vielen JavaScript Engines, die meist clientseitig im Browser laufen und auch diverser Unterschiede in den Rendering Engines in den Browsern, ist die Cross-Browser JavaScript Entwicklung sehr aufwändig und fehleranfällig. Es wird viel Code für die Cross-Browser Kompatibilität benötigt, der meist direkt im JavaScript Code implementiert ist und den Code so unnötig aufbläht und die Komplexität erhöht.
JavaScript Libraries bieten hier eine gute Lösung, da diese die Browserunterschiede ausgleichen und eine einheitliche API für die Entwicklung zur Verfügung stellen. Viele JavaScript Libraries stellen zusätzlich noch Mechanismen zur Verfügung, mit denen Plugins oder Module implementiert werden können. Hierdurch lässt sich der JavaScript Code noch besser modularisieren und die Wiederverwendbarkeit des Codes wird stark erhöht. Ein Beispiel hierfür ist jQuery mit seinem Plugin Mechanismus und Prototype, dass eine Emulation von Klassen für die einfache Strukturierung bietet.
Eine kurze jQuery Einführung
Die JavaScript Library jQuery wurde Anfang 2006 ins Leben gerufen und hat sich seit dem zur führenden JavaScript Library entwickelt. Der Erfolg von jQuery beruht auf dem zu seiner Zeit einzigartigen Konzept, Elemente durch CSS Selektoren zu selektieren sowie dem Method Chaining, dass viel unnötigen JavaScript Code einspart. Die Entwicklergemeinde hinter jQuery ist sehr groß und professionell und bietet hunderte kostenloser Plugins für jQuery. Der Marktanteil von jQuery beträgt nach Angaben von w3techs.com über 80%, über 50% der Top 10.000 Websites setzen jQuery ein. Ein einfaches Beispiel verdeutlicht die Einsparungen gegenüber normalem JavaScript:
Nehmen wir an, wir haben folgenden HTML Struktur und möchten den Link zu "eins.html" aus der Liste selektieren.
<ul id="my-list-id">
<li><a href="eins.html">Eins</a></li>
<li><a href="zwei.html">Zwei</a></li>
<li><a href="drei.html">Drei</a></li>
<li><a href="vier.html">Vier</a></li>
</ul>Mit normalen JavaScript iterieren wir über die DOM Elemente wie folgt:
var listElement = document.getElementById("my-list-id")
, linkElement = null
for (var i = 0; i < listElement.childNodes.length; i++) {
if ( listElement.childNodes[i].firstChild.getAttribute("href") == "eins.html" ) {
linkElement = listElement.childNodes[i].firstChild;
}
}Mit jQuery können wir den Link direkt über den CSS Selektor referenzieren:
var element = $("#my-list-id > li > a[href='eins.html']")Der jQuery Plugin Mechanismus
Der Plugin Mechanismus von jQuery ist sehr flexibel und es lassen sich sehr einfach neue Funktionen zu jQuery hinzufügen. Neue Methoden müssen einfach an den function namespace ($.fn) hinzugefügt werden, damit sie global an jeder jQuery Instanz verfügbar sind.
// einen <strong> tag um das element wrappen
$.fn.makeStrong = function () {
return this.each(function () {
$(this).wrap("<strong/>")
});
}Sobald dieses JavaScript geladen ist, kann die neue Methode "makeStrong" an jeder jQuery Instanz aufgerufen werden und mit den DOM Elementen arbeiten, die jQuery durch den Selektor referenziert hat.
$("#my-container > span.text").makeStrong()Selektiere alle SPAN Elemente im Element mit der ID "my-container" und wrappe ein STRONG Element um dieses.
Ein Beispiel Plugin für jQuery: "TextSearch"
Folgend ein kleines jQuery Plugin, mit dessen Hilfe man nach Texten in Elementen suchen kann.
jquery.textsearch.js
/**
* jQuery TextSearch Plugin
*
* Small example plugin which searches an elements content for a specific text
* and highlights it using a html span element <span class="highlight"></span>.
*
* @author Jan Surijan Lengowski <jan.lengowski@cocomore.com>
* @copyright Cocomore AG 2012 <http://www.cocomore.com>
*/
(function ($) {
$.fn.textSearch = function (search) {
return this.each(function () {
var text = $(this).text(), html
if ( text.indexOf(search) !== -1 ) {
html = text.replace(new RegExp(search, "g"), '<span class="highlight">' + search + '</span>')
$(this).html(html)
}
})
}
})(jQuery)
Sobald das jQuery Plugin geladen wurde, kann es einfach am jQuery Objekt benutzt werden:
<!DOCTYPE html>
<!--
Example page for the jQuery plugin "TextSearch"
Author : Jan Surijan Lengowski <jan.lengowski@cocomore.com>
Copyright : Cocomore AG 2012 <http://www.cocomore.com>
-->
<html>
<head>
<title>jQuery TextSearch Plugin</title>
<style type="text/css">
body, input { font-family: sans-serif; font-size: 1em; }
.highlight { color: red; font-weight: bold; }
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.textsearch.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#go").on("click", function () {
var selector = $("#selector").val(), search = $("#search").val()
$( selector ).textSearch( search )
})
$("#reset").on("click", function () {
$("#text-container > p").each(function () {
$(this).html( $(this).text() );
})
})
})
</script>
</head>
<body>
<h3>jQuery Example Plugin "TextSearch"</h3>
Search <input type="text" id="search"/> in <input type="text" id="selector" value="#text-container p"/>
<input type="button" value="search" id="go">
<input type="button" value="reset" id="reset">
<div id="text-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
</body>
</html>
Fazit
JavaScript Libraries sind heutzutage aus der Entwicklung kaum noch wegzudenken und purer JavaScript DOM Code sollte nur noch in Ausnahmefällen geschrieben werden. Ein kleiner Nachteil der Libraries wie jQuery ist die Dateigröße (ca 100KB), jedoch überwiegen die Vorteile ganz klar die minimal längere Ladezeit. Mit der richtigen Serverkonfiguration und Kompression kann die Dateigröße jedoch leicht auf ca. 32KB minimiert werden.
