Jquery on Ulis Notizen

jQuery in 30 Tagen lernen

Wed, 01 Feb 2012 13:46:13 +0100

Der Link

Gerade eben habe ich auf net.tutsplus.com gelesen, dass diese einen Kurs, bei dem man in 30 Tagen jQuery lernt, anbieten. Jeden Tag ein kurzes Video. Vielleicht ja interessant für den ein oder anderen Leser.

Das JavaScript-Framework "jquery" im Überblick

Tue, 18 Mar 2008 15:05:49 +1800

Ich setze bei allen Projekten jQuery als Framework für das Handling aller Javascript-Aktionen ein. Zitat Wikipedia:

jQuery ist ein freies, umfangreiches JavaScript-Framework, das mächtige Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt. Zur Navigation unterstützt es große Teile von XPath und vor allem CSS-Selektoren. Hinzu kommen verschiedene Programmierhilfen für Ajax wie vereinfachtes Event-Handling und animierte Effekte.

Beispielweise unterstützt es trotz seiner kleinen Größe von nur 15kb in allen Browsern eine einfach Verarbeitung von JSON-Requests und alle Ein/Überblendungen, die ich mir wünsche. Für einen Einblick in die DOM-Selektion einfach mal durch visualjQuery.com klicken, da sieht man den Funktionsumfang am besten. Auch bei der UserInterface-verschönerung hält sich’s dank “ jQuery UI ” nicht zurück. Eine weitere sehr coole Anwendung ist Flot , ein Plotting-Plugin für jQuery.

Wem Prototype lieber gefällt, kann ja mal einen Vergleich mit jQuery 1.0 finden, jedoch werden auch in den Kommentaren einige Ergebnisse klar gestellt. So ist jQuery beispielsweise bei langen Querys schneller als Prototype und jQuery Version 1.0 war grundlegend sowieso langsamer als die aktuelle Version. Insgesamt ist Prototype deutlich umfangreicher, was sich auch in der Größe abzeichnet. jQuery kann prinzipiell das ziemlich gleiche, muss aber oft durch Plugins erweitert werden.

Ein besseres Bild kann man sich mit einem lokalen Benchmark machen, der hier gegen die jeweils aktuellen Versionen von Dojo , jQuery , MooTools und Prototype selbt durchgeführt werden kann. jQuery räumt da gut ab ;)

Eine Übersicht über viele Frameworks gibt zudem diese Seite, wo man klar eine gute Lernkurve und ein einfaches Handling bei jQuery sehen kann.

In Kürze dürften einige Beispiele, Tipps und Einführungen in jQuery von mir folgen, sofern ich Zeit finde ;)

Scienta Zend Framework Debug Bar

Mon, 30 Mar 2009 19:24:58 +3000

Für die Entwicklung im Zusammenhang mit dem Zend Framework benötigt man oft etwas aussagekräftigere Infos rund um Variablen, Exceptions oder auch SQL-Queries. All dies bringt die “ Scienta ZF Debug Bar ” dem Entwickler nach einem schnellen Einbau auf den Bildschirm. Im Browser können dann in der momentanen Version 1.3 folgende Infos am Ende der generierten Seite abgerufen werden:

Version des Zend Framework
Ausführungszeit
Speicherverbrauch
Anzahl der Datenbankqueries (auch bei mehreren Datenbankadaptern)
Alle ausgeführten SQL-Befehle
Alle zusätzlich includierten Files
Verfügbare View-Variablen
Exceptions
Fehler entsprechend dem error_reporting-Setting

Die Einbindung ist in wenigen Sekunden erledigt und eigentlich ein MUST-HAVE für jeden ZF-Entwickler. Ich persönlich würde aber die Einbindung auf zusätzlich mit einer Abfrage bezüglich der Entwicklungsumgebung versehen, damit diese Leiste nicht im produktiven Betrieb eingesetzt wird.

O2 Germany Traffic Calculator

Tue, 29 Apr 2008 09:34:03 +2900

Seit einigen Monaten bin ich stolzer Besitzer von einem HTC Kaiser, UMTS-Karte und damit auch einem Datentarif. Da ich den Datentarif auf allen Geräten nutzen möchte, habe ich mich für das Internet Pack M von O2 Germany entschieden (was, nebenbei gesagt, auch das billigste ist…). Da ich bereits einen Active50-Tarif beziehe, war die Umstellung auf mehrere SIM-Karten kein Problem. Was jedoch ein großes Problem darstellt, ist die Abrechnung des Traffics. Im Internet Pack M sind momentan 200MB Inklusivtraffic enthalten. Auf meinem PDA verwende ich daher “Battery Status” (Derzeit: 1.05 Beta) zur Kontrolle und ansonsten mwconn in Verbindung mit einer UMTS-Karte. Leider sind die Abrechnungsmöglichkeiten nicht immer genau oder fallen zeitweise mal aus, weshalb man am Ende des Abrechnungsmonats doch wenigstens wissen möchte, wieviel Traffic man denn nun verbraucht hat, um eine Abschätzung über das künftige Nutzungsverhalten machen zu können. O2 bietet leider keine direkte Möglichkeit der Kontrolle an, daher habe ich ein kleines PHP-Script geschrieben, welches den Einzelverbindungsnachweis in Form der CSV-Datei der Online-Abrechnung verarbeiten und zusammenrechnen kann.

~~Der Kalkulator steht nicht mehr zur verfügung~~

~~Graphische Auswertung des täglichen Verbrauchs mit Flot~~

jQuery Tablesorter für das deutsche Datumsformat dd.mm.yyyy

Tue, 05 May 2009 19:02:19 +0500

Soeben habe ich für einen Kumpel einen Parser für den jQuery Tablesorter geschrieben, welcher das deutsche Datumsformat im Format dd.mm.yyyy verarbeiten kann. Der Parser an sich ist relativ einfach, da man einfach das Datum in einen Timestamp umwandelt und dann sortiert.

Erstmal nur der Sorter:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


$.tablesorter.addParser({
  id: 'germandate',
  is: function(s) {
          return false;
  },
  format: function(s) {
    var a = s.split('.');
    a[1] = a[1].replace(/^[0]+/g,"");
    return new Date(a.reverse().join("/")).getTime();
  },
  type: 'numeric'
});

Das komplette Beispiel sieht dann so aus:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61


<html>
    <head>
        <script type="text/javascript" src="jquery-latest.js"></script>
        <script type="text/javascript" src="jquery.tablesorter.js"></script>
        <script type="text/javascript">
      $(document).ready(function(){
          $.tablesorter.addParser({
              id: 'germandate',
              is: function(s) {
                      return false;
              },
              format: function(s) {
                var a = s.split('.');
                a[1] = a[1].replace(/^[0]+/g,"");
                return new Date(a.reverse().join("/")).getTime();
              },
              type: 'numeric'
            });
        $("#example").tablesorter({
                headers: { 1: { sorter:'germandate' }}
        });
      });
        </script>
  </head>
  <body>
        <table id="example" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
        <thead>
            <tr>
                <th class="header">Event</th>
                <th class="header">Datum</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>Event 1</td>
            <td>06.06.2000</td>
        </tr>
        <tr>
            <td>Event 2</td>
            <td>06.06.1992</td>
        </tr>
        <tr>
            <td>Event 3</td>
            <td>05.09.2009</td>
        </tr>
        <tr>
            <td>Event 4</td>
            <td>01.04.2002</td>
        </tr>
        <tr>
            <td>Event 5</td>
            <td>20.05.2014</td>
        </tr>
        <tr>
            <td>Event 6</td>
            <td>30.01.2001</td>
        </tr>
        </tbody>
        </table>
    </body>
</html>

Und das Beispiel nochmal gezeigt:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54


<script type="text/javascript" src="https://wolf-u.li/upload/blog/2963/jquery.tablesorter.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery.tablesorter.addParser({
      id: 'germandate',
      is: function(s) {
              return false;
      },
      format: function(s) {
        var a = s.split('.');
        a[1] = a[1].replace(/^[0]+/g,"");
        return new Date(a.reverse().join("/")).getTime();
      },
      type: 'numeric'
    });
  jQuery("#example").tablesorter({
          headers: { 1: { sorter:'germandate' }}
  });
});
</script>
<table id="example" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
<thead>
    <tr>
        <th class="header">Event</th>
        <th class="header">Datum</th>
    </tr>
</thead>
<tbody>
<tr>
    <td width="150">Event 1</td>
    <td>06.06.2000</td>
</tr>
<tr>
    <td>Event 2</td>
    <td>06.06.1992</td>
</tr>
<tr>
    <td>Event 3</td>
    <td>05.09.2009</td>
</tr>
<tr>
    <td>Event 4</td>
    <td>01.04.2002</td>
</tr>
<tr>
    <td>Event 5</td>
    <td>20.05.2014</td>
</tr>
<tr>
    <td>Event 6</td>
    <td>30.01.2001</td>
</tr>
</tbody>
</table>

So einfach is dat :)

Update für den O2 Germany Traffic Calculator

Sun, 05 Oct 2008 17:39:17 +0500

Soeben ist das Update für den O2 Germany Traffic Calculator fertig geworden. Neu ist die Auswertung der Daten mittels flot , einer Plotting-Library basierend auf jQuery. Die Grafik wird durch eben diese Bibliothek clientseitig nach Absenden des Formulars live generiert. Einfach mal ausprobieren ;) Hier die Grafik, wie eine Auswertung aussieht:

Beim Überfahren der einzelnen Balken werden Tooltips mit den Verbrauchswerten pro Tag angezeigt:

Hier die passenden Beispieldaten (natürlich ein wenig bereinigt und erfundene, aber reelle Werte):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


|||||||||||||18.08.2008||||||||Internet|290 KB|||
|||||||||||||19.08.2008||||||||Internet|17620 KB|||
|||||||||||||20.08.2008||||||||Internet|25260 KB|||
|||||||||||||21.08.2008||||||||Internet|10200 KB|||
|||||||||||||22.08.2008||||||||Internet|350 KB|||
|||||||||||||23.08.2008||||||||Internet|400 KB|||
|||||||||||||25.08.2008||||||||Internet|90 KB|||
|||||||||||||26.08.2008||||||||Internet|780 KB|||
|||||||||||||27.08.2008||||||||Internet|80 KB|||
|||||||||||||28.08.2008||||||||Internet|120 KB|||
|||||||||||||29.08.2008||||||||Internet|10440 KB|||
|||||||||||||31.08.2008||||||||Internet|480 KB|||
|||||||||||||01.09.2008||||||||Internet|440 KB|||
|||||||||||||03.09.2008||||||||Internet|29660 KB|||
|||||||||||||05.09.2008||||||||Internet|17330 KB|||
|||||||||||||06.09.2008||||||||Internet|1000 KB|||
|||||||||||||07.09.2008||||||||Internet|150 KB|||
|||||||||||||08.09.2008||||||||Internet|50 KB|||
|||||||||||||09.09.2008||||||||Internet|60 KB|||
|||||||||||||10.09.2008||||||||Internet|31880 KB|||
|||||||||||||13.09.2008||||||||Internet|150 KB|||
|||||||||||||14.09.2008||||||||Internet|60 KB|||
|||||||||||||15.09.2008||||||||Internet|490 KB|||
|||||||||||||16.09.2008||||||||Internet|470 KB|||
|||||||||||||17.09.2008||||||||Internet|700 KB|||

Hinweis: Mit einem Klick auf “Plain Text” kann man diese ganz leicht kopieren

Ist ganz nett geworden, wie ich finde ;)

jQuery bekommt große Unterstützung durch Microsoft und Nokia

Mon, 29 Sep 2008 10:23:33 +2900

Ich bin seit Ewigkeiten ein großer Fan der Javascript-Bibliothek jQuery und habe auch schon einige Beiträge darüber verfasst. Gerade lese ich bei golem.de , dass diese Bibliothek nun große Unterstützer in Microsoft und Nokia gefunden haben. Die beiden Firmen wollen jQuery aktiv unterstützen und vorantreiben (und natürlich auch komplett in ihren Browsern unterstützen). Nokia will seine Applikationen, also z.B. die zur Kartendarstellung, auf jQuery umstellen, Microsoft wird das VisualStudio und ASP.NET mit jQuery verbundlen. Momentan setzen diese schon Firmen wie Google, Intel, IBM, Intuit und Reuters ein und wird bei Software wie Wordpress (z.B. dieses Blog!) mitgeliefert. Sehr coole Neuigkeiten, ich bin mal gespannt!

jQuery: Prüfen, ob ein Radiobutton ausgewählt (checked) ist

Tue, 18 Mar 2008 16:10:02 +1800

Bei meinem PayPal-Kalkulator bin ich auf das Problem gestoßen, dass ich mit jQuery prüfen wollte, ob ein Radiobutton ausgewählt worden ist. Die Lösung ist eigentlich eine recht einfache, jedoch bin ich nicht sofort fündig geworden.

Der Code für die Radiobuttons:

1
2
3


if ($("#radio1:checked").val() == "value1") {
    alert("Der erste Radiobutton wurde ausgewählt");
}

Um jetzt nur zu prüfen ob der erste Radiobutton ausgewählt wurde, wird der folgende jquery-Code benötigt:

1
2
3


if ($("#radio1:checked").val() == "value1") {
alert("Der erste Radiobutton wurde ausgewählt");
}

Ein komplettes Beispiel:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<script type="text/javascript">
    $(document).ready(function(){
        $("#radio1").click( function() {
            if ($("#radio1:checked").val() == "value1") {
                alert("Der erste Radiobutton wurde ausgewählt");
            }
        });
    });
</script>
<input type=radio name=chooser value=value1 id=radio1 /> Radiobutton1<br />
<input type=radio name=chooser value=value2 id=radio2 /> Radiobutton2

