Voici une fonction courte pour récupérer l’ensemble des paramètres passés dans l’URL :

function getUrlVars(a,b,c,d){b=[];if(a=location.search.split('#')[0].match(/\?(.*)(#.*)?/)){d=a[1].split('&');for(i=d.length;i--;){c=d[i].split('=');b[i]=c[0];b[c[0]]=c[1]}}return b}

var params=getUrlVars();
// si on a http://blog.kodono.info/?foo=bar&gniii=ok#something alors :
params[0]; // -> 'foo'
params[1]; // -> 'gniii'
params["foo"]; // -> 'bar'
params["gniii"]; // -> 'ok'

Array.prototype.unique=[].unique||function(){var o={},i,l=this.length,r=[];for(i=0;i<l;i++)o[this[i]]=this[i];for(i in o)r.push(o[i]);return r}

// exemple
var tab=[1, 5, 2, 4, 1, 5, 4, 1, 5, 6, 8 ];
tab.unique(); // [1, 5, 2, 4, 6, 8]

Je force le mode standard d’IE dans mon Sharepoint, et j’ai remarqué que les fonctions ProcessImn() et IMNRC() (l’une appelant l’autre) causaient un plantage d’IE avec un CPU qui montait en charge, et cela pour les pages qui contiennent un grand nombre de personnes et donc de bulles de présence (typiquement une liste AllItems avec des colonnes qui montrent cette information).
J’ai donc décidé de créer une alternative à l’affichage de la présence dans Sharepoint en utilisant mes propres fonctions.

Le résultat est le suivant :

/* on commence par supprimer les deux fonctions qui posent problèmes */
function IMNRC() {}
function ProcessImn() {}
var nameCtrl; // on s'assure de définir nameCtrl
var presence={}; // on crée un objet presence qui va nous servir à mettre en cache l'état de chaque individu
// Cette fonction fait apparaitre un menu/popup avec les informations de présence de l'utilisateur
function showIMMenu() {
  var el=window.event.srcElement;
  var pos=el.getBoundingClientRect();
  // on place le menu en question à la position pos.left et pos.top
  nameCtrl.ShowOOUI(el.getAttribute("sip"), 0, pos.left, pos.top);
}

// Cette fonction va cacher le menu
function hideIMMenu() { nameCtrl.HideOOUI() }

// Cette fonction va permettre de modifier la bulle avec celle qui correspond à l'état de présence de l'utilisateur
function ChangeIMPresence(sip, state, imgID) {
  if (presence[imgID] == state) return;
  presence[imgID]=state;
  var imgIM=document.getElementsByName(imgID);
  for (var i=0; i<imgIM.length; i++) {
    var alt="",src="imnhdr.gif"; // default image (grey)
    switch(state) {
      case 0: alt="Online"; src="imnon.png"; break;
      case 1: alt="Offline"; src="imnoff.png"; break;
      case 2: alt="Away"; src="imnaway.png"; break;
      case 4: alt="Be Right Back"; src="imnaway.png"; break;
      case 3: alt="Busy"; src="imnbusy.png"; break;
      case 5: alt="On the Phone"; src="imnbusy.png"; break;
      case 6: alt="Out to Lunch"; src="imnaway.png"; break;
      default: alt="Unknown"; src="imnhdr.gif";
    }
    imgIM[i].src="http://your_sharepoint/_layouts/images/"+src;
    imgIM[i].alt=alt;
  }
}

// Maintenant on initialise l'objet ActiveX
function initIMPresence() {
  if (typeof ActiveXObject == "function") { // seulement pour IE
    if (typeof nameCtrl=="undefined") nameCtrl=new ActiveXObject('Name.NameCtrl.1');
    var imgIM=document.getElementsByName("imnmark"); // toutes les bulles de présence ont le nom "imnmark"
    for (var i=0; i<imgIM.length; i++) {
      var sip=imgIM[i].getAttribute("sip"); // l'attribut "sip" retourne l'information que l'on souhaite
      if (sip!=null) {
        sip=sip.slice(4);
        var state=nameCtrl.GetStatus(sip, "imnmark_"+sip); // retourne la présence basée sur le SIP (adresse email)
        nameCtrl.OnStatusChange=ChangeIMPresence;
        imgIM[i].src="http://your_sharepoint/_layouts/images/imnhdr.gif";
        imgIM[i].alt="Unknown";
        imgIM[i].name+="_"+sip;
        imgIM[i].onclick=showIMMenu;
        imgIM[i].onmouseover=showIMMenu; // quand on passe la souris au-dessus d'une bulle on verra le menu
        imgIM[i].onmouseout=hideIMMenu;
      }
    }
  }
}

// et on lance tout ça !
initIMPresence();

En ajoutant ce bout de code à ma masterpage j’ai pu conserver les bulles de présence tout en évitant un plantage d’IE

Pour résumer la fonction à utiliser est :

function bindReady(handler){
  var called = false
  function ready() {
    if (called) return
    called = true
    handler()
  }
  if ( document.addEventListener ) { // native event
    document.addEventListener( "DOMContentLoaded", ready, false )
  } else if ( document.attachEvent ) {  // IE
    try { var isFrame = window.frameElement != null } catch(e) {}

    // IE, the document is not inside a frame
    if ( document.documentElement.doScroll && !isFrame ) {
      function tryScroll(){
        if (called) return
        try {
          document.documentElement.doScroll("left")
          ready()
        } catch(e) {
          setTimeout(tryScroll, 10)
        }
      }
      tryScroll()
    }

    // IE, the document is inside a frame
    document.attachEvent("onreadystatechange", function(){
      if ( document.readyState === "complete" ) {
        ready()
      }
    })
  }

  // Old browsers
  if (window.addEventListener)
    window.addEventListener('load', ready, false)
  else if (window.attachEvent)
    window.attachEvent('onload', ready)
  else {
    var fn = window.onload // very old browser, copy old onload
    window.onload = function() { // replace by new onload and call the old one
      fn && fn()
      ready()
    }
  }
}

A partir de là vous pouvez appeler votre fonction avec :

bindReady(function() {
  /* quelque chose qui doit se lancer après le chargement du DOM */
});

Dans le cas où vous voudriez appeler plusieurs fonctions, alors vous pouvez simplement faire quelque chose comme :

var fonctionsACharger=[];
bindReady(function() {
  for (var i=0; i<functionsACharger.length;i++) functionsACharger[i]();
});

/* on ajoute les fonctions à charger dans notre tableau */
fonctionsACharger.push(function() {
  /* première chose à faire */
});
fonctionsACharger.push(function() {
  alert("Toutes les fonctions sont maintenant chargées !");
});

Si vous passez IE9 en mode standard avec Sharepoint vous risquez d’avoir le bouton OK des formulaires qui ne fonctionne plus… Après avoir debuggué le bazar j’ai découvert qu’un des fichiers (« /_layouts/1033/form.js ») Javascript utilise document.frames() au lieu de document.frames[]. Si cela fonctionne sur les anciens navigateurs, ce n’est plus le cas pour IE9 en mode standard, du coup il retourne un « Function expected ».

Il y a deux fonctions incriminées RTE_GetEditorIFrame() et RTE_DD_GetMenuFrame(). Il suffit d’utiliser les commentaires conditionnels pour indiquer que lorsqu’on utilise IE9 alors on remplace ces deux fonctions par :

function RTE_GetEditorIFrame(strBaseElementID)
{
	var ifmEditor=null;
	var doc=document;
	if ((null !=doc.frames) && (doc.frames.length==0) && (doc.parentWindow.parent !=null))
	{
		doc=doc.parentWindow.parent.document;
	}
	if ((null !=doc.frames) && (doc.frames.length > 0))
	{
		var ifmContainer=doc.getElementById(RTE_GetEditorIFrameID(strBaseElementID));
		if (ifmContainer !=null)
		{
			ifmEditor=doc.frames[RTE_GetEditorIFrameID(strBaseElementID)];
		}
	}
	return ifmEditor;
}
function RTE_DD_GetMenuFrame()
{
	var ifmMenu=null;
	var elemMenu=RTE_DD_GetMenuElement();
	if (null !=elemMenu)
	{
		if (document.frames.length > 0)
		{
			ifmMenu=document.frames[g_strRTETextEditorPullDownMenuID];
		}
		else
		{
			if ((document.parentWindow !=null) && (document.parentWindow.frames !=null))
			{
				ifmMenu=document.parentWindow.parent.document.frames[g_strRTETextEditorPullDownMenuID];
			}
		}
	}
	if (null==ifmMenu)
	{
		if (g_fRTEFirstCallToGetMenu)
		{
			g_fRTEFirstCallToGetMenu=false;
			return null;
		}
	}
	return ifmMenu;
}

Ainsi document.frames est bien appelé comme un objet et non comme une fonction !

A noter cependant qu’il existe des tonnes de bugs avec IE9 et Sharepoint 2003/2007. Il est donc conseillé d’utiliser le mode de compatibilité en IE8 si vous ne voulez pas passer des heures à trouver l’origine des problèmes et à les corriger :

<meta http-equiv="X-UA-Compatible" content="IE=8"/>

Voici une fonction (qui mériterait quelques optimisations) qui va vous permettre de trouver tous les styles appliqués à un élément :

function getStyle(e) {
    var arr=(typeof window.getComputedStyle == "function" ? window.getComputedStyle(e) : e.currentStyle ); // IE will use the "currentStyle"
    var res=[];
    $.each(arr, function(k,v) { // ici j'utilise le "each" de jQuery simplement parce que c'est plus pratique/simple que le for-in
      if (typeof window.getComputedStyle == "undefined") {
        var kNoCamel=k.replace(/([A-Z])/g, "-$1").toLowerCase(); // sous IE on a des noms de propriétés au format camelCase
        k=v;
        v=kNoCamel;
      }
      if (v.charAt(0) != "-") {
        var vSlice = v.slice(0,7);
        // ici on va chercher à conserver que quelques propriétés CSS bien particulières
        var ok = (vSlice=="border-"||vSlice=="margin-"||vSlice=="padding");
        switch(v) {
          case "background-color":
          case "color":
          case "font-style":
          case "font-weight":
          case "font-size":
          case "font-family":
          case "width":
          case "height":
          case "vertical-align":
          case "text-align":
          case "text-decoration": ok=true;
        }
        if (ok) {
          if (typeof window.getComputedStyle == "function") {
            var vCamel=(v.search("-") != -1 ? v.replace(/(-)(.)/g,function(c) { return c[1].toUpperCase();}) : v); // pour trouver les valeurs associés aux propriétés on se change en camelCase
            res.push(v+":"+arr[vCamel]);
          } else {
            res.push(v+":"+k);
          }
      }
    }
  });
  return res.join(";");
};

alert(getStyle(document.getElementById('test')));
/* qui retournera par exemple:
background-color:transparent;border-bottom-color:rgb(128, 128, 128);
border-bottom-left-radius:0px;border-bottom-right-radius:0px;
border-bottom-style:none;border-bottom-width:0px;border-collapse:collapse;
border-left-color:rgb(128, 128, 128);border-left-style:none;
border-left-width:1px;border-right-color:rgb(128, 128, 128);
border-right-style:none;border-right-width:0px;border-spacing:2px 2px;
border-top-color:rgb(128, 128, 128);border-top-left-radius:0px;
border-top-right-radius:0px;border-top-style:none;border-top-width:1px;
color:rgb(0, 0, 0);font-family:verdana;font-size:16px;font-style:normal;
font-weight:400;height:3738px;margin-bottom:0px;margin-left:0px;margin-right:0px;
margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;
padding-top:0px;text-align:start;text-decoration:none;vertical-align:baseline;width:1756px
*/

Edit: J’ai découvert qu’il existe un plugin pour jQuery qui fait un peu près la même chose (sauf qu’il retourne TOUTES les propriétés et qu’il est bien plus lent à l’exécution) : http://upshots.org/javascript/jquery-copy-style-copycss

Did you know it’s possible to create a file from scratch and to add it into a shared documents library of Sharepoint, and only with Javascript ?

To do it we’ll use the « copy.asmx » web service with the « CopyIntoItems » function.
If you check http://your_sharepoint/_vti_bin/copy.asmx?op=CopyIntoItems you’ll see that we have several details about the « CopyIntoItems » function. Unfortunately it’s very difficult to find any information regarding this on the Web, and specially for Javascript…

So, here is the solution to create a file, e.g. an Excel file (.xls) with a regular HTML table, and we’re going to save it to this library: « http://your_sharepoint/Shared Documents/ » (Note: I’m using jQuery for the AJAX requests).

// The file content must be encoded into Base64. To do it I use the function available on my blog (http://blog.kodono.info/wordpress/2011/07/27/midi-code-encoder-decoder-en-base64-pour-javascript-programmation/)
function encode_b64(a,b,c,d,e,f){b="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";c='=';for(d=f='';e&=3,a.charAt(d++)||(b=';=',e);f+=b.charAt(63&c>>++e*2))c=c<<8|a.charCodeAt(d-=!e);return f}

// "Upload" is the name of our function to do the job
// txtContent is a plain text, the content of our file
// destinationUrl is the full path URL to the document library (with the filename included)
function Upload(txtContent, destinationUrl) {
    var jsStream = encode_b64(txtContent);
    var soapEnv  = "<?xml version=\"1.0\" encoding=\"utf-8\"?>"
                  +"<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">"
                  +"<soap:Body>"
                  +"<CopyIntoItems xmlns=\"http://schemas.microsoft.com/sharepoint/soap/\">"
                  +"<SourceUrl>http://null</SourceUrl>"
                  +"<DestinationUrls><string>"+destinationUrl+"</string></DestinationUrls>"
                  +"<Fields><FieldInformation Type='File' /></Fields>"
                  +"<Stream>"+jsStream+"</Stream>"
                  +"</CopyIntoItems>"
                  +"</soap:Body>"
                  +"</soap:Envelope>";
    jQuery.ajax({
        url: "http://your_sharepoint/_vti_bin/copy.asmx",
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        beforeSend: function(xhr) { xhr.setRequestHeader('SOAPAction', 'http://schemas.microsoft.com/sharepoint/soap/CopyIntoItems'); },
        contentType: "text/xml; charset=\"utf-8\""
    });
}

Upload("<html><table><tr><th>Colonne 1</th><th>Colonne B</th></tr><tr><td>Total:</td><td>1500</td></tr></table></html>","http://your_sharepoint/Shared Documents/test.xls");

Then, when you’ll click on the new « test.xls » file, your web browser will want to open it with Excel. MS Excel should show you a warning message, but just click YES and you’ll see your table inside the sheet !

Of course you can create any type of files (.txt, .jpg, .doc, …) and with any content.

Related links:

• http://blog.stuartwhiteford.com/?p=86
• http://stackoverflow.com/questions/7976329/sharepoint-copyintoitems-soap-message-in-objective-c
• http://msdn.microsoft.com/en-us/library/copy.copy.copyintoitems%28v=office.12%29.aspx

Pour cela nous utiliserons le web service « copy.asmx » avec la fonction « CopyIntoItems ».
Si vous pointez vers l’adresse http://votre_sharepoint/_vti_bin/copy.asmx?op=CopyIntoItems vous remarquerez qu’on vous fournit un certain nombre de détails quant aux informations qu’il faut envoyer. Malheureusement c’est plutôt très mal documenté, surtout pour Javascript…

Voici donc la solution pour créer un fichier, par exemple un fichier Excel (en .xls) dans lequel on va mettre un tableau HTML banal et qui sera enregistré (dans notre exemple) dans la librairie « http://votre_sharepoint/Shared Documents/ » (à noter que j’utilise jQuery pour la requête ajax).

// le contenu de notre fichier doit être encodé en Base64. Pour cela j'utilise la fonction disponible sur mon blog (http://blog.kodono.info/wordpress/2011/07/27/midi-code-encoder-decoder-en-base64-pour-javascript-programmation/)
function encode_b64(a,b,c,d,e,f){b="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";c='=';for(d=f='';e&=3,a.charAt(d++)||(b=';=',e);f+=b.charAt(63&c>>++e*2))c=c<<8|a.charCodeAt(d-=!e);return f}

// Notre fonction qu'on va appeler "Upload"
// txtContent est du plain text qui est donc le contenu de notre fichier
// destinationUrl est l'URL complète vers la librairie où le fichier va être stocké (avec le nom du fichier à créer)
function Upload(txtContent, destinationUrl) {
    var jsStream = encode_b64(txtContent);
    var soapEnv  = "<?xml version=\"1.0\" encoding=\"utf-8\"?>"
                  +"<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">"
                  +"<soap:Body>"
                  +"<CopyIntoItems xmlns=\"http://schemas.microsoft.com/sharepoint/soap/\">"
                  +"<SourceUrl>http://null</SourceUrl>"
                  +"<DestinationUrls><string>"+destinationUrl+"</string></DestinationUrls>"
                  +"<Fields><FieldInformation Type='File' /></Fields>"
                  +"<Stream>"+jsStream+"</Stream>"
                  +"</CopyIntoItems>"
                  +"</soap:Body>"
                  +"</soap:Envelope>";
    jQuery.ajax({
        url: "http://votre_sharepoint/_vti_bin/copy.asmx",
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        beforeSend: function(xhr) { xhr.setRequestHeader('SOAPAction', 'http://schemas.microsoft.com/sharepoint/soap/CopyIntoItems'); },
        contentType: "text/xml; charset=\"utf-8\""
    });
}

Upload("<html><table><tr><th>Colonne 1</th><th>Colonne B</th></tr><tr><td>Total:</td><td>1500</td></tr></table></html>","http://votre_sharepoint/Shared Documents/test.xls");

Ensuite si vous cliquez sur le fichier « test.xls » nouvellement créé, votre navigateur va vouloir l’ouvrir avec Excel. Celui-ci va vous donner un warning, mais il suffit d’accepter et votre tableau va apparaitre dans votre Excel !
Bien sur on peut créer tout type de fichier (.txt, .jpg, .doc, etc) et avec le contenu que l’on souhaite.

Liens additionnels:

• http://blog.stuartwhiteford.com/?p=86
• http://stackoverflow.com/questions/7976329/sharepoint-copyintoitems-soap-message-in-objective-c
• http://msdn.microsoft.com/en-us/library/copy.copy.copyintoitems%28v=office.12%29.aspx

new Date(new Date(new Date().toUTCString()).setMinutes(-300));

Ensuite il faudra utiliser les fonctions getUTC* pour avoir les informations relatives à la nouvelle heure :

var dLocal = new Date(); // -> Thu Nov 03 2011 09:50:19 GMT+0100
var dOffset = new Date(new Date(new Date().toUTCString()).setMinutes(-300));
var offsetHours = dOffset.getUTCHours(); // -> 3

var myText = 'blah blah <script type="text/javascript">foo=bar;</script>blah blah';
var myStripText = myText.replace(/<script.*?>[\s\S]*?<\/.*?script>/gi,"");
console.log(myStripText); // -> 'blah blah blah blah'

On peut également utiliser une expression régulière pour supprimer les liens javascripts :

var myText = 'blah blah <a href="javascript:alert(gniii)">foo</a>blah blah';
var myStripText = myText.replace(/javascript.*:[^"]*/gi,"");
console.log(myStripText); // -> 'blah blah <a href="">fooblah blah'

Il existe des sites web qui fournissent un débogage du Javascript, et mon préféré est http://www.javascriptlint.com/. Il vous montrera rapidement ce qu’il ne va pas dans ce que vous avez entré : oubli de parenthèse, de point-virgule, mauvaise déclaration, …

De plus si vous utilisez Notepad++ ou un autre éditeur, il est facile d’adjoindre la puissance de JSLint à votre programme préféré. Dans ce thread on vous explique tout.
En l’occurrence voici comment faire pour Notepad++ :

1. Télécharger la version pour Windows, puis dézippez le fichier;
2. Maintenant ouvrez Notepad++, puis dans le menu Plugins vous trouvez NppExec, et après Execute… (ou touche F6);
3. Dans la zone qui apparait entrez la commande suivante (en supposant que vous ayez mis le fichier dézipppé dans « C:\Program Files\JavascriptLint\ ») :
   "C:\Program Files\JavascriptLint\jsl.exe" -conf "C:\Program Files\JavascriptLint\jsl.default.conf" -process "$(FULL_CURRENT_PATH)"
4. Cliquez sur « Save… » et donnez un nom à cette commande;
5. Vous pouvez désormais utilisez JSLint directement dans Notepad++
6. Dans le fichier jsl.default.conf vous trouverez les options et les warnings à supprimer

Il existe le populaire http://jsperf.com/ qui offre la possibilité de tester autant de bouts de code que l’on souhaite, en appelant même quelques framework bien connus (comme jQuery).

Mais si vous avez des besoins un peu plus particulier, ou vous devez travailler sur un environnement restreint, alors il est possible d’utiliser JSLitmus. La façon de l’utiliser est incroyablement simple :

<script src="JSLitmus.js"></script>
<script>
JSLitmus.test('Mon premier test', function() { /* do something */ });
JSLitmus.test('Mon second test', function() { /* do something else */ });
</script>

Cela fait apparaître un bouton « Run tests » avec un petit tableau. Une fois le test fini le tableau et un graphique vous donnent les informations nécessaires, et en l’occurrence plus le chiffre (nombre d’opérations/sec) est grand et mieux c’est.

Voici un exemple qui montre que l’utilisation de search est bien plus rapide que de déclarer une RegExp puis appeler match :

<html>
<head>
<script src="http://www.broofa.com/Tools/JSLitmus/JSLitmus.js"></script>
</head>
<body>
<script>
JSLitmus.test('Mon premier test', function() { var regExp = new RegExp("pouet$"); var ok = ("pouet".match(regExp) != null); });
JSLitmus.test('Mon deuxième test', function() { var ok = ("pouet".search("pouet") != -1); });
</script>
</body></html>

Résultat :

Pour l’activer il faut appuyer sur la touche F12, seulement, dans mon cas, même si elle apparaissait bien dans la liste des fenêtres ouvertes, quand je cliquais dessus rien ne se passait : elle ne s’ouvrait pas ! La solution consiste à faire un SHIFT + Clic Droit sur la fenêtre puis choisir « Maximize » (ou « Agrandir » en français), et là votre Developer Toolbar va s’ouvrir en grand. Les pré-réglages étant mauvais, la fenêtre s’ouvre dans un étrange mode.

Simple, mais il fallait y penser…

Le typeof par défaut de Javascript

Déjà, comme typeof est un opérateur, vous n’avez pas besoin d’utiliser des parenthèses ou une quelconque autre décoration.
Ainsi on aura :

typeof 2; // -> "number"
typeof "Kodono"; // -> "string"

On peut remarquer qu’ici typeof nous a bien donné ce qu’on attendait… mais voilà ce qu’il se passe avec d’autres exemples :

typeof []; // -> "object"
typeof new Boolean(true); // -> "object"
typeof /a/; // -> "object"
typeof new Date(); // -> "object"
typeof null; // -> "object"

Comme on peut le voir, l’opérateur va fournir un « object » dans de nombreuses situations, ce qui n’aide pas du tout.

Créer un meilleur typeof

Pour faire court, on peut appliquer Object.prototype.toString.call à un objet qui va retourner une chaine au format « [object Class]« . Quelques exemples :

Object.prototype.toString.call(new Number(2)); // -> [object Number]
Object.prototype.toString.call(new Date()); // -> [object Date]
Object.prototype.toString.call(/a/); // -> [object RegExp]

Maintenant que l’on sait ça on peut créer notre propose fonction typeOf (en sachant que Object.prototype peut se raccourcir par ({})/).
On trouve sur Internet différentes façons de faire que je vais vous proposer.

La plus lente

Elle n’est pas très rapide (dûe à l’utilisation des expressions régulières), mais elle est très courte :

function typeOf(obj){return({}).toString.call(obj).match(/\s(\w+)/)[1]}

console.log(typeOf(new Number(2))); // -> Number
console.log(typeOf(new Date())); // -> Date
console.log(typeOf("test")); // -> String
console.log(typeOf(null)); // -> Null
console.log(typeOf(/a/)); // -> RegExp
console.log(typeOf([])); // -> Array
console.log(typeOf(function(){})); // -> Function

jQuery.type

Si vous utilisez déjà jQuery, vous pouvez utiliser la fonction jQuery.type qui propose une fonction assez rapide et efficace.
Ils utilisent la méthode suivante :

function typeOf(obj){
  var c2t={"[object Boolean]":"Boolean","[object Number]":"Number","[object String]":"String","[object Function]":"Function","[object Array]":"Array","[object Date]":"Date","[object RegExp]":"RegExp","[object Object]":"Object"};
  return obj==null?String(obj):c2t[({}).toString.call(obj)]||"object";
}

console.log(typeOf(new Number(2))); // -> Number
console.log(typeOf(new Date())); // -> Date
console.log(typeOf("test")); // -> String
console.log(typeOf(null)); // -> Null
console.log(typeOf(/a/)); // -> RegExp
console.log(typeOf([])); // -> Array
console.log(typeOf(function(){})); // -> Function

La plus courte et rapide

Celle-ci ne prend que quelques caractères, et se veut rapide en plus !

function typeOf(obj) {return({}).toString.call(obj).slice(8,-1)}

console.log(typeOf(new Number(2))); // -> Number
console.log(typeOf(new Date())); // -> Date
console.log(typeOf("test")); // -> String
console.log(typeOf(null)); // -> Null
console.log(typeOf(/a/)); // -> RegExp
console.log(typeOf([])); // -> Array
console.log(typeOf(function(){})); // -> Function

Conclusion

Si vous utilisez déjà jQuery dans votre code, alors vous pouvez faire confiance à jQuery.type, sinon je vous conseille la dernière fonction proposée :

function typeOf(obj) {return({}).toString.call(obj).slice(8,-1)}

<EDIT>: A noter qu’il existe la fonction HTMLElement.scrollIntoView() qui fait la même chose et qui semble être compatible avec tous les navigateurs contrairement à ce qu’il se dit sur divers forums (j’ai testé sur les navigateurs récents en tout cas, mais j’ai aussi testé d’IE6 à IE9 et ça semble fonctionner).</EDIT>

Pour se déplacement dans votre page jusqu’à un élément, pas besoin de jQuery.scrollTo() car vous pouvez le faire en quelques lignes de code.

Pour cela, on va calculer la position (coordonnées) de notre élément où on souhaite se rendre; on utilise les propriétés offsetLeft et offsetTop. Il faudra aussi tenir compte de l’offsetParent pour avoir une position correcte.

var elem = document.getElementById('footer_bg');
var left = 0;
var top = 0;
do {
  left += elem.offsetLeft;
  top  += elem.offsetTop;
} while (elem = elem.offsetParent);
// on a maintenant les coordonnées X=left et Y=top de notre élément
// on peut donc se déplacement dans le document grâce à window.scrollTo(X,Y)
window.scrollTo(left,top);

Vous pouvez tester ce code, ce qui devrait vous amener jusqu’en bas de cette page.

Vous pouvez trouver une version de cette fonction qui fait ~100 caractères sur https://gist.github.com/1114275.

Il existe plusieurs scripts sur le Net pour encoder/decoder en Base64 avec Javascript, mais c’est sur http://140byt.es/ que j’ai trouvé les plus courts, car ils font moins de 140 caractères !
Cependant, je les ai modifié légèrement pour qu’ils fonctionnent avec IE7 (et plus vieux) :

function decode_b64(d,b,c,u,r,q,x){b="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";for(r=q=x='';c=d.charAt(x++);~c&&(u=q%4?u*64+c:c,q++%4)?r+=String.fromCharCode(255&u>>(-2*q&6)):0)c=b.indexOf(c);return r}
function encode_b64(a,b,c,d,e,f){b="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";c="=";for(d=f='';e&=3,a.charAt(d++)||(b='=',e);f+=b.charAt(63&c>>++e*2))c=c<<8|a.charCodeAt(d-=!e);return f}

Soit un total de 436 bytes pour les deux fonctions.

Pour l'utiliser :

alert(decode_b64(encode_b64("foobar")));

Il est possible d’effectuer une action sur la page avant que l’utilisateur ne quitte la page (en la fermant, la rechargeant, en navigant dans l’historique, ou en cliquant sur un lien). Pour cela utilisez la méthode ci-dessous (via MDN) :

window.onbeforeunload = function (e) {
  e = e || window.event;
  // For IE and Firefox prior to version 4
  if (e) e.returnValue = 'Any string';

  // For Safari
  return 'Any string';
};

Si vous ne voulez pas ce comportement pour un clic sur un lien, alors il faudra gérer une variable qui sera activée lors d’un clic sur un tag A (exemple avec jQuery) :

__okForClosing = false;
window.onbeforeunload = function (e) {
  if (!__okForClosing) {
    e = e || window.event;
    // For IE and Firefox prior to version 4
    if (e) e.returnValue = 'Any string';

    // For Safari
    return 'Any string';
  }
};
$('a').click(function() { __okForClosing=true; });

Si vous souhaitez créer un effet highlight sur un élément (en passant le background en jaune par exemple), voici comment il faut s’y prendre :

jQuery.prototype.highlight = function() {
  jQuery(this).css("background-color","yellow").fadeTo('slow', 0.1, function() {
    jQuery(this).fadeTo('slow', 1.0, function() {
      jQuery(this).css("background-color","white");
    });
  });
};

jQuery('#mon-element').highlight();

Il suffit d’utiliser ce petit code pour transformer « paris » en « Paris » grâce à Javascript :

"paris".replace(/^\w/, function($0) { return $0.toUpperCase(); })

Je me suis retrouvé dans la situation où dans un mailto je devais inscrire plusieurs informations (subject, cc, body) afin de créer une sorte de template qui s’ouvrirait avec Outlook. Je l’avais incorporé dans un href d’un lien classique. Si le lien fonctionnait parfaitement sous Firefox, il apparait que sous Internet Explorer j’avais droit à une page blanche (about:blank)… Après quelques recherches, j’ai découvert qu’IE en « Protected Mode: Off » se limite à 508 caractères pour le mailto…. allez savoir d’où vient cette limite ?!

Pour outrepasser ce problème, vous avez deux solutions :
1) Demander à vos utilisateurs de passer en « Protected Mode: On » (non envisageable)
2) Utiliser Javascript en associant un window.location.href à votre ligne mailto:email?subject=xxx&cc=xxx&body=xxxx, qui fonctionnera pour tout le monde !

J’ai remarqué la chose suivante : j’utilise jQuery pour ajouter/supprimer des éléments dans une liste déroulante SELECT, cependant sous IE6 le rendu de la liste n’est pas mis à jour, et de fait les modifications apparaissent de façon partielle. Pour résoudre ce problème j’ai découvert qu’il faut ajouter un élément FRAME sur la page pour que le rendu soit mis à jour ! Si on utilise jQuery, cela ne fonctionne pas, il faut donc utiliser la bonne vieille méthode :

if (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) == 6) {
      var f=document.createElement('frame');
      f.display="none";
      document.body.appendChild(f);
 }

Ainsi après ma modification, j’ajoute une FRAME invisible qui va forcer IE6 à rafraîchir le rendu de la page et ainsi à mettre à jour la dropdown box.

Après d’infructueuses recherches je suis finalement tombé sur SimpleModal qui propose exactement le même effet de popup basé sur un style MacOS X, et le tout pour jQuery !

J’espère que ce post servira à ceux qui cherchent comme moi un équivalent jQuery à ModalBox

Pour ma société je dois travailler sur IE7. Il se trouve que j’utilise jQuery (1.4.4) avec Microsoft Sharepoint pour customizer certaines pages. J’ai remarqué que sous mon IE7 la fonction jQuery(document).ready() n’était appelée que lorsque les images étaient complètement chargées; cependant ce comportement ralentissait grandement les modifications que je cherchais à faire.

Après quelques recherches j’ai découvert une solution qui fonctionne pour moi sur le blog de Nexxar : il suffit d’ajouter try { jQuery.ready(); } catch {} à la fin de la page HTML pour que notre fonction ready soit activée avant que toutes les images ne soient pleinement téléchargées !

Lorsque vous utilisez une expression régulière, cela va vous retourner un maximum de caractères, ainsi si nous prenons la chaine « foo:bar:gniii » avec la regexp /^(.*):(.*)$/, on va avoir « foo:bar » d’une part et « gniii » d’autre part.
Alors comment faire pour obtenir la première occurrence de « : » dans notre chaine ? Il suffit d’ajouter le caractère clé « ? ».
Ainsi dans notre exemple il faut écrire : /^(.*?):(.*)$/, qui retournera « foo » et « bar:gniii ».

A noter que cela est valable pour la fonction « match » de Javascript, mais aussi pour les autres langages comme PHP.

Il est possible de connaître la version d’Internet Explorer en Javascript en utilisant le User Agent. Cependant, IE8, lorsqu’il est en mode compatibilité, va retourner IE7 quand on l’interroge. Cela peut poser problème. Il existe une solution qui permet de détecter IE8 même dans ce mode spécial, et sans utiliser les commentaires conditionnels :

// retourne un entier (5, 6, 7 ou 8), ou false si ce n'est pas IE
function getIEVersion() {
  if (!!(window.attachEvent && navigator.userAgent.indexOf('Opera') === -1)) {
    var ver = navigator.userAgent.match(/MSIE ([0-9.]+);/);
    if (ver != null && ver[1] != undefined) {
      ver = parseInt(ver[1]);
      if (ver == 7) {
        if (typeof (window.external.AddToFavoritesBar) != "undefined" ||
            typeof (window.external.AddService) != "undefined" ||
            typeof (window.external.AddService) != "undefined") return 8;
      }
      return ver;
    }
  }
  return false;
}

En Javascript on peut facilement simuler un clic sur un élément d’une page HTML. Pour cela on utilisera la fonction suivante :

function fireEventClick(elem){
    if(document.createEvent){
      var e = document.createEvent('MouseEvents');
      e.initMouseEvent('click', /* Event type */
      true, /* Can bubble */
      true, /* Cancelable */
      document.defaultView, /* View */
      1, /* Mouse clicks */
      0, /* Screen x */
      0, /* Screen y */
      0, /* Client x */
      0, /* Client y */
      false, /* Ctrl */
      false, /* Alt */
      false, /* Shift */
      false, /* Meta */
      0, /* Button */
      null); /* Related target */
      elem.dispatchEvent(e);
    } else { // pour IE
      elem.click();
    }
}

Lorsque vous avez un bouton <button> quelque part dans un formulaire HTML, alors que vous cliquez dessus avec Firefox, ce dernier va vouloir envoyer le formulaire, alors même que le bouton n’a pas cet objectif. En effet, supposons que vous vouliez que l’action onclick actionne une quelconque fonction javascript de votre cru.

Pour éviter ce comportement avec Firefox, on peut essayer d’insérer un return false qui aura plus ou moins de succès:

<button id="myButton" onclick="myFunction(); return false;">do it!</button>

Le return false donnera un résultat très aléatoire, et c’est pourquoi je conseille plutôt d’utiliser une fonction qui va stopper la propagation de l’évènement :

<button id="myButton" onclick="stopAction(event); myFunction();">do it!</button>

function stopAction(e) {
  if (!e) e = window.event;
  if (e.cancelBubble != undefined)
    e.cancelBubble = true;
  if (typeof e.stopPropagation != "undefined") {
    e.stopPropagation();
    e.preventDefault();
  }
  return false;
}

Avec ça, lorsque vous cliquez sur le bouton, la page ne devrait pas être rechargée.

Sur l’excellent blog Ajaxian je viens de découvrir qu’il existe un plugin au module Firebug (dont je parlais justement hier) qui permet de déboguer du PHP en console ! Cette petite merveille se nomme FirePHP et m’a l’air prometteur au vue des images:

Je ne code actuellement pas en PHP, mais je dois bientôt retravailler sur un projet avec ce langage, je pourrai alors vous en dire un peu plus !

A noter qu’il existe d’autres moyens de débugguer, comme PHP Quick Profiler (en).