Javascript

Warum jQuery nicht lokal gehostet, sondern via Google CDN eingebunden werden sollte

Posted on by marcus

Die jQuery-Bibliothek braucht man ja nun wirklich in fast jedem Projekt. jQuery ist auch so verbreitet, dass es von sehr vielen Webseiten eingesetzt wird.  Ok, und genau deswegen bindet man jQuery über das Google Ajax Libraries CDN ein. Das hat natürlich hauptsächlich den Vorteil, dass der User über die schnellen Google-Server downloadet und auch die Verteilung von statischen Inhalten via CDN lässt ja die eigene Site flotter laden. Darüberhinaus ist die Wahrscheinlichkeit sogar recht hoch, dass jQuery bereits beim User lokal gecacht ist, da dieser vermutlich schon andere Seiten besucht hat, die ebenfalls das Google CDN verwendet haben. Für den unwahrscheinlichen Fall, dass das JS mal wirklich nicht erreichbar sein sollte, könnt Ihr folgendes machen:

[sourcecode language=“css“]


[/sourcecode]

So hat man dann noch für den Fall der Fälle zusätzlich einen lokalen Fallback auf’s jQuery-Javascript.

Firebug Reference Error: console is not defined

Posted on by marcus
Firebug

Firebug

Kleiner Hinweis aus aktuellem Anlass, weil es heute bei mir auftrat nach dem letzten Firefox-Update auf 3.6.11: Schwierigkeiten bei der Verwendung von console.log mit der Fehlermeldung:

ReferenceError: console is not defined

können damit behoben werden, indem man vorher direkt window.loadFirebugConsole() aufruft.

Snippet:

window.loadFirebugConsole();
console.log('log me do');

Form-Submit per Enter-Taste erzwingen

Posted on by marcus

Im Zusammenhang mit Userinteraktion via Formular gibt es ab und an die Anforderung, dass man unbedingt eine vom User gedrückte Enter-Taste in Textfeldern oder Textareas erkennen muss. Mit der Möglichkeit, dieses bestimmte Keyboard-Event zu erkennen, kann man dann das Formular direkt und in allen Fällen senden, wenn die Enter-Taste gedrückt wurde, ohne das man den üblichen standardmäßigen Limitierungen unterworfen wäre.

Das nachfolgende Script zeigt wie das funktioniert:

<script language="javascript" type="text/javascript">
<!--
function checkEnter(e){
var characterCode;
var e;
if(e && e.which){
e = e;
characterCode = e.which;
}
else{
e = event;
characterCode = e.keyCode;
}
if(characterCode == 13){ //if generated character code equal to ascii 13 (enter key)
filterByGameTitle();
return false;
}
else{
return true;
}
}
//-->
</script>

Auaführliche Beschreibung ist unter http://jscript.psend.com/162/examples/stringEnterKeyDetector.php zu finden, nur drauf achten, dass da noch kleine Fehler im Script sind.

Javascript debuggen mit console.log und Firebug

Posted on by marcus

Firebug ist ja bekannterweise eine äußerst hilfreiche Extension für den beliebten Browser Mozilla Firefox.
Wenn in Javascript-Werte zu debuggen sind, dann ist die Konsolen-Ansicht in Firebug sehr hilfreich, wie ich festgestellt habe. Anstelle des oft verwendeten Vorgehens, einen alert() einzubauen, kann man hier viel schöner mit console.log arbeiten.

Hier eine kurze Demo anhand des nachstehenden HTML-Codes:

<html>
<head>
<title>testpage</title>
</head>
<body>
<p>dies ist die Testseite</p>
<script language="javascript" type="text/javascript">
var i = 'ich bin der zu debuggende String';
console.log('i value is %d', i);
</script>
</body>
</html>

Mittels dieser Technik kann man gut Variablen-Werte unter Live-Bedingungen debuggen, ohne störende Alert-Fenster einzublenden. Im Firebug ist der jeweilige Wert dann direkt zu sehen:

console.log in Firebug

console.log in Firebug

Links:
Mozilla Firefox
Firebug Extension

Merkwürdigkeiten, Fehler und Inkonsistenzen in Javascript

Posted on by marcus

Linktipp des Tages, unbedingt empfehlenswert: sehr interessante und aufschlussreiche Auflistung von Fehlern in Javascript gibt es bei http://wtfjs.com.
Hier finden sich so lustige Sachen wie dieses Rechen-Exempel:

"3" + 1 // '31'
"3" - 1 // 2
"222" - -"111" // "333"

Großartig, was passieren kann, wenn man Srings mit Zahlen verrechnet, oder?

Mein persönliches Highlight ist aber, dass true manchmal einen Wert haben kann:

(true + 1) === 2;​ ​// true
(true + true) === 2; // true
true === 2; // false
true === 1; // false

Noch mehr von solchen Kuriositäten gibt es bei http://wtfjs.com/, viel Spass bei der Lektüre

Datepicker für Formulare mit jQuery UI

Posted on by marcus

Immer wieder gestaltet man als Webworker Formulare für Websites, die Felder für Datumswahl beinhalten. Ich zeige in diesem Blogpost auf, wie man diese Aufgabe schnell und elegant mit Hilfe von jQuery UI löst.

Als erstes braucht man natürlich die jQuery-Javascript-Bibliothek in der Applikation (http://jquery.com/), für den produktiven Einsatz wird selbstverständlich die minimierte Version eingesetzt. Zusätzlich benötigt man den UI-Core, der bei Google Code unter http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.core.js erhältlich ist und zum guten Schluss das Datepicker-Plugin unter http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.datepicker.js.

Auf der HTML-Seite werden die JS-Files nun im Header eingebunden. Ausserdem bindet Ihr ein CSS ein, das Ihr Euch am besten direkt von http://blog.jqueryui.com/2010/02/jquery-ui-download-builderthemeroller-status/ holt:

<html>
<head>
<title>jquery ui form test</title>
<script type="text/javascript" src="/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="/js/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="/styles/ui_sunny.css" type="text/css" media="all" />
</head>

Im Body wird das Formular gecodet. Das Vor-Belegen der beiden Formularfelder mit dem aktuellen Datum (und dem aktuellen Datum plus 1 Tag), sowie das Handling für Formular anzeigen/Formular bearbeiten habe ich hier mit Coldfusion gelöst, kann man ja jeweils auch in der Lieblings-Sprache seiner Wahl umsetzen:

<body>
<cfset currentDateFrom = createODBCDate(now()) />
<cfset currentDateFrom = DateFormat(currentDateFrom,"dd-mm-yyyy") />
<cfset currentDateTo = createODBCDate(now()) + 1 />
<cfset currentDateTo = DateFormat(currentDateTo,"dd-mm-yyyy") />

<cfif cgi.REQUEST_METHOD eq "POST">
<cfdump var="#form#">
<cfelse>
<script type="text/javascript">
$(function() {
$("#datepickerFrom").datepicker({ dateFormat: 'dd-mm-yy' });
$("#datepickerTo").datepicker({ dateFormat: 'dd-mm-yy' });
});
</script>
<form name="DateForm" method="post" action="#cgi.script_name#">
<p>
<label for="datepickerFrom">Start-Datum:</label>
<input class="inputDate" id="datepickerFrom" name="datepickerFrom" style="width:100px" value="<cfoutput>#currentDateFrom#</cfoutput>" />
</p>
<p>
<label for="datepickerTo">Ende-Datum:</label>
<input class="inputDate" id="datepickerTo" name="datepickerTo" style="width:100px" value="<cfoutput>#currentDateTo#</cfoutput>" />
</p>
<p><input type="submit" value="Auswertung starten" /></p>
</form>
</cfif>
</body>
</html>
Hier ist der Aufruf des Datepickers an die Formular-Elemente mit den ID’s „datepickerFrom“ und „datepickerTo“ gebunden, als zusätzlicher Paramter wird das Datum in einem bestimmten Format festgelegt. Ein schöne Übersicht aller möglichen Attribute, Events und Methoden ist unter http://jqueryui.com/demos/datepicker/ zu finden. Unter dieser Adresse gibt es auch eine Demo von allen möglichen schicken UI-Themes.

Als Ergebnis erhalten wir also nun ein Formular mit 2 Datumswahl-Feldern, nach dem Abschicken wir nur ein Dump des Formular-Objekts angezeigt. Das sollte als Grundgerüst für den weiteren Ausbau genügen – viel Spass damit.

Scripte beobachten und debuggen mit Javascript Deobfuscator

Posted on by marcus
Scripte beobachten und debuggen mit Javascript Deobfuscator

Scripte beobachten und debuggen mit Javascript Deobfuscator

Abteilung kleine Helferlein: der Javascript Deobfuscator ist eine Firefox Extension, die sich prima eignet, um eventuellen Problemen mit JS-Code auf die Schliche zu kommen. Die Erweiterung zeigt an, welcher Skripte auf der Website ausgeführt werden, auch wenn der JS-Code dynamisch generiert wird. Die Extension ist über das Extras-Menü vom Firefox zu öffnen, die jeweilige Ansicht im Popup gibt Informationen, welche Skripte kompiliert beziehungsweise ausgeführt werden. Hier gibts die Extension zum Download.