![\"Un](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nIl compte \u00e9galement les caract\u00e8res et les mots, ce qui constitue une bonne introduction \u00e0 la gestion des cha\u00eenes (texte). Bien s\u00fbr, l'application est tr\u00e8s simple : c'est le but ! Mais avec ce tutoriel, vous apprendrez les bases du d\u00e9veloppement d'une application Web, et le monde sera alors \u00e0 vous. \ud83e\uddaa\ud83d\udcbb<\/p>\n
Comment allez-vous le construire ?<\/h2>\n
Bien que les applications Web soient tr\u00e8s diverses, elles impliquent g\u00e9n\u00e9ralement trois technologies principales : HTML, CSS et JavaScript. Il est essentiel que vous compreniez leurs r\u00f4les avant de commencer. \ud83d\udcda<\/p>\n
- \n
- HTML : Hypertext Markup Language vous permet de d\u00e9finir la structure de votre contenu. Avec lui, vous pouvez marquer un texte en fonction de sa signification, en indiquant s'il s'agit d'un paragraphe, d'un titre ou d'un \u00e9l\u00e9ment d'une liste, par exemple.<\/li>\n
- CSS\u00a0: les feuilles de style en cascade vous permettent de styliser votre contenu. En utilisant ce langage, vous pouvez colorer un paragraphe en vert, mettre tous vos liens en gras ou positionner une barre lat\u00e9rale \u00e0 c\u00f4t\u00e9 de votre article principal. \ud83c\udfa8<\/li>\n
- JavaScript : Avec ce langage de programmation, vous pouvez ajouter des fonctionnalit\u00e9s \u00e0 votre site Web. Vous pouvez faire en sorte que des boutons affichent ou masquent des parties de votre document lorsque vous cliquez dessus, ou impl\u00e9menter un traitement de texte ou un jeu vid\u00e9o \u00e0 part enti\u00e8re. \ud83c\udfae<\/li>\n<\/ul>\n
Il site web.dev<\/a> (escrito por miembros del equipo de Chrome) y MDN, la Red de Desarrolladores de Mozilla, son dos excelentes fuentes de informaci\u00f3n sobre tecnolog\u00edas web fundamentales.<\/p>\n
![\"La](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_798_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nLa structure de l'application<\/h2>\n
L'application que vous allez cr\u00e9er sera compos\u00e9e de trois fichiers simples\u00a0: index.html, styles.css et script.js. \ud83d\uddc2\ufe0f<\/p>\n
Il n'y a aucune exigence particuli\u00e8re pour ex\u00e9cuter l'application, vous avez juste besoin d'un navigateur Web. Il n'y a pas de fonctionnalit\u00e9 backend, vous n'avez donc pas besoin d'un langage de script comme PHP ou d'un serveur Web local. Une fois que vous avez termin\u00e9, vous pouvez ouvrir le fichier index.html directement dans votre navigateur<\/a> et tout s'arrangera. \ud83d\ude0a<\/p>\n
Il est important de noter que cette application enregistre votre texte sans l'\u00e9crire dans un fichier sp\u00e9cifique sur le disque, car JavaScript ne peut pas acc\u00e9der au syst\u00e8me de fichiers. Utilise l'API Web Storage, une alternative puissante aux cookies. \ud83c\udf6a\ud83d\udcbe<\/p>\n
Comment cr\u00e9er le preneur de notes<\/h2>\n
Cr\u00e9ez les trois fichiers suivants dans le m\u00eame r\u00e9pertoire, puis ouvrez index.html dans un navigateur Web. Alternativement, vous pouvez t\u00e9l\u00e9charger les fichiers \u00e0 partir de ce d\u00e9p\u00f4t GitHub<\/a>. \ud83d\udce5<\/p>\n
Construire la structure avec HTML<\/h3>\n
Le fichier index.html d\u00e9finit la structure du contenu de votre application en HTML. Incluez des r\u00e9f\u00e9rences aux deux autres fichiers afin qu'un navigateur puisse les combiner pour le produit final.<\/p>\n
Comme tous les documents HTML, la structure de niveau sup\u00e9rieur comprend une section d'en-t\u00eate contenant des m\u00e9tadonn\u00e9es et une section de corps contenant le contenu r\u00e9el qui appara\u00eetra sur la page\u00a0:<\/p>\n
HTML<\/span>>\r\n<HTML<\/span>><\/span>\r\n<t\u00eate<\/span>><\/span>\r\n ...\r\nt\u00eate<\/span>><\/span><\/code><\/pre>\n<corps<\/span>><\/span>
\n…
\ncorps<\/span>><\/span>
\nHTML<\/span>><\/span><\/p>\n<\/code><\/pre>\n<\/code><\/pre>\nLes m\u00e9tadonn\u00e9es dans l'en-t\u00eate sont tr\u00e8s br\u00e8ves, avec juste un titre de page (qui appara\u00eet dans la barre de titre de votre navigateur) et une r\u00e9f\u00e9rence au fichier styles.css :<\/p>\n
<titre<\/span>><\/span>Textetitre<\/span>><\/span>\r\n <lien<\/span> rel<\/span>=\u00ab feuille de style \u00bb<\/span> href<\/span>=\u00ab\u00a0styles.css\u00a0\u00bb<\/span> \/><\/span>\r\n<\/code><\/pre>\nLe corps est plus compliqu\u00e9, mais il n'y a que quelques parties importantes :<\/p>\n
<div<\/span> identifiant<\/span>="comptoir"<\/span>><\/span>\r\n mots: <port\u00e9e<\/span> identifiant<\/span>="mots"<\/span>><\/span>0port\u00e9e<\/span>><\/span>\r\n \/ caract\u00e8res : <port\u00e9e<\/span> identifiant<\/span>="chars"<\/span>><\/span>0port\u00e9e<\/span>><\/span>\r\n div<\/span>><\/span><\/code><\/pre>\n<zone de texte<\/span> identifiant<\/span>="texte"<\/span> mise au point automatique<\/span>=\u00ab1\u00bb<\/span>><\/span>zone de texte<\/span>><\/span><\/p>\n
<\/code><\/pre>\n<sc\u00e9nario<\/span> source<\/span>=\u00abscript.js\u00bb<\/span>><\/span>sc\u00e9nario<\/span>><\/span><\/p>\n
<\/code><\/pre>\n<\/code><\/pre>\nL'\u00e9l\u00e9ment div contient le nombre de mots et de caract\u00e8res de l'application. Il sera situ\u00e9 en haut de l'application Web et sera mis \u00e0 jour \u00e0 chaque fois que le texte change.<\/p>\n
Notez les attributs id, qui sont essentiels \u00e0 l\u2019op\u00e9ration. La valeur d'un identifiant doit \u00eatre unique, afin que l'application puisse l'utiliser pour identifier un \u00e9l\u00e9ment sp\u00e9cifique. Cela peut nous aider \u00e0 styliser ces \u00e9l\u00e9ments et \u00e9galement \u00e0 les cibler lors de l\u2019ajout de fonctionnalit\u00e9s.<\/p>\n
La zone de texte est un \u00e9l\u00e9ment de formulaire int\u00e9gr\u00e9 qui vous permet de saisir du texte simple dans un navigateur. Gr\u00e2ce \u00e0 l'attribut autofocus, vous serez pr\u00eat \u00e0 \u00e9crire d\u00e8s que la page se charge. Enfin, la page fait r\u00e9f\u00e9rence au fichier javascript, script.js.<\/p>\n
\u00c0 ce stade, vous pouvez ouvrir le fichier index.html dans un navigateur. Cela ne fera rien pour le moment, et cela n'aura m\u00eame pas l'air bien, mais il est utile de tester votre application \u00e0 chaque \u00e9tape pour vous assurer que les bases fonctionnent comme pr\u00e9vu.<\/p>\n
![\"Une](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_678_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nLes rendre beaux avec CSS<\/h3>\n
CSS vous permet de styliser des parties de votre page Web en ciblant ces parties et en sp\u00e9cifiant des valeurs pour des propri\u00e9t\u00e9s telles que la taille de la police et la couleur d'arri\u00e8re-plan. Cet exemple d'application n'a pas besoin d'une conception tr\u00e8s raffin\u00e9e car son interface est tr\u00e8s basique. Cependant, nous pouvons adoucir les asp\u00e9rit\u00e9s avec une touche de style. \ud83c\udfa8\u2728<\/p>\n
Tout d\u2019abord, stylisez le corps pour d\u00e9finir la conception globale\u00a0:<\/p>\n
corps<\/span> {\r\n marge<\/span>: 0;\r\n rembourrage<\/span>: 0;\r\n afficher<\/span>: grille<\/span>;\r\n hauteur minimale<\/span>: 100vh<\/span>;\r\n grille-mod\u00e8le-lignes<\/span>: contenu minimal<\/span> 1fr<\/span>;\r\n}\r\n<\/code><\/pre>\nEste CSS utiliza la disposici\u00f3n en cuadr\u00edcula para posicionar los conteos de palabras y caracteres en una fila estrecha sobre el textarea. La propiedad grid-template-rows especifica que la fila del conteo debe ser lo m\u00e1s corta posible (min-content) y el textarea debe llenar el espacio restante (1fr).<\/p>\n
La ligne de compteur a un style de base pour la diff\u00e9rencier du reste du texte, principalement par son arri\u00e8re-plan :<\/p>\n
Compteur #<\/span> {\r\n famille de polices<\/span>: sans empattement<\/span>;\r\n couleur d'arri\u00e8re-plan<\/span>: #f7f7f7<\/span>;\r\n alignement du texte<\/span>: centre<\/span>;\r\n largeur<\/span>: 100%;\r\n rembourrage<\/span>: 0.5em<\/span> 0;\r\n}\r\n<\/code><\/pre>\nEnfin, la zone de texte est con\u00e7ue pour afficher un texte lisible avec suffisamment d'espace pour respirer. La ligne s\u00e9parant les comptes du texte est en fait la bordure sup\u00e9rieure de cette zone de texte.<\/p>\n
zone de texte<\/span> {\r\n largeur<\/span>: 100%;\r\n hauteur<\/span>: 100%;\r\n taille de police<\/span>: 16pt<\/span>;\r\n rembourrage<\/span>: 1dans<\/span>;\r\n dimensionnement des bo\u00eetes<\/span>: bordure-bo\u00eete<\/span>;\r\n contour<\/span>: 0;\r\n fronti\u00e8re<\/span>: aucun<\/span>;\r\n bordure sup\u00e9rieure<\/span>: 1px<\/span> solide<\/span> #999<\/span>;\r\n}<\/code><\/pre>\n![\"L'application](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_152_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nAjout de fonctionnalit\u00e9s avec JavaScript<\/h3>\n
Une fois la structure et le style en place, vous \u00eates pr\u00eat \u00e0 ajouter des fonctionnalit\u00e9s\u00a0: le code qui permet \u00e0 cette application simple de faire r\u00e9ellement quelque chose. \ud83d\udee0\ufe0f<\/p>\n
Avant de commencer \u00e0 \u00e9crire m\u00eame le code le plus simple, c'est une bonne id\u00e9e de comprendre ce que vous voulez qu'il fasse. Dans ce cas, il n\u2019y a que quelques exigences g\u00e9n\u00e9rales :<\/p>\n
- \n
- Enregistrez le texte saisi et rechargez-le si n\u00e9cessaire.<\/li>\n
- Mettez \u00e0 jour le nombre de caract\u00e8res et de mots pour fournir des statistiques en temps r\u00e9el. \ud83d\udcca<\/li>\n<\/ul>\n
Ces deux exigences impliquent la mise \u00e0 jour d\u2019\u00e9l\u00e9ments dans le document. Le script commence donc par obtenir des r\u00e9f\u00e9rences \u00e0 ces n\u0153uds \u00e0 l'aide de la m\u00e9thode getElementById\u00a0:<\/p>\n
constante<\/span> mots = document<\/span>.getElementById("mots"<\/span>);\r\nconstante<\/span> caract\u00e8res = document<\/span>.getElementById("chars"<\/span>);\r\nconstante<\/span> zone de texte = document<\/span>.getElementById("texte"<\/span>);\r\n<\/code><\/pre>\nNotez que les mots, les caract\u00e8res et le texte sont les identifiants de leurs \u00e9l\u00e9ments respectifs dans le document, attribu\u00e9s dans le fichier HTML avec l'attribut id.<\/p>\n
Ensuite, nous avons besoin que l\u2019application r\u00e9agisse lorsque le texte est modifi\u00e9\u00a0:<\/p>\n
zone de texte.addEventListener("saisir"<\/span>, fonction<\/span>(ev<\/span>) <\/span>{ localStorage.setItem("texte"<\/span>, valeur cible ev); update_counts(ev.target.value); });\r\n<\/code><\/pre>\nUn \u00e9couteur d'\u00e9v\u00e9nements est une fonction que JavaScript ex\u00e9cutera automatiquement lorsqu'un certain \u00e9v\u00e9nement se produit. Dans ce cas, nous attachons un \u00e9couteur au n\u0153ud textarea, qui est ex\u00e9cut\u00e9 lorsque l'\u00e9v\u00e9nement \u00ab\u00a0input\u00a0\u00bb se produit. C'est-\u00e0-dire lorsque quelqu'un interagit avec la zone de texte.<\/p>\n
Ensuite, nous utilisons l\u2019API Web Storage pour enregistrer le contenu actuel de la zone de texte, qui provient de ev.target.value. Dans cette structure, ev est un objet repr\u00e9sentant l'\u00e9v\u00e9nement qui a d\u00e9clench\u00e9 l'\u00e9couteur, ev.target est le n\u0153ud qui a re\u00e7u l'\u00e9v\u00e9nement et ev.target.value est le texte de cette zone de texte.<\/p>\n
La m\u00e9thode setItem prend deux param\u00e8tres\u00a0: un nom de cl\u00e9 \u00e0 associer aux donn\u00e9es et les donn\u00e9es r\u00e9elles \u00e0 stocker.<\/p>\n
Ensuite, nous appelons update_counts(), en passant le m\u00eame texte. Nous expliquerons cette fonctionnalit\u00e9 dans un instant.<\/p>\n
Maintenant que nous enregistrons le texte, vous souhaiterez le charger \u00e0 nouveau lorsque l'application s'ouvre ou se recharge. Nous pouvons nous en occuper en utilisant un autre \u00e9couteur\u00a0:<\/p>\n
fen\u00eatre<\/span>.addEventListener("charger"<\/span>, fonction<\/span>(ev<\/span>) <\/span>{\r\n var<\/span> texte = localStorage.getItem("texte"<\/span>); textarea.value = texte; update_counts(texte); });\r\n<\/code><\/pre>\nCet \u00e9couteur g\u00e8re l'\u00e9v\u00e9nement de chargement qui se produit sur l'objet fen\u00eatre, une repr\u00e9sentation de niveau sup\u00e9rieur de la fen\u00eatre du navigateur. Lorsque la fen\u00eatre se charge, un appel \u00e0 getItem() renvoie la valeur de texte stock\u00e9e \u00e0 partir du stockage local. Ce code d\u00e9finit ensuite la valeur de la zone de texte sur le texte charg\u00e9 et, comme l'\u00e9couteur ci-dessus, appelle update_counts() avec ce texte.<\/p>\n
Le travail restant est effectu\u00e9 dans la fonction update_counts() qui ressemble \u00e0 ceci\u00a0:<\/p>\n
fonction<\/span>\u00a0update_counts<\/span>(texte<\/span>) <\/span>{ chars.innerHTML = texte.length; mots.innerHTML = texte.split(' '<\/span>).longueur; }\r\n<\/code><\/pre>\nContrairement \u00e0 une zone de texte, le texte normal n'a pas de propri\u00e9t\u00e9 de valeur, nous d\u00e9finissons donc la propri\u00e9t\u00e9 innerHTML \u00e0 la place. La propri\u00e9t\u00e9 de longueur d'une cha\u00eene est une propri\u00e9t\u00e9 simple en lecture seule qui nous donne le nombre de caract\u00e8res.<\/p>\n
text.split(' ') divise la cha\u00eene au niveau des caract\u00e8res d'espacement, renvoyant le r\u00e9sultat sous forme de tableau de cha\u00eenes. Comme les cha\u00eenes, les tableaux ont une propri\u00e9t\u00e9 de longueur qui nous donne le nombre d'\u00e9l\u00e9ments dans un tableau.<\/p>\n
Cependant, si vous testez ce code, vous remarquerez peut-\u00eatre quelques erreurs\u00a0:<\/p>\n
- \n
- Il ne comptera pas correctement un mot seul sur une ligne, car il n'y a pas de caract\u00e8res d'espace autour de lui.<\/li>\n
- Sans aucun texte, il signalera un seul mot en raison du fonctionnement de la division.<\/li>\n<\/ol>\n
Pour r\u00e9soudre le premier probl\u00e8me, vous pouvez utiliser une expression r\u00e9guli\u00e8re (\\s signifie \u00ab\u00a0un caract\u00e8re vide\u00a0\u00bb) au lieu d'un espace. Pour r\u00e9soudre le deuxi\u00e8me probl\u00e8me, filtrez les cha\u00eenes vides du r\u00e9sultat\u00a0:<\/p>\n
mots.innerHTML = texte.split(\/\\s\/<\/span>).filtre(fonction<\/span>(n<\/span>) <\/span>{ retour<\/span> n != ''<\/span>; }).longueur;\r\n<\/code><\/pre>\nSi vous ne comprenez pas enti\u00e8rement cette ligne, consultez les pages MDN pour diviser<\/a> et filtre<\/a>.<\/p>\n
![\"L'application](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_129_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\n
\n