Google Doodle (moving/bouncing circles logo) source code

 

Here is the source code for the Google logo. Originally it uses google object for event listening and browser detection, switched to jQuery. You can find a working example here : http://quebe.ca/doodle.html

Javascript : Ajouter des fonctions utiles à l'objet String

Heureusement Javascript est un langage assez facile à personnaliser. Je vous propose donc quelques ajouts à l'objet String qui vous permettront d'en faire plus avec moins de code(On aime ça!).

L'objet string représente en fait une chaîne de caractères.

var text = "Bonjour"; //la variable text est un objet string

var chiffre = 0; // la variable chiffre n'est pas un objet String

//Voici comment la convertir en objet string
chiffre = chiffre + ''; //si la variable a été définie plus haut
var chiffre = 0+''; //ou encore lorsqu'on la définie

//Lorsque vous obtenez la valeur d'un élément input, il s'agit d'un objet String
var valeur = document.getElementById("id_du_input").value; //la variable valeur est maintenant un objet String

//Vous pouvez aussi directement créer un objet String
var texte = new String("Bonjour");

L'objet string comporte plusieurs méthodes et propriétés, voici les plus courantes (Pour une liste complète visitez MDC Javascript 1.5 reference ) :

//On définie une variable pour l'exemple
var texte = "Bonjour";

/*********************
  Propriétés
**********************/

////  length
// Retourne le nombre de caractères d'une chaîne
var longueur = texte.length; // Dans l'exemple, longueur = 7


/*********************
  Méthodes
**********************/

////  toLowerCase()
// Retourne le texte en lettres minuscules
var minuscules = texte.toLowerCase("bonjour"); // minuscules = "bonjour"

////  toUpperCase()
// Retourne le texte en lettres majuscules
var majuscules = texte.toUpperCase("bonjour"); //  majuscules = "BONJOUR"

////  substr(debut [,longueur])
//Retourne une partie d'une chaîne
/ *le premier caractère est à la position 0*/
var soustexte = texte.substr(3); // Réduit la chaîne à partir de la positon 3. Dans l'exemple, soustexte = "jour"
var soustexte = texte.substr(1,3); // Réduit la chaîne à  3 caractères à partir de la position 1. soustexte = "onj"

////  indexOf(texte)
//Retourne la position d'un ou plusieurs caractères dans une chaîne
//La fonction retourne la position du premier caractère trouvé
//Retourne -1 si les caractères ne sont pas trouvés
var position = texte.indexOf("o"); // position = 1
var position = texte.indexOf("j"); // position = 3
var position = texte.indexOf("ur"); // position = 5
var position = texte.indexOf("z"); // position = -1

////  lastIndexOf(texte)
//Retourne la position d'un ou plusieurs caractères dans une chaîne
//La fonction retourne la position du premier caractère trouvé
//Retourne -1 si les caractères ne sont pas trouvés
var position = texte.lastIndexOf("o"); //  position = 4

////  split(separateur)
//Retourne un tableau contenant la chaîne séparé selon le séparateur
//Si le séparateur n'est pas trouvé on retourne un tableau avec comme seul élément la chaîne.
var phrase = "Je m'en suis rappelé hier comme si ça me serait arrivé demain."; //Jean Perron
var tableau = phrase.split(" "); // Dans l'exemple, tableau = ["Je","m'en","suis","rappelé","hier","comme","si","ça","me","serait","arrivé","demain."];

Bon! maintenant on peut commencer à ajouter des fonctions (méthodes) à l'objet String.

//trim()
//retourne la chaîne sans les espaces au début et à la fin.
String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/g, "");
};


//noaccent()
//retourne la chaîne sans les accents (Vous pouvez en ajouter)
String.prototype.noaccent = function() {
  return this.replace(/[àâä]/gi,"a").replace(/[éèêë]/gi,"e").replace(/[îï]/gi,"i").replace(/[ôö]/gi,"o").replace(/[ùûü]/gi,"u");
};


//ucfirst()
//retourne la chaîne avec la première lettre en majuscule
String.prototype.ucfirst = function() {
  return (this.length == 1)? this.toUpperCase():(this.substr(0,1).toUpperCase()+this.substr(1));
};


