explication ?

[leondumoulin]

Bonjour,

 

Je suis débutant avec javascript. Quelqu'un aurait la patience de m'expliquer (en ajoutant des commentaires) ce que fait et quel est le rôle des différents éléments de ce script ?

 

Merci de vôtre aide,

 

Léon

 

<SCRIPT language=JavaScript>

var Nav4, IE4

var range = ""

var styleObj = ""

var ns=document.layers ? 1 : 0

 

if (ns) {

Nav4 = true

}

else {

IE4 = true

range = ".all"

styleObj = ".style"

}

 

function ShowLayer(layerName) {

eval("document" + range + "." + layerName + styleObj + ".visibility = 'visible'");

}

 

function HideLayer(layerName) {

eval("document" + range + "." + layerName + styleObj + ".visibility = 'hidden'");

}

 

function Positioning() {

if (Nav4){

document.toggle.left = window.innerWidth - 505;

document.toggle.top = 5;

 

}

if (IE4){

document.all.toggle.style.pixelLeft = document.body.clientWidth - 505;

document.all.toggle.style.pixelTop = 5;

 

document.all.divMenu0.style.pixelHeight = document.body.clientHeight;

}

ShowLayer('toggle');

return;

}

 

function Contents1On() {

ShowLayer('contents1');

}

 

function Contents1Off() {

HideLayer('contents1');

}

 

function Contents2On() {

ShowLayer('contents2');

}

 

function Contents2Off() {

HideLayer('contents2');

}

 

</SCRIPT>

[webthrilla]

<SCRIPT language=JavaScript>

var Nav4, IE4 //creation des variables

var range = ""

var styleObj = ""

var ns=document.layers ? 1 : 0 // est ce kon a des layers dans le document ? si oui return1 sinon return 0 ( true ou false je suppose )

 

if (ns) { // si on a 1 fait ca :

Nav4 = true // met true dans nav4

}

else { //sinon ( 0 = false )

IE4 = true // met true dans IE4

range = ".all" //chepas

styleObj = ".style" //chepas

}

 

function ShowLayer(layerName) {

eval("document" + range + "." + layerName + styleObj + ".visibility = 'visible'");

}

 

function HideLayer(layerName) {

eval("document" + range + "." + layerName + styleObj + ".visibility = 'hidden'");

}

 

function Positioning() {

if (Nav4){

document.toggle.left = window.innerWidth - 505;

document.toggle.top = 5;

 

}

if (IE4){

document.all.toggle.style.pixelLeft = document.body.clientWidth - 505;

document.all.toggle.style.pixelTop = 5;

 

document.all.divMenu0.style.pixelHeight = document.body.clientHeight;

}

ShowLayer('toggle');

return;

}

 

function Contents1On() {

ShowLayer('contents1');

}

 

function Contents1Off() {

HideLayer('contents1');

}

 

function Contents2On() {

ShowLayer('contents2');

}

 

function Contents2Off() {

HideLayer('contents2');

}

 

</SCRIPT>

 

 

en bref je t explike ce ki ressemblait le plus a du java passke je fais pas de jS , apparemment ton truc effectue un test sur le browser du gars pour savoir si il met des layers et ou il les met suivant si c Netscape ou IE ... Mais pe ke je me goure ...( en tk g essaye )

[KewlCat]

Bonjour,

 

Je suis débutant avec javascript. Quelqu'un aurait la patience de m'expliquer (en ajoutant des commentaires) ce que fait et quel est le rôle des différents éléments de ce script ?

 

Merci de vôtre aide,

 

Léon

Pour le même prix, je te fais la critique du truc en direct, aussi

 

On commence par (outre le tag indiquant un script) les déclarations

Tu noteras qu'il n'y a pas de typage en Javascript... Tout peut aussi bien être une chaîne qu'un nombre...

<SCRIPT language=JavaScript>

var Nav4, IE4

var range = ""    

var styleObj = ""

var ns=document.layers ? 1 : 0

