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