Javascript et interactivité dans les pages Html

Dimension: px

Commencer à balayer dès la page:

Download "Javascript et interactivité dans les pages Html"

Hervé Jean
il y a 7 ans
Total affichages :

Javascript et interactivité dans les pages Html Javascript est un langage de scripts qui s'ajoutent aux balises Html pour agrémenter la présentation et l'interactivité des pages Web Les scripts sont

1 Javascript et interactivité dans les pages Html Javascript est un langage de scripts qui s'ajoutent aux balises Html pour agrémenter la présentation et l'interactivité des pages Web Les scripts sont interprétés par le navigateur (dès Netscape 2 et MISE 3) donc accessibles dès l'ouverture de la page. Exemple de questionnaire réalisé sous Dreamweaver Créer une nouvelle page Html Saisir le texte relatif à une question, l'exposé d'un problème Insertion / Script L'instruction alert("texte") affiche un message (dans le cas présent votre texte qui doit être saisi entre guillemets) dans une boite de dialogue pourvue d'un bouton OK. Pour continuer dans la page, le lecteur devra cliquer sur ce bouton. Enregistrer la page sous le nom test.htm Visualiser le code inséré dans la page <script language="javascript"> alert("attention à l'orthographe!") </script> Tester la page dans un navigateur Dans la logique du langage Html, il faut signaler au navigateur par une balise, que ce qui suit est un script et que c'est du Javascript (et non du VBScript). C'est la balise <SCRIPT LANGUAGE="javascript">  </SCRIPT> Un icône représentatif de la position du script figure désormais dans la page Html (pour le voir, il est nécessaire de demander l'affichage des "éléments invisibles", si c'est possible!) Voici le symbole indiquant la précence d'un "invisible". En cliquant dessus, la palette indiquant les propriétés de l'objet permet d'accéder à son contenu pour le modifier au besoin. Pour permettre l'interactivité, il est souvent nécessaire de stocker temporairement une information saisie par l'utilisateur via un champ de texte d'un formulaire et de la comparer au contenu d'une variable préalablement déterminée par le concepteur de la page. Iufm de Reims - Jacques Bresson - Interactivité et Javascript page 1/5

Exemple de questionnaire réalisé sous Dreamweaver Créer une nouvelle page Html Saisir le texte relatif à une question, l'exposé d'un problème Insertion / Script L'instruction alert("texte") affiche

