Initiation au javascript.md

Introduction

Ci-dessous, vous trouvez une introduction au Javascript (en version ECMAScript 5). Les exemples ci-dessous sont prévus pour pouvoir être copier/coller dans un terminal Javascript directement.

N'hésitez pas à compléter/corriger via des pull-request ou des commentaires.

Eviter la portée globale des variables

(function () {
    
})();

S'il on peut passer des variables globales à l'intérieur de notre fonction de protection, on fera ainsi:

maVariableGlobale = 'ee';
(function (maVariableCopierEnLocal) {
    window.console.log(maVariableCopierEnLocal); // affichera 'ee' dans le terminal.
    maVariableCopierEnLocal = 'nouvelle valeur';
    window.console.log(maVariableCopierEnLocal); // affichera 'nouvelle valeur' dans le terminal.
})(maVariableGlobale);
window.console.log(maVariableGlobale); // affichera 'ee' dans le terminal.

Ainsi, si maVariableGlobale change de nom et devient maVariableGlobaleDeFou, il suffit de changer que la dernière ligne pour changer le nom de la variable contenue entre les parenthèses.

'use strict';

Permet de définir des règles plus strictes pour ton code Javascript. Il faut le placer à l'intérieur d'une fonction qui est exécutée directement si non, il ne s'appliquera pas sur le code dans la fonction. On aura donc ceci:

(function () {
    'use strict';
})();

La suite des exemples se placent dans un contexte 'use strict'.

L'objet window

Concrètement, il n'est pas nécessaire d'appeler l'objet window pour exécuter une de ses fonctions car toutes les fonctions appelées et qui ne sont pas déclarées aux préalables (ainsi que pour les variables) seront cherchées dans l'objet window. Mais pour un meilleur respect des normes, on utilise window. devant pour être sur d'appeler la bonne méthode. On peut faire ceci également par exemple:

(function (console) {
    'use strict';

    console.log('J\'explique ensuite à quoi sert console');
})(window.console);

Afficher un message dans la console

window.console.error('Une erreur bloque le programme');
window.console.warn('Quelque chose n\'est pas super, mais ça fonctionne quand meme');
window.console.debug('Un message que pour le développement');
window.console.log('Un message pour noter qu\'une action/opération a eu lieu');
window.console.info('Toute information qu\'on veut afficher');

Concrètement, cela importe peu lequel est utilisé sauf le warning et le error qui afficheront des pictos dans l'outil de débug et qui peuvent éventuellement être notifiés à l'utilisateurs dans les vieux navigateurs ou avec des plugins.

Déclarer une variable et la setter

var uneVariable;
uneVariable = 'ee';

var uneSecondeVariable = 'DirectementSetter';

La valeur undefined

Une variable qui n'est pas setter (var variableNonSetter;) aura pour valeur undefined. On peut bien sur attribuer nous même cette valeur à une variable ou en retour d'une fonction pour différencier d'un retour null, etc.

Manipulation de chaînes (string)

• Concaténation de chaînes

var monTexte = "Texte";
monTexte += " complet"; // on peut écrire ceci aussi: monTexte = monTexte+" complet";
window.console.log(monTexte); // affichera "Texte complet"

• Longueur d'une chaîne

var monTexte = "Texte";
window.console.log(monTexte.length); // affichera 5

• Chercher dans une chaîne l'existence d'un contenu

var monTexte = "Texte";
window.console.log(monTexte.search('e')); // affichera 1 car la première lettre 'e' se trouve en position 1 (on commence à compte à partir de 0)
window.console.log(monTexte.search('te')); // affichera 3 car la première fois que l'on trouve 'te' se trouve en position 3
window.console.log(monTexte.search('tu ne me trouveras pas')); // affichera -1 car on ne trouve pas cette chaine dans la variable
window.console.log(monTexte.search(/t?e/)); // affichera 1. on peut utiliser les expressions régulières pour chercher également

• Chercher dans une chaîne et en extraire les résultats trouvé

var monNomDeFichier = "monFichier.txt";
monNomDeFichier.match(/[^.]*$/); // retournera ["txt"] car la fonction renvoye un tableau des résultats trouvés.
monNomDeFichier.match(/i/g); // retournera ["i", "i"] car il aura trouvé deux "i" dans la chaine. le g à la fin permet de signaler qu'il doit continuer jusqu'à la fin même s'il a trouvé un résultat.

Déclarer une fonction

function maFonction() {
    // ne fait rien
}

function maFonctionAvecDesParametres(parametreUn, parametreDeux) {
    // ne fait rien
}

function maFonctionAvecUnRetour(parametreUn, parametreDeux) {
    return parametreUn + parametreDeux;
}

Condition

@TODO

Boucles

@TODO

Déclarer un tableau et utiliser un tableau

• Créer un tableau vide: Deux façons pour créer un tableau avec le même résultat à la fin:

var monTableau = [];
// ou bien
var monTableau = new Array();

• Créer un tableau pré-remplit: Toujours deux façon qui produisent le même résultat. Un tableau peut contenir n'importe quoi. Aucune restriction. Note: Un tableau est considéré comme un objet (contrairement à du PHP).

var monTableau = ['valeur 1', 5, new Array('Un autre tableau dans le tableau')];
// ou bien
var monTableau = new Array('valeur 1', 5, ['Un autre tableau dans le tableau']);

Note: On peut bien sur utiliser les deux synthaxes en même temps pour créer des tableaux (comme ci-dessus), mais c'est toujours plus simple pour comprendre un code d'essayer de normaliser sa façon d'écrire.

Manipuler les tableaux

• Ajouter un élément à la fin du tableau

var monTableau = [];
monTableau.push('nouveau element');

• Supprimer le dernier élement d'un tableau

var monTableau = ['element'];
var elementSupprime = monTableau.pop();
window.console.log('L\'élément supprimé était :'+elementSupprime);

• Ajouter un élément en début

var monTableau = ['vas devenir le second element'];
monTableau.unshift('premier element');
window.console.log('Le premier element est :'+monTableau[0]);

• Supprimer le premier élément d'un tableau

var monTableau = ['element 1', 'element 2'];
var elementSupprime = monTableau.shift();
window.console.log('L\'élément supprimé était :'+elementSupprime);

• Connaitre la longeur d'un tableau

var monTableau = ['element 1', 'element 2'];
window.console.log('La longueur de mon tableau est :'+monTableau.length);

• Itérer sur un tableau

@TODO

Les objets

• Créer un objet vide

Comme pour le tableau, plusieurs façon, essayer de s'armoniser sur une façon unique.

var monObjet = {};
// ou bien
var monObjet = new Object();
// ou bien mais moins courante pour faire seulement ceci.
var monObjet = Object.create(null);

• Définir des propriétés/méthodes d'objet à sa construction

var monObjet = {
    unePropriete: 'ee',
    uneMethod: function () {
        // fais quelque chose.
    }
};

• Accéder aux propriétés/méthodes d'objet

var monObjet = {};
window.console.log(monObjet.maVariable); // affichera `undefined` car n'existe pas encore
monObjet.maVariable = 'ma nouvelle valeur';
window.console.log(monObjet.maVariable); // affichera `ma nouvelle valeur` car on vient de la créer
var nomDeMaPropriete = 'maVariable';
window.console.log(monObjet[nomDeMaPropriete]); // affichera `ma nouvelle valeur` car la valeur de la variable `nomDeMaPropriete` est utilisée pour trouver une propriété de l'objet ayant ce nom
monObjet.maMethode = function () {
    return 'coucou';
};
window.console.log(monObjet.maMethode); // affichera: function () { return 'coucou'; } car on demande le contenu de la variable
window.console.log(monObjet.maMethode()); // affichera: `coucou` car on exécute la méthode contenu dans la propriété `maMethode` de `monObjet`

• La notion de this

Comme dans la plus part des languages objets, il existe une notion de contexte. Celui-ci permet au sein d'un même objet d'utiliser les autres propriétés/méthodes de l'objet instancié. Représenté par le mot clé this, voici un exemple:

var monObjet = {
    retourneHello: function () {
        return 'Hello';
    },
    ajouteHelloAuDebut: function (maChaineACompleter) {
        return this.retourneHello()+' '+maChaineACompleter;
    }
};

monObjet.ajouteHelloAuDebut("world"); // retournera `"Hello world"`

Cependant, le contexte représenté par this peut évoluer dans un programme dans le temps. Par exemple:

var monObjet = {
    retourneHello: function () {
        return 'Hello';
    },
    afficheHelloQuandOnRedimensionneLaFenetre: function () {
        window.addEventListener(
            'resize',
            function () {
                window.console.log(this.retourneHello());
            }
        );
    }
};

monObjet.afficheHelloQuandOnRedimensionneLaFenetre();

Si on redimensionne la fenetre, cela produira l'erreur suivante: Uncaught TypeError: this.retourneHello is not a function. Ceci est dû au fait qu'un nouveau contexte est créé et donc this ne représente plus le même objet et donc ne connait plus notre méthode. Pour palier le problème, voici une solution:

var monObjet = {
    retourneHello: function () {
        return 'Hello';
    },
    afficheHelloQuandOnRedimensionneLaFenetre: function () {
        var self = this; // On mémorise le contexte actuel dans une nouvelle variable
        window.addEventListener(
            'resize',
            function () {
                window.console.log(self.retourneHello()); // on utilise la variable qui contient l'ancien contexte au lieu de this qui contient le nouveau contexte.
            }
        );
    }
};

monObjet.afficheHelloQuandOnRedimensionneLaFenetre(); // affichera "Hello" dans le terminal à chaque redimensionnement de la fenêtre.

• Itérer sur un objet

@TODO

• Getter & Setter dans un objet pour réaliser des variables "privées".

var monObjet = (function () {
    var maVarPrive;
    
    var monObjet = {
        get maVar() {
            return maVarPrive;
        },
        set maVar(newVar) {
            maVarPrive = ++newVar;
        }
    }
    
    return monObjet;
})();

Events & Promise

@TODO

Ressources

Un memento plus concis et avec moins d'exemple