IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)
Voir le flux RSS

danielhagnoul

Comment dévoiler lettre par lettre un message caché ?

Noter ce billet
2 Commentaires
par
danielhagnoul
, 21/02/2018 à 15h57 (1603 Affichages)
J'utilise un générateur ES2015 pour construire le message caché. Lorsque l'utilisateur active un bouton, il actionne l'itérateur qui appelle le générateur, lequel modifie le message caché en dévoilant une lettre au hasard. Lorsque le message est totalement dévoilé, le bouton est rendu inactif ( disabled ).

Pour cacher le message j'utilise str.replace( /[A-za-z0-9\u00C0-\u00FF]/g, "*" ), // \u00C0-\u00FF pour les à, é, è, etc.

Le générateur est assez simple, il parcourt l' Array arIndex. Pour construire arIndex on utilise la fonction kBrouilleArray() de dvjhUtilities-1.5.1.js.

Attention : un message caché se compose au minimum de deux lettres !

Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*
 * Pour remplacer une partie d'un String
 */ 
String.prototype.replaceAt = function( index, replacement ){
	return this.substr( 0, index ) + replacement + this.substr( index + replacement.length );
}
 
/*
 * Générateur dévoilant un message lettre par lettre
 */
function* donneResponse( str ){
	const
		strLength = str.length;
 
	let 
		message = str.replace( /[A-za-z0-9\u00C0-\u00FF]/g, "*" ), // \u00C0-\u00FF pour les à, é, è, etc.
		arIndex = kBrouilleArray( Array.from( new Array( strLength ), ( item, i ) => i ) ); // dans dvjhUtilities-1.5.1.js
 
	for ( const index of arIndex ){
		if ( str[ index ] === " " ) continue;
		yield message = message.replaceAt( index, str[ index ] );
	}
}
 
/*
 * Itérateur mettant en oeuvre le générateur donneMessage
 */ 
let response = donneResponse( "À Édouart 4 baron du néant" );

Exeemple :

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
	<title>Test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
                
                
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/locale/fr.js"></script>
	<script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.5.1.js"></script>
	<script>
    'use strict';
 
                document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
                        // code du test
                
                
                        // fin code du test
                        
                }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        /*
                         * Pour remplacer une partie d'un String
                         */ 
                        String.prototype.replaceAt = function( index, replacement ){
                                return this.substr( 0, index ) + replacement + this.substr( index + replacement.length );
                        }
                        
                        /*
                         * Générateur dévoilant un message lettre par lettre
                         */
                        function* donneResponse( str ){
                                const
                                        strLength = str.length;
                                
                                let 
                                        message = str.replace( /[A-za-z0-9\u00C0-\u00FF]/g, "*" ), // \u00C0-\u00FF pour les à, é, è, etc.
                                        arIndex = kBrouilleArray( Array.from( new Array( strLength ), ( item, i ) => i ) ); // dans dvjhUtilities-1.5.0.js
                                
                                for ( const index of arIndex ){
                                        if ( str[ index ] === " " ) continue;
                                        yield message = message.replaceAt( index, str[ index ] );
                                }
                        }
                        
                        /*
                         * Itérateur mettant en oeuvre le générateur donneMessage
                         */ 
                        let response = donneResponse( "À Édouart 4 baron du néant" );
                        
                        /*
                         * Gestionnaire d'événement "donne une lettre"
                         */ 
                        const
                                elemDemo = document.querySelector( "#demo" ),
                                elemBtnIndice = document.querySelector( "#btnIndice" );
                        
                        elemBtnIndice.addEventListener( "click", ev => {
                                let message = response.next();
                                
                                if ( ! message.done ){
                                        elemDemo.textContent = message.value;
                                } else {
                                        elemDemo.setAttribute( "disabled", true );
                                }
                        }, false );
 
                        // fin code du test
                                                
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
		<p id="demo"></p>
		<button id="btnIndice">Donner une lettre</button>
 
	</main>
</body>
</html>

Nom : 88x31.png Affichages : 259 Taille : 1,4 Ko Licence Creative Commons Attribution 2.0 Belgique

Envoyer le billet « Comment dévoiler lettre par lettre un message caché ? » dans le blog Viadeo Envoyer le billet « Comment dévoiler lettre par lettre un message caché ? » dans le blog Twitter Envoyer le billet « Comment dévoiler lettre par lettre un message caché ? » dans le blog Google Envoyer le billet « Comment dévoiler lettre par lettre un message caché ? » dans le blog Facebook Envoyer le billet « Comment dévoiler lettre par lettre un message caché ? » dans le blog Digg Envoyer le billet « Comment dévoiler lettre par lettre un message caché ? » dans le blog Delicious Envoyer le billet « Comment dévoiler lettre par lettre un message caché ? » dans le blog MySpace Envoyer le billet « Comment dévoiler lettre par lettre un message caché ? » dans le blog Yahoo

Mis à jour 08/06/2018 à 11h42 par danielhagnoul (Licence)

Catégories
Javascript , Développement Web , ES2015

Commentaires

  1. Avatar de LittleWhite
    • |
    • permalink
    Hello,

    J'aime bien ce genre de chose. Mais je n'ai pas l'impression, où je n'ai pas compris comment cela été remplacé au hasard.
    Sinon, une petite page de démo serait cool.
  2. Avatar de danielhagnoul
    • |
    • permalink


    Dans mon bloc j'utilise souvent les ressources des billets précédents, c'est pourquoi je n'explique pas les codes "élémentaires" à chaque fois.

    On construit un Array avec Array.from(), voir : https://www.developpez.net/forums/bl...ns-array-from/

    La part de hasard dans l'Array arIndex est apportée par kBrouilleArray, code dans : https://www.developpez.net/forums/bl...ties-1-5-0-js/

    Cette fonction utilise kIntRandom (dans le même fichier).

    Ces deux fonctions sont très anciennes, je les avais mises au point en juin 2010 pour tester Alea avec un générateur de mots de passe, c'est ici : https://www.developpez.net/forums/d9...e/#post5295714 et ici : http://danielhagnoul.developpez.com/...motdepasse.php

    Pour comprendre le fonctionnement interne de ces fonctions (assez simple), je pense qu'il faut copier-coller leurs codes et les tester de différentes manières vous-même.
  3. Avatar de LittleWhite
    • |
    • permalink
    En effet, je ne passe pas assez souvent sur le blog pour avoir vu tous les codes .