//ucwords()
//retourne la chaîne avec la première lettre de chaque mot en majuscule
String.prototype.ucwords = function() {
  var words = this.split(" ");
  var uwords = [];
  for(var i = 0; i < words.length; i++) {
    uwords.push( ((words[i]+"").length == 1) ? (words[i]+"").toUpperCase():((words[i]+"").substr(0,1).toUpperCase()+(words[i]+"").substr(1)) );
  }
  return uwords.join(" "); //transforme un tableau en une chaîne
};

Plus à venir...

Créer un nouveau sélecteur jQuery pour rechercher dans le contenu HTML avec Javascript

Voici comment créer un nouveau sélecteur(selector) dans jQuery qui vous permettra de sélectionner des éléments qui contiennent le texte recherché. I s'agit d'un sélecteur semblable à :contains() mais il enlève les accents et ne tient pas compte de la casse.

//Premièrement on ajoute une fonction à l'objet String pour pouvoir enlever les accents

String.prototype.noaccent = function() {
  return this.replace(/[àâä]/gi,"a").replace(/[éèêë]/gi,"e").replace(/[îï]/gi,"i").replace(/[ôö]/gi,"o").replace(/[ùûü]/gi,"u");
};


//Ensuite on ajoute notre nouveau sélecteur :search() à l'objet jQuery
jQuery.extend(jQuery.expr[':'], {

 'search' : function(a,i,m) {
  var content = ((a.textContent || a.innerText || '') +'').noaccent();
  var words = m[3].noaccent().split(" ");
  for(var j = 0; j < words.length; j++) {
   if(content.toLowerCase().indexOf( words[j].toLowerCase() ) >= 0) {
                            return true;
                        }
  }
  return false;
 }

});

Voilà c'est fait! Vous pouvez maintenant l'utiliser de la façon suivante :

//Cet exemple ajoute la classe "found" à tous les éléments li qui contiennent le texte montreal, montréal, Montreal ou Montréal

$("ul li:search('montreal')").addClass("found");

Un autre exemple complet avec le HTML qui permet d'afficher seulement les éléments qui contienne le texte saisi dans un textBox.

Le HTML :

  
Abercorn
  
Acton Vale
  
Adstock
  
Aguanish
  
Akulivik
  
Akwesasne
  
Albanel
  
Albertville
  
Alleyn-et-Cawood
  
Alma
  
Amherst
  
Amos
  
Amqui
  
L'Ancienne-Lorette
  
Ange-Gardien
  
L'Ange-Gardien (La Côte-de-Beaupré)
  
L'Ange-Gardien (Les Collines-de-l'Outaouais)
  
Angliers
  
L'Anse-Saint-Jean
  
Armagh
  
Arundel
  
Asbestos
  
L'Ascension

Et maintenant le javascript qui fait fonctionner le tout :

$(function() {

  //On ajoute un événement au TextBox lorsqu'une touche est pressé

  $("input.query").keyup(function() {

    //On stocke le texte saisi dans une variable
    var query = jQuery.trim($(this).val());

    if(!query.length) {
      $("ul.list li").show(); // S'il n'y a pas de texte saisie (ou seulement des espaces) on affiche tous les éléments li
    } else {

      //Sinon on fait une boucle qui passe à travers tous les éléments li
      $("ul.list li").each(function() {

        if( $(this).is(":search('"+query+"')") ) {
          $(this).show(); //Si l'élément contient le texte on l'affiche
        } else {
          $(this).hide(); //On cache tous les autres
        }

      });

    }

  });

});

Unix Timestamp en javascript - Équivalent de time() en PHP

Voici comment obtenir un timestamp en javascript comme la fonction time() en php.

/////////////////////////////////////////////
//Obtenir le timestamp actuel
/////////////////////////////////////////////

var timestamp = Math.round((new Date()).getTime()/1000);

/***************************
Note :
La fonction getTime() en javascript retourne un timestamp en millisecondes, donc on divise par 1000 pour obtenir un timestamp en secondes
***************************/


/////////////////////////////////////////////
//Obtenir le timestamp du 1er janvier 2009
/////////////////////////////////////////////

var timestamp = Math.round((new Date(2009,0,1)).getTime()/1000);

/***************************
Note :
Les paramètres de Date sont :

  Date(année,mois,jour)
  Date(année,mois,jour,heures,minutes,secondes)

Les mois commence à 0 donc le mois de janvier est 0 et non 1 et le mois de décembre est 11
***************************/

