Lexique

Variables

- Déclarer et affecter une valeur à une variable :

var id = "valeur";
let id = "valeur";
const id = "valeur"

Var : Ancienne méthode, problème de hoisting (la déclaration de la variable peut remonter).

Let : Nouvelle methode, la variable ne remonte pas.

Const : Une variable qu’on ne peut pas réassigner après sa création.

- Afficher une variable dans une console

console.log(id);

- Obtenir le type d'une variable

console.log(typeof(prenom));

Les fonctions flechées

- Cas 1 : sans parametre :

let NomFonction = () => {
    return "resultat"
}

- Cas 2 : 1 parametre :

let NomFonction = (parametre1) => {
    return parametre1.name;
}

- Cas 3 : 2 parametres :

let NomFonction = (fname, lname) => {
    return `${fname} ${lname}`;
}

L'incrémentation et la décrementation :

- L'incrémentation :

nb1 += 1;
nb1++;
++nb1

nb1 ++ : Affiche la valeur de nb1 avant incrementation

++ nb1 : Effectue l'incrementation puis affiche la valeur

- La décrementation :

nb1 -= 1;
nb1--;
--nb1

Alerte et prompt

- L'alerte :

alert("message")

Affiche une alerte a l'utilisateur

- Le prompt :

var id = prompt("Message : ");

Demande une saisie a l'utilisateur

Les fonctions

- Structure d'une fonction :

function ID(parametre) {
    var hellodisplay = "Hello " + firstname + "!";
    return hellodisplay;
}

- Structure d'une fonction (Avec Destructuring) :

function ID({parametre1, parametre2}){
    return `${parametre1} ${parametre2}`
}

- Appel d'une fonction :

display = id(parametre);

- Valeur par defaut pour les parametre d'une fonction

function carre(nb = 10) {
    return nb * nb;
}

Les conditions

- Structure d'une condition :

if (condition) {
    instructions;
}

- Exemple :

if (age > 18) {
    console.log("Tu es majeur.");
} else if (age === 18) {
    console.log("Tu as 18 ans.");
} else {
    console.log("Tu es mineur.");
}

Les tableaux numerique

Indexs	Valeurs
0	Valeur
1	Valeur
2	Valeur

Declarer et affecter un tableau numerique

- Declaration d'un tableau numerique (2 facon)

var idTableau = [];
var idTableau = new Array();li>

- Affecter ou Reaffecter des valeurs a un tableau numerique

idTableau[0] = "Contenu";
idTableau[1] = "Contenu";

- Declarer et affecter un tableau numerique sur la meme ligne

var idTableau = ["Contenu", "Contenu", "Contenu"];

- Acces simplifiées aux elements d'un tableau ou d'un objet (avec Destructuring) :

const[a, b] = tabNum;

Modifier le contenu d'un tableau numerique

- Ajouter un ou plusieurs élements a un tableau

idTableau.push("Contenu");
idTableau.push("Contenu, Contenu2");
idTableau.splice(1, 0, "contenu");

La methode splice peut ajouter des elements a une position donnee

- Retirer un element d'un tableau

idTableau.pop();

La methode pop permet de retirer le dernier élement d'un tableau

idTableau.shift();

La methode shift retire le premier élement d'un tableau

idTableau.splice(positionDemarrage, NbElementaSupprimer);

La methode splice retire un ou plusieur element d'un tableau a une position donnée

Les tableaux associatifs

Indexs	Valeurs
Nom	Cimiterra
Prénom	Alexis
Age	29

Declaration, affectation et affichage d'un tableau associatif

- Declaration et affecation

var personne = {
    nom: "Cimiterra",
    prenom: "Alexis",
    age: 29
};

- Affichage

console.table(personne);
console.log(personne.prenom);
console.log(personne["nom"]);

- Acces simplifiées aux elements d'un tableau ou d'un objet (avec Destructuring) :

const{nom, prenom} = personne;

Les tableaux a 2 dimensions

Tableau a 2 dimensions numerique et associatif

Indexs	Prénom	Nom	Age
0	Alexis	Cimiterra	29
1	Kim	Bjork	34
2	Romain	Mercier	40

Tableau a 2 dimensions numerique et associatif

- Declaration et affectation

var personne = [
    {
        nom: "Cimiterra",
        prenom: "Alexis",
        age: 29,
    },
    {
        nom: "Bjork",
        prenom: "Kim",
        age: 34,
    },
    {
        nom: "Mercier",
        prenom: "Romain",
        age: 40,
    }
];

- Affichage

console.table(personne);
console.log(personne[0].prenom + " et " + personne[1]["nom"]);

Tableau a 2 dimensions numerique

Indexs	0	1	2
0	Alexis	Kim	Antoine
1	Cimiterra	Bjork	Mercier

Tableau a 2 dimensions numerique

- Declaration et affecation

var tabPrenom = ["Alexis", "Kim", "Antoine"];
var tabNom = new Array("Cimiterra", "Bjork", "Mercier");
var Personnes = new Array(tabPrenom, tabNom);

A partir de ces 2 tableaux numerique ont creer un tableau a 2 dimensions.

- Affichage

console.table(Personnes);
console.log(Personnes[0][0]);

Affiche la position de la premiere ligne et colonne(Alexis Cimiterra).

Les Opérateurs

Les opérateurs arithmétiques

- Addition, Soustraction, Division, Multiplication :

resultat = nb1 + nb2;
resultat = nb1 - nb2;
resultat = nb1 / nb2;
resultat = nb1 * nb2;

Ne pas oublier d'initialiser les variables.

- Le modulo

resultat = nb1 % nb2;

Le reste de la division.

- Les écritures simplifiées :

nb1 = nb1 + 5;
nb1 += 5;

Les operateurs de comparaisons

- == (verifie que la valeur de 2 variables identiques)

1 == 1 > vrai

- === (compare la valeur ET le type de 2 variables)

"1" == 1 > faux

- != (verifie que la valeur de 2 variables est differentes)

1 == 1 > faux

- !== (verifie que la valeur ou le type sont differents)

1 == "1" > vrai

Les operateurs logiques

- L'operateur ET : && (nombre superieur ou egal a 1 ET inferieur ou egal a 3)

if ((nb >= 1) && (nb <= 3)) {}

- L'operateur OU : || (nombre inferieur a 1 ou superieur a 3)

if ((nb < 1) || (nb >3)) {}

- L'operateur NON, contraire de : !

var pause = false;

if (pause) {
    console.log("Pause !");
}
if (!pause) {
    console.log("Pas l'heure de la pause !");
}

L'operateur Rest (...)

- Dans l'exemple ci-dessous l'operateur REST fait une copie l'index [3] du tableau associatif pour pouvoir modifier la valeur copier et NON la valeur du tableau

let id = { ...tableauID[3] };
id.key = nouvelle_valeur;

- Dans cette exemple le Rest permet d'encapsuler le reste du tableau numerique dans une valeur, en l'occurence une valeur dans C et le reste dans D

const tabNum2 = [1, 2 ,3];
const[c, ...d] = tabNum;

Les Boucles

Les boucles "TANT QUE"

While

Demande au moins une fois l'infos a l'utilisateur

var i = 1;
while (i <= 10) {
    console.log(i + " boucle while fois");
    i++;
}

Do...While

Demande au moins une fois l'infos a l'utilisateur

i = 1;
do {
    console.log(i + " do while fois");
    i++;
} while (i <= 10);

For

Quand ont connait a l'avance le nombre d'iteration

for (var j = 1; j <= 10; j++) {
    console.log(j + " for fois");
}

For... In

Pratique pour parcourir les cles d'un tableau associatif

var contact = {
    nom: "Cimiterra",
    prenom: "Alexis",
    tel: "0606904511",
    email: "cimiterra.alexis@outlook.fr"
};

for (var key in contact) {
    console.log(key + " : " + contact[key]);
}

For... Off

Principalement pour parcourir les valeurs

var names = ["Etienne", "Sebastien", "Clement", "Virginie"];

for (var name of names) {
    console.log(name);
}

var etudiants = [
    {
        prenom: "José",
        nom: "Garcia",
        matieres: {
            francais: 15,
            anglais: 5,
            humour: 15
        } 
    },
    {
        prenom: "Antoine",
        nom: "De Caunes",
        matieres: {
            francais: 15,
            anglais: 5,
            humour: 15,
            informatique: 4,
            sport: 10
        }
    }
];

var total = 0;
var count = 0;

for (var etudiant of etudiants) {
    console.log(etudiant.nom + "  " + etudiant.prenom);

    for (var matiere in etudiant.matieres) {
        console.log(etudiant.matieres[matiere]);
        total = etudiant.matieres[matiere] + total;
        count++;
    }

    console.log(total / count);
}

Les boucles d'iteration

.ForEach()

Fais quelque chose pour chaque element du tableau

IDTableau.forEach(function(ID){
    console.log(ID.name);
})

.map()

Pour retourner l'element choisi du tableau

const listID = IDTableau.map(function(ID) {
    return ID.name;
});

.find()

Pour chercher le premier element (Retourne un seul element)

const ID = IDTableau.find(function(ID){
    return vegetable.name.includes("ID_CHERCHER");
});

.filter()

Trouver des elements (Retourne toujours une tableau)

const IDS = IDTableau.filter(function(ID){
    return vegetable.name.includes("ID_CHERCHER");
});

Les classes et heritage

Classe et methode

Creation d'une classe :

class className {
    constructor(parameter1, parameter2){
        this.parameter1 = parameter1;
        this.parameter2 = parameter2;
    }
}

Creation d'une methode :

getParameter1-2(){
        return `${this.parameter1} ${this.parameter2}`;
    }

Classe avec heritage

Creation d'une classe avec un heritage

Super sert à appeler les méthodes du parent, pas accéder aux propriétés.

class newClassName extends classHerited{
    constructor(parameter1, parameter2, parameter3){
        super(parameter1, parameter2);
        this.parameter3 = parameter3;
    }

    getParameter3(){
        return this.parameter3;
    }

    display(){
        return `${super.getParameter1-2()} - ${this.parameter3()}`;
    }
}

Externalisation des fichiers

Main.js

let voiture = new Voitures("Renault","Twingo",20000,2002,"non");
let moto = new Motos("Kawasaki","ER6-N",22555,2012);

Vehicules.js

export default class Vehicules {
constructor(marque, modele, kilometrage, annee) {
    this.marque = marque;
    this.modele = modele;
    this.kilometrage = kilometrage;
    this.annee = annee;
}

    display() {
        return `${this.marque} - ${this.modele} 
        ${this.kilometrage} - ${this.annee}`;
    }
}

Voitures.js

import Vehicules from './Vehicules.js';

export default class Voiture extends Vehicules {
    constructor(marque, modele, kilometrage, annee, clim = "oui") {
        super(marque, modele, kilometrage, annee);
        this.clim = clim;
    }
    
    display() {
        return `Voiture : ${super.display()} - ${this.clim}`;
    }

}

Motos.js

import Vehicules from './Vehicules.js';

export default class Moto extends Vehicules {
    display() {
        return `Moto : ${super.display()}`;
    }
}