IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[Article] Coder en JavaScript avec seulement six caractères


Sujet :

JavaScript

  1. #1
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 915
    Points
    79 915
    Par défaut [Article] Coder en JavaScript avec seulement six caractères


    Sylvain Pollet-Villard s'ennuyait sûrement le jour où il eut l'idée saugrenue de coder du JavaScript avec le moins de caractères possibles. Et pourtant, il l'a fait ! Il nous explique les différentes étapes de sa démarche qui aboutit à la rédaction d'un compilateur.

    Coder en JavaScript avec seulement six caractères

    N'hésitez pas à lui faire part de vos commentaires et remarques sur cette drôle de machinerie barbare.

  2. #2
    Membre émérite
    Avatar de Kaamo
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2007
    Messages
    1 165
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 165
    Points : 2 778
    Points
    2 778
    Par défaut
    Pour information, voici le sujet de la réflexion.

    Sylvain, as-tu pu échanger avec le créateur de JSFuck ?

  3. #3
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Je lui ai lâché un message sur le github du projet, mais pas de réponse pour le moment

    Si on voulait vraiment pousser la réflexion jusqu'au bout, il faudrait travailler l'optimisation de toute la table de caractères, puis comparer la taille du code généré avec ou sans l'usage de String.fromCharCode
    Mais je crois que ça dépasse le seuil d'intérêt que l'on puisse légitimement prêter à ce problème

  4. #4
    Membre confirmé
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Octobre 2005
    Messages
    244
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Philippines

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2005
    Messages : 244
    Points : 609
    Points
    609
    Par défaut
    Bravo bon boulot!

    En plus de la considération ludique, je trouve que c'est très instructif ce genre d'exploit!

  5. #5
    Membre chevronné

    Profil pro
    Account Manager
    Inscrit en
    Décembre 2006
    Messages
    2 301
    Détails du profil
    Informations personnelles :
    Localisation : France, Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Account Manager

    Informations forums :
    Inscription : Décembre 2006
    Messages : 2 301
    Points : 1 751
    Points
    1 751
    Par défaut
    Très rigolo !!!

    Existe-t-il un équivalent pour le langage Python ou est-ce propre à JS ?

  6. #6
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Je ne connais pas assez bien le Python pour répondre, mais je suis sûr que d'autres s'amuseraient beaucoup à faire la même chose sur d'autres langages

    Citation Envoyé par Quentin de Serres-Justiniac
    Bonjour,

    Après m'être délecté de la lecture de cet article : http://sylvainpv.developpez.com/tuto...-6-caracteres/ qui m'a fait sourire bon nombre de fois.
    Je m'interrogeais sur l'utilité d'une telle approche. Hormis le côté ludique et la prouesse technique, est-ce que cela a un intérêt ?
    Une fois compressé le code est-il plus léger ? Vu le peu de caractères différent, je me dis qu'un bon GZ fera sans doute des ravages dans la taille du code. Ceci dit l'extrême lourdeur de l'écriture pourrait je pense alourdir de façon bien trop considérable le code pour que même minifié et gzippé ce soit encore trop lourd.
    (Je laisse de côté volontairement la portabilité).

    Bonne journée et merci pour cet article fun à lire le matin en arrivant au bureau
    En effet hormis le côté ludique, il n'y a strictement aucun intérêt pratique. Comme je le dis en avant-propos : "Si le défi ne présente pas d'intérêt en soi, il permet en revanche de manière très ludique d'appréhender divers aspects du langage sous un angle tout à fait inhabituel"

    Le code généré est largement plus long que l'original, comme tu as pu le constater si tu as essayé le compilateur. Eventuellement on pourrait s'y intéresser à des fins d'obfuscation de code extrême, mais je ne pense pas que ce soit la meilleure approche.

  7. #7
    OPi
    OPi est déconnecté
    Membre actif
    Avatar de OPi
    Homme Profil pro
    en recherche d'emploi
    Inscrit en
    Août 2005
    Messages
    74
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : Belgique

    Informations professionnelles :
    Activité : en recherche d'emploi
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Août 2005
    Messages : 74
    Points : 245
    Points
    245
    Par défaut
    Pour Python cela me semble impossible, cela ne peut se faire qu'avec des langages à typage faible.

    J'ai généré automatiquement les codes bien parenthésés d'une certaine longueur qui sont évaluées correctement.
    et donnent aussi le nombre 1.

    Code : 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
    object		6	[[[]]]
    object		4	[[]]
    object		2	[]
    undefined	undefined	6	[][[]]
    string		5	[]+[]
    string	false	6	[]+![]
    object	0	5	[+[]]
    object	false	5	[![]]
    object	true	6	[!+[]]
    object	true	6	[!![]]
    number	0	5	+[[]]
    number	0	3	+[]
    string	0	6	+[]+[]
    number	NaN	6	+[![]]
    number	1	5	+!+[]
    number	1	5	+!![]
    boolean	false	5	![[]]
    boolean	false	3	![]
    string	false	6	![]+[]
    boolean	true	6	!+[[]]
    boolean	true	4	!+[]
    boolean	true	4	!![]
    Plus de résultats dans les fichiers attachés.

    Code : 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
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    var CHARS = ['[', ']', '+', '!', '(', ')'];  /* changer ce tableau pour utiliser d'autres caractères */
     
     
     
    var NB_CHARS = CHARS.length;
     
    var BALANCED_CHARS = {};
    var CLOSE_CHARS = [];
    if ( CHARS.indexOf('[') >= 0 ) {
        BALANCED_CHARS['['] = ']';
        CLOSE_CHARS.push(']');
    }
    if ( CHARS.indexOf('(') >= 0 ) {
        BALANCED_CHARS['('] = ')';
        CLOSE_CHARS.push(')');
    }
    if ( CHARS.indexOf('{') >= 0 ) {
        BALANCED_CHARS['{'] = '}';
        CLOSE_CHARS.push('}');
    }
     
    var results = {};
     
     
     
    /*
      Renvoie true
      si s est bien parenthésée,
      false sinon.
    */
    function balanced(s) {
        'use strict';
     
        var s_LENGTH = s.length;
     
        var stack = [];
     
        var i;
        var c;
     
        for (i = 0; i < s_LENGTH; i++) {
            c = s[i];
            if ( c in BALANCED_CHARS ) {
                stack.push(c);
            }
            else if ( CLOSE_CHARS.indexOf(c) >= 0 ) {
                if ( BALANCED_CHARS[stack.pop()] !== c ) {
                    return false;
                }
            }
        }
     
        return (stack.length === 0);
    }
     
     
    /*
      Parcourt récursivement les chaînes jusqu'à une longueur num,
      tente de les évaluer
      et affiche les résultats non encore rencontrés ou déjà rencontrés mais au moins aussi long.
     */
    function build_and_try_string(s, num) {
        'use strict';
     
        if ( num > 0 ) {
            var i;
            var c;
     
            for (i = 0; i < NB_CHARS; i++) {
                c = CHARS[i];
     
                try_string(s + c);
                build_and_try_string(s + c, num - 1);
            }
        }
    }
     
     
    /*
      Affiche s
    */
    function display(s) {
        try {            // dans un navigateur
            document.write(s + '\n');
        }
        catch ( err ) {  // avec Rhino
            print(s);
        }
    }
     
     
    /*
      Tente d'évaluer s.
      Si l'évaluation s'est bien passée
      et que le résultat n'a pas encore été obtenu ou a déjà été obtenu avec une chaîne au moins aussi longue,
      alors affiche le résultat.
     
      BORD: ajoute l'éventuel élément affiché à results
    */
    function try_string(s) {
        'use strict';
     
        if ( balanced(s) ) {
            var v;
     
            try {
                v = eval(s);
            }
            catch ( err ) {
                return;
            }
     
            var k = [typeof v, v];
     
            if ( !(k in results) || (s.length <= results[k]) ) {
                results[k] = s.length;
                display((typeof v) + '\t' + v + '\t' + s.length + '\t' + s);
            }
        }
    }
     
     
     
    /* Main */
    build_and_try_string('', 6);
    Fichiers attachés Fichiers attachés

  8. #8
    Membre du Club
    Inscrit en
    Avril 2010
    Messages
    36
    Détails du profil
    Informations forums :
    Inscription : Avril 2010
    Messages : 36
    Points : 63
    Points
    63
    Par défaut
    Très instructif tout ça!

    En Perl aussi on peut utiliser les regex à outrance, ce qui peut donner ça

  9. #9
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Good news everyone !

    Je vous disais dans cet article publié il y a presque trois ans qu'il serait peut-être possible de descendre à 5 caractères. Une nouvelle piste est apparue avec la norme ECMAScript 6 et la fonction Array.prototype.find ! En effet, nous disposons de toutes les lettres de "find" grâce à undefined.

    Cela permet donc de récupérer une fonction sans avoir besoin du caractère "!".

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    Array.prototype.find === [][[[]+[][+[]]][+[]][++[++[++[++[[]][+[]]][+[]]][+[]]][+[]]]+[[]+[][+[]]][+[]][++[++[++[++[++[[]][+[]]][+[]]][+[]]][+[]]][+[]]]+[[]+[][+[]]][+[]][++[[]][+[]]]+[[]+[][+[]]][+[]][++[++[[]][+[]]][+[]]]]
    et de la même façon que dans le chapitre V, le c, le o et le v, mais aussi le caractère espace ainsi que les crochets, les accolades et les parenthèses.

    C'est un gros bond en avant, mais je n'ai pas réussi pour le moment à aller plus loin avec les 3 caractères +[]. En effet, les lettres C O V ne nous débloquent pas vraiment. Les seules nouvelles fonctions accessibles grâce à ces lettres sont #String.concat ou #Array.concat.

    Pour aller plus loin, la piste la plus sérieuse serait de réussir à obtenir la valeur null, ce qui nous donnerait la lettre L puis la fonction #Function.call. A partir de là, tout est possible Mais aucune fonction accessible dans la norme ECMAScript actuelle ne nous renvoie null

  10. #10
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Voici une présentation en anglais parcourant de manière plus synthétique tout le cheminement pour arriver au compilateur:
    http://slides.com/sylvainpv/xchars-js/

    Le compilateur a également été mis à jour pour fonctionner avec Chrome, Firefox et Edge dans leurs dernières versions.

    Dernière chose, une démonstration du 1K chess de Óscar Toledo G.convertie via 6chars.js est jouable ici : http://syllab.fr/projets/experiments/sixcharsjs/nanochess.html

    Regardez la source

Discussions similaires

  1. Réponses: 3
    Dernier message: 04/05/2014, 15h27
  2. [Ludique] Coder en Javascript avec seulement 3 caractères
    Par SylvainPV dans le forum Général JavaScript
    Réponses: 27
    Dernier message: 12/06/2013, 18h29
  3. [Article] Effet d'accordéon avec CSS et JavaScript
    Par RideKick dans le forum jQuery
    Réponses: 8
    Dernier message: 26/03/2009, 14h43
  4. Requete avec chaine de caractère commence par
    Par jazzes_dean dans le forum Langage SQL
    Réponses: 7
    Dernier message: 02/08/2004, 14h07
  5. [imprecis]Réaliser a^n avec seulement l'opérateur d'addition
    Par Amon dans le forum Algorithmes et structures de données
    Réponses: 18
    Dernier message: 08/11/2002, 23h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo