FAQ JavaScriptConsultez toutes les FAQ

Si vous essayez de déboguer un script sous Internet Explorer, vous risquez de rencontrer quelques problèmes...
En effet, la ligne de l'erreur signalée ne correspond pas à la ligne du code que vous avez créée.
Pour retrouver l'erreur à la bonne ligne, il faut afficher la source de la page.

Clic droit --> Afficher la source

Avec le navigateur Mozilla (et donc FireFox), qui possède un debugger JavaScript intégré, c'est un peu plus simple.
Lorsqu'une erreur JavaScript est détectée, celle-ci est loggée dans une console sous forme de lien. Lorsque l'on clique sur le lien, celui-ci nous envoie directement à la ligne concernée par l'erreur (dans 99% des cas). En tous cas cela permet de travailler plus vite en JavaScript.

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

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.

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 2 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 2 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 type alert.
Il faut faire attention soit de bien intervertir les ' et " soit d'utiliser les \".
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>

En HTML5, l'attribut type n'est plus nécessaire.

Il est déconseillé d'utiliser document.write et eval. Pour plus d'information, lisez les articles suivants :

• Comprendre document.write() en JavaScript ;
• Les fonctions de rappel (callback) ou les utilisations cachées de eval().

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 coté client, donc cela poserait d'énormes problèmes de sécurité.

Notons cependant l'existence des ActiveX du côté d'IE. Mais leur activiation 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.

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 3 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 un document.getElementById()) donc dans l'exemple 2 quand vous écrivez :

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

Test1 fait référence à l'objet ayant pour id Test1 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é 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>

En résumé, l'utilisation des pseudos-url est souvent le signe d'un codage maladroit et doit être proscrit au maximum.

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.