Page d'accueil du projet en Javascript - Questionnaire - Rapport du projet Javascript
Avant de commencer mon rapport, je souhaiterai juste signaler, que comme je l'ai déjà expliqué longuement dans mon rapport (ex.3 - php), mon travail professionnel m'aide beaucoup dans la programmation, soit de php soit de js. Car j'utilise le même raisonnement, que ce soit pour taper le code ou pour chercher les bugs !
Mon but principal est de comprendre comment fonctionne javascript (js). C'est-à-dire qu'elle est le code derrière js, et quelles sont ses différences avec php. Je sais que php et js sont souvent utilisé ensemble. Par exemple, on peut utiliser php pour soumettre un questionnaire et enregistrer les réponses dans une base de donnée et js pour limiter les erreurs que l'utilisateur peut faire en remplissant son questionnaire, avant que les réponses soient enregistrés dans la base de donnée. Mon idée est que pour bien comprendre le code js et sa différence avec php, il faut d'abord que j'essaye la programmation js tout seul sans php. N'ayant pas envie de repenser à un contenu (qui, à mon avis, n'est pas le but de l'exercice du jour), j'ai décidé de reprendre le contenu que j'ai utilisé pour l'exercice de programmation php. Donc suite à mon objectif de faire du js sans php, j'ai enlevé tout code php, et je l'ai remplacer par du js.
Comme pour l'exercice de programmation php, j'ai voulu utiliser différents type de question (bouton, radio, checkbox, texte, etc.) avec différentes manières de traiter la réponse. Et cela dans le but, de voir plusieurs codes différents de js.
Afin de pouvoir réaliser mes objectifs, j'ai eu besoin de mon syllabus de cours Introduction à Javascript et de l'indispensable Guide de référence (pour javascript 1.1).
J'ai repris mon design habituel: j'ai donc utilisé la feuille de style css que j'ai utilisé pour mon questionnaire php.
Ma réflexion en js s'est surtout basée sur la manière de simplifier au maximum les sources d'erreurs faite dans le remplissage du questionnaire. C'est-à-dire que l'utilisateur ne doit pas perdre de temps à faire plusieurs va et vien (entre ouverture-fermeture des messages d'erreur ou de la fenêtre réponse). Le but du designer ici, est de guider au maximum l'utilisateur dans le choix de ses réponses, et ne tenir compte que des choses essentiels.
Je m'explique: dans le questionnaire "Es-tu trop maigre ou trop gros ?", les seuls champs qui doivent nécessairement être rempli sont la taille et le poids. En effet, le calcul du BMI se fait sur la base de ces deux mesures. Donc c'est seulement sur la base de cette réponse, si elle est erronée, qu'un message d'erreur apparaît.
Un autre endroit, où l'on guide l'utilisateur, est dans le choix du sport. Le but étant de rester logique. C'est-à-dire qu'il n'est pas logique de pouvoir choisir aucun sport et un sport. De plus, on clique autre sport pour l'utilisateur, s'il a rempli le champs autre. Afin que les réponses puissent se présenter de façon sensée. A noter qu'ici "aucun sport" a été le choix par défaut, afin de tout de même donner une réponse concernant le sport ! (dans un but pédagogique, bien entendu).
Les autres réponses, ne sont pas essentiels au résultat donné à l'utilisateur, raison pour laquelle on ne force pas à donner une réponse. Par contre, la personne verra dans la réponse, le fait qu'elle n'ait pas rempli un champ. Par exemple, l'absence du choix du sexe deviendra "personne assexuée" (cela me paraissait plus correct que de mettre un choix par défaut !).
Les premières difficultés que j'ai rencontré était dans la différence du formalisme. Par exemple, en php le "elseif" devient en js "else if" (ajout de l'espace), le code de concaténation en php (".") n'est pas le même qu'en js ("+"), les variables en php ont un "$" devant le nom, tandis que pas du tout devant le nom des variables js, etc.
Ensuite, il a fallut que je comprenne l'utilité de l'évenement "OnClick" dans les actions et comment on pouvais "jouer" avec. Par exemple, pour désélectionner un checkbox A quand on clique sur le checkbox B, on indique dans le "onClick" du checkbox B que A devient par l'action désélectionné.
Pour pouvoir faire le calcul du BMI, il me fallait un nombre dans les mesures et non un texte. C'est pourquoi j'ai du rechercher une fonction qui permettait de reconnaître si la valeur entrée est un nombre ou non. Là, j'ai trouvé deux fonctions, "parseInt" qui permet de filtrer l'information et d'extraire le nombre entier de la chaîne de caractère et "parseFloat" pour les nombres à virgules. Suite à cela, j'ai construit la reconnaissance d'erreur sur le NaN (=Not a Number), valeur qui ressort si la valeur n'est pas un nombre. Mais comme ce dernier est une valeur spéciale qui n'est pas reconnu comme telle (NaN), j'ai du transformer cette valeur en une chaîne de caractère à l'aide de "toString()" afin de pouvoir traiter cette réponse. Pour le traitement des valeurs données, il m'a fallut également apprendre le traitement des champs vide par la reconnaissance qu'une réponse ne prend aucune place dans le champ (longueur de la réponse nulle - ".length").
Finalement, j'ai pu réaliser mes objectifs: traiter les réponses d'une manière simple pour l'utilisateur.
Je suis assez contente d'avoir décidé de ne pas mélanger, pour cet exercice, du php au js. Cela m'a permis de voir les fonctionalités et possibilités de l'un et l'autre. Je suis consciente que je n'ai exploré que la pointe de l'iceberg de ces deux langages de programmation, mais ces exercices m'ont tout de même permis d'avoir une certaine idée de leur potentialité et des rôles de chacun.
-