Ficha de revisão: Introduction au développement web avec HTML, CSS et JavaScript

📋 Plan du Cours

1. Fondamentaux du HTML : structure, éléments et attributs
2. Balises block et inline et leur impact sur le flux d’affichage
3. Principes de base du CSS : fichier, syntaxe, sélecteurs et modèle de boîte
4. Sélecteurs CSS avancés : identifiants, classes, attributs, enfants et pseudo-classes
5. Notion de DOM et organisation hiérarchique des éléments HTML
6. Techniques d’accès aux éléments DOM et manipulation des attributs et styles en JavaScript
7. Programmation événementielle en JavaScript : gestion des événements et différences avec la programmation séquentielle
8. Syntaxe JavaScript : variables, opérateurs, structures conditionnelles et boucles
9. Fonctions, chaînes de caractères et notation objet en JavaScript
10. Manipulation des tableaux et dictionnaires en JavaScript
11. Modification dynamique du contenu et du style des éléments HTML via JavaScript
12. Création, insertion et suppression d’éléments HTML avec JavaScript

📖 1. Fondamentaux du HTML : structure, éléments et attributs

🔑 Notions clés & Définitions

• Élément HTML : Une unité de contenu dans une page web, délimitée par une balise ouvrante et une balise fermante ou une balise auto-fermante, utilisée pour structurer le contenu.
• Standard HTML5 : Un ensemble de règles et de syntaxe à respecter pour garantir la compatibilité et la compréhension du contenu par les navigateurs et les robots.
• Rappel HTML : Un langage de balisage servant à structurer le contenu d'une page web et à le rendre compréhensible par les robots, sans gérer la mise en forme.

📝 Points essentiels

• Un élément HTML est une unité de contenu définie par une balise ouvrante et une balise fermante ou auto-fermante.
• Le standard HTML5 définit les règles et la syntaxe à respecter pour assurer la compatibilité et la compréhension par les navigateurs et robots.

💡 À retenir

Le HTML organise le contenu en éléments structurés avec des attributs, sans se préoccuper de la mise en forme.

📖 2. Balises block et inline et leur impact sur le flux d’affichage

🔑 Notions clés & Définitions

• Balises de type inline : Des éléments HTML qui provoquent un retour à la ligne avant et après leur contenu, affichant ce contenu en blocs distincts verticalement.

📝 Points essentiels

• Les balises de type block provoquent un retour à la ligne avant et après leur contenu.
• Les balises de type inline ne provoquent pas de retour à la ligne et s'affichent côte à côte horizontalement.
• Le flux normal d’affichage place les éléments block les uns sous les autres dans l'ordre du document.
• Le flux normal d’affichage place les éléments inline les uns à côté des autres de gauche à droite.

💡 À retenir

Le type de balise influence directement la disposition visuelle du contenu dans la page, avec les éléments block affichés en blocs verticaux et les éléments inline affichés en ligne horizontale.

📖 3. Principes de base du CSS : fichier, syntaxe, sélecteurs et modèle de boîte

🔑 Notions clés & Définitions

• Fichier CSS : Un fichier texte avec l'extension .css qui contient des règles CSS pour définir la mise en forme des éléments HTML.
• Règle CSS : Une structure composée d'un sélecteur et d'un bloc de déclarations, chaque déclaration associant une propriété à une valeur.
• Modèle de boite : Un concept décrivant la composition d'un élément HTML en quatre parties : contenu, padding, bordure et marge.
• Fichier HTML : Un document structurant une page web, dans lequel on peut intégrer ou lier des fichiers CSS pour appliquer des styles.

📝 Points essentiels

• Un fichier CSS est un fichier texte avec extension .css contenant des règles de style.
• Le modèle de boîte CSS décrit la composition d'un élément en contenu, padding, bordure et marge.

💡 À retenir

Un fichier CSS est un fichier texte avec extension .css contenant des règles de style.

📖 4. Sélecteurs CSS avancés : identifiants, classes, attributs, enfants et pseudo-classes

🔑 Notions clés & Définitions

• Attributs : Propriétés ajoutées aux éléments HTML qui définissent des caractéristiques ou des informations supplémentaires, comme id, class ou width.
• Sélecteur d’attribut : Un sélecteur CSS qui cible les éléments HTML possédant un attribut spécifique, par exemple [width] cible tous les éléments ayant un attribut width.
• Sélecteur d’enfant : Un sélecteur CSS qui cible uniquement les enfants directs d’un élément parent, exprimé par parent > enfant.
• Cible tous les premiers enfants : Les pseudo-classes comme :first-child ciblent tous les éléments qui sont premiers enfants de leur parent dans la descendance, pas seulement le premier enfant direct d’un élément spécifique.
• JavaScript 28 Pseudo classe : Les pseudo-classes CSS telles que :first-child, :last-child, :nth-child(n) et :hover permettent de cibler des éléments selon leur position ou état dans le DOM.

📝 Points essentiels

• Le sélecteur d’identifiant (#id) cible un seul élément avec un attribut id unique.
• Le sélecteur de classe (.classe) cible un ou plusieurs éléments partageant la même classe.
• Les pseudo-classes (:first-child, :last-child, :nth-child(n), :hover) ciblent des états ou positions spécifiques d’éléments dans le DOM.

💡 À retenir

Le sélecteur d’identifiant (#id) cible un seul élément avec un attribut id unique.

📖 5. Notion de DOM et organisation hiérarchique des éléments HTML

🔑 Notions clés & Définitions

• Améliorations : ● Améliorations : fonction, intégration du résultat dans la page et séparation complète HTML/JavaScript INFO401 - web - CM2 - CSS et JavaScript 45 Exemple 5 ● Améliorations : fonction, intégration du résultat dans la page et séparation complète HTML/JavaScript INFO401 - web - CM2 - CSS et JavaScript 46 Exemple 6 ● Attention aux conflits id="fact" et function fact ● Fichier .

📝 Points essentiels

• Le DOM représente la page web comme un arbre de nœuds, où chaque nœud est un objet avec propriétés et méthodes.
• Le DOM permet à CSS et JavaScript d’interagir dynamiquement avec la page web.

💡 À retenir

Visualiser la page web comme une structure arborescente permet de comprendre comment CSS et JavaScript interagissent avec les éléments.

📖 6. Techniques d’accès aux éléments DOM et manipulation des attributs et styles en JavaScript

🔑 Notions clés & Définitions

• Propriété innerHTML : Une propriété d’un élément DOM qui permet de lire ou modifier le contenu HTML interne de cet élément.
• Style d’un élément sont : Un objet associé à un élément DOM qui permet de lire ou modifier ses propriétés CSS en JavaScript, en utilisant une syntaxe camelCase sans tirets.

📝 Points essentiels

• L’objet style permet de lire ou modifier les styles CSS en JavaScript, avec une syntaxe camelCase.
• La méthode getAttribute() permet d’accéder à la valeur d’un attribut HTML d’un élément.

💡 À retenir

Savoir rechercher et modifier dynamiquement les éléments et leurs propriétés dans la page via JavaScript est essentiel pour la manipulation du DOM.

📖 7. Programmation événementielle en JavaScript : gestion des événements et différences avec la programmation séquentielle

🔑 Notions clés & Définitions

• Programmation événementielle : Une approche de programmation où le traitement est déclenché par des événements spécifiques, tels que des clics ou des chargements, et non par un déroulement linéaire du code.
• Programmation séquentielle : Une méthode d'exécution où les instructions sont traitées dans un ordre fixe et prévisible, sans interruption ou déclenchement par des événements.
• JavaScript INFO401 : Un langage de programmation principalement utilisé pour le développement web, permettant la manipulation dynamique des pages et la gestion d'événements.

📝 Points essentiels

• La programmation événementielle repose sur la détection et la gestion d’événements déclenchés par l’utilisateur ou le système.
• Les événements peuvent être des clics, appuis clavier, chargements, rotations, etc.
• La programmation séquentielle exécute les instructions dans un ordre fixe et prévisible.
• En JavaScript, les gestionnaires d’événements sont attachés aux éléments HTML et déclenchent des traitements à tout moment.
• L’ordre et la survenue des événements sont imprévisibles et peuvent être affectés par des événements parasites.

💡 À retenir

La programmation événementielle repose sur la détection et la gestion d’événements déclenchés par l’utilisateur ou le système.

📖 8. Syntaxe JavaScript : variables, opérateurs, structures conditionnelles et boucles

🔑 Notions clés & Définitions

• Variables : Éléments de stockage en JavaScript pouvant être déclarés avec var, let ou const, chaque mot-clé définissant une portée et une mutabilité spécifiques.
• Opérateurs : Symboles en JavaScript utilisés pour effectuer des comparaisons (==, !=, ===, !==) ou des opérations logiques (&&, ||, !) entre valeurs.
• Somme : Valeur obtenue en additionnant plusieurs nombres, souvent calculée en accumulant des valeurs dans une boucle.
• Test : Expression conditionnelle évaluée dans une structure if, else if ou else pour déterminer le chemin d'exécution du programme.
• J+1 fact : Expression utilisée dans une boucle while pour incrémenter un compteur j et calculer la factorielle en multipliant successivement les valeurs.

📝 Points essentiels

• Les variables peuvent être déclarées avec var, let ou const selon leur portée et mutabilité.
• Les opérateurs de comparaison incluent ==, !=, ===, !==, et les opérateurs logiques sont &&, ||, !.
• La boucle for permet d’itérer un nombre défini de fois avec un compteur.
• La boucle while répète un bloc tant qu’une condition est vraie.

💡 À retenir

Maîtriser la déclaration des variables, l'utilisation des opérateurs, les tests conditionnels et les boucles permet de contrôler efficacement le flux d'exécution en JavaScript.

📖 9. Fonctions, chaînes de caractères et notation objet en JavaScript

🔑 Notions clés & Définitions

• Jours : Tableau en JavaScript contenant une liste ordonnée des jours de la semaine, accessible par indice et manipulable via ses propriétés et méthodes.

📝 Points essentiels

• Les chaînes supportent des méthodes comme length, charAt(), substring().
• La notation objet permet d’accéder aux propriétés et méthodes via le point (ex: ch.length).

💡 À retenir

Comprendre comment structurer le code avec des fonctions et manipuler les chaînes et objets natifs.

📖 10. Manipulation des tableaux et dictionnaires en JavaScript

🔑 Notions clés & Définitions

📝 Points essentiels

• Les tableaux sont des collections ordonnées d’éléments accessibles par indice.
• Les tableaux peuvent être créés avec new Array() ou littéralement avec [] (format JSON).
• Les dictionnaires sont des objets associant des clés à des valeurs, similaires aux objets littéraux.
• Les tableaux et dictionnaires sont manipulables via des propriétés et méthodes spécifiques.
• Les tableaux sont copiés par référence, attention aux effets de modification.

💡 À retenir

La maîtrise des tableaux et dictionnaires en JavaScript est essentielle pour stocker et organiser efficacement l’information dans des structures de données fondamentales.

📖 11. Modification dynamique du contenu et du style des éléments HTML via JavaScript

🔑 Notions clés & Définitions

• String nomClasse) ● HTMLCollection : Type de paramètre utilisé pour identifier une collection d'éléments HTML partageant une classe spécifique.
• String selecteurCSS : Chaîne de caractères représentant un sélecteur CSS utilisé pour cibler des éléments dans le DOM.
• Traitement parfaitement : Traitement séquentiel, prédictible et sans traitement parasite, caractéristique de la programmation séquentielle.

📝 Points essentiels

• L’objet style permet de modifier directement les propriétés CSS d’un élément en JavaScript.
• La modification de className est recommandée pour séparer la logique JavaScript et le style CSS.

💡 À retenir

Savoir modifier en temps réel le contenu et l’apparence des éléments permet de créer une interface dynamique.

📖 12. Création, insertion et suppression d’éléments HTML avec JavaScript

🔑 Notions clés & Définitions

• Document.createElement() : Méthode de l’objet document qui crée un nouvel élément HTML du type spécifié en paramètre.
• HTMLElement enfant : Élément HTML qui peut être inséré dans le DOM en tant qu’enfant d’un autre élément via des méthodes comme appendChild ou insertBefore.
• Élément sont accessibles : Les propriétés de style d’un élément HTML sont accessibles via son objet style, permettant la lecture et l’écriture des styles CSS.

📝 Points essentiels

• La création d’un élément se fait avec document.createElement().
• INFO401 - web - CM2 - CSS et JavaScript 70 Modifier les éléments ● Une fois que nous avons l’élément qui nous intéresse, nous pouvons lui ajouter un évènement ou le manipuler INFO401 - web - CM2 - CSS et JavaScript 71 Modifier le contenu ● Propriété innerHTML en lecture et en écriture ● OuterHTML et innerText INFO401 - web - CM2 - CSS et JavaScript 72 Modifier le style ● Toutes les propriétés de style d’un élément sont accessibles via l’objet style (écriture) (attention pas de tiret : background-color → backgroundColor) ● className à privilégier (séparation js/css) INFO401 - web - CM2 - CSS et JavaScript 73 Créer de nouveaux éléments ● HTMLElement document.createElement(String typeElement) ● Créer des attributs String element.setAttribute(String nomAttribut, String valeur) ● parent.appendChild(HTMLElement enfant) ● parent.insertBefore(HTMLElement enfant, HTMLElement position) ● parent.removeChild(HTMLElement enfant) INFO401 - web - CM2 - CSS et JavaScript 74 Exemple 10

💡 À retenir

La manipulation dynamique de la structure du DOM s’effectue en créant des éléments avec document.createElement(), puis en les insérant ou supprimant via les méthodes appendChild, insertBefore et removeChild.

🧩 Compléments de couverture

1. Détail source à réviser : - web - CM2 - CSS et JavaScript 1 INFO401 Web et bases de données INFO401 - web - CM2 - CSS et JavaScript 2 Langage du web : CSS ● Fichier CSS ● Terminologie et syntaxe ● Sélecteurs ● Notion de DOM ● Modèle de boite INFO (Source: "- web - CM2 - CSS et JavaScript 1 INFO401 Web et bases de données INFO401 - web - CM2 - CSS et JavaScript 2 Langage du web : CSS ● Fichier CSS ● Terminologie et syntaxe ● Sélecteurs ● Notion de DOM ● Modèle de boite INFO401 - web - CM2 - CSS et JavaScript 3 Rappel HTML ● Langage de balisage ● Standard HTML5 ● Sert à structurer le contenu et à le")
2. Détail source à réviser : JavaScript 3 Rappel HTML ● Langage de balisage ● Standard HTML5 ● Sert à structurer le contenu et à le rendre compréhensible par les robots ● Ne sert pas à la mise en forme même s’il existe un rendu par défaut INFO401 - (Source: "JavaScript 3 Rappel HTML ● Langage de balisage ● Standard HTML5 ● Sert à structurer le contenu et à le rendre compréhensible par les robots ● Ne sert pas à la mise en forme même s’il existe un rendu par défaut INFO401 - web - CM2 - CSS et JavaScript 4 Rappel HTML <a href="adresse">texte affiché</a> élément HTML attribut INFO401 - web - CM2 - CSS et")
3. Détail source à réviser : - CSS et JavaScript 5 Rappel HTML <img src="chemin" alt="description"> élément HTML attributs INFO401 - web - CM2 - CSS et JavaScript 6 Rappel HTML <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> INFO401 - web (Source: "- CSS et JavaScript 5 Rappel HTML <img src="chemin" alt="description"> élément HTML attributs INFO401 - web - CM2 - CSS et JavaScript 6 Rappel HTML <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> INFO401 - web - CM2 - CSS et JavaScript 7 Block/inline ● Certaines balises provoquent un retour à la ligne avant et après → balises de type block")
4. Détail source à réviser : type block Exemples ? ● D’autres non → balises de type inline Exemples ? INFO401 - web - CM2 - CSS et JavaScript 8 Flux normal d’affichage ● Les contenus des balises de type block sont affichés les uns en dessous des aut (Source: "type block Exemples ? ● D’autres non → balises de type inline Exemples ? INFO401 - web - CM2 - CSS et JavaScript 8 Flux normal d’affichage ● Les contenus des balises de type block sont affichés les uns en dessous des autres (dans le même ordre que dans le fichier texte) ● Les contenus des balises de type inline sont affichés les uns à côté des autres de")
5. Détail source à réviser : des autres de gauche à droite INFO401 - web - CM2 - CSS et JavaScript 9 HTML et CSS ● HTML pour structurer le contenu ● CSS pour le mettre en forme INFO401 - web - CM2 - CSS et JavaScript 10 Exemples ● Jardin Zen CSS (20 (Source: "des autres de gauche à droite INFO401 - web - CM2 - CSS et JavaScript 9 HTML et CSS ● HTML pour structurer le contenu ● CSS pour le mettre en forme INFO401 - web - CM2 - CSS et JavaScript 10 Exemples ● Jardin Zen CSS (2005 !) http://www.csszengarden.com/ ● Tendances 2024 https://graphiste.com/blog/webdesign-tendance s-2021 INFO401 - web - CM2 - CSS et")
6. Détail source à réviser : - CSS et JavaScript 11 Fichier CSS ● CSS Cascading Style Sheets « feuille de style en cascade »… ● Fichier texte ● Extension .css ● A quoi ça ressemble ? INFO401 - web - CM2 - CSS et JavaScript 12 Terminologie ● Un fichi (Source: "- CSS et JavaScript 11 Fichier CSS ● CSS Cascading Style Sheets « feuille de style en cascade »… ● Fichier texte ● Extension .css ● A quoi ça ressemble ? INFO401 - web - CM2 - CSS et JavaScript 12 Terminologie ● Un fichier CSS contient des règles CSS ● Une règle CSS est constituée d’un sélecteur (par exemple une balise HTML) et d’un bloc de déclarations")
7. Détail source à réviser : de déclarations ● Une déclaration est constituée d’une propriété et d’une valeur INFO401 - web - CM2 - CSS et JavaScript 13 Syntaxe p { color: gray; text-align: justify; } sélecteur propriété valeur bloc de déclarations (Source: "de déclarations ● Une déclaration est constituée d’une propriété et d’une valeur INFO401 - web - CM2 - CSS et JavaScript 13 Syntaxe p { color: gray; text-align: justify; } sélecteur propriété valeur bloc de déclarations déclaration = propriété + valeur INFO401 - web - CM2 - CSS et JavaScript 14 Lien CSS et HTML ● Le lien entre contenu (fichier HTML) et")
8. Détail source à réviser : HTML) et mise en forme (fichier CSS) se fait grâce à la ligne de code <link rel="stylesheet" href="style.css"> ● Dans le « head » du fichier HTML INFO401 - web - CM2 - CSS et JavaScript 15 Propriétés ● Voir TD, TP… ● … e (Source: "HTML) et mise en forme (fichier CSS) se fait grâce à la ligne de code <link rel="stylesheet" href="style.css"> ● Dans le « head » du fichier HTML INFO401 - web - CM2 - CSS et JavaScript 15 Propriétés ● Voir TD, TP… ● … et surtout MDN ! démo INFO401 - web - CM2 - CSS et JavaScript 16 Valeurs unités ● px ● % (parent) ● em (parent), rem (html)")
9. Détail source à réviser : https://developer.mozilla.org/fr/docs/Web/CSS/fo nt-size ● Il y en a d’autres... INFO401 - web - CM2 - CSS et JavaScript 17 Les sélecteurs d’élément ● Que fait la règle suivante ? h1 { color: red; } INFO401 - web - CM2 - (Source: "https://developer.mozilla.org/fr/docs/Web/CSS/fo nt-size ● Il y en a d’autres... INFO401 - web - CM2 - CSS et JavaScript 17 Les sélecteurs d’élément ● Que fait la règle suivante ? h1 { color: red; } INFO401 - web - CM2 - CSS et JavaScript 18 Les sélecteurs d’élément ● Applique la couleur rouge à tous les éléments <h1> ● Très vite vous aurez besoin")
10. Détail source à réviser : aurez besoin d’appliquer des styles non pas à tous les éléments <h1> mais seulement à certains, voir à un seul ! INFO401 - web - CM2 - CSS et JavaScript 19 Les sélecteurs d’identifiant ● Dans le fichier HTML on ajoute l’ (Source: "aurez besoin d’appliquer des styles non pas à tous les éléments <h1> mais seulement à certains, voir à un seul ! INFO401 - web - CM2 - CSS et JavaScript 19 Les sélecteurs d’identifiant ● Dans le fichier HTML on ajoute l’attribut id="HTML5" ● Valeur « choisie » par vous ● Aucune conséquence visuelle ou sémantique ● Dans le fichier CSS on ajoute la règle")
11. Détail source à réviser : la règle #HTML5 {color: blue;} ● Style appliqué à un seul élément INFO401 - web - CM2 - CSS et JavaScript 20 Les sélecteurs de classe ● Dans le fichier HTML on ajoute l’attribut class="rouge" ● Valeur « choisie » par vou (Source: "la règle #HTML5 {color: blue;} ● Style appliqué à un seul élément INFO401 - web - CM2 - CSS et JavaScript 20 Les sélecteurs de classe ● Dans le fichier HTML on ajoute l’attribut class="rouge" ● Valeur « choisie » par vous ● Aucune conséquence visuelle ou sémantique ● Dans le fichier CSS on ajoute la règle .rouge {color: red;} ● Contrairement à")
12. Détail source à réviser : à l’attribut id, l’attribut classe peut être utilisé plusieurs fois INFO401 - web - CM2 - CSS et JavaScript 21 Élément HTML <span> ● <p class="rouge"> ● <strong class="rouge"> ● Comment faire pour mettre « API JavaScript (Source: "à l’attribut id, l’attribut classe peut être utilisé plusieurs fois INFO401 - web - CM2 - CSS et JavaScript 21 Élément HTML <span> ● <p class="rouge"> ● <strong class="rouge"> ● Comment faire pour mettre « API JavaScript » en rouge ? INFO401 - web - CM2 - CSS et JavaScript 22 Élément HTML <div> ● De la même manière <div> peut servir à grouper")
13. Détail source à réviser : grouper plusieurs balises pour appliquer un style au groupe ● Comment mettre un fond gris aux parties son et vidéo ? #sonEtVideo {background-color: gray;} INFO401 - web - CM2 - CSS et JavaScript 23 Généalogie, notion de (Source: "grouper plusieurs balises pour appliquer un style au groupe ● Comment mettre un fond gris aux parties son et vidéo ? #sonEtVideo {background-color: gray;} INFO401 - web - CM2 - CSS et JavaScript 23 Généalogie, notion de DOM ● Les différents éléments composant un fichier HTML s’organisent sous la forme d’un « arbre généalogique » appelé DOM pour Document")
14. Détail source à réviser : pour Document Object Model ● Au sein de cette arborescence on parlera de parents, d’enfants et de frères (de sœurs!) INFO401 - web - CM2 - CSS et JavaScript 24 Généalogie, notion de DOM ● Grâce aux balises HTML, le navig (Source: "pour Document Object Model ● Au sein de cette arborescence on parlera de parents, d’enfants et de frères (de sœurs!) INFO401 - web - CM2 - CSS et JavaScript 24 Généalogie, notion de DOM ● Grâce aux balises HTML, le navigateur représente la page web comme un arbre de nœuds, d’objets ayant des propriétés et des méthodes ● C’est grâce au DOM que CSS et")
15. Détail source à réviser : que CSS et Javascript peuvent interagir avec la page web INFO401 - web - CM2 - CSS et JavaScript 25 <div> <span>un span enfant de div</span><br> <span>un autre span enfant de div</span> <p> <span>un span enfant de p lui (Source: "que CSS et Javascript peuvent interagir avec la page web INFO401 - web - CM2 - CSS et JavaScript 25 <div> <span>un span enfant de div</span><br> <span>un autre span enfant de div</span> <p> <span>un span enfant de p lui même enfant de div</span><br> <span>un autre span enfant de p lui même enfant de div</span> </p> <span>encore un span enfant de")
16. Détail source à réviser : de div</span><br> <span>un dernier span enfant de div</span> </div> INFO401 - web - CM2 - CSS et JavaScript 26 div span span p span br span span br span spanbr INFO401 - web - CM2 - CSS et JavaScript 27 Autres sélecteurs (Source: "de div</span><br> <span>un dernier span enfant de div</span> </div> INFO401 - web - CM2 - CSS et JavaScript 26 div span span p span br span span br span spanbr INFO401 - web - CM2 - CSS et JavaScript 27 Autres sélecteurs ● Sélecteur d’attribut [width] {display: none;} ● Sélecteur d’enfant div span {color: green;} ● Sélecteur d’enfant direct div>span")
17. Détail source à réviser : div>span {color: green;} ● Sélecteur d’élément adjacent br+span {color: green;} ● Sélecteur d’élément frères pspan {color: green;} INFO401 - web - CM2 - CSS et JavaScript 28 Pseudo classe ● div :first-child {color: gree _(Source: "div>span {color: green;} ● Sélecteur d’élément adjacent br+span {color: green;} ● Sélecteur d’élément frères pspan {color: green;} INFO401 - web - CM2 - CSS et JavaScript 28 Pseudo classe ● div :first-child {color: green;} ● Attention l’espace devant : est important ; cible tous les premiers enfants de la descendance de div (pas seulement le premier")_
18. Détail source à réviser : le premier enfant direct) ! ● div :last-child {color: green;} ● div :nth-child(2) {color: green;} ● Attention le <br> compte comme un enfant ! ● div:hover {color: green;} ● Attention là il ne faut pas d’espace ! Ouvre la (Source: "le premier enfant direct) ! ● div :last-child {color: green;} ● div :nth-child(2) {color: green;} ● Attention le <br> compte comme un enfant ! ● div:hover {color: green;} ● Attention là il ne faut pas d’espace ! Ouvre la voie au dynamisme voir JavaScript... INFO401 - web - CM2 - CSS et JavaScript 29 Pseudo élément ● div::before {content :")
19. Détail source à réviser : : url(triangle.png);} ● (le : marche pour rétrocompatibilité) Création de contenu ! et possibilité de combiner ● div :nth-child(5):hover::before {content : url(triangle.png);} ● De la même manière ::after INFO401 - web - (Source: ": url(triangle.png);} ● (le : marche pour rétrocompatibilité) Création de contenu ! et possibilité de combiner ● div :nth-child(5):hover::before {content : url(triangle.png);} ● De la même manière ::after INFO401 - web - CM2 - CSS et JavaScript 30 Modèle de boite INFO401 - web - CM2 - CSS et JavaScript 31 Modèle de boite ● Concerne tous les éléments HTML ●")
20. Détail source à réviser : éléments HTML ● Propriété padding ● Propriété border ● Propriété margin ● Démo INFO401 - web - CM2 - CSS et JavaScript 32 @media queries et responsive design @media (max-width: 800px){ règles CSS } Démo INFO401 - web - C (Source: "éléments HTML ● Propriété padding ● Propriété border ● Propriété margin ● Démo INFO401 - web - CM2 - CSS et JavaScript 32 @media queries et responsive design @media (max-width: 800px){ règles CSS } Démo INFO401 - web - CM2 - CSS et JavaScript 33 Positionnement ● « Normal », élément de type block, élément de type inline ● Relatif, absolu, fixe, flottant ●")
21. Détail source à réviser : fixe, flottant ● Flex, Grid Layout INFO401 - web - CM2 - CSS et JavaScript 34 INFO401 - web - CM2 - CSS et JavaScript 35 Langage du web : JavaScript ● Bref historique ● Exemples ● Comparatif Python/JavaScript ● Programma (Source: "fixe, flottant ● Flex, Grid Layout INFO401 - web - CM2 - CSS et JavaScript 34 INFO401 - web - CM2 - CSS et JavaScript 35 Langage du web : JavaScript ● Bref historique ● Exemples ● Comparatif Python/JavaScript ● Programmation événementielle ● Rechercher, modifier et créer des éléments INFO401 - web - CM2 - CSS et JavaScript 36 Bref historique ● Inventé en")
22. Détail source à réviser : ● Inventé en 1995 par Brendan Eich informaticien chez Netscape. Brendan Eich participera aussi à la fondation Mozilla. ● A l’origine baptisé LiveScript, Netscape profite de la notoriété grandissante de Java pour le renom (Source: "● Inventé en 1995 par Brendan Eich informaticien chez Netscape. Brendan Eich participera aussi à la fondation Mozilla. ● A l’origine baptisé LiveScript, Netscape profite de la notoriété grandissante de Java pour le renommer JavaScript, artifice marketing qui 25 ans après porte encore préjudice au JavaScript... INFO401 - web - CM2 - CSS et JavaScript 37")
23. Détail source à réviser : JavaScript 37 Bref historique ● Standardisé en 1997 par l’organisation ECMAScript sous le numéro ECMA-262 ● JavaScript, JS, ECMAScript ou ES désignent le même langage INFO401 - web - CM2 - CSS et JavaScript 38 Bref histo (Source: "JavaScript 37 Bref historique ● Standardisé en 1997 par l’organisation ECMAScript sous le numéro ECMA-262 ● JavaScript, JS, ECMAScript ou ES désignent le même langage INFO401 - web - CM2 - CSS et JavaScript 38 Bref historique Olivier Hondermarck TOUT JavaScript DUNOD 2020 INFO401 - web - CM2 - CSS et JavaScript 39 Bref historique ● 10 ans entre ES3 et ES5,")
24. Détail source à réviser : entre ES3 et ES5, une éternité dans l’histoire du web ● Aujourd’hui une nouvelle version tous les ans ● Probablement un des langages les plus importants et les plus prometteurs du moment INFO401 - web - CM2 - CSS et Java (Source: "entre ES3 et ES5, une éternité dans l’histoire du web ● Aujourd’hui une nouvelle version tous les ans ● Probablement un des langages les plus importants et les plus prometteurs du moment INFO401 - web - CM2 - CSS et JavaScript 40 Sites de référence ● Mozilla ! ● ToutJavaScript INFO401 - web - CM2 - CSS et JavaScript 41 Exemple 1 ● Dans cet exemple, le code")
25. Détail source à réviser : le code est intégré dans le fichier HTML grâce à la balise <script> ● Code interprété par le navigateur (client) ● Output (sortie) = page web affichée ● Notation objet . ● Le ; à la fin de chaque instruction INFO401 - we (Source: "le code est intégré dans le fichier HTML grâce à la balise <script> ● Code interprété par le navigateur (client) ● Output (sortie) = page web affichée ● Notation objet . ● Le ; à la fin de chaque instruction INFO401 - web - CM2 - CSS et JavaScript 42 Exemple 2 ● Variable et affectation ● Éviter les popup… ● La console pour tester ● Les commentaires")
26. Détail source à réviser : Les commentaires INFO401 - web - CM2 - CSS et JavaScript 43 Exemple 3 ● Du code js peut être intégré dans la valeur de l’attribut onclick ● Programmation évènementielle ● Améliorations : fonction, intégration du résultat (Source: "Les commentaires INFO401 - web - CM2 - CSS et JavaScript 43 Exemple 3 ● Du code js peut être intégré dans la valeur de l’attribut onclick ● Programmation évènementielle ● Améliorations : fonction, intégration du résultat dans la page et séparation complète HTML/JavaScript INFO401 - web - CM2 - CSS et JavaScript 44 Exemple 4 ● Des fonctions comme en python ●")
27. Détail source à réviser : comme en python ● La balise <script> peut être placée n’importe où mais attention... ● Améliorations : fonction, intégration du résultat dans la page et séparation complète HTML/JavaScript INFO401 - web - CM2 - CSS et Ja (Source: "comme en python ● La balise <script> peut être placée n’importe où mais attention... ● Améliorations : fonction, intégration du résultat dans la page et séparation complète HTML/JavaScript INFO401 - web - CM2 - CSS et JavaScript 45 Exemple 5 ● Améliorations : fonction, intégration du résultat dans la page et séparation complète HTML/JavaScript INFO401 - web")
28. Détail source à réviser : INFO401 - web - CM2 - CSS et JavaScript 46 Exemple 6 ● Attention aux conflits id="fact" et function fact ● Fichier .js (fichier texte) avec le code sans la balise <script> ● Lien entre le fichier HTML et le fichier JS <s (Source: "INFO401 - web - CM2 - CSS et JavaScript 46 Exemple 6 ● Attention aux conflits id="fact" et function fact ● Fichier .js (fichier texte) avec le code sans la balise <script> ● Lien entre le fichier HTML et le fichier JS <script src="cours3-6.js"></script> ● Voir ce qui se passe lorsque je déplace la balise <script> dans le head... INFO401 - web - CM2 -")
29. Détail source à réviser : - web - CM2 - CSS et JavaScript 47 Hello World Python print("Hello World") Écrit avec IDLE Interprété par IDLE Et affiché sur IDLE Javascript document.write("Hello World"); Écrit avec un éditeur de texte Interprété par n (Source: "- web - CM2 - CSS et JavaScript 47 Hello World Python print("Hello World") Écrit avec IDLE Interprété par IDLE Et affiché sur IDLE Javascript document.write("Hello World"); Écrit avec un éditeur de texte Interprété par navigateur Et affiché sur la page web INFO401 - web - CM2 - CSS et JavaScript 48 Commentaires Python """ commentaires sur plusieurs lignes")
30. Détail source à réviser : plusieurs lignes """ # sur une ligne JavaScript /* commentaires sur plusieurs lignes / // sur une ligne INFO401 - web - CM2 - CSS et JavaScript 49 Variables et affectation Python a = 3 x = 2.1 ch = "python" test = False _(Source: "plusieurs lignes """ # sur une ligne JavaScript / commentaires sur plusieurs lignes */ // sur une ligne INFO401 - web - CM2 - CSS et JavaScript 49 Variables et affectation Python a = 3 x = 2.1 ch = "python" test = False JavaScript var a = 3; var x = 2.1; var ch = "JavaScript"; var test = false; const a = 3; let a= 3; INFO401 - web - CM2 - CSS et JavaScript")_
31. Détail source à réviser : CSS et JavaScript 50 Tests conditionnels Python note = 8 if note>10 : res = "admis" elif note>=8 res = "rattrapage" else res = "non admis" JavaScript var note = 8; var res; if (note>10) { res = "admis"; } else if (note>= (Source: "CSS et JavaScript 50 Tests conditionnels Python note = 8 if note>10 : res = "admis" elif note>=8 res = "rattrapage" else res = "non admis" JavaScript var note = 8; var res; if (note>10) { res = "admis"; } else if (note>=8) { res = "rattrapage"; } else { res = "non admis"; } INFO401 - web - CM2 - CSS et JavaScript 51 Opérateurs de comparaison et opérateurs")
32. Détail source à réviser : et opérateurs logique == != not and or == != ! && || INFO401 - web - CM2 - CSS et JavaScript 52 Boucle for Python Somme = 0 for i in range(1,10) : somme = somme + i JavaScript var somme = 0; for (var i=1; i<=10; i=i+1){ (Source: "et opérateurs logique == != not and or == != ! && || INFO401 - web - CM2 - CSS et JavaScript 52 Boucle for Python Somme = 0 for i in range(1,10) : somme = somme + i JavaScript var somme = 0; for (var i=1; i<=10; i=i+1){ somme = somme + i; } INFO401 - web - CM2 - CSS et JavaScript 53 Boucle while Python j = 1 n =10 fact = 1 While j<=n : j = j+1 fact =")
33. Détail source à réviser : = j+1 fact = factj JavaScript var j=1; var n=10; var fact = 1; while (j<=n) { j = j+1; fact = fact * j; } INFO401 - web - CM2 - CSS et JavaScript 54 Fonction Python def fact(n) : res=1 for i in range(2,n) : res = resi (Source: "= j+1 fact = factj JavaScript var j=1; var n=10; var fact = 1; while (j<=n) { j = j+1; fact = fact * j; } INFO401 - web - CM2 - CSS et JavaScript 54 Fonction Python def fact(n) : res=1 for i in range(2,n) : res = resi return res JavaScript function fact(n){ var res=1; for (var i=2; i<=n; i++){ res = res*i; } return res; } INFO401 - web - CM2 - CSS et")
34. Détail source à réviser : CM2 - CSS et JavaScript 55 Chaînes Python ch = "Hello World" ou 'Hello World' caractère d'échappement \ chaîne sur plusieurs lignes Concaténation + len(ch) ch[0] ch[6:11] JavaScript var ch = "Hello World"; ou 'Hello W _(Source: "CM2 - CSS et JavaScript 55 Chaînes Python ch = "Hello World" ou 'Hello World' caractère d'échappement \ chaîne sur plusieurs lignes Concaténation + len(ch) ch[0] ch[6:11] JavaScript var ch = "Hello World"; ou 'Hello World' caractère d'échappement \ chaîne sur plusieurs lignes `` Concaténation + ch.length; ch.charAt(0); ch.substring(6,10); INFO401 - web -")_
35. Détail source à réviser : INFO401 - web - CM2 - CSS et JavaScript 56 Notation objet propriété méthode ch.length; ch.substring(6,10); objet INFO401 - web - CM2 - CSS et JavaScript 57 Les mathématiques Python a = int('10') 1.25e2 + - * / // % 10//3 (Source: "INFO401 - web - CM2 - CSS et JavaScript 56 Notation objet propriété méthode ch.length; ch.substring(6,10); objet INFO401 - web - CM2 - CSS et JavaScript 57 Les mathématiques Python a = int('10') 1.25e2 + - * / // % 10//3 import math as math math.cos(math.pi) JavaScript var a = parseInt('10'); 1.25e2 + - * / % Math.floor(10/3); Math.cos(Math.PI); INFO401 -")
36. Détail source à réviser : INFO401 - web - CM2 - CSS et JavaScript 58 Les tableaux Python vide = [] jours = ["lun","mar","mer","jeu","ven","sam"," dim"] len(jours) jours[1] Copie par référence JavaScript var vide = new Array(); var vide = []; //fo (Source: "INFO401 - web - CM2 - CSS et JavaScript 58 Les tableaux Python vide = [] jours = ["lun","mar","mer","jeu","ven","sam"," dim"] len(jours) jours[1] Copie par référence JavaScript var vide = new Array(); var vide = []; //format JSON var jours = new Array("lun","mar","mer","jeu","ven","sam","dim"); var jours =")
37. Détail source à réviser : //format JSON jours.length Jours[1] Copie par référence INFO401 - web - CM2 - CSS et JavaScript 59 Les dictionnaires Python JavaScript INFO401 - web - CM2 - CSS et JavaScript 60 Programmation évènementielle Le JavaScript (Source: "//format JSON jours.length Jours[1] Copie par référence INFO401 - web - CM2 - CSS et JavaScript 59 Les dictionnaires Python JavaScript INFO401 - web - CM2 - CSS et JavaScript 60 Programmation évènementielle Le JavaScript est un langage évènementiel (exemple 3) : Détection des évènements Exemple 3 : clic sur le bouton Déclenchement de")
38. Détail source à réviser : de nouveaux traitements Exemple 3 : récupération prénom + affichage INFO401 - web - CM2 - CSS et JavaScript 61 Évènements ● Clic sur un élément ● Appui d’une touche du clavier ● Chargement d’un élément ● Rotation du smar (Source: "de nouveaux traitements Exemple 3 : récupération prénom + affichage INFO401 - web - CM2 - CSS et JavaScript 61 Évènements ● Clic sur un élément ● Appui d’une touche du clavier ● Chargement d’un élément ● Rotation du smartphone en mode paysage ● Etc. INFO401 - web - CM2 - CSS et JavaScript 62 Programmation événementielle ● En python, les")
39. Détail source à réviser : les instructions sont interprétées les unes après les autres, on parle de programmation séquentielle ● En JavaScript, lorsqu’on introduit un « onclick » dans le code, l’« écoute » ne se fait pas qu’au moment où la ligne (Source: "les instructions sont interprétées les unes après les autres, on parle de programmation séquentielle ● En JavaScript, lorsqu’on introduit un « onclick » dans le code, l’« écoute » ne se fait pas qu’au moment où la ligne est interprétée et le déclenchement des instructions liées à l’évènement peut se faire à n’importe quel moment, on parle de programmation")
40. Détail source à réviser : de programmation évènementielle INFO401 - web - CM2 - CSS et JavaScript 63 Programmation événementielle Programmation évènementielle ● Ordre des événements inconnu ● Survenue d’un évènement non garantie ● Évènements para (Source: "de programmation évènementielle INFO401 - web - CM2 - CSS et JavaScript 63 Programmation événementielle Programmation évènementielle ● Ordre des événements inconnu ● Survenue d’un évènement non garantie ● Évènements parasites possibles (exemples chargement d’élément critique ralenti, coupure de connexion...) Programmation séquentielle ● Traitement")
41. Détail source à réviser : parfaitement séquencés ● Traitement parfaitement prédictibles ● Traitements parasites impossibles INFO401 - web - CM2 - CSS et JavaScript 64 ● Comme nous l’avons vu dans les exemples, les évènements sont ajoutés à des él (Source: "parfaitement séquencés ● Traitement parfaitement prédictibles ● Traitements parasites impossibles INFO401 - web - CM2 - CSS et JavaScript 64 ● Comme nous l’avons vu dans les exemples, les évènements sont ajoutés à des éléments HTML et les traitements déclenchés modifient ou créent des éléments dans la page ● Il faut donc être capable d’accéder à")
42. Détail source à réviser : d’accéder à l’élément qui nous intéresse… INFO401 - web - CM2 - CSS et JavaScript 65 Rechercher des éléments ● HTMLElement document.getElementById(String identifiant) ● HTMLCollection document.getElementsByClassName(Stri (Source: "d’accéder à l’élément qui nous intéresse… INFO401 - web - CM2 - CSS et JavaScript 65 Rechercher des éléments ● HTMLElement document.getElementById(String identifiant) ● HTMLCollection document.getElementsByClassName(String nomClasse) ● HTMLCollection document.getElementsByTagName(String balise) ● HTMLCollection document.getElementsByName(String nom) ●")
43. Détail source à réviser : nom) ● HTMLElement document.querySelector(String selecteurCSS) ● NodeList document.querySelectorAll(String selecteurCSS) ● Accès direct ex. document.forms INFO401 - web - CM2 - CSS et JavaScript 66 ...accéder à leurs att (Source: "nom) ● HTMLElement document.querySelector(String selecteurCSS) ● NodeList document.querySelectorAll(String selecteurCSS) ● Accès direct ex. document.forms INFO401 - web - CM2 - CSS et JavaScript 66 ...accéder à leurs attributs et styles ● Accéder aux attributs : String element.getAttribute(String nomAttribut) ● Accéder aux styles :")
44. Détail source à réviser : getComputedStyle() méthode de window qui retourne le style de l’élément passé en paramètre… ● Accéder à une propriété : Toutes les propriétés de style d’un élément sont accessibles via l’objet style (lecture) (attention (Source: "getComputedStyle() méthode de window qui retourne le style de l’élément passé en paramètre… ● Accéder à une propriété : Toutes les propriétés de style d’un élément sont accessibles via l’objet style (lecture) (attention pas de tiret : background-color → backgroundColor) INFO401 - web - CM2 - CSS et JavaScript 67 Enfants, frères et parents ● childNodes ●")
45. Détail source à réviser : childNodes ● firstElementChild et lastElementChild ● nextElementSibling et previousElementSibling ● parentElement INFO401 - web - CM2 - CSS et JavaScript 68 Exemple 7 h2 section p p div span INFO401 - web - CM2 - CSS et (Source: "childNodes ● firstElementChild et lastElementChild ● nextElementSibling et previousElementSibling ● parentElement INFO401 - web - CM2 - CSS et JavaScript 68 Exemple 7 h2 section p p div span INFO401 - web - CM2 - CSS et JavaScript 69 Le bon moment pour l’accès aux éléments ● Le JavaScript étant un langage évènementiel, l’état du document n’est pas connu à")
46. Détail source à réviser : pas connu à l’avance. ● Il faut donc s’assurer que le document est complètement construit pour chercher à accéder aux éléments. INFO401 - web - CM2 - CSS et JavaScript 70 Modifier les éléments ● Une fois que nous avons l (Source: "pas connu à l’avance. ● Il faut donc s’assurer que le document est complètement construit pour chercher à accéder aux éléments. INFO401 - web - CM2 - CSS et JavaScript 70 Modifier les éléments ● Une fois que nous avons l’élément qui nous intéresse, nous pouvons lui ajouter un évènement ou le manipuler INFO401 - web - CM2 - CSS et JavaScript 71 Modifier")
47. Détail source à réviser : un rendu par défaut INFO401 - web - CM2 - CSS et JavaScript 4 Rappel HTML <a href="adresse">texte affiché</a> élément HTML attribut INFO401 - web - CM2 - CSS et JavaScript 5 Rappel HTML <img src="chemin" alt="description (Source: "un rendu par défaut INFO401 - web - CM2 - CSS et JavaScript 4 Rappel HTML <a href="adresse">texte affiché</a> élément HTML attribut INFO401 - web - CM2 - CSS et JavaScript 5 Rappel HTML <img src="chemin" alt="description"> élément HTML attributs INFO401 - web - CM2 - CSS et JavaScript 6 Rappel HTML <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </u")
48. Détail source à réviser : HTML <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> INFO401 - web - CM2 - CSS et JavaScript 7 Block/inline ● Certaines balises provoquent un retour à la ligne avant et après → balises de type block Exemples ? (Source: "HTML <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> INFO401 - web - CM2 - CSS et JavaScript 7 Block/inline ● Certaines balises provoquent un retour à la ligne avant et après → balises de type block Exemples ? ● D’autres non → balises de type inline Exemples ? INFO401")
49. Détail source à réviser : 2024 https://graphiste (Source: "2024 https://graphiste")
50. Détail source à réviser : démo INFO401 - web - CM2 - CSS et JavaScript 16 Valeurs unités ● px ● % (parent) ● em (parent), rem (html) https://developer (Source: "démo INFO401 - web - CM2 - CSS et JavaScript 16 Valeurs unités ● px ● % (parent) ● em (parent), rem (html) https://developer")
51. Détail source à réviser : ript 19 Les sélecteurs d’identifiant ● Dans le fichier HTML on ajoute l’attribut id="HTML5" ● Valeur « choisie » par vous ● Aucune conséquence visuelle ou sémantique ● Dans le fichier CSS on ajoute la règle #HTML5 {color (Source: "ript 19 Les sélecteurs d’identifiant ● Dans le fichier HTML on ajoute l’attribut id="HTML5" ● Valeur « choisie » par vous ● Aucune conséquence visuelle ou sémantique ● Dans le fichier CSS on ajoute la règle #HTML5 {color: blue;} ● Style appliqué à un seul élément INFO401")
52. Détail source à réviser : eurs fois INFO401 - web - CM2 - CSS et JavaScript 21 Élément HTML <span> ● <p class="rouge"> ● <strong class="rouge"> ● Comment faire pour mettre « API JavaScript » en rouge ? INFO401 - web - CM2 - CSS et JavaScript 22 É (Source: "eurs fois INFO401 - web - CM2 - CSS et JavaScript 21 Élément HTML <span> ● <p class="rouge"> ● <strong class="rouge"> ● Comment faire pour mettre « API JavaScript » en rouge ? INFO401 - web - CM2 - CSS et JavaScript 22 Élément HTML <div> ● De la même manière <div> peut")
53. Détail source à réviser : e DOM ● Les différents éléments composant un fichier HTML s’organisent sous la forme d’un « arbre généalogique » appelé DOM pour Document Object Model ● Au sein de cette arborescence on parlera de parents, d’enfants et d (Source: "e DOM ● Les différents éléments composant un fichier HTML s’organisent sous la forme d’un « arbre généalogique » appelé DOM pour Document Object Model ● Au sein de cette arborescence on parlera de parents, d’enfants et de frères (de sœurs!) INFO401 - web - CM2 - CSS et Ja")
54. Détail source à réviser : 2 - CSS et JavaScript 26 div span span p span br span span br span spanbr INFO401 - web - CM2 - CSS et JavaScript 27 Autres sélecteurs ● Sélecteur d’attribut [width] {display: none; (Source: "2 - CSS et JavaScript 26 div span span p span br span span br span spanbr INFO401 - web - CM2 - CSS et JavaScript 27 Autres sélecteurs ● Sélecteur d’attribut [width] {display: none;")
55. Détail source à réviser : INFO401 - web - CM2 - CSS et JavaScript 29 Pseudo élément ● div::before {content : url(triangle (Source: "INFO401 - web - CM2 - CSS et JavaScript 29 Pseudo élément ● div::before {content : url(triangle")
56. Détail source à réviser : th: 800px){ règles CSS } Démo INFO401 - web - CM2 - CSS et JavaScript 33 Positionnement ● « Normal », élément de type block, élément de type inline ● Relatif, absolu, fixe, flottant ● Flex, Grid Layout INFO401 - web - CM (Source: "th: 800px){ règles CSS } Démo INFO401 - web - CM2 - CSS et JavaScript 33 Positionnement ● « Normal », élément de type block, élément de type inline ● Relatif, absolu, fixe, flottant ● Flex, Grid Layout INFO401 - web - CM2 - CSS et JavaScript 34 INFO401 - web -")
57. Détail source à réviser : 1997 par l’organisation ECMAScript sous le numéro ECMA-262 ● JavaScript, JS, ECMAScript ou ES désignent le même langage INFO401 - web - CM2 - CSS et JavaScript 38 Bref historique Olivier Hondermarck TOUT JavaScript DUNOD (Source: "1997 par l’organisation ECMAScript sous le numéro ECMA-262 ● JavaScript, JS, ECMAScript ou ES désignent le même langage INFO401 - web - CM2 - CSS et JavaScript 38 Bref historique Olivier Hondermarck TOUT JavaScript DUNOD 2020 INFO401 - web - CM2 - CSS et JavaScript 39 Bref historique ● 10 ans entre ES3")
58. Détail source à réviser : ● ToutJavaScript INFO401 - web - CM2 - CSS et JavaScript 41 Exemple 1 ● Dans cet exemple, le code est intégré dans le fichier HTML grâce à la balise <script> ● Code interprété par le navigateur (client) ● Output (sortie) (Source: "● ToutJavaScript INFO401 - web - CM2 - CSS et JavaScript 41 Exemple 1 ● Dans cet exemple, le code est intégré dans le fichier HTML grâce à la balise <script> ● Code interprété par le navigateur (client) ● Output (sortie) = page web affichée ● Notation objet")
59. Détail source à réviser : ● Le ; à la fin de chaque instruction INFO401 - web - CM2 - CSS et JavaScript 42 Exemple 2 ● Variable et affectation ● Éviter les popup… ● La console pour tester ● Les commentaires INFO401 - web - CM2 - CSS et JavaScript (Source: "● Le ; à la fin de chaque instruction INFO401 - web - CM2 - CSS et JavaScript 42 Exemple 2 ● Variable et affectation ● Éviter les popup… ● La console pour tester ● Les commentaires INFO401 - web - CM2 - CSS et JavaScript 43 Exemple 3 ● Du code js peut être intégré dans la valeur de l’attribut onclick ● Programmation évènementielle ● Améliorations")
60. Détail source à réviser : ipt INFO401 - web - CM2 - CSS et JavaScript 46 Exemple 6 ● Attention aux conflits id="fact" et function fact ● Fichier .js (fichier texte) avec le code sans la balise <script> ● Lien entre le fichier HTML et le fichier J (Source: "ipt INFO401 - web - CM2 - CSS et JavaScript 46 Exemple 6 ● Attention aux conflits id="fact" et function fact ● Fichier .js (fichier texte) avec le code sans la balise <script> ● Lien entre le fichier HTML et le fichier JS <script src="cours3-6.js"></script> ● Voir ce qui se passe lorsque je déplace la balise <script> dans le head... INFO401 - web - CM2 -...")
61. Détail source à réviser : t avec IDLE Interprété par IDLE Et affiché sur IDLE Javascript document.write("Hello World"); Écrit avec un éditeur de texte Interprété par navigateur Et affiché sur la page web INFO401 - web - CM2 - CSS et JavaScript 48 (Source: "t avec IDLE Interprété par IDLE Et affiché sur IDLE Javascript document.write("Hello World"); Écrit avec un éditeur de texte Interprété par navigateur Et affiché sur la page web INFO401 - web - CM2 - CSS et JavaScript 48 Commentaires Python """ commentaires sur plusieurs lignes """ # sur une ligne JavaScript /* commentaires sur plusieurs lignes */ // sur...")
62. Détail source à réviser : ts conditionnels Python note = 8 if note>10 : res = "admis" elif note>=8 res = "rattrapage" else res = "non admis" JavaScript var note = 8; var res; if (note>10) { res = "admis"; } else if (note>=8) { res = "rattrapage"; (Source: "ts conditionnels Python note = 8 if note>10 : res = "admis" elif note>=8 res = "rattrapage" else res = "non admis" JavaScript var note = 8; var res; if (note>10) { res = "admis"; } else if (note>=8) { res = "rattrapage"; } else { res = "non admis"; } INFO401 - web")
63. Détail source à réviser : s = res*i; } return res; } INFO401 - web - CM2 - CSS et JavaScript 55 Chaînes Python ch = "Hello World" ou 'Hello World' caractère d'échappement \ chaîne sur plusieurs lignes Concaténation + len(ch) ch[0] ch[6:11] Jav _(Source: "s = res*i; } return res; } INFO401 - web - CM2 - CSS et JavaScript 55 Chaînes Python ch = "Hello World" ou 'Hello World' caractère d'échappement \ chaîne sur plusieurs lignes Concaténation + len(ch) ch[0] ch[6:11] JavaScript var ch = "Hello World"; ou 'Hello W")_
64. Détail source à réviser : Script 58 Les tableaux Python vide = [] jours = ["lun","mar","mer","jeu","ven","sam"," dim"] len(jours) jours[1] Copie par référence JavaScript var vide = new Array(); var vide = []; //format JSON var jours = new Array(" (Source: "Script 58 Les tableaux Python vide = [] jours = ["lun","mar","mer","jeu","ven","sam"," dim"] len(jours) jours[1] Copie par référence JavaScript var vide = new Array(); var vide = []; //format JSON var jours = new Array("lun","mar","mer","jeu","ven","sam","dim"); var jours = ["lun","mar","mer","jeu","ven","sam","dim"]; //format JSON jours.length Jours[1] C...")
65. Détail source à réviser : 3) : Détection des évènements Exemple 3 : clic sur le bouton Déclenchement de nouveaux traitements Exemple 3 : récupération prénom + affichage INFO401 - web - CM2 - CSS et JavaScript 61 Évènements ● Clic sur un élément ● (Source: "3) : Détection des évènements Exemple 3 : clic sur le bouton Déclenchement de nouveaux traitements Exemple 3 : récupération prénom + affichage INFO401 - web - CM2 - CSS et JavaScript 61 Évènements ● Clic sur un élément ● Appui d’une touche du clavier ● Chargement d’un élément ● Rotation du smartphone en mode paysage ● Etc")
66. Détail source à réviser : es autres, on parle de programmation séquentielle ● En JavaScript, lorsqu’on introduit un « onclick » dans le code, l’« écoute » ne se fait pas qu’au moment où la ligne est interprétée et le déclenchement des instruction (Source: "es autres, on parle de programmation séquentielle ● En JavaScript, lorsqu’on introduit un « onclick » dans le code, l’« écoute » ne se fait pas qu’au moment où la ligne est interprétée et le déclenchement des instructions liées à l’évènement peut se faire à n’i")
67. Détail source à réviser : déclenchés modifient ou créent des éléments dans la page ● Il faut donc être capable d’accéder à l’élément qui nous intéresse… INFO401 - web - CM2 - CSS et JavaScript 65 Rechercher des éléments ● HTMLElement document. (Source: "déclenchés modifient ou créent des éléments dans la page ● Il faut donc être capable d’accéder à l’élément qui nous intéresse… INFO401 - web - CM2 - CSS et JavaScript 65 Rechercher des éléments ● HTMLElement document.")
68. Détail source à réviser : t.querySelectorAll(String selecteurCSS) ● Accès direct ex. document.forms INFO401 - web - CM2 - CSS et JavaScript 66 ...accéder à leurs attributs et styles ● Accéder aux attributs : String element.getAttribute(String (Source: "t.querySelectorAll(String selecteurCSS) ● Accès direct ex. document.forms INFO401 - web - CM2 - CSS et JavaScript 66 ...accéder à leurs attributs et styles ● Accéder aux attributs : String element.getAttribute(String")
69. Détail source à réviser : truit pour chercher à accéder aux éléments. INFO401 - web - CM2 - CSS et JavaScript 70 Modifier les éléments ● Une fois que nous avons l’élément qui nous intéresse, nous pouvons lui ajouter un évènement ou le manipuler (Source: "truit pour chercher à accéder aux éléments. INFO401 - web - CM2 - CSS et JavaScript 70 Modifier les éléments ● Une fois que nous avons l’élément qui nous intéresse, nous pouvons lui ajouter un évènement ou le manipuler")
70. Détail source à réviser : 2021 INFO401 - web - CM2 - CSS et JavaScript 11 Fichier CSS ● CSS Cascading Style Sheets « feuille de style en cascade »… ● Fichier texte ● Extension (Source: "2021 INFO401 - web - CM2 - CSS et JavaScript 11 Fichier CSS ● CSS Cascading Style Sheets « feuille de style en cascade »… ● Fichier texte ● Extension")
71. Détail source à réviser : cript 10 Exemples ● Jardin Zen CSS (2005 !) http://www.csszengarden.com/ ● Tendances 2024 https://graphiste.com/blog/webdesign-tendance s-2021 INFO401 - web - CM2 - CSS et JavaScript 11 Fichier CSS ● CSS Cascading Style (Source: "cript 10 Exemples ● Jardin Zen CSS (2005 !) http://www.csszengarden.com/ ● Tendances 2024 https://graphiste.com/blog/webdesign-tendance s-2021 INFO401 - web - CM2 - CSS et JavaScript 11 Fichier CSS ● CSS Cascading Style Sheets « feuille de style en cascad")
72. Détail source à réviser : -2021 INFO401 - web - CM2 - CSS et JavaScript 11 Fichier CSS ● CSS Cascading Style Sheets « feuille de style en cascade »… ● Fichier texte ● Extension .css ● A quoi ça ressemble ? INFO401 - web - CM2 - CSS et JavaScript (Source: "-2021 INFO401 - web - CM2 - CSS et JavaScript 11 Fichier CSS ● CSS Cascading Style Sheets « feuille de style en cascade »… ● Fichier texte ● Extension .css ● A quoi ça ressemble ? INFO401 - web - CM2 - CSS et JavaScript 12 Terminologie ● Un fichier CSS contient des règles CSS ● Un")
73. Détail source à réviser : re en forme INFO401 - web - CM2 - CSS et JavaScript 10 Exemples ● Jardin Zen CSS (2005 !) http://www.csszengarden.com/ ● Tendances 2024 https://graphiste.com/blog/webdesign-tendance s-2021 INFO401 - web - CM2 - CSS et Ja (Source: "re en forme INFO401 - web - CM2 - CSS et JavaScript 10 Exemples ● Jardin Zen CSS (2005 !) http://www.csszengarden.com/ ● Tendances 2024 https://graphiste.com/blog/webdesign-tendance s-2021 INFO401 - web - CM2 - CSS et JavaScript 11 Fichie")
74. Détail source à réviser : CM2 - CSS et JavaScript 21 Élément HTML <span> ● <p class="rouge"> ● <strong class="rouge"> ● Comment faire pour mettre « API JavaScript » en rouge ? INFO401 - web - CM2 - CSS et JavaScript 22 Élément HTML <div> ● De la (Source: "CM2 - CSS et JavaScript 21 Élément HTML <span> ● <p class="rouge"> ● <strong class="rouge"> ● Comment faire pour mettre « API JavaScript » en rouge ? INFO401 - web - CM2 - CSS et JavaScript 22 Élément HTML <div> ● De la même manière <div> peut servir à grouper plusieurs balises pour appliquer un s")
75. Détail source à réviser : INFO401 - web - CM2 - CSS et JavaScript 37 Bref historique ● Standardisé en 1997 par l’organisation ECMAScript sous le numéro ECMA-262 ● JavaScript, JS, ECMAScript ou ES désignent le même langage INFO401 - web - CM2 - CS (Source: "INFO401 - web - CM2 - CSS et JavaScript 37 Bref historique ● Standardisé en 1997 par l’organisation ECMAScript sous le numéro ECMA-262 ● JavaScript, JS, ECMAScript ou ES désignent le même langage INFO401 - web - CM2 - CSS et JavaScript 38 Bref historique Olivier Hondermarck TOUT JavaScript DUNOD 2020 INFO401 - web - CM2 - CSS et JavaScript 39")
76. Détail source à réviser : dances 2024 https://graphiste.com/blog/webdesign-tendance s-2021 INFO401 - web - CM2 - CSS et JavaScript 11 Fichier CSS ● CSS Cascading Style Sheets « feuille de style en cascade »… ● Fichier texte ● Extension .css ● A (Source: "dances 2024 https://graphiste.com/blog/webdesign-tendance s-2021 INFO401 - web - CM2 - CSS et JavaScript 11 Fichier CSS ● CSS Cascading Style Sheets « feuille de style en cascade »… ● Fichier texte ● Extension .css ● A")
77. Détail source à réviser : D’autres non → balises de type inline Exemples ? INFO401 - web - CM2 - CSS et JavaScript 8 Flux normal d’affichage ● Les contenus des balises de type block sont affichés les uns en dessous des autres (dans le même ordre (Source: "D’autres non → balises de type inline Exemples ? INFO401 - web - CM2 - CSS et JavaScript 8 Flux normal d’affichage ● Les contenus des balises de type block sont affichés les uns en dessous des autres (dans le même ordre que dans le fichier texte) ● Les contenus des balises de typ")
78. Détail source à réviser : INFO401 - web - CM2 - CSS et JavaScript 17 Les sélecteurs d’élément ● Que fait la règle suivante ? h1 { color: red; } INFO401 - web - CM2 - CSS et JavaScript 18 Les sélecteurs d’élément ● Applique la couleur rouge à tous (Source: "INFO401 - web - CM2 - CSS et JavaScript 17 Les sélecteurs d’élément ● Que fait la règle suivante ? h1 { color: red; } INFO401 - web - CM2 - CSS et JavaScript 18 Les sélecteurs d’élément ● Applique la couleur rouge à tous les éléments <h1> ● Très vite vous aurez besoin d’appliquer")
79. Détail source à réviser : INFO401 - web - CM2 - CSS et JavaScript 21 Élément HTML <span> ● <p class="rouge"> ● <strong class="rouge"> ● Comment faire pour mettre « API JavaScript » en rouge ? INFO401 - web - CM2 - CSS et JavaScript 22 Élément HTM (Source: "INFO401 - web - CM2 - CSS et JavaScript 21 Élément HTML <span> ● <p class="rouge"> ● <strong class="rouge"> ● Comment faire pour mettre « API JavaScript » en rouge ? INFO401 - web - CM2 - CSS et JavaScript 22 Élément HTML <div> ● De la même manière <div> peut servir à grouper plu")
80. Détail source à réviser : INFO401 - web - CM2 - CSS et JavaScript 22 Élément HTML <div> ● De la même manière <div> peut servir à grouper plusieurs balises pour appliquer un style au groupe ● Comment mettre un fond gris aux parties son et vidéo ? (Source: "INFO401 - web - CM2 - CSS et JavaScript 22 Élément HTML <div> ● De la même manière <div> peut servir à grouper plusieurs balises pour appliquer un style au groupe ● Comment mettre un fond gris aux parties son et vidéo ? #sonEtVideo {background-color: gray;} INFO401 - web - CM2 -")
81. Détail source à réviser : 1995 par Brendan Eich informaticien chez Netscape (Source: "1995 par Brendan Eich informaticien chez Netscape")
82. Détail source à réviser : HTML attribut INFO401 - web - CM2 - CSS et JavaScript 5 Rappel HTML <img src="chemin" alt="description"> élément HTML attributs INFO401 - web - CM2 - CSS et JavaScript 6 Rappel HTML <ul> <li>item 1</li> <li>item 2</li> < (Source: "HTML attribut INFO401 - web - CM2 - CSS et JavaScript 5 Rappel HTML <img src="chemin" alt="description"> élément HTML attributs INFO401 - web - CM2 - CSS et JavaScript 6 Rappel HTML <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> INFO401 - web - CM2 -")
83. Détail source à réviser : (fichier HTML) et mise en forme (fichier CSS) se fait grâce à la ligne de code <link rel="stylesheet" href="style.css"> ● Dans le « head » du fichier HTML INFO401 - web - CM2 - CSS et JavaScript 15 Propriétés ● Voir TD, (Source: "(fichier HTML) et mise en forme (fichier CSS) se fait grâce à la ligne de code <link rel="stylesheet" href="style.css"> ● Dans le « head » du fichier HTML INFO401 - web - CM2 - CSS et JavaScript 15 Propriétés ● Voir TD, TP… ● … et surtout MDN ! démo INFO401 - w")
84. Détail source à réviser : mise en forme (fichier CSS) se fait grâce à la ligne de code <link rel="stylesheet" href="style.css"> ● Dans le « head » du fichier HTML INFO401 - web - CM2 - CSS et JavaScript 15 Propriétés ● Voir TD, TP… ● … et surtout (Source: "mise en forme (fichier CSS) se fait grâce à la ligne de code <link rel="stylesheet" href="style.css"> ● Dans le « head » du fichier HTML INFO401 - web - CM2 - CSS et JavaScript 15 Propriétés ● Voir TD, TP… ● … et surtout MDN ! démo INFO401 - web - CM2 - CSS et")
85. Détail source à réviser : INFO401 - web - CM2 - CSS et JavaScript 17 Les sélecteurs d’élément ● Que fait la règle suivante (Source: "INFO401 - web - CM2 - CSS et JavaScript 17 Les sélecteurs d’élément ● Que fait la règle suivante")
86. Détail source à réviser : cript 20 Les sélecteurs de classe ● Dans le fichier HTML on ajoute l’attribut class="rouge" ● Valeur « choisie » par vous ● Aucune conséquence visuelle ou sémantique ● Dans le fichier CSS on ajoute la règle .rouge {color (Source: "cript 20 Les sélecteurs de classe ● Dans le fichier HTML on ajoute l’attribut class="rouge" ● Valeur « choisie » par vous ● Aucune conséquence visuelle ou sémantique ● Dans le fichier CSS on ajoute la règle .rouge {color: red;} ● Contrairement à l’attribut id, l’attribut")
87. Détail source à réviser : la balise <script> ● Lien entre le fichier HTML et le fichier JS <script src="cours3-6.js"></script> ● Voir ce qui se passe lorsque je déplace la balise <script> dans le head... INFO401 - web - CM2 - CSS et JavaScript 47 (Source: "la balise <script> ● Lien entre le fichier HTML et le fichier JS <script src="cours3-6.js"></script> ● Voir ce qui se passe lorsque je déplace la balise <script> dans le head... INFO401 - web - CM2 - CSS et JavaScript 47 Hello World Python print("Hello World") Écrit avec IDLE Interprété par IDLE Et affiché sur IDLE Javascript document.write("Hello World")...")
88. Détail source à réviser : INFO401 - web - CM2 - CSS et JavaScript 47 Hello World Python print("Hello World") Écrit avec IDLE Interprété par IDLE Et affiché sur IDLE Javascript document (Source: "INFO401 - web - CM2 - CSS et JavaScript 47 Hello World Python print("Hello World") Écrit avec IDLE Interprété par IDLE Et affiché sur IDLE Javascript document")
89. Détail source à réviser : e head... INFO401 - web - CM2 - CSS et JavaScript 47 Hello World Python print("Hello World") Écrit avec IDLE Interprété par IDLE Et affiché sur IDLE Javascript document.write("Hello World"); Écrit avec un éditeur de text (Source: "e head... INFO401 - web - CM2 - CSS et JavaScript 47 Hello World Python print("Hello World") Écrit avec IDLE Interprété par IDLE Et affiché sur IDLE Javascript document.write("Hello World"); Écrit avec un éditeur de texte Interprété par navigateur Et affiché sur la page web INFO401 - web - CM2 - CSS et JavaScript 48 Commentaires Pytho")
90. Détail source à réviser : affiché sur la page web INFO401 - web - CM2 - CSS et JavaScript 48 Commentaires Python """ commentaires sur plusieurs lignes """ # sur une ligne JavaScript /* commentaires sur plusieurs lignes / // sur une ligne INFO401 _(Source: "affiché sur la page web INFO401 - web - CM2 - CSS et JavaScript 48 Commentaires Python """ commentaires sur plusieurs lignes """ # sur une ligne JavaScript / commentaires sur plusieurs lignes */ // sur une ligne INFO401 - web - CM2 - CSS et JavaScript 49 Variables et affectation Pytho")_
91. Détail source à réviser : - CM2 - CSS et JavaScript 48 Commentaires Python """ commentaires sur plusieurs lignes """ # sur une ligne JavaScript /* commentaires sur plusieurs lignes / // sur une ligne INFO401 - web - CM2 - CSS et JavaScript 49 Va _(Source: "- CM2 - CSS et JavaScript 48 Commentaires Python """ commentaires sur plusieurs lignes """ # sur une ligne JavaScript / commentaires sur plusieurs lignes */ // sur une ligne INFO401 - web - CM2 - CSS et JavaScript 49 Variables et affectation Python a = 3 x = 2.1 ch = "python" test = False JavaScript var a = 3; var x = 2.1; var ch = "JavaScript"; var test...")_
92. Détail source à réviser : eb - CM2 - CSS et JavaScript 49 Variables et affectation Python a = 3 x = 2.1 ch = "python" test = False JavaScript var a = 3; var x = 2.1; var ch = "JavaScript"; var test = false; const a = 3; let a= 3; INFO401 - web - (Source: "eb - CM2 - CSS et JavaScript 49 Variables et affectation Python a = 3 x = 2.1 ch = "python" test = False JavaScript var a = 3; var x = 2.1; var ch = "JavaScript"; var test = false; const a = 3; let a= 3; INFO401 - web - CM2 - CSS et JavaScript 50 Tests conditionnels Python note = 8 if note>10 : res = "admis"")
93. Détail source à réviser : x = 2.1 ch = "python" test = False JavaScript var a = 3; var x = 2.1; var ch = "JavaScript"; var test = false; const a = 3; let a= 3; INFO401 - web - CM2 - CSS et JavaScript 50 Tests conditionnels Python note = 8 if note (Source: "x = 2.1 ch = "python" test = False JavaScript var a = 3; var x = 2.1; var ch = "JavaScript"; var test = false; const a = 3; let a= 3; INFO401 - web - CM2 - CSS et JavaScript 50 Tests conditionnels Python note = 8 if note>10 : res = "admis" elif note>=8 res = "rattrapage" else res = "non admis" JavaScript var note = 8; var res; if (note>10) { res = "admis"...")
94. Détail source à réviser : - CM2 - CSS et JavaScript 50 Tests conditionnels Python note = 8 if note>10 : res = "admis" elif note>=8 res = "rattrapage" else res = "non admis" JavaScript var note = 8; var res; if (note>10) { res = "admis"; } else if (Source: "- CM2 - CSS et JavaScript 50 Tests conditionnels Python note = 8 if note>10 : res = "admis" elif note>=8 res = "rattrapage" else res = "non admis" JavaScript var note = 8; var res; if (note>10) { res = "admis"; } else if (note>=8) { res = "rattrapage"; } else { res = "non")
95. Détail source à réviser : note = 8 if note>10 : res = "admis" elif note>=8 res = "rattrapage" else res = "non admis" JavaScript var note = 8; var res; if (note>10) { res = "admis"; } else if (note>=8) { res = "rattrapage"; } else { res = "non adm (Source: "note = 8 if note>10 : res = "admis" elif note>=8 res = "rattrapage" else res = "non admis" JavaScript var note = 8; var res; if (note>10) { res = "admis"; } else if (note>=8) { res = "rattrapage"; } else { res = "non admis"; } INFO401 - web - CM2 - CSS et JavaScript 51 Opérateurs de comparaison et opérateu")
96. Détail source à réviser : page" else res = "non admis" JavaScript var note = 8; var res; if (note>10) { res = "admis"; } else if (note>=8) { res = "rattrapage"; } else { res = "non admis"; } INFO401 - web - CM2 - CSS et JavaScript 51 Opérateurs d (Source: "page" else res = "non admis" JavaScript var note = 8; var res; if (note>10) { res = "admis"; } else if (note>=8) { res = "rattrapage"; } else { res = "non admis"; } INFO401 - web - CM2 - CSS et JavaScript 51 Opérateurs de comparaison et opérateurs logique == != not and or == != ! &")

📅 Repères chronologiques

Date	Événement
2005	Naissance du HTML5
2020	Introduction des pseudo-classes CSS avancées
2021	Améliorations du DOM et manipulation en JavaScript
2024	Évolutions prévues dans la gestion des événements JavaScript

📊 Tableaux de Synthèse

Comparaison des Balises Block et Inline

Type	Comportement	Impact sur le flux
Block	Provoque un retour à la ligne, occupe toute la largeur	Place les éléments verticalement, en blocs
Inline	Ne provoque pas de retour à la ligne	Place les éléments côte à côte, en ligne

Sélecteurs CSS : Classes, Identifiants et Attributs

Type de sélecteur	Syntaxe	Utilisation
ID	#id	Un seul élément, unique dans la page
Classe	.classe	Plusieurs éléments, partageant la même classe
Attributs	[attribut]	Cible des éléments selon leurs attributs

⚠️ Pièges & Confusions Fréquentes

1. Confusion entre sélecteurs ID et classes, notamment l'utilisation multiple de classes sur un même élément.
2. Mélanger les éléments block et inline sans considérer leur impact sur la mise en page.
3. Utiliser innerHTML pour insérer du contenu non sécurisé, risquant des injections XSS.
4. Manipuler directement style sans utiliser de classes CSS pour une meilleure gestion.
5. Confusion entre getAttribute() et properties pour accéder aux attributs HTML.
6. Ne pas gérer les événements de manière efficace, en oubliant de détacher les gestionnaires.
7. Utiliser des boucles ou conditions JavaScript sans tester leur logique ou leur portée.

✅ Checklist Examen

1. Comprendre la différence entre éléments block et inline.
2. Savoir écrire une règle CSS simple pour un élément HTML.
3. Utiliser un sélecteur ID pour cibler un élément unique.
4. Appliquer une classe CSS à plusieurs éléments.
5. Accéder et modifier le contenu HTML avec innerHTML.
6. Modifier dynamiquement le style d’un élément avec style.property.
7. Créer et insérer un nouvel élément dans le DOM.
8. Gérer un événement clic sur un bouton.
9. Écrire une condition if-else en JavaScript.
10. Utiliser une boucle for pour parcourir un tableau.
11. Manipuler un tableau en ajoutant ou supprimant des éléments.
12. Utiliser une fonction pour organiser le code.