108 lines
4.3 KiB
Markdown
108 lines
4.3 KiB
Markdown
# 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{3}
|
||
<body>
|
||
…
|
||
<script src="./js/main.js"></script>
|
||
</body>
|
||
```
|
||
|
||
:::
|
||
|
||
## Les types de données
|
||
|
||
Il existe en JavaScript plusieurs [types de données :](https://developer.mozilla.org/fr/docs/Web/JavaScript/Data_structures)
|
||
|
||
- Valeurs primitives :
|
||
- <span lang="en">Number</span> (nombre)
|
||
- <span lang="en">String</span> (chaîne de caractères)
|
||
- <span lang="en">Boolean</span> (booléen)
|
||
- <span lang="en">Null</span> (nul)
|
||
- <span lang="en">Undefined</span> (indéfini)
|
||
- <span lang="en">Object</span> (objet)
|
||
|
||
Il est possible de regrouper ces types de données dans des tableaux (<span lang="en">Array</span>).
|
||
|
||
## Sélectionner le document HTML ([DOM](https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction))
|
||
|
||
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 :
|
||
|
||
<<< @/snippets/js/DOM-select.js#getElementsByTagName
|
||
|
||
Toutes les balises correspondantes sont retournées sous forme de `HTMLCollection` (un équivalent de tableau JavaScript).
|
||
|
||
### Sélectionner un id
|
||
|
||
<<< @/snippets/js/DOM-select.js#getElementById
|
||
|
||
Retourne un objet.
|
||
|
||
### Sélectionner une classe
|
||
|
||
<<< @/snippets/js/DOM-select.js#getElementsByClassName
|
||
|
||
Retourne un tableau.
|
||
|
||
::: warning 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.
|
||
|
||
<<< @/snippets/js/DOM-select.js#querySelector
|
||
|
||
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 :
|
||
|
||
- [const](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/const)
|
||
- [let](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/let)
|
||
- [var](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/var)
|
||
|
||
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.
|
||
|
||
<<< @/snippets/js/variables.js#const
|
||
|
||
On peut assigner directement des type de données dans une variable.
|
||
|
||
<<< @/snippets/js/variables.js#dataTypes
|
||
|
||
#### Plusieurs valeurs
|
||
|
||
Pour stocker plusieurs valeurs, il est possible de déclarer un object ou un tableau (en fonction de nos besoins).
|
||
|
||
<<< @/snippets/js/variables.js#multiplesValues
|