cClaude.rocks ☕ Le blog

[Nouvelles technologies du libre, sciences et coups de gueule…]

Menu
mai
17
2021

Ce billet fait partie d’une série d’une dizaine billets : #atelier-web.

Cet atelier n’est pas prévu pour fonctionner sur les smartphones, certain exemples peuvent s’afficher de manière inattendue sur ces appareils.

Merci de laisser un commentaire si vous avez essayé ou fini cet atelier. Le commentaire ne sera pas publié si vous en faite la demande.

Qu'avont-nous besoin de faire en JavaScript dans le cadre de notre projet ?

Résumons

On part d’un texte ; et on doit ajouter en début de ligne l’élément <div <div class="ligne"> et en fin </div>.

Ensuite, nous doit remplacer les « lettres » par une séquence <span class="CLASSE_COULEUR"></span> (la chaîne « CLASSE_COULEUR » dépendant de la lettre).

...............
.....GGGG......
...GG....GG....
..G........G...
.G..........G..
.G..........G..
G.....RR.....G.
GRRRRR..RRRRRG.
G....R..R....G.
G.....RR.....G.
.G..........G..
.G..........G..
..G........G...
...GG....GG....
.....GGGG......
ඏ

Les besoins

Dans notre solution « à la main » nous avons fait des remplacements, pour notre solution nous garderont le texte d’origine et nous allons en créer un nouveau. Ainsi, nous aurons sur la page la version à base de caractères et la version à « graphique ».

  • Il faut que l’on sache parcourir un texte. C’est-à-dire, lire une chaîne de caractère (pouvant contenir plusieurs lignes), caractère par caractère.

  • Nous devront être capable d’ajouter un texte, à un texte préexistant et l’afficher.

Ceci va nous amener vers la notion de variable.

ඏ

Les variables JavaScript.

Je vous propose d’essayer ce code HTML

<div id="var1v1"></div>
<br/>
<div id="var2v1"></div>
<br/>
<div id="var3v1"></div>
<hr />
<div id="var1v2"></div>
<br/>
<div id="var2v2"></div>
<br/>
<div id="var3v2"></div>

avec ce code Javascript

let maPremiereVariable = "Voici un texte";
let maSecondeVariable = "Voici un texte\nsur deux lignes";
let maTroisièmeVariable = "Voici un texte HTML<br>sur deux lignes";

/* Inject la chaîne en tant que code HTML */
document.getElementById('var1v1').innerHTML = maPremiereVariable;
document.getElementById('var2v1').innerHTML = maSecondeVariable;
document.getElementById('var3v1').innerHTML = maTroisièmeVariable;

/* Inject la chaîne en tant que code texte simple (texte brut) */
document.getElementById('var1v2').innerText = maPremiereVariable;
document.getElementById('var2v2').innerText = maSecondeVariable;
document.getElementById('var3v1').innerText = maTroisièmeVariable;

Vous devriez avoir quelque chose comme cela:





On a créé 3 variables contenant du texte :

  • D’abord une chaîne de caractère toute simple,

  • La seconde variable contiens un saut de ligne standard encodé à l’aide de \n, lorsque cette variable est injectée comme du texte (à l’aide de la propriété .innerText) le saut de ligne est visible, autrement non.

  • La troisième variable contiens le code HTML <br> qui est comprise par le navigateur comme un saut de ligne lorsqu’on injecte la valeur comme du HTML avec la propriété .innerHTML, autrement le code HTML est affiché comme du texte.

ඏ

Parcourons un texte en JavaScript.

Cette partie de l’atelier étant un peu plus compliquée, je vous invite à lire intégralement ce billet avant de vous lancer dans l’exercice.

Je vous propose le code Javascript suivant :

const monTexte = "Que la force soit avec toi !";

function ajouteUnPointEntreChaqueLettre( content ) {
  let resultat = ''

  if( content.length > 0 ) {
    let ch = content.charAt(0); /* Le premier caractère à l’indice 0 */

    resultat = ch;
    }

  for (let i = 1; i < content.length; i++) {
    let ch = content.charAt(i);

    resultat += '.' + ch;
    }

  return resultat;
}

function afficheResultat() {
  document.getElementById('mon-resultat').innerHTML = ajouteUnPointEntreChaqueLettre( monTexte );
}

document.getElementById('mon-bouton').addEventListener( 'click', afficheResultat );

Écrivez le code HTML (ajoutez le code Javascript donné) permettant d’obtenir :

Convertion du texte:

Notez :

  • Que la variable « monTexte » est définie comme une constante à l’aide de const. Cela veut dire qu’il n’est pas possible d’en modifier le contenu. Aucun impact sur le code que vous avez à écrire

  • Que l’on initialise la variable « resultat » à une chaîne vide '' ou "" à l’aide du mot clé let.

  • Que le premier caractère de la chaîne à l’indice 0. Que l’on traite le premier caractère à part (dans ce cas) car on ne veut pas de point avant le premier caractère.

  • Que l’on parcourt la chaîne à l’aide la boucle for

  • Que l’on récupère la lettre à l’aide de la méthode charAt( index ).

  • Que l’on ajoute du texte à une variable à l’aide de l’opérateur d’affectation +=

  • Que la fonction « ajouteUnPointEntreChaqueLettre » retourne une chaîne de caractère à l’aide de return resultat.

Résultat de cet exercice dans un nouvel onglet ⇝ 🔳.

Puis, à l’aide du bouton droit de la souris, vous pouvez demander d’afficher le code source.

ඏ

Afficher la pixel-ball avec Javascript

Concernant la partie HTML

Le code sera minimaliste, le voici, il n’y a rien à modifier :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Ma première pixel-ball en Javascript</title>
    <style>

/* Quelque chose ici */

    </style>
  </head>
  <body>

    <h1>Ma première pixel-ball en Javascript</h1>

    <button id="afficher">Cliquez ici pour afficher la pixel-ball.</button>

    <div id="balle"></div>

<script>

/* Quelque chose ici */

</script>
  </body>
</html>

Concernant le code CSS,

Vous l’avez déjà écrit (je vous laisse chercher où), il suffit de faire un copier-coller.

Les plus rusés pourront légèrement l’adapter, en utilisant, par exemple, une classe couleur-R et une classe couleur-G.

Concernant Javascript…

Il y a un peu de travail, mais vous avez tous les connaissances nécessaires avec ce billet et le précédent.

Nous allons avoir besoin d’une balle au format texte, que nous mettrons dans une variable, plus précisément la constante : « ASCII_BALL_DEFAULT »

const ASCII_BALL_DEFAULT =
    "..............." + "\n" +
    ".....GGGG......" + "\n" +
    "...GG....GG...." + "\n" +
    "..G........G..." + "\n" +
    ".G..........G.." + "\n" +
    ".G..........G.." + "\n" +
    "G.....RR.....G." + "\n" +
    "GRRRRR..RRRRRG." + "\n" +
    "G....R..R....G." + "\n" +
    "G.....RR.....G." + "\n" +
    ".G..........G.." + "\n" +
    ".G..........G.." + "\n" +
    "..G........G..." + "\n" +
    "...GG....GG...." + "\n" +
    ".....GGGG......";

Nous allons avoir besoin de parcourir la chaîne de caractère :

  let resultat = "";

  for (let i = 0; i < ASCII_BALL_DEFAULT.length; i++) {
    let ch = ASCII_BALL_DEFAULT.charAt(i);

    /* … */
    }

Nous devons être capables de détecter un saut de ligne :

    /* … */
    let ch = ASCII_BALL_DEFAULT.charAt(i);

    if( ch == '\n' ) {
      resultat += /* quelque chose */;
    }
    else {
      /* Il faudrat également traiter le cas du caractère point (pour le blanc) */

      resultat += /* quelque chose avec la variable ch */;
    }
    /* … */
ඏ

L’atelier complet

ᦿ

ℹ 2006 - 2024 | 🏠 Accueil du domaine | 🏡 Accueil du blog