Erreurs JavaScript (bogues) :

Transcription

Erreurs JavaScript (bogues) :
Erreurs JavaScript (bogues) :
Références :
http://www.ccim.be/ccim328/js/error.htm
http://www.zdnet.fr/builder/web_design/scripts/0,39021062,39131467,00.htm
http://www.g1script.com/home/LANGAGE/JS/cours/14.php
Enseignante : Claudine Billette
Trois types d'erreurs :
` au chargement (de syntaxe);
` d'exécution;
` de logique;
Les erreurs au chargement : Au chargement du script par le browser, Javascript passe en revue les
différentes erreurs qui peuvent empêcher le bon déroulement de celui-ci. Ces erreurs sont des problèmes
les plus élémentaires : des fautes de frappe et/ou des erreurs de syntaxe, l'oublie d'une accolade non
fermées, des parenthèses, des guillemets manquants, etc. Ces erreurs sont fatales, car l'interpréteur
JavaScript ne peut pas charger le code.
Les erreurs d'exécution ont lieu lorsque le script effectif est exécuté. Elles peuvent se produire lors du
chargement de la page ou être provoquées par un événement de page ou un bouton. Par exemple, une
erreur dans le nom d'une fonction. Cela empêche son exécution.
Les erreurs de logique empêchent le code de s'exécuter comme prévu. Le code ne comporte aucune
anomalie (pas de problème de syntaxe), mais le développeur a fait une erreur dans la logique du
programme. Ces erreurs sont souvent les plus difficiles à détecter, car le code est impeccable. Il n'y a plus
qu'à revoir la construction logique de votre script.
Utilisation de window.alert() pour déboguer du Javascript. Par exemple :
window.alert("message");
Window.alert(nomVariable);
Sert à :
` faire des points de contrôle (flag);
` définir la progression dans un script (de passage);
` afficher les variables (valeur de variable);
` si la fonction est exécutée;
` si un objet existe;
` etc.
Conseils :
` Il est conseillé de ne corriger qu'une erreur à la fois afin d'éviter toute confusion.
` Si vous corrigez simultanément plusieurs erreurs détectées, cela peut entraîner d'autres erreurs.
` Effacez les erreurs dans votre console JavaScript avant de réexécuter votre code
` Ne perdez pas de vue que Javascript ne vous indique pas toujours l'erreur véritable et que selon
l'erreur, celle-ci peut se situer bien plus avant dans le script.
` Ne pas oublier d'enregistrer les modifications avant de tester à nouveau votre script (cela arrive même
au meilleur d'entre nous…)
` Ne pas oublier d'actualiser votre page Web dans le navigateur
` Parfois il est nécessaire de faire Shift + Reload (sous Netscape) ou cliquez dans la zone de
localisation du browser et faire Enter.
Prof : Claudine Billette
1/3
Les grands classiques des erreurs :
On peut dresser une liste d'erreurs que tous les débutants (et même certains plus confirmés) font ou
feront tôt ou tard.
Général
1. Assurez-vous bien que le chemin d'accès au fichier .js est correct.
2. Et, que le nom du dossier et/ou le nom du fichier soit exact. Erreur qui se produit : il ne trouve pas les
fonctions, donc la console indique le nom de la fonction is not defined.
3. Assurez-vous que le document que vous testez dans votre navigateur est bien le même que le
document où vous travaillez. Surtout si vous avez plusieurs versions…
4. Attention Javascript fait la différence entre les majuscules et les minuscules (case sensitive).
5. Problème de guillemets ou d'apostrophes avant et après les chaînes de caractères.
6. Page blanche : cela se peut que cela soit une erreur HTML et non Javascript. Essayez d'écrire du
texte dans le corps de la page, si rien n'apparaît, vérifiez les balises HTML.
7. Page blanche : vérifiez la fermeture de la balise </script> dans le <head>.
8. Noms des objets JavaScript sont incorrects, surtout lorsque vous devez utiliser des minuscules et
majuscules. Par exemple :
erreur : lastindexof()
correct : lastIndexOf()
erreur : windows
correct : window
Les objets intrinsèques :
erreur : date, math, array
correct : Date, Math, Array
9. Une accolade ouverte ( { ) ou fermée ( } ) de trop ou manquante (surtout dans les blocs de
commandes imbriquées).
10. Lorsque vous avez le message « syntaxe error - document.getElementById( » ou « syntaxe
error - document.forms[ » à la ligne : 1. assurez vous que les guillemets correspondent. C'est-à-dire
un au début et un à la fin. À l'intérieur de ces guillemets utilisez des apostrophes pour les éléments.
Exemple : <body onload="document.getElementById('nom').focus()">
ou :
<body onload="document.forms[‘form1’].elements[‘nom'].focus()">
11. Ne jamais utiliser de mots réservés comme nom de fonctions ou de variables, par exemple : « Date »
c'est un objet de Javascript.
12. Dans les tableaux, ne pas oublier que l'indice commence à « 0 ».
Conditions & Boucles
13. Si le navigateur affiche un message demandant d'arrêter le script, probablement que vous avez une
boucle sans fin dans votre code.
14. Dans un if ( …. ==…) ou dans un while ( … == … ) et non seulement un =
=
opérateur d'affectation
Prof : Claudine Billette
== opérateur de comparaison dans les tests
2/3
15. If (….) ; ou while (… ); avec un point virgule donc n’exécute pas le contenu du if. De plus, si vous avez
un else qui suit le if, un message d'erreur apparaît « else …. » avec une petite flèche sous le « e »
de else. Vérifiez votre condition et/ou les accolades.
Formulaires et/ou fonctions
16. Dans le document HTML, le name et le id doivent avoir le même nom…
17. Si vous utilisez dans un script "getElementById("…"), vous devez absolument avoir dans le code
html dans la balise input l'attribut id="…" sinon un message d'erreur dit « … has no properties ».
18. Si le message dit « formulaire.elements… has no properties » : vérifiez le nom de l’élément dans le
name= "…" et le nom de l'élément dans votre .js, et ceci seulement dans le cas où vous vous utilisez
le code document.forms["form1"].elements["nomDuName"].value;
19. Si le message dit « … has no properties » : lorsque vous avez un passage par paramètre, vérifiez si
le nom entre les parenthèses function(nomParam) est identique au nom utilisé dans la fonction qui
suit.
20. Quand vous avez le message « … has no properties », toujours suivre le chemin à l'inverse de la
ligne en erreur jusqu'à la balise html tout en passant dans les fonctions appelées, les passages par
paramètres, etc.
Fonctions et/ou formulaires
21. Ne valide rien : probablement que c'est une erreur dans l'appel de la fonction.
22. Aucun message d'erreur : vérifier dans le fichier HTML l’appel de la fonction
onsubmit="return maFonction( )"
ou dans le fichier .js function sans les parenthèses ( )
23. Aucun message d'erreur : vérifier dans le fichier HTML, si vous avez bien le mot clé « return » sinon
il ne récupérera pas le résultat de la fonction de validation (false ou true).
Si le résultat retourné est « true » le formulaire sera envoyé, si c'est false, « action= » ne sera pas
exécuté.
24. Le nom de la fonction n'a pas la même orthographe dans la déclaration et dans l'appel.
25. Le nom de la fonction ou de la variable n'est pas unique dans le script (est déclaré 2 fois).
26. Oublié de mettre une virgule entre les différents paramètres ou arguments function (arg1, arg2).
27. Si le message dit : « is not defined » : vérifiez le nom de la variable ou de la fonction. Vous devez
suivre le nom de la variable (remonter dans le code) d'où part elle?
28. Souvent, il est écrit fonction au lieu de function
Le message dit « missing ; before statement » fonction nomFonction(valeur) une petite flèche verte
se place sous la première lettre du nom de la fonction ici le « n ».
Prof : Claudine Billette
3/3