Portée des variables en Javascript (Variable scope)

Cacher des variables

En javascript toutes les variables déclarées dans une fonction ne sont visibles que dans cette fonction.

function maFonction() {
  var variableCachee = "une variable cachée";
}

alert(variableCachee); // Retourne une erreur car la variable est inaccessible à l'extérieur de la fonction.

/////////////////
//Autre exemple//
/////////////////

// Variable globale
var x = 0;

(function() {

  // Variable privée
  var x = 1;
  alert(x); // Renvoi 1

})();

alert(x); // Renvoie 0

En utilisant la technique de la fonction sans nom il est possible de "cacher" des variables pour qu'elles soient invisibles dans le reste du code javascript.

(function() {

  // Variable "cachées"
  var varChache1 = 1;
  var varChache2 = 1;
  var varChache3 = 1;
  

})();

alert(varChache1); // retourne une erreur car la variable est seulement accessible à l'intérieur de la fonction sans nom

* La fonction sans nom est immédiatement exécutée grâce au 2 parenthèses à la fin "();".

 

La variable this

En javascript la variable this est relative à chaque fonction.

function maFonction() {
  
  this.variable = "Ceci est une variable";

  function autreFonction() {

    alert(this.variable); //Retourne une erreur car this est maintenant relatif à autreFonction

  }
  

}

Une bonne pratique pour avoir accès au this d'une fonction parente est de l'attribuée à une autre variable.

function maFonction() {

  //On attribue la variable this à une autre variable nommé self
  var self = this;
  
  self.variable = "Ceci est une variable";

  function autreFonction() {

    alert(self.variable); //Retourne "Ceci est une variable"

  }
  

}

Si vous utilisez jQuery, cette technique est souvent utile car la variable this fait souvent référence à l'élément en cours.

