---
title: EcmaScript
tags: support, javascript, good practice
robots: noindex, nofollow
author: Giuseppe Militello
---
# Cours ECMAScript et installation de l'environnement de travail Babel
> © [Giuseppe Militello](https://www.linkedin.com/in/giuseppe-militello-22406ab0/) - All rights reserved for educational purposes only

## Intriduction
**ES6** est la version la plus récente de la norme ECMAScript, qui est utilisée pour définir le langage JavaScript. Elle a été publiée en 2015 et a apporté de nombreuses nouvelles fonctionnalités et améliorations au langage, telles que les classes, les fonctions fléchées, les promesses et bien d'autres.

L'une des principales caractéristiques d'ES6 est sa capacité à rendre le code JavaScript plus concis et plus facile à lire, en introduisant de nouvelles constructions de langage qui permettent aux développeurs d'écrire du code plus propre et plus maintenable.

Certaines des fonctionnalités les plus populaires de ES6 incluent les variables let et const, les fonctions fléchées, les classes, les modules, les promesses, les itérateurs et les générateurs.

ES6 est devenu largement pris en charge par les navigateurs modernes, ce qui signifie que les développeurs peuvent maintenant utiliser ces nouvelles fonctionnalités sans avoir à se soucier de la compatibilité du navigateur.

En fin de compte, ES6 a considérablement amélioré la façon dont les développeurs travaillent avec JavaScript, et est devenu une norme pour de nombreuses applications Web modernes.

## L'univers javascript dans l'apprentissage : langages et frameworks

## NPM
> #### <i class="fa fa-gear fa-spin fa-2x" style="color: #2980b9; vertical-align: middle"></i> Configuration

vérifier la version npm
puis npm init
npm install --save-dev babel-cli babel-preset-env

Ajouter dans le fichier jSon la ligne de code qui suit : "build": "babel --no-babelrc src -w -d js --preset=env"
Cibler le répertoire "SRC" et commande :npm run build

Nota bene : pour installer le CLI faire d'abord npm init pour le package.json

## Package jSon de configuration:

{
  "name": "my_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel --no-babelrc src -w -d js --preset=env"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0"
  }
}

## Tester le DOM par la fonction global:

document.addEventListener("DOMContentLoaded",()=>{
    console.log(document)
    //affiche les propriété de l'objet document
    
})
    

## Tester le BOM par l'objet navigator

    const userLang = navigator.language || navigator.userLanguage; // Langue principale du client
    console.info(`Langue détectée : ${userLang}`);
    document.getElementById("lang").textContent += ` Client détectée : ${userLang}`;

## Les opérateurs en programmation:

    /*
    liste des opérateurs
    + additionner
    - soustraire
    ++ incrementer
    -- décrementer
    / diviser
    == strictement égale
    = affectation de valeur
    += ajouter une valeur
    -= enlever
    || ou
    && et
    >
    <
    >=
    <=
    % modulo
    */

## Exemple js. Opérateurs utilisés: =, ==, - and %

    let nombres = 10;
   console.log(nombres%2) //résultat
   console.log(null == undefined)
   let nombre= 20
   console.log(nombre)
   //vérifier si un chiffre est paire ou impaire
    nombre%2 == 0 ? console.log(`chiffre paire ${nombre}`) :  console.log(`chiffre impaire ${nombre}`)       
   //condition ternaire
   let annee = 2023
   let ages = 53
   console.log(`Vous êtes né(e) ${annee - ages}`)

## Les tableaux &amp; itérations:

    let lang = ["html", "css", 2020] //array base
   
    let ensemble = [...lang,...dates] //spread operator
    let elements = document.querySelector("ul")

    console.table(ensemble) // print out

    // iteration init, condition and test

    let put_print = String("") //ref variable in for
    for(i = 0; i < ensemble.length; i++){ 
        console.log(`${i} : ${ensemble[i]}`)
        //elements.innerHTML+=`<li>${ensemble[i]}</li>`
        put_print += `<li>${ensemble[i]}</li>`
    }
    elements.innerHTML=put_print 
  
   

    //while method
    let compt = 0
        while(compt < ensemble.length){
           
            console.log(ensemble[compt])
            compt ++
           
        }

    //foreach method
    ensemble.forEach((cle, valeur) =>{
        console.log(valeur+" "+cle )
    })


    # méthode do while
    let i = 0;
    do {
        ++i // i incrémente avant son utilisation
        console.log(i+" "+ensemble[i]+"\n")
    }
    while(i < ensemble.length)

