Comprendre Javascript

La version la plus utilisée en 2017 reste la version ES5, c'est le javascript "classique". Essayons de comprendre les particularité de JavaScript à partir de quelques exemples.

Tous les exemples ci-dessous peuvent être réalisés dans une page html entre deux balises script.

Une fonction simple

function Calcul(a ,b)
{
return a + b;
}

document.write(Calcul(5,4));

Une fonction peut être utilisée avec une variable.

var y = Calcul;
document.write(y(7,7));

Une fonction anonyme peut être utilisée avec une variable.

var x = function(a, b)
{
return a * b;
}

document.write (x(6,7));

Une fonction en paramètre d'une fonction

function diviser(f, b)
{
    return f(5,6) / b
}

document.write(diviser(x, 5)); //le x représente la fonction définie dans l'exemple précédent

Une fonction anonyme en paramètre d'une fonction

document.write(diviser(function(a,b){return a + b + 1}, 2 ));

Une fonction permet aussi de définir une classe

Tous les membres sont publics.

function Rectangle()
{
    this.longueur = 5;
    this.largeur = 10;

    this.Calcul = function()
    {
        return this.largeur * this.longueur;
    }
}

var r = new Rectangle();
document.write(r.Calcul());

La fonction qui définit la classe peut aussi être utilisée comme un constructeur

function Rectangle1(a, b)
{
    this.longueur = a;
    this.largeur = b;

    this.Calcul = function()
    {
        return this.largeur * this.longueur;
    }
}
var r1 = new Rectangle1(9,9);
document.write(r1.Calcul());

Javacript est un langage orienté prototype. Toutes les classes héritent de la classe object et de la méthode Object.prototype. Si une méthode n'est pas trouvée dans une classe JavaScript va la chercher dans le prototype. Si vous définissez une méthode avec this comme dans Rectangle1 (exemple précédent), chaque objet va avoir sa propre version de la méthode. En définissant la méthode dans le prototype tous les objets vont se partager la même méthode.

function Rectangle2(a, b)
{
    this.longueur = a;
    this.largeur = b;

}

Rectangle2.prototype.Calcul = function()
{
    return this.largeur * this.longueur;
}
var r2 = new Rectangle1(10,10);
document.write(r2.Calcul());

Création d'un objet avec la notation litérale

On utilise la notation litérale lorsqu'on veut créer un seul objet, il n'y a pas d'instanciation.

var Personne = {
    naissance : 1990,
    nom : "durant",

    CalculAge : function()
    {
        return 2017 - this.naissance;
    }
}
document.write(Personne.nom);
document.write(Personne.CalculAge());

On peut aussi définir des champs et des méthodes privées en utilisant le Revealing Pattern.

On crée une fonction anonyme qui s'appelle elle-même et qui retourne un object literal dont on veut exposer les méthodes.

   
var Personne1 = (function(){
    //Les champs sont privés
    var naissance = 2016;
    var nom = "durant";

    var CalculAge = function()
    {
        return 2017 - naissance;
    }

    return {
    calcul : CalculAge
    }
})();   //noter l'appel de la fonction au moment de la déclaration 

document.write(Personne1.calcul());
//Pas d'accès à Personne1.nom

Création d'un objet JSON

La notation JSON dérive de la notation litérale, c'est la réprésentation sérialisée d'un objet litéral.

On ne peut pas avoir de fonction dans une chaîne JSON. Pour créer un objet JSON il faut que les identifiants soient entre guillemets.

La chaine JSON doit être transformée en objet avec la méthode JSON.parse.

var Personne2 = '{ "naissance" : 1990, "nom" : "alex" }';

var p = JSON.parse(Personne2);
document.write(p.nom);
 

Les closures

Quand une fonction est définie dans une autre fonction on appelle cela une closure en JavaScript.

La fonction interne a accès aux variables locales de l'autre fonction. Dans l'exemple titre est accessible par afficher.

function Test()
{
    var titre = "Mme";
    var afficher  = function(msg)
    {
    document.write(titre + " " + msg);
    }
    afficher("durant");

}
Test();

Il n'y a rien de difficile, la difficulté survient avec les tableaux de fonctions et les évenements, la compréhension peut s'avérer complexe. Il faut comprendre dans quel environnement se déroule la fonction.