Appuyez sur le bouton pour changer le thème clair / sombre.
+ + + +``` + +## 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 \ No newline at end of file diff --git a/src/cours/CIEL1/05-web-js/td/td_javascript.pdf b/src/cours/CIEL1/05-web-js/td/td_javascript.pdf new file mode 100644 index 0000000..31bb1cc Binary files /dev/null and b/src/cours/CIEL1/05-web-js/td/td_javascript.pdf differ diff --git a/src/slides/B1/web/04_dom.md b/src/slides/B1/web/04_dom.md new file mode 100644 index 0000000..9b4ded0 --- /dev/null +++ b/src/slides/B1/web/04_dom.md @@ -0,0 +1,235 @@ +--- +marp: true +theme: catppuccin +paginate: true +size: 4:3 +transition: coverflow +footer: '' +math: katex +lang: "fr" +--- + + + +# 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 + + + +How are you?
+ + +``` + + + +--- + +## 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]`... + +--- + + +```html +Texte mis en valeur
+Ordinaire
+ +``` + +```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 +- (Contenu initial
+ + +``` + +--- + +### 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 +Paragraphe 1
+Paragraphe 2
++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 + +``` +- `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 + +``` + +```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. + \ No newline at end of file diff --git a/src/slides/B1/web/images/dom.png b/src/slides/B1/web/images/dom.png new file mode 100644 index 0000000..cbcc5c7 Binary files /dev/null and b/src/slides/B1/web/images/dom.png differ