Salut à toi qui t'apprête à lire ces fabuleuses lignes!

Mon dernier tuto est #1 Découvrez l'ES6 [variables] je te recommande d'aller le lire ici avant d'attaquer celui là.

Dans celui-ci je vais parler des autre trucs et astuces avec l'ES6 (juste des petits truc pour gagner du temps😁), on y va!

ASTUCES ET AUTRES

• Récupérer un élément du document HTML via son id

En JavaScript, pour récupérer un élément du document HTML par son id, on a 3 possibilité pour le faire:

// La première: 
const ELEMENT= document.getElementById('uneDiv');

// La deuxième:
const ELEMENT= document.querySelector('#uneDiv');

// La troisième avec jQuery:
const ELEMENT= $('#uneDiv');

Vous remarquez que j'ai crée une constante en utilisant le mot clé const parce qu'on ne compte pas modifié la variable😉.

Juste en passant je vous déconseille d'utiliser jQuery à l'heure actuel, beaucoup de développeur le considère comme mort et il est utilisé de moins en moins, il est utile pour manipuler le DOM, mais sinon, si vous voulez faire une application web complexe je vous déconseille jQuery, l'idéal serait d'utiliser un framework comme React.js (je ferai si possible des tutos dessus), Angular ou Vue.js.

C'était juste une petite parenthèse, maintenant continuons, nous allons analyser les 3 possibilités:

1. La première retourne un élément du document HTML avec une syntaxe longue
2. La deuxième retourne elle aussi un élément du document HTML avec une syntaxe longue
3. La troisième retourne UN OBJET JQUERY avec une syntaxe courte, on pense souvent qu'un $('#uneDiv') retourne un élément du document HTML alors que non 😉

Alors, comment faire pour récupérer un élément du document HTML avec une syntaxe courte 🤔

L'ES6 PEUT LE FAIRE !!!

Pour le faire, mettez juste l'id de l'élément à la place de document.getElementById('idDeLElement') 😉

const ELEMENT= uneDiv;

Et après vous pouvez tout faire:

// Récuperer la valeur d'un élement
const VALEUR_ELEMENT = uneDiv.value;

// Récuperer le style d'un élement
const STYLE_ELEMENT = uneDiv.style;

// Ajouter un évenement
uneDiv.addEventListener('click', function () {
  console.log("T'as cliqué sur moi!!!");
})

Ne mettez pas de tiret "-" dans l'id, sinon vous aurez une erreur. C'est pas fabuleux l'es6?😍😍

• La concaténation

En JavaScript, pour concaténer, on utilise le "+" :

const PRENOM= "Godwin";
const PSEUDO= "nodewin";
let a= "Ton prénom est " + PRENOM + " et ton pseudo sur le sitedudev est " + PSEUDO;  
console.log(a) // Retourne: Ton prénom est Godwin et ton pseudo sur le sitedudev est nodewin

C'est super, mais le seul petit problème est que si on a une dizaine de variables à concatener, on va se retrouver avec beacoup de + et c'est pas toujours beau à voir 😅.

Grâce à l'ES6, ça sera beaucoup plus beau 🧖‍♂️:

// Avec l'ES6:
const PRENOM= "Godwin";
const PSEUDO= "nodewin";
let a= `Ton prénom est ${PRENOM} et ton pseudo sur le sitedudev est ${PSEUDO}`;  
console.log(a) // Retourne: Ton prénom est Godwin et ton pseudo sur le sitedudev est nodewin

Que s'est-il passé 🙀? On a injecter les variables dans le texte via ${} et dans les accolades vous devez mettre le nom de la variable que vous voulez injecter.

POUR UTILISER LE ${}, VOUS DEVEZ ENCADRER VOTRE TEXTE D'ACCENT GRAVE( ` ) COMME MOI. Sur un clavier AZERTY normal: Alt Gr + 7 (à effectuer deux fois), sur Mac j'ai remarqué que ça dépendais mais sur le mien c'est à gauche du Enter; bref c'est à vous de vous de vous débrouillez.

On a le même résultat, mais avec l'ES6, c'est plus beau, rapide et simple 🥰.

• Les conditions ternaires

ICI JE DOUTE QUE C'EST L'ES6 QUI A INSTAURÉ ÇA, SI JE ME SUIS TROMPÉ FAITES LE MOI SAVOIR EN COMMENTAIRE 😉

Les conditions ternaires sont utilisé dans beaucoup de langage de programmation.

Imaginons que vous voulez afficher un message de bienvenu sur votre site mais que le message puisse varier en fonction du niveau de l'utilisateur (admin ou pas), normalement nous devrions faire (ici pour l'exemple je vais juste utiliser un booléen IS_ADMIN):

const IS_ADMIN= true; //Notre source de vérité

if (IS_ADMIN) { // Comparable à un if (IS_ADMIN === true)
  var message= "Bienvenu monsieur l'admin";
} else {
  var message= "Bienvenu nodewin";
}

Juste avant de continuer, ici la constante IS_ADMIN est une variable presque globale parce qu'elle est définit à dans aucun bloc de code et c'est le cas aussi pour les variables locales (let), lorsqu'elles sont directement dans la source, elles peuvent être utilisé n'importe où DANS LE MÊME FICHIER, donc si vous importer ce fichier dans un autre, vous ne pourrez pas avoir accès à IS_ADMIN, par contre si c'était une variable globale (var), là oui. J'avais oublié de vous le dire 😅.

Vous pouvez le voir, juste pour une toute petite tache, on va écrire 6 lignes de code, l'ES6 peut le faire en 2 lignes 🙀:

const IS_ADMIN= true; 
var message= IS_ADMIN === true ? "Bienvenu monsieur l'admin" : "Bienvenu nodewin";

Essayer le code en mettant un console.log(message); à la fin... et ça marche 🙀.

Que s'est-il passé ?

Réponse: Lors de l'initialisation de la variable message, on va "poser la question" (ce qui explique le point d'interrogation) et si la réponse est "oui" message prends la valeur qu'il y a à la gauche du : sinon elle prends la valeur qu'il y a à la droite du :. C'est pas facile à comprendre dès le début mais dès qu'on le maitrise, on devient le maitre des conditions 🦹‍♂️, SURTOUT N'HESITEZ PAS À POSER DES QUESTIONS DESSUS, MOI AU DEBUT C'ÉTAIT SUPER COMPLIQUÉ DE LES COMPRENDRE 😅 ET MAINTENANT JE LES UTILISE AU QUOTIDIEN.

D'ailleurs, on va optimiser le code:

const IS_ADMIN= true; 
var message= IS_ADMIN ? "Bienvenu monsieur l'admin" : "Bienvenu nodewin";

Voilà ça le rends plus jolie 😍😍

ÇA SERA TOUT POUR AUJOURD'HUI, MERCI D'AVOIR LU, ET SURTOUT SI T'AS DES QUESTIONS N'HESITES PAS À LES METTRE EN COMMENTAIRE J'Y REPONDRAI.