Allerdings muss man nicht zwingend die id="" vergeben, denn jquery kann dank eines exzellenten DOM-Traversal natürlich auch gleich auf das Input-Element zugreifen. Mein Eindruck ist, dass es so sogar schneller geht, als per id. Kompletter Code für beide Buttons:

1
2
3
4
5
6
7
8
9


<script type="text/javascript">
    $(document).ready(function(){
        $(this).find("input:radio[name='chooser']").click(function() {
            alert($("input:radio:checked[name='chooser']").val());
        });
    });
</script>
<input type=radio name=chooser value=value1 id=radio1 /> Radiobutton1<br />
<input type=radio name=chooser value=value2 id=radio2 /> Radiobutton2<br />

Codeerklärung: Nach dem Laden des Dokuments (document.ready-Function) wird an alle Input-Elemente mit den Eigenschaften “type=‘radio’” und “name=‘chooser’” an das Event “click” ein alert gehängt, der den Inhalt des ausgewählten (checked) Radiobuttons ausgibt. Für weitere Details zu Selektoren in jQuery gibt es eine Dokumentation .

JSON aus POST-Requests mittels Jquery

Fri, 02 May 2008 23:21:14 +0200

Gerade eben bin ich bei der Überarbeitung meines O2 Traffic Kalkulators auf ein interessantes Problem im Zusammenhang mit Jquery gestoßen. Ich sende die Daten aus dem Formular mittels eines POST-Requests an den Server, der mir derzeit einen einfachen String zurück gibt. Für die graphische Verarbeitung benötige ich jedoch die Trafficdaten der einzelnen Tage, was am einfachsten als JSON übermittelt wird. Wie die Dokumentation zeigt, gibt es eine getJson-Methode (Verarbeitung von JSON nach GET-Anfragen), jedoch leider keine postJSON-Methode. Es gibt aber einen kleinen Workaround.

Ich verwende derzeit den jQuery.ajax Aufruf zum Absenden des Formulars, welcher mit einigen Optionen versehen werden kann. Darunter befindet sich die Eigenschaft “dataType”, die mit dem Setzen auf json oder jsonp bewirkt, dass die Rückgabedaten als JSON verarbeitet werden. Kleines Beispiel:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


function postJSON(paramUrl,paramData,paramBeforeSend,paramSuccess,paramError){
    $.ajax({
        type:"POST",
        url:paramUrl,
        data:paramData,
        dataType:"json",
        beforeSend:paramBeforeSend,
        success:paramSuccess,
        error:paramError});
    }

Der Zugriff auf das JSON-Objekt erfolgt nun wie gewohnt : someJsonSource gibt folgendes zurück: ({"title": "foo","items": [{"title": "bar"},{"title": "baz"},{"title": "quux"}]})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12



$.ajax({
    type:"POST",
    url:"someJsonSource.php",
    data:"foo=bar",
    dataType:"json",
    success:function(data){
          $.each(data.items, function(i,item){
            $("body").append(item.title);
          });
        }});
}

Herauskommen sollte dann “ barbazquux ”

PayPal Gebührenrechner bzw. Kostenkalkulator

Sun, 16 Mar 2008 01:02:04 +1600

Vorhin bin ich mal wieder über die leidige Frage gestolpert, wie viel PayPal- Gebühren berechnet würden, wenn der Käufer mit der Option für Warenbezahlung bezahlen würde. Im Gegensatz zur Bezahlung zwischen Freunden im Inland entstehen dabei einige Gebühren für den Empfänger ( der Absender bezahlt weiterhin nichts ).

Also habe ich mir schnell einen Kalkulator in jQuery (Clientseitiges Javascript) für einen Empfang von Gebühren in Deutschland für Privatpersonen (Keine Händerkonditionen) gecoded. Absender können aus der Eurozohne (bezeichnet als “Inlandszahlung”), Großbritannien, USA und Kanada außerhalb sein und der Rechner betrachtet nur “Euro” als Empfangswährung.

Transaktionssumme:		€
Transaktion		Inlandszahlung
		Zahlung aus Großbritannien
		Zahlung aus USA und Kanada
		Zahlung ausserhalb
Gebühren:	-	% + 0.35€
Summe:	-	€

Disclaimer

THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. Kurz: Ich übernehme trotz vieler Tests und manueller Nachberechnungen keine Garantie für die Richtigkeit des errechneten Werts.Berechnungsgrundlage waren die Gebühren am 01.01.2022

CHANGELOG

24.08.2009: Aktualisiert auf aktuelle Konditionen
30.11.2010: Händlerkonditionen aktualisiert
01.01.2022: Umstellung auf neueste Scriptversion und aktuelle Konditionen