If you're seeing this message, it means we're having trouble loading external resources on our website.

Si vous avez un filtre web, veuillez vous assurer que les domaines *. kastatic.org et *. kasandbox.org sont autorisés.

Contenu principal

Résumé : les variables

Voici ce que nous avons découvert dans ce module sur les variables :
Une variable est un moyen de stocker des valeurs. Pour utiliser une variable, on doit à la fois la déclarer — pour permettre au programme de la connaître — puis on doit lui "affecter" une valeur — pour permettre au programme de savoir quelle valeur nous avons stockée dans la variable.
Voici comment déclarer une variable appelée "xPos" :
var xPos;
Maintenant, on peut lui affecter la valeur 10 :
xPos = 10;
Si on veut (et on le veut souvent ! ), on peut déclarer et affecter une variable en une seule instruction :
var xPos = 10;
Si, pour une raison quelconque, on veut modifier la valeur d'une variable, on peut lui réaffecter une valeur :
var xPos = 10;
// quelque temps plus tard ...
xPos = 20;
Nous verrons bientôt pourquoi la réaffectation peut être utile, quand nous voudrons animer nos dessins.
Comment choisir les noms de nos variables ? Pour les variables en JavaScript, suivez ces règles :
  • Les noms des variables peuvent commencer avec des lettres, ou les symboles $ and _. Ils ne peuvent contenir que des lettres, des chiffres, $ and _. Ils ne peuvent pas commencer par un chiffre. "maVariable", "page_1", et "$money3" sont des exemples de noms de variables valides.
  • Les noms des variables sont sensibles à la casse, ce qui signifie que "xPos" est différent de "xpos". Faites bien attention à cela.
  • Les noms des variables peuvent être les mêmes que des noms de variables existants, et il y en a beaucoup dans notre environnement de programmation ProcessingJS. Si jamais vous voyez une erreur apparaître avec un message du type « Variable en lecture seule ! » ("Read only!" en anglais), essayez de changer le nom de votre variable.
  • Les noms des variables doivent être clairs et significatifs. Par exemple, au lieu de "hd", utilisez "hauteurDents".
  • Les noms des variables doivent utiliser le camel case (c'est-à-dire que la première lettre des mots liés est en majuscule lorsqu'une variable est constituée de plusieurs mots), comme "hauteurDents" au lieu de "hauteurdents" ou "hauteur_dents".
Nous utiliserons beaucoup les variables quand nous apprendrons à faire des animations dans le module suivant. Si vous n'avez pas compris quelque chose à propos des variables, c'est le moment de poser vos questions ici.

Vous souhaitez rejoindre la discussion ?

  • leafers seed style l'avatar de l’utilisateur kolliamel
    "Si jamais vous voyez une erreur arriver avec un message du type « Variable en lecture seule ! », c'est que vous essayez d'utiliser une variable protégée de ProcessingJS. Dans ce cas, essayez de changer le nom de votre variable."

    Je n'ai pas compris cette règle:
    -Qu'est_ce que ProcessingJS?
    -Comment une variable peut-être protégé de ProcessingJS?

    Merci :)
    (13 votes)
    Default Khan Academy avatar l'avatar de l’utilisateur
    • purple pi pink style l'avatar de l’utilisateur PERCE-NEIGE
      ProcessingJS c'est ce qu'on appelle une "bibliothèque de fonctions", c'est-à-dire que c'est une composante qu'on a ajouté au JavaScript, pour le rendre plus facile à utiliser, plus performant, ou plus en adéquation avec certains besoins (ici le nôtre: dessiner)
      Cette composante contient des fonctions écrites par des programmeurs, par exemple la fonction rect( ), etc...
      (38 votes)
  • aqualine ultimate style l'avatar de l’utilisateur mariam
    Peut-on (au lieu d'une valeur) donner une couleur a notre variable?
    (10 votes)
    Default Khan Academy avatar l'avatar de l’utilisateur
  • female robot amelia style l'avatar de l’utilisateur Vincent
    J'ai cherché sur internet et j'ai vu qu'il y avais 3 types de variables : var, const et let. Quelle est la différence ??
    (4 votes)
    Default Khan Academy avatar l'avatar de l’utilisateur
    • leaf yellow style l'avatar de l’utilisateur Grard Steve
      Bonjour Vincent,

      "var" est l'expression de la variable la plus commune et qui permet au code de changer sa valeur à peu près partout dans le code qui suit sa déclaration.

      "const" est une variable que l'on estime ne jamais devoir changer à travers le code car il faut absolument qu'elle reste rigoureusement la même à travers toute l'évolution du code (sinon, le résultat final ne ressemblerait plus à ce que l'on désire).

      "let" est utilisée pour déclarer une variable qui ne pourra être modifiée que dans le cadre du "bloc" de code qui la concerne.

      Si vous ne voyez pas encore à quoi correspond la portée des variables et les blocs, vous le verrez certainement plus loin dans les cours à venir. En parler plus précisément ici serait fastidieux mais retenez juste que le code se découpe en blocs d'instructions.
      (12 votes)
  • aqualine seed style l'avatar de l’utilisateur aliou ndiaye
    pourquoi xPos est différent de xpos en langage java et quelle sera sera les conséquences dans la programmation. ?
    (1 vote)
    Default Khan Academy avatar l'avatar de l’utilisateur
  • leaf green style l'avatar de l’utilisateur Rachida  MENZEL
    Pourriez vous m'aider à trouver la variable y de l'oeil gauche de la grenouille funky et m'expliquer comment vous avez fait ? Merci
    (2 votes)
    Default Khan Academy avatar l'avatar de l’utilisateur
  • aqualine sapling style l'avatar de l’utilisateur ismoha
    je n'arrive pas a bien utiliser la documentation, c'est trop dur.
    (2 votes)
    Default Khan Academy avatar l'avatar de l’utilisateur
  • blobby green style l'avatar de l’utilisateur Jean-Marc Plantiveau
    nous avons un cadre de 400 x 400. Pourquoi est-il ainsi configuré, est-ce que cela signifie que les incursions des JS dans le HTML ne peuvent se faire que dans une résolution de 400 x 400 ?

    merci
    (2 votes)
    Default Khan Academy avatar l'avatar de l’utilisateur
    • leaf yellow style l'avatar de l’utilisateur Grard Steve
      Bonjour Jean-Marc.

      Le cadre de 400x400 a été défini dans le cadre des exercices qu'on nous propose. Il est arbitraire et volontairement "simple" pour les débutants.

      Dans la réalité, la taille des écrans diffèrent selon les résolutions de chacun (du téléphone portable aux très grands écrans).

      Dans le cadre du Web, vous verrez plus tard (si ce n'est déjà fait), que vous travaillerez avec des feuilles de style en cascade (du CSS), ou avec du JS comme ici.
      Via ces fichiers CSS, vous travaillerez notamment avec la variable "Width", en pourcentages, notamment. Pourcentages qui représenteront la largeur de l'écran sur lequel vous affichez votre donnée.

      Vous pourrez ainsi garder (pour les cas les plus simples), une proportion désirée d'un écran à l'autre.

      Cela se fait bien sur aussi en JS, hors CSS, avec d'autres expressions.
      (1 vote)
  • aqualine seed style l'avatar de l’utilisateur omardiop706
    Comment calculer la largeur d un variable
    (1 vote)
    Default Khan Academy avatar l'avatar de l’utilisateur
  • leaf green style l'avatar de l’utilisateur lamine sokhna
    pourquoi la var xpos ; 10 change dans quelque temps en xpos; 20
    (2 votes)
    Default Khan Academy avatar l'avatar de l’utilisateur
  • leafers seed style l'avatar de l’utilisateur Cerise Groupama
    C'est trop compliqué pour mon petit cerveau de moineau. Pourriez vous faire des trucs un peu plus simples s'il vous plaît?
    Cerise (QI de 2,2)
    (1 vote)
    Default Khan Academy avatar l'avatar de l’utilisateur
Vous comprenez l'anglais ? Cliquez ici pour participer à d'autres discussions sur Khan Academy en anglais.