Javascript

De Bricosoft.

Javascript... En 2000 on le pensait perdu, mais depuis 2007 il prends de plus en plus de place, faisant ramer toujours plus notre navigateur (mais moins que flash quand même).

Sommaire

[modifier] trim

Trimmer plus pour gagner plus comme dirait un prez :

En membre : 

String.prototype.trim = function () {
 return this.replace(/^\s+|\s+$/g,'');
} 
 
var sTrimmed= sPasTrimmed.trim();

En fonction : 

function trim(sPasTrimmed) {
	return sPasTrimmed.replace(/^\s+|\s+$/g,'');
}
 
var sTrimmed= trim(sPasTrimmed);

La plupart des frameworks js l'ont déjà, ex: Ext.util.Format.trim()

[modifier] push()

"Tu push et ça mush, qu'elle est dush cette mush".

push() ajoute des éléments à un tableau. Par exemple pour construire un Ext.data.Store : 

 recStore= [];
 Ext.each( aToursDePoitrineByPrenom, function(rec) {
        recStore.push([rec.tdp, rec.prenom]);
 });
 
 console.info(recStore);
[ ['95d', "Anna"], ['85a', "Jane"], ['90c', "pamela"] ]

Exemple de combobox : 

var elG= new Ext.form.ComboBox({
		fieldLabel:'Liste ',
		store: recStore
});
form.add(elG);
...

[modifier] substring()

Non ce n'est pas un sous-vêtement sous-marin mais c'est pour extraire des bouts de chaîne.

Dernier caractère d'une chaine : 

cLast= chaine.substring( chaine.length-1, chaine.length );
// ou :
cLast= chaine.substring( -1 );

[modifier] replace()

.replace() pour enlever les espaces d'un champs : 

   var oTelNum= document.getElementById('numero_de_telephone');
   oTelNum.value= theField.value.replace(/\s+/, '');

Pour les newb des regexp :

  • le caractere magique regex \s capture un espace
  • la regexp \s+ capture 1 ou plein plein plein d'espaces !

[modifier] simple login/pass checker

Même que le FBI l'utilise ... quoi je pipote ?

La fonction dans votre entête HTML(<head/>) 

function checkAlphanum(oInput) {   
 
    var val = oInput.value;
 
    if ( /[^A-Za-z0-9]/.test(val) ) {
        alert('incorrect :-(');
    }
}

Puis dans votre formulaire : 

<input type="text" name="login" onKeyUp="javascript:checkAlphanum(this);">

[modifier] var maFonction= function( ){ } vs function maFonction( ){ }

Alors kiki gagne entre 

 var maFonction1= function( toto ){
   return toto*2;
 }

et 

 function maFonction2( toto ){
   return toto*2;
 }

maFonction1 sera défini à l’exécution et maFonction2 à l'analyse du bloc. 

// Erreur
maFonction1();
 
var maFonction1= function(toto) {
...
}


// Tout baigne
maFonction2();
 
function maFonction2(toto) {
...
}

var permet aussi de définir un scope d'utilisation de la fonction. source : [1]

[modifier] Firebug

[modifier] log compatible IE

if('undefined' != typeof(console) ) 
  console.log('karmakoma');

[modifier] Minify / minifier

[modifier] Avec Yahoo UI Compressor

YUI Compressor permet de minifier n'importe quel fichier javascript en ligne de commande :

  • Installation : 
cd ~/bin/
wget http://yuilibrary.com/downloads/yuicompressor/yuicompressor-2.4.2.zip
unzip yuicompressor-2.4.2.zip

mv yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar ./
rm -rf yuicompressor-2.4.2/

echo "alias minify='java -jar $HOME/bin/yuicompressor-2.4.2.jar'" >> ~/.bash_aliases
source ~/.bash_aliases
  • Utilisation : 
minify gros.js -o gros-min.js

[modifier] undefined vs null

Coin !
  • null est un objet, undefined non
  • les variables sont par defaut undefined : une variable "booléenne" peut valoir : true, false, null, undefined
  • prendre en compte l'utilisation possible de ===, !== aulieu de ==, != pour les tests
    • === identité, ce doit être le même type de chaque coté
    • == égalité, quelque soit le type

Etude de cas : 

var a= 0; 
var a= ''; /* ou chaine vide */
var a= null; /*  ou l'objet null */
var a; /* ou indéfini */
var b= false;
 
a == b est true
a === b est false

[modifier] redirection

window.location.replace('http://bricosoft.com/javascript');

[modifier] error handling

N'oubliez pas : 

try {
 
 ...
 
}
catch(e) {
 console.info(e.name + ' : ' + e.message);
}

[modifier] Liens externes

[modifier] Vérifier l'existence d'un objet

if( typeof(totoche) !== 'undefined' && totoche != null) {
// totoche existe
}

[modifier] PHP functions en js

DRY ici veut dire Do Repeat Yourself, réinvente la roue tous les jours mon gars.

On garde quand même la notation CamelCase, faut pas trop déconner non plus.

[modifier] in_array()

ou Odile : 

Array.prototype.inArray = function(value) {
	var i;
	for (i = 0; i < this.length; i++) {
		if (this[i] == value) {
			return true;
		}
	}
	return false;
};
 
var aCastorsJuniors= ["Riri","Fifi","Loulou"];
 
if( aCastorsJuniors.inArray("GODZILLA") ) {
   console.info("GODZILLA fait parti des Castors Juniors");
} else {
   console.info("GODZILLA n'est pas un Castor Junior");
}

[modifier] Liens

Récupérée de « http://www.bricosoft.com/Javascript »
Plus