On déclare "pour la forme" (puisqu'il n'y a pas d'initialisation) deux variables Nav4 et IE4 qui devraient nous indiquer si le navigateur est Netscape ou Microsfot.

D'ailleurs, c'est à cela que sert ns : voici un bel exemple du seul opérateur ternaire existant en C/C++/Java, si (document.layers) est "vrai" (ou plutôt, n'est pas indéfini) alors on retourne 1 sinon 0

On utilise généralement document.layers pour détecter un navigateur Netscape 4.x (puisque c'est son implémentation personnelle du DHTML, il est le seul pour lequel ce truc existe)

if (ns) {

Nav4 = true

}

else {

IE4 = true

range = ".all"

styleObj = ".style"

}

Phenomène courant : on utilise une variable en trop.

Pourquoi n'a-t-on pas directement utilisé Nav4 pour stocker le résultat de document.layers ? mystère !

Pourquoi n'a-t-on pas plutôt écrit

if (document.layers) {

Nav4 = true;

IE4 = false;

range = "";

styleObj = "";

}

else {

IE4 = true;

Nav4 = false;

range = ".all";

styleObj = ".style";

}

?? Mystère aussi ! Trop lisible ?

Bon, passons... Tout ca pour faire semblant de détecter le navigateur...

Ce bout de script "pense" que si c'est pas Netscape4, alors on utilise les "classes" de IE pour piloter nos trucs (alors que si c'est pas Netscape4, ca peut aussi bien être Mozilla, Opéra, ou n'importe quoi d'autre !)

Bref...

function ShowLayer(layerName) {

 eval("document" + range + "." + layerName + styleObj + ".visibility = 'visible'");

}

 

function HideLayer(layerName) {

 eval("document" + range + "." + layerName + styleObj + ".visibility = 'hidden'");

}

Ouh ! La vilaine feinte !

On déclare deux fonctions qui auront pour but de rendre visible / invisible le DIV passé en paramètre (on va parler de "calque", puisque Nav4 utilise <LAYER> et le DOM recommande l'usage de <DIV> pour le DHTML).

Ici, il s'agit juste de dire que la propriété ".visibility" du calque doit prendre la valeur 'visible' ou 'hidden' (visible ou caché), sauf que, comme cette propriété n'est pas disponible dans la même classe selon le navigateur, on utilise une feinte : on construit de toute pièce l'arborescence des classes, on rajoute la fin de la commande ".visibility='hidden'" et on utilise eval() pour l'exécuter !

La fonction eval() sert à exécuter la commande passée en paramètre sous forme de chaine de caractère : eval ("var toto = 12" ) fait comme si tu déclarais une variable toto qui vaut 12...

Génial, non ?

En gros, on aurait pu carrément faire

if (document.layers) // Nav4

{document.layerName.visibility = 'hidden'; }

else // IE4

{ document.all.layerName.style.visibility = 'hidden'; }

et pareil avec 'visible'

(en très très gros, parce qu'en fait il aurait fallu passer, non pas le nom du layer, mais un pointeur vers le layer... enfin, un truc un peu plus compliqué, mais là c'est juste pour que tu saisisses)

...

Passons...

function Positioning() {

    if (Nav4){

  document.toggle.left = window.innerWidth - 505;

  document.toggle.top = 5;

 

 }

 if (IE4){

  document.all.toggle.style.pixelLeft = document.body.clientWidth - 505;  

  document.all.toggle.style.pixelTop = 5;  

   

  document.all.divMenu0.style.pixelHeight = document.body.clientHeight;

 }

 ShowLayer('toggle');

 return;

}

Tiens, ici on n'a pas réutilisé la même feinte, on se retrouve avec de vrais "if"

Tu noteras que dans le tout premier test, on dit que si (document.layers) alors Nav4=true, sinon IE4=true... Ce qui veut dire que, fort logiquement, si Nav4 != true alors IE4=true, mais là on ne devait pas savoir à quoi servait l'instruction 'else'... (et comme en plus on n'avait pas initialisé IE4 et Nav4 à false au début, va savoir ce qu'ils contiennent !) ... grrr

Dans cette fonction, on change les propriétés de l'élément 'toggle' (certainement un <LAYER> ou un <DIV> défini ailleurs dans la page), ainsi que (mais seulement pour IE) celui de divMenu0 (là aussi, un truc défini ailleurs). On se contente de changer leur position (depuis la gauche et le haut), rien de bien sorcier...

Ah, au passage, on fait afficher le calque "toggle"

Le return ne sert à rien.

function Contents1On() {

ShowLayer('contents1');

}

 

function Contents1Off() {

HideLayer('contents1');

}

 

function Contents2On() {

ShowLayer('contents2');

}

 

function Contents2Off() {

HideLayer('contents2');

}

 

</SCRIPT>

Là, ce sont des "raccourcis de feignants" pour faire afficher / disparaitre des calques précis.

On perd ici tout l'interêt d'avoir fait des fonctions ShowLayer() et HideLayer() génériques, puisque, a priori, dans le reste du source, on va utiliser ces raccourcis plutôt que directement les appels à HideLayer( contentx ) ...

Voilà !

[webthrilla]

Mais c souvent qu'on a ce probleme kewlkat : tout le monde sur le web fait des script fuckes avec des architectures foireuses passke personne ne respecte les copyrights , donc plus ton arcitecture est foireuse moins de monde vont la comprendre ...

En tk ...

[KewlCat]

Mais c souvent qu'on a ce probleme kewlkat : tout le monde sur le web fait des script fuckes avec des architectures foireuses passke personne ne respecte les copyrights , donc plus ton arcitecture est foireuse moins de monde vont la comprendre ...

En tk ...

C'est surtout le fait d'être propre et rigoureux qui manque...

[webthrilla]

aussi ...