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 :

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 :

//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;

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.

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 :

//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.

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.