## Manipulation des chaines de caractères
>Les chaînes de caractères sont une partie essentielle de la programmation en Javascript. Elles sont utilisées pour stocker et manipuler du texte. Voici quelques opérations de base et avancées que vous pouvez effectuer sur les chaînes de caractères.
1. **Création de chaînes de caractères**
Il existe plusieurs façons de créer des chaînes de caractères en Javascript :

let simpleQuote = 'Bonjour';
let doubleQuote = "Hello";
let templateString = `Salut`;

2. **Concaténation de chaînes de caractères**

let greeting = "Hello";
let name = "World";
let combined = greeting + " " + name; 

//template string à partir de ES6
let templateCombined = `${greeting} ${name}`; 

3. **Accéder aux caractères d'une chaîne**
Les chaînes de caractères sont indexées, ce qui signifie que chaque caractère a une position (indice) dans la chaîne, commençant par zéro.

let str = "JavaScript";
console.log(str[0]); // affiche "J"
console.log(str[4]); // affiche "S"

console.log(str.length); // affiche 10 = nombre de caractères

La propriété `length` prend en charge le nombre de caractères contenus dans une chaine

4. **Méthodes de manipulation des chaînes**
Il existe de nombreuses méthodes pour manipuler les chaînes de caractères en JavaScript. Voici quelques-unes des plus courantes :

let str = "JavaScript";
console.log(str.toUpperCase()); // maj "JAVASCRIPT"
console.log(str.toLowerCase()); // min "javascript"

console.log(str.indexOf('a')); // 1 à partir de 0

5. La méyhode `slice()` pour trouver une partie de la chaine

let str = "JavaScript";
console.log(str.slice(0, 4)); // A partir de l'index  0 "Java"
console.log(str.slice(4)); // A partir de la 4ème lettre "Script"

6. Méthode `substring()` ou `substr()`

let str = "JavaScript";
console.log(str.substring(0, 4)); // "Java"
console.log(str.substring(4)); // "Script"

console.log(str.substr(0, 4)); // "Java"
console.log(str.substr(4, 6)); // "Script"

7. Méthode replace : `replace()`
La méthode qui vous permet de remplacer une sous-chaine

let str = "JavaScript is great";
console.log(str.replace('great', 'awesome')); // Remplace "great par awesome"

8. La méthode `split()`
Opère sur la division d'une chaine de caractère en un tableau

let str = "JavaScript is great";
let words = str.split(" ");
console.log(words); // affiche ["JavaScript", "is", "great"]

9. Méthode `includes()`
Cherche des chaînes ou des motifs spécifiques dans une chaîne :

let str = "JavaScript is great";
console.log(str.includes("Java")); // true
console.log(str.includes("Python")); // false

10. `trim()`, `trimStart()`, et `trimEnd()`
Suppression des espaces : pratique pour un formulaire

let str = "  JavaScript is great  ";
console.log(str.trim()); // "JavaScript is great"
console.log(str.trimStart()); // "JavaScript is great  "
console.log(str.trimEnd()); // "  JavaScript is great"

## Ajouter un caractère entre les chaines

const numero = '06 82 24 33 00';
let affiche = numero.replace(/ /g, '-')

console.log(affiche) // 06-82-24-33-00

## Exemple de l'objet &amp; itérations

    //array x,y
    const persons =[
            {
                nom : "Berner Lee",
                prenom : "Tim"
            },
            {
                nom : "Each",
                prenom: "Branden"
            }
        ]
    console.table(persons[1].prenom)
    
    for(i = 0; i < persons.length; i++){
        console.log(`${persons[i].nom} ${persons[i].prenom}`)
    }
    persons.forEach((cle) =>{
        console.log(cle.nom+' '+cle.prenom)
    })

    for(let key in persons){
        console.log(key+' '+persons[key].nom)
    }

})

// Méthode filter() pour les tableaux
const product=[
    {name: "car", price: 6000},
    {name: "Bike", price: 150},
    {name: "phone", price: 700},
    {name: "Watch", price: 200},
    {name: "pen", price: 8},
    {name: "bag", price: 50},
    ];
const filterRedItems = product.filter((row) => row.price  < 200)
console.table(filterRedItems)

ou

const filterRedItems = product.filter((row) => row.price  < 200)
for(let data of filterRedItems){
    console.log(data.name+" "+data.price)
}

affiche : 
    Bike 150
    pen 8
    bag 50



// résultat

| Index | name  |price|
|------:|-------|-----|
|     0 | Bike  |150  |
|     1 | pen   |8    |
|     2 | bag   |50   |

// La mméthode map() pour les tableaux d'objet

const mapItems = product.map((row) => row.name)
// On peut returner la clé ou la valeur ou les 2

// Méthode find() cible le premier élément trouvé
const findItem = product.find((row)=>row.price === 80)

// la condition va trouver l'objet associé à ce prix

{ name: 'bag', price: 50 }

// si jamais cet élément n'est pas trouvé alors la condition envoi
undefined

## Que renvoi ce code?

let age = 20;
let majeur = 0;
// try catch...
try{
    majeur = age >= 18;
    throw majeur
}
catch(e){
    console.log(e)
}

## L'exception en javascript: try..catch()

        const x = 20;
          
            
            //On teste la valeur envoyée
            try{
                //Si ce n'est pas un nombre ou si elle est vide...
                if ((isNaN(x)) || (x =='')) {
                    //On lance une exception avec le message ci-dessous
                    throw 'Vous n\'avez pas envoyé de nombre';
                  
                }
                //Si le nombre n'est pas dans l'intervalle
                else if ((x < 1) || (x > 10)) {
                    //On lance à nouveau une exception avec un autre message
                    
                    throw 'Valeur trop grande ou trop petite';




                }
                else{
                
                   throw 'Nombre ok';
                }
            }
            /*Si une exception a été lancée, on la récupère dans "e" et on
             *affiche le message d'erreur correspondant dans notre paragraphe*/
            catch(e){
                console.error(e);

        }

## Les switch

const main = ()=>{

   let choixmenu;
        console.log("=== Menu ===");
        console.log("1. Royal Cheese");
        console.log("2. Mc Deluxe");
        console.log("3. Mc Bacon");
        console.log("4. Big Mac");
        console.log("Votre choix ?");

     /* choix du menu */
    choixmenu = 4;
    
    switch(choixmenu){
        case 1 :
            console.log("Royal Cheese");
        break;
        case 2 :
            console.log("Mc Deluxe");
        break;
        case 3 :
            console.log("Mc Bacon");
        break;
        case 4 :
            console.log("Big Mac");
        break;
        default :
            console.log("Vous n'avez rien choisi");
        }
   
    
}

## Boucle &amp; et condition

const user = {
    nom: "Doe",
    prenom: "John",
    address : {
        rue: "27 av NY",
        ville: "NY"
    }
}

// console.log(user.address.ville)

for(let data in user){
    if(user.address!==user[data]){
        console.log(data+" "+user[data]);
    }
    else{
        for(let data in user.address){
           console.log(data+" "+user.address[data]); 
        }
    }
   
}

## Les objets

/* Si dans un tableau d'objet on veut afficher à la fois la clé et la valeur 

Clé: nom, Valeur: Berner Lee
Clé: prenom, Valeur: Tim
Clé: nom, Valeur: Each
Clé: prenom, Valeur: Branden

*/
const persons = [
    {
        nom: "Berner Lee",
        prenom: "Tim"
    },
    {
        nom: "Each",
        prenom: "Branden"
    }
];

// Parcourir le tableau d'objets : 
// Object.keys(persons) ou Object.value(persons)
persons.forEach(person => {
    // Parcourir les clés de chaque objet
    for (const key in person) {
        if (Object.hasOwnProperty.call(person, key)) { 
             const value = person[key];
            // attetion person est un itérateur
            console.log(`Clé: ${key}, Valeur: ${value}`);
        }
    }
});

/* pour l'affichage finale */


   const Users =({
        first_name : "John",
        last_name : "Doe",
        fullname(){
            console.log(`${this.first_name} ${this.last_name}`.toUpperCase())
        }
   })

  Users.fullname()
  console.log(`Hello`.toUpperCase())

## Fonctions utiles pour certains affichages

const number = '0682243300';

// Ajouter un point après chaque paire de chiffres
let formattedNumber = '';
for (let i = 0; i < number.length; i += 2) {
    
    formattedNumber += number.substring(i, i + 2) + '.';
}

// Supprimer le dernier point ajouté
formattedNumber = formattedNumber.slice(0, -1);

console.log(formattedNumber);

## Affichage d'une date complète avec des options

    /*Bien sûr ! En ES6, vous pouvez utiliser l'objet Date et ses         méthodes pour afficher une date complète. Voici un exemple :

javascript*/

const currentDate = new Date();

const options = {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  timeZoneName: 'short'
};

const formattedDate = currentDate.toLocaleDateString('fr-FR', options);

console.log(formattedDate);

