Développement Web - Bases modernes

Il est essentiel de savoir faire la différence entre Internet et le Web. il s'agit de deux concepts que l’on confond souvent.

Beaucoup de gens ont du mal à faire la distinction entre le web et internet, bien qu'ils représentent des concepts différents dans le monde numérique. Cependant, il est important de noter que Internet a été créé avant le Web.

Définition d’internet

Internet est l’acronyme de Interconnected Network, qui signifie « réseau interconnecté » en français. Internet est un réseau informatique mondial composé de millions de réseaux aussi bien publics que privés, universitaires, commerciaux et gouvernementaux. Grâce à Internet, les individus, les entreprises et les institutions peuvent se connecter, partager des idées, accéder à une multitude de ressources et explorer un monde virtuel d'opportunités. Cette toile interconnectée joue un rôle essentiel dans notre vie quotidienne, influençant la manière dont nous communiquons, apprenons, travaillons et interagissons avec le monde qui nous entoure.

Principaux services d'Internet

Internet offre une variété impressionnante de services dont les plus populaires et couramment utilisés sont :

• Le World Wide Web (WWW) : Le Web est un système qui permet d'accéder à des pages web via des navigateurs internet tels que Google Chrome, Mozilla Firefox, ou Microsoft Edge. Il permet aux utilisateurs de rechercher et de consulter des informations, des sites web, des blogs, des médias sociaux, des vidéos, des images, etc.
• La messagerie électronique (e-mail) : L'e-mail est un moyen de communication électronique permettant d'envoyer et de recevoir des messages, des fichiers et des documents entre des individus et des organisations partout dans le monde.
• Les réseaux sociaux : Les plateformes de réseaux sociaux tels que Facebook, Twitter, Instagram, LinkedIn, etc., offrent des espaces interactifs pour les utilisateurs afin de partager des contenus, de communiquer avec d'autres personnes, de rejoindre des groupes et de rester en contact avec leurs amis, leur famille et leurs collègues.
• La messagerie instantanée : Les services de messagerie instantanée tels que WhatsApp, Telegram et Messenger permettent aux utilisateurs de communiquer en temps réel via des messages texte, des appels vocaux et vidéo.
• Le partage de fichiers : Les services de partage de fichiers comme Dropbox, Google Drive et OneDrive permettent aux utilisateurs de stocker, de partager et d'accéder à leurs fichiers en ligne à partir de n'importe quel appareil connecté à Internet.
• La diffusion en continu : Les plateformes de diffusion en continu (streaming) telles que YouTube, Netflix et Spotify proposent des contenus audiovisuels et musicaux en continu, permettant aux utilisateurs de regarder des vidéos et d'écouter de la musique en ligne.
• Le commerce en ligne : Les sites de commerce électronique tels qu'Amazon, eBay et Alibaba permettent aux utilisateurs d'acheter et de vendre des produits en ligne en utilisant des plateformes sécurisées de paiement électronique.

Cette liste n'est qu'un aperçu des services d'Internet disponibles. Internet continue d'élargir ses offres pour répondre aux besoins croissants des utilisateurs et des entreprises dans le monde entier à mesure que la technologie évolue et que de nouvelles innovations émergent.

Le Web est souvent confondu avec les autres services car ils convergent tous vers lui. Auparavant, il était impératif d'utiliser des logiciels dédiés tels que Apple Mail, Outlook, etc., pour gérer les e-mails. Cependant, de nos jours, l'accès aux e-mails se fait principalement via le Web. Par exemple, on se rend directement sur le site de Gmail pour consulter ses e-mails. En effet, de nos jours, le Web agit comme la principale porte d'entrée vers la plupart des services disponibles sur Internet.

Introduction

Le Web est un système mondial d'information basé sur Internet qui permet aux utilisateurs d'accéder à un vaste réseau de ressources à travers des pages web.

Le Web repose sur des technologies clés telles que le langage de balisage HTML (Hypertext Markup Language) pour structurer le contenu des pages web, le protocole HTTP (Hypertext Transfer Protocol) pour le transfert de données et les URL (Uniform Resource Locators) pour adresser et identifier les ressources en ligne. Il utilise également des liens hypertextes pour relier les différentes pages et ressources, et permettent ainsi aux utilisateurs de naviguer facilement entre les pages web.

Qu’est-ce qu’un site web ?

Il existe sur le Web, des millions de sites ayant chacun sa propre finalité. Par exemple, les sites vitrines présentent les informations d'une entreprise ou d'une organisation, les blogs permettent aux individus de partager des idées et des opinions, les sites d'e-commerce facilitent les achats en ligne, les réseaux sociaux connectent les utilisateurs entre eux, etc. Il s’agit alors d’une interface en ligne qui permet aux utilisateurs de consulter et d'interagir avec un contenu textuel, des images, des vidéos, des fichiers multimédias et des applications interactives.

Techniquement, un site web est un ensemble de pages web reliées entre elles, accessibles par le biais d’un navigateur web à partir d’une adresse web unique, appelée URL. Un site internet est un fichier ou un ensemble de fichiers, hébergés sur un serveur et accessible via internet.

Qu’est-ce qu’un navigateur web ?

Un navigateur web est un logiciel informatique conçu pour permettre aux utilisateurs d'accéder, de visualiser et d'interagir avec les contenus et les ressources du web. Il agit comme une interface entre l'utilisateur et le web en permettant la navigation et l'affichage (interprétation) des pages web.

Les navigateurs web les plus populaires sont Google Chrome, Mozilla Firefox, Microsoft Edge, Safari (pour les appareils Apple) et Opera. Chaque navigateur possède ses propres fonctionnalités, performances et extensions, mais ils partagent tous l'objectif commun d’interpréter le code des pages web.

Le rôle crucial d’un navigateur web réside dans sa capacité d’interpréter le code source d’une page web écrit principalement avec les langages HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) et Javascript. Il transforme ce code en une présentation visuelle, et interactive que les utilisateurs puissent consulter, parcourir et interagir avec sur leur écran.

Les navigateurs ont leurs propres manières et spécificités d'interprétation, ce qui peut entraîner de légères différences dans l'affichage des pages web entre eux. Pour cette raison, les développeurs web doivent prendre en compte ces variations afin de garantir la compatibilité de leurs sites avec la plupart des navigateurs.

Comment accéder aux ressources web ?

Pour accéder à une ressource web (page web, image, vidéo, fichier, etc.)  il suffit de taper dans la barre d’adresse du navigateur l’URL (Uniform Resource Locator) de la ressource. URL est une adresse unique qui permet de localiser et d'identifier une ressource web spécifique. Une URL est composée de plusieurs parties distinctes qui fournissent des informations sur l'emplacement de la ressource :

1. Protocole : Il indique le type de protocole de communication à utiliser pour accéder à la ressource. Par exemple, les URL commençant par "http://" utilisent le protocole HTTP (Hypertext Transfer Protocol) pour les sites web, tandis que "https://" utilise HTTP avec un échange de données sécurisé.
2. Nom de domaine : C'est l'adresse du serveur où se trouve la ressource. Par exemple, "www.francophonie.org" est le nom de domaine pour le site web
3. Chemin : Il spécifie l'emplacement du fichier ou de la ressource sur le serveur. Par exemple, "/dossier/page.html" indique que la ressource est dans le dossier "dossier" et s'appelle "page.html".
4. Paramètres (facultatif) : d’autres paramètres peuvent être ajoutés à l'URL pour transmettre des informations supplémentaires au serveur. Par exemple, "?id=123" pourrait être un paramètre pour identifier un élément spécifique sur une page web.

Ainsi, grâce aux URL les utilisateurs peuvent accéder rapidement à des pages web spécifiques, partager des liens avec d'autres personnes, accéder à des fichiers et naviguer facilement sur le Web.

Les différentes sortes de sites web

Un site web statique est un site dont le contenu est fixe et ne change pas en fonction des actions de l'utilisateur ou du temps. Lorsqu'un utilisateur accède à une page statique, le serveur envoie simplement le fichier de la page demandée au navigateur de l'utilisateur

Les sites statiques conviennent bien pour des sites simples qui n'ont pas besoin de mises à jour fréquentes et ne requièrent pas d'interactions dynamiques avec l'utilisateur. De plus, ils sont faciles à créer et à héberger, mais ils peuvent devenir fastidieux à gérer si le contenu doit être mis à jour régulièrement.

Un site web interactif est un site web qui permet aux utilisateurs d'effectuer des actions et d'interagir avec le contenu du site. Ces sites proposent des éléments interactifs tels que les formulaires, les boutons, les menus déroulants, etc. permettant aux utilisateurs d'effectuer des actions, de soumettre des informations et de faire des choix.

L'interaction se produit côté client, c'est-à-dire que les actions de l'utilisateur sont traitées par le navigateur sans nécessiter de communication avec le serveur.

Un site web dynamique est un site dont le contenu est généré en temps réel en fonction des actions de l'utilisateur grâce à l'interaction côté client et côté serveur.  la volée en fonction des requêtes des utilisateurs et des interactions avec le site. Cela signifie que le serveur exécute des scripts et accède à une base de données pour récupérer les données en temps réel.

Principe de fonctionnement du web ?

Quelque soit le type de la page statique/dynamique, le Web fonctionne selon un modèle client-serveur, où le client est représenté par le navigateur web utilisé par l'utilisateur, et le serveur est un ordinateur distant et puissant qui héberge les sites web et stocke les ressources associées, telles que les pages web, les images, les vidéos, les fichiers, etc.

L'architecture du web statique et interactif repose sur la simplicité. Il s’agit en fait d’un système d'échange d'informations entre le client (navigateur web) et le serveur (ordinateur distant) selon plusieurs étapes :

1. L'utilisateur saisit l'URL d'un site web dans son navigateur. Une requête est alors envoyée depuis le navigateur web au serveur correspondant.
2. Le serveur reçoit la requête du navigateur et la traite en recherchant la page web associée à l'URL spécifiée.
3. Une fois que le serveur a préparé la page web et les ressources associées, il renvoie la réponse au navigateur du client. Cette réponse contient les données demandées, sous forme d’une page HTML et éventuellement des ressources associées. 
4. Le navigateur du client reçoit la réponse du serveur et interprète les données reçues sous forme d’une page web complète sur l'écran de l'utilisateur. Le navigateur est capable d'interpréter une page HTML contenant du code HTML, CSS et Javascript.

Les serveurs web sont conçus pour gérer de nombreuses requêtes simultanément, ce qui permet à des millions d'utilisateurs du monde entier de consulter les sites web de manière efficace.

L'architecture du web dynamique est plus complexe car elle implique la génération de contenu sur le serveur en fonction des demandes de l'utilisateur. Cette architecture implique une communication étroite entre différents éléments, tels que le client (navigateur), le serveur d'application et le serveur de données. Voici comment chaque étape s'inscrit dans le processus d'une architecture web dynamique :

1. Le client envoie une requête au serveur d'application : Le processus commence lorsque l'utilisateur, via son navigateur, envoie une requête au serveur d'application. Cette requête peut être déclenchée par une action de l'utilisateur, comme cliquer sur un bouton ou saisir une URL dans la barre d'adresse du navigateur.
2. Le serveur d'application reçoit et interprète la requête : Le serveur d'application, également connu sous le nom de serveur web dynamique, reçoit la requête du client. Son rôle principal est d'interpréter cette requête, de comprendre ce que l'utilisateur demande et de déterminer comment y répondre.
3. Le serveur d'application interroge le serveur de données : Une fois que le serveur d'application a compris la demande de l'utilisateur, il peut avoir besoin de récupérer des données pour générer la réponse. C'est à ce stade que le serveur d'application peut interroger le serveur de données. Les requêtes peuvent prendre différentes formes, telles que des requêtes SQL pour les bases de données relationnelles ou des requêtes XML pour accéder à des données structurées.
4. Le serveur de données renvoie la réponse au serveur d'application : Le serveur de données traite la requête du serveur d'application et récupère les données nécessaires. Ces données sont ensuite renvoyées au serveur d'application en tant que réponse.
5. Formatage de la réponse : Une fois que le serveur d'application reçoit les données du serveur de données, il les formate en un format compréhensible par le navigateur web. Cela peut impliquer la transformation des données en JSON, XML ou tout autre format approprié pour une transmission via le Web.
6. Envoi de la réponse au client : Le serveur d'application envoie la réponse formatée au client via le Web. Cette réponse peut inclure des données, des instructions pour le rendu, des éléments visuels et tout autre élément nécessaire pour afficher la page de manière appropriée.
7. Affichage de la réponse par le navigateur : Le client, c'est-à-dire le navigateur web de l'utilisateur, reçoit la réponse du serveur d'application. Le navigateur interprète le contenu de la réponse et affiche la page web résultante à l'utilisateur. Cela peut inclure du texte, des images, des vidéos et d'autres éléments interactifs.

ref des photos : https://wooster.checkmy.ws/2013/11/site-statique-dynamique/

Les protocoles essentiels du web

L'architecture du web suit un modèle client/serveur basé sur le principe de requête/réponse. Le navigateur web agit en tant que client et envoie des requêtes aux serveurs web via Internet. Le serveur web, quant à lui, est l'ordinateur destinataire de la requête et le responsable du traitement de cette dernière pour formuler une réponse appropriée. Les protocoles définissent la manière dont les données sont traitées et les informations échangées entre le client et le serveur. C'est grâce à cette interaction entre client et serveur, soutenue par les protocoles, que le web offre ses services et fournit les pages web aux utilisateurs.

• HTTP (HyperText Transfer Protocol) est le protocole fondamental qui permet la communication entre un navigateur web et un serveur web. Vous le remarquez dans les adresses web sous la forme "http://" au début.
• HTTPS est une variante sécurisée du protocole HTTP, qui ajoute une couche de cryptage (SSL/TLS) pour sécuriser les échanges de données entre un navigateur web et un serveur. Cette sécurisation renforce la confidentialité et l'intégrité des informations échangées lors de la navigation sur des sites web.
• FTP (File Transfer Protocol) était autrefois utilisé pour transférer des fichiers entre un client et un serveur. Bien qu'il soit moins fréquent dans le contexte du web moderne, FTP permettait de télécharger et de mettre à jour des fichiers sur un site web.

Un peu d'historique

ARPANET 1969, L’HISTOIRE D’INTERNET COMMENCE !

En 1969, l'idée d'un réseau interconnecté d'ordinateurs émerge avec projet ARPANET (Advanced Research Projects Agency Network) développé par le département de la Défense américain pour faciliter la communication entre les chercheurs et les institutions militaires.

Au fil du temps, il évolue pour devenir un espace d'échange universitaire en dehors du domaine militaire, puis se popularise progressivement auprès du grand public sous le nom d'Internet. Le protocole TCP/IP (Transmission Control Protocol/Internet Protocol) est développé, permettant aux différents réseaux de communiquer entre eux.

Aux années 1980, l'adoption du protocole TCP/IP devient plus répandue, et d'autres réseaux rejoignent le système et forment le réseau Internet. Ce système devient aux années 1990 un moyen essentiel de communication, de partage d'informations et de recherche pour le grand public.

Au début des années 1990, Tim Berners-Lee, scientifique au CERN, présente le concept du World Wide Web (WWW) qui permet de naviguer entre les pages web via des liens hypertextes. Il a crée le premier serveur web, le premier navigateur web et les bases du langage de balisage HTML (Hypertext Markup Language).

Depuis, le Web a connu une croissance explosive, avec une augmentation rapide du nombre de sites web, de contenus multimédias et d'utilisateurs. Le Web devient alors une plateforme mondiale pour la communication, le commerce, l'éducation, le divertissement et autres.

Aujourd'hui, le Web évolue continuellement avec des avancées technologiques telles que le Web mobile, les applications web progressives (PWA), les sites web réactifs et les API (Interfaces de Programmation Applicative) pour interconnecter différentes plateformes et l'intégration de l'intelligence artificielle. Ces développements visent à rendre le Web plus intelligent et plus contextuel.

Evolution du web

• Web 1 : également connu sous le nom de Web statique, fait référence à la première phase de l'évolution du World Wide Web. Les sites du web 1.0 étaient principalement constitués de pages statiques écrites en HTML, sans interactivité ni contenu dynamique et offrent une navigation unidirectionnelle aux utilisateurs. En fait, les utilisateurs pouvaient uniquement consulter le contenu des sites web, mais ils n'avaient pas la possibilité de contribuer, de commenter ou d'interagir avec le contenu. Le Web 1.0 était principalement un espace de publication et de consultation de contenu.

• Web 2 : En 2004, une nouvelle phase d'évolution du World Wide Web est apparue. Le Web 2 caractérisé par un changement fondamental dont les utilisateurs se comportent. Cette nouvelle vision appelée aussi Web participatif permet des interactions riches, l'émergence des réseaux sociaux, des blogs, des forums et des plateformes collaboratives. L'objectif n'est plus seulement de rechercher des réponses sur le Web, mais de donner vie aux idées et aux personnes à travers ces échanges interactifs.

• Web 3 : également connu sous le nom de Web sémantique est une vision émergente d'Internet qui vise à créer une infrastructure plus ouverte, transparente, sécurisée et centrée sur les utilisateurs. Le cœur du Web 3.0 réside dans sa capacité à attribuer un sens aux données. Au lieu d'afficher simplement des informations, le Web 3.0 vise à comprendre la signification contextuelle derrière les données. Il prend en compte le contexte de chaque utilisateur, y compris sa localisation géographique, ses préférences, ses habitudes de navigation et ses interactions passées. Cette personnalisation permet de fournir des résultats de recherche et des informations plus pertinentes, créant ainsi une expérience en ligne plus adaptée aux besoins individuels.

• Web 4 : la quatrième génération du web sera ultra-intelligente, appelé aussi le web intelligent, s’inscrira dans un contexte basé sur l’intelligence artificielle, la réalité virtuelle, l’Internet des objets (IoT), l’apprentissage automatique etc. L'une des caractéristiques majeures du Web 4.0 résidera dans son aptitude à réaliser des analyses avancées. En effet, cette évolution technologique permettra de comprendre les actions anticipées des utilisateurs et d'évaluer leur degré de satisfaction.

Les langages courants du développement web

Le développement web implique l'utilisation de divers langages de programmation pour créer des sites web et des applications en ligne. Ces langages sont généralement divisés en deux catégories principales : les langages frontaux (front-end) et les langages dorsaux (back-end). Chacune de ces catégories joue un rôle spécifique dans la création et le fonctionnement des sites web. 

Les langages frontaux prennent en charge des aspects visuels et interactifs d'un site web. Alors que, les langages dorsaux jouent un rôle en coulisses et se concentrent sur la gestion des processus et des fonctionnalités essentiels qui alimentent les interfaces utilisateur. Ils assurent en fait la manipulation des données, la gestion des bases de données, l'authentification, la sécurité et d'autres aspects essentiels pour le bon fonctionnement et la performance de l'application.

Langages Frontaux :

Le développement frontal désigne le fait de créer la partie visuelle d’une application web ou mobile avec laquelle les utilisateurs vont interagir. Ainsi, les langages frontaux sont utilisés pour concevoir l'interface utilisateur et sont responsables de la présentation visuelle et interactive du site. Pour créer une interface utilisateur robuste, interactive et attrayante, de nombreux éléments entrent en jeu en coulisses. Trois langages sont utilisées niveau frontal : HTML, CSS et JS. De plus on peut utiliser différentes bibliothèques et frameworks pour coder la partie frontale.

HTML (HyperText Markup Language) : HTML est la base de tout site web. Il s'agit d'un langage de balisage standard qui définit la structure et le contenu des pages web. HTML utilise des balises pour indiquer des éléments tels que les titres, les paragraphes, les images, les liens, etc.

Avantages du HTML :

1. Compatibilité multiplateforme :HTML offre un moyen indépendant de la plateforme pour créer du contenu web, garantissant que les sites web et les applications peuvent être interprétés de manière cohérente par les navigateurs web sur différentes plateformes et appareils. Cela signifie que le contenu créé en HTML sera affiché de manière similaire sur diverses configurations, que ce soit sur un ordinateur de bureau, une tablette, un smartphone ou d'autres.
2. Contenu structuré : HTML permet la structuration logique du contenu en utilisant des balises sémantiques telles que <header>, <nav>, <section>, et <footer>. Cela permet aux moteurs de recherche de comprendre la hiérarchie et le sens du contenu, ce qui peut améliorer le classement dans les résultats de recherche. De plus, l'utilisation de balises sémantiques facilite l'accessibilité pour les utilisateurs handicapés, car les technologies d'assistance peuvent interpréter et présenter le contenu de manière plus pertinente.
3. Intégration avec d'autres technologies : HTML s'intègre parfaitement avec d'autres technologies web telles que CSS (Cascading Style Sheets) pour le style et la mise en page, JavaScript pour l'interactivité, et des éléments multimédias tels que les images, les vidéos et l'audio. Cette intégration permet aux développeurs de créer des pages web dynamiques et interactives.

CSS (Cascading Style Sheets) : Feuille de Style en Cascade est utilisé pour styliser les éléments HTML. Il permet de définir la présentation et le style visuel des pages web, en séparant la structure du contenu de l'apparence visuelle. CSS offre un moyen puissant et flexible pour contrôler la mise en forme des éléments sur une page web, ce qui facilite la création d'interfaces web attrayantes et cohérentes.

Avantages du CSS :

1. Flexibilité : Avec CSS, vous avez un contrôle précis sur l'apparence de chaque élément de votre site web. Des dimensions aux couleurs, en passant par les marges et les polices, vous pouvez ajuster chaque détail selon vos besoins.
2. Facilité de Maintenance : Si vous souhaitez modifier l'apparence globale de votre site, vous pouvez le faire en modifiant simplement votre fichier CSS. Cela évite de réditer chaque page individuellement.
3. Effet Cascade : L'aspect "en cascade" de CSS signifie que les styles peuvent être hérités et modifiés en fonction de la hiérarchie de l'élément. Cela vous permet d'appliquer des styles de manière progressive, en écrivant des règles spécifiques pour des éléments spécifiques tout en conservant une cohérence globale.
4. Performance Améliorée : En séparant la mise en forme du contenu, les pages web chargent plus rapidement car les fichiers CSS sont généralement plus légers que le contenu HTML.

JavaScript : est un langage de programmation principalement utilisé côté client dans les navigateurs web pour rendre les pages interactives. Il peut être utilisé pour créer des animations, manipuler le contenu en temps réel et interagir avec les utilisateurs.

Avantages du JavaScript : 

1. Interactivité : JavaScript permet d'ajouter des interactions en temps réel à vos pages web. Vous pouvez créer des animations, des transitions fluides et des mises à jour de contenu sans avoir à recharger la page.
2. Polyvalence et Compatibilité : JavaScript est pris en charge par tous les navigateurs web modernes, ce qui en fait un langage polyvalent pour le développement web. JavaScript peut également être utilisé dans divers environnements, comme le développement côté serveur avec Node.js.
3. Écosystème Riche et Bibliothèques : JavaScript dispose d'un vaste écosystème de bibliothèques et de frameworks tels que React, Angular et Vue.js, qui simplifient et accélèrent le développement web. Ces outils fournissent des composants pré-construits, des abstractions et des utilitaires, permettant aux développeurs de créer des applications complexes de manière plus efficace.

Frameworks Frontaux

Les frameworks frontaux ou dorsaux ont révolutionné la manière dont les applications web sont développées. En fait, ils simplifient le processus de création en offrant des structures prédéfinies, des composants réutilisables et des fonctionnalités avancées afin de faciliter la vie des développeurs web et rendre leur concentration centrée plutôt sur le développement des composants métiers.

Un framework est toujours associé à un langage de programmation. Des frameworks tels que React, Angular et Vue.js fournissent des bibliothèques de composants et des structures pour simplifier le développement d'interfaces utilisateur interactives. Ils fournissent une structure préétablie et des composants réutilisables qui facilitent la création de pages web.

React : est une bibliothèque JavaScript, développé par Facebook, pour créer des interfaces utilisateurs. C’est l'un des frameworks front-end les plus populaires. Il se concentre sur la construction d'interfaces utilisateur réactives et modulaires. Sa structure de composants permet aux développeurs de diviser l'interface en parties réutilisables, facilitant ainsi la maintenance  et la mise à jour de l'interface.

React est utilisé pour développer une variété d'applications, allant des sites web interactifs aux applications mobiles. Il peut être utilisé en combinaison avec d'autres bibliothèques et cadres, tels que Redux pour la gestion de l'état ou React Native pour le développement d'applications mobiles multiplateformes.

Avantages du React :

1. Réutilisabilité : Les composants réutilisables permettent de créer des interfaces cohérentes et de gagner du temps en évitant de réécrire des éléments similaires.
2. Modularité : La structure modulaire de React facilite la collaboration entre les membres de l'équipe et le développement d'applications complexes.
3. Large Communauté et Écosystème : React est soutenu par une grande communauté de développeurs et propose une multitude de bibliothèques tierces, d'outils et d'extensions pour faciliter le développement.
4. Réactivité : Grâce à la gestion de l'état et à la mise à jour réactive de l'interface, les applications React offrent une expérience utilisateur fluide et interactive.

Angular : Angular, développé par Google, est un framework front-end complet qui propose une approche complète pour la création d'applications web interactives et dynamiques. Grâce à sa structure robuste et à ses fonctionnalités étendues, Angular permet aux développeurs de construire des applications de toute envergure, allant des simples sites web aux applications d'entreprise complexes.

Avantages d'Angular :

1. Complet et Modulaire : Angular est un framework complet avec une architecture prête à l'emploi pour le développement d'applications web de toute envergure. Sa structure modulaire facilite la gestion des fonctionnalités complexes.
2. Performance : Grâce à l'architecture du framework et à son système de détection des changements, Angular offre des performances optimales, même pour les applications complexes.
3. Large Écosystème : L'écosystème d'Angular comprend des bibliothèques, des outils et des modules qui simplifient le développement. Parmi eux, Angular CLI (Command Line Interface) permet de générer, tester et déployer des applications de manière rapide et cohérente.
4. Tests Facilités : Angular est conçu avec les tests à l'esprit. Les composants et services sont faciles à tester, ce qui assure une meilleure qualité du code.
5. Compatibilité : Angular prend en charge les navigateurs modernes et garantit des applications réactives sur différentes plates-formes.

Vue.js : est un framework JavaScript qui combine la simplicité d'une bibliothèque avec la complexité d'un framework. Il adopte une approche permettant aux développeurs d'intégrer le framework de manière progressive dans leurs projets. Comme d'autres frameworks, Vue.js se base sur le concept de composants réutilisables. Cela facilite la création d'interfaces modulaires et la réutilisation de code.

Avantages de Vue.js :

1. Flexibilité : Grâce à son approche progressive, Vue.js est adapté à une variété de projets, qu'ils soient petits ou grands. Il peut être utiliser pour créer des éléments d'interface interactifs ou pour développer des applications complètes.
2. Facilité d'Apprentissage : La syntaxe simple et intuitive de Vue.js en fait un choix idéal pour les débutants en développement front-end.
3. Taille Légère : Vue.js a une empreinte légère, ce qui signifie que le poids ajouté à votre application est minime.
4. Écosystème : Bien que plus petit que celui de certains autres frameworks, l'écosystème de Vue.js propose tout de même une gamme de bibliothèques et d'outils qui facilitent le développement.

Langages Dorsaux :

Dans une application web, les langages dorsaux sont utilisés pour gérer les opérations en arrière-plan d'un site web. Ils interagissent avec les bases de données pour stocker et récupérer des informations et gèrent des opérations complexes et essentielles pour le bon fonctionnement de l’application.

Parmi les langages dorsaux les plus populaires, on trouve PHP, Python, Ruby, Java et Node.js. PHP est largement considéré comme le langage dorsal le plus utilisé dans le monde du développement web. Il s’agit d’un langage de script côté serveur utilisé pour créer des pages web dynamiques, et il est à l’origine de la plupart des sites web les plus populaires au monde.

PHP : Un code PHP s'exécute côté serveur, avant que le contenu généré ne soit envoyé au navigateur de l'utilisateur. En raison de sa simplicité, de sa flexibilité et de sa large adoption, php est l'un des langages les plus populaires pour le développement web. Il prend en charge diverses bases de données, protocoles réseau et formats de données. De plus, ce langage est compatible avec la plupart des serveurs web, des systèmes d'exploitation, ce qui facilite son déploiement sur diverses plateformes.

Il existe de nombreuses bibliothèques et frameworks PHP qui simplifient le développement en fournissant des solutions préconstruites pour des tâches courantes, telles que la manipulation de bases de données, la gestion des sessions et la création d'API.

Python  : est un langage de programmation polyvalent et populaire. Bien qu'il soit souvent associé à des domaines tels que la science des données et l'automatisation, Python s'est imposé pour la création d'applications web modernes et performantes.

Principalement le Python est caractérisé par : 

1. Simplicité et lisibilité : Python est reconnu pour sa syntaxe simple et lisible, ce qui facilite le développement, la maintenance et la collaboration sur des projets web.
2. Large écosystème : Python bénéficie d'une vaste bibliothèque standard ainsi que de nombreux frameworks et bibliothèques tiers spécialement conçus pour le développement web.
3. Frameworks web populaires : Plusieurs frameworks web Python tels que Django, Flask et FastAPI proposent des abstractions et des outils pour simplifier le processus de développement.
4. Intégration aisée : Python peut être intégré à d'autres langages et technologies, facilitant la collaboration entre différentes parties d'une application.

Java est un langage de programmation polyvalent et puissant. Bien qu'il soit plus fréquemment utilisé pour le développement d'applications dorsales, Java offre également des solutions puissantes pour le développement web.  

Plusieurs caractéristiques marquent ce langage :

1. Plateforme indépendante : Java repose sur le principe de "Write Once, Run Anywhere" (WORA), ce qui signifie que le code Java peut être exécuté sur différentes plates-formes sans nécessiter de modifications significatives.
2. Orienté objet : Java est un langage orienté objet, ce qui permet de créer des applications modulaires, réutilisables et bien structurées.
3. Vaste écosystème : Java bénéficie d'une riche bibliothèque standard ainsi que d'une multitude de frameworks, d'outils et de bibliothèques tierces qui facilitent le développement web.
4. Sécurité : Java est réputé par sa sécurité intégrée, ce qui a fait Java un choix populaire pour les applications qui nécessitent des niveaux de sécurité élevés.

Introduction à l’écoconception numérique

Le secteur du numérique a un impact environnemental très élevé :

• En 2020, il représentait 2,1% à 3,9% des émissions mondiales de gaz à effet de serre mondiales. Les projections de plusieurs études prévoient l'augmentation de ce chiffre dans les années à venir.
• Outre les émissions de Gaz à Effet de Serre dont on parle beaucoup, les impacts sont massifs sur la consommation de ressources (entre autres les métaux), d’eau, et d’énergie, lors de la phase de fabrication (Empreinte environnementale du numérique mondial).

La prise de conscience concernant l'impact environnemental du numérique est devenue une préoccupation primordiale vers un avenir plus durable. Afin de relever ce défi, un grand nombre d'entreprises appliquent des approches du numérique responsable et l'éco-conception afin d'optimiser l'empreinte écologique de leurs produits numériques.

L'objectif est alors de minimiser la consommation d'énergie, de ressources et de lutter contre le gaspillage numérique tout en maintenant une excellente expérience utilisateur.

L'écoconception web est une approche visant à concevoir et à développer des sites web de manière à réduire l'impact négatif des technologies de l'information et de la communication (TIC) sur l'environnement et la société.

En intégrant des principes d'éco-conception, les sites web peuvent contribuer à préserver l'environnement en utilisant leur empreinte écologique globale. Cette approche responsable vise à créer des sites web durables qui fournissent une expérience utilisateur de qualité tout en respectant les enjeux environnementaux. L'éco-conception web joue ainsi un rôle crucial dans la transition vers un Internet plus respectueux de notre planète.

Principes Fondamentaux de l'Écoconception Numérique

1. Des Fonctionnalités Simplifiées pour un Impact Réduit : L'écoconception commence dès la phase de conception. La première étape consiste à revoir les fonctionnalités envisagées avec un regard minimaliste. En simplifiant les besoins et en se concentrant sur l'essentiel, nous réduisons la complexité du code et les ressources nécessaires. Par exemple, opter pour des images fixes plutôt que des diaporamas, ou encore privilégier des icônes génériques au lieu de photos de profil, permet de rationaliser l'utilisation de l'application.
2. Un Design Épuré pour une Navigation Légère : Le design de l'interface joue un rôle majeur dans l'écoconception. Une approche minimaliste est essentielle. Par exemple, en utilisant un nombre limité de typographies et en favorisant les illustrations vectorielles (SVG) plutôt que les images traditionnelles, l'impact environnemental peut être considérablement réduit. En optimisant les éléments visuels, nous créons une expérience fluide et agréable pour les utilisateurs.
3. Intégration Maîtrisée pour une Efficacité Maximale : La qualité de l'intégration des maquettes graphiques influence directement l'empreinte environnementale. L'adoption d'une approche sur mesure, en opposition à l'utilisation de thèmes prédéfinis, contribue à la réduction du gaspillage de ressources. En optimisant l'intégration, nous minimisons les redondances et optimisons le rendement énergétique de l'application.
4. Développement Adapté aux Besoins Réels : L'écoconception nous encourage à évaluer chaque ajout avec discernement. L'utilisation prudente de plugins et d'extensions, particulièrement dans les systèmes de gestion de contenu (CMS), garantit une utilisation efficiente des ressources. Le développement spécifique aux besoins du projet évite le surplus inutile de fonctionnalités, optimisant ainsi la performance globale de l'application.
5. Contenus Compressés et Chargement Optimisé : La gestion des contenus revêt une importance capitale. Optimiser les fichiers, en comprimant les images pour réduire leur poids, permet de minimiser la consommation de ressources. L'utilisation du chargement différé (Lazy load) pour les images et la suppression du lancement automatique des vidéos contribuent à une expérience utilisateur fluide tout en réduisant la charge sur les serveurs.
6. Choix d'Hébergement Raisonné : Le choix d'un hébergeur responsable est un élément clé de l'écoconception. Opter pour des hébergeurs utilisant des énergies renouvelables est un pas dans la bonne direction, mais l'efficacité énergétique du datacenter, la gestion des déchets électroniques et la configuration des serveurs sont également cruciales. L'objectif est de créer un équilibre entre la performance technique et l'impact environnemental.
7. Performance Améliorée : Plus Qu'une Simple Écoconception : La démarche d'écoconception a des effets bénéfiques qui transcendent le simple respect de l'environnement. L'optimisation des performances, résultant de choix éclairés, améliore l'expérience utilisateur en réduisant les temps de chargement. Cela se traduit par une navigation fluide et rapide, favorisant la satisfaction des utilisateurs et pouvant même influencer positivement le classement dans les moteurs de recherche.

L'écoconception pour les applications web repose sur un ensemble de principes fondamentaux visant à créer des solutions technologiques respectueuses de l'environnement tout en offrant des expériences utilisateur optimales. 

Principes clés de l'écoconception pour le développement Mobile

Principe 1 : Conception Minimale et Pertinente

Le premier principe de l'écoconception consiste à adopter une approche minimale et pertinente dans la conception des applications mobiles. Il s'agit de créer des fonctionnalités essentielles qui répondent directement aux besoins des utilisateurs, éliminant ainsi les éléments superflus qui peuvent engendrer une consommation excessive de ressources. Cette approche favorise une expérience fluide tout en réduisant la complexité du code, contribuant ainsi à une utilisation plus économe en énergie.

Principe 2 : Optimisation des Ressources Multimédias

Le deuxième principe met l'accent sur l'optimisation des ressources multimédias au sein des applications mobiles. Cela implique l'utilisation de formats de fichiers compressés pour les images, les vidéos et les fichiers audio, ainsi que la réduction des résolutions non essentielles. En intégrant ces pratiques, les développeurs peuvent minimiser la consommation de bande passante et d'énergie, offrant ainsi des expériences visuelles de haute qualité tout en préservant l'efficacité énergétique.

Principe 3 : Utilisation de Composants Économes en Énergie

Le troisième principe met l'accent sur le choix judicieux des composants logiciels et matériels pour optimiser l'efficacité énergétique des applications mobiles. L'utilisation de bibliothèques et de frameworks optimisés ainsi que la mise en œuvre de techniques de gestion de la batterie contribuent à prolonger l'autonomie des appareils tout en réduisant la consommation d'énergie.

Principe 4 : Gestion Intelligente de la Consommation d'Énergie

Le quatrième principe se concentre sur la gestion intelligente de la consommation d'énergie au sein des applications mobiles. Cela implique la mise en veille des fonctionnalités non utilisées, la réduction de la fréquence de rafraîchissement et l'optimisation des requêtes réseau. En adoptant ces stratégies, les applications peuvent offrir une durée de vie de batterie prolongée tout en minimisant leur impact environnemental.

Principe 5 : Analyse de l'Empreinte Carbone et de l'Impact Écologique

Le cinquième principe encourage une évaluation continue de l'empreinte carbone et de l'impact écologique des applications mobiles. L'utilisation d'outils d'analyse permet de mesurer la consommation d'énergie, l'utilisation des ressources matérielles et les émissions de gaz à effet de serre. Cette évaluation guide l'optimisation continue et la réduction de l'impact environnemental global.

source : https://www.greenit.fr/

Les bonnes pratiques de l'écoconception web

1. Optimisation des ressources : Réduisez la taille des images en utilisant des formats plus légers comme le JPEG, optimisez le code CSS et JavaScript pour éliminer les espaces inutiles, et compressez les fichiers lorsque c'est possible. Utilisez des outils d'optimisation automatique pour faciliter ce processus.

2. Minimisation des requêtes : Réduisez le nombre total de requêtes en combinant les fichiers CSS et JavaScript quand c'est possible. Utilisez des méthodes de mise en cache pour stocker temporairement les fichiers sur les appareils des utilisateurs, ce qui réduit la nécessité de les télécharger à chaque visite.

3. Choix d'hébergement durable : Sélectionnez un hébergeur web qui utilise des sources d'énergie renouvelables ou qui est engagé dans des pratiques de réduction de l'empreinte carbone. Les centres de données alimentés par des énergies renouvelables sont plus respectueux de l'environnement.

4. Conception réactive : Adoptez une conception réactive pour que votre site s'adapte automatiquement à différentes tailles d'écran. Cela évite la nécessité de charger différentes versions du site pour différents appareils, ce qui économise de l'énergie.

5. Simplicité du design : Priorisez un design minimaliste et épuré. Moins d'éléments graphiques et de fonctionnalités complexes signifient moins de ressources nécessaires pour charger et afficher le site.

6. Optimisation du code : Écrivez un code propre et bien structuré pour réduire le temps de traitement requis par les navigateurs. Évitez les redondances et optimisez les boucles et les fonctions.

7. Réduction des scripts et des plugins : Utilisez uniquement les scripts et les plugins nécessaires. Chaque script ajouté au site ajoute un surcroît de traitement côté client et peut augmenter le temps de chargement.

8. Analyse de l'empreinte environnementale : Utilisez des outils pour mesurer la consommation d'énergie et les performances de votre site. Identifiez les domaines où des améliorations peuvent être apportées pour réduire davantage l'impact environnemental.

9. Compression des données : Utilisez la compression GZIP pour réduire la taille des fichiers HTML, CSS et JavaScript envoyés du serveur au navigateur. Cela réduit le temps de chargement et la consommation de bande passante.

10. Utilisation de polices légères : Optez pour des polices web légères et populaires qui se chargent rapidement. Évitez d'utiliser trop de polices différentes, car cela peut ralentir le chargement.

11. Gestion efficace des cookies : Informez les utilisateurs de l'utilisation des cookies sur votre site et obtenez leur consentement. Évitez d'utiliser des cookies excessifs ou non essentiels qui peuvent ralentir le chargement des pages.

12. Économie d'énergie du côté client : Encouragez des pratiques telles que la mise en veille automatique de l'écran après une période d'inactivité ou la désactivation automatique de la lecture vidéo lorsque l'utilisateur ne regarde pas activement.

En adoptant ces bonnes pratiques dans la conception et le développement de sites web, vous pouvez contribuer à réduire l'empreinte environnementale de votre présence en ligne tout en offrant une expérience utilisateur de qualité.

0. Environnement de Développement : Guide Complet

Pour devenir développeur web, votre meilleur ami sera votre Éditeur de Code (IDE). Nous allons installer et configurer Visual Studio Code (VS Code), la référence mondiale utilisée par les professionnels de Google, Facebook et Microsoft.

Pourquoi VS Code ?

• Gratuit et Open Source.
• Intelligent : Il complète votre code (autocomplétion).
• Personnalisable : Des milliers d'extensions disponibles.

🔹 Étape 1 : Téléchargement et Installation

1. Allez sur le site officiel : code.visualstudio.com.
2. Cliquez sur le gros bouton bleu "Download for Windows" (ou Mac/Linux selon votre cas).
3. Une fois le fichier téléchargé (ex: VSCodeUserSetup.exe), double-cliquez dessus.
4. Suivez l'installateur (Acceptez les conditions -> Suivant -> Suivant).
5. S Astuce : Cochez la case "Ajouter l'action 'Ouvrir avec Code' au menu contextuel de fichier/dossier". C'est très pratique !
   
   
6. Cliquez sur Installer puis Terminer.

🔹 Étape 2 : Préparer son espace de travail

Un développeur ne laisse pas ses fichiers en vrac sur le bureau ! 🧹

1. Créez un dossier sur votre bureau nommé MonProjetWeb.
2. Ouvrez VS Code.
3. Allez dans File (Fichier) > Open Folder (Ouvrir le dossier).
4. Sélectionnez votre dossier MonProjetWeb.

✅ Vous verrez le nom de votre dossier apparaître dans la barre latérale gauche (l'Explorateur).

🔹 Étape 3 : Créer sa première page

1. Dans la barre latérale gauche de VS Code, survolez le nom de votre dossier.
2. Cliquez sur la petite icône "New File" (Nouveau fichier) (un fichier avec un +).
3. Nommez le fichier : index.html (tout en minuscules !).
4. Appuyez sur Entrée. Le fichier s'ouvre au centre.

🔹 Étape 4 : L'Astuce Magique (Emmet) ✨

VS Code possède un super-pouvoir. Au lieu de taper tout le code de base...

1. Cliquez dans votre fichier vide index.html.
2. Tapez juste un point d'exclamation : !
3. Appuyez sur la touche Tab (ou Entrée).

🚀 BOUM ! VS Code écrit automatiquement toute la structure de base (<html>, <head>, <body>) pour vous. C'est ça, la puissance d'un éditeur de code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

🔹 Étape 5 : Voir le résultat (Le cycle de vie)

Le HTML ne se "compile" pas. Le cycle est simple :

Pour ouvrir votre page : allez dans votre dossier MonProjetWeb via l'explorateur de fichiers Windows, et double-cliquez sur index.html. Votre navigateur par défaut l'affichera.

1. Introduction

HTML, acronyme de HyperText Markup Language (Langage de Balisage Hypertexte) est la base de tout site web. C'est une forme de langage informatique mais il ne s'agit pas d'un langage de programmation.

HTML est un langage de balisage standard qui définit la structure et le contenu des pages web en utilisant des balises qui précise le type de l'élément intégrer dans la page et comment il doit être reconnu par le navigateur : en tant que paragraphe, liste, en-tête, lien, image, lecteur multimédia, formulaire ou plusieurs autres formes. En plus de la définition de la structure et la hiérarchie de la page web, l'utilisation des balises permet de définir la sémantique du contenu d'une page web ce qui facilite l'accessibilité et l'inde❓tion des données par les moteurs de recherche.

Au fur et à mesure que nous plongeons dans le monde de HTML, nous découvrirons comment ces balises fonctionnent et comment elles façonnent le contenu d'une page web.

Bien que le HTML soit la base de la structure et du contenu, il peut être encore plus ergonomique et interactif lorsqu'il est combiné avec d'autres langages tel que CSS (Cascading Style Sheets) pour styliser les pages HTML en contrôlant les couleurs, les polices, les marges et d'autres aspects visuels.

L'association du HTML avec CSS découle d'une idée fondamentale : la séparation du contenu et de la présentation. Cette approche de dissociation permet aux concepteurs et aux développeurs de travailler de manière plus efficace et organisée. En modifiant simplement les règles CSS, vous pouvez donner un aspect complètement différent à une page HTML sans altérer son contenu.

En plus du CSS, on peut ajouter de l'interactivité aux pages HTML en associant le langage JavaScript au langage HTML qui injecte de la vie dans les éléments HTML. Cette association tripartite crée une synergie puissante qui transforme les pages web basiques en des pages flexibles, ergonomiques, attrayantes et interactives.

Pour bien manier ces trois langages, HTML, CSS et JavaScript, l'utilisation d'un éditeur de texte spécifique s'avère indispensable pour garantir une structure soignée du code de vos pages HTML.

Il existe une variété d'éditeurs de texte (gratuits et payants) disponibles pour coder en HTML, CSS et JavaScript, chacun offrant des fonctionnalités et des avantages spécifiques. Nous citons par exemple : Visual Studio Code (VS Code), NotePad++, Sublime Text, Atom, et plusieurs autres éditeurs.

2. Concepts de base

Dans cette section, nous développons les concepts qui servent de base à la création de pages Web. Comprendre ces concepts vous permettra de développer une solide compréhension du langage HTML et de commencer à créer des pages Web simples et structurées.

HTML est constitué d'une large gamme d'éléments ou de balises qui permettent d'englober ou de baliser différentes sections du contenu, afin de les présenter ou de les faire agir d'une manière spécifique. Un navigateur n'affiche pas ces balises HTML, mais les utilise pour déterminer comment afficher le document.

Les balises

Une balise est une suite de mots sans distinction entre majuscules et minuscules qui s"écrivent entre chevrons < et >. Les balises dénotent la nature du texte qu'elles englobent, et elles offrent au navigateur la compréhension nécessaire pour l'affichage adéquat aux visiteurs d'un site web.

Il existe deux types de balises :

Les balises en paire (balises avec contenu)

Composées d'une balise ouvrante et d'une balise fermante. Une balise ouvrante est associée à une balise fermante.

<p> Mon premier paragraphe</p>

On distingue une balise ouvrante (<p>) et une balise fermante (</p>). Tout ce qui se trouve en dehors de ces balises n'appartient pas au paragraphe.

Les balises orpheline (balise sans contenu)

Constituées d'une seule balise. Il n'y a qu'une balise ouvrante. Il n'est pas nécessaire de fermer cette balise. On n'utilise pas de slash (/) à la fin d'une balise orpheline, comme <img>.

<img src="banniere.png">

Les attributs

Les éléments peuvent également être dotés d'attributs, tels que :

<p id="section2">Le Madagascar est un pays Africain. </p>

Les attributs fournissent des informations additionnelles concernant l'élément, sans que ces informations n'apparaissent dans le contenu proprement dit.

Pour instaurer un attribut, il faut :

• Introduire un espace entre cet attribut et le nom de l'élément.
• Nommer l'attribut, puis ajouter un signe égal (=).
• Assigner une valeur à l'attribut, encadrée par des guillemets.

Un attribut se trouve dans la balise ouvrante d'un élément en paire ou directement dans une balise orpheline. Exemple complet avec la balise <a> :

<a href="https://www.auf.org/" title="Page d'accueil de l'AUF" target="_blank">
  Site Web de l'Agence universitaire de la Francophonie
</a>

• href : L'adresse web (URL) vers laquelle le lien dirige.
• title : Information additionnelle (bulle d'aide au survol).
• target : Contexte de navigation (exemple : _blank pour un nouvel onglet).

Les attributs booléens

Les attributs booléens sont des attributs dépourvus de valeur définie. Ils ne possèdent qu'une seule valeur (vrai/activé si présent).

<input type="text" disabled="disabled" />

<input type="text" disabled />

Les guillemets

Les valeurs des attributs sont toutes encloses entre des guillemets doubles (" ") ou des guillemets simples (' '). Le choix est une question de style, mais soyez cohérent.

<a href="http://www.exemple.com">Un lien vers mon exemple.</a>

<a href='http://www.e❓mple.com'>Un lien avec simples quotes</a>

3. Créer Votre Premier Exemple HTML

Premiers Pas dans le Code

Pour commencer le voyage passionnant dans le monde du HTML, nous allons explorer les étapes initiales pour créer votre tout premier exemple HTML.

🔹 Étape 1 : Préparation de l'Environnement

Avant de nous lancer, assurez-vous d'avoir un éditeur de texte prêt à être utilisé. Ouvrez votre éditeur et préparez-vous à créer votre première page HTML.

🔹 Étape 2 : Rédaction du Code HTML de Base

Commencez par créer un nouveau fichier HTML dans votre éditeur de texte. Ce fichier comporte l'extension .html, (par exemple, mon-premier-exemple.html). Ensuite, saisissez les balises de base nécessaires pour structurer votre page.

<!DOCTYPE html>
<html>
  <head>
    <title>Ma première page</title>
  </head>
  <body>
    <h1>Mon titre</h1>
    <p>Bonjour le monde ! Ceci est ma première page.</p>
  </body>
</html>

🔹 Étape 3 : Visualisation de la page

Ouvrez le fichier créé dans votre navigateur Web. Vous verrez votre première page HTML avec le contenu ajouté.

Dans les sections à venir, nous plongerons plus profondément dans les balises, les attributs et les concepts qui forment la base du HTML. Préparez-vous à explorer davantage et à créer des pages Web de plus en plus dynamiques et captivantes.

4. Anatomie d'un document HTML

Structure d'un document HTML

Cliquez sur les icones + pour découvrir le rôle de chaque élément.

Commentaires

En HTML, tout comme dans la plupart des langages de programmation, il existe un mécanisme permettant d'insérer des commentaires dans le code. Les commentaires sont ignorés par le navigateur et restent invisibles pour l'utilisateur.

L'objectif des commentaires est de fournir des annotations dans le code pour expliquer son fonctionnement, décrire les diverses parties du code, etc. Cela peut être extrêmement utile pour se rappeler de l'intention du code après un certain temps ou lorsque le code est partagé avec quelqu'un d'autre pour collaboration.

Pour convertir une portion de contenu dans votre fichier HTML en commentaire, vous devez l'entourer des marqueurs spéciaux <!-- et -->, comme ceci :

<!-- Ceci est un commentaire dans HTML ! -->
<p>Ceci est du code visible.</p>

5. L'En-tête et les Métadonnées

L'En-tête <head>

L'en-tête <head> dans un document HTML représente une section du document qui n'est pas visible dans le navigateur lors du chargement de la page. Situé entre les balises <html> et <body>, l'élément <head> agit comme un panneau de contrôle, fournissant des instructions précieuses au navigateur et aux moteurs de recherche.

Cet élément contient notamment :

• Le titre de la page <title> : apparaît dans l'onglet du navigateur, offrant aux utilisateurs un aperçu de ce qu'ils peuvent attendre de votre page. Il est également utilisé par les moteurs de recherche pour afficher des résultats pertinents.
• Des liens vers des feuilles de styles CSS : pour appliquer des styles et une mise en forme au contenu HTML.
• Des liens externes : vers d'autres ressources importantes (scripts, polices, etc.).
• Balises <meta> : offrent des informations supplémentaires sur la page, comme une description concise ou des mots-clés pertinents.

<head>
  <!-- Auteur de la page: D-CLIC -->
  <meta name="author" content="D-CLIC">
  <title>Ma page de test</title>
  <!-- Lien vers une feuille de styles CSS  -->
  <link rel="stylesheet" href="styles.css">
</head>

La balise <meta>

L'en-tête peut englober un assortiment varié de balises <meta>. Cette balise a pour rôle de définir des métadonnées, c'est-à-dire des informations destinées au navigateur et aux moteurs de recherche. Ces informations ne seront pas affichées à l'écran.

La balise <meta> peut contenir des indications telles que :

• 🔑 Mots-clés : liste de mots-clés pertinents pour l'inde❓tion de la page.
• 📝 Description : courte description, souvent affichée dans les résultats de Google.
• 👤 Auteur : nom de l'auteur pour l'identification.
• 🔣 Encodage (Charset) : spécifie l'encodage (ex: UTF-8) pour s'assurer que les accents et symboles s'affichent correctement.
• 📝 Viewport : configure l'affichage sur mobile (indispensable pour le responsive design).

<!DOCTYPE html>
<html>
<head>
  <!-- Mots-clés: HTML, CSS, JavaScript -->
  <meta name="keywords" content="HTML, CSS, JavaScript">

  <!-- Description -->
  <meta name="description" content="Initiation en HTML">

  <!-- Auteur -->
  <meta name="author" content="D-CLIC">

  <!-- Encodage -->
  <meta charset="utf-8">

  <!-- Viewport Mobile -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- Contenu visible ici -->
</body>
</html>

6. Organiser votre texte

Les bases : Titres et Paragraphes

La plupart des contenus textuels incluent des titres et des paragraphes, qu'il s'agisse de romans, de journaux, de manuels scolaires, de magazines, et autres.

Les Paragraphes

En HTML, les paragraphes doivent être encapsulés dans un élément <p>, de la manière suivante :

<p>Je suis un paragraphe, Ah oui je le suis.</p>

Les Titres

Chaque titre doit être inclus dans un élément de titre. Il existe 6 niveaux de titres disponibles, de <h1> à <h6>.

Chaque élément représente un niveau hiérarchique différent : <h1> est le titre principal, <h2> un sous-titre, et ainsi de suite.

<h1>Je suis un titre principal (niveau 1)</h1>
<h2>Je suis un sous-titre (niveau 2)</h2>
<h6>Je suis le plus petit titre (niveau 6)</h6>

Exemple Structuré

Voici un exemple complet montrant comment structurer un document avec différents niveaux de titres et des paragraphes.

<h1>Initiation au développement Web</h1>
<p>Bienvenue dans le cours de développement web !!!!</p>
<p>Vous allez apprendre à façonner des sites web...</p>

<h2>Introduction au web</h2>
<h2>Architecture du web</h2>

<h3>Cas du web statique</h3>
<h3>Cas du web dynamique</h3>

<h2>Le langage HTML</h2>
<p>Préparez-vous à explorer le langage HTML.</p>

7. Les hyperliens

Introduction

Les hyperliens constituent l'une des innovations les plus captivantes offertes par le Web. Ils permettent de relier nos documents à d'autres documents de notre choix et de rendre des applications accessibles via une simple adresse web.

Pratiquement tout contenu en ligne peut être transformé en un lien, de telle manière que lorsqu'il est cliqué, il dirige le navigateur vers une autre adresse web.

Anatomie d'un lien

Pour créer un lien, on utilise la balise <a> (pour "Anchor") avec l'attribut href (Hypertext Reference).

<p>
  Je crée un lien vers
  <a href="https://www.auf.org">la page d'accueil de l'AUF</a>.
</p>

L'attribut "Title"

L'attribut title ajoute une info-bulle au survol de la souris. C'est utile pour donner plus de contexte avant le clic.

<a href="..." title="Les évènements, actualités...">Lien</a>

Image comme lien

On peut transformer une image en lien en l'entourant des balises <a>.

<a href="https://www.auf.org">
  <img src="auf.png" alt="logo AUF" />
</a>

Chemins d'Accès

Lorsque vous liez des pages de votre propre site, il faut spécifier le bon chemin :

• Même dossier : href="page2.html"
• Dossier parent : href="../page2.html" (Remontez d'un niveau)
• Sous-dossier : href="contenu/page2.html"

Les Ancres (Liens internes à la page)

Une ancre permet de cibler une section spécifique de la page, idéal pour les longs documents.

1. Identifiez la cible avec un ID unique : <h2 id="section1">Section 1</h2>
2. Créez le lien avec un dièse (#) : <a href="#section1">Aller à la Section 1</a>

<h2 id="chapitre1">Chapitre 1</h2>
<p>...</p>
<a href="#chapitre1">Remonter au Chapitre 1</a>

Liens Spéciaux

Téléchargement

L'attribut download force le téléchargement du fichier au lieu de l'ouvrir dans le navigateur.

<a href="rapport.pdf" download>Télécharger (PDF)</a>

Courriel (mailto)

Crée des liens pour ouvrir le logiciel de messagerie de l'utilisateur avec mailto:.

<a href="mailto:formation@auf.org?subject=Formation">
  Envoyer un courriel
</a>

8. Listes, Citations et Sémantique

Les Listes HTML

HTML prend en charge plusieurs types de listes pour organiser et structurer le contenu d'une page web. Chaque type a un usage spécifique.

1. Listes Ordonnées <ol>

Utilisées pour une suite d'éléments avec un ordre précis (comme des étapes).

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

2. Listes Non-ordonnées <ul>

Utilisées pour des collections d'éléments sans ordre particulier (comme une liste de courses).

<ul>
    <li>Informatique</li>
    <li>Mécanique</li>
    <li>Électrique</li>
</ul>

3. Listes Descriptives <dl>

Pour associer des termes <dt> à leur définition <dd>.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language.</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets.</dd>
</dl>

Citations

HTML permet de distinguer sémantiquement les citations.

Citations en Bloc (Blockquote)

Pour les longues citations provenant d'une source externe. Le navigateur les indente généralement.

<blockquote cite="...">
  <p>L'Élément HTML blockquote indique une citation étendue.</p>
</blockquote>

Citations en Ligne (Inline Quote)

Pour de courtes citations au fil du texte, utilisez <q>. Le navigateur ajoute souvent des guillemets automatiquement.

<p>
  L'élément <q>citation courte</q> est pratique.
</p>

Balisage Avancé

Abréviations <abbr>

Fournit la définition complète d'un sigle au survol de la souris.

<p>J'apprends le <abbr title="HyperText Markup Language">HTML</abbr>.</p>

Contact <address>

Définit les informations de contact de l'auteur ou du propriétaire du document.

<address>
  123, Rue de l'Exemple<br>
  Ville Imaginaire<br>
  <a href="tel:+1234567890">123-456-7890</a>
</address>

Dates et Heures <time>

Permet aux machines (et moteurs de recherche) de comprendre précisément une date.

<p>Rendez-vous le <time datetime="2023-08-21">21 août</time>.</p>

9. Images en HTML

Insérer des images dans une page HTML est essentiel pour ajouter des éléments visuels à votre contenu. Voici comment procéder en utilisant des exemples :

L'élément Image <img>

L'élément <img> est utilisé pour insérer des images dans une page HTML. Il ne nécessite pas de balise de fermeture et utilise l'attribut src pour spécifier l'URL de l'image.

<img src="chemin-vers-l-image.jpg" alt="Description de l'image">

Chemin d'accès à l'image

L'attribut src doit contenir le chemin d'accès relatif ou absolu vers l'image.

Si l'image se trouve dans le même répertoire que la page HTML, vous pouvez simplement spécifier le nom du fichier :

<img src="....png" />

Si cette image est située dans un sous-répertoire nommé "images" (ce que Google recommande), vous pouvez l'intégrer comme suit :

<img src="images/....png" />

Une autre option est d'utiliser l'URL absolue de l'image :

<img src="https://www.e❓mple.com/images/....png" />

Il est préférable de garder vos images sur le même serveur que la page HTML pour une performance optimale.

Texte alternatif (alt)

L'attribut alt fournit une description textuelle de l'image. C'est crucial pour l'accessibilité (lecteurs d'écran) et le SEO.

<img
  src="images/....jpg"
  alt="Le logo de l'ENSPD" />

Si l'image ne charge pas (ex: nom de fichier mal orthographié), le navigateur affichera le texte alternatif à la place.

Attributs additionnels

Vous pouvez spécifier les dimensions avec width et height.

<img
  src="images/francophonie.png"
  alt="Le logo officiel de l'ENSPD" 
  width="600"
  height="300" />

Titre d'images (title)

L'attribut title ajoute une info-bulle au survol de la souris.

<img
  src="images/....png"
  alt="Le logo de l'Universite de Parakou" 
  width="600"
  height="300" 
  title="Universite de Parakou" />

Légender des images avec <figure>

Pour une solution sémantique élégante, utilisez <figure> et <figcaption> au lieu de simples <div>.

<figure> 
  <img
    src="images/....png"
    alt="Le logo de l'ENSPD" 
    width="600"
    height="300" />
  <figcaption> L'ENSPD. </figcaption> 
</figure>

L'élément <figure> constitue une unité de contenu indépendante (images, code, audio...) et améliore l'accessibilité.

10. Les Tableaux en HTML

HTML met à disposition différents éléments accompagnés d'attributs spécifiques pour exposer des informations sous forme de tableaux (emplois de temps, données financières, etc.).

Les tableaux offrent l'avantage d'une grande clarté. Un tableau bien élaboré doit aussi être accessible pour les utilisateurs ayant des limitations visuelles.

1. Créer un premier tableau

Le conteneur principal est <table>. La plus petite unité est la cellule <td> (data), organisée en lignes <tr> (row).

<table>
  <tr>
    <td>Ligne 1, Cellule 1</td>
    <td>Ligne 1, Cellule 2</td>
  </tr>
  <tr>
    <td>Ligne 2, Cellule 1</td>
    <td>Ligne 2, Cellule 2</td>
  </tr>
</table>

2. Ajouter des en-têtes (<th>)

Les en-têtes (<th>) définissent la nature des données. Ils sont généralement en gras et centrés par défaut. L'attribut scope (ex: scope="col" ou scope="row") est crucial pour l'accessibilité.

<table>
  <tr>
    <th>Spécialité</th>
    <th>Cours</th>
    <th>Apprenants</th>
  </tr>
  <tr>
    <td>Informatique</td>
    <td>Python</td>
    <td>22</td>
  </tr>
</table>

3. Fusionner des cellules (rowspan, colspan)

Ces attributs permettent d'étendre une cellule sur plusieurs lignes ou colonnes.

• rowspan="2" : Fusionne verticalement sur 2 lignes.
• colspan="3" : Fusionne horizontalement sur 3 colonnes.

<table border="1">
  <tr>
    <th rowspan="2">Sites</th>
    <th colspan="2">Stats</th>
  </tr>
  <tr>
    <td>Visites</td>
    <td>Updates</td>
  </tr>
  <tr>
    <td>e❓mple.com</td>
    <td>1320</td>
    <td>5</td>
  </tr>
</table>

4. Structuration Sémantique (thead, tbody)

Pour de longs tableaux, il est recommandé de séparer l'en-tête (<thead>) du corps (<tbody>). Cela améliore la lecture par les machines et le style.

<table>
  <thead> 
     <tr> 
       <th>Référence</th> 
       <th>Nom</th> 
     </tr> 
  </thead> 
  <tbody> 
      <tr> 
        <td>A1-521</td> 
        <td>Produit A</td> 
      </tr> 
  </tbody> 
</table>

11. Examen Final

Testez vos connaissances sur le HTML !

1. À quoi sert CSS ?

Le HTML, bien qu'il soit la base fondamentale d'une page web, ne suffit pas à lui seul pour offrir aux développeurs web de réaliser un contenu visuel attrayant et ergonomique. Le HTML se concentre sur la structure et la sémantique du contenu d'une page. Il définit les éléments tels que les titres, les paragraphes, les images et les liens, mais il n'inclut pas les détails de l'apparence visuelle de ces éléments.

L'association du HTML et du CSS crée une synergie puissante qui transforme une simple collection de balises en une présentation visuelle spectaculaire, raffinée et conviviale. Ainsi, cette association du HTML et du CSS garantit non seulement que le contenu soit présenté de manière structurée, mais qu'il soit également :

• Expressif : Le CSS permet d'exprimer la personnalité et le style de la marque à travers la présentation visuelle.
• Innovant : Le CSS offre la possibilité d'expérimenter avec des designs innovants et créatifs.
• Cohérent : Le CSS permet de maintenir une cohérence visuelle à travers toutes les pages du site en appliquant des styles réutilisables.
• Équilibré : Le CSS peut aider à maintenir un équilibre visuel entre les éléments de la page.
• Professionnel : L'application appropriée du CSS donne un aspect professionnel et soigné à la présentation, renforçant la crédibilité du site.
• Adaptatif : Grâce aux techniques de mise en page réactive, le CSS rend la présentation adaptative à différents dispositifs et tailles d'écran.

Le CSS : langage de style

Le CSS (Cascading Style Sheets), en français "Feuilles de style en cascade", joue un rôle essentiel pour donner vie aux pages web écrites en HTML et offrir aux utilisateurs une apparence bien soignée, professionnelle, mémorable et convaincante en appliquant des règles de style aux éléments HTML. En utilisant des sélecteurs et des propriétés, le CSS permet aux développeurs de spécifier des règles détaillées pour mettre en forme les différents éléments contenus dans leurs pages web.

2. Syntaxe du langage CSS

La syntaxe du CSS est la grammaire qui régit comment vous exprimez vos choix de mise en forme. Pas comme les langages de programmation, CSS n'a pas la capacité de prendre des décisions conditionnelles ou d'exécuter des instructions logiques. Il fournit, plutôt, des règles pour styliser et mettre en forme les éléments HTML.

La structure d'une règle CSS

Elle doit respecter la forme suivante :

Exigences de syntaxe

De plus la syntaxe d'une règle CSS doit respecter ces exigences :

• L'ensemble des déclarations d'une même règle est placé entre des accolades {}.
• Séparer la propriété de sa valeur par les deux points : .
• Séparer les différentes déclarations par un point-virgule ; .

Dans les sections à venir de ce cours, nous explorerons en détail les éléments fondamentaux qui composent une règle CSS.

3. Où écrit-on le CSS ?

Il existe plusieurs manières pour intégrer le code CSS dans un code HTML. Chacune offre des avantages spécifiques en fonction de la complexité de votre projet et de votre préférence en matière de maintenance. L'utilisation judicieuse de ces méthodes vous permettra de maintenir un code organisé, cohérent et facile à gérer, tout en garantissant des styles visuellement attrayants et professionnels pour vos pages web. Voici un aperçu de ces différentes méthodes :

1. Feuille de style externe (Recommandé)

Lorsque vous voulez que plusieurs pages d'un même site web arborent une allure similaire, il est avisé d'adopter un ensemble de règles commun pour avoir une cohérence visuelle entre les différentes page constituant le site. Dans cette perspective, il est pratique d'écrire ces règles une seule fois dans une feuille de style partagée par l'ensemble des pages.

Créer un fichier CSS séparé avec une extension .css vous permet de centraliser tous vos styles dans un seul fichier. En utilisant la balise <link> dans la section <head> de votre HTML, vous reliez cette feuille de style externe à votre document.

Exemple de fichier HTML :

Le fichier CSS (styles.css) :

Le lien href peut être ajusté selon l'emplacement du fichier :

2. Balise <style> dans l'en-tête HTML

Les règles CSS peuvent être rédigées directement au sein de la section <head>, en utilisant l'élément <style>. Cette méthode est idéale pour les projets de petite envergure où les styles sont limités à une seule page.

Inconvénient : Le CSS doit être reproduit sur chaque page, rendant les mises à jour fastidieuses.

3. Styles en ligne (Attribut style)

Cette méthode applique les styles directement aux éléments HTML via l'attribut style.

4. Les Sélecteurs CSS

Toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le sujet de ce sélecteur.

Catégories de sélecteurs

Les sélecteurs CSS peuvent être classés en cinq catégories :

• Sélecteurs Simples : Utilisés pour sélectionner des éléments en fonction de leur nom, de leur identifiant ou de leur classe.
• Sélecteurs Combinateurs : Utilisés pour sélectionner des éléments en fonction de leur relation avec d'autres éléments.
• Sélecteurs d'Attributs : Permettent de sélectionner des éléments en fonction de la présence d'un attribut particulier ou de sa valeur.
• Sélecteurs de Pseudo-Classe : Utilisés pour sélectionner des éléments en fonction de leur état (ex: survol) ou de leur interaction.
• Sélecteurs de Pseudo-Éléments : Permettent de styliser des parties spécifiques d'un élément (ex: première lettre, contenu avant/après).

Groupement de sélecteurs

Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste séparée par des virgules.

Au lieu d'écrire :

On peut écrire :

Attention : Si l'un des sélecteurs du groupe est invalide (ex: ..special), la règle toute entière sera ignorée par le navigateur.

Spécificité et Cascade

Dans de nombreux cas, deux sélecteurs différents peuvent cibler le même élément HTML. Le langage CSS a des règles pour déterminer quelle mise en forme appliquer en cas de conflit : la Cascade et la Spécificité.

Considérons cet exemple :

Ici, le paragraphe sera rouge car le sélecteur de classe (.special) a une spécificité plus élevée que le sélecteur de type (p).

En revanche, si la spécificité est identique, c'est l'ordre qui compte (la Cascade) :

5. Sélecteurs Simples

Sélecteur de type

Le sélecteur de type vise un élément HTML (une balise) dans votre document ; on l'appelle aussi sélecteur de balise ou d'élément.

Dans l'exemple ci-dessous, les sélecteurs span, em et strong sont utilisés.

Cela permet d'appliquer une mise en forme à chaque occurrence de <span>, <em> et <strong>.

Sélecteurs de classe

Identifiable par un point (.), le sélecteur de classe choisit tous les éléments du document auxquels cette classe a été attribuée.

Dans l'illustration ci-après, nous avons défini une classe nommée .highlight et nous l'avons associée à divers emplacements du document. Tous les éléments assortis de cette classe bénéficient d'une mise en évidence particulière.

Cibler des classes d'un élément donné

La création d'un sélecteur est possible pour cibler des éléments d'un type spécifique qui font partie d'une classe particulière.

Dans l'exemple qui suit, la classe highlight crée une mise en évidence. Cependant, cette mise en évidence diffère selon qu'elle s'applique à un élément <span> ou à un titre <h1>.

Cette distinction est établie en utilisant un sélecteur de type pour l'élément ciblé, combiné avec la classe, sans aucun espace intermédiaire.

Cette méthode limite la réutilisabilité du CSS : la règle n'est valable que pour ces éléments spécifiques.

Sélecteurs d'ID

Un sélecteur d'ID débute avec le symbole # au lieu du point. Il est important de noter qu'une ID ne peut être utilisée qu'une seule fois dans un document.

Ce sélecteur vise l'élément associé à l'ID en question ; il est possible de préfixer l'ID avec un sélecteur de type pour restreindre la cible uniquement à une correspondance précise.

Sélecteur universel

Le sélecteur universel, symbolisé par un astérisque (*), englobe l'ensemble du document.

Dans l'exemple qui suit, le sélecteur universel est employé pour éliminer les marges de tous les éléments et colorer le texte en vert.

Cibler un élément appartenant à plus d'une classe

Il est envisageable d'assigner multiples classes à un même élément. Vous pouvez cibler l'élément seulement lorsque toutes les classes sont présentes. On relie les sélecteurs de classe consécutifs sans espace.

6. Sélecteurs d'attributs

Ces sélecteurs vous donnent la capacité de choisir un élément en fonction de la présence d'un attribut spécifique (tel que href) ou en se fondant sur différentes correspondances avec la valeur d'un attribut donné.

1. Sélecteur de présence et de valeur

Dans l'exemple ci-dessous, vous pouvez observer ces sélecteurs en action :

• li[class] cible tous les éléments li possédant un attribut class. Tous les éléments sauf le premier sont visés.
• li[class="a"] cible spécifiquement les li qui ont exactement la classe 'a' et uniquement celle-ci.
• li[class~="a"] cible chaque élément li dont l'attribut class contient 'a' dans sa liste de valeurs (séparées par des espaces).

2. Sélecteurs ciblant une sous-chaîne

Ces sélecteurs fournissent une approche plus précise. Par exemple pour cibler des classes commençant par un préfixe commun.

• li[class^="a"] vise toute valeur d'attribut qui débute par 'a'.
• li[class$="a"] s'applique à toute valeur d'attribut qui se termine par 'a'.
• li[class*="a"] correspond à toute valeur d'attribut contenant 'a' quelque part.

3. Sensibilité à la casse

Pour traiter les valeurs des attributs de manière insensible à la casse (majuscules ou minuscules), ajoutez le modificateur i avant la parenthèse de fermeture ].

[class^="a" i] ciblera "a", "A", "AbBc", etc.

7. Style en fonction de la position

Nous étudions actuellement le style d'un élément qui s'adapte en fonction de sa position dans le document. De nombreux sélecteurs permettent de réaliser ce type de comportement.

1. Sélecteur d'espace (Espace descendant)

Ce sélecteur cible tous les éléments descendants de l'élément précédent, peu importe leur niveau d'imbrication. Tous les éléments correspondants seront stylisés.

2. Sélecteur de > (Enfant direct)

Ce sélecteur cible uniquement les éléments qui sont des enfants directs de l'élément précédent.

3. Sélecteur + (Frère immédiat)

Ce sélecteur cible un élément qui suit immédiatement l'élément précédent et qui partage le même parent.

4. Sélecteur ~ (Frère général)

Ce sélecteur cible tous les éléments qui partagent le même parent et qui suivent l'élément précédent.

Exercice Pratique

L'exemple ci-dessous contient deux règles de base. Pour enrichir cela, votre mission est d'introduire une nouvelle règle qui applique la couleur rouge au balisage <span> uniquement lorsqu'il est contenu à l'intérieur d'un élément <p>.

Objectif : Le span dans le paragraphe doit devenir rouge. Le span dans la liste doit rester inchangé.

8. Liste des principales propriétés

Voici les propriétés CSS les plus utilisées pour mettre en forme vos pages. Elles sont regroupées dans ce tableau pour référence rapide.

Une liste plus complète est disponible dans ce lien (MDN).

1. Introduction

JavaScript est un langage de programmation largement utilisé principalement pour le développement web, bien qu'il puisse également être utilisé dans d'autres contextes. Voici quelques points clés à retenir à propos de JavaScript :

Définition de JavaScript :

JavaScript est un langage de programmation de haut niveau, interprété et orienté objet. Il a été initialement créé pour être utilisé dans les navigateurs web pour rendre les pages interactives et dynamiques.

Utilités de JavaScript :

• Interactivité web : L'une des utilisations les plus courantes de JavaScript est d'ajouter de l'interactivité aux sites web. Il permet de créer des fonctionnalités dynamiques telles que des formulaires interactifs, des animations, des menus déroulants et des mises à jour de contenu en temps réel sans avoir à recharger la page.
• Manipulation du DOM : JavaScript peut être utilisé pour manipuler le Document Object Model (DOM), c'est-à-dire la structure représentant les éléments d'une page web. Cela permet de modifier, ajouter ou supprimer des éléments de la page de manière dynamique.
• Validation de formulaires : JavaScript peut être utilisé pour valider les données entrées dans les formulaires avant qu'elles ne soient soumises au serveur, assurant ainsi une meilleure expérience utilisateur et une gestion plus propre des données.
• Gestion d'événements : JavaScript permet de gérer les interactions de l'utilisateur avec la page en répondant à des événements tels que les clics de souris, les pressions de touches, les mouvements de souris, etc.
• Applications web : Avec l'avènement des frameworks comme React, Angular et Vue.js, JavaScript est également utilisé pour créer des applications web complexes et à grande échelle, allant au-delà des fonctionnalités de base des sites web.
• Programmation côté serveur : Avec l'utilisation de Node.js, JavaScript peut également être utilisé pour la programmation côté serveur, ce qui permet de construire des applications web côté serveur avec le même langage.
• Interfaces utilisateur : Les bibliothèques et les frameworks JavaScript permettent de créer des interfaces utilisateur élégantes et réactives, améliorant ainsi l'expérience globale de l'utilisateur.

Globalement, JavaScript est devenu un élément essentiel du développement web moderne, jouant un rôle clé dans la création d'expériences utilisateur riches et interactives.

2. Les concepts de base de JavaScript

1. Les variables

Déclaration des variables

Il existe trois manières pour déclarer une variable dans Javascript. Noter tout d’abord que Javascript est sensible à la casse.

• var : On déclare une variable, éventuellement en initialisant sa valeur.
• let : On déclare une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.
• Const : On déclare une constante nommée, dont la portée est celle du bloc courant, accessible en lecture seule.

Exemple :

var a = 10;
let monVariable = "Bob";
const pi = 3.14;

Portée de la variable

Avec var, la portée de la variable est globale ou limitée à la fonction dans laquelle elle est déclarée. Cela signifie que la variable est accessible de partout dans la fonction ou même en dehors de la fonction si elle est déclarée en dehors de toutes les fonctions.

Avec let, la portée de la variable est limitée au bloc (généralement entre des accolades {}) dans lequel elle est déclarée. Cela signifie que la variable ne sera accessible qu'à l'intérieur de ce bloc.

if (true) {
  var x = 5;
}
console.log(x); // x vaut 5

if (true) {
  let y = 5;
}
console.log(y); // ReferenceError: y is not defined

Hoisting

Les déclarations var sont soumises à une étape appelée "hoisting" (élévation). Cela signifie que même si vous déclarez une variable plus tard dans le code, elle sera "élevée" en haut de sa portée actuelle lors de l'exécution. Cela peut parfois entraîner des comportements inattendus.

Les déclarations let ne sont pas soumises à un hoisting aussi agressif. Elles sont également "élevées", mais elles ne sont pas initialisées avant leur déclaration réelle, ce qui peut éviter certaines surprises.

Exemple :

console.log(x === undefined); // donne "true"
var x = 3;

En règle générale, il est recommandé d'utiliser let (et const lorsque la valeur ne changera pas) plutôt que var dans le développement JavaScript moderne. let offre un meilleur contrôle de la portée, évite certaines erreurs courantes et est plus conforme aux bonnes pratiques en matière de programmation.

Types de données

Les variables peuvent contenir des différents types de données :

Exemple :

var message = 42 ;
message= "hello world"; // pas d’erreur ici

Exemple :

x = "La réponse est " + 42; // "La réponse est 42"
y = 42 + " est la réponse"; // "42 est la réponse"

Exemple :

"37" - 7; // 30
"37" + 7; // "377"

Exemple : Conversion de types :

/* le premier paramètre est la chaine de caractère, le deuxième paramètre est la base, ici la base 2 */
parseInt("101", 2); // 5

/* autre manière pour convertir la chaine de caractère en nombre */
+"1.1" == 1.1; // fonctionne seulement avec le + unaire

Les littéraux

Un littéral est une notation utilisée pour représenter directement des valeurs de types différents, tels que des chaînes de caractères, des nombres, des tableaux, des objets, des expressions régulières, etc. Les littéraux sont une manière concise et directe de définir des valeurs sans avoir à passer par des expressions ou des constructions plus complexes.

Les littéraux sont très utiles pour définir des valeurs de manière claire et concise, et ils sont largement utilisés dans le code JavaScript pour initialiser des variables, des propriétés d'objets, des éléments de tableau, etc. Ils font partie intégrante de la syntaxe du langage et permettent d'écrire du code de manière plus lisible et plus expressive.

Littéral de chaine de caractère :

Voici des exemples :

var message = "Bonjour, monde!";

var autreMessage = "Une ligne \n une autre ligne" ;

var nom = "Robert",
          jour = "aujourd'hui";
         `Bonjour ${nom}, comment allez-vous ${jour} ?`;

var citation = "Il lit \"Bug Jargal\" de V. Hugo."; //Il lit "Bug Jargal" de V. Hugo 

Les caractères et ses significations

• \0 : Octet null
• \b : Retour arrière
• \f : Saut de page
• \n : Nouvelle ligne
• \r : Retour chariot
• \t : Tabulation
• \v : Tabulation verticale
• \' : Apostrophe ou guillemet droit simple
• \" : Guillemet droit double

Littéral de nombre

var age = 25;  // entier
var prix = 19.99; //décimal

Littéral de tableaux :

var fruits = ["pomme", "banane", "orange"];
var couleur = ["noir ", , "rouge"] ; // couleur[1] est undefined

Littéral d’objet :

var personne = {
    nom: "Doe",
    prénom: "John",
    âge: 30
};

Littéral d’expression régulière

var regex = /[a-zA-Z]+/;

Littéral de booléen

var estVrai = true;
var estFaux = false;

Littéral null

var valeurNulle = null;

Littéral undefined

var valeurNonDéfinie = undefined;

Les opérateurs

Les opérateurs sont des symboles spéciaux dans le langage de programmation JavaScript qui permettent d'effectuer des opérations sur des valeurs. Ils agissent sur les opérandes (les valeurs) et produisent un résultat. JavaScript propose différents types d'opérateurs pour effectuer des calculs, des comparaisons, des opérations logiques, etc. Voici une explication des principaux types d'opérateurs en JavaScript :

Opérateurs Arithmétiques :

• + (Addition) : Ajoute deux valeurs numériques.
• - (Soustraction) : Soustrait la deuxième valeur de la première.
• * (Multiplication) : Multiplie deux valeurs numériques.
• / (Division) : Divise la première valeur par la deuxième.
• % (Modulo) : Donne le reste de la division de la première valeur par la deuxième.
• ** (Exponentiation) : Élève la première valeur à la puissance de la deuxième.

let a = 10; 
let b = 3; 

let addition = a + b; // 10 + 3 = 13 
let soustraction = a - b; // 10 - 3 = 7 
let multiplication = a * b; // 10 * 3 = 30 
let division = a / b; // 10 / 3 ≈ 3.333... 
let modulo = a % b; // 10 % 3 = 1 (reste de la division) 
let exponentiation = a ** b; // 10^3 = 1000

Opérateurs de Comparaison :

• == (Égal à) : Vérifie si deux valeurs sont égales en valeur (mais ne prend pas en compte le type).
• === (Égal à) : Vérifie si deux valeurs sont égales en valeur et en type.
• != (Différent de) : Vérifie si deux valeurs sont différentes en valeur.
• !== (Différent de) : Vérifie si deux valeurs sont différentes en valeur ou en type.
• < (Inférieur à), > (Supérieur à), <= (Inférieur ou égal à), >= (Supérieur ou égal à) : Comparaison numérique entre deux valeurs.

let x = 5; 
let y = "5"; 

console.log(x == y); // true (les valeurs sont égales) 
console.log(x === y); // false (les types sont différents) 
console.log(x != y); // false (les valeurs sont égales) 
console.log(x !== y); // true (les types sont différents) 
console.log(x < 10); // true 
console.log(x >= 3); // true

Opérateurs Logiques :

• && (ET logique) : Renvoie true si les deux opérandes sont true.
• || (OU logique) : Renvoie true si au moins l'un des opérandes est true.
• ! (NON logique) : Inverse la valeur d'un booléen (de true à false ou vice versa).

let p = true; 
let q = false; 

console.log(p && q); // false (ET logique) 
console.log(p || q); // true (OU logique) 
console.log(!p); // false (NON logique)

Opérateurs d'Assignation :

• = (Affectation simple) : Affecte la valeur de droite à la variable de gauche.
• +=, -=, *=, /=, %=, **= : Effectuent une opération et assignent le résultat à la variable de gauche.

let num = 5; 

num += 2; // num = num + 2 => num = 7 
num -= 3; // num = num - 3 => num = 4 
num *= 2; // num = num * 2 => num = 8 
num /= 4; // num = num / 4 => num = 2 
num %= 2; // num = num % 2 => num = 0 (reste de la division)

Opérateurs d'Incrémentation et de Décrémentation :

• ++ (Incrémentation) : Augmente la valeur d'une variable de 1.
• -- (Décrémentation) : Diminue la valeur d'une variable de 1.

let counter = 10; 
counter++; // counter = counter + 1 => counter = 11 
counter--; // counter = counter - 1 => counter = 1

Opérateurs Ternaires :

• condition ? valeurSiVraie : valeurSiFausse : Effectue une opération conditionnelle. Si la condition est vraie, la première valeur est renvoyée ; sinon, c'est la deuxième valeur qui est renvoyée.

let age = 18; 
let message = (age >= 18) ? "Majeur" : "Mineur"; 
console.log(message); // "Majeur"

Opérateurs de Concaténation :

• + (Concaténation) : Combine deux chaînes de caractères en une seule.

let firstName = "John"; 
let lastName = "Doe"; 
let fullName = firstName + " " + lastName; 

console.log(fullName); // "John Doe"

Opérateurs Bit à Bit (Bitwise) :

&, |, ^, ~, <<, >> : Ces opérateurs effectuent des opérations bit à bit sur les valeurs numériques. Ils sont souvent utilisés dans des contextes de manipulation de bits.

let a = 5; // binaire: 0101 
let b = 3; // binaire: 0011 

let bitwiseAnd = a & b; // binaire: 0001 => décimal: 1 (AND bit à bit) 
let bitwiseOr = a | b; // binaire: 0111 => décimal: 7 (OR bit à bit) 
let bitwiseXor = a ^ b; // binaire: 0110 => décimal: 6 (XOR bit à bit) 
let bitwiseNotA = ~a; // binaire: 1010 => décimal: -6 (NOT bit à bit) 
let leftShift = a << 1; // binaire: 1010 => décimal: 10 (Décalage à gauche) 
let rightShift = a >> 1; // binaire: 0010 => décimal: 2 (Décalage à droite)

let age = 18;
let message = (age >= 18) ? "Majeur" : "Mineur";

3. Les structures conditionnelles

L'instruction if ... else

Les instructions if et else sont utilisées pour créer des conditions dans votre code, ce qui vous permet d'exécuter différents blocs de code en fonction de certaines conditions booléennes.

Si la condition est vraie, les instructions du bloc correspondant seront exécutées.

Sinon les instructions du bloc else seront exécutés.

Structure 1

if (condition) {
  instruction_1;
} else {
  instruction_2;
}

Structure 2

Dans cette deuxième structure, à chaque fois, on vérifie la condition pour exécuter le bloc qui le suit. Si toutes les conditions sont fausses, les instructions du bloc else seront exécutés.

if (condition_1) {
  instruction_1;
} else if (condition_2) {
  instruction_2;
} else if (condition_n) {
  instruction_n;
} else {
  dernière_instruction;
}

Exemple 1 :

var age = 18;
if (age >= 18) {
    console.log("Vous êtes majeur.");
}

Exemple 2 :

var note = 75;
if (note >= 90) {
    console.log("Très bien !");
} else if (note >= 70) {
    console.log("Bien !");
} else if (note >= 50) {
    console.log("Satisfaisant.");
} else {
    console.log("Insuffisant.");
}

Exemple 3 :

var age = 20;
var message = (age >= 18) ? "Majeur" : "Mineur";
console.log(message);

Notons bien que les valeurs suivantes utilisées dans les conditions sont évaluées à false :

• false
• undefined
• null
• 0
• NaN
• la chaîne de caractères vide ("")

Les autres valeurs y compris les objets sont équivalents à true.

Instruction Switch

La valeur de la variable choix est comparé avec chaque cas à l'intérieur du bloc switch.

Si la valeur correspond à l'une des valeurs case, le code à l'intérieur de ce case est exécuté. L'utilisation de l'instruction break est importante, car elle indique à JavaScript de sortir de la structure switch une fois qu'un cas correspondant a été trouvé. Si le break est omis, tous les cas suivants seront également exécutés, même s'ils ne correspondent pas.

Si aucun des cas ne correspond à la valeur de l'expression, le code à l'intérieur du default sera exécuté. Si aucune clause default n'est trouvée, le programme reprend l'exécution à l'instruction qui suit la fin de switch. Par convention, la clause default est écrite comme la dernière clause, mais il n'est pas nécessaire que ce soit le cas.

switch (choix) {
  case label_1:
    instructions_1
    [break;]

  case label_2:
    instructions_2
    [break;]

  ...

  default:
    instructions_par_defaut
    [break;]
}

Exemple :

var jourDeLaSemaine = "Lundi";

switch (jourDeLaSemaine) {

    case "Lundi":
        console.log("C'est le début de la semaine.");
        break;

    case "Mardi":
        console.log("C'est le deuxième jour de la semaine.");
        break;

    case "Mercredi":
        console.log("C'est le milieu de la semaine.");
        break;

    case "Jeudi":
        console.log("C'est le quatrième jour de la semaine.");
        break;

    case "Vendredi":
        console.log("C'est presque le week-end !");
        break;

    case "Samedi":

    case "Dimanche":
        console.log("C'est le week-end !");
        break;

    default:
        console.log("Jour non reconnu.");
}

var age = 17;
if (age >= 18) {
    console.log("Majeur");
} else if (age >= 13 && age < 18) {
    console.log("Adolescent");
} else {
    console.log("Enfant");
}

4. Les structures itératives

L’instruction for

for (initialisation; condition; itération) {
    // Bloc de code à exécuter à chaque itération
}

• L'initialisation est une expression qui est exécutée une seule fois avant le début de la boucle. C'est souvent utilisé pour déclarer des compteurs ou des variables de contrôle.
• La condition est une expression booléenne évaluée avant chaque itération. Si cette condition devient fausse, la boucle se termine.
• L'itération est une expression exécutée après chaque itération de la boucle. Elle est généralement utilisée pour mettre à jour les compteurs ou les variables de contrôle. Dans la boucle for, le nombre des itérations est fini.

Exemple : parcourir un tableau

var nombres = [1, 2, 3, 4, 5];
for (var i = 0; i < nombres.length; i++) {
    console.log(nombres[i]);
}

L’instruction do.. while

do {
    // Bloc de code à exécuter
} while (condition);

Le bloc de code à l'intérieur des accolades est exécuté au moins une fois, indépendamment de la valeur de la condition.

Après l'exécution du bloc de code, la condition est évaluée. Si la condition est vraie, le bloc de code est réexécuté. Si la condition est fausse, la boucle se termine.

Exemple :

var compteur = 0;
do {
    console.log("Itération : " + compteur);
    compteur++;
} while (compteur < 5);

L’instruction while

while (condition) {
    // Bloc de code à exécuter
}

La condition est une expression booléenne. Tant que cette condition est vraie, le bloc de code à l'intérieur des accolades sera exécuté.

Après chaque itération, la condition est évaluée à nouveau. Si la condition est toujours vraie, la boucle continue. Si la condition devient fausse, la boucle s'arrête et l'exécution se poursuit après le bloc while.

L'instruction while est particulièrement utile lorsque vous ne savez pas à l'avance combien d'itérations seront nécessaires, mais vous savez que vous devez répéter une action tant qu'une certaine condition est respectée. Cependant, assurez-vous que la condition est mise à jour correctement à l'intérieur de la boucle pour éviter les boucles infinies.

Exemple :

var compteur = 0;
while (compteur < 5) {
    console.log("Itération : " + compteur);
    compteur++;
}

Les instructions for .. in, for .. of

For .. of

L'instruction for..of crée une boucle qui fonctionne avec les objets itérables (qui incluent Array, Map, Set, l'objet arguments, etc.). La boucle appelle un mécanisme d'itération propre à l'objet utilisé et elle parcourt l'objet et les valeurs de ses différentes propriétés.

for (variable of objet) {
  instruction
}

For .. in

L'instruction for...in permet de parcourir toutes les propriétés énumérables d'un objet, et pour chaque propriété, JavaScript exécutera la déclaration spécifiée.

Ainsi, si l'on modifie un objet Array en lui ajoutant des propriétés et/ou des méthodes, la boucle for...in renverra le nom de ces nouvelles propriétés en plus des indices des éléments du tableau.

for (variable in array) {
  instruction
}

Exemple important :

let arr = [3, 5, 7];
arr.toto = "coucou";

for (let i in arr) {
  console.log(i); // affiche 0, 1, 2, "toto" dans la console
}

for (let i of arr) {
  console.log(i); // affiche 3, 5, 7 dans la console
}

for (var i = 1; i <= 5; i++) {
    if (i === 3) {
        continue;
    }
    console.log(i);
}

5. Les fonctions

Définir des fonctions

Vous pouvez définir une fonction en utilisant le mot-clé function, suivi par un nom de fonction, des parenthèses contenant éventuellement des paramètres et un bloc de code entre des accolades. Voici la syntaxe générale pour définir une fonction en JavaScript :

function nomDeLaFonction(paramètre1, paramètre2, ...) {
    // Bloc de code à exécuter
}

• nomDeLaFonction est le nom que vous choisissez pour votre fonction.
• paramètre1, paramètre2, etc. sont les paramètres que la fonction peut accepter. Les paramètres sont optionnels.
• Le bloc de code entre les accolades {} est le code que la fonction exécutera lorsque vous l'appellerez.

Exemple 1 :

function direBonjour(nom) {
    console.log("Bonjour, " + nom + " !");
}

Exemple 2 : Fonctions anonymes

Vous pouvez également définir des fonctions anonymes (sans nom) et les stocker dans des variables :

var addition = function(a, b) {
    return a + b;
};
console.log(addition(5, 3)); // Affiche 8
var x = addition(5,3);

Récursivité

Cependant, le nom de la fonction peut être utilisé dans le cas de l'utiliser dans la fonction elle-même, ce qu’on appelle la récursivité.

var factorielle = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
};

Appeler des fonctions

direBonjour("Alice");
var x = addition(5,3);
console.log(factorielle(3));

Fonctions et Hoisting

Les fonctions doivent être situées dans la portée où elles sont invoquées, mais la déclaration d'une fonction peut être réalisée après l'appel seulement lorsque la fonction est définie avec la syntaxe function nomFonction(){}.

Exemple important :

console.log(carré);    // La fonction carré est remontée/hoisted mais vaut undefined
// console.log(carré(5)); // TypeError: carré is not a function
var carré = function (n) {
  return n * n;
};

// Et avec let...

// console.log(carré2);    // ReferenceError: carré2 is not defined
// console.log(carré2(5)); // TypeError: carré2 is not a function
let carré2 = function (n) {
  return n * n;
};

6. L'exécution d'un script

Deux méthodes pour exécuter un code JavaScript

1. Navigateur Web

1. Ouvrez un éditeur de texte (comme Visual Studio Code).
2. Ecrivez votre code JavaScript.
3. Enregistrez le fichier avec l'extension .js (par exemple, monscript.js).
4. Ouvrez un navigateur web (comme Chrome, Firefox, Safari, etc.).
5. Ouvrez la console de développement du navigateur (généralement en appuyant sur F12 ou Ctrl+Shift+I), puis naviguez vers l'onglet "Console".
6. Utilisez la balise <script> dans un fichier HTML pour lier votre script, ou saisissez directement votre code JavaScript dans la console et appuyez sur Entrée.

<!DOCTYPE html> 
<html> 
<body> 
<script type="text/javascript"> 
   // Vote code ici
   console.log("Bonjour depuis le navigateur !");
</script> 
</body> 
</html>

2. Node.js

1. Télécharger depuis le site officiel de Node.js (https://nodejs.org/fr/download).
2. Installez Node.js sur votre ordinateur (si ce n'est pas déjà fait).
3. Ouvrez un éditeur de texte et écrivez votre code JavaScript.
4. Enregistrez le fichier avec l'extension .js.
5. Ouvrez un terminal ou une invite de commandes.
6. Utilisez la commande node nomdufichier.js pour exécuter votre script (par exemple, node monscript.js).

# Dans votre terminal
node monscript.js

Lier un fichier JavaScript externe à un fichier HTML

Il est recommandé de séparer le code JavaScript du code HTML pour une meilleure organisation et maintenabilité. Pour ce faire, on utilise un fichier externe avec l'extension .js.

La balise <script> avec l'attribut src

Pour lier un fichier JavaScript externe, utilisez la balise <script> en spécifiant le chemin vers le fichier JavaScript dans l'attribut src.

Syntaxe :

<script src="chemindufichier.js"></script>

Où placer la balise <script> ?

On peut placer la balise <script> soit dans la section <head>, soit à la fin du corps de la page (<body>). Il est généralement recommandé de la placer juste avant la fermeture de la balise </body> pour s'assurer que tout le contenu HTML est chargé avant l'exécution du script, ce qui améliore les performances d'affichage de la page.

Exemple concret

Imaginons que vous avez un fichier HTML nommé index.html et un fichier JavaScript nommé monscript.js dans le même dossier.

Fichier monscript.js :

alert("Bonjour, le fichier externe est bien lié !");

Fichier index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple JS Externe</title>
</head>
<body>
    <h1>Bienvenue sur ma page</h1>
    <p>Ceci est un paragraphe.</p>

    <!-- Liaison du fichier JavaScript externe -->
    <script src="monscript.js"></script>
</body>
</html>

1. Introduction au formulaire

Un formulaire HTML est un élément clé du langage de balisage hypertexte (HTML) utilisé dans le développement web. Il permet aux utilisateurs d'interagir avec un site web en saisissant des données et en les envoyant au serveur pour traitement. Les formulaires sont couramment utilisés pour collecter des informations telles que des commentaires, des coordonnées, des informations de connexion, des sélections d'options, et bien plus encore.

La balise <form>

C'est l'élément de base qui englobe tous les autres éléments du formulaire. Il définit un espace où les utilisateurs peuvent saisir et soumettre des données. Les attributs importants incluent action (l'URL où les données seront envoyées), method (la méthode HTTP utilisée pour l'envoi, généralement GET ou POST), et d'autres attributs pour la personnalisation.

Attributs de la balise <form>

Cette balise peut contenir les attributs suivants :

• action : Spécifie l'URL ou le point de terminaison vers lequel les données du formulaire seront envoyées lorsqu'il est soumis.

  <form action="traitement.php" method="POST">

• method : Indique la méthode HTTP à utiliser pour envoyer les données. Les valeurs typiques sont "GET" (ajoute les données dans l'URL) et "POST" (envoie les données dans le corps de la requête).

  <form action="traitement.php" method="POST">

• target : Détermine où la réponse du serveur sera affichée. "_self" pour la même fenêtre (défaut), "_blank" pour une nouvelle fenêtre.

  <form action="traitement.php" method="POST" target="_blank">

• enctype : Indique comment les données du formulaire sont encodées. "application/x-www-form-urlencoded" est la valeur par défaut. Utilisez "multipart/form-data" pour télécharger des fichiers.

  <form action="traitement.php" method="POST" enctype="multipart/form-data">

• autocomplete : Contrôle la fonctionnalité de remplissage automatique du navigateur. Valeurs courantes : "on" et "off".

  <form action="traitement.php" method="POST" autocomplete="off">

• name : Donne un nom au formulaire, utile pour le cibler avec JavaScript.

  <form action="traitement.php" method="POST" name="monFormulaire">

• novalidate : Désactive la validation HTML5 native du navigateur. Utile pour une validation personnalisée.

  <form action="traitement.php" method="POST" novalidate>

• onsubmit : Permet d'ajouter une fonction JavaScript qui sera exécutée à la soumission.

  <form action="traitement.php" method="POST" onsubmit="return validerFormulaire()">

• class et id : Pour le style CSS ou le ciblage JavaScript.

  <form action="traitement.php" method="POST" class="formulaire" id="monFormulaire">

Structure de base

Le formulaire HTML doit être rédigé à l'intérieur de la balise <form></form>.

Exemple :

<p>avant le formulaire</p>
<form method="get" action="">
    <p>à l'intérieur du formulaire</p>
</form>
<p>après le formulaire</p>

2. Les formulaires HTML

La balise <input>

La balise HTML <input> est une balise autonome que nous rencontrerons à plusieurs reprises au cours de ce chapitre. Fréquemment, c'est la valeur de son attribut type qui variera en fonction du type de champ que nous souhaitons inclure, que ce soit un champ de texte monoligne, une adresse e-mail, une date, et ainsi de suite.

La balise <input type="text">

Cette balise permet d’ajouter une zone de texte monoligne. Cette balise a un attribut name pour avoir un nom à cette zone de texte.

<form method="get" action="">
    <input type="text" name="nom">
</form>

D'autres attributs peuvent être appliqués à cette balise pour adapter son comportement :

• Pour augmenter la taille du champ, on peut utiliser l'attribut size.
• On peut restreindre le nombre de caractères pouvant être saisis avec l'attribut maxlength.
• Pour pré-remplir le champ avec une valeur par défaut, l'attribut value est utile.
• Pour donner une indication sur le contenu du champ, on peut recourir à l'attribut placeholder. Cette indication s'effacera dès que l'utilisateur cliquera dans le champ.

Comment le visiteur connait qu’il doit renseigner son nom sans avoir une indication dans la zone du texte ?

La balise <label>

<form method="get" action="">
  <label for="nom">Votre nom</label>  : <input type="text" name="nom" id="nom" >
</form>

Nous avons ajouté une étiquette (<label>) pour la zone de texte pour fournir une description du champ.

• L'attribut for de l'étiquette est associé à l'attribut id de l'input, ce qui permet aux utilisateurs de cliquer sur l'étiquette pour sélectionner le champ. Il est donc unique pour cet input.
• L'attribut name est utilisé pour identifier le champ lors de l'envoi du formulaire.

Exemple :

<form method="get" action="">
  <p>
    <label for="nom">Votre nom :</label>
    <input type="text" name="nom" id="nom" placeholder="Ecrivez votre nom" size="20" maxlength="10">
  </p>
</form>

Dans cet exemple, la zone de saisie est accompagnée d'une indication pour comprendre ce qui doit être saisi. Le champ a une longueur de 20 caractères, cependant, il n'est possible d'insérer qu'un maximum de 10 caractères à l'intérieur.

Tester sur CodePen

La balise <textarea>

La balise <textarea> est un élément HTML utilisé pour créer une zone de texte multi-lignes dans une page web. Contrairement à la balise <input> qui est utilisée pour les champs de texte simples, la balise <textarea> permet aux utilisateurs de saisir du texte sur plusieurs lignes.

Exemple :

<label for="description">Description : </label> <br>

<textarea rows="4" cols="50">
   C'est ici que vous pouvez saisir du texte sur plusieurs lignes.
</textarea>

Dans cet exemple, l'attribut rows définit le nombre de lignes visibles dans la zone de texte, et l'attribut cols définit le nombre de colonnes (largeur) de la zone de texte. Les utilisateurs peuvent saisir du texte dans cette zone en utilisant plusieurs lignes et en ajustant automatiquement la taille de la zone de texte en fonction du contenu.

La balise <input type="button">

Les éléments <input type="button"> ne possèdent pas de comportement particulier. Pour qu'un bouton <input type="button"> puisse avoir un effet, il est nécessaire d'écrire quelques lignes JavaScript.

<input type="button" value="Cliquer ici" />

L’attribut value indique le texte qui s’affiche sur le bouton.

On peut avoir d’autres attributs comme disabled pour désactiver un bouton.

<input type="button" value="Désactivé" disabled />

La balise <input type="checkbox">

L'élément HTML <input> avec l'attribut type="checkbox" est utilisé pour créer des cases à cocher dans les formulaires sur les pages web. Une case à cocher permet aux utilisateurs de sélectionner ou de désélectionner une option spécifique.

<input type="checkbox" id="newsletter" name="subscribe" value="yes">

<label for="newsletter">S'abonner à la newsletter</label>

Dans cet exemple, une case à cocher est créée avec l'identifiant (id) "newsletter", le nom (name) "subscribe" et la valeur (value) "yes". La balise <label> est utilisée pour afficher un libellé associé à la case à cocher. Le libellé est lié à la case à cocher en utilisant l'attribut for qui pointe vers l'identifiant de la case à cocher.

Lorsqu'un utilisateur coche cette case, le navigateur envoie les données du formulaire avec le nom "subscribe" et la valeur "yes" au serveur lors de la soumission du formulaire. Si la case n'est pas cochée, aucune donnée n'est envoyée pour cet élément.

Si on voulait que le ckeckbox est coché par défaut, on ajoute l’attribut checked

<input type="checkbox" id="newsletter" name="subscribe" value="yes" checked>

<label for="newsletter">S'abonner à la newsletter</label>

La balise <input type="number">

L'élément HTML <input> de type "number" est utilisé pour créer un champ de saisie numérique.

<label for="quantity">Quantité :</label>

<input type="number"
       id="quantity"
       name="quantity"
       min="0"
       max="100"
       step="1"
       value="0">

• type="number" : Définit le type d'entrée comme un champ de saisie numérique.
• id : Fournit un identifiant unique pour l'élément.
• name : Définit le nom de l'élément.
• min : Définit la valeur minimale autorisée.
• max : Définit la valeur maximale autorisée.
• step : Définit l'incrément.
• value : Définit la valeur par défaut.

Tester sur CodePen

La balise <input type="email">

<label for="email">Adresse e-mail :</label>

<input type="email"
       id="email"
       name="email"
       required
       placeholder="votre@email.com">

Explications des attributs :

• type="email": Définit le type d'entrée comme un champ de saisie d'adresse e-mail.
• required: Indique que le champ est obligatoire.
• placeholder: Affiche un exemple.

D’autres attributs supplémentaires : multiple, pattern.

Tester sur CodePen

La balise <input type="password">

<label for="password">Mot de passe :</label>

<input type="password"
       id="password"
       name="password"
       required
       minlength="8"
       maxlength="20"
       placeholder="Entrez votre mot de passe">

• minlength: Définit le nombre minimum de caractères.
• maxlength: Définit le nombre maximum de caractères.

La balise <input type="radio">

Les boutons radio permettent aux utilisateurs de sélectionner une option parmi plusieurs options mutuellement exclusives.

<input type="radio"
       id="option1"
       name="options"
       value="option1"
       checked>
<label for="option1">Option 1</label>


<input type="radio"
       id="option2"
       name="options"
       value="option2">
<label for="option2">Option 2</label>

Les boutons radio ayant le même nom (name="options") font partie du même groupe et sont mutuellement exclusifs.

Les boutons radio sont souvent utilisés pour les choix exclusifs, comme sélectionner le sexe (masculin/féminin), le mode de paiement, ou d'autres options.

La balise <input type="range">

L'élément HTML <input> de type "range" est utilisé pour créer un curseur glissant (slider).

<label for="volume">Volume :</label>

<input type="range"
       id="volume"
       name="volume"
       min="0"
       max="100"
       value="50">

La balise <input type="date">

<label for="birthdate">Date de naissance :</label>

<input type="date"
       id="birthdate"
       name="birthdate"
       min="1900-01-01"
       max="2023-08-25"
       value="2000-01-01">

D’autres balises de date (vérifier la compatibilité navigateurs) :

• <input type="time"> pour l'heure.
• <input type="week"> pour la semaine.
• <input type="month"> pour le mois.
• <input type="datetime-local"> pour la date et l'heure.

La balise <input type="url">

L'élément HTML <input> de type "url" est utilisé pour créer un champ de saisie d'URL (lien).

<label for="website">Site Web :</label>

<input type="url"
       id="website"
       name="website"
       placeholder="https://www.example.com"
       required>

Boutons d'action

La balise <input type="submit">

Cette balise est utilisée pour créer un bouton de soumission dans un formulaire. Ce bouton permet d'envoyer les données au serveur.

<input type="submit" value="Envoyer">

La balise <input type="reset">

Cette balise est utilisée pour créer un bouton de réinitialisation qui rétablit les valeurs par défaut du formulaire.

<input type="reset" value="Réinitialiser">

La balise <select>

La balise <select> est employée pour créer une liste déroulante.

<label for="cars">Choisissez une voiture :</label>

<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Dans cet exemple, la balise <select> englobe toute la liste, et chaque <option> représente un choix possible.

3. Les évènements

Les événements

Les événements en HTML peuvent être représentés sous forme d'attributs en ajoutant des attributs spécifiques à un élément HTML. Ces attributs sont appelés "attributs d'événement" et sont utilisés pour spécifier les actions à exécuter lorsque l'événement correspondant se produit sur l'élément.

Voici comment cela fonctionne et quelques-uns des attributs d'événement les plus couramment utilisés :

Syntaxe générale

Pour ajouter un attribut d'événement à un élément HTML, vous utilisez la syntaxe suivante :

<element attribut="codeJavaScript">

• element : L'élément HTML sur lequel vous voulez définir l'attribut d'événement.
• attribut : Le nom de l'attribut d'événement (par exemple, onclick, onmouseover, etc.).
• codeJavaScript : Le code JavaScript à exécuter lorsque l'événement se produit.

Liste des attributs d'événement les plus utilisés

• onclick : Définit une action à exécuter lorsque l'utilisateur clique sur l'élément.
• onmouseover : Définit une action à exécuter lorsque le curseur de la souris survole l'élément.
• onmouseout : Définit une action à exécuter lorsque le curseur de la souris quitte l'élément.
• onkeydown : Définit une action à exécuter lorsque l'utilisateur appuie une touche du clavier.
• onkeyup : Définit une action à exécuter lorsque l'utilisateur relâche une touche du clavier.
• onchange : Définit une action à exécuter lorsque la valeur d'un élément de formulaire change.
• onsubmit : Définit une action à exécuter lorsque le formulaire est soumis.
• onload : Définit une action à exécuter lorsque la page web se charge.

Utilisation

Vous pouvez ajouter ces attributs d'événement directement aux éléments HTML dans votre code. Lorsque l'événement se produit, le code JavaScript spécifié dans l'attribut sera exécuté.

Exemple : Utilisation de l'attribut onclick pour exécuter une fonction JavaScript lorsque l'utilisateur clique sur un bouton :

<button onclick="afficherMessage();">Cliquez-moi</button>
<script>
    function afficherMessage() {
        alert("Bouton cliqué !");
    }
</script>

En utilisant des attributs d'événement, vous pouvez associer directement des actions JavaScript aux interactions de l'utilisateur avec les éléments de la page.

Cela rend les interactions simples à mettre en œuvre, mais pour des scénarios plus complexes, l'utilisation de addEventListener et JavaScript externe peut être préférable.

La liste des évènements détaillés

submit

L'événement submit se produit lorsqu'un formulaire est soumis, généralement en cliquant sur un bouton "Envoyer". Il peut être utilisé pour valider les données du formulaire avant leur soumission.

<form name="myForm" onsubmit="return validerFormulaire();">
    <input type="text" name="username" placeholder="Nom d'utilisateur">
    <button type="submit">Envoyer</button>
</form>

<script>
    function validerFormulaire() {
        const username = document.myForm.username.value;
        if (username === "") {
            alert("Veuillez entrer un nom d'utilisateur.");
            return false; // Empêcher l'envoi
        }
        return true; // Envoyer le formulaire
    }
</script>

reset

L'événement reset se produit lorsque le bouton "Réinitialiser" d'un formulaire est cliqué.

<form name="myForm" onreset="afficherMessageReset();">
    <input type="text" name="username" placeholder="Nom d'utilisateur">
    <button type="reset">Réinitialiser</button>
</form>

<script>
    function afficherMessageReset() {
        alert("Formulaire réinitialisé !");
    }
</script>

change

L'événement change se produit lorsque la valeur d'un élément de formulaire change et que l'élément perd le focus.

<select name="ville" onchange="afficherSelection();">
    <option value="paris">Paris</option>
    <option value="newyork">New York</option>
</select>

<script>
    function afficherSelection() {
        const selectedCity = document.myForm.ville.value;
        alert(`Ville sélectionnée : ${selectedCity}`);
    }
</script>

input

L'événement input se produit à chaque fois que la valeur d'un élément change, généralement en réponse à une saisie de l'utilisateur (en temps réel).

<input type="text" name="message" oninput="afficherSaisie();">

focus et blur

focus se produit lorsque l'élément reçoit le focus. blur se produit lorsque l'élément perd le focus.

<input type="text" onfocus="afficherFocus();" onblur="afficherBlur();">

keydown, keyup et keypress

Ces événements se produisent lors des interactions avec le clavier.

<input type="text" 
       onkeydown="afficherTouche(event, 'down');" 
       onkeyup="afficherTouche(event, 'up');">

mousedown, mouseup et click

Interactions souris : bouton enfoncé, relâché, et clic complet.

<button type="button" 
        onmousedown="afficherClic();" 
        onmouseup="afficherRelachement();">Cliquez ici</button>

contextmenu

Se produit lors du clic droit (ouverture du menu contextuel).

<div oncontextmenu="afficherMenuContextuel();">Clic droit ici</div>

select

Se produit lorsque l'utilisateur sélectionne du texte dans un champ input ou textarea.

<input type="text" value="Sélectionnez-moi" onselect="afficherSelection();">

invalid

Se produit lorsqu'un élément échoue à la validation HTML5 lors de la soumission.

<form oninvalid="afficherMessageErreur();">
    <input type="email" required>
    <button type="submit">Envoyer</button>
</form>

4. Introduction aux objets

L'introduction aux objets en JavaScript est un concept essentiel pour comprendre comment le langage fonctionne et comment interagir avec les données et les fonctionnalités dans un environnement web. Les objets fournissent un moyen puissant de représenter et d'organiser des données complexes, ainsi que de créer des interactions et des fonctionnalités interactives sur les pages web. Voici une introduction de base aux objets en JavaScript :

Qu'est-ce qu'un Objet en JavaScript ?

En JavaScript, un objet est une structure de données qui regroupe des valeurs (propriétés) et des fonctions (méthodes) associées. Les propriétés sont des variables qui contiennent des données, et les méthodes sont des fonctions qui effectuent des actions ou des opérations liées à l'objet. Les objets sont utilisés pour modéliser des entités du monde réel et pour encapsuler des fonctionnalités connexes.

Les objets préconstruits en JavaScript

Les objets préconstruits en JavaScript sont des objets intégrés au langage et qui offrent des fonctionnalités essentielles pour manipuler différents types de données et effectuer des opérations courantes. Ces objets sont disponibles dès le chargement de JavaScript dans un navigateur ou dans un environnement d'exécution.

Nous allons introduire les objets les plus utilisés dans Javascript.

• Object : Tout Objet Javascipt hérite de cette classe Object.
• Array : Cet objet est utilisé pour stocker des collections ordonnées d'éléments. Il propose une gamme de méthodes pour ajouter, supprimer, parcourir et manipuler des éléments dans un tableau.
• Boolean : L'objet Boolean est associé aux valeurs booléennes true (vrai) et false (faux). Bien que les valeurs booléennes soient généralement utilisées sans l'objet Boolean, cet objet offre quelques méthodes utiles pour travailler avec ces valeurs.
• Date : L'objet Date est utilisé pour travailler avec les dates et les heures. Il offre plusieurs méthodes pour créer, manipuler et formater les dates et les heures.
• String : L'objet String est utilisé pour travailler avec des chaînes de caractères.
• Math : Un objet Javascript posséde des méthodes standards et aussi trigométrie.
• Document : L'objet document fournit une interface pour interagir avec les éléments HTML de la page, modifier son contenu et répondre aux événements utilisateur.

5. Objet Array

Création d'un tableau

Les tableaux peuvent être créés en utilisant la notation littérale entre crochets [] ou en utilisant le constructeur Array() :

const fruits = ["pomme", "banane", "orange"];
const numbers = new Array(1, 2, 3, 4, 5);

Propriétés

• length : Retourne le nombre d'éléments dans le tableau.

Méthodes principales

push(element) : number

Ajoute un élément à la fin du tableau et renvoie la nouvelle taille.

const fruits = ["pomme", "banane", "orange"];
fruits.push("ananas");
// Résultat : ["pomme", "banane", "orange", "ananas"]

pop()

Supprime le dernier élément du tableau et le renvoie.

console.log(fruits.pop()); // "ananas"
console.log(fruits); // ["pomme", "banane", "orange"]

shift()

Supprime le premier élément du tableau et le renvoie.

console.log(fruits.shift()); // "pomme"
console.log(fruits); // ["banane", "orange"]

unshift(element)

Ajoute un ou plusieurs éléments au début du tableau.

fruits.unshift("fraise");
// Résultat : ["fraise", "banane", "orange"]

concat(array)

Fusionne deux tableaux en un nouveau tableau sans modifier les initiaux.

const newFruits = fruits.concat(["raisin", "mangue"]);
console.log(newFruits); // ["fraise", "banane", "orange", "raisin", "mangue"]

slice(start, end)

Extrait une partie du tableau vers un nouveau tableau.

const fruits = ["pomme", "banane", "orange", "ananas", "raisins"];
console.log(fruits.slice(2, 4)); // ["orange", "ananas"]
console.log(fruits.slice(-2));   // ["ananas", "raisins"]

splice(start, deleteCount, ...items)

Modifie le contenu d'un tableau en retirant ou ajoutant des éléments.

let noms = ["Alice", "Bob", "Charlie", "David", "Emma"];

// Ajouter "Frank" à l'index 2 sans suppression
noms.splice(2, 0, "Frank"); 
// ["Alice", "Bob", "Frank", "Charlie", "David", "Emma"]

// Remplacer l'élément à l'index 1 par "Eva"
noms.splice(1, 1, "Eva");
// ["Alice", "Eva", "Frank", "Charlie", "David", "Emma"]

// Supprimer 2 éléments à partir de l'index 3
noms.splice(3, 2);
// ["Alice", "Eva", "Frank", "Emma"]

indexOf(element)

Renvoie l'indice de la première occurrence d'un élément (-1 si non trouvé).

const noms = ["Alice", "Bob"];
console.log(noms.indexOf("Bob")); // 1
console.log(noms.indexOf("Charlie")); // -1

includes(element)

Vérifie si un tableau contient une valeur donnée (retourne true/false).

console.log(noms.includes("Alice")); // true
console.log(noms.includes("Zorro")); // false

forEach(callback)

Exécute une fonction sur chaque élément du tableau.

const noms = ["Alice", "Bob"];
noms.forEach(function(nom) {
  console.log("Bonjour " + nom);
});
// Affiche "Bonjour Alice", "Bonjour Bob"

filter(callback)

Crée un nouveau tableau avec tous les éléments qui passent le test.

const nombres = [10, 20, 25, 30, 35];
const pairs = nombres.filter(function(n) {
  return n % 2 === 0;
});
console.log(pairs); // [10, 20, 30]

6. Objet Boolean

L'objet Boolean est associé aux valeurs booléennes true (vrai) et false (faux). Bien que les valeurs booléennes soient généralement utilisées sans l'objet Boolean, cet objet offre quelques méthodes utiles pour travailler avec ces valeurs.

Le constructeur Boolean()

Pour créer un objet de type Boolean, on utilise le constructeur new Boolean().

const vrai = new Boolean(true);
const faux = new Boolean(false);
console.log(vrai); // Affiche [Boolean: true]
console.log(faux); // Affiche [Boolean: false]

Note : Dans cet exemple, nous créons des instances de l'objet Boolean en utilisant le constructeur. Cependant, cela n'est pas couramment utilisé car il est plus simple d'utiliser les valeurs booléennes primitives (true et false) sans le constructeur.

La méthode valueOf()

Cette méthode permet de renvoyer la valeur booléenne primitive associée à un objet Boolean.

const vrai = new Boolean(true);
console.log(vrai.valueOf()); // Affiche true

Dans cet exemple, nous créons une instance de l'objet Boolean avec la valeur true. En utilisant la méthode valueOf(), nous obtenons la valeur booléenne associée.

La méthode toString()

Cette méthode permet de renvoyer une chaîne de caractères représentant la valeur booléenne de l'objet.

const faux = new Boolean(false);
console.log(faux.toString()); // Affiche "false"

Ici, nous créons une instance de l'objet Boolean avec la valeur false. En utilisant la méthode toString(), nous obtenons la représentation sous forme de chaîne de caractères de la valeur booléenne, qui est "false".

7. Objet Date

L'objet Date est utilisé pour travailler avec les dates et les heures. Il offre plusieurs méthodes pour créer, manipuler et formater les dates et les heures.

Le constructeur Date()

Le constructeur new Date() peut être utilisé pour créer une instance de l'objet Date.

1. Date actuelle

Si aucun argument n'est passé, il renverra la date et l'heure actuelles.

const dateActuelle = new Date();
console.log(dateActuelle); // Affiche la date et l'heure actuelles

2. Date à partir d'une chaîne

const dateStr = new Date("2023-10-09T10:11:11");
console.log(dateStr);

3. Date à partir d'arguments (Année, Mois, Jour)

Note : Le mois commence à 0 (Janvier) jusqu'à 11 (Décembre).

const date = new Date(2023, 2, 2); // 2 Mars 2023
console.log(date);

4. Date complète (Année, Mois, Jour, Heures, Minutes, Secondes)

const dateComplete = new Date(2023, 2, 2, 16, 50, 56);
console.log(dateComplete);

Note : Les dates en Javascript sont stockées sous forme de nombre de millisecondes depuis le 1er janvier 1970 (Epoch).

Méthodes de lecture (Getters)

getFullYear()

Renvoie l'année (4 chiffres).

const annee = dateActuelle.getFullYear(); // ex: 2026

getMonth()

Renvoie le mois (0-11). 0 = Janvier, 11 = Décembre.

const mois = dateActuelle.getMonth(); // ex: 1 pour Février

toLocaleDateString()

Renvoie une chaîne formatée selon la locale.

console.log(dateActuelle.toLocaleDateString()); // ex: "19/02/2026"

Heures, Minutes, Secondes

const date = new Date();
const heures = date.getHours();       // 0-23
const minutes = date.getMinutes();    // 0-59
const secondes = date.getSeconds();   // 0-59
const ms = date.getMilliseconds();    // 0-999

console.log(`${heures}:${minutes}:${secondes}`);

Méthodes de modification (Setters)

Pour modifier une date existante :

• setDate(x) : Modifie le jour du mois (1-31).
• setMonth(x) : Modifie le mois (0-11).
• setFullYear(x) : Modifie l'année.
• setHours(x) : Modifie l'heure (0-23).
• setMinutes(x) : Modifie les minutes (0-59).
• setTime(x) : Définit la date via le nombre de millisecondes depuis 1970.

const maDate = new Date();
maDate.setDate(9);
maDate.setHours(7);
console.log(maDate); // La date a été modifiée au 9 du mois courant à 07h

8. Objet String

L'objet String est utilisé pour travailler avec des chaînes de caractères. Voici quelques-unes de ses méthodes les plus couramment utilisées :

La méthode length

Cette méthode permet de retourner la longueur de la chaîne de caractères. Tout caractère est calculé y compris l’espace, les points de ponctuation.

const myString = "Hello, world!";
const length = myString.length;
console.log(length); // Affiche 13

La méthode charAt(index)

Cette méthode permet de retourner le caractère à l'index spécifié dans la chaîne.

const myString = "Hello";
const char = myString.charAt(1);
console.log(char); // Affiche "e"

La méthode substring(start, end)

Cette méthode permet d'extraire une sous-chaîne en fonction des indices de début et de fin spécifiés.

const myString = "Hello, world!";
const subString = myString.substring(7, 12);
console.log(subString); // Affiche "world"

La méthode concat(str)

Cette méthode permet de concaténer la chaîne actuelle avec une autre chaîne.

const str1 = "Hello";
const str2 = " world!";
const combined = str1.concat(str2);
console.log(combined); // Affiche "Hello world!"

La méthode toUpperCase()

Cette méthode permet de retourner une nouvelle chaîne avec tous les caractères en majuscules.

const myString = "Hello";
const upperCaseString = myString.toUpperCase();
console.log(upperCaseString); // Affiche "HELLO"

La méthode toLowerCase()

Cette méthode permet de retourner une nouvelle chaîne avec tous les caractères en minuscules. Si la chaîne est initialement en minuscules, elle reste inchangée.

const myString = "Hello";
const lowerCaseString = myString.toLowerCase();
console.log(lowerCaseString); // Affiche "hello"

La méthode replace(oldStr, newStr)

Cette méthode permet de remplacer toutes les occurrences d'une sous-chaîne par une autre dans la chaîne.

const myString = "Hello, world!, Bonjour, world!";
const newString = myString.replace("world", "universe");
console.log(newString); // Affiche "Hello, universe!, Bonjour, world!"

La méthode trim()

Cette méthode permet de retourner une nouvelle chaîne en supprimant les espaces en début et en fin de chaîne.

const myString = "   Hello   ";
const trimmedString = myString.trim();
console.log(trimmedString); // Affiche "Hello"

La méthode indexOf(str)

Cette méthode permet de retourner l'index de la première occurrence de la sous-chaîne spécifiée.

const myString = "Hello, world!";
const index = myString.indexOf("world");
console.log(index); // Affiche 7

Dans cet exemple, le mot « world » commence à la position 7 de la chaine initiale. indexOf retourne la première position de la première lettre de la chaine en paramètre.

La méthode split(delimiter)

Cette méthode permet de diviser la chaîne en un tableau de sous-chaînes en utilisant le délimiteur spécifié.

const myString = "apple,banana,orange";
const fruits = myString.split(",");
console.log(fruits); // Affiche ["apple", "banana", "orange"]

Le résultat est un array qui contient des sous-chaînes délimitées par le délimiteur «,» mis en paramètre.

Méthodes de formatage HTML

L’objet String possède aussi des méthodes qui résultent des chaines de caractères contenant des balises html, bien que leur usage soit aujourd'hui déconseillé au profit du CSS ou de la manipulation DOM directe.

// anchor("nom_a_donner")
const linkText = "Cliquez ici";
const link = linkText.anchor("https://www.example.com");
console.log(link); // <a name="https://www.example.com">Cliquez ici</a>

// bold()
const text = "Texte en gras";
const boldText = text.bold();
console.log(boldText); // <strong>Texte en gras</strong>

// fontcolor(couleur)
const message = "Hello, world!";
const coloredMessage = message.fontcolor("blue");
console.log(coloredMessage); // <font color="blue">Hello, world!</font>

// fontsize(Size)
const content = "Texte de taille différente";
const largeText = content.fontsize(5);
console.log(largeText); // <font size="5">Texte de taille différente</font>

// italics()
const emphasis = "Texte en italique";
const italicText = emphasis.italics();
console.log(italicText); // <em>Texte en italique</em>

// link(URL)
const siteName = "Visitez notre site";
const siteLink = siteName.link("https://www.example.com");
console.log(siteLink); // <a href="https://www.example.com">Visitez notre site</a>

// small()
const note = "Note importante";
const smallNote = note.small();
console.log(smallNote); // <small>Note importante</small>

// strike()
const deletedText = "Ce texte a été supprimé";
const strikethroughText = deletedText.strike();
console.log(strikethroughText); // <strike>Ce texte a été supprimé</strike>

// sub()
const chemicalFormula = "H2O";
const subscriptFormula = chemicalFormula.sub();
console.log(subscriptFormula); // <sub>H2O</sub>

9. Objet Math

L'objet Math est un objet JavaScript qui possède des méthodes standards pour effectuer des tâches mathématiques, y compris la trigonométrie.

La méthode Math.random()

Cette méthode permet de renvoyer un nombre décimal pseudo-aléatoire entre 0 (inclus) et 1 (exclus).

const randomValue = Math.random();
console.log(randomValue); // Affiche un nombre aléatoire entre 0 et 1

La méthode Math.floor()

Cette méthode permet de renvoyer le plus grand entier inférieur ou égal à un nombre (arrondi à l'entier inférieur).

const number = 7.85;
const floorValue = Math.floor(number);
console.log(floorValue); // Affiche 7

Explication : Math.floor(7.85) renvoie l'entier 7.

La méthode Math.ceil()

Cette méthode renvoie le plus petit entier supérieur ou égal à un nombre (arrondi à l'entier supérieur).

const number = 3.14;
const ceilValue = Math.ceil(number);
console.log(ceilValue); // Affiche 4

Explication : Math.ceil(3.14) renvoie l'entier 4.

La méthode Math.round()

Cette méthode permet de renvoyer l'entier le plus proche d'un nombre donné (arrondi classique).

const number = 5.6;
const roundedValue = Math.round(number);
console.log(roundedValue); // Affiche 6

Explication : Math.round(5.6) renvoie 6 car 5.6 est plus proche de 6 que de 5.

Les méthodes Math.max() et Math.min()

Ces méthodes permettent de renvoyer respectivement le plus grand et le plus petit élément parmi un ensemble d'arguments numériques.

const maxValue = Math.max(10, 5, 20, 15);
const minValue = Math.min(10, 5, 20, 15);
console.log(maxValue); // Affiche 20
console.log(minValue); // Affiche 5

La méthode Math.pow()

Cette méthode permet de renvoyer la valeur d'un nombre élevé à une puissance donnée.

const result = Math.pow(2, 3);
console.log(result); // Affiche 8 (2^3)

Explication : Math.pow(2, 3) calcule 2 puissance 3 (2*2*2), ce qui donne 8.

Autres méthodes mathématiques

Il existe aussi d'autres propriétés et méthodes comme Math.PI, Math.sin(valeur), Math.cos(valeur), Math.tan(valeur), Math.atan(valeur), etc., qui retournent respectivement la valeur de PI, le sinus, le cosinus, la tangente, l'arc tangente, etc.

Ces méthodes sont principalement utilisées dans des contextes de trigonométrie et de calculs géométriques.

10. Objet Document et Méthodes de la Fenêtre

L'objet document fournit une interface pour interagir avec les éléments HTML de la page, modifier son contenu et sa structure, ainsi que répondre aux événements utilisateur. Il est cependant souvent utilisé en conjonction avec l'objet global window.

I. Les méthodes de l'interface Window

L'objet `window` représente la fenêtre du navigateur contenant le document DOM.

1. Interaction utilisateur

• alert(message) : Affiche une boîte de dialogue modale d'alerte avec un message et un bouton "OK".
• confirm(message) : Affiche une boîte de dialogue de confirmation avec "OK" et "Annuler". Retourne true ou false.
• prompt(message, defaultText) : Affiche une boîte de saisie. Retourne la valeur saisie ou null.

// Exemple prompt
const userName = window.prompt("Entrez votre nom :", "John Doe");
if (userName !== null) {
    console.log("Bonjour, " + userName + " !");
} else {
    console.log("L'utilisateur a annulé.");
}

2. Gestion des fenêtres

• open(url, target, features) : Ouvre une nouvelle fenêtre ou un nouvel onglet.
• close() : Ferme la fenêtre actuelle (souvent celle ouverte par script).
• moveTo(x, y) / moveBy(x, y) : Déplace la fenêtre à une position absolue ou relative.
• resizeTo(w, h) / resizeBy(w, h) : Redimensionne la fenêtre.
• scrollTo(x, y) / scrollBy(x, y) : Fait défiler le contenu de la fenêtre.
• print() : Ouvre la boîte de dialogue d'impression.

3. Minuteries et Asynchronisme

• setTimeout(callback, delay) : Exécute une fonction une fois après un délai.
• clearTimeout(id) : Annule un setTimeout.
• setInterval(callback, delay) : Exécute une fonction de manière répétitive à intervalle régulier.
• clearInterval(id) : Annule un setInterval.
• requestAnimationFrame(callback) : Planifie une fonction avant le prochain rafraîchissement écran (pour les animations).

// Exemple setInterval
function printTime() {
    console.log(new Date().toLocaleTimeString());
}
const intervalId = window.setInterval(printTime, 1000); // Exécuter toutes les 1 seconde

4. Communication et Réseau

• fetch(input, init) : Effectue des requêtes réseau (API) de manière asynchrone (retourne une Promise).
• postMessage(message, targetOrigin) : Envoie un message sécurisé entre différentes fenêtres/onglets.

5. Événements

• addEventListener(type, listener) : Ajoute un écouteur d'événement.
• removeEventListener(type, listener) : Supprime un écouteur d'événement.
• matchMedia(query) : Vérifie si une requête média CSS (ex: smartphone) est active.

II. Récupération des données d'un formulaire

Pour accéder aux données saisies par un utilisateur, on utilise souvent l'objet document pour cibler les formulaires et leurs champs. L'accès hiérarchique classique est : window.document.nomDuFormulaire.nomDuChamp.value.

Note : On peut souvent omettre window et commencer directement par document.

Exemple 1 : Champ texte simple

<form name="monFormulaire">
    <input type="text" name="nom" placeholder="Votre nom">
    <button type="button" onclick="afficherInfos()">Afficher</button>
</form>

<script>
function afficherInfos() {
    // Accès direct via le nom du formulaire et du champ
    const nomValue = document.monFormulaire.nom.value;
    alert(`Nom : ${nomValue}`);
}
</script>

Exemple 2 : Textarea et Checkbox

Pour une case à cocher, on utilise la propriété .checked (booléen) au lieu de .value.

const commentaire = document.monFormulaire.commentaire.value;
const estDaccord = document.monFormulaire.avis.checked; // true ou false

if (estDaccord) {
    alert("Avis positif : " + commentaire);
}

Exemple 3 : Boutons Radio

Pour les boutons radio (plusieurs inputs avec le même name), il faut parcourir la liste pour trouver celui qui est coché.

const radios = document.monFormulaire.genre;
let genreSelectionne = "";

for (let i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
        genreSelectionne = radios[i].value;
        break;
    }
}
alert("Genre : " + genreSelectionne);

Exemple 4 : Liste déroulante (Select)

Pour une balise <select>, la propriété .value retourne la valeur de l'option actuellement sélectionnée.

<select name="pays">
    <option value="fr">France</option>
    <option value="us">États-Unis</option>
</select>

const pays = document.monFormulaire.pays.value;
alert("Pays sélectionné : " + pays);

Exemple 5 : Types d'entrées spécifiques (Number, Date, Range, URL)

Les nouveaux types HTML5 (number, date, etc.) s'utilisent de la même manière via la propriété .value.

const age = document.monFormulaire.age.value;
const dateNaiss = document.monFormulaire.dateNaissance.value;

Examen final du Module 5

Testez vos connaissances sur les formulaires et les objets Javascript.