2 Saisie du texte de la question : Par exemple : C'est la science qui étudie les processus de transmission et d'acquisition d'une discipline. On dit souvent que son rôle est de transformer un savoir savant en un savoir à enseigner Insertion d'un champ de saisie dans la page Commande : Insertion / Objet de formulaire / Champ de texte Ou bien utiliser la palette flottante d'objets formulaires Donner un nom à ce champ depuis la palette flottante de propriétés : Nommer le champ de texte "reponse1" La valeur saisie par l'utilisateur est stockée dans une boîte nommée "réponse1". On dit que cette boîte est une variable (ce n'est rien d'autre qu'un espace de stockage dans la mémoire de l'ordinateur). Il convient donc de créer un petit programme qui teste le contenu de cette variable et la compare au texte de la réponse attendue. On va donc créer une fonction qui sera stockée dans l'en-tête de la page html (en-tête qui ne s'affiche pas dans la page. Choisir d'afficher l'en-tête de la page puis cliquez dans la zone d entête avant de générer la création de la fonction. De cette manière, elle sera stockée dans la partie <Head> de la page Html. Positionner donc le curseur dans l'en-tête puis, activer la commande : Insertion / script Nom de la fonction suivie de () Si la valeur contenue dans la variable reponse1 est égale à "didactique" afficher ce message, sinon afficher le message suivant. On double le signe = car c'est une comparaison des contenus des variables Attention function et non fonction! Ne pas oublier les { encadrant les instructions composant la fonction. Il faut doubler les apostrophes pour éviter les erreurs de syntaxe (par exemple : c''est bien) Dans sa formulation la plus simple, l'expression if se présente comme suit if (condition vraie) { une ou plusieurs instructions; Ainsi, si la condition est vérifiée, les instructions s'exécutent. Si elle ne l'est pas, les instructions ne s'exécutent pas et le programme passe à la commande suivant l'accolade de fermeture. IL est possible de compléter cette expression SI ALORS par une instruction SINON, c'est l'expression if...else if (condition vraie) { instructions1; instruction2 else { instructions1bis; instruction2bis Si la condition est vérifiée (true), le bloc d'instructions 1 s'exécute. Si elle ne l'est pas (false), le bloc d'instructions 2 s'exécute. Dans le cas où il n'y a qu'une instruction, les accolades sont facultatives. Iufm de Reims - Jacques Bresson - Interactivité et Javascript page 2/5

bien utiliser la palette flottante d'objets formulaires Donner un nom à ce champ depuis la palette flottante de propriétés : Nommer le champ de texte "reponse1" La valeur saisie par l'utilisateur est

3 Pour que cette fonction soit exécutée, il est nécessaire de créer un événement, par exemple un clic sur un bouton. Association d'un événement au bouton "vérifier On souhaite qu'un clic de souris sur ce bouton provoque l'exécution de la fonction tester() Le bouton étant sélectionné, il suffit d'afficher la fenêtre de comportements et d'ajouter le comportement "Appel JavaScript" On renseigne alors la boîte de dialogue en indiquant que c'est la fonction tester() qui devra être exécutée Enregistrer la page hml puis la tester (Fichier / aperçu dans le navigateur) Exercice à réaliser Recommencer l'opération pour la question2 Par exemple "Une fermière vend des œufs. Elle vend la moitié de ses œufs au premier client. Elle vend la moitié du reste plus 6 œufs au second client. Elle n'a alors plus d'œufs! Combien avait-elle d'œufs au départ?" Il convient de mettre en place un nouveau champ de saisie, de le nommer reponse2, de créer une nouvelle fonction tester2(), puis d'insérer un nouveau bouton pour lequel on définira un comportement. Iufm de Reims - Jacques Bresson - Interactivité et Javascript page 3/5

de comportements et d'ajouter le comportement "Appel JavaScript" On renseigne alors la boîte de dialogue en indiquant que c'est la fonction tester() qui devra être exécutée Enregistrer la page hml

4 Cela fonctionne? Il est possible de tester en une seule fois les deux réponses, en utilisant un seul bouton de vérification. On souhaiterait qu'il indique seulement le nombre de réponses bonnes, sans dire laquelle est correcte s'il n'y en a qu'une sur les deux Voici l'exemple de la fonction qui permettrait cela function tester3() { nombrebons=0; if (reponse1.value == "didactique") nombrebons=nombrebons+1; if (reponse2.value ==24) nombrebons=nombrebons+1; alert("tu as "+nombrebons+" bonne(s) réponse(s)") Plus généralement Lorsque l'on travaille en javascript On insère les champs dans des formulaires. Pour un questionnaire par exemple, on peut insérer un formulaire pour chaque question C'est la commande : Insertion / formulaire qui le permet Choix des Ou encore le bouton adéquat de la fenêtre d'objets boutons associés aux formulaires Il y a insertion dans la page d'une zone rectangulaire (tirets rouges) symbolisant les limites du formulaire. Si vous ne voyez pas cette zone, affichez les éléments invisibles de la page. Donner un nom au formulaire : Insérer ensuite le texte des question puis les champs en les nommant également : Comme tout langage Javascript obéit à une syntaxe En langage naturel on dirait : "le cendrier de l'automobile" En javascript : voiture.cendrier. Ainsi lorsque l'on souhaite obtenir (pour la comparer à une autre valeur) la valeur contenue dans une variable reponse1, reponse1.value est insuffisant pour identifier de quelle variable on parle. Si cette variable est insérée dans le formulaire question1, c'est la syntaxe suivante qui sera correcte question1.reponse1.value On pourra donc avoir les champs reponse1, reponse2, reponse3 pour la question1, mais aussi pour les autres : question1.reponse1.value est bien un champ différent de question2.reponse1.value Iufm de Reims - Jacques Bresson - Interactivité et Javascript page 4/5

tester3() { nombrebons=0; if (reponse1.value == "didactique") nombrebons=nombrebons+1; if (reponse2.

5 Les différents scripts apparaissent dans la zone d'en-tête, au besoin il faudra l'afficher. Pour pouvoir réutiliser facilement des fonctions dans d'autres pages Html, il peut être plus facile de ne pas inclure dans le descriptif de la fonction la valeur exacte à laquelle on compare une variable et de stocker préalablement les réponses attendues dans d'autres variables. Dans l'en-tête de la page Html, on affecte les variables Placer le curseur dans l'en-tête puis Insertion/ script Ainsi, dans le descriptif des fonctions qui suivra la déclaration des variables, au lieu de tester : If (question1.reponse1.value== "didactique") On pourra écrire If (question1.reponse1.value== trouvequestion1) La mise à jour des questionnaires s'en trouvera facilitée. Les variables sont précédées de l'instruction var et son séparées entre-elles par des ; Le signe = signifie que l'on affecte la valeur "didactique" à la variable trouvequestion1 Remarque : le cas particulier des boutons radios Les boutons radios sont insérés à partir des commandes de la fenêtre formulaire Dans certains questionnaires, on préfèrera utiliser des boutons radios à cocher, par exemple Les deux boutons ont même nom (ici q1) mais deux valeurs différentes (0 ou 1) Le test associé sera par exemple : function verification() { if (quest1.q1[1].checked) alert("bravo!") if (quest1.q1[0].checked) alert ("perdu!") Mais le bouton radio étant composé d'une image, il est possible de lui associer un comportement tel qu'un clic sur le bouton provoque l'exécution d'un scénario (le déplacement d'un calque contenant une aide par exemple). Voir à ce sujet la documentation relative à Dreamweaver (J.Bresson, Iufm de Reims) disponible sur le site web de l'iufm. Pour en savoir plus sur le javascript : (voir liens vers javascript) n/info/jvscript/dhtml.htm Iufm de Reims - Jacques Bresson - Interactivité et Javascript page 5/5

variable et de stocker préalablement les réponses attendues dans d'autres variables.

Documents pareils

Dévéloppement de Sites Web

1 Dévéloppement de Sites Web Cours III : Travailler avec Dreamweaver de Macromedia Peter Stockinger Séminaire de Maîtrise en Communication Interculturelle à l'institut National des Langues et Civilisations