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..3f79418 100644 --- a/app/pages/docs/javascript/dom/+Page.mdx +++ b/app/pages/docs/javascript/dom/+Page.mdx @@ -12,7 +12,7 @@ Maintenant que nous avons vu les grandes lignes du langage JavaScript, tu vas en ## 🤔 Qu'est-ce que le DOM ? -Le **Document Object Model** _(ou **DOM** en anglais)_ est une interface de programmation pour les documents HTML et XML. Il permet de représenter la page web comme un arbre de **nœuds**. +Le **Document Object Model** _(ou **DOM** pour faire plus court)_ est une interface de programmation pour les documents HTML et XML. Il permet de représenter la page web comme un arbre de **nœuds**. Chaque élément HTML est un nœud dans l'arbre, et les nœuds peuvent contenir d'autres nœuds. Mais un nœud peut aussi être un **texte** ou une **propriété** d'un élément ! @@ -116,4 +116,138 @@ 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 +<<<<<<< HEAD +Pour modifier les attributs d'un élément, on peut utiliser la propriété `element.setAttribute(attribute, value)`. +======= +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)`. +Cette méthode fonctionne de la même manière que les méthodes de sélection d'éléments que l'on a vu précédemment. + +Elle prend en paramètre le nom de la balise HTML de l'élément à créer et retourne un objet représentant l'élément créé. + + + +Une fois l'élément créé, on peut l'ajouter à la page en utilisant la méthode `appendChild(element)`. + + + +Il existe plusieurs méthodes pour ajouter un élément à la page : + +- `appendChild(element)` : Ajoute un élément à la fin de l'élément parent. +- `append(element1, element2, ...)` : Ajoute un ou plusieurs éléments à la fin de l'élément parent. +- `prepend(element)` : Ajoute un élément au début de l'élément parent. +- `insertBefore(newElement, existingElement)` : Ajoute un élément avant un élément existant. +- `insertAdjacentHTML(position, html)` : Insère du HTML à une position donnée. +- `insertAdjacentText(position, text)` : Insère du texte à une position donnée. +- `insertAdjacentElement(position, element)` : Insère un élément à une position donnée. +- `replaceChild(newElement, oldElement)` : Remplace un élément par un autre. + +Comme tu peux le voir, tu as plusieurs choix qui s'ouvrent à toi ! +À toi de choisir la méthode qui te convient le mieux, en fonction de ce que tu veux faire 😉 + +## 🤝 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 ! 😎 +Tu peux aller encore plus loin en utilisant des **événements** pour réagir à des actions de l'utilisateur, ou encore des **observateurs** pour surveiller les modifications d'un élément. + +Mais c'est un autre sujet, que l'on verra dans la prochaine partie ! + +En attendant, n'hésite pas à t'exercer en créant des pages web avec JavaScript ! 😊 +>>>>>>> docs/js diff --git a/app/pages/docs/javascript/dom/tabs.tsx b/app/pages/docs/javascript/dom/tabs.tsx index 66e2f0c..d26902b 100644 --- a/app/pages/docs/javascript/dom/tabs.tsx +++ b/app/pages/docs/javascript/dom/tabs.tsx @@ -168,6 +168,163 @@ 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");`, + }, +]; + +const jsDomCreationExplanations = [ + { + name: "Création d'un élément", + codeLanguage: "js", + code: `const element = document.createElement("div");`, + }, +]; + +const jsDomAppendChildExplanations = [ + { + name: "Ajout d'un élément à la page", + codeLanguage: "js", + code: `const element = document.createElement("div"); + +document.body.appendChild(element);`, + }, +]; + export default { jsDomExplanations: () => , jsDomSelectionExplanations: () => ( @@ -176,4 +333,25 @@ export default { jsDomContentModificationExplanations: () => ( ), + jsDomAttributesModificationExplanations: () => ( + + ), + jsDomAttributesDeletionExplanations: () => ( + + ), + jsDomAttributesVerificationExplanations: () => ( + + ), + jsDomClassesModificationExplanations: () => ( + + ), + jsDomStylesModificationExplanations: () => ( + + ), + jsDomCreationExplanations: () => ( + + ), + jsDomAppendChildExplanations: () => ( + + ), }; diff --git a/app/pages/docs/javascript/evenements/+Page.mdx b/app/pages/docs/javascript/evenements/+Page.mdx new file mode 100644 index 0000000..7c7ffc4 --- /dev/null +++ b/app/pages/docs/javascript/evenements/+Page.mdx @@ -0,0 +1,11 @@ +--- +title: La manipulation du DOM avec JavaScript +description: Découvrez comment maîtriser le DOM en JavaScript et donnez vie à vos pages web ! +tags: [] +--- + +import QuickLinks from "@/components/QuickLinks"; +import Callout from "@/components/Callout"; +import tabs from "./tabs"; + +Maintenant que nous avons vu les grandes lignes du langage JavaScript, tu vas enfin pouvoir entrer dans le vif du sujet : la **manipulation du DOM** avec JavaScript. diff --git a/app/pages/docs/javascript/evenements/tabs.tsx b/app/pages/docs/javascript/evenements/tabs.tsx new file mode 100644 index 0000000..49ee0cb --- /dev/null +++ b/app/pages/docs/javascript/evenements/tabs.tsx @@ -0,0 +1,18 @@ +import { Snippet } from "@/components/Snippet"; + +const jsDomSelectionExplanations = [ + { + name: "document.getElementById(id)", + codeLanguage: "js", + code: `// Sélectionner un élément par son ID +// Ici, on sélectionne l'élément qui a l'ID "id" + +const element = document.getElementById("id");`, + }, +]; + +export default { + jsDomSelectionExplanations: () => ( + + ), +};