Discussion :

[javatwister]

http://javatwist.imingo.net/defi3.htm

pourquoi comment ce lien est-il interprété ?

[Celelibi]

Celui-là je l'ai touvé un peu plus tordu que le précédent.

Comment est interpêté ce lien ? et bien la vérité est ailleur...

[SpaceFrog]

heu a première vue je n'ai pas compris le but de la manoeuvre ... un lien vers le même page ... trop fort !!!

bon je vais me pencher sur le code pour comprendre ou se situe le défi ...

[denisC]

JT craque

Enfin, la prochaine fois qu'on me demandera à quoi servent les expressions regulieres, je pourrais au moins dire : "a generer des instructions cachées..."



Enfin, y'a quand meme de la maitrise...

[SpaceFrog]

ben ça doit être pour ça que je suis passé à coté ... mais je ne vois toujours pas ce que cette page fait d'extraordinaire... je ne sais même pas ou chercher ...

je clique sur un lien et la page se recharge... heu on en doit pas avoir la même notion d'extraordinaire ou cette page ne fonctionne pas chez moi ...

[fred777888999]

Rien d'extraordinaire en effect... Jette juste 1 oeil au code source et tu verra qu'elle transforme la balise "lien/adresse" en "a/href" je te laisse le soins de decouvrir comment...

[javatwister]

oui, SF a même pas regardé la source, si ça se trouve

et bravo à fred

[SpaceFrog]

ben si j'ai regardé le code source qui presse les datas et le torture... mais si je savais au moins ce que c'est supposé faire...
parceque là c'est tellement bien caché que je ne sais même pas à quoi ça sert ...
et donc je ne sais même pas quoi chercher ... ???
replacer un lien par un href ??? reloader la page ... j'ai pas compris le truc du lien en fançais ...

[javatwister]

[SpaceFrog]

arf faut déja avoir de bon yeux pour voir que JT est en tran d'essayer de code un interpréteur de html version française en javascript ....

[SpaceFrog]

oui bon ...
Autant les deux premiers sont utiles, autant celui là je n'en voit vraiment pas l'utilité ... d'autant plus venant de toi JT qui me renvoie régulièrement dans mes 22 en arguant de l'utilité de mes découvertes ...

[javatwister]

mais non, mais non, t'as mal pris une plaisanterie il y a des lustres et tu me la ressers régulièrement! si je faisais des trucs utiles, ça se saurait;


et puis je rappelle que ces ptits défis ne sont pas des tutoriels ou des faqs: c'est juste un entraînement à la lecture de scripts et forcément, tu ne pourras pas en faire grand chose dans la vie de tous les jours

[javatwister]

bon alors la soluce demain après une bonne nuit hein;

[javatwister]

soluce

description: Une balise <lien></lien> dotée d'un attribut adresse semble inteprétée par le navigateur comme si de rien n'était.

but du jeu
Comment se fait-ce?

quoi regarder?


La feuille de style

une première classe concerne par défaut tous les éléments de la page; elle est nécessaire car "lien" n'est pas reconnu par css et on ne peut lui attribuer une classe comme si de rien n'était; la mise en forme est celle d'un lien classique;
la deuxième est nécessaire pour que les balises div et img présentes dans la page retrouvent une mise en forme anonyme (et surtout pas un curseur "pointeur";

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<style style="text/css">
body * {cursor:pointer;color:#0000ff;text-decoration:underline}
div,img {cursor:default;text-decoration:none;font-weight:bold;color:#000000}
</style>

le html

L'essentiel est ici:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span><lien adresse="http://javatwist.imingo.net/defi3.htm">Ce lien est certifié 100% français.</lien></span>

la balise <lien> est enveloppée dans une vraie balise <span>: c'est cette dernière qui servira, en douce, de gestionnaire d'événement (onmouseover / out pour l'infobulle "title" et le message "status"; onclick pour l'activation du lien);

la balise suivante n'a qu'un intérêt psychologique: elle justifie plus ou moins la présence d'une chaîne longue dans le script en affichant sa valeur au chargement de la page; le but est que le descripteur novice ne s'intéresse pas immédiatement au rapport entre cette chaîne et le lien;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="padding-bottom:200px;padding-top:200px;float:left">...</div>

Le script

Un premier script factice, qui n'est pas interprété puisque sa propriété "javscript" n'est reconnu par aucun navigateur...

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
<script type="text/javscript "> 
*******************************************
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!IMPORTANT ! IMPORTANT ! IMPORTANT!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*******************************************
         Javascript est polyglotte
*******************************************
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!IMPORTANT ! IMPORTANT ! IMPORTANT!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var lang=true;
with(document){
tous les liens.lang="en français"}
</script>

La suite est 100% utile pour que le code fonctionne;
Commençons par la définition des éléments html pour javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var lien=document.getElementsByTagName("lien")[0];// la balise "<lien>"
var adresse=lien.getAttribute("adresse");// la valeur de l'attribut "adresse" de cette balise
lien=lien.parentNode;// redéfinition de la valeur de lien, qui désigne maintenant la balise "<span>"

Après, cherchons les appels de fonction:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
lien.onmouseout=function(){status=''};eval(oui+"="+yes);
lien.onmouseover=function(){this.title=adresse;status=adresse}

onmouseout et onmouseover se voient comme le nez au milieu de la figure et c'est tant mieux: ils ne servent qu'à la déco: donner des signes extérieurs de "lien normal" via les propriétés "title" et status"; par contre, ils cachent un peu un eval intéressant qui effectue tout le travail: oui et yes sont visiblement les variables à traquer.

la variable oui

oui est un pseudo tableau, qui correspond à une simple chaîne (malgré les nombreuses virgules, les guillemets n'apparaissent qu'au début et à la fin);

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var oui=new Array("L',idée,est,nouvelle n'est-ce pas...,.,On,ne sera plus,complètement,largués si tu viens,ici pour nous aider,Clark,Kent.");

q est une copie de oui sous forme d'une vraie chaîne: elle servira entre autres à compter les virgules après un split

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var q=oui[0].toString();

oui est "splicée" de manière à ajouter en début de tableau chaque premier caractère suivant une virgule (plus le premier caractère de oui); oui devient donc un tableau digne de ce nom, dont les premières valeurs sont "K, C, i, l, c, n, O, ., n, e, i, L";

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

for(i=0;i<q.split(',').length;i++){oui.splice(0,0,q.split(',')[i].replace(/(.).+$/g,'$1'))};

On supprime alors le dernier élément du tableau, soit la chaîne initiale.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

oui.pop();

On retourne le tableau, on le convertit en chaîne en minuscules et on obtient "lien.onclick"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

oui=oui.reverse().join('').toLowerCase();

la variable yes

C'est en fait une fonction: on le comprend maintenant puisqu'elle est appelée par "lien.onclick=";
Dans le code, cette fonction retourne une variable da interprétée par eval

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

function yes(){eval(da)}

da est une simple chaîne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var da="Dans les olives travaille Ernest Einstein .Ni les oiseaux ni ta soeur connaissent Ernest. L'est vieux...";

La chaîne est transformée en tableau par match et un masque qui supprime simplement les espaces blancs: chaque élément du tableau contient donc un mot de la chaîne;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

da=da.match(/\S+\s\S+/g);

Le tableau est reconverti en chaîne et on ne garde que les 2 premiers caractères de chaque portion comprise entre 2 virgules ("replace");
On ne garde de la chaîne que les 15 premiers caractères: "DaolEr.NoitacoL";
La chaîne est inversée et mise en minuscules grâce la méthode inv() déclarée en tête de script:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
String.prototype.inv=function(){
return this.split('').reverse().join('').toLowerCase()+'()'};

Bref, la dernière métamorphose est:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

da=da.toString().replace(/(..)[^,]+,/g,'$1').substring(0,15).inv();

On a donc: "da=location.reload()";

La variable dcorrespond au contenu du <div> psychologique (rappelez-vous):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

d=document.body.getElementsByTagName("*")[1];

Cette balise prend le contenu de q (souvenez-vous), sans les virgules, sauf celle - logique - qui précède "Clark Kent".



La vache! c'est plus facile à faire qu'à expliquer