> For the complete documentation index, see [llms.txt](https://wiki.nerumir.fr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.nerumir.fr/programmation/poo-object-oriented-programming/les-variables.md).

# Les variables

Il est important de préciser le fonctionnement de base des variables en `JavaScript` avant d'expliquer la manipulation du `DOM`.

## Variables locales

C'est le type de variables le plus commun. Il sert pour toutes les petites actions de base. Ces variables n'existent que dans le code dans laquelle elle se trouve. Par exemple, dans cet exemple :

```javascript
var hello = "Bienvenue";

function saluer(msg){
    var test = "coucou";
    console.log(msg);
}

saluer(hello);
saluer(msg);
console.log(test);
```

Nous créons une variable `hello` avec la valeur `"Bienvenue"`. Cette variable va exister partout dans ce code, puisqu'elle a été créée à l'extérieur de la fonction, donc au même niveau que tout le reste du code. Ce n'est pas le cas de la variable `test` qui a été créée au sein de la fonction `saluer`. Ainsi, la dernière ligne essaye d'afficher `test` dans la console, mais n'y parviendra pas et générer une erreur. En effet, `test` n'existe que dans la fonction dans laquelle elle est définie. C'est une variable locale. De même pour `msg`, elle est définie comme argument de la fonction `saluer`, elle n'existe alors pas à l'extérieur de celle-ci. Ainsi, l'avant dernière ligne générera également une erreur. La ligne `saluer(hello);` en revanche, fonctionnera.

## Attributs et méthodes d'objets

Commençons avec les bases de la programmation orientée objet. Un objet est simplement quelque chose qui possède des attributs et des méthodes. Les méthodes sont des fonctions propres à l'objet et les attributs sont des variables propres à l'objet. Vous comprendrez cela plus en détail sur la page suivante. En attendant voici un exemple :

```javascript
//On créé un objet tableau
var tab = [];
//on utilise la méthode "push" de l'objet tab pour ajouter un élément à notre tableau
tab.push("coucou");
tab.push("salut");
tab.push("Bienvenue");

//On affiche tab dans la console
console.log(tab);
//Le résultat sera : ["coucou","salut","Bienvenue"]

//On peut également consulter la valeur de l'attribut "length" pour avoir la longueur
//du tableau
console.log(tab.length);
//Nous ne pouvons pas modifier cette valeur, mais si c'était possible, on s'y
//prendrait comme cela :
tab.length = 4;
```

{% hint style="warning" %}
On peut voir dans l'exemple ci-dessus que la méthode `push` est propre à notre objet `tab` puisqu'elle le concerne lui, et lui seul. De même pour son attribut `length`. Au niveau du vocabulaire, une `classe` est un objet dans lequel nous définissons les `attributs` et les `méthodes` de ses `instances`. Dans la `classe` voiture, je peux décrire des `méthodes` et des `attributs`, puis ensuite, on appelle "`instance`" de la `classe` voiture un objet possédant le comportement (les `méthodes` et `attributs`) décrits par la `classe` voiture. Je peux donc créer l'`instance` `Peugeot 307` de la `classe` voiture et utiliser toutes les `méthodes` et `attributs` décrits dans cette `classe`.
{% endhint %}

## Variables globales

Il est possible de modifier voire de créer une variable globale, c'est à dire accessible de partout. Pour cela, il faut la définir comme attribut de l'objet `window` qui est un peu l'objet "absolu" de notre page. Cet objet est accessible d'absolument partout en temps réel. Voici un exemple de création et d'utilisation d'une variable globale. Dans d'autres langages, nous définissons juste une globale. Ici, nous utilisons donc cette classe universellement accessible :

```javascript
//Création de la variable globale comme attribut de window
window.prenom = "Didier";
//Récupération de sa valeur dans une autre variable
var chien = window.prenom;
//Afficher "Didier" dans la console, de deux manières différentes...
console.log(chien);
console.log(window.prenom);
//Modification de cette variable globale au sein d'une fonction
function changerPrenom(prenom){
    window.prenom = prenom;
}
//Execution de la fonction
changerPrenom("Samantha");
//Afficher la nouvelle valeur de la variable globale, donc "Samantha".
console.log(window.prenom);

//La valeur a été changée dans une fonction, mais pourtant, elle reste accessible
//de partout, puisque c'est une variable, globale, car créée comme attribut de
//l'objet window.
```

{% hint style="info" %}
Pour utiliser une variable de manière globale, nous ne sommes pas obligés d'utiliser l'objet `window`. Selon la situation, nous pouvons être amenés à définir des attributs d'objets différents et plus arrangeant que `window`.
{% endhint %}