Javascript

<google uid="C08" position="left"></google>

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).

trim

Trimmer plus pour gagner plus comme dirait un prez :

En membre : <source lang="javascript"> String.prototype.trim = function () {

return this.replace(/^\s+|\s+$/g,);

}

var sTrimmed= sPasTrimmed.trim(); </source>

En fonction :

<source lang="javascript"> function trim(sPasTrimmed) { return sPasTrimmed.replace(/^\s+|\s+$/g,); }

var sTrimmed= trim(sPasTrimmed); </source>

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

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 : <source lang="javascript">

recStore= [];
Ext.each( aToursDePoitrineByPrenom, function(rec) {
       recStore.push([rec.tdp, rec.prenom]);
});

console.info(recStore);

</source>

[ ['95d', "Anna"], ['85a', "Jane"], ['90c', "pamela"] ]

Exemple de combobox : <source lang="javascript"> var elG= new Ext.form.ComboBox({ fieldLabel:'Liste ', store: recStore }); form.add(elG); ... </source>

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 : <source lang="javascript"> cLast= chaine.substring( chaine.length-1, chaine.length ); // ou : cLast= chaine.substring( -1 ); </source>

replace()

.replace() pour enlever les espaces d'un champs : <source lang="javascript">

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

</source> Pour les newb des regexp :

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

simple login/pass checker

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

<google uid="C02" position="left"></google>

La fonction dans votre entête HTML(<head/>) <source lang="javascript"> function checkAlphanum(oInput) {

   var val = oInput.value;

   if ( /[^A-Za-z0-9]/.test(val) ) {
       alert('incorrect :-(');
   }

} </source> Puis dans votre formulaire : <source lang="html4strict"> <input type="text" name="login" onKeyUp="javascript:checkAlphanum(this);"> </source>

var maFonction= function( ){ } vs function maFonction( ){ }

Alors kiki gagne entre <source lang="javascript">

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

</source> et <source lang="javascript">

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

</source>

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

<source lang="javascript"> // Erreur maFonction1();

var maFonction1= function(toto) { ... } </source>

<source lang="javascript">

// Tout baigne maFonction2();

function maFonction2(toto) { ... } </source>

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

Firebug

log compatible IE

<source lang="javascript"> if('undefined' != typeof(console) )

 console.log('karmakoma');

</source>

Minify / minifier

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

undefined vs null

Fichier:Mallard duck close-up.jpg

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 : <source lang="javascript"> 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 </source>

redirection

<source lang="javascript"> window.location.replace('http://bricosoft.com/javascript'); </source>

error handling

N'oubliez pas : <source lang="javascript"> try {

...

} catch(e) {

console.info(e.name + ' : ' + e.message);

} </source>

Liens externes

• http://www.ecma-international.org/publications/files/ecma-st/ECMA-262.pdf in "11.9.3 The Abstract Equality Comparison Algorithm"

Vérifier l'existence d'un objet

<source lang="javascript"> if( typeof(totoche) !== 'undefined' && totoche != null) { // totoche existe } </source>

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.

in_array()

ou Odile : <source lang="javascript"> 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");

} </source>

Liens

• http://phpjs.org/functions/array_flip:317 php.js un framework javascript avec les fonctions PHP