diff --git a/app/libs/navigation.ts b/app/libs/navigation.ts index f567961..2f7920b 100644 --- a/app/libs/navigation.ts +++ b/app/libs/navigation.ts @@ -127,10 +127,10 @@ export const navigation: NavigationSection[] = [ title: "Fonctions et portée", href: "/docs/javascript/fonctions-et-portee", }, - // { - // title: "Le DOM", - // href: "/docs/javascript/dom", - // }, + { + title: "Le DOM", + href: "/docs/javascript/dom", + }, ], }, { diff --git a/app/pages/docs/javascript/dom/+Page.mdx b/app/pages/docs/javascript/dom/+Page.mdx index 5f47f9b..637731d 100644 --- a/app/pages/docs/javascript/dom/+Page.mdx +++ b/app/pages/docs/javascript/dom/+Page.mdx @@ -116,4 +116,106 @@ Je ne vais pas rentrer dans les détails ici, mais tu peux en savoir plus sur ce ### 🔧 Modifier les attributs d'un élément -Pour modifier les attributs d'un élément, on peut utiliser la propriété `element.setAttribute(attribute, value)`. \ No newline at end of file +On a eu l'occasion de voir comment modifier le contenu d'un élément, mais on peut également modifier ses attributs. +Pour modifier les attributs d'un élément, on peut utiliser la méthode `element.setAttribute(attribute, value)`. + +Mais avant d'aller plus loin... + + + Un attribut est une propriété d'un élément HTML. + + Par exemple, l'attribut `src` d'une balise `` est la source de l'image. + + +En conservant l'exemple de l'image, on peut modifier son attribut `src` pour changer l'image affichée. + + + +Si maintenant on souhaite supprimer un attribut, on aura une méthode similaire : `element.removeAttribute(attribute)`. + + + +D'autres variantes existent pour manipuler les attributs d'un élément : + +- `element.hasAttribute(attribute)` : Vérifie si l'élément a un attribut. +- `element.getAttribute(attribute)` : Récupère la valeur d'un attribut. +- `element.toggleAttribute(attribute, value)` : Ajoute ou supprime un attribut. + + + +Et en réalité, c'est à peu près tout pour la modification des attributs d'un élément ! +Avec une exception pour... + +### 🔄 Modifier les classes d'un élément + +Pour modifier les classes d'un élément, on n'utilise pas la méthode `element.setAttribute()`, mais plutôt les méthodes présentes dans la propriété `element.classList`. + +`element.classList` est une propriété qui contient une liste de classes de l'élément _(en lecteur seule, impossible de modifier directement la liste)_, mais qui a également des méthodes pour les manipuler. + +Les fameuses méthodes sont : + +- `element.classList.add(className)` : Ajoute une classe à l'élément. +- `element.classList.remove(className)` : Supprime une classe de l'élément. +- `element.classList.toggle(className)` : Ajoute ou supprime une classe de l'élément. +- `element.classList.contains(className)` : Vérifie si l'élément a une classe. + + + +Plutôt simple à utiliser, non ? 😏 + +### 🔄 Modifier les styles d'un élément + +Maintenant que l'on sait comment modifier le contenu d'un élément, ses attributs et ses classes, on peut se pencher sur les styles. + +Comme pour les classes, on n'utilise pas la méthode `element.setAttribute()`. +On va plutôt utiliser la propriété `element.style` pour modifier les styles d'un élément. + +`element.style` est une propriété qui contient un objet de styles de l'élément _(en lecteur seule, impossible de modifier directement l'objet)_, mais qui a également des méthodes pour les manipuler. + +On retrouve les méthodes suivantes : + +- `element.style.setProperty(property, value)` : Modifie la valeur d'un style. +- `element.style.getPropertyValue(property)` : Récupère la valeur d'un style. +- `element.style.removeProperty(property)` : Supprime un style. + + + +Ici encore, on reste sur de l'utilisation relativement simple ! + + + Les styles inline sont des styles qui sont appliqués directement à l'élément dans le code HTML. + + Ils sont très pratiques pour des cas très spécifiques, mais il faut **bien comprendre** qu'ils sont **prioritaires** par rapport aux autres styles. + Il est préférable d'utiliser autant que possible les classes CSS pour modifier les styles d'un élément. + + Cependant, il est parfois nécessaire d'utiliser les styles inline pour des raisons de personnalisation. + C'est notamment le cas pour la mise en place de variables CSS dynamiques, ou pour des cas très spécifiques ! + + +### 🔨 Créer un élément + +Personnaliser des éléments c'est top, mais les créer c'est encore mieux ! + + + Avant même de te montrer comment ça marche, laisse moi te dire que c'est le principe utilisé par de nombreux frameworks et bibliothèques JavaScript front-end pour créer des interfaces utilisateurs. + + Pour citer les plus connus, on retrouve : + + - [React](https://react.dev/) + - [Vue.js](https://vuejs.org/) + - [Angular](https://angular.io/) + - [Svelte](https://svelte.dev/) + - [Solid](https://www.solidjs.com/) + + On garde ce sujet pour une prochaine fois, d'autant plus que ces outils nécessitent une compréhension plus approfondie des concepts JavaScript. + + +Mais alors, sous le capot, que font ces outils ? + +Pour créer un élément, on peut utiliser la méthode `document.createElement(tagName)`. + +## 🤝 Conclusion + +Allez, on s'arrête là pour aujourd'hui ! + +Mais avec toutes ces propriétés et méthodes, tu as de quoi manipuler le DOM comme un pro ! 😎 \ No newline at end of file diff --git a/app/pages/docs/javascript/dom/tabs.tsx b/app/pages/docs/javascript/dom/tabs.tsx index 66e2f0c..d62eea2 100644 --- a/app/pages/docs/javascript/dom/tabs.tsx +++ b/app/pages/docs/javascript/dom/tabs.tsx @@ -168,6 +168,145 @@ element.textContent = "Nouveau contenu";`, }, ]; +const jsDomAttributesModificationExplanations = [ + { + name: "Modification de l'attribut src", + codeLanguage: "js", + code: `const image = document.getElementById("image-id"); + +image.setAttribute("src", "https://example.com/image.jpg");`, + }, +]; + +const jsDomAttributesDeletionExplanations = [ + { + name: "Suppression de l'attribut src", + codeLanguage: "js", + code: `const image = document.getElementById("image-id"); + +image.removeAttribute("src");`, + }, +]; + +const jsDomAttributesVerificationExplanations = [ + { + name: "Vérification de l'attribut src", + codeLanguage: "js", + code: `const image = document.getElementById("image-id"); + +if (image.hasAttribute("src")) { + const attributeValue = image.getAttribute("src"); + console.log("L'attribut src a la valeur :", attributeValue); +}`, + }, + { + name: "Alterner un attribut avec toggleAttribute", + codeLanguage: "js", + code: `const button = document.getElementById("button-id"); + +// Alterne l'attribut disabled entre true et false (vrai ou faux) +button.toggleAttribute("disabled");`, + }, + { + name: "Alterner un attribut avec toggleAttribute avec un argument", + codeLanguage: "js", + code: `const button = document.getElementById("button-id"); + +const shouldDisable = true; + +// Passe l'attribut disabled à un état forcé, +// en fonction de la valeur de shouldDisable +button.toggleAttribute("disabled", shouldDisable);`, + }, +]; + +const jsDomClassesModificationExplanations = [ + { + name: "Ajouter une classe avec add", + codeLanguage: "js", + code: `const element = document.getElementById("element-id"); + +// Ajoute la classe css-class +element.classList.add("css-class");`, + }, + { + name: "Ajouter plusieurs classes avec add", + codeLanguage: "js", + code: `const element = document.getElementById("element-id"); + +// Ajoute les classes css-class, css-class-2 et css-class-3 +element.classList.add("css-class", "css-class-2", "css-class-3");`, + }, + { + name: "Supprimer une classe avec remove", + codeLanguage: "js", + code: `const element = document.getElementById("element-id"); + +// Supprime la classe css-class +element.classList.remove("css-class");`, + }, + { + name: "Supprimer plusieurs classes avec remove", + codeLanguage: "js", + code: `const element = document.getElementById("element-id"); + +// Supprime les classes css-class, css-class-2 et css-class-3 +element.classList.remove("css-class", "css-class-2", "css-class-3");`, + }, + { + name: "Vérifier si un élément a une classe avec contains", + codeLanguage: "js", + code: `const element = document.getElementById("element-id"); + +// Retourne true si l'élément a la classe css-class, false sinon +element.classList.contains("css-class");`, + }, + { + name: "Alterner une classe avec toggle", + codeLanguage: "js", + code: `const element = document.getElementById("element-id"); + +// Ajoute ou supprime la classe css-class, +// en fonction de sa présence ou non +element.classList.toggle("css-class");`, + }, + { + name: "Alterner une classe avec toggle avec un argument", + codeLanguage: "js", + code: `const element = document.getElementById("element-id"); + +const shouldToggle = true; + +// Alterne la classe css-class entre true et false (vrai ou faux), +// en fonction de la valeur de shouldToggle +element.classList.toggle("css-class", shouldToggle);`, + }, +]; + +const jsDomStylesModificationExplanations = [ + { + name: "Modification de la couleur de texte", + codeLanguage: "js", + code: `const element = document.getElementById("element-id"); + +element.style.setProperty("color", "red");`, + }, + { + name: "Récupération de la valeur d'un style", + codeLanguage: "js", + code: `const element = document.getElementById("element-id"); + +const styleValue = element.style.getPropertyValue("color");`, + }, + { + name: "Suppression d'un style", + codeLanguage: "js", + code: `const element = document.getElementById("element-id"); + +element.style.removeProperty("color");`, + }, +]; + export default { jsDomExplanations: () => , jsDomSelectionExplanations: () => ( @@ -176,4 +315,19 @@ export default { jsDomContentModificationExplanations: () => ( ), + jsDomAttributesModificationExplanations: () => ( + + ), + jsDomAttributesDeletionExplanations: () => ( + + ), + jsDomAttributesVerificationExplanations: () => ( + + ), + jsDomClassesModificationExplanations: () => ( + + ), + jsDomStylesModificationExplanations: () => ( + + ), };