[défi n°3] le lien en français

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

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

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... :P

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 ...

JT craque :scarymov: :furieux: :fou: :marteau:

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

:lol:

Enfin, y'a quand meme de la maitrise... :ave: :king:

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 ... :cry:

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...

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

et bravo à fred :wink:

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 ...

:mouarf3:

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 ....

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 ...

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 :mrgreen:

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

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?

:arrow: 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:

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>
:arrow: le html

L'essentiel est ici:

Code:

<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:

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

:arrow: Le script

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

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:

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:

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:

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:

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:

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:

oui.pop();

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

Code:

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:

function yes(){eval(da)}

da est une simple chaîne:

Code:

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:

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:

1 2 String.prototype.inv=function(){ return this.split('').reverse().join('').toLowerCase()+'()'};
Bref, la dernière métamorphose est:

Code:

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:

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 8O