Eine Einführung in jQuery

14. März 2011

JavaScript steht im Enterprise-Umfeld in dem Ruf, zu fehleranfälligeren Anwendungen zu führen und wird nicht selten nur als ein notwendiges Übel wahrgenommen. Notwendig deshalb, weil JavaScript ein integraler Bestandteil von Ajax (“Asynchronous JavaScript and XML”) ist und an Ajax heutzutage in modernen Web-Anwendungen kaum ein Weg vorbei führt.

Eine echte, häufig sogar bessere Alternative zu Ajax ist Microsoft Silverlight, das aber zum einen die Installation eines Plugins erforderlich macht und zum anderen nicht dafür geeignet ist, eine typische ASP.NET-Anwendung auf Basis des bereits vorhandenen HTML-Codes dynamischer zu gestalten. Deshalb setzt inzwischen auch Microsoft auf die populäre JavaScript-Bibliothek jQuery, die ab Visual Studio 2010 beim Erstellen eines neuen ASP.NET-Projekts bereits automatisch mit eingebunden wird.

Mit weniger Code schneller ans Ziel

Das Motto von jQuery lautet: “Code less, do more”. Was das in der Praxis bedeutet, lässt sich am Besten anhand eines Beispiels verdeutlichen. Das folgende Code-Fragment sorgt dafür, dass beim Abschicken eines Formulars mit der ID “testForm” den Submit-Button mit der ID “submitButton” deaktiviert wird, um das versehentliche mehrmalige Abschicken des Formulars zu verhindern:

   1: $('#testForm').submit(function(){

   2:     $('#submitButton').attr('disabled', 'true');

   3: });

Was auf den ersten Blick gewöhnungsbedürftig aussehen mag, erweist sich bei näherer Betrachtung als ein kompakter Event-Handler für das Submit-Event. Eines der wichtigsten Merkmale von jQuery sind die nach dem Schema $(Elementname) aufgebauten Selektoren, wobei “Elementname” z. B. auch eine Variable oder eine vordefinierte Konstante wie this für die Identität des aktiven Objekts sein kann.

Nun wäre es aber möglich, dass das Formular mehr als einen Submit-Button enthält, oder es könnten sich gleich mehrere Formulare auf der gleichen Webseite befinden. In beiden Fällen wäre es trotz der Sperrung des Submit-Buttons mit der ID “submitButton” weiterhin möglich, einen der anderen Submit-Buttons zu benutzen und so das Formular mehrmals abzuschicken. Die große Stärke der Selektoren von jQuery besteht darin, dass mit derselben Syntax, mit der man einzelne Elemente anspricht, auch ganze Elementgruppen angesprochen werden können.

Das folgende Code-Fragment sperrt die Submit-Buttons aller Formulare auf einer Webseite:

   1: $('form').submit(function(){

   2:     $('input[type=submit]').attr('disabled', 'true');

   3: });

Einbettung des jQuery-Codes in die HTML-Seite

Platziert werden diese spezifischen Event-Handler in den globalen Event-Handler der Webseite, der aufgerufen wird nachdem diese vollständig geladen ist. Im HTML-Code sieht das dann so aus (aus Gründen der Übersichtlichkeit wurde auf HTML-Metaangaben wie den DOCTYPE verzichtet):

   1: <html>

   2: <head>

   3:     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
   2:     <script>                                             




   3:         $(document).ready(function() {            




   4:             $('form').submit(function(){




   5:                 $('input[type=submit]').attr('disabled', 'true');




   6:                 alert("Formular abgeschickt!"); // Nur um den Effekt zu zeigen




   7:             });            




   8:         });    




   9:     


</script>       


   4: </head>




   5: <body>




   6:     <form id="testForm" action="" method="get">




   7:         <div>




   8:             <label>Ihr Kommentar:</label>




   9:             <input id="commentInput" type="text" />




  10:             <input id="submitButton" type="submit" value="Abschicken" />




  11:         </div>




  12:     </form>




  13: </body>




  14: </html>

Hier ist eine weitere angenehme Eigenschaft von jQuery zu sehen: Anders als man es sonst oft bei Seiten mit JavaScript beobachten kann, ist der HTML-Code nicht mit Referenzen auf JavaScript-Funktionen im Stil von “onsubmit=someFunction” durchsetzt. Stattdessen werden die Event-Handler an einer zentralen Stelle definiert und über die ID oder andere Eigenschaften des betroffenen Elements oder der betroffenen Elemente verknüpft. Mittels Method Chaining, dem Aneinanderhängen mehrerer Funktionsaufrufe, können auch komplexe Filter erzeugt werden, beispielsweise: “Manipuliere das erste Child-Element der Child-Elemente aller Objekte mit der CSS-Klasse X im Container mit der ID Y”.

jQuery entdecken – mit Unterstützung von Visual Studio

Trotz des einfach gehaltenen Beispiels, das nur einen Bruchteil der Features und Möglichkeiten von jQuery demonstriert, kann man bereits sehen, dass sich die Entwicklung mit jQuery grundlegend von der mit konventionellem JavaScript unterscheidet. Wegen der mächtigen Filterung per Selektoren, der kompakten Schreibweise (an die man sich recht schnell gewöhnt),  der strikten Trennung des JavaScript-Codes vom HTML-Code sowie zahlreichen Hilfsfunktionen, fühlt sich jQuery oft wie eine neue Programmiersprache an.

Allerdings sollte man nicht vergessen, dass jQuery immer noch auf einer Skript-Sprache basiert, mit den bekannten Nachteilen beim Debugging und der Durchführung automatisierter Tests, auch wenn es für diese Zwecke einige Erweiterungen gibt. Wenn aber ohnehin JavaScript zum Einsatz kommt, was heutzutage bei fast allen größeren Web-Anwendungen der Fall sein dürfte, bietet sich die Verwendung von jQuery zumindest als Ergänzung zum serverseitigen Ajax von Microsoft an. Visual Studio 2010 bietet übrigens IntelliSense-Unterstützung für jQuery und für Visual Studio 2008 steht eine Erweiterung bei Microsoft zum kostenlosen Download bereit. Außerdem lassen sich in ASP.NET 4.0 die Client-IDs von ASP.NET-Controls mit der Option “ClientIDMode=”Predictable”” explizit festlegen, wodurch die Zusammenarbeit mit jQuery noch einmal erheblich vereinfacht wird.

Mehr Informationen zu jQuery: