Es gibt beim schreiben von javascript so einiges zu beachten, wenn man zuerst für den Firefox entwickelt und anschließend sein javascript im IE bewundern möchte.

Zum Beispiel sollten Kommata vorsichtig gesetzt werden…

var Utils = {
 
	bindFocusSetter: function() {
		$$("input", "textarea", "select").each(
		    function(input) {
		    	this.bindFocusElement(input);
		    }.bind(this)
		);
	},
 
	bindFocusElement: function(input) {
		...
	},
 
	disableDefaultDrag: function(event) {
		...
	},
 }

Während der Firefox dies akzeptiert und die functions problemlos ausführt..
..schaut es im IE anders aus, das Komma hinter der letzten function läßt den IE stutzig werden.

Auch sollte man sich bei der Verwendung von Prototype einiges von Prototype selbst abschaun, z.B. das “prototypifizieren” von Elementen, wie im folgenden Code Block dargestellt.

/**
 * Fuer die Validierung von Inputfeldern.
 */
var Validate = {
	validate: function(regEx,field,message){
		var feld = $(field);
		if(feld){
			var feldlabel;
			if(feld.previous(0)){
...

So ist man mit “var feld = $(field);” auf der sicheren Seite ein Element an der Hand zu haben, auf dem gefahrlos Prototype Funktionen aufgerufen werden können.

Das hereinreichen von Strings per el in eine javascript Funktion kann auch daneben gehen, wenn z.B. Zeilenumbrüche vorhanden sind.

<tr class="active'"
    onclick="showZusatzInfo('${xyItem.inhalt}');"
    style="cursor: pointer;">

Ein Zeilenumbruch “\n” führt hier zu einem Fehler, beim auslösen des onclick Event-Handlers. Abhilfe schafft hier eine einfache JSTL-Function.
Der modifizierte onclick Event-Handler…

<tr class="active''}"
    onclick="showZusatzInfo('${xyItem.inhalt}');"
    style="cursor: pointer;">

Die simple Java-Klasse…

public class Functions {
 
    private Functions() {
    }
 
    public static String unwrap(final String input) {
        String result = null;
 
        if (input != null) {
            result = input.replaceAll("\\r\\n", "\\\\n");
            result = result.replaceAll("\\n\\r", "\\\\n");
            result = result.replaceAll("\\r", "\\\\n");
            result = result.replaceAll("\\n", "\\\\n");
        }
 
        return result;
    }
}

Und noch der TLD-Eintrag…

<function>
    <name>unwrap</name>
    <function-class>de.standard.Functions</function-class>
    <function-signature>
        java.lang.String unwrap(java.lang.String)
    </function-signature>
</function>

Bis zum nächsten Blog-Eintrag…
Sven Seiller

Tags: Javascript

Dieser Eintrag wurde am Freitag, 15. Mai 2009 um 18:27 erstellt und ist abgelegt unter Javascript, Prototype + Scriptaculous. Mit dem RSS 2.0 Feed kannst du den Antworten zu diesem Artikel folgen. Du kannst eine Antwort hinterlassen, oder einen Trackback von deiner eigenen Seite senden.