Appearance
JavaScript – Intermédiare
Le JavaScript est un langage de programmation dont nous nous servirons pour rendre nos pages HTML/CSS dynamiques.
On l'écrit généralement en dehors du HTML, dans un fichier main.js. Afin de relier le JavaScript au HTML, il convient d'appeler le fichier via une balise <script>, positionnée avant la balise <body> fermante.
Details
html
<body>
…
<script src="./js/main.js"></script>
</body>Les types de données
Il existe en JavaScript plusieurs types de données :
- Valeurs primitives :
- Number (nombre)
- String (chaîne de caractères)
- Boolean (booléen)
- Null (nul)
- Undefined (indéfini)
- Object (objet)
Il est possible de regrouper ces types de données dans des tableaux (Array).
Sélectionner le document HTML (DOM)
JavaScript nous permet d'éxécuter des actions sur une page HTML. Par exemple :
- afficher, masquer, créer et supprimer des éléments ;
- stocker, trier, organiser des données ;
- modifier les styles CSS ;
- ajouter des conditions, des boucles, des événements…
- etc.
Dans la plupart des cas, il est nécessaire de cibler un ou plusieurs éléments du document HTML afin de leur appliquer ces actions. Afin de sélectionner un élément HTML en JavaScript, il faut utiliser une méthode permettant de cibler le ou les éléments qui nous intéressent. Il est possible de cibler un élément via le nom de sa balise, la valeur d'un attribut (id ou classe par exemple) ou d'autres moyens plus complexes que nous ne verrons pas ici.
Sélectionner des balises
La méthode pour sélectionner une balise est la suivante :
js
// sélectionner tous les éléments "section"
document.getElementsByTagName("section");Toutes les balises correspondantes sont retournées sous forme de HTMLCollection (un équivalent de tableau JavaScript).
Sélectionner un id
js
// sélectionner l'élément dont la valeur de l'attribut id est "custom"
document.getElementById("custom");Retourne un objet.
Sélectionner une classe
js
// sélectionner les éléments dont la valeur de l'attribut class est "card"
document.getElementsByClassName("card");Retourne un tableau.
Attention à l'orthographe
Notez que les méthodes qui retournent plusieurs éléments s'écrivent au pluriel alors que la sélection via un id est au singulier. Cela permet de se rappeler que la valeur d'un attribut id doit être unique dans la page HTML.
Sélectionner librement n'importe quoi
Il existe une méthode permettant de spécifier librement le type d'attribut à sélectionner. Il devient possible de chaîner ces attributs à la manière d'un sélecteur CSS.
js
// sélectionner le premier élément de classe "card" dans une section d'id "custom"
document.querySelector("section#custom .card");
// sélectionner tous les éléments "button"
document.querySelectorAll("button");Retourne un objet pour querySelector ou un NodeList pour querySelectorAll (semblable à un tableau).
Les variables
Lorsque l'on sélectionne un élément, la valeur retournée n'est pas enregistrée par défaut. Si nous avons besoin de cibler à nouveau le même élément, il faudra alors réécrire toute la méthode de sélection.
Afin d'éviter de dupliquer du code inutilement, il est possible de stocker des données dans des variables afin de les réutiliser à plusieurs endroits.
On peut créer une variable de trois façons :
Retenez que const permet de déclarer une variable constante, c'est-à-dire qu'elle ne peut pas être réaffectée.
Stocker des données
Une seule valeur
Il est recommandé de déclarer des variables dès que l'on a besoin de conserver une valeur.
js
// stocker l'élément d'id "custom" dans la variable customElement
const customElement = document.getElementById("custom");On peut assigner directement des type de données dans une variable.
js
// myName ne devrait pas changer, pas d'où la constante
const myName = "Nico";
// myAge changera tous les ans, d'où l'utilisation de let
let myAge = 32;Plusieurs valeurs
Pour stocker plusieurs valeurs, il est possible de déclarer un object ou un tableau (en fonction de nos besoins).
js
// me est un objet contenant plusieurs propriétés et leur valeur
const me = {
name: "Nico",
age: 32,
};
// myPseudos est un tableau contenant plusieurs valeurs
let myPseudos = ["nicool", "dev man"];Écouter des événements
Une fois nos éléments HTML ciblés et stockés, nous avons besoin de déclencher des actions lorsque quelque chose se passe. Ce quelque chose peut être un clic, un survol, un champ de formulaire qui change, etc.
Nous devons donc écouter ces événements déclencher ce qui doit l'être ensuite. La méthode JavaScript à utiliser est addEventListener('ÉVÉNEMENT', FONCTION)
js
const myButton = document.getElementById("sendButton");
// ici, on écoute l'événement "click" sur l'élément "myButton"
myButton.addEventListener("click", function () {
// actions à exécuter
});Les conditions
Il est souvent nécessaire de déclencher des actions sur la page uniquement si certaines conditions sont remplies. Par exemple, nous pouvons regarder la valeur vraie ou fausse d'une variable et déclencher ou non une action.
js
if (condition) {
// code à exécuter
}Si la condition est remplie, le code sera exécuté. Sinon, il sera ignoré.
Une condition se construit de cette façon :
if ( valeur à évaluer opérateur valeur de référence )
Par exemple : if ( myName === 'Nico' ) ou encore if ( myAge > 18 )
Voici une liste d'opérateurs et leurs explications (en anglais).
Évaluer un booléen
Un booléen peut être soit vrai soit faux. Pour évaluer sa valeur, nous pouvons nous contenter de renseigner le nom de la variable
js
// la variable "userLogged" est un booléen, ici vrai
let userLogged = true;
// on évalue la valeur de "userLogged" avant d'exécuter la fonction
if (userLogged) {
// actions à exécuter
}