IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
logo
Sommaire > Syntaxe JavaScript
        Comment débugger un script JavaScript ?
        Pourquoi mes deux valeurs se concatènent au lieu de s'additionner ?
        Comment exécuter une fonction après un délai ?
        Comment utiliser une variable PHP/ASP dans du JavaScript ?
        Comment utiliser un script externe ?
        Comment être sûr que mon string de document.write ou eval est correct ?
        Peut-on lancer un exécutable en JavaScript ?
        Comment utiliser l'instruction switch avec plusieurs valeurs ?
        Comment utiliser le mot-clé 'with' pour clarifier son code ?
        Comment utiliser les blocs try/catch ?
        Comment créer dynamiquement une fonction ?
        Pourquoi faut-il toujours déclarer ses variables ?
        A quoi sert 'javascript:' dans une balise HTML ?
        Comment créer une variable globale dans une fonction ?
        Comment fonctionnent les opérateurs d'incrémentation ?
        Comment déclarer une fonction en JavaScript ?



Comment débugger un script JavaScript ?
auteurs : simone.51, Fabszn
Si vous essayez de debugger 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 faire 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.


Pourquoi mes deux valeurs se concatènent au lieu de s'additionner ?
auteur : BrYs
En javascript, le "+" est le symbole de concaténation.
Pour additionner il faut utiliser parseInt().

Exemple :

variable1 = document.formulaire.champs1.value;
/*variable1 = '12' */
variable2 = document.formulaire.champs2.value;
/*variable2 = '20' */
total = variable1 + variable2;
/*total = '1220' */
Avec parseInt() :

variable1 = document.formulaire.champs1.value;
/*variable1 = '12' */
variable2 = document.formulaire.champs2.value;
/*variable2 = '20' */
total = parseInt(variable1,10)+ parseInt(variable2,10);
/*total = 32 */

Comment exécuter une fonction après un délai ?
auteur : simone.51
Par exemple, vous voulez faire revenir un internaute sur la page précédente au bout de 2 secondes :
setTimeout(function(){history.back()},2000);
Sous Firefox, il est également possible de passer des arguments à la fonction appelée, en rajoutant des arguments à la fonction setTimeout:

setTimeout(alert, 2000, 'gnark');
Ce code permet d'afficher (sous Firefox et Opéra) un message box avec le texte gnark au bout de 2 secondes.


Comment utiliser une variable PHP/ASP dans du JavaScript ?
auteur : simone.51
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 ça 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.
<?$sql = "SELECT texte FROM Table WHERE idTable = 1";
    $resultat = execute_sql($sql);
    $champ = mysql_fetch_array($result);
    print '<script type="text/javascript" language="javascript">';
    print "alert('$champ[texte]');";
    print '</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 !!!


Comment utiliser un script externe ?
auteur : BrYs
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>

Comment être sûr que mon string de document.write ou eval est correct ?
auteur : SpaceFrog
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 du 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\"\>')

Peut-on lancer un exécutable en JavaScript ?
auteur : simone.51
C'est tout simplement impossible.
Le langage JavaScript s'exécute coté client, donc cela poserait d'énormes problèmes de sécurité.


Comment utiliser l'instruction switch avec plusieurs valeurs ?
auteur : simone.51
Cette technique est parfois appelée "pass-thru" (passage à travers):

switch (val){
case 1:
case 2:
// instructions
        break;
case 3:
    case 4:
        // instructions
        break;
    default :
        break;
}

Comment utiliser le mot-clé 'with' pour clarifier son code ?
auteur : SpaceFrog

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

Comment utiliser les blocs try/catch ?
auteur : denisC
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 / 0;
}
catch ( e ) {
alert ( e );
}

Comment créer dynamiquement une fonction ?
auteur : SpaceFrog
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));

Pourquoi faut-il toujours déclarer ses variables ?
auteur : Auteur
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, le alert affiche bien la valeur de l'input c'est à dire 4.

2ème 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 :

3ème 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.


A quoi sert "javascript:" dans une balise HTML ?
auteur : Bovino
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.

info 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 !

Comment créer une variable globale dans une fonction ?
auteur : SpaceFrog
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"

Comment fonctionnent les opérateurs d'incrémentation ?
auteur : vermine
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;

Comment déclarer une fonction en JavaScript ?
auteurs : vermine, Bovino
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ètre 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.

info Si vous ne pouvez pas prévoir d'avance le nombre de paramètres que prendra votre fonction, mieux vaut alors passer par 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','!');
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.



Consultez les autres F.A.Q.


Valid XHTML 1.0 TransitionalValid CSS!

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.