Valeur de cette activité : 3 points
Compétence :
03- Les variables javascript

A-Module 04 : JAVASCRIPT : 3 points - difficulté : 1

Présentation



Maintenant que vous êtes en mesure d'insérer du code Javascript dans une page, allons plus loin.

Le Javascript vous permet d'interagir avec un visiteur.

Les données inscrites par le visiteur doivent être récupérées.

Les variables servent de contenant afin de contenir ces données.

Cliquez ici pour afficher le document d'explications sur la notion de variables en javascript

Autres liens utiles :

http://www.ccim.be/ccim328/js/var.htm

http://perso.wanadoo.fr/chatinais/coursjs/somrjs.htm

http://www.editeurjavascript.com/cours/index.php

http://www.le-webmestre.net/web/cours/javascript/

Description

Dans cet exercice, vous allez poser une question à un visiteur, vous allez récupérer la réponse fournie et vous allez écrire cette réponse sur la page.

Avant de faire l'exercice, cliquez ici afin d'apprendre la méthode Prompt() qui vous permettra de poser la question à votre visiteur.

Un peu de théorie : Pour créer une variable, on dispose de deux méthodes:

Méthode 1 :
En utilisant le mot-clé var suivi de la liste des variables à créer, avec ou sans valeurs initiales

var nom, age

var nom, age=13

var nom="Anne", age=12

Méthode 2 :
En écrivant le nom de la variable suivi de la valeur qu'on lui attribue

Si la valeur est une chaîne de caractères (du texte), on utilise les guillemets ou les apostrophes :
Phrase="bonjour tout le monde"
Phrase='bonjour tout le monde'

Si la valeur est de type numérique(un nombre), on n'utilise pas les guillemets :
age = 12

Notez que lorsque la variable contient un texte, le texte doit être délimité par des guillemets. Ce n'est pas le cas lorsque la variable est un nombre.

Un nom de variable doit suivre certaines règles:

- il peut contenir toutes les lettres de l'alphabet, en majuscules ou en minuscules, des chiffres et le caractère de soulignement (_)

- il ne doit pas contenir d'espace, de caractère accentué ou de signe de ponctuation.

- il est sensible à la casse: nom, Nom et NOM ne désignent pas la même variable.

- le premier caractère d'un nom doit être une lettre ou un caractère de soulignement

  1. Ajoutez une page à votre portfolio en affichant les assistants HTML et Javascript ainsi que la directive 1647
  2. Inscrivez dans le champ le titre : Les variables javascript
  3. Sélectionnez la matière : informatique
  4. Inscrivez dans le champ No de la directive : 1647
  5. Consultez au besoin ce tutoriel sur les variables javascript
  6. Insérez le titre "Les variables Javascript" comme Titre de niveau 1 dans votre page.
  7. Définissez dans votre page le code Javascript (Bouton javascript)
  8. Dans ce code, insérez le code javascript de la méthode Prompt() (Bouton Boîte d'entrée) afin de poser la question suivante : "Quel est votre nom?" .
    Inscrivez dans la fenêtre de dialogue qui s'affiche :
    - NomDeLaVariable = NomVisiteur
    - énoncé = Quel est votre nom?
    - valeur => laissez ce champ vide

  9. Vous devriez à ce moment avoir écrit ceci <script Language=javascript> var NomVisiteur=prompt("Quel est votre nom?","") </script>
  10. Ajoutez à la suite (au dessus de la balise /script) le code qui permettra d'écrire le mot "Bonjour" suivi de la valeur inscrite par le visiteur (Bouton Écrire)

    Vous venez d'utiliser l'Objet "document" et la Méthode "write" document.write("Bonjour " + NomVisiteur +".<br />") Voici le résultat attendu :
    Bonjour Luc
    Cliquez ici afin d'obtenir de l'information concernant l'utilisation de la méthode write() de l'objet "document"
  11. Visualisez votre page et apportez des modifications au besoin.
  12. Ajoutez maintenant en utilisant le bouton Boîte d'entrée sous votre première question la question suivante : "Quel âge avez-vous?".
    Inscrivez dans la fenêtre de dialogue qui s'affiche :
    - NomDeLaVariable = AgeVisiteur
    - énoncé = Quel âge avez-vous?
    - valeur => laissez ce champ vide

  13. Modifiez ou ajoutez la ligne document.write afin d'écrire le résultat suivant :
    Bonjour Luc
    Vous êtes âgé(e) de 15 ans.

    document.write("Vous êtes âgé(e) de " + AgeVisiteur +" ans.")
    Aide : N'oubliez pas d'insérer le code de saut de ligne après la ligne Bonjour Luc.

  14. Ajoutez maintenant selon le modèle utilisé une autre question de votre choix et affichez la réponse inscrite par le visiteur dans votre page.
  15. Enregistrez votre page et validez son fonctionnement.