Le cours de Javascript est intense et nous permet de voir quelques nouveautés.
Et notamment certaines fonctions avancées qui permettront d’exécuter des instructions spécifiques.
Les fonctions
Une fonction ressemble à un mode opératoire avec des instructions à suivre dans un ordre donné. Ensuite, on se sert de la fonction uniquement lorsque l’on en a besoin dans le programme.
En effet, tout ce qui est déclaré dans une fonction n’est pas actif tant que cette fonction n’est pas appelée.
Les bases
L’écriture d’une fonction est la suivante :
// déclaration
function maFonction () {
// instructions;
}
// appel
maFonction();
A noter : on ne met jamais de point virgule après l’accolade de fermeture de la déclaration de la fonction.
Créer une fonction permet de l’utiliser plusieurs fois, de mettre du code en attente ou encore de combiner des actions.
Variables et fonctions
On peut attribuer une fonction à une variable :
const maFonction = function () {
// instructions;
}
Et depuis ES6, il est possible d’écrire une fonction en une fonction fléchée. J’avais rapidement abordé le sujet lors d’un précédent post sur JS.
Cette notation est utilisée uniquement dans certains cas où l’on a besoin de déclarer une fonction à un endroit très précis sans qu’elle soit par la suite réutilisée.
const maFonction = () => {
// instructions;
}
Paramétrage d’une fonction
Lorsque l’on écrit une fonction, il est possible d’avoir besoin de différents paramètres dans les instructions.
Ces paramètres sont alors modifiables lors de l’appel de la fonction.
Ce qui permet de raccourcir le nombre de fois où l’on se répète !
// déclaration
function maFonction (param1, param2) {
// instructions incluant les paramètres param1, param2;
}
// appel
maFonction(att1, att2);
Il est alors possible d’attribuer des paramètres par défaut à la fonction. Ce qui lui permet d’avoir une valeur quoi qu’il arrive (ou qu’elle prenne cette valeur par défaut).
Par exemple :
// déclaration
function nouvelleConsole (x) {
console.log(x || 'valeur par défaut');
}
// appel
nouvelleConsole('bonjour'); // affiche "bonjour" dans la console
nouvelleConsole(); // affiche "valeur par défaut" dans la console
Les fonctions retour
Les fonctions retour servent à conserver des valeurs et à retourner de l’information pour pouvoir l’utiliser par la suite.
function retour (a, b) {
return a * b;
}
retour(2,4); // retournera 8 (2 x 4)
Les conditions
les comparateurs
Récapitulatif des comparateurs utilisés en JavaScript :
> : supérieur, plus grand que
>= : supérieur ou égal
< : inférieur, plus petit que
<= : inférieur ou égal
== : égalité simple (vérifie que les valeurs sont similaires)
!= : différent (simple)
=== : strictement égal (vérifie que les valeurs et les types sont similaires)
!== : strictement différent
!(valeur) : pour les booléens, permet d’avoir l’inverse de la valeur
&& : et / permet de vérifier que plusieurs conditions sont toutes vérifiées
|| : ou / au moins une des conditions est vérifiée.
La condition IF
La condition if permet de vérifier différentes choses.
Lorsque l’on écrit une condition if, on cherche à vérifier que la condition est vraie.
S’il y a une possibilité que le résultats de cette condition soit faux, alors on ajoute des instructions dans un else à la suite du if.
if (maPosition == interieur) {
peparer_cuisine();
} else {
faire_courses();
}
Il est aussi possible de vérifier plusieurs conditions. Dans ce cas, on ajoutera un (ou plusieurs) else if après le if.
Attention, dès qu’une condition est vérifiée et vraie, la lecture s’arrête. Il est donc important de faire attention à l’ordonnancement de la recherche à exécuter.
if (maPosition == interieur) {
se_reposer();
} else if (maPosition == salleDeBain) {
brosser_dents();
} else {
promener_chien();
}
// l'instruction brosser_dents() ne sera jamais vérifiée car l'exécution de la condition s'arrêtera après avoir vérifié que maPosition est à l'intérieur (seule l'instruction se_reposer() sera exécutée).
A noter qu’il est aussi possible de mettre un if dans un autre if !
L’incrémentation
L’incrémentation permet d’augmenter la valeur d’une variable.
let Nombre = 4; // Nombre = Nombre + 1; Nombre += 1; // écriture dédiée à l'incrémentation
Les opérateurs possibles sont les suivants :
+= : ajoute un chiffre
-= : enlève un chiffre
*= : multiplie un chiffre
/= : divise un chiffre
%= : modulo un chiffre
Il est également possible d’utiliser l’opérateur += pour ajouter du texte.
Variante
++ ajoute 1 et -- enlève 1
Attention, cette façon d’incrémenter n’est pas prise en compte tout de
suite. Elle l’est seulement après avoir déclaré la variable.
Les boucles FOR
La boucle for est principalement utilisée pour parcourir des tableaux. Et plus particulièrement lorsque l’on connait la fin (s’exécute un certain nombre de fois).
for (initialisation; condition; incrémentation) {
// instructions;
}
initialisation : c’est la valeur initiale de la variable utilisée pour la boucle.
condition : qui permet de sortir de la boucle, elle est évaluée à chaque tour de boucle.
incrémentation : c’est ce qui va se passer à chaque tour de boucle.
Par exemple :
for (let i = 0 ; i < 5 ; i++) {
console.log(i);
}
Boucle FOR et Tableaux
On peut aussi se servir d’une boucle for pour afficher toutes les valeurs contenue dans un tableau :
const table = ['val1', 'val2', 'val3'];
for (let i=0; i < table.lenght; i++) {
console.log(table[i]);
}
Pour parcourir un tableau, on a la possibilité d’utiliser 2 variantes de la boucle for :
– for … in
Cette boucle parcourt les index d’un tableau et donne les valeurs du tableau correspondant à l’index demandé.
const table = ['val1', 'val2', 'val3'];
for (let i in table) {
console.log(table[i]);
}
// affichera pour l'index 0 : 'val1'
// puis 'val2' puis 'val3'
– for … of
Cette boucle parcourt le tableau lui même et donne chacune des valeurs de ses éléments (sans tenir compte de l’index).
const table = ['val1', 'val2', 'val3'];
for (let i of table) {
console.log(table[i]);
}
// affichera 'val1' puis 'val2' puis 'val3'
Boucle FOR et Tableau d’objets
Il est possible d’utiliser la boucle for pour parcourir un tableau d’objets. On s’en sert alors pour parcourir les clés du tableau d’objets. Pour cela, on utilisera la boucle for ... in .
Boucle FOR et Texte
Il est possible d’utiliser la boucle for pour parcourir une chaîne de caractères (notamment lorsque l’on fait un getElement).
Il est alors important de transformer cette chaîne de caractère un un « vrai » tableau (pour éviter d’avoir des données supplémentaires inhérentes à la lecture par la console).
Pour cela, on ajoutera trois petits points lors de la déclaration de la variable (avant le getElement) :
const images = [...document.getElementsByTagName('img')];
Les fonctions avancées permettent de réaliser différentes actions qui seront utiles lors de l’exécution du code.
Lors de la suite de la formation, je vais apprendre à modifier le DOM (et répondre à la question : qu’est ce que le DOM ?).
