Name: Tremplin Numérique
Price range: $$$

Sommaire

Liens rapides

Comment créer le preneur de notes

Se lancer dans le codage peut sembler intimidant, avec d'innombrables langages, frameworks et méthodologies à prendre en compte. Il peut même sembler plus facile de tout confier à une IA. Rassurez-vous : la programmation pour le Web peut être simple, amusante et, mieux encore, totalement gratuite !

Ce que vous construirez

À la suite de ce didacticiel, vous allez créer une application Web simple pour stocker des notes textuelles et compter les caractères et les mots qu'elles contiennent.

L'application conserve les données, elle se souvient donc du texte lorsque vous actualisez la page ou la rouvrez. Cela signifie que c'est un moyen pratique de conserver tout texte auquel vous souhaiterez peut-être vous référer plus tard, comme des adresses, des URL, etc.

Il compte également les caractères et les mots, ce qui constitue une introduction utile au travail avec des chaînes (texte). Bien sûr, l’application est très simple : c’est là le but. Mais, avec ce didacticiel, vous apprendrez les concepts de base derrière la création d’une application Web, et le monde sera alors votre huître.

Comment vous allez le construire

Bien que les applications Web diffèrent considérablement, elles impliquent généralement trois technologies de base : HTML, CSS et JavaScript. Ces technologies jouent un rôle essentiel que vous devez comprendre avant de commencer.

HTML : HyperText Markup Language vous permet de définir la structure de votre contenu. En l'utilisant, vous pouvez marquer du 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 le langage HyperText Markup Language, vous pouvez colorer un certain paragraphe en vert, mettre tous vos liens en gras ou positionner une barre latérale à côté de votre article principal.
JavaScript : en utilisant ce langage de programmation, vous pouvez ajouter des fonctionnalités à votre page Web. Vous pouvez faire en sorte que les 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 complet.

Le site web.dev (écrit par des membres de l'équipe Chrome) et MDN, le Mozilla Developer Network, sont deux excellentes sources d'informations sur les principales technologies Web.

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, tout ce dont vous avez besoin est 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 fonctionnera.

Il est important de noter que cette application enregistre votre texte sans écrire dans un fichier spécifique sur le disque, puisque JavaScript ne peut pas accéder au système de fichiers. Pour ce faire, il 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 depuis ce référentiel GitHub.

Construire la structure avec HTML

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

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

html>
<html>
<head>
    ...
head><body>
    ...
body>
html>

Les métadonnées dans l'en-tête sont très courtes, 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 :

    <title>Texttitle>
    <link rel="stylesheet" href="styles.css" />

Le corps est plus complexe, mais il ne comporte que quelques parties importantes :

    <div id="counter">
        words: <span id="words">0span>
        /
        characters: <span id="chars">0span>
    div>    <textarea id="text" autofocus="1">textarea>
    <script src="script.js">script>

L'élément div (« division ») contient le nombre de mots et de caractères de l'application. Il sera placé 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 lorsque nous ajoutons des fonctionnalités.

La zone de texte est un élément de formulaire intégré qui vous permet de saisir du texte brut dans un navigateur. Avec l'attribut autofocus, il sera prêt à être saisi dès le chargement de la page. 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 correct, mais il est utile de vérifier votre application à chaque étape pour vous assurer que les bases fonctionnent comme prévu.

Rendre les choses belles avec CSS

CSS vous permet de modifier le style de certaines 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 de beaucoup de conception fine car son interface est très basique. Néanmoins, nous pouvons nettoyer un peu les aspérités avec une touche de style.

Commencez par styliser le corps pour définir la disposition globale :

body {
    margin: 0;
    padding: 0;
    display: grid;
    min-height: 100vh;
    grid-template-rows: min-content 1fr;
}

Ce CSS utilise une disposition en grille pour positionner le nombre de mots et de caractères sur 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 du compteur a un style de base pour la différencier du reste du texte, principalement via son arrière-plan :

#counter {
    font-family: sans-serif;
    background-color: #f7f7f7;
    text-align: center;
    width: 100%;
    padding: 0.5em 0;
}

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

textarea {
    width: 100%;
    height: 100%;
    font-size: 16pt;
    padding: 1em;
    box-sizing: border-box;
    outline: 0;
    border: none;
    border-top: 1px solid #999;
}

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 le code le plus simple, il est judicieux de comprendre ce que vous voulez qu'il fasse. Dans ce cas, il y a juste 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 direct.

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

const words = document.getElementById("words");
const chars = document.getElementById("chars");
const textarea = document.getElementById("text");

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é :

textarea.addEventListener("input", function(ev) {
    localStorage.setItem("text", ev.target.value);
    update_counts(ev.target.value);
});

Un écouteur d'événement 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 s'exécute lorsque l'événement « input » se produit. C'est effectivement 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, à partir 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.

Après cela, nous appelons update_counts(), en lui transmettant le même texte. Nous expliquerons cette fonction dans un instant.

Maintenant que nous enregistrons le texte, nous voudrons le charger à nouveau lorsque l'application sera ouverte ou actualisée. Nous pouvons nous en occuper en utilisant un autre écouteur :

window.addEventListener("load", function(ev) {
    var text = localStorage.getItem("text");
    textarea.value = text;
    update_counts(text);
});

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

Le travail restant s'effectue dans la fonction update_counts() qui ressemble à ceci :

function update_counts(text) {
    chars.innerHTML = text.length;
    words.innerHTML = text.split(' ').length;
}

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

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

Cependant, si vous essayez ce code, vous remarquerez peut-être quelques bugs :

Il ne comptera pas correctement un mot seul sur une ligne, car il n'y a pas de caractères d'espace de chaque côté.
Sans aucun texte, il rapportera un seul mot en raison du fonctionnement de la division.

Pour résoudre le premier problème, vous pouvez diviser sur une expression régulière (s signifie « un caractère d'espacement ») au lieu de l'espace. Pour corriger le second, filtrez les chaînes vides du résultat :

    words.innerHTML = text.split(/s/).filter(function(n) { return n != ''; }).length;

Si vous ne comprenez pas entièrement cette ligne, consultez les pages MDN pour le fractionnement et le filtrage.

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 la 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.