Javascript Quicktipps

[shapeshifta]

Hi,

wie wäre es mit einem Thread, in dem jeder immer mal einen kurzen Tipp oder Code-Schnippsel anhängt, was er kennt? So könnte man von einander lernen und hätte auch sowas wie ne kleine Referenz?

Ich fange mal an, String hat eine oft vergessene link-Methode:

var url = 'http://www.google.de',
    test1 = '<a href="' + url + '">Test</a>',
    test2 = 'Test'.link(url);

Mit beiden Variablen erhält man das gleiche Ergebnis. :icon6:

 

[ABNetworks.DE]

Da man häufig document.getElementById() verwendet, ist es hilfreich sich dafür eine kürzere Funktion zu schreiben:

var _id = function(id) {
	 
		return document.getElementById(id);
		
		}

 

[shapeshifta]

Funktionen als Objekte nutzen:

var printMe = function(stuff){
    document.body.innerHTML += stuff;
};

var counter = function() {
    if (!arguments.callee.count) {
        arguments.callee.count = 1;
    }
    return arguments.callee.count++;
};

printMe(counter()); // Ausgabe: 1
printMe(counter()); // Ausgabe: 2
printMe(counter()); // Ausgabe: 3

 

[kkapsner]

ECMA-262 Erweiterungen verwenden (und für Browser, die das noch nicht unterstützen einfahch ein entsprechendes Skript laden) - macht einige Dinge sehr viel einfacher:

Array.prototype.forEach.call(document.getElementsByTagName("div"), function(node, i){
	node.onclick = function(){
		alert(i);
	};
});

 

[shapeshifta]

Spaß mit logischen Operatoren, nehme ich gerne für's debugging:

var a = 5;
a === 5 && document.write( 'a is 5 \n' ); //a is 5
a === 7 || document.write( 'a is not 7 \n' ); //a is not 7

 

[Arcsinh]

Braucht man vllt. nicht jeden Tag, aber trotzdem: Zweierpotenzen als bitweise Linksverschiebung darstellen.

1 << n
// statt;
Math.pow(2, n);

Aber um 2^n in einer bitweisen Linksverschiebung darzustellen gibt es nicht nur eine, sondern n + 1 Varianten:
2^n = 2^k << n - k, für 0 <= k <= n

 

[shapeshifta]

JavaScript-Miniframework:

//implement missing function
if(!document.getElementsByClassName){
    document.getElementsByClassName = function(cl) {
        var retnode = [],
            myclass = new RegExp('\\b'+cl+'\\b'),
            elem = this.getElementsByTagName('*');
        for (var i = 0, max = elem.length; i < max; i++) {
            var classes = elem[i].className;
            if (myclass.test(classes)){
                retnode.push(elem[i]);
            }
        }
        return retnode;
    };
}

//framework functions
function $(id){ return document.getElementById(id); }
function html(id, html){ $(id).innerHTML = html; }
function css(id, style){ $(id).style.cssText += ';'+style;}
function $$(cl){ return document.getElementsByClassName(cl); }

//testrun
html('test','this is an awesome text');
css('test','color:red;background-color:blue');

var groups = $$('group');
for (var i = 0, max = groups.length; i < max; i++){
    groups[i].innerHTML = 'element ' + i;
}

Live - Test

 

[kkapsner]

@shapeshifta: die html und css Funktion wären für mich zu unflexibel (in deiner Schleife brauchst du dann ja doch wieder .innerHTML = ...).

 

[shapeshifta]

Ja, mag sein, können wir gerne aufbohren
Aber dann ist es wahrscheinlich nicht mehr Mini... querySelectorAll könnte man auch nutzen, wenn vorhanden.

Hier als gist, wer forken mag https://gist.github.com/1080660

 

[shapeshifta]

Zufallszahlen mit Math:

if(!Math.randomFromTo){
	Math.randomFromTo = function(from, to){
	     return Math.floor( Math.random() * (to - from + 1 )) + from;
        };
}

 

[kkapsner]

Da wir schon beim Zufall sind:

Array.prototype.shuffle = function(){
	var rand, old;
	for (var i = this.length - 1; i >= 0; i--){
		rand = Math.floor(Math.random() * (i + 1));
		old = this[i];
		this[i] = this[rand];
		this[rand] = old;
	}
}