){kind=small}
Construction du JavaScript
Le JavaScript est constitué de variables, d’expression conditionnelles, de boucles, de fonctions ainsi que de beaucoup de logique algorithmique. Je ne vais pas vous détailler la logique algorithmique car elle s’apprend mais je vais vous parler des éléments de base du code JavaScript.
Les variables
Le mot let sert à déclarer la variable (à la faire exister) tout comme que le mot const, à la différence près que le mot const est réservé à des variables qui ne sont pas destinées à être modifiées, ce sont donc des constantes.
Les expressions conditionnelles
Lorsque la lecture du code arrive au mot if, ce dernier va vérifier si la condition (l’expression entre les parenthèses) est vraie. Si c’est le cas, les instructions contenues dans les accolades du mot if seront exécutées, sinon ce seront les instructions contenues dans les accolades du else qui seront exécutées.
Les boucles
Les boucles for et while sont les deux boucles souvent utilisées mais il en existe d’autres.
La boucle for va répéter les instructions tant que la condition est respectée. Ce qui se trouve entre les parenthèses sont les données dont la boucle a besoin pour fonctionner. En premier, nous avons une variable, ensuite la condition de la boucle et enfin une action qui sera effectuée à la fin de chaque tour de la boucle.
La boucle while fonctionne de la même manière sauf au niveau des parenthèses. En effet celles-ci contiennent uniquement une condition, il faudra donc veiller à écrire une ligne pour que la boucle ne tourne pas à l’infini (par exemple i++ car i est le nom de la variable dans la condition).
Les fonctions
Ceci est une fonction. Les fonctions en JavaScript doivent être appelées par leur nom (ici myfunction) pour être exécutées.
Un détail important cependant est que toutes les variables utilisées (sauf quelques unes) ne peuvent pas être utilisées en dehors de leurs fonctions respectives. Il existe cependant un moyen de sortir la valeur d’une variable avec le mot clé return. En revanche le mot clé return arrête l’exécution de la fonction en cours pour revenir au programme principal.
Récupérer un élément HTML
En effet, on peut récupérer un élément HTML avec le JS. Pour ça il y a deux grandes méthodes : vous pouvez utiliser la fonction querrySelector ou bien la fonction GetElementById:
Attention car ces deux fonctions ne donnent pas le même résultat et ne fonctionnent pas de la même manière. La fonction querySelector permet de récupérer un élément en fonction du paramètre (ce qui se trouve entre les parenthèses) alors que getElementById vas récupérer tous les éléments ayant l’id écrite entre les parenthèses. Ainsi la variable element n’aura pas la même valeur selon la fonction utilisée.
Petite précision pour la fonction getElementById, vous pouvez remplacer le Id par n’importe quelle autre propriété de dénomination comme par exemple: ClassName ou TagName (nom de la balise HTML).
Récupérer oui, et après ?
Maintenant que l’on sait comment récupérer un élément HTML, il faut bien en faire quelque chose. On peut par exemple exécuter un code JS quand on appuie sur un bouton avec la fonction addEventListener:
Je sais, ça fait beaucoup d’un seul coup mais on va détailler tout ça. Tous d’abord le mot function désigne évidemment une fonction. Les fonctions sont des blocs d’instructions qui doivent être appelées pour pouvoir être exécutées. Le code va donc commencer par la ligne 6. Comme nous l’avons vu précédemment nous allons récupérer le bouton et nous allons ensuite utiliser la fonction addEventListener. Cette fonction appelle une autre fonction (2eme paramètre) quand on cliquera sur le bouton (1er paramètre). Notez que le mot click peut être remplacé par beaucoup d’autres mots pour définir d’autres événements comme par exemple passer la souris sur l’élément en question (mouseover).
Pour finir la fonction log permet d’afficher ce que l’on passe en paramètre via la console de l’inspecteur. De plus vous aurez surement remarqué le point entre le mot console et le mot log, et bien il s’agit tout simplement d’un élément de ciblage. Cela signifie que pour console.log, on prend la variable console (qui est déjà définie) et on effectue la fonction log sur cette dernière. Cette fonction est très utile pour débugger.
C’est bien tout ça mais a quoi ça sert ?
Les deux utilisations les plus courantes sont de modifier le contenu d’une page et de modifier le style de la page (CSS). On vas commencer par le style.
Première grande utilisation: modifier le style d’un élément
Pour modifier le style d’un élément il faut tout d’abord récupérer ce dernier et cibler le style avec le point, par exemple:
Dans les deux exemples on récupère l’élément a modifier avec la fonction querySelector mais la suite est légèrement différente. Le premier exemple modifie tout simplement le style l’élément tandis que le deuxième exemple va également modifier le style mais seulement quand on va cliquer sur l’élément en question.
Vous aurez également remarqué le retour du mot function. Il s’agit tout simplement d’une fonction temporaire car on est pas obligé de définir une fonction pour utiliser celle-ci avec la fonction addEventListener.
Deuxième grande utilisation : modifier le contenu d’une page
En effet, de la même manière que le style, on peut modifier le contenu des balises HTML avec du JavaScript. Comme pour récupérer un élément, modifier le contenu peut se faire selon deux méthodes différentes:
La propriété textcontent désigne le texte qui vas se trouver dans une balise, par exemple pour la balise h1 suivante:
<h1>Le JS c’est sympa</h1> textcontent = “Le JS c’est sympa”
Ainsi le premier exemple vas remplacer “Le JS c’est sympa” par “Le JS c’est cool”.
La propriété innerHTML peut remplir le même rôle que textcontent mais elle peut en plus changer le type de la balise. Si on reprend la balise h1 vue plus haut, la propriété innerHTML va non seulement changer le texte mais va également transformer la balise h1 en p.
On aura donc:
<h1>Le JS c’est sympa</h1> -> <p>Le JS c’est cool</p>
Modifier les propriétés des balises HTML
Le JS peut également modifier les propriétés internes des balises, comme par exemple leur classe ou leur id.
On va prendre comme exemple la modification d’une classe mais le principe est le même pour toutes les propriétés internes :
On peut donc modifier n’importe quelle propriété en suivant cet exemple. Il suffit uniquement de modifier la propriété className par la propriété qu’on souhaite modifier. On peut également ajouter un déclencheur au moyen de la fonction addEventListener pour faire la modification uniquement sur un clique de bouton par exemple.
Un deuxième exemple avec des propriétés plus avancées:
Cette fonction va modifier le lien d’un élément ainsi que le fichier source de deux div différentes en fonction de la variable c.
Le mot de la fin
Le JavaScript est en réalité beaucoup plus puissant que ça et on peut rapidement atteindre des codes beaucoup plus complexes. Le JavaScript est également utilisé pour faire des animations détaillées.