Ouvrez votre console dans Chrome par exemple, puis copiez-collez
[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})
Voilà, chaque type de noeud de votre page HTML est désormais entouré d'une légère bordure de couleur différente.
Bon, pour plus de lisibilité et afin de vous faire un peu moins détester de vos collègues qui ne comprendront pas immédiatement ce code dans sa forme compacte, présentons-le sur trois lignes :
[].forEach.call($$("*"),function(a){
a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})
En détaillant ledit code, on trouve quelques bonnes idées.
Obtenir tous les éléments HTML de type 'x'
Par exemple tous les liens, qui comme vous le savez, sont représentés par le tag html 'a':
$$('a')
$$() est équivalent à
document.querySelectorAll
Appeler des méthodes de l'objet Array sur des non arrays
C'est possible grâce à call ou apply, méthodes traditionnellement utilisées afin d'appeler une méthode en définissant ce qui sera 'this'.
Mais au lieu de la forme plus verbeuse:
Array.prototype.forEach.call()
Il est possible d'utiliser :
[].forEach.call()
Assigner des couleurs aux éléments sélectionnés
La logique est voisine de celle des borders en CSS.
a.style.outline="1px solid #" + color
Convertir un decimal en hexadecimal à l'aide de toString()
D'ordinaire, non appelons toString() sans passer de paramètre. Mais en passant '16' en paramètre, en passe en base16:
(30).toString(); // "30"
(30).toString(16); // "1e" Hexadecimal
Pour passer d'un nombre en base 16 vers un nombre en base10:
parseInt("1e", 16); // "30"
Mais ce qui nous intéresse, c'est d'obtenir un nombre compris entre #000000 et #ffffff en hexadecimal.
Or, #ffffff en hexadecimal, cela donne :
parseInt("ffffff", 16) == 16777215
Et 16777215 en base 10 donne, en binaire:
2^24 - 1
Donc pour obtenir un nombre aléatoire compris entre 0 et 16777215 (en binaire : 2^24 - 1) :
Math.random()*(1<<24)
Récupérer la partie entière d'un float
Pour finir, il convient de se débarraser de ce qui vient après la virgule:
var a = 12.34, // ~~a = 12
Et voilà. Un petit bout de code qui comporte pas mal de choses propres à JavaScript, vues par la rock star du JS, Addy Osmani
sur ce gist et décortiqué sur ce blog.