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, l'opérateur "+" a une fonction différente selon si l'on travaille avec des nombres ou des String (chaînes de caractères). Pour les String, c'est le symbole de la concaténation et non de l'addition. Si vos valeurs sont concaténées alors que vous voulez les additionner, c'est que vous manipulez des chaînes de caractères et non des nombres. Il vous faut donc convertir ces valeurs en nombres, ce qui peut se faire avec les méthodes parseInt (conversion en nombre entier) ou bien parseFloat (conversion en nombre décimal).

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 ; (encore une autre utilisation de ce symbole)
• en multipliant ou divisant 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 serveur mais le principe reste le même. Le PHP s'exécute coté serveur tandis que le JavaScript s'exécute coté client. Quand la page arrive au client, le code PHP a déjà fini son travail alors que JavaScript n'a pas encore commencé. On ne peut donc pas exécuter du code PHP à partir d'un script JavaScript, il faut repartir sur le serveur pour cela. Par contre on peut demander à PHP d'inscrire la valeur de variables PHP au sein d'un code JavaScript afin qu'elles soient interprétées par la suite sur le navigateur du client.

<?php $sql = "SELECT texte FROM Table WHERE idTable = 1";
    $resultat = execute_sql($sql);
    $champ = mysql_fetch_array($result);
?>
<script>
   var maVariable = "<?php echo $champ['texte'] ?>";
   alert(maVariable);
</script>

Dans cet exemple, on exécute une requête mySQL puis on inscrit le résultat dans une balise <script> afin que JavaScript puisse utiliser ce résultat côté client et l'afficher dans une fenêtre de type alert.

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

Cette technique est parfois appelée « pass-through » (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. Si vous souhaitez utilisez cette technique, pensez à ajouter un commentaire explicite car on pourrait croire qu'il s'agit d'un simple oubli de break.

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 );
}

Pour créer dynamiquement une fonction, c'est-à-dire obtenir une fonction dont le code est issu de variables JavaScript, il faut passer par le constructeur Function:

var maFonction = new Function("x", "y", "return x+y");
/*
	équivalent au code suivant :
	var maFonction = function (x,y) {
		return x+y
	}
*/
alert(maFonction(1,2));

Ne pas confondre Function et function. Avec une majuscule, il s'agit du constructeur de fonctions au même titre que Object est le constructeur des objets. Tout en miniscules, il s'agit du mot-clé réservé à la déclaration de fonctions.

Les préfixes de déclaration des variables var et let sont facultatifs en JavaScript. S'ils s'ont omis, les variables sont déclarées dans le scope global (c'est-à-dire dans l'objet window dans le cadre d'une page web). Cependant, il est recommandé de toujours bien déclarer ses variables et d'éviter d'avoir trop de variables globales, pour plusieurs raisons:

• si vous utilisez un nom de variable identique entre deux fonctions et que cette variable est globale, vous risquez un conflit: les deux fonctions utiliseront la même référence pour stocker des valeurs différentes, ce qui peut les rendre inopérantes ou provoquer des comportements non désirés.
• si une variable globale porte le même nom qu'une propriété existante de window, par exemple document ou location, sa valeur sera écrasée et rendra inopérant tout autre code utilisant cette même propriété.
• les éléments HTML nommés (ayant un attribut name ou id) sont déclarées dans window, et donc accessibles comme variables globales. Si vous utilisez une variable non déclarée ayant le même nom qu'un id ou name d'un élément du document, vous risquez de vous faire surprendre par cette référence à l'élément.

En conclusion, déclarez toujours vos variables en début de fonction avec le mot-clé var (ou let si vous écrivez en normes ECMAScript 2015)

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 déclare une variable avec les mots-clé var ou let à l'intérieur d'une fonction, elle appartient au contexte de cette fonction. Elle est donc locale.
Il est cependant possible de déclarer une variable globale depuis une fonction. Dans le cadre d'une page web, le scope global est l'objet window. Toutes les variables globales sont donc des propriétés de window. Il suffit donc d'assigner une propriété à window pour en faire une variable globale:

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

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 déclarer ses propres fonctions avec une syntaxe similaire à plusieurs langages de programmation. Attention toutefois, JavaScript offre beaucoup de libertés et nous laisse faire des choses parfois incohérentes.

Voici les différents moyens classiques de déclarer une fonction, avec ou sans paramètres :

function maFonction(){
	alert("Fonction sans paramètre");
}
 
function maFonctionAvecParametres(Un, Deux){
	alert("Param 1: " + Un + "\nParam 2: " + Deux);
}

var maFonctionAnonyme = function(){
	alert("Fonction sans nom");
}
 
maFonction();
maFonctionAvecParametres("Un", "Deux");
maFonctionAnonyme();

A l'appel d'une fonction, le nombre d'arguments passés peut ne pas correspondre au nombre d'arguments dans la déclaration de la fonction. Si vous appelez une fonction avec un nombre insuffisant d'arguments, les arguments restants prendront la valeur undefined. JavaScript 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. Pour éviter d'éventuelles erreurs et à moins que vous soyez sûr de ce que vous faites, appelez toujours vos fonctions avec le bon nombre d'arguments.

function maFonction(Un, Deux){
	alert("Param 1: " + Un + "\nParam 2: " + Deux);
}
 
maFonction(); // Param 1: undefined Param 2: undefined
maFonction("Un"); // Param 1: "Un" Param 2: undefined
maFonction("Un", "Deux"); // Param 1: "Un" Param 2: "Deux"
maFonction("Un", "Deux", "Trois"); // Param 1: "Un" Param 2: "Deux"

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 automatiquement renseigné à l'appel d'une fonction

function maFonction(){
	alert("Nombre d'arguments passés: " + arguments.length
		+"\n Arguments: " + Array.prototype.join.call(arguments));
}
maFonction();
maFonction('toto');
maFonction('maFonction','avec','beaucoup','de','paramètres','!');

• Le passage d'arguments via un objet:

function maFonction(params){
	alert("Nombre d'arguments passés: " + Object.keys(params).length);
	alert("Arguments: " + Object.keys(params).map(function(nomParam){
		return nomParam + "=" + params[nomParam];
	}).join(" ; "));
}

maFonction({
	param1: "valeur1",
	param2: "valeur2",
	param3: "valeur3"
});

Les fonctions sont des variables comme des autres. Donc, si par inadvertance vous déclarez deux fonctions avec le même nom dans le même contexte, la référence à la première fonction sera perdue et JavaScript ne se souviendra que de la dernière que vous aurez déclarée.