doc.progysm.com

Scope

Trois code qui retourne un tableau [0,2]:

// toutes les versions
var i = 0,j=0; (function() {var i = 1; i++; j=i })(); [i,j]

// ancienne version (sans "use strict";)
var i = 0,j=0; with ({i: 1}){ i ++; j=i }; [i,j]

// nouvelle version avec let.
var i = 0,j=0; let (i = 1){ i ++; j=i }; [i,j]

Alphabet

var a = 0; (""+!++a)[a++];
var b = 2; (typeof b)[++b];
var c = {}; (typeof c)[(""+!!c).length];
var d = ""+d; d[d.length-1];
var e = true; (""+e)[+e+e+e];
var f; (""+f)[f=+!f++,++f+f];
var g = typeof "";g[g.length-1];
var h = 2; (""+(new Date(++h,h-h)))[h/h];
var i = ""; (typeof i)[~-(""+!i).length];
var j = typeof {}; j[(+!!j+!!j)];
try { k } catch(k) { k.message[+[]] }
var l = 3; (typeof !!l)[l]; // or var l = typeof (!!l)+""; l[~-l.length/(!!l+!!l)];
var m = +!0; (typeof m)[++m];
var n = 0; (typeof n)[n];
var o = {}; (typeof o)[+!o];
var p = /^/.constructor.name; p[p.length-1];
var q = Math.sqrt; (""+q)[q(+!!q+""+(+!q)+""+(+!q))]; 
var r = typeof(+true);  r[r.length-1];
var s = ""; (typeof s)[+!!s];
var t = ""; (typeof t)[+!!t+!t];
var u = +false; (typeof u)[++u];
var v = (-~0+""+0)/2; (""+(new Date(v-v,v+v)))[++v];
var w = /\w/.source; w[+!!w];
var x = <x/>; (typeof x)[+x];
var y = ""+(+!0/0); y[y.length-1];
var z = 35; z.toString(++z);  // or var z = (new Date()).toISOString().toLowerCase(); z[z.length-1]

function _new

Comment remplacer new sans _new

function _new(con, args){
  var o = {};
  o.__proto__ = con.prototype;
  r = con.apply(o, args);
  return (r !== null && (typeof r == "object" || typeof r == "function")) ? r : o;
}
function Foo(pTest) {
 this.test=pTest;
}
Foo.prototype.bla = 1;

var a = _new(Array, [10, 11]); // var a = new Array(10,11);
var f = _new(foo, [2]); // var f = new Foo(2)

Navigateur/Moteur

Chaque navigateurs a des particularités. Par exemple, les id des éléments sont accessibles directement comme des noms de variable dans Chrome.

La version d'Internet Explorer est JScript et non pas Javascript. En JScript (IE), [,].length retourne 2. En Javascript (Gecko/Safari/Chrome/Opera), [,].length retourne 1.

Debug

Anciennement, il y avait la console d'erreur de Netscape, ensuite le déboggeur Venkman de Mozilla, l'extension DOM Inspector, l'extension Firebug. Maintenant, les outils de développement sont intégrés dans les navigateurs. Dans Iceweasel: CTRL-SHIFT-K pour la console web. F12 pour Internet Explorer et Chrome. Clique-droit > Inspecter l'élément dans Epiphany.

Chaque console a des particularités.

Il est vivement recommandé d'arrêter d'utiliser des alert('test') en faveur des console.log('test'). Dans les vieux IE, il y avait une erreur si la fenêtre de développement (F12) n'était pas ouverte.

Voir aussi Google Chrome Console

Bibliothèques (library)

Plusieurs bibliothèques de fonctions existent pour essayer de corriger les différences entre les navigateurs

• W3C DOM : Document Object Model. Fournit dans la majorité des navigateurs. Beaucoup de problèmes de compatibilité avec les vieux IE.
• jQuery ($) : Englobe chaque objet du DOM dans une enveloppe (wrapper) jQuery.
• Prototype ($) : Ajoute des fonctions directement sur les prototypes des objets communs (comme Array, String, Object)
• Underscore (_) : Fonctions utilitaires disponibles dans l'objet/fonction _ pour les Array et Object.

// comment obtenir une référence à un élément avec <div id="test">bla</div>.

// jQuery
$('#test').get(0); // $('#test')[0]

// prototype
$('test');

// Google Chrome
test;

// W3C Selectors API Level 1
var test = document.querySelector('#test');

// W3C DOM 1
var test = document.getElementById('test');

// internet explorer 5
var test = document.all['test']

// netscape navigator 4
var test = document.layers['test']