# Interaction dans une page Web grâce à JavaScript
Ce document a été produit en grande partie par ChatGPT, qui a été utilisé pour résumer le cours correspondant et accessible [ici](interaction-avec-javascript)
---
# Introduction
<img class="r-stretch centre image-responsive" alt="logo JS" src="data/js.png" width="150">
- JavaScript créé en 1995 par Brendan Eich.
- Langage de scripts pour pages web interactives.
- Utilisation côté client et serveur (Node.js).
- Côté client : le JS est interprété et exécuté par le navigateur web
---
# Premiers pas avec JavaScript
- Intégration dans une page HTML.
- Deux façons d'écrire le code JS :
- Directement dans le HTML avec la balise `<script>`.
- Dans un fichier séparé au format `.js`.
---
## Directement dans le HTML
- Syntaxe obsolète mais encore présente dans certaines pages.
**Exemple :**
<iframe height="350" style="width: 100%;" scrolling="no" title="JS dans HTML (obsolète)" src="https://codepen.io/gbecker/embed/preview/jOJPgWe?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/gbecker/pen/jOJPgWe">
JS dans HTML (obsolète)</a> by Becker (<a href="https://codepen.io/gbecker">@gbecker</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
----
- **Avantages :**
- Simple pour les petits essais.
- **Inconvénients :**
- Mélange de code JS et HTML (non recommandé).
- Pas maintenable pour des applications conséquentes.
---
## Dans un fichier séparé (.js)
- Recommandé pour la maintenabilité.
**Exemple :**
<iframe height="320" style="width: 100%;" scrolling="no" title="Fichier JS externe (recommandé)" src="https://codepen.io/gbecker/embed/preview/mdoJNVw?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/gbecker/pen/mdoJNVw">
Fichier JS externe (recommandé)</a> by Becker (<a href="https://codepen.io/gbecker">@gbecker</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
----
- **Avantages :**
- Séparation du code JS et HTML (maintenabilité).
- Possibilité de réutiliser le fichier JS pour plusieurs pages.
- **Inconvénients :**
- Nécessité de créer et maintenir deux fichiers.
---
# Les événements
- Événements = actions détectables (que l'on peut « écouter ») et auxquelles on peut répondre (en exécutant un code bien défini)
- Exemples d'événements : `click`, `mouseover`, `keydown`, etc.
---
## Définir des gestionnaires d'événements
- Trois méthodes :
1. Attributs HTML (obsolète).
2. Propriétés JavaScript liées aux événements.
3. `addEventListener()` (recommandé).
---
### Attributs HTML (obsolète)
- Utilisation de l'attribut `onclick` (ou `onmouseover`, `onkeydown`, etc.)
**Exemple** :
<iframe height="300" style="width: 100%;" scrolling="no" title="Gestionnaire d'événements - Attribut HTML (obsolète)" src="https://codepen.io/gbecker/embed/preview/JjzYNbr?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/gbecker/pen/JjzYNbr">
Gestionnaire d'événements - Attribut HTML (obsolète)</a> by Becker (<a href="https://codepen.io/gbecker">@gbecker</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
----
```html
<button onclick="afficheMsg()">Clic</button>
```
- ajout de l'attribut `onclick` au bouton
- la valeur de l'attribut est la fonction JS contenant le code à exécuter
- inconvénient : mélange HTML et JS
---
### Propriétés JS liées aux événements
**Exemple** :
<iframe height="300" style="width: 100%;" scrolling="no" title="Gestionnaire d'événements - Propriétés JS liées aux événements" src="https://codepen.io/gbecker/embed/preview/jOJbmBE?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/gbecker/pen/jOJbmBE">
Gestionnaire d'événements - Propriétés JS liées aux événements</a> by Becker (<a href="https://codepen.io/gbecker">@gbecker</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
----
- Dans le HTML : on donne un attribut `id` à notre bouton
```html
<button id="btn">Clic</button>
```
- Dans le JS :
- sélection du bouton grâce à son `id` avec `querySelector`
- la dernière ligne indique quelle fonction appeler lorsqu'un clic est détecté
```js
var bouton = document.querySelector('#btn');
function afficheMsg() {
alert("Hello World !");
}
bouton.onclick = afficheMsg;
```
---
### Méthode `addEventListener()` (recommandée)
**Exemple** :
<iframe height="300" style="width: 100%;" scrolling="no" title="Gestionnaire d'événements - addEventListener (recommandé)" src="https://codepen.io/gbecker/embed/preview/PoLPmjL?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/gbecker/pen/PoLPmjL">
Gestionnaire d'événements - addEventListener (recommandé)</a> by Becker (<a href="https://codepen.io/gbecker">@gbecker</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
----
- Principe similaire à la méthode précédente
- Syntaxe légèrement différente : utilisation de la fonction `addEventListener` qui possède deux paramètres :
- le nom de l'événement (ici `click`)
- le nom de la fonction a exécuter en réponse à cet événement
**JS :**
```js
var bouton = document.querySelector('#btn');
bouton.addEventListener('click', afficheMsg);
```
---
# Modifier les éléments de la page
---
✍️ Faire les **défis** accessibles en cliquant sur [ce lien](/premiere_nsi/web/defis-js)
---
- Exemples de modification :
- Style d'un élément.
- Texte d'une balise.
- Utilisation des champs de saisie.
---
## Modifier le style d'un élément
**HTML :**
```html
<body>
<h1 id="monTitre">Généralités sur JS</h1>
<p id="monPara">Voici une page Web interactive grâce à JavaScript.</p>
<button id="btn">Cliquez ici</button>
<script src="script.js"></script>
</body>
```
**JS :**
```js
function changeStyles() {
var para = document.querySelector("#monPara");
var corps = document.querySelector("body");
para.style.color = "red";
para.style.fontWeight = "bold";
corps.style.backgroundColor = "rgb(255,255,0)";
}
```
----
<iframe height="300" style="width: 100%;" scrolling="no" title="Modifier les styles" src="https://codepen.io/gbecker/embed/preview/ExGxERm?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/gbecker/pen/ExGxERm">
Modifier les styles</a> by Becker (<a href="https://codepen.io/gbecker">@gbecker</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
## Changer le texte d'une balise
**HTML :**
```html
<body>
<h1 id="monTitre">Généralités sur JS</h1>
<p id="monPara">Voici une page Web interactive grâce à JavaScript.</p>
<button id="btn">Cliquez ici</button>
<script src="script.js"></script>
</body>
```
**JS :**
```js
function changeTexte() {
var para = document.querySelector("#monPara");
para.innerHTML = "Bonjour tout le monde !";
}
```
----
<iframe height="300" style="width: 100%;" scrolling="no" title="1NSI_change_texte" src="https://codepen.io/gbecker/embed/preview/rNoNrZj?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/gbecker/pen/rNoNrZj">
1NSI_change_texte</a> by Becker (<a href="https://codepen.io/gbecker">@gbecker</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
## Utiliser des champs de saisie
**HTML :**
```html [4]
<body>
<h1 id="monTitre">Généralités sur JS</h1>
<p id="monPara">Voici une page Web interactive grâce à JavaScript.</p>
<input type="text" id="zoneDeSaisie"/>
<button id="btn">Cliquez ici</button>
<script src="script.js"></script>
</body>
```
**JS :**
```js
function disBonjour() {
var saisie = document.querySelector("#zoneDeSaisie");
var para = document.querySelector("#monPara");
let prenom = saisie.value;
let texte = "Bonjour " + prenom;
para.innerHTML = texte;
}
```
----
<iframe height="320" style="width: 100%;" scrolling="no" title="1NSI_recuperer_donnee_saisie" src="https://codepen.io/gbecker/embed/preview/yLGLqZJ?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/gbecker/pen/yLGLqZJ">
1NSI_recuperer_donnee_saisie</a> by Becker (<a href="https://codepen.io/gbecker">@gbecker</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
# Bilan
- Les internautes interagissent avec les pages web grâce à JavaScript.
- Interface Homme-Machine (IHM) basée sur la gestion d'événements.
- **Événement** : action détectable et à laquelle on peut répondre.
- Langage JavaScript essentiel pour implémenter la gestion des événements.
- Recommandation : utiliser `addEventListener()` pour gérer les événements.
---
Germain Becker & Sébastien Point, Lycée Emmanuel Mounier, Angers
