Créez votre première application web : notes + compteur facilement et rapidement 📝⚡

Se lancer dans la programmation peut sembler décourageant, avec autant de langages, de frameworks et de méthodologies à prendre en compte. Parfois, il peut sembler plus simple de tout déléguer à une IA. Ne t'inquiète pas! La programmation pour le Web peut être simple, amusante et, surtout, entièrement gratuite ! 🌐✨

Ce que vous allez construire

En suivant ce tutoriel, vous créerez une application Web simple pour stocker des notes de texte et compter les caractères et les mots.

L'application conservera les données, elle se souviendra donc du texte lorsque vous rechargerez ou rouvrirez la page. Cela signifie que vous disposerez d'un moyen pratique d'enregistrer tout texte auquel vous souhaitez faire référence ultérieurement, comme des adresses, des URL, etc. 📄🔗

Un exemple d’application Web simple basée sur du texte qui affiche des notes, notamment une entrée de calendrier et une liste d’URL.

Il compte également les caractères et les mots, ce qui constitue une bonne introduction à la gestion des chaînes (texte). Bien sûr, l'application est très simple : c'est le but ! Mais avec ce tutoriel, vous apprendrez les bases du développement d'une application Web, et le monde sera alors à vous. 🦪💻

Comment allez-vous le construire ?

Bien que les applications Web soient très diverses, elles impliquent généralement trois technologies principales : HTML, CSS et JavaScript. Il est essentiel que vous compreniez leurs rôles avant de commencer. 📚

HTML : Hypertext Markup Language vous permet de définir 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 élément d'une liste, par exemple.
CSS : 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érale à côté de votre article principal. 🎨
JavaScript : Avec ce langage de programmation, vous pouvez ajouter des fonctionnalités à 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émenter un traitement de texte ou un jeu vidéo à part entière. 🎮

