Visitez mon nouveau site web » mongo.ca
Aucun message portant le libellé Programmation. Afficher tous les messages
Aucun message portant le libellé Programmation. Afficher tous les messages

jeudi 17 décembre 2009

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
}

});

}

});

});

dimanche 6 décembre 2009

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.
Visitez mon nouveau site web » mongo.ca