$("#bouton").click(function() {

  //On attribue l'élément en cours à une variable pour pouvoir l'utiliser dans les fonctions suivantes
  var bouton = $(this);
  
  bouton.val("Chargement...");

  //On fait par exemple une requète AJAX
  $.get("/contact.php",function(data) {

    //La variable «bouton», déclarée plus haut, nous permet d'accéder à l'élément «bouton» même à l'intérieur d'une autre fonction.
    bouton.val("Terminé");

  });
  

}

Architecture Javascript pour entreprise avec Google Closure

Dernièrement j'ai fait beaucoup de recherche sur la façon de structurer son code javascript dans de gros projets web. Il n'y a pas vraiment d'informations sur le sujet car l'utilisation poussée de javascript est relativement récente. Mais comment doit-on organiser son code lorsqu'on bâtit une application web qui utilise AJAX et Javascript de façon intensive comme le fait Facebook ou GMail? Google offre depuis peu une solution à ce problème, Google Closure.

Ce projet vient en 3 morceaux:

Closure Compiler : Un compilateur javascript qui rassemble votre code en un seul fichier et supprime les commentaires, les espaces ainsi que les fonctions/variables inutilisées. Vous pouvez compiler votre code à l'aide de l'outil en ligne.

Closure Library : Une librairie javascript qui offre une grande quantité de fonctions utiles mais aussi de modules pour votre interface utilisateur (Bouton, Rich text editor, Tree view, etc...). Cette libraire est particulièrement utile car elle encourage les bonnes pratiques de programmation pour garantir une structure intelligente et la possibilité de réutiliser vos modules. Cette librairie est utilisée dans de gros projets web comme Google GMail.

Closure Templates : Un système de templates pour Javascript qui utilise un langage simple et efficace.

Je n'ai pas encore utilisé activement Google Closure mais je prévoit en faire l'essai pour la nouvelle version de Écoutez.ca .

À suivre...

Objets et Classes Javascript pour débutants / Programmation orientée objet en Javascript (Public/Private/Static)

Voici une traduction d'un article fort intéressant publié sur le blog de Komodo Média.

Cet article prend pour acquis que vous connaissez les bases de javascript et savez ce qu'est la programmation orientée objet.

Principe de base des classes en Javascript

Voici comment déclarer une classe et création d'une instance de celle-ci :

//Déclaration de la classe
function MaClasse() {
//...
}

//Création d'une instance de la classe
var classe = new MaClasse();

//Création d'une deuxième instance de la classe
var classe2 = new MaClasse();

//...

Variables(propriétés) et Fonctions(méthodes) publiques

Une variable ou une fonction publique est accessible à l'intérieur d'une classe et lorsque vous créez une instance de votre classe.

function MaClasse() {
//...
}

//Déclaration d'une variable publique
MaClasse.prototype.variablePublique = "Ceci est une variable publique";


//Déclaration d'une fonction publique
MaClasse.prototype.fonctionPublique = function() {
alert(this.variablePublique);
};

//Création d'une instance de la classe
var classe = new MaClasse();

//Utilisation d'une fonction publique
classe.fonctionPublique(); //Renvoie le texte contenu dans classe.variablePublique

//Vous pouvez aussi modifier la valeur d'une variable publique
classe.variablePublique = "Nouveau message";

classe.fonctionPublique(); //Renvoie "Nouveau message"

Variables(propriétés) et Fonctions(méthodes) privées

Les variables et fonctions privées sont accessibles seulement à l'intérieur de la classe et ne sont pas accessibles par l'instance de votre classe.

//Déclaration de la classe
function MaClasse() {

 //on stocke la référence à this dans une variable.
 var self = this;

 //Déclaration d'une variable privée
 var variablePrivee = "Ceci est une variable privée";

 //Déclaration d'une variable publique
 this.variablePublique = "Ceci est une variable publique";

 //Déclaration d'une fonction privée
 var fonctionPrivee = function() {

   alert(self.variablePrivee); //Renvoie la valeur de la variable privée

 };

}

//Création d'une instance de la classe
var classe = new MaClasse();

classe.fonctionPrivee(); //retourne une erreur car la fonction est privée

alert(classe.variablePrivee); //retourne une ereur car la variable est privée

alert(classe.variablePublique); //renvoie "Ceci est une variable publique"

Variables(propriétés) et Fonctions(méthodes) statiques

Les variables et fonctions statiques n'ont pas accès au variables/fonctions privées et publiques.

//Déclaration de la classe
function MaClasse() {

 //...

}

MaClasse.variableStatique = "Ceci est une variable statique";


MaClasse.fonctionStatique = function () {
  
  alert(MaClasse.variableStatique);

};

//Création d'une instance de la classe
var classe = new MaClasse();

classe.fonctionStatique(); //retourne une erreur car la fonction est statique est invisible par une instance de la classe

//Une fonction statique est accessible directement à partir de la classe
MaClasse.fonctionStatique(); // Renvoie "Ceci est une variable statique"; 

Variables(propriétés) et Fonctions(méthodes) privilégiées

Les variables et fonctions privilégiées ont accès aux variables/fonctions privées et publiques.

//Déclaration de la classe
function MaClasse() {

 //on stocke la référence à this dans une variable.
 var self = this;

 //Déclaration d'une variable privée
 var variablePrivee = "Ceci est une variable privée";

 //Déclaration d'une fonction privée
 this.fonctionPrivilegiee = function() {

   alert(self.variablePrivee); //Renvoie la valeur de la variable privée

 };

}

//Création d'une instance de la classe
var classe = new MaClasse();

classe.fonctionPrivilegiee(); //Renvoie la valeur de la variable privée

Voilà, vous savez maintenant comment utiliser tout le pouvoir de la programmation orientée objet avec Javascript.

Ajax Dialog box avec jQuery et jQuery UI

Voici comment créer une Dialog Box dont le contenu est chargé par Ajax avec jQuery.

Vous avez besoin de jQuery et de jQuery UI

//Si vous n'avez pas déjà d'élément pour contenir le DialogBox
$("
Chargement...
").dialog().load("/adresse/dufichier.html");

//Créé une DialogBox dans un élément avec l'id "dialog"
$("#dialog").dialog().load("/adresse/dufichier.html");

Vous pouvez aussi inclure les librairies jQuery et JQuery UI sans les télécharger en utilisant le CDN de Google :

Cette technique est pratique car si un visiteur à déjà le fichier javascript en cache (parce qu'il a visité un autre site qui utilisait le CDN Google) il n'aura pas besoin de le télécharger à nouveau. Votre site se chargera donc plus rapidement.