## Fonctions &amp; méthodes

    /* fonction */

    const build = function(){
        console.log(this)
    }
    build()
    
    const calc = (n)=>{
        return n *10
    }
    calc(10)
    
   let notes = [12,9,10]
  
   const upNotes = (n) => {
        return n[0]
   }
   console.log(upNotes(notes))
   
  /*  Calcule de la moyenne | accumulator, currentValue */
   let affiche = notes.reduce((a, c) => a + c) / 3
   
   console.log(affiche.toFixed(2))
   
   /* appel un élément par les paramètre de la fonction */
   let compte = 0;

    let score = (el)=>{
        return el.innerText = ` ${compte}`
    }

/* exemple pratique d'une fonction param */
 const call_el = (el)=>{
        el.innerText += ` cours ES6, 7, 8`

   }

  call_el(document.querySelector('section h2'))

/* grace à cette fonction on peut choisir à la volé quel élément html 
 va afficher le contenu */

btn.addEventListener("click",()=>{
    compte ++;
    /* coix du selecteur dans les param de la foucntion
    score(document.querySelector(".compter"))

})
/* attention à la différence de syntaxe */
 btn.addEventListener("click",(e)=>{
    
    console.log(btn)
    e.stopPropagation()
    // cette méthode prend en charge de stopper toutes événement autour de l'élément bouton

 })
    
/* fonction classiques */
    function nom_de_la_fonction(){
        console.log('instruction')
    }

    /* function anonyme */
    const nom_de_la_variable = function(){
        console.log('instruction')
    }

    /* function flechée */
    const nom_de_la_variable = ()=>{
        console.log('instruction')
    }

    /* function isolée */
    (function(){
        console.log('instruction')

        /* les instructions seront 
        prise en compte à l'intérieur 
        de la fonction */
        
    })()
    
 /*
    je surcharge ici le type natif String en
    lui ajoutant la méthode sayHello
*/
String.prototype.sayHello = function(){
console.log("Hello\n")
}

const firstName = "Thomas"
// J'appelle ma méthode sayHello ici
firstName.sayHello()
console.log(firstName)

// Attention le code suivant ne designe pas une fonction mais un constructeur 

let User = function(nom, prenom){
   this.nom = nom;
   this.prenom = prenom
    }

let users = new User("Berners", "Lee")
console.log(users.nom)
users = new User("Eich")
console.log(users.nom)


//Ceci permet de créer différentes instance de User à partir d'un seul constructeur
    
//Une classe avec constructeur

// Your code here!
class Movie {
   constructor(title, releasedDate, duration) {
       this.title = title
       this.releasedDate = releasedDate
       this.duration = duration
   }
   getMovie(){
       return this.title+" "+ this.releasedDate+" "+this.duration;
   }
}


// Ici j'instancie quelques classes de films
const PredatorMovie = new Movie("Predator", 1987, 107)
const TerminatorMovie = new Movie("Terminator", 1984, 107)
const AlienMovie = new Movie("Alien", 1979, 117)
//console.table(PredatorMovie);

console.log(PredatorMovie.getMovie())

## Le getter doit passer toujours par le setter d'une classe
**Exemple:**

class User{
    constructor(nom, prenom, ville){
        this._nom = nom;
        this._prenom = prenom;
        this._ville = ville;
    }
    //getter
    getUser(){
        return `${this._nom} ${this._prenom} ${this._ville}`
    }
    setUser(_nom, _prenom, _ville){
        this._nom = "Noyer";
        this._prenom = "Julien";
        this._ville = "Ny";
    }
}

let new_user = new User("Gius","Mili","Paris")
console.log(new_user.getUser())

new_user.setUser() // On appelle le setter et ensuite le getter
console.log(new_user.getUser()) //pour afficher passer par le getter

//pour tout mettre dans un tableau 
const table = new_user.getUser().split(" ") //méthode split()
console.table(table)//pour afficher passer par le getter

## Exemple avec la méthode split()

    
class Compte{
    constructor(prop,compte){
        this._prop = prop;
        this._compte = compte;
    }
    getMoney(){
        return this._prop+" "+this._compte
    }
    setMoney(_prop, _compte){
        this._prop = "Dupont"
        this._compte = 20231547;
    }
    
}

const newCompte = new Compte()
newCompte.setMoney()
console.log(newCompte.getMoney())
const table = newCompte.getMoney().split(" ")
//boucle 
for(let index in table){
    console.log(index+" "+table[index])
}

## Exemple de Classe sans setter

let date = new Date().getFullYear()
 class User{
     constructor(dates){
         this._dates = date
         
     }
     getTime(){
         return this._dates
         
     }
 }
 
 new_user = new User(date)
console.log(new_user.getTime())

[](https://forthebadge.com)