Il site web.dev (écrit par les membres de l'équipe Chrome) et MDN, le réseau des développeurs Mozilla, sont deux excellentes sources d’informations sur les technologies Web fondamentales.

La page d'accueil du site web.dev avec des ressources d'apprentissage pour HTML, CSS et JavaScript.

La structure de l'application

L'application que vous allez créer sera composée de trois fichiers simples : index.html, styles.css et script.js. 🗂️

Il n'y a aucune exigence particulière pour exécuter l'application, vous avez juste besoin d'un navigateur Web. Il n'y a pas de fonctionnalité 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é, vous pouvez ouvrir le fichier index.html directement dans votre navigateur et tout s'arrangera. 😊

Il est important de noter que cette application enregistre votre texte sans l'écrire dans un fichier spécifique sur le disque, car JavaScript ne peut pas accéder au système de fichiers. Utilise l'API Web Storage, une alternative puissante aux cookies. 🍪💾

Comment créer le preneur de notes

Créez les trois fichiers suivants dans le même répertoire, puis ouvrez index.html dans un navigateur Web. Alternativement, vous pouvez télécharger les fichiers à partir de ce dépôt GitHub. 📥

Construire la structure avec HTML

Le fichier index.html définit la structure du contenu de votre application en HTML. Incluez des références aux deux autres fichiers afin qu'un navigateur puisse les combiner pour le produit final.

Comme tous les documents HTML, la structure de niveau supérieur comprend une section d'en-tête contenant des métadonnées et une section de corps contenant le contenu réel qui apparaîtra sur la page :

HTML>
<HTML>
<tête>
    ...
tête>

<corps>
…
corps>
HTML>

Les métadonnées dans l'en-tête sont très brèves, avec juste un titre de page (qui apparaît dans la barre de titre de votre navigateur) et une référence au fichier styles.css :

    <titre>Textetitre>
    <lien rel=« feuille de style » href=« styles.css » />

Le corps est plus compliqué, mais il n'y a que quelques parties importantes :

    <div identifiant="comptoir">
        mots: <portée identifiant="mots">0portée>
        / caractères : <portée identifiant="chars">0portée>
    div>

<zone de texte identifiant="texte" mise au point automatique=«1»>zone de texte>

<scénario source=«script.js»>scénario>

L'élément div contient le nombre de mots et de caractères de l'application. Il sera situé en haut de l'application Web et sera mis à jour à chaque fois que le texte change.

Notez les attributs id, qui sont essentiels à l’opération. La valeur d'un identifiant doit être unique, afin que l'application puisse l'utiliser pour identifier un élément spécifique. Cela peut nous aider à styliser ces éléments et également à les cibler lors de l’ajout de fonctionnalités.

La zone de texte est un élément de formulaire intégré qui vous permet de saisir du texte simple dans un navigateur. Grâce à l'attribut autofocus, vous serez prêt à écrire dès que la page se charge. Enfin, la page fait référence au fichier javascript, script.js.

À ce stade, vous pouvez ouvrir le fichier index.html dans un navigateur. Cela ne fera rien pour le moment, et cela n'aura même pas l'air bien, mais il est utile de tester votre application à chaque étape pour vous assurer que les bases fonctionnent comme prévu.

Une vue de l'application Web de prise de notes avec les styles de navigateur par défaut, affichant tout regroupé dans le coin supérieur gauche.

Les rendre beaux avec CSS

CSS vous permet de styliser des parties de votre page Web en ciblant ces parties et en spécifiant des valeurs pour des propriétés telles que la taille de la police et la couleur d'arrière-plan. Cet exemple d'application n'a pas besoin d'une conception très raffinée car son interface est très basique. Cependant, nous pouvons adoucir les aspérités avec une touche de style. 🎨✨

Tout d’abord, stylisez le corps pour définir la conception globale :

corps {
    marge: 0;
    rembourrage: 0;
    afficher: grille;
    hauteur minimale: 100vh;
    grille-modèle-lignes: contenu minimal 1fr;
}

Ce CSS utilise la disposition de la grille pour positionner le nombre de mots et de caractères dans une ligne étroite au-dessus de la zone de texte. La propriété grid-template-rows spécifie que la ligne de comptage doit être aussi courte que possible (min-content) et que la zone de texte doit remplir l'espace restant (1fr).

La ligne de compteur a un style de base pour la différencier du reste du texte, principalement par son arrière-plan :

Compteur # {
    famille de polices: sans empattement;
    couleur d'arrière-plan: #f7f7f7;
    alignement du texte: centre;
    largeur: 100%;
    rembourrage: 0.5em 0;
}

Enfin, la zone de texte est conçue pour afficher un texte lisible avec suffisamment d'espace pour respirer. La ligne séparant les comptes du texte est en fait la bordure supérieure de cette zone de texte.

zone de texte {
    largeur: 100%;
    hauteur: 100%;
    taille de police: 16pt;
    rembourrage: 1dans;
    dimensionnement des boîtes: bordure-boîte;
    contour: 0;
    frontière: aucun;
    bordure supérieure: 1px solide #999;
}

L'application de prise de notes avec des styles personnalisés affiche la barre de décompte en haut avec une zone de texte pleine taille en dessous.

Ajout de fonctionnalités avec JavaScript

Une fois la structure et le style en place, vous êtes prêt à ajouter des fonctionnalités : le code qui permet à cette application simple de faire réellement quelque chose. 🛠️

Avant de commencer à écrire même le code le plus simple, c'est une bonne idée de comprendre ce que vous voulez qu'il fasse. Dans ce cas, il n’y a que quelques exigences générales :

Enregistrez le texte saisi et rechargez-le si nécessaire.
Mettez à jour le nombre de caractères et de mots pour fournir des statistiques en temps réel. 📊

Ces deux exigences impliquent la mise à jour d’éléments dans le document. Le script commence donc par obtenir des références à ces nœuds à l'aide de la méthode getElementById :

constante mots = document.getElementById("mots");
constante caractères = document.getElementById("chars");
constante zone de texte = document.getElementById("texte");

Notez que les mots, les caractères et le texte sont les identifiants de leurs éléments respectifs dans le document, attribués dans le fichier HTML avec l'attribut id.

Ensuite, nous avons besoin que l’application réagisse lorsque le texte est modifié :

zone de texte.addEventListener("saisir", fonction(ev) { localStorage.setItem("texte", valeur cible ev); update_counts(ev.target.value); });

Un écouteur d'événements est une fonction que JavaScript exécutera automatiquement lorsqu'un certain événement se produit. Dans ce cas, nous attachons un écouteur au nœud textarea, qui est exécuté lorsque l'événement « input » se produit. C'est-à-dire lorsque quelqu'un interagit avec la zone de texte.

Ensuite, nous utilisons l’API 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ésentant l'événement qui a déclenché l'écouteur, ev.target est le nœud qui a reçu l'événement et ev.target.value est le texte de cette zone de texte.

La méthode setItem prend deux paramètres : un nom de clé à associer aux données et les données réelles à stocker.

Ensuite, nous appelons update_counts(), en passant le même texte. Nous expliquerons cette fonctionnalité dans un instant.

Maintenant que nous enregistrons le texte, vous souhaiterez le charger à nouveau lorsque l'application s'ouvre ou se recharge. Nous pouvons nous en occuper en utilisant un autre écouteur :

fenêtre.addEventListener("charger", fonction(ev) {
    var texte = localStorage.getItem("texte"); textarea.value = texte; update_counts(texte); });

Cet écouteur gère l'événement de chargement qui se produit sur l'objet fenêtre, une représentation de niveau supérieur de la fenêtre du navigateur. Lorsque la fenêtre se charge, un appel à getItem() renvoie la valeur de texte stockée à partir du stockage local. Ce code définit ensuite la valeur de la zone de texte sur le texte chargé et, comme l'écouteur ci-dessus, appelle update_counts() avec ce texte.

Le travail restant est effectué dans la fonction update_counts() qui ressemble à ceci :

fonction update_counts(texte) { chars.innerHTML = texte.length; mots.innerHTML = texte.split(' ').longueur; }

Contrairement à une zone de texte, le texte normal n'a pas de propriété de valeur, nous définissons donc la propriété innerHTML à la place. La propriété de longueur d'une chaîne est une propriété simple en lecture seule qui nous donne le nombre de caractères.

text.split(' ') divise la chaîne au niveau des caractères d'espacement, renvoyant le résultat sous forme de tableau de chaînes. Comme les chaînes, les tableaux ont une propriété de longueur qui nous donne le nombre d'éléments dans un tableau.

Cependant, si vous testez ce code, vous remarquerez peut-être quelques erreurs :

Il ne comptera pas correctement un mot seul sur une ligne, car il n'y a pas de caractères d'espace autour de lui.
Sans aucun texte, il signalera un seul mot en raison du fonctionnement de la division.

Pour résoudre le premier problème, vous pouvez utiliser une expression régulière (\s signifie « un caractère vide ») au lieu d'un espace. Pour résoudre le deuxième problème, filtrez les chaînes vides du résultat :

    mots.innerHTML = texte.split(/\s/).filtre(fonction(n) { retour n != ''; }).longueur;

Si vous ne comprenez pas entièrement cette ligne, consultez les pages MDN pour diviser et filtre.

L'application Web avec un exemple de texte, affichant le nombre précis de caractères et de mots.

Vous pouvez créer de nombreuses applications Web utiles avec seulement quelques fichiers. Vous pouvez également étendre cette application de notes simple pour ajouter plus de fonctionnalités. Par exemple, vous pouvez utiliser le propriété window.location pour récupérer l'URL actuelle et prendre en charge plusieurs notes en faisant varier le nom que vous transmettez à localStorage.setItem. 🗒️🌍

Mots clés: Contenu à feuilles persistantes Conseils techniques