FAQ JavaScriptConsultez toutes les FAQ

Tous les navigateurs récents possèdent des outils de développement intégrés comprenant une console JavaScript. Généralement, la touche F12 du clavier vous permet d'y accéder à partir d'une page Web. Il existe également d'autres outils d'aide au développement sous la forme d'extensions, dont le populaire Firebug pour Firefox. Cette console permet notamment un débogage rapide en capturant les erreurs de script et en indiquant la nature de l'erreur et l'emplacement de la ligne concernée dans le script.

Vous pouvez également vous en servir pour y écrire des messages (logs) vous aidant au débogage. Pour tester la valeur d'une variable dans votre script, plutôt que d'utiliser alert(maVariable), vous pouvez écrire console.log(maVariable). La valeur apparaîtra en console, souvent sous une forme plus lisible et moins gênante qu'une boîte d'alerte.

Néanmoins, ces outils de développement permettent d'aller beaucoup plus loin par exemple en exécutant le code en mode « pas à pas ». Le fonctionnement complet de ces outils de développement dépasse largement le cadre d'une FAQ, renseignez-vous sur le site de votre navigateur favori pour en savoir plus.

En JavaScript, le "+" est le symbole de la concaténation. Pour additionner il faut utiliser parseInt() ou bienparseFloat().

Exemple :

var variable1 = document.getElementById("valeur1").value; // Par exemple '12'
var variable2 = document.getElementById("valeur2").value; // Par exemple '20'
 
var total_concatenation = variable1 + variable2;
var total_addition = parseFloat(variable1) + parseFloat(variable2);
 
alert("Concaténation : " + total_concatenation); // Résultat : la chaîne '1220'
alert("Addition : " + total_addition); // Résultat : l'entier 32

La méthode parseInt() accepte un second paramètre qui détermine la base. Celle utilisée par défaut dépend des premiers caractères du premier paramètre.

Il existe d'autres méthodes pour transtyper une chaîne de caractères en numérique :

• en utilisant l'opérateur + en préfixe ;
• en multipliant par 1 ;
• en utilisant le constructeur Number comme une fonction.

Exemples :

var variable1 = document.getElementById("valeur1").value; // Par exemple '12'
var nb1 = +variable1;
var nb2 = variable1 * 1;
var nb3 = Number(variable1);

Pour exécuter une action après un délai, on utilise la fonction setTimeout() qui prend en premier paramètre la fonction a éxécuter et le délai en second paramètre.
Par exemple, vous voulez faire revenir un internaute sur la page précédente au bout de deux secondes :

setTimeout(function(){history.back()},2000);

Il est également possible de passer des arguments à la fonction appelée, en ajoutant des arguments à la fonction setTimeout :

setTimeout(alert, 2000, 'gnark');

Ce code permet d'afficher (sous Firefox et Opéra) une alerte avec le texte 'gnark' au bout de deux secondes.

Tout d'abord, le problème ne se pose pas qu'avec le PHP, il se pose avec tous les autres langages de requête mais le principe reste le même. Il faut aussi savoir que cela ne marche que dans un sens. On ne peut pas exécuter du code PHP à partir d'un script JavaScript. Pour exécuter du code PHP, il faut repartir sur le serveur.

Rappel : le PHP s'exécute coté serveur tandis que le JavaScript s'exécute coté client.
Par contre, on peut utiliser des variables PHP dans du code JavaScript.

<?php $sql = "SELECT texte FROM Table WHERE idTable = 1";
    $resultat = execute_sql($sql);
    $champ = mysql_fetch_array($result);
    print '&lt;script type="text/javascript" language="javascript">';
    print "alert('$champ[texte]');";
    print '&lt;/script>' ;
?>

Dans cet exemple, on exécute une requête puis on fait afficher le résultat dans une fenêtre de typealert.
Il faut faire attention soit de bien intervertir les ' et " soit de les echapper en utilisant \".
Par contre, si dans cet exemple nous avions interverti ' et ", nous aurions obtenu "$champ[texte]" dans la fenêtre alert() !

Tout d'abord il faut créer un document que l'on appellera mon_fichier_script.js dans lequel on écrira le code que l'on souhaite intégrer, sans les balises <script></script>.
Ensuite dans la page Web il suffira d'intégrer :

<script type="text/javascript" src="mon_fichier_script.js"></script>

document.write("mon texte");

eval("ma formule");

Lorsque vous écrivez votre code au moyen de document.write(), il arrive bien souvent que le texte contienne des caractères réservés au langage JavaScript. Pour s'assurer que vous avez bien placé tous les caractères d'échappement, il suffit de tester au moyen d'un alert :

alert('\<frame name=\"principal\" src=\"\/repertoire\/fichier.htm\"\>');

Lorsque le code retourné par la boîte de message est correct, il vous suffit de remplacer alert() par document.write() :

document.write('\<frame name=\"principal\" src=\"\/repertoire\/fichier.htm\"\>');

C'est tout simplement impossible.
Le langage JavaScript s'exécute côté client, donc cela poserait d'énormes problèmes de sécurité.

Notons cependant l'existence des ActiveX du côté d'IE. Mais leur activation crée une faille de sécurité à ne pas négliger.

Cette technique est parfois appelée « pass-thru » (passage à travers) :

var val=8;
switch (val){
     case 1:
     case 2:
          alert("1 ou 2");
          break;
     case 3:
     case 4:
          alert("3 ou 4");
          break;
     default :
          alert("default");
          break;
}

Dès que la valeur correspond à un cas prévu, le code du cas correspondant et les codes des cas suivants s'exécutent les uns après les autres jusqu'au prochain break qui force l'arrêt de l'exécution.

var MonObjet = document.getElementById('Obj');
with (MonObjet){
	className = 'blah';
	setAttribute( "alt", "new text" );
}

L'utilisation de l'instruction with est très fortement déconseillée (voir l'avertissement sur le Mozilla Developer Network).
Elle est d'ailleurs interdite en mode strict (strict mode) et peut être bénéfiquement remplacée par l'utilisation d'une variable.

Les blocs try/catch permettent d'éviter certaines exceptions déclenchées par JavaScript à l'exécution du code. Par exemple :

try {
     i = variable_non_declaree * 6 ;
}
catch ( e ) {
     alert ( e );
}

Il existe également la clause throw qui vous permet de créer un message d'erreur personnalisé :

try {
     i = 18 / 0;
     if(!isFinite(i)) throw "La division par zéro donne l'infini.";
}
catch ( e ) {
     alert ( e );
}

Voici une méthode permettant de créer dynamiquement d'autres fonctions :

function creationFonction(param1, param2, CorpsFonction)
{
   return new Function(param1, param2 ,CorpsFonction);
}
 
var maFonction = creationFonction("x", "y", "return x+y");
alert(maFonction(1,2));

Il est aussi possible d'utiliser la méthode apply() :

function buildFunction(){
   return Function.apply(this,arguments);
}
 
var newFunction = buildFunction("x", "y", "return x+y");
alert(newFunction(1,2));

Ne pas confondre les termes Function et function qui sont deux entités différentes.

La question est sans doute surprenante car en JavaScript, la déclaration des variables est facultative, mais avec les exemples ci-dessous, on va comprendre l'importance de toujours déclarer ses variables qu'elles soient locales ou globales… surtout sous IE.

Dans les trois exemples, on prend le cas d'une page ayant un objet (ici un input) ayant pour id="Test1". Puis on cherche à afficher la valeur de cet input lors du chargement de la page.
Il faut exécuter ces codes sous IE pour bien comprendre le problème.

1er exemple :
On déclare une variable locale Test1 (une variable qui a le même nom que l'id de l'input) dans une fonction testvalue() :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<script type="text/javascript">
function testValue(){
   var Test1;
   Test1 = parseInt(document.getElementById("Test1").value);
   alert(Test1); //Affiche 4
}
</script>
</head>
<body onload="testValue()">
<div>
   <input id="Test1" value="4" type="text" />
</div>
</body>
</html>

Pas de problème, l' alert() affiche bien la valeur de l'input, c'est-à-dire 4.

2e exemple :
La variable Test1 n'est pas déclarée avec le mot-clef var :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<script type="text/javascript">
function testValue(){
   Test1 = parseInt(document.getElementById("Test1").value);
   alert(Test1); // ça plante. :(
}
</script>
</head>
<body onload="testValue()">
<div>
   <input id="Test1" value="4" type="text" />
</div>
</body>
</html>

Là, IE affiche un message d'erreur : Cet objet ne gère pas cette propriété ou cette méthode

Pour les néophytes, le message n'est pas très clair… L'exemple 3 va nous aider à comprendre.

3e exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<script type="text/javascript">
<!--
function testValue(){
   alert(Test1.value);
}
//-->
</script>
</head>
<body onload="testValue()">
<div>
   <input id="Test1" value="4" type="text" />
</div>
</body>
</html>

Le code contenu dans alert() est :

Test1.value

Et la boîte de dialogue affiche bien la valeur de l'input, c'est-à-dire 4.

En fait sous IE, vous pouvez accéder directement à un objet en tapant son id (sous Firefox, vous devez passer par undocument.getElementById()) donc dans l'exemple 2 quand vous écrivez :

Test1 = parseInt(document.getElementById("Test1").value);

Test1 fait référence à l'objet ayant pour idTest1 contenu dans la page, donc vous essayez d'affecter un entier à un objet (ou dit autrement vous redéfinissez votre objet input comme entier), ce qui explique le message d'erreur de IE.

Certains attributs de balises HTML attendent comme valeur une URL, par exemple l'attribut href d'une balise <a> ou action pour une balise <form>.
Il peut aussi arriver que l'on souhaite contourner les actions par défaut de ces attributs, par exemple en remplaçant un lien par une fonction JavaScript.
Une « ancienne » façon de coder (que l'on retrouve encore trop souvent) consiste à remplacer l'URL attendue par une pseudo-url :

<a href="javascript:ma_fonction()">Exécuter ma fonction</a>

Cette notation permet d'indiquer au navigateur qu'il faut considérer le contenu de l'attribut comme du code JavaScript et l'exécuter.

Cette façon de faire présente de nombreux inconvénients et aucun avantage.

• Elle ne respecte pas l'aspect sémantique du HTML.
• Elle ne permet pas de séparer les couches (HTML : contenu ; CSS : mise en forme ; JavaScript : comportement).
• Elle empêche de prévoir des solutions alternatives pour les personnes ayant désactivé JavaScript.
• Beaucoup de gens ignorent que si la fonction JavaScript renvoie un résultat, celui-ci sera affiché sur la page.
• Elle sème la confusion chez les débutants qui considèrent que javascript: doit être présent partout, y compris pour les événements (onclick, onmouseover, onmouseout etc.) ce qui est une erreur.
• Les moteurs de recherche n'aiment pas du tout les liens… sans lien.
• Vous perdez la référence au mot-clé this. Puisque javascript: est considéré comme une URL, son contexte n'est plus celui du lien mais celui de l'objet window.

Pour toutes ces raisons, l'utilisation de ce genre des pseudos-url est considérée comme obsolète et doit être évitée tant que possible.
Il est préférable de passer par les événements, par exemple :

window.onload = function(){
   document.getElementById('le_lien').onclick = function(){
      ma_fonction();
      return false;
   }
}

Et dans la page HTML :

<a id="le_lien" href="url_par_defaut">Exécuter ma fonction</a>

Dans cet exemple, au clic sur le lien, l'événement click sera déclenché et lancera la fonction ma_fonction puis le return false inhibera le comportement par défaut (accéder à l'adresse du href), cependant, si JavaScript est désactivé, l'utilisateur sera dirigé vers une page alternative.
Il peut aussi arriver que l'on veuille absolument avoir l'appel à la fonction dans le lien, dans ce cas, il suffira de faire :

<a href="url_par_defaut" onclick="ma_fonction(); return false">Exécuter ma fonction</a>

Une autre utilisation que l'on rencontre (malheureusement) trop souvent est d'utiliser javascript: à l'intérieur d'un attribut d'événement :

<a href="url_par_defaut" onclick="javascript:ma_fonction(); return false">Exécuter ma fonction</a>

Cette notation dénote une méconnaissance du langage.

• Les attributs d'événement attendent comme valeur du code JavaScript à interpréter, il est donc inutile de le préciser !
• Qui plus est, javascript n'est pas une instruction JavaScript et devrait renvoyer une erreur !
• Heureusement, les deux-points (:) permettent de l'interpréter comme un label, mais cela n'a absolument aucune utilité ni aucun intérêt.

En résumé, l'utilisation des pseudos-url est souvent le signe d'un codage maladroit et doit être proscrit au maximum. Quant aux label, ils ne servent à rien dans ce contexte.

En revanche, il est à noter que l'utilisation dans la barre d'adresse est un bon moyen de tracer ses variables ou de voir le contenu de ses fonctions. Par exemple, si vous avez une fonction maFonction ou une variable maVariable dans votre script, testez javascript:alert(maFonction) ou javascript:alert(maVariable) dans la barre d'adresse !

Lorsque l'on crée une variable à l'intérieur d'une fonction, elle appartient au contexte de cette fonction. Elle est donc locale.
Il est cependant possible de créer localement (dans le contexte d'une fonction) une variable globale en considérant que le contexte global correspond en fait au contexte local de l'objet window :

function creerVariableGlobale( nomVar, valeur ){
	window[nomVar] = valeur;
}
 
creerVariableGlobale( "voeux", "Bonne année 2005" )
alert( voeux ); // Retournera "Bonne année 2005"

Les opérateurs d'incrémentation que l'on rencontre souvent dans les boucles for ou while sont au nombre de deux : ++ et --. Ils permettent d'augmenter ou de diminuer de 1 une variable (bien souvent un compteur). Ils constituent une écriture simplifiée de :

i = i + 1;
i += 1;

On constate deux syntaxes pour ces opérateurs :

i++;
++i;

Elles sont sensiblement les mêmes sauf lors d'une assignation. L'ordre prend alors toute son importance. Petit exemple :

var i = 0;
var j = 0;
i = j++; //Donne i = 0, j = 1;
 
// On réinitialise les variables
i = 0;
j = 0;
i = ++j; //Donne i = 1, j = 1;

Effectivement, la première assignation va d'abord attribuer la valeur de j à i et ensuite incrémenter j. Tandis que la seconde instruction va en premier lieu incrémenter j, puis attribuer la nouvelle valeur de j à i.

Remarque : il est tout à fait possible d'incrémenter une variable sans l'assigner :

var i = 0;
var j = 0;
 
i++; //Donne i = 1;
++j; //Donne j = 1;

Bien entendu, on constate le même phénomène avec la décrémentation :

var i = 0;
var j = 5;
i = j--; //Donne i = 5, j = 4;
 
// On réinitialise les variables
i = 0;
j = 5;
i = --j; //Donne i = 4, j = 4;

Le JavaScript permet de créer ses propres fonctions avec une syntaxe utilisée par plusieurs langages de programmation. Malheureusement, le JavaScript n'est pas très exigeant et nous permet de faire des choses pas nécessairement cohérentes.

Dans les cas normaux, vous déclarez votre fonction, avec ou sans paramètres, de la manière suivante :

/* Cas Normaux */
 
function maFonction(){
	alert("Ma fonction sans paramètre");
}
 
function maFonctionAvecParemetres(Un, Deux){
	alert("Param 1: " + Un + "\nParam 2: " + Deux);
}
 
maFonction();
maFonctionAvecParemetres("Un", "Deux");

Donc, lorsque la fonction est définie sans paramètre, vous l'appelez sans paramètre. Lorsqu'elle est définie avec deux paramètres, vous lui passez deux paramètres. Et ainsi de suite. C'est le meilleur moyen pour éviter toute sorte d'erreur.

Cependant, vous pouvez jouer sur le nombre de paramètres et lui en passer moins que ce que la fonction demande, ou lui en passer plus que ce qu'elle ne demande :

/* Cas dangereux */
 
function maFonction(Un, Deux, Trois){
	alert("Param 1: " + Un + "\nParam 2: " + Deux + "\nParam 3: " + Trois);
}
 
maFonction();
maFonction("Un");
maFonction("Un", "Deux");
maFonction("Un", "Deux", "Trois");
maFonction("Un", "Deux", "Trois", "Quatre");

JavaScript est malgré tout content, il s'y retrouve. Par contre, il ne vous préviendra pas si tous les paramètres sont passés ou non et ce sera à vous de faire la gestion des paramètres reçus. Dans ces conditions, on en arrive vite à oublier un cas ou l'autre.

Si vous ne pouvez pas prévoir d'avance le nombre de paramètres que prendra votre fonction, mieux vaut alors passer par d'autres solutions.

• Le tableau arguments de l'objet Function :

function maFonction(){
	var i=0, txt='';
	while(arguments[i]){
		txt+=arguments[i]+' ';
		i++;
	}
	alert(txt);
}
maFonction();
maFonction('toto');
maFonction('maFonction','avec','beaucoup','de','paramètres','!');

• Le passage d'objet :

function getNamedArguments(ArgumentsObj){
	var element,txt='';
	for(element in ArgumentsObj){
		if(txt!=''){
			txt+=', ';
		}
		txt+=' la valeur de l'argument "'+element+'" est "'+ArgumentsObj[element]+'"';
	}
	alert(txt);
}
getNamedArguments({
	property:'test'
});
getNamedArguments({
	property1:'value1',
	property2:'value2',
	property3:'value3'
});

Mais ce n'est pas tout. JavaScript permet de redéfinir les objets. Donc, si par inadvertance vous créez deux fonctions ayant le même nom, JavaScript ne vous dira rien et ne se souviendra que de la dernière que vous aurez déclarée. Effectivement, il aura redéfinit la première avec le code de la dernière :

/* Cas problématiques */
 
function maFonction(){
	alert("La fonction définie en première");
}
 
function maFonction(Un){
	alert("La fonction définie en dernière");
}
 
maFonction(); //J'appelle ma fonction sans paramètre, celle que j'ai défini en première
 
//---> Résultat: La fonction définie en dernière

Conclusion, même si JavaScript vous laisse parfois quelques libertés, il est nécessaire et recommandé d'être rigoureux.