Ungol/ciel-b1
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Web JS - Cours et TD

Browse source
This commit is contained in:
Alexis Fourmaux 2025-11-19 18:33:23 +01:00
parent d3144e85b7
commit 3e84fbc62b
9 changed files with 343 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/cours/CIEL1/05-web-js/images/building_1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
src/cours/CIEL1/05-web-js/images/building_2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 225 KiB

BIN
src/cours/CIEL1/05-web-js/images/building_3.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
src/cours/CIEL1/05-web-js/images/building_4.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 306 KiB

BIN
src/cours/CIEL1/05-web-js/td/mult.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.5 KiB

108
src/cours/CIEL1/05-web-js/td/td_javascript.md Normal file
View file

@ -0,0 +1,108 @@
---
puppeteer:
format: A4
margin:
top: "0.1cm"
bottom: "0.1cm"
left: "0.5cm"
right: "0
---
# WEB - TD2 - JavaScript
## Ex1
La fonction `prompt()` en JS fonctionne comme `input` en python. Elle permet de demander du texte à l'utilisateur.
```js
let texte = prompt("Entrez du texte")
```
La fonction `alert` permet de créer une boîte de dialogue et afficher du texte à l'utilisateur
```js
alert("Aleeeeeerte !!");
```
1. Utiliser ces fonctions pour demander un texte à l'utilisateur et écrire ce texte dans une boîte de dialogue.
2. De même, demander un texte à l'utilisateur et afficher ce texte dans le corps de la page (body)
## Ex2
1. Créer deux variables `a` et `b` qui valent respectivement 17432 et 5
1. Créer une variable `result` qui contient la somme des variables `a` et `b`. Afficher le résultat de la somme dans une boite de dialogue.
## Ex3
1. À l'aide de la fonction `prompt()`, demander un prix HT à l'utilisateur puis insérer le prix TTC (TVA 20 %) dans la page HTML à l'aide de `document.body.textContent`
2. Modifier le code pour insérer le prix TTC sous forme de titre, grâce à `document.body.innerHTML`
3. Modifier le code pour changer la couleur du texte selon la règle suivante :
1. Si le prix ttc est supérieur à 100, affciher le texte en rouge
2. Sinon, l'afficher en vert
## Ex4
Grâce à la boucle de votre choix, afficher en console tous les multiples de 10 jusqu'à 1000.
## Ex5
En utilisant la boucle for, afficher la table de multiplication du chiffre 5 dans la page HTML. L'affichage attendu doit ressembler à ça (sans le cadre):
![mult](mult.png)
## Ex6
Dans une page HTML, créer un bouton qui affiche une boîte de dialogue avec le message "Hello !" lorsqu'on clique dessus
- Utiliser l'attribut `onclick`
- Modifier le code pour utiliser `addEventListener`
## Ex8
Objectif :
- La page contient un titre, un paragraphe, et un bouton.
- Au clic sur le bouton, le thème passe du mode clair au mode sombre et vice-versa.
- Le mode clair a un fond blanc avec texte noir.
- Le mode sombre a un fond noir avec texte blanc.
1. Prenez le code suivant et intégrez le css et un code javascript dans la page
2. Ajoutez un gestionnaire d'évènement `click` avec `addEventListener` au bouton
3. Ajoutez un selecteur sur la classe `dark` au CSS qui contienne le style du mode sombre
4. Basculez la classe de body à `dark` lorsqu'on clique sur le bouton
5. Changez le texte du bouton pour qu'il affiche le texte "Mode sombre" ou "Mode clair" selon le thème
```css
body {
background-color: white;
color: black;
font-family: Arial, sans-serif;
text-align: center;
padding: 2em;
transition: background-color 0.3s, color 0.3s;
}
button {
margin-top: 1em;
padding: 0.5em 1em;
cursor: pointer;
}
```
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Exercice thème</title>
</head>
<body>
<h1>Changer le thème</h1>
<p>Appuyez sur le bouton pour changer le thème clair / sombre.</p>
<button id="btnTheme">Changer le thème</button>
</body>
</html>
```
## Ex9
1. Créer une liste en HTML
2. Ajoutez un bouton qui ouvre une boîte de dialogue pour demander un texte à l'utilisateurice et l'ajoute à la suite de la liste
3. Ajoutez un bouton au bout de chaque élément de la liste qui permette de le supprimer

BIN
src/cours/CIEL1/05-web-js/td/td_javascript.pdf Normal file
View file

Binary file not shown.

235
src/slides/B1/web/04_dom.md Normal file
View file

@ -0,0 +1,235 @@
---
marp: true
theme: catppuccin
paginate: true
size: 4:3
transition: coverflow
footer: ''
math: katex
lang: "fr"
---
<style>
section {
font-size: 28px;
text-align: left
}
</style>
# JavaScript et le DOM
---
## C'est quoi le DOM ?
(Non ce n'est pas le diminutif de Dominique)
---
- Le DOM est une API.
- DOM = Document Object Model
- Décrit la structure d'un document (HTML)
- API = Application Programming Interface
- Ensemble de fonctions utilisables dans un programme pour interagir avec un autre programme
---
Le document est composé d'éléments (noeuds) qui peuvent eux-mêmes contenir des éléments.
```html
<!doctype html>
<html lang="en">
<head>
<title>My first web page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>How are you?</p>
</body>
</html>
```
![dom bg right height:80%](images/dom.png)
---
## Interagir avec le DOM
---
- Objet `document` ([doc](https://developer.mozilla.org/fr/docs/Web/API/Document)) :
- **Propriétés** : les éléments du document
- `body`, `head`, `doctype`...
- **Méthodes** : pour interagir avec le document
- Créer, supprimer ou modifier des **éléments**
- Gérer des **évènements**
- Manipuler le **stockage**
- **Événements** : pour interpréter les actions des utilisateurs
---
### Sélectionner des éléments
- `document.getElementById("id")`
- Récupère l'élément par son id
- `document.getElementsByClassName("classe")`
- Récupère **une liste** d'éléments par leur classe
- attention : getElement**s**
- `document.querySelector("selecteur_css")`
- Récupère **premier** élément par le sélecteur CSS
- ex: `#id` `.class` `balise[attribut]`...
---
<style scoped>
pre {
font-size: 28px;
}
</style>
```html
<h3 id="titre">Bonjour !</h3>
<p class="special">Texte mis en valeur</p>
<p>Ordinaire</p>
<button id="btn">Cliquez</button>
```
```js
const title = document.getElementById("titre")
const special = document.getElementsByClassName("special")
const paragraphs = document.querySelector("p")
```
---
### Manipuler le contenu d'un élément
On manipule les propriétés d'un élément :
- `textContent` : texte de l'élément
- `innerHTML` : HTML de l'élément
- (<del>`innerText`</del> : texte de l'élément)
- visible uniquement, pas efficace, source d'erreurs
- Les **propriétés** sont comme des **variables** : on peut les lire ou les modifier
```html
<p id="demo">Contenu initial</p>
<script>
document.getElementById("demo").innerHTML = "<em>Nouveau contenu <strong>HTML</strong></em>";
// Ou si on veut uniquement le texte :
document.getElementById("demo").textContent = "Nouveau texte";
</script>
```
---
### Manipuler le style d'un élément
On manipule la propriété `style` d'un élément, qui nous donne accès aux propriétés de style (comme le CSS)
```js
titre.style.color = "red";
titre.style.fontStyle = "italic"; // Remarquez le passage au camelCase de font-style
```
**Remarque** : la casse des propriétés de style
- en JS : `camelCase`
- en CSS : `kebab-case`
---
### Créer, insérer, remplacer, supprimer des éléments
- Créer : `createElement("balise");`
- Insérer :
- `appendChild(nouvel_element)` : ajoute un enfant à un élément parent
- `insertBefore(nouvel_element, autre_element)` : ajoute un élément avant un autre
- Remplacer :
- `replaceChild(nouvel_element, ancien_element)`
- Supprimer :
- `remove()` : supprime l'élément sur lequel elle est appliquée
- `removeChild(element)` : retire l'élément enfant d'un élément parent
---
```html
<div id="container">
<p id="parag1">Paragraphe 1</p>
<p id="parag2">Paragraphe 2</p>
</div>
```
```js
const container = document.getElementById("container");
// CRÉER un nouvel élément <p>
const nouveau = document.createElement("p");
nouveau.textContent = "Nouveau paragraphe créé";
// INSÉRER à la fin du container
container.appendChild(nouveau);
// REMPLACER le paragraphe 1 par un nouveau
const remplacement = document.createElement("p");
remplacement.textContent = "Je remplace le premier paragraphe";
const parag1 = document.getElementById("parag1");
container.replaceChild(remplacement, parag1);
// SUPPRIMER le paragraphe 2
const parag2 = document.getElementById("parag2");
parag2.remove();
```
---
### Gérer les évènements
**Évènements** : actions qui se produisent dans le navigateur
- Clic de souris
- Frappe au clavier
- Chargement de page
- On gère les interactions grâce aux évènements
- On lie un évènement à un gestionnaire d'évènement
- **Gestionnaire d'évènement** : fonction appelée quand l'évènement survient
---
#### Attributs
On peut lier un gestionnaire d'évènement à un évènement grâce à un attribut dans le HTML
```html
<button id="btn" onclick="alert('Bouton cliqué !')">Cliquez-moi</button>
```
- `onclick` : appelle le code quand on clique sur le bouton
- Facile et rapide mais **mauvaise pratique**
- Mélange HTML et JavaScript
- mauvaise séparation des responsabilités
- Peu flexible
- un seul gestionnaire à la fois
- difficile à maintenir
---
#### EventListener
On préfère cette méthode : lier un gestionnaire d'évènements à un évènement dans le code JS
- méthode `addEventListener`
```html
<button id="btn">Cliquez-moi</button>
```
```js
const bouton = document.getElementById("btn");
bouton.addEventListener("click", function() {
texte.textContent = "Bouton cliqué !";
});
```
---
Plusieurs types d'évènements :
- `input` : modification d’une zone de saisie
- `change` : changement d’état (ex. : sélection)
- `mouseover` / `mouseout` : passage de la souris sur un élément
- `keydown` / `keyup` : touches du clavier pressées ou relâchées.
​

BIN
src/slides/B1/web/images/dom.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB