cClaude.rocks ☕ Le blog

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

Menu
mai
18
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.

Cette fois, nous avons vraiment les connaissances essentielles en HTML, en CSS et en Javascript

ඏ
  • Exercice précédent

    Pour voir la solution, demander avec le bouton droit de votre souris de regarder le code source dans le cadre (« frame » en anglais) ci-dessous.

Ce qu’il manque…

Pas grand-chose en réalité,

  • Il manque une zone où il est possible d’éditer le texte de départ. La solution nous est offert par le langage HTML en utilisant la balise ≺textarea≻.

  • On va en profiter pour séparer un peu plus le code HTML, CSS et Javascript.

  • Ajouter quelques couleurs.

  • Ajouter quelques modèles d’image.

Sortir le code CSS

  • C’est simple, il suffit de créer un fichier nommé exemple.css à côté du fichier HTML et de copier ce qui se trouve entre les balises ≺style≻ dedans.

Ensuite dans le fichier HTML on remplace la balise ≺style≻ et son contenu par :

<link rel="stylesheet" href="exemple.css">

La balise ≺link≻ doit se trouver dans l’élément ≺head≻.

Sortir le code Javascript

La même manœuvre est similaire ; créer un fichier exemple.js à côté du fichier HTML et de copier ce qui se trouve entre les balises ≺script≻ dedans.

Ensuite dans le fichier HTML on remplace la balise ≺script≻ et son contenu par :

<script src="exemple.js" type="text/javascript"></script>

Vous pouvez utiliser plusieurs fichiers Javascript, il suffit de mettre autant de balises ≺script≻ que nécessaire.

Si vous utilisez plusieurs fichiers Javascript, vous devrez être vigilant à l’ordre, particulièrement lorsque certains dépendent du contenu d’autres.

Utilisation de ≺textarea≻

  • La balise ≺textarea≻ définit une zone de saisie multi-ligne. L’élément ≺textarea≻ est souvent utilisé dans un formulaire, pour collecter des entrés utilisateurs telles que des commentaires ou des critiques.

  • Une zone de texte peut contenir un nombre illimité de caractères et le texte est rendu dans une police de largeur fixe (généralement « Courier »). Mais dans notre cas, ce n’est pas suffisant, on voudra une police de caractère de forme carré.

  • La taille d’une zone de texte est spécifiée par les attributs cols et rows (ou avec CSS).

  • L’attribut name est nécessaire pour référencer les données du formulaire après l’envoi du formulaire (si vous omettez l’attribut name, aucune donnée de la zone de texte ne sera soumise). Dans notre cas cela n’a aucune importance, puisqu’il n’y a pas d’envois du formulaire).

  • L’attribut id est nécessaire pour associer la zone de texte à une étiquette, ce qui permettra de retrouver l’élément depuis le code Javascript.

Cette balise s’utilise comme suit :

<textarea id="rawball" name="rawball" cols="15" rows="15"></textarea>

Pour utiliser une police de forme carrée, je vous propose d’ajouter cette ligne à votre code HTML :

<link rel="stylesheet" href="https://blog.cclaude.rocks/workshops/draw-pixell-ball/linux-biolinum-keyboard-cufonfonts-webfont/font.css">

Puis ce code dans votre feuille de style (votre fichier CSS) :

#rawball {
  font-family: 'Linux Biolinum Keyboard';
  font-weight: normal;
  font-size: 1.5em;
}
ඏ

Un autre parcours de texte avec Javascript

Nous avons déjà vous comment parcourt une chaîne de caractère, et je vous propose d’écrire un petit code permettant de convertir un texte comme suit : toutes les voyelles seront en minuscule et toutes les consonnes en majuscules.

Créer un nouveau fichier HTML contenant le code suivant :

<!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 — exo 3</title>
  </head>
  <body>

    <h2>Conversion de texte</h2>

    <textarea id="mon-texte" cols="15" rows="15">Mettre ici le texte de votre choix.</textarea>

    <button id="mon-bouton">Cliquez ici pour afficher le résultat.</button>

    <p id="mon-resultat"></p>

  <script src="javacript-parcours-de-chaine-de-caractere-v3.js" type="text/javascript"></script>
  </body>
</html>

Vous devez maintenant créer à côte du fichier HTML un fichier JavaScript nommé javacript-parcours-de-chaine-de-caractere-v3.js.

Pour récupérer le texte écrit dans la balise <textarea id="mon-texte"> vous devrez utiliser le code suivant :

document.getElementById('mon-texte').value

Voici une base pour ce fichier JavaScript qui vous permet de découvrir les méthodes toUpperCase() et toLowerCase() permettant de mettre en majuscule/minuscule une chaîne de caractère.

Mais vous noterez également une nouvelle notation utilisant switch, case, break et default, qui permet de faire plusieurs tests en même temps (une sorte de super if).

//
// javacript-parcours-de-chaine-de-caractere-v3.js
//

function conversionTexte( content ) {
  let resultat = ""; // Initialise la variable comme une chaîne de caractère vide.

  for (let i = 0; i < content.length; i++) {
    // On prend le « i »-ième caractère et on le passe en majuscule
    let ch = content.charAt(i).toUpperCase();

    switch( ch ) {
    case 'A': // Si c’est une lettre 'A'
    case 'E': // ou une lettre 'E'
    case 'I': // ou 'I'
    case 'O': // ou 'O'
    case 'U': // ou 'U'
    case 'Y': // ou 'Y'
      // on passe en minuscule
      ch = ch.toLowerCase();
      break;

    default:
      // Sinon on ne fait rien
      break;
    }

    // On ajoute en fin de chaîne notre calcul.
    resultat += ch;
  }

  // Retourne le résultat
  return resultat;
}

function afficheResultat() {
  //
  // À compléter : il faut récupérer la valeur du <textarea>, convertir le texte
  // puis l’afficher dans <p id="mon-resultat"></p>
  //
}

//
// À compléter : Ajouter un évènement au bouton de telle sorte que lorsqu’on clique dessus
// cela appelle la fonction « afficheResultat »
//
  • Résultat de cet exercice dans un nouvel onglet ⇝ 🔳.
  • Voir le code JavaScript : 📜.
ඏ

Écrivez votre éditeur de pixel-ball

Maintenant vous avez tous les éléments nécessaires pour écrire votre éditeur.

C’est à vous de jouer…

  • Je vous propose de commencer par écrire votre fichier HTML qui devra au minimum contenir un ≺textarea≻ ayant comme id « rawball » et un ≺div≻ ayant comme id « displayball ».

  • Ensuite créer un fichier JavaScript qui permet la récupération du texte et l’affichage du dessin à chaque fois que le contenu du ≺textarea≻ est modifié.

  • Enfin créer un fichier CSS avec les propriétés adaptées à votre code JavaScript.

ඏ

Une solution de l’atelier

  • Démo

    Pour voir la solution, demander avec le bouton droit de votre souris de regarder le code source dans le cadre (« frame » en anglais) ci-dessous.

ඏ

Références

L’atelier complet

ᦿ

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