2f:T56c,En plus de définir les styles, le CSS permet de **positionner les éléments** dans la page web de différentes façons. Le positionnement classique utilise la propriété position (**static, relative, absolute, fixed, sticky**) pour placer un élément de manière plus ou moins indépendante du flux normal. Pour des mises en page plus complexes, le système **CSS Grid** offre une grille en deux dimensions (lignes et colonnes) permettant d’organiser les éléments de façon souple et précise. Avec display: grid, on contrôle la structure, l’alignement, les espacements et la répartition des contenus, ce qui en fait une solution moderne et puissante pour le web design. - **static** : position par défaut, l’élément suit le flux normal de la page. - **relative** : l’élément reste dans le flux mais peut être décalé par rapport à sa position initiale. - **absolute** : l’élément est retiré du flux et positionné par rapport à son ancêtre positionné le plus proche. - **fixed** : l’élément est retiré du flux et reste fixé par rapport à la fenêtre du navigateur, même au défilement. - **sticky** : l’élément se comporte comme relative mais devient fixé (fixed) lorsqu’on atteint une certaine position de scroll. - **grid** : permet de disposer les élément dans une grille à lignes et colonnes pour un agencement précis et flexible.30:T586,Le trio HTML, CSS et JavaScript constitue aujourd’hui un véritable **écosystème complet**. Là où le Web ne permettait autrefois que l’affichage de documents statiques, il est désormais possible de construire des applications complexes s’exécutant directement dans le navigateur : messageries instantanées, tableurs collaboratifs, outils de cartographie interactive, logiciels de dessin, traitements de texte, plateformes de visioconférence ou environnements de développement complets. Une grande partie des usages autrefois réservés aux logiciels installés localement peut désormais être réalisée en ligne, avec des interfaces riches et interactives. Ces technologies côté client se combinent fréquemment avec des langages exécutés côté serveur (Python, R, PHP, etc.) afin de gérer les données, les calculs, l’authentification ou les échanges avec des bases de données. Dans les projets de taille importante, les développeurs repartent rarement de zéro : ils s’appuient sur des **frameworks** et **bibliothèques** qui fournissent des structures, des composants et des outils facilitant le développement. L’écosystème JavaScript en compte une multitude, parmi lesquels React, Vue, Angular ou Svelte. **Observable** s’inscrit dans cette famille d’outils, avec une approche originale centrée sur les notebooks réactifs et la visualisation interactive de données.31:[{"id":"7d42eb175eba3f22f7e7a6fc6a1dc3f96a88658cecbff4aa0ebd4d53bf0c42b4d499e65b8d7b65b42720ce62fd178bdfee6efc7699aec89708e2c1944c3f6e82","href":"https://static.observableusercontent.com/files/7d42eb175eba3f22f7e7a6fc6a1dc3f96a88658cecbff4aa0ebd4d53bf0c42b4d499e65b8d7b65b42720ce62fd178bdfee6efc7699aec89708e2c1944c3f6e82","name":"ide.png","type":"image/png","lastModified":1776947014872.944,"size":38224},{"id":"59eb9c20b242eea4741eac0c6baed07463a75d3b6690b3276ce70b5ad66f4840a5a497c56ab5f80535db39462b943ac4f6a88ffeb7dab7b4ae0b6220c6256175","href":"https://static.observableusercontent.com/files/59eb9c20b242eea4741eac0c6baed07463a75d3b6690b3276ce70b5ad66f4840a5a497c56ab5f80535db39462b943ac4f6a88ffeb7dab7b4ae0b6220c6256175","name":"arpanet.webp","type":"image/webp","lastModified":1776946383764.323,"size":68404},{"id":"01b6b4a69769b3457409c0cb4738033816736c3bf524e48920c89df8cd7e37e4dc2baa6d14d73807a0b1de85de7f34d4d64d4f11a638f8626cb2fef8ee98ec92","href":"https://static.observableusercontent.com/files/01b6b4a69769b3457409c0cb4738033816736c3bf524e48920c89df8cd7e37e4dc2baa6d14d73807a0b1de85de7f34d4d64d4f11a638f8626cb2fef8ee98ec92","name":"html5.png","type":"image/png","lastModified":1776946615035.994,"size":6500},{"id":"31dd9ccafc26667b4fc527b56f7e3e238c822440bd36c0bbacca048ff22ffc4ee7ed9668112e1bc8983513f2ca57827203bf6cb1acb8a6eaa1907ede4fca4fdf","href":"https://static.observableusercontent.com/files/31dd9ccafc26667b4fc527b56f7e3e238c822440bd36c0bbacca048ff22ffc4ee7ed9668112e1bc8983513f2ca57827203bf6cb1acb8a6eaa1907ede4fca4fdf","name":"netscape.webp","type":"image/webp","lastModified":1776946531939.842,"size":105130},{"id":"977fa0939256e961ae7c080c3cf3515825daf95ac9e971e7e06c602907e5e49fa12d04b00938f8443552abb7e6ef809561cd1e7f99f07128bdfcb7f42fb39629","href":"https://static.observableusercontent.com/files/977fa0939256e961ae7c080c3cf3515825daf95ac9e971e7e06c602907e5e49fa12d04b00938f8443552abb7e6ef809561cd1e7f99f07128bdfcb7f42fb39629","name":"foule.jpg","type":"image/jpeg","lastModified":1776946753169.45,"size":74226},{"id":"9b0cb0ae77be4be8e7e60d97a081753a3ad4c35c41ed25c30211b72bd86d4909c0336a08370a2c13ac808b4ae4359e7533128ece0bdf5e6c97cb192b3db8a104","href":"https://static.observableusercontent.com/files/9b0cb0ae77be4be8e7e60d97a081753a3ad4c35c41ed25c30211b72bd86d4909c0336a08370a2c13ac808b4ae4359e7533128ece0bdf5e6c97cb192b3db8a104","name":"9407011_31-A4-at-144-dpi.jpg","type":"image/jpeg","lastModified":1776946411839.335,"size":197229},{"id":"6028358ebf9f35de8d8e2b499aa887d585d9de463068a0c4c3f7bb6f40850d9aef7e862dc98bef65e475b08d4bc43cadee514746bbc1e8ce0127ea54315ba9c0","href":"https://static.observableusercontent.com/files/6028358ebf9f35de8d8e2b499aa887d585d9de463068a0c4c3f7bb6f40850d9aef7e862dc98bef65e475b08d4bc43cadee514746bbc1e8ce0127ea54315ba9c0","name":"yahoo.webp","type":"image/webp","lastModified":1776946561610.723,"size":54160},{"id":"33585dbd013ed64e54bffb703265ae024e26e0f55e3498b33768dfe6e352990c68770757f170403b55e534e7083a46d5cdf527f5096292c849ba6175a0efe1c6","href":"https://static.observableusercontent.com/files/33585dbd013ed64e54bffb703265ae024e26e0f55e3498b33768dfe6e352990c68770757f170403b55e534e7083a46d5cdf527f5096292c849ba6175a0efe1c6","name":"google.webp","type":"image/webp","lastModified":1776946590310.968,"size":21454},{"id":"ba0c7515964272f3f9c70d60457b01b2546569de9691e76ac4dcd4411d6f4633fa5b7f94263f604c70b037c4f70a7ff2605c739e238d95a61ec119bda57cc24e","href":"https://static.observableusercontent.com/files/ba0c7515964272f3f9c70d60457b01b2546569de9691e76ac4dcd4411d6f4633fa5b7f94263f604c70b037c4f70a7ff2605c739e238d95a61ec119bda57cc24e","name":"aaa.png","type":"image/png","lastModified":1776947659959.107,"size":10843},{"id":"98e699248de395304e8700e9b5edbdcf4e1d9756719fb584c5a4a3de3ea3f839dcdb1c4a7339627ba22944865216cf343ef580ef650381badf8ad818d4447f07","href":"https://static.observableusercontent.com/files/98e699248de395304e8700e9b5edbdcf4e1d9756719fb584c5a4a3de3ea3f839dcdb1c4a7339627ba22944865216cf343ef580ef650381badf8ad818d4447f07","name":"DOM.png","type":"image/png","lastModified":1776957450370.563,"size":89190},{"id":"2c689f4f07a0b55d2357821e11b8e6a0ef671ce2427c6a93fb3b568745049bff556f43b20590e637f952bd9c35db5cb86a46c913ecf4c2ac0bba7c78a0234444","href":"https://static.observableusercontent.com/files/2c689f4f07a0b55d2357821e11b8e6a0ef671ce2427c6a93fb3b568745049bff556f43b20590e637f952bd9c35db5cb86a46c913ecf4c2ac0bba7c78a0234444","name":"premierweb.png","type":"image/png","lastModified":1776946447929.512,"size":171984},{"id":"0a2ed8eb9bfc0a30179f9a00f47e9110663de6d1444abdd4461fb94a211070966ec53bac4d16ba1d31b449af333aaeacdbbc5a165690997c4ead6ae7fe0eaf18","href":"https://static.observableusercontent.com/files/0a2ed8eb9bfc0a30179f9a00f47e9110663de6d1444abdd4461fb94a211070966ec53bac4d16ba1d31b449af333aaeacdbbc5a165690997c4ead6ae7fe0eaf18","name":"Turing.png","type":"image/png","lastModified":1776946345329.338,"size":972221}] 2d:{"title":"Qu’est ce que le web ?","cells":[{"id":0,"value":"# Qu’est ce que le web ?","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"**1940** - Le premier ordinateur Le mathématicien Alan Turing pose les bases théoriques de ce que pourrait être un ordinateur.","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"turing = FileAttachment(\"Turing.png\").image({ width: 600 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"**1969** - Internet est né d’une initiative militaire américaine. Le premier nœud du réseau ARPANET (Advanced Research Project Agency Network) à l’origine d’Internet a été mis en place en 1969.","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"arpanet = FileAttachment(\"arpanet.webp\").image({ width: 600 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"12 Mars **1989** - première version du Web - Tim Berners-Lee, chercheur britannique au CERN, a inventé l","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"_31A4At144Dpi = FileAttachment(\"9407011_31-A4-at-144-dpi.jpg\").image({\n width: 600\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"A l’origine, le projet, baptisé « World Wide Web », a été conçu et développé pour que des scientifiques travaillant dans des universités et instituts du monde entier puissent s’échanger des informations instantanéme","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"premierweb = FileAttachment(\"premierweb.png\").image({ width: 600 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"*__Web ou Internet ?__ Internet est une plateforme qui permet de faire parvenir des informations d’un ordinateur à un autre. Le web, lui, est un moyen de visiter des pages de sites à partir de navigateurs via des ordinateurs, des tablettes ou des smartphones*","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"**1991** - le Web s’ouvre à tous.","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"En **1993**, la technologie devient publique. Le Web voit très vite son usage exploser sur Internet.","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"fin **1994**, le nombre de serveurs web atteint les 10 000 !","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"Le lancement de **Netscape**, le premier navigateur réellement grand public, participera aussi largement à sa démocratisation.","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"netscape = FileAttachment(\"netscape.webp\").image({ width: 600 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"Janvier **1994** - Yahoo !","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"Le nombre de sites explose, à tel point qu’il devient très difficile pour l’internaute béotien de s’y retrouver. Deux étudiants de Stanford, Jerry Yang et David Filo, décident de créer un gigantesque annuaire de sites, classés de façon thématique. Il va vite devenir le portail numéro 1 de la Toile.","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"yahoo = FileAttachment(\"yahoo.webp\").image({ width: 600 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"**1998** - Google lance son moteur de recherche","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"google = FileAttachment(\"google.webp\").image({ width: 600 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"**2010** - l’émergence du HTML5, le futur du Web","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"html5 = FileAttachment(\"html5.png\").image({ width: 600 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"25 ans après son invention, le HTML fait une douce révolution, toujours sous l’impulsion de Tim Berners-Lee. Grâce à la cinquième version du standard de balisage des pages Web – et de nombreuses technologies associées – de nouveaux services émergent. Objectif de ce standard : transformer les pages Web, encore trop statiques, en véritables programmes informatiques, qui n’auraient rien à envier aux applications pour smartphones ou aux logiciels que vous installez sur votre ordinateur. Et faire du navigateur l’unique appli dont vous aurez besoin.","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"**Aujourd’hui**","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"Plus de 4 milliard d’utilisateurs","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"foule = FileAttachment(\"foule.jpg\").image({ width: 600 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"# Les langages du web","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"Les langages du web sont les technologies qui permettent de créer, structurer, styliser, et faire fonctionner des sites et applications web. On peut les classer en trois grandes catégories : langages de **structure**, de **style**, et de **comportement**, auxquels s’ajoutent les langages côté serveur et les technologies associées.","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"aaa = FileAttachment(\"aaa.png\").image({ width: 600 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"👉 Un site web de référence : https://developer.mozilla.org/fr/docs/Web","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"### Comment écrire du code ?","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"Pour écrire du code, on utilise génralement une IDE (interface de développement). Il en existe de nombreux sur la marché et un certains nombre d’entre eux sont gratuits. Mais on peut utiliser un simple éditeur de texte type **notepad** ou **notepad++**. Ensuite, il suffit d’ouvrir les fichiers avec votre navigateur web préféré.","pinned":false,"hidden":false,"mode":"md"},{"id":84,"value":"ide = FileAttachment(\"ide.png\").image({ width: 600 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"Vous pouvez aussi utiliser des environnement de développement en ligne spécialement conçu pour tester, partager et déboguer du code. On peut citer JSFiddle, **CodePen**, **JSBin**, **PlayCode**, **StackBlitz** ou **Observable**.","pinned":false,"hidden":false,"mode":"md"},{"id":319,"value":"Pur la suite, vous pouvez copier coller les blocs de code dans **[JSFiddle](https://jsfiddle.net/)**.","pinned":false,"hidden":false,"mode":"md"},{"id":90,"value":"### Le HTML","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"Le **HyperText Markup Language**, généralement abrégé HTML est ce qui correspond au squelette d’une page web. C’est la structuration du document. Le HTML est structuré par des **balises** emboîtées les unes dans les autres.","pinned":false,"hidden":false,"mode":"md"},{"id":213,"value":"HTML","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"```{.html}\n\n\n \n Page Title\n \n \n \n

This is a Heading

something here

This is a paragraph.

\n \n

Pomme
Banane
Orange

\n\n \n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"NB : grâce à la balise **svg**, on peut même dessiner directement.","pinned":false,"hidden":false,"mode":"md"},{"id":225,"value":"HTML","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"```html\n

Un cercle SVG

\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"### Le CSS","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"Les feuilles de style en cascade, généralement appelées CSS de l’anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML. Le CSS définit le **style** et le **positionnement** des éléments sur la page.","pinned":false,"hidden":false,"mode":"md"},{"id":230,"value":"CSS","pinned":false,"hidden":false,"mode":"md"},{"id":145,"value":"```css\nbody {\n background-color: lightblue;\n}\n\nh1 {\n color: white;\n text-align: center;\n}\n\np {\n font-family: verdana;\n font-size: 20px;\n}\n\nul {\n list-style-type: disc; /* Puces rondes par défaut */\n padding-left: 1em; /* Légère indentation */\n font-family: sans-serif;\n}\n\nli {\n margin: 0.3em 0; /* Petit espace entre les lignes */\n}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":147,"value":"On peut modifier le styles l’éléments spécifiques qu’on identifie par une **classe** ou un **identifiant**.","pinned":false,"hidden":false,"mode":"md"},{"id":232,"value":"CSS","pinned":false,"hidden":false,"mode":"md"},{"id":149,"value":"```css\n#mondiv {\n background-color: #f0f8ff; /* Bleu très clair */\n border-left: 4px solid #007acc; /* Liseré bleu */\n padding: 0.5em 1em;\n margin: 1em 0;\n font-family: sans-serif;\n font-size: 1rem;\n}\n\n.highlight {\n color: #c62828; /* Rouge profond */\n font-weight: bold;\n background-color: #fff3e0; /* Fond crème doux */\n padding: 0.2em 0.5em;\n border-radius: 4px;\n}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":151,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":241,"value":"HTML","pinned":false,"hidden":false,"mode":"md"},{"id":234,"value":"```html\n

mon div1

mon div2

\n```","pinned":false,"hidden":false,"mode":"md"},{"id":239,"value":"CSS","pinned":false,"hidden":false,"mode":"md"},{"id":236,"value":"```css\n#div1 {\n position: absolute;\n left: 10px;\n top: 10px;\n}\n\n#div2 {\n position: absolute;\n left: 120px;\n top: 10px;\n}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":245,"value":"Bien maitriser le CSS n’est pas évident. C’est un métier en soi.\n\nSe référer à la documentation : https://developer.mozilla.org/fr/docs/Web/CSS/position","pinned":false,"hidden":false,"mode":"md"},{"id":249,"value":"### Le JavasScript","pinned":false,"hidden":false,"mode":"md"},{"id":251,"value":"Le JavaScript est le langage de script du navigateur. Contrairement au HTML qui structure le contenu et au CSS qui le met en forme, JavaScript permet de créer des comportements dynamiques et interactifs : changer du texte ou des images, gérer des formulaires, créer des animations, ou encore communiquer avec des serveurs pour récupérer des données en temps réel. Il s’exécute directement dans le navigateur de l’utilisateur. Il fonctionne sur tous les navigateurs web sans avoir besoin d’installer quoi que ce soit.","pinned":false,"hidden":false,"mode":"md"},{"id":323,"value":"C'est le seul langage de script que le navigateur web sait interpréter. On s'en sert pour faire des calculs et automatiser des tâches. ","pinned":false,"hidden":false,"mode":"md"},{"id":253,"value":"JavaScript","pinned":false,"hidden":false,"mode":"md"},{"id":325,"value":"```js\nlet bonbons = 38;\nlet enfants = 7;\n\nlet bonbonsparenfants = Math.floor(bonbons / enfants);\nlet reste = bonbons % enfants\n\nconsole.log(bonbonsparenfants);\nconsole.log(reste); \n```","pinned":false,"hidden":false,"mode":"md"},{"id":341,"value":"Un autre exemple :","pinned":false,"hidden":false,"mode":"md"},{"id":343,"value":"```js\nconst age = 20;\n\nif (age > 18) {\n console.log(\"Majeur\");\n} else {\n console.log(\"Mineur\");\n}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":258,"value":"### Le DOM","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"Nous avons dit que le HTML était le squelette de la page, constitué des balises, des classes et d’identifiants. Une autre façon de voir ce squelette est de l’imaginer comme un arbre avec des noeuds et des ramifications.","pinned":false,"hidden":false,"mode":"md"},{"id":273,"value":"dom = FileAttachment(\"DOM.png\").image({ width: 600 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"Le DOM (**Document Object Model**) est une représentation en mémoire de la page web, que JavaScript est capable de manipuler.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":260,"value":"```html\n\n \n

Bonjour

\n \n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":263,"value":"Devient","pinned":false,"hidden":false,"mode":"md"},{"id":265,"value":"```html\ndocument\n └─ html\n └─ body\n └─ p\n```","pinned":false,"hidden":false,"mode":"md"},{"id":277,"value":"Pour acceder à un élement en JavaScript, il y a plien de manières de faire. Un façon pratique est d'utilise `document.querySelector()``. Cela premet de récupérer le contenu d’un élément de la page web.\n- **`document.querySelector(\"#monid\")`** permet d’acceder à un noeud défini par un identifiant\n- **`document.querySelector(\".maclasse\")`** permet d’acceder au premier élement d’une classe\n- **`document.querySelector(\"tag\")`** permet d’acceder au premier tag. Par exemple, `document.querySelector(\"p\")` permet d’acceder au premier.","pinned":false,"hidden":false,"mode":"md"},{"id":289,"value":"HTML","pinned":false,"hidden":false,"mode":"md"},{"id":283,"value":"```html\n

Alea jacta est

\n```","pinned":false,"hidden":false,"mode":"md"},{"id":350,"value":"Avec `textContent` ou `innerHTML` On peut récupérer le contenu du div :","pinned":false,"hidden":false,"mode":"md"},{"id":352,"value":"JavaScript","pinned":false,"hidden":false,"mode":"md"},{"id":357,"value":"```js\nconst content = document.querySelector(\"#monid\").textContent\nconsole.log(content)\n```","pinned":false,"hidden":false,"mode":"md"},{"id":354,"value":"Et on peut le changer :","pinned":false,"hidden":false,"mode":"md"},{"id":291,"value":"JavaScript","pinned":false,"hidden":false,"mode":"md"},{"id":294,"value":"```js\ndocument.querySelector(\"#monid\").textContent = \"coucou\"\n```","pinned":false,"hidden":false,"mode":"md"},{"id":296,"value":"### Les écouteurs","pinned":false,"hidden":false,"mode":"md"},{"id":361,"value":"Les « écouteurs » en JavaScript (event listeners) servent à réagir à des événements sur une page web : clic, clavier, souris, scroll, formulaire, etc.","pinned":false,"hidden":false,"mode":"md"},{"id":300,"value":"HTML","pinned":false,"hidden":false,"mode":"md"},{"id":298,"value":"```html\n\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":302,"value":"JavaScript","pinned":false,"hidden":false,"mode":"md"},{"id":304,"value":"```js\nfunction launchConfetti() {\n confetti({\n particleCount: 1000,\n spread: 500,\n origin: { y: 0.6 }\n });\n }\ndocument.querySelector(\"#confettiBtn\").addEventListener(\"click\", launchConfetti)\n```","pinned":false,"hidden":false,"mode":"md"},{"id":307,"value":"De cette façon, on peut créer des contenus interactifs","pinned":false,"hidden":false,"mode":"md"},{"id":311,"value":"HTML","pinned":false,"hidden":false,"mode":"md"},{"id":313,"value":"```html\n

Un cercle SVG réactif

\n\n

\n Position : \n \n 100\n

\n\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":317,"value":"JavaScript","pinned":false,"hidden":false,"mode":"md"},{"id":315,"value":"```js\nconst slider = document.querySelector(\"#position\");\nconst valeur = document.querySelector(\"#valeur\");\nconst cercle = document.querySelector(\"#monCercle\");\n\nslider.addEventListener(\"input\", function () {\n// Ici, nous avons choisi l'evenement input. Input e déclenche immédiatement à chaque modification de la valeur.\n// Contrairement à change qui se déclenche uniquement quand l'utilisateur a terminé de bouger le curseur (et relâche la souris)\n const pos = slider.value;\n cercle.setAttribute(\"cx\", pos);\n valeur.textContent = pos;\n});\n```","pinned":false,"hidden":false,"mode":"md"},{"id":363,"value":"# Un ecosystème complet","pinned":false,"hidden":false,"mode":"md"},{"id":367,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":168,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":215,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}