Pour bien apprendre à se servir de Javascript, il faut d’abord comprendre les principes fondamentaux de la programmation, quel que soit le langage appris: PHP, JavaScript, Python… Tous ces langages utilisent les mêmes composants de base que sont:
- Les variables
- Les tableaux
- Les fonctions
- Les boucles
- Les conditions
- Les objets
Tu dois impérativement maitriser ces concepts pour ensuite être à l’aise dans l’apprentissage du Javascript.
1. Les variables
Tu connais le principe donc je vais pas m’étaler, mais juste histoire que ce soit bien clair: une variable est un conteneur auquel tu donne un nom. Et ce conteneur, il peut contenir n’importe quoi: un valeur telle un nombre, une chaine de caractère, un booléen (vrai ou faux). Exemple:
nom = Christelle;
age = 33;
fille = true
Note: souvent, en programmation, pour marquer une variable on met un « $ » devant mais sache qu’en JS, ce n’est pas obligé, d’ailleurs souvent on ne le fais pas.
Pour info, une variable peut même contenir un tableau ou une fonction, mais on verra ça plus tard.
2. Les tableaux
Les tableaux simples
Un tableau, c’est exactement comme son nom l’indique, c’est un tableau de données. Imagine sur Excel:
En JS (et en programmation en général), on stock ce tableau dans un variable comme ceci:
bossOnePiece = ['Barbe Blanche', 'Shanks', 'Kaido', 'Big Mom', 'Crocodile', 'Boa Hancock', 'Doflamingo', 'Jinbei', 'Moria', 'Kuma', 'Takanome Mihawk'];
C’est juste une façon de garder des données organisées dans une variable. On dit qu’un tableau comporte des éléments. Dans l’exemple ci-dessus on a un tableau à 11 éléments.
Un tableau a toujours la notion d’**ordre, **car par défaut, les éléments sont associé à un index, qui commence à 0. Ça veut dire que « Barbe Blanche » a l’index 0, Shanks, l’index 1, Kaido l’index 2, etc…
En vrai le tableau dessus, pour l’ordinateur, il équivaut à ça:
Pour accéder à un élément en particulier du tableau, il suffit de connaitre son index, et de l’appeler via la notation nomDuTableau[index]
. Ici, pour avoir Shanks, il faut faire:
console.log(bossOnePiece[1])
// Shanks
console.log(bossOnePiece[5])
// Boa Hancock
Les tableaux associatifs
Tu as aussi les tableau associatifs, ça veut dire que chaque élément du tableau est associé à un nom au lieu d’un numéro d’index. On parle dans ce cas d’association clé-valeur Par exemple le tableau suivant:
donnera ceci:
perso = {
'nom' : 'Monkey D.',
'prenom' : 'Luffy',
'age' : 19,
'équipage' : 'Muygiwara',
'prime' : 500000000
}
Comme pour les index numériques, pour accéder à un élément il suffit de l’appeler par son index:
console.log(perso['prrenom']);
// Luffy
console.log(perso['age']);
// 19
Les tableaux multi-dimensionnels
Enfin, il y a un dernier type de tableau, le tableau multidimensionnel. C’est une manière compliqué de dire qu’à l’intérieur d’un tableau, il y a d’autre tableaus, en gros des sous-tableaux.
Par exemple, imaginons que j’ai un tableau associatif représentant un utilisateur:
Pour un seul utilisateur, pas de souci. Mais comment on fait si on a plusieurs utilisateurs ? C’est là qu’on utilise un tableau multidimensionnel: c’est un tableau qui contient plusieurs sous-tableau, chaque sous-tableau représentant un utilisateur:
Ce qui donnera le tableau suivant:
$users = [
user1: {
id: 1,
emai: '[email protected]',
password: 'nawak10',
inscription: '2018-07-01',
admin: false
},
user2: {
id: 2,
emai: '[email protected]',
password: 'alloaluile ',
inscription: '2018-04-24',
admin: false
},
user3: {
id: 3,
emai: '[email protected]',
password: 'fjhsdfhsdfjhsfkjshdf',
inscription: '2018-03-12',
admin: true
},
]
3. Les fonctions
Une fonction, c’est simplement une liste d’instruction que tu écris une seule fois et à laquelle tu donne un nom, et l’ordinateur saura reproduire toutes les instructions chaque fois qu tu appelles simplement le nom de la fonction.
Ça évite la répétition. C’est un peu comme les macros dans WoW ou FF11. Tu appuyais sur CTRL + un chiffre et ça lançait une série de commande (message à l’équipe « J’aggro » + lancer buff + cibler ennemi le plus proche + lancer sort d’attaque). Les fonctions c’est le même principe sauf qu’au lieu d’appuyer sur des touches on appelle la fonctin par son nom.
Un exemple: pour une appli de boite email que je viens de créer avec VueJS, une des fonctionnalité est que, si l’utilisateur est en train d’écrire un brouillon de mail, si il clique sur certains éléments ailleurs, il doit se passer les choses suivantes:
- le brouillon doit être enregistré,
- les champs du formulaire doivent se vider,
- la fenêtre de composition doit disparaitre.
Il y a 3 éléments qui doivent provoquer cette suite d’actions: losrque tu clique sur un mail dans la liste des mails, sur un dossier, ou sur la petite croix:
Donc, sans les fonctions, mon code JS ressemblerait à ça:
// Action quand on clique sur un lien de la sidebar
$('.sidebar-link').click(function() {
// On enregistre le contenu rentré par l'utilisateur dans une div cachée
contenuSauve = $('#formulaire textarea').text();
// On vide le formulaire de création d'email
$('#conteneur-hidden').html(contenuSauve);
$('#formulaire input').val('');
$('#formulaire textarea').val('');
// On "ferme" la fenêtre de composition
$('#formulaire').hide();
})
// Action quand on clique sur un email dans la liste
$('#list .email').click(function() {
// On enregistre le contenu rentré par l'utilisateur dans une div cachée
contenuSauve = $('#formulaire textarea').text();
// On vide le formulaire de création d'email
$('#conteneur-hidden').html(contenuSauve);
$('#formulaire input').val('');
$('#formulaire textarea').val('');
// On "ferme" la fenêtre de composition
$('#formulaire').hide();
})
// Action quand on clique sur la croix
$('#formulaire .close').click(function() {
// On enregistre le contenu rentré par l'utilisateur dans une div cachée
contenuSauve = $('#formulaire textarea').text();
// On vide le formulaire de création d'email
$('#conteneur-hidden').html(contenuSauve);
$('#formulaire input').val('');
$('#formulaire textarea').val('');
// On "ferme" la fenêtre de composition
$('#formulaire').hide();
})
C’est long non ? Et surtout, si on veut ajouter ou modifier des fonctionnalité, à chaque fois il faut le faire 3 fois. Si on veut rajouter ce comportement à un autre élément, il faut recopier le bloc d’instruction. Et si on veut faire des modifs, maintenant c’est à 4 endroits qu’il faut le faire.
Bref, pas top.
Alors qu’avec une fonction, le code ci-dessus devient beaucoup plus court:
// Je crée ma fonction
function fermerBrouillon() {
// On enregistre le contenu rentré par l'utilisateur dans une div cachée
contenuSauve = $('#formulaire textarea').text();
// On vide le formulaire de création d'email
$('#conteneur-hidden').html(contenuSauve);
$('#formulaire input').val('');
$('#formulaire textarea').val('');
// On "ferme" la fenêtre de composition
$('#formulaire').hide();
}
// Et ensuite il suffit de rappeler la fonction quand on a besoin
$('.sidebar-link').click(function() {
fermerBrouillon();
}
$('#list .email').click(function() {
fermerBrouillon();
}
$('#formulaire .close').click(function()
fermerBrouillon();
}
Alors tu t’es peut-être dit qu’il suffisait de rassembler les sélecteurs, comme ceci:
$('.sidebar-link, #list .email, #formulaire .close').click(function () { ... })
Et on aurait pu écrire le bloc d’instructions qu’une seule fois. C’est vrai dans mon exemple précis. Mais imagine que tu doives afficher un message différent en fonction de l’endroit cliqué ?
Avec les fonction c’est facile, comme une fonction peut prendre des arguments, tu peux utiliser un argument qui sera le texte à afficher. Un argument c’est juste une variable que la fonction va utiliser.
Exemple:
// Quand tu appelleras la fonction "direBonjour", il faudra que tu donne du texte qui sera mis dans la variable "nom", et la fonction affichera "Bonjour " suivi du texte que tu lui as donné
function direBonjour(nom) {
alert('Bonjour ' + nom);
}
direBonjour('Christelle')
// va afficher "Bonjour Christelle"
direBonjour("Thinh")
// va afficher "Bonjour Thinh"
Donc, pour répondre à la question que je t’ai posé (comment afficher une message différent en fonction de l’endroit cliqué), il suffit de modifier la fonction fermerBrouillon()
, et ça va donner le code suivant:
function fermerBrouillon(endroitClic) {
// On enregistre le contenu rentré par l'utilisateur dans une div cachée
contenuSauve = $('#formulaire textarea').text();
// On vide le formulaire de création d'email
$('#conteneur-hidden').html(contenuSauve);
$('#formulaire input').val('');
$('#formulaire textarea').val('');
// On "ferme" la fenêtre de composition
$('#formulaire').hide();
// On affiche le message pour dire où l'utilisateur a cliqué
alert("Vous avez cliqué sur " + endroitClic);
}
$('.sidebar-link').click(function() {
fermerBrouillon("un lien de la sidebar");
}
$('#list .email').click(function() {
fermerBrouillon("un email de la liste");
}
$('#formulaire .close').click(function()
fermerBrouillon("la croix du formulaire");
}
4. Les boucles
Une boucle, c’est juste une façon d’indiquer au programme qu’il faut répéter une suite d’instructions.
Une utilisations concrète: imagine que tu dois envoyer une newsletter aux utilisateurs d’un site. Ne te préoccupe pas pour l’instant du détail de comment on récupère la liste des utilisateurs, où comment on envoie un email concrètement. On verra ça plus tard. Tout ce qui importe, c’est de faire une boucle sur la liste des utilisateurs pour leur envoyer un mail.
On va dire qu’on a déjà crée la fonction envoieNewsletter()
qui envoie un mail, et qu’on a un déjà notre tableau d’utilisateur (le même que dans la partie 2/tableaux multi-dimensionnels) rempli.
Pour envoyer un message à tout les utilisateurs, on va boucler sur le tableau, c’est à dire passer sur chaque élément du tableau, l’un après l’autre, du premier au dernier .
Donc, pour notre exemple d’envoi de newsletter, ça donne ceci
users = [
user1: {
id: 1,
emai: '[email protected]',
password: 'nawak10',
inscription: '2018-07-01',
admin: false
},
user2: {
id: 2,
emai: '[email protected]',
password: 'alloaluile ',
inscription: '2018-04-24',
admin: false
},
... // autres utilisateurs
];
// On boucle sur le tableau pour appeler la fonction qui envoie la newsletter pour chaque utilisateur dans le tableau
for (i = 0; i < users.length; i++) {
envoieNewsletter(users[i]);
}
Les 3 dernières lignes, en français, ça donne :
- Je crée une variable temporaire i (on l'appelle comme ça par habitude mais tu peux l'appeller comme tu veux: compteur, index, ouistiti...).
- Ma variable i commence à 0.
- Tant qu'elle est inférieure au nombre d'utilisateurs dans le tableau (donné par l'expression users.length), on va exécuter ce qu'il y a entre les {}. Ici, c'est lancer la fonction envoieNewsletter() à l'utilisateur qui se trouve à la position i dans le tableau.
- À chaque passage, on augmente i de 1.
Pourquoi est-ce qu'on utilise ce système avec i qu'on incrémente ?
Parce que souvent on ne sait pas exactement combien il y a d'éléments dans le tableau, et de toute façon on a pas besoin de le savoir. Le compteur i nous sert justement à ça. On lui dit: tu vas commencer à 0 (puisque le premier élément d'un tableau c'est toujours 0), et tu vas me ramener chaque élément du tableau, un par un, l'un après l'autre.
// Premier passage de la boucle
i = 0; // Donc users[i] équivaut à users[0]
// Deuxième passage
i = 1; // Donc users[i] équivaut à users[1]
// Troisième passage
i = 2 // // Donc users[i] équivaut à users[2]
// etc...
5. Les conditions
Je m'étends pas longtemps, tu connais bien les conditions.
SI (condition)
ALORS (execute ceci)
SINON (execute cela)
Par exemple:
if (user[sexe] == 'fille') {
couleur = 'rose';
} else {
couleur = 'bleu';
}
A noter que parfois, tu tomberas sur les expressions ternaires. Ou tu peux les utiliser toi même, mais il faut faire attention, c'est vraiment à garder pour les cas super simples, sinon on perd en lisibilité du code. Pour la même condition que ci-dessus, tu peux écrire en une seule ligne:
6. Les Objets
Les objets, c'est un peu un condensé de tout ce qu'on vient de voir (sauf les boucles et conditions).
C'est un mélange de variable, tableau et fonction).
Quiz
Maintenant que tu as passé en revue les bases, c'est l'heure du quiz !