Trucs et astuces Javascript/jQuery/Firebug

Voici une liste de fonctions/astuces JavaScript. Certaines peuvent être résponsables de longues heures de débogage donc c'est bien de les connaitre!

 

 

 

 

 

 

JavaScript

Savoir si un objet est vide

Il n'y pas de façon rapide de savoir si un objet est vide. Même si vous ne lui ajoutez pas de propriété, un objet a des méthodes et propriétés crées par son constructeur. La seule façon est donc de parcourir toutes les propriétés de l'objet et regarder si les propriétés sont héritées ou spécifiques à l'objet. C'est ce que permet la méthode hasOwnProperty qui renvoie true si la propriété n'est pas héritée.

function isEmpty(obj) {
  for(var prop in obj) {
    if(obj.hasOwnProperty(prop))
      return false;
  }
  return true;
} 

 

Savoir si un objet est dans un tableau

On ne peut pas tester la présence d'un élément dans un tableau en javascript, mais on peut avec un Object(). L'astuce est donc de créer un Object() à partir du tableau et tester sur l'objet.

function obj(a){
  var o = {};
  for(var i=0;i<a.length;i++){
    o[a[i]]='';
  }
  return o;
}

var test = ['papa', 'maman', 'brother', 'sister'];
if('maman' in obj(test)){
  alert('Maman est parmi nous');
}

 

Supprimer les doublons dans un tableau

Encore une fonction essentielle qui est absente de JavaScript. Pour se faire, on commence par ordonner le tableau puis on compare chaque valeur avec la précédente.

function RemoveDupArray(a){
  a.sort();
  for (var i = 1; i < a.length; i++){
    if (a[i-1] === a[i])
      a.splice(i, 1);
  }
}
var test = ['un', 'deux', 'trois', 'un'];
RemoveDupArray(test); // ['un', 'deux', 'trois']

 

Décoder une chaine HTML après transmission Ajax/Json

Lorsque vous souhaiter envoyer du code HTML dans une réponse Json, vous devez échapper les entités HTML pour pouvoir "parser" la réponse sans erreur. Voici une fonction simple et efficace pour recréer le code HTML.

htmlDecode = function(input){
  var e = document.createElement('div');
  e.innerHTML = input;
  return e.childNodes[0].nodeValue;
}

 

ReplaceAll

La methode string.replace(regexp/substr,newstring) peut être utilisée avec une chaine de caractère ou une expression régulière. Si c'est avec une chaine, seule la première occurrence sera remplacée. Pour faire un "replacer tout", il faut passer par une expression régulière.

var test = "son papa aime son papa";
test = test.replace(/papa/g, "maman"); // Changer le g en i pour être "case insensitive"
//ou encore
test = test.replace(new RegEx("son", g), "sa");

 

Vrac

On supprime une propriété/méthode d'un objet avec delete:

var test = {};
test.uneprop = 'ma propriété';
delete test.uneprop;

 

function functionname() {}
//est un raccourci pour:
var functionname = function functionname() {};

 

Firebug

Vous pouvez connaitre le temps d'exécution d'un bout de code en utilisant console.time()

console.time( 'Depart' );
/* Code */
console.timeEnd( 'Fin' );

 

jQuery

Vous pouvez accéder à tous les éléments du DOM  (mais ça reste à éviter) avec

$('*')

Connaitre les événements attachés à un élément

jQuery sauvegarde toutes actions/événements attachés à un élément grâce à la méthode data() . Il est très pratique pour debugger d'acceder à cette liste dans la console :

console.log( $('element').data('events') );

Commentaires

Poster un nouveau commentaire

Le contenu de ce champ sera maintenu privé et ne sera pas affiché publiquement. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
  • Les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement.
  • Tags HTML autorisés : <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • Les lignes et les paragraphes vont à la ligne automatiquement.

Plus d'informations sur les options de formatage

Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.