[DOM] utiliser une fonction

Version imprimable

Bonsoir,

Tout nouveau venu sur ce forum et désirant me lancer dans la programmation html je vous soumet ma question :
comment récupérer une valeur définie par une fonction (voir mon exemple)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <script LANGUAGE="JavaScript"> var ecranLarg var s var bl ecranLarg = screen.width; function gauche(bl) { return s = ecranLarg-bl; } gauche(bl); </script> </head> <body background="198.jpg"> <div style ="position: absolute; left: gauche(100); top: 250; width: 130; height: 75"> <img border="0" src="Intro/Image/alphabet_D.gif" width="64" height="65"><img border="0" src="Intro/Image/alphabet_U.gif" width="56" height="65"> </div> </body>
j'essaie d'appliquer mes connaissances bien établies du visualbasic, mais je crois bien me planter

merci pour l'aide que vous m'apporterez dans ma recherche qui consiste à centrer un bloc indépendamment de la taille d'un écran

Est ce possible, ou bien serais-je utopique ?

26/08/2007, 01h12
jypees

Le javascript fonctionne suivant des evenements ou bien par des appelles de fonction entre les balises

Code:

<script language="javascript">code</script>

Ton code est donc invalide mais si tu veux comprendre la philosophie du language je te conseil de lire des tutos :) ca te permettra de mieux saisir le modele DOM et toute la logique de ce super language ^^ Apres si tu veux que je t'explique comment faire marcher ton exemple je peux :roll:
:king:

Bonjour Jypees,

Merci d'avoir bien voulu prendre un peu de temps pour m'apporter l'aide dont j'ai grand besoin en tant que grand débutant. :cry:
J'ai suivi tes conseils et ai jeté un coup d'oeil sur les tutos de JavaScript.
Mes connaissances assez pointues en programmation sous VisualBasic, m'ont permis d'assimiler assez vite le B.A.BA de ce nouveau langage. Toutefois je suis très perturbé par sa philosophie et également par la syntaxte.

Bref, j'ai essayé d'appliquer ce que j"ai lu à mon exemple, mais il reste un point noir : comment récupérer la valeur donnée par la fonction (soit s dans mon exemple) pour pouvoir l'attribuer à la propriété left de ma boite définie entre les balises <Body> ? :roll:

Voici le résultat de mes réflexions :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html> <head> <script LANGUAGE="JavaScript"> var ecranLarg = screen.width var s var bl = 100 function gauche(bl) { return s = (ecranLarg-bl)/2; } document.write(ecranLarg, " " , bl, " ", gauche(bl)) // afin de vérifier mes valeurs </script> </head> <BODY> <div style ="position: absolute; left: 0; top: 250; width: 130; height: 75";> <img border="0" src="Intro/Image/alphabet_D.gif" width="64" height="65"><img border="0" src="Intro/Image/alphabet_U.gif" width="56" height="65"> </div> </body> </html>
Encore merci et bonne journée

C'est encore moi,

Jypees, j'ai trouvé une solution à mon problème, elle me convient mais ... :
Code:

1 2 3 4 5 <BODY> <div align = "center"; style = "position : relative; top = 250"> <img border="0" src="Intro/Image/alphabet_D.gif" width="64" height="65"><img border="0" src="Intro/Image/alphabet_U.gif" width="56" height="65"> </div> </body>
cela fonctionne, mais je reste sur ma faim : comment pouvais-je m'en sortir avec une fonction ? Je suis très curieux de nature et aime apprendre de nouvelles choses. Tu serais sympa, comme tu me l'avais proposé, de me donner la solution.

Bon dimanche et toute ma sympathie

Jacques (pseudo leaemile)

Alors le write est une methode qui consiste a ecrire via javascript du html ou bien du code javascript melanger avec du html. C'est pour cela que ton code actuel affiche 1280 100 590 en haut de page (qui correspond au valeur de ta fonction !).

En faite javascript possede differentes techniques afin de jouer avec le model dom, l'une d'entre elle est getElementById. Voici le code necessaire a ce que tu souhaites faire (et commenter). J'ai volontairement compliqué le code afin que tu decouvres de nouvelles choses :
Code:

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 <html> <head> <script language="javascript"> function center_div() { currentDiv = document.getElementById('divCenter'); alert(currentDiv.style.left); } </script> </head> <body> <div id="divCenter" style ="position: absolute; left: 10; top: 250; width: auto; height: auto;";> <img border="0" src="http://www.developpez.net/forums/images/logo16.gif"> </div> </body> </html> <script> /* L'interet de placer le script en fin c'est qu'il sera appelé en fin de chargement donc la fonction center_div aura accés au div a centrer! La fonction addEventListener(firefox) et attachEvent(ie) permettent de placer plusieurs fonctionnement sur un evenement Je te conseil de te documenter sur ces deux choses car elles sont super importante ! */ if (window.addEventListener) //pour firefox { window.addEventListener("load", center_div, false); } else if (window.attachEvent) //pour ie { window.attachEvent("onload", center_div); } </script>

26/08/2007, 21h24
leaemile

Bonsoir jypees,

Un grand merci
J'ai étudié le code que tu m'as fourni, interessant.
Seul le script en fin de page me laisse encore un peu perplexe, mais j'appronfondirai plus tard.

Si ce n'est pas abuser de ta gentilesse, puis-je te demander quelques éclaircissements :
1) la fonction telle que tu l'as construite ne fait qu'afficher la valeur style.left du div courant, si je ne me trompes. Pour retourner cette valeur, j'ai utilisé 'return(currentDiv.style.left)
2) comment éviter dans la réponse donnée les caractères alpha "px" en fin de réponse afin de pouvoir considérer cette réponse comme purement numérique et l'utiliser dans un calcul du type : screen.width - currentDiv.style.width, par exemple. En effet je désire pouvoir "retourner" la valeur d'une variable 'gauche' qui vaudrait (screen.width - currentDiv.style.width)/2
Ceci n'est qu'une simple curiosité de ma part, car chercher à spécifié la valeur left du Div n'a plus grand intérêt quand on a réussi à centrer son contenu.
3) comment réutiliser cette fonction quand on veut la faire agir sur plusieurs bloc Div, par exemple dans le cas ou leur id serait divCenter1, divCenter2, etc ...

J'espère ne pas trop abuser, mais j'avoue que si je me sens comme un poisson dans l'eau sous l'environnement visualbasic, sous javascript je ne suis qu'une lourde pierre dans les fins fonds de l'océan. De plus ceci me crée un énorme handicap car je réfléchis visualbasic en essayant de m'en sortir sous javascript.

Avec tous mes remerciements anticipés
Bien cordialement et bonne soirée
26/08/2007, 22h31
jypees
Alors si tu veux faire un return c'est pour quoi ??? car un return de javascript dans un html ca sert a rien :) Essais de m'expliquer ta logique car je crois que c'est la philosophie qui te pose un petit soucis :)

Pour utiliser une fonction sur plusieurs div la commande getElementsByTagName('div') te renvoit un tableau des divs ;)

Et pour le px il existe des astuces :
Code:

1 2 3 4 5 6 7 8 9 pos = '10px'; pos = pos.substr(0, pos.length-2); alert(pos); alert(pos + 10); pos *= 1; alert(pos + 10);
regarde :) le javascript etant pas typé il faut faire des petites magouilles pour convertir en int comme le coup du * 1 :)

Si tu as d'autre question hesite pas ! je suis la pour ca :roll:
27/08/2007, 09h07
leaemile

Bonjour jypees,

Citation:

[Essais de m'expliquer ta logique car je crois que c'est la philosophie qui te pose un petit soucis

Tu as parfaitement compris mon problème.

Alors pourquoi je voulais utiliser un 'return' ?
En VB quand tu construis une fonction, lors de son utilisation tu lui fournis la ou les variable(s) et tu appelles le résultat que tu intègres dans ton code.
Exemple : pour reprendre ce que je désire réaliser en Javascript
1) je définis ma fonction
Function gauche(div_largeur)
retrait = (screen.width - div_largeur)/2
End function
2) j'appelle les valeurs désirées
retrait = gauche(400) (me donne le retrait gauche du bloc 1 de largeur 400)
retrait= gauche(100) (me donne le retrait gauche du bloc 2 de largeur 100)
etc ...
(cette étape 2 est superflue, voir ci dessous)
3) je les utilise
style = "left:gauche(400), width: 100" pour le bloc1 (me donne un retrait de (1024 - 400)/2 pour le bloc concerné)
etc..
(attention la ligne précédente en VB est incorrecte, je l'ai écrite pour te montrer ce que je voudrais faire en javascript

Il est un fait également que je me mélange les pinceaux en voulant utiliser à la fois le JavaScript et le HTML

C'est très gentil de prendre patience suite à mes questions de novice

Citation:

Si tu as d'autre question hesite pas ! je suis la pour ca

Je connais ce genre de situation, car j'aide les demandeurs sur un forum dédié au VB (VBA Excel pour être plus précis)

Bonne journée

Je comprends tout a fait ton soucis. Imagine toi que le js et une couche supplementaire au html et non l'inverse. Tu ameliores ton html via le js mais pas l'inverse (return est incorrecte). Dans ce cas si tu veux changer tes divs il existent plusieurs methodes (nombreuse !!!).

soit par un evenement utilisateur (onclick, onmouseover etc) et dans ce cas tu peux faire ca :
Code:

1 2 3 4 5 6 7 8 9 10 <script language="javascript"> function changeDiv(inside) { inside.style.marginLeft = 200 + 'px'; } </script> <body> <div id="chaine" onclick="changeDiv(this);">coucou</div> <body>
Mais je te vois venir :P et si je veux en modifier des centaines automatiquements :roll: La il existe encore beaucoup de methode !!! la plus simple reste celle ci :
Code:

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 <script language="javascript"> function changer() { tableau_des_divs = document.getElementsByTagName('div'); for (i = 0; tableau_des_divs[i]; i++) { tableau_des_divs[i].style.marginLeft = i * 10 + 'px'; } } </script> <body> <div>coucou</div> <div>le</div> <div>monde</div> <div>tu</div> <div>vois</div> <div>on</div> <div>peux</div> <div>tout</div> <div>faire</div> <div>avec</div> <div>javascript</div> <span onclick="changer();" style="color: red;">changer !!!</span> <body>
Clique sur changer :) Tu remarqueras qu'il n'a pris en compte que les divs et pas le span ! voila une de methodes possibles !!!

Voila :yaisse2: si tu as besoin de precision ou d'aide hesite po :king:

27/08/2007, 12h38
leaemile
eh bien voila, ça commence à devenir plus clair.

J'ai repris ton premier code et par plaisir l'ai modifié pour obtenir ce que je voulais faire (bien que cela n'a pas grand intérêt, align: center suffit, mais je veux comprendre) et ça marche.
Dis moi si c'est correct

dernière question, j'ai voulu utiliser l'évènement unload ou load afin d'activer automatiquement la fonction à l'ouverture de la page, eh ben ... une fois de plus je me plante. Que faut-il faire ?

Quant au deuxième code, je le comprends parfaitement, mais la syntaxe me perturbe énormément.
Exemple pour la boucle :

Code:

for (i = 0; tableau_des_divs[i]; i++)

ouah ....!!!
moi qui suis habitué à
Code:

1 2 3 For i = 0 to 10 ... blablabla ... Next i
encore merci pour tout

Pour le load tu fais ceci :

document.onload = center_div;

dans le code cela donne ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <html> <head> <script language="javascript"> window.onload = center_div; function center_div() { currentDiv = document.getElementById('divCenter'); alert(currentDiv.style.left); } </script> </head> <body> <div id="divCenter" style ="position: absolute; left: 10; top: 250; width: auto; height: auto;";> <img border="0" src="http://www.developpez.net/forums/images/logo16.gif"> </div> </body> </html>
unload c'est quand tu quittes la page :)

Et pour la syntaxe il va falloir t'y habituer car tous les langages (enfin la plus part) fonctionne comme cela :king: mais si tu veux d'autre methode pour parcourir un tableau en javascript il en existe d'autre :)

Je vais surment me repeté mais si tu as d'autres question hesite po :roll:

28/08/2007, 12h35
leaemile

Bonjour Jypees,

J'ai pris connaissance de ton dernier message et il me faut maintenant mettre en application tes conseils en fonction de mes besoins.
Je tiens à te remercier pour ta disponibilité, ta patience et ta gentilesse.
Je vais mainteneant faire un petit breack dans l'étude de javascript ; il faut que j'assimile tout ce que tu m'as appris.
J'aurais bien l'occasion de te recontacter pour d'autres questions, vu que tu me le proposes

Je te souhaite une bonne journée et au nom des "forumeurs demandeurs" (dont je fais partie sur ce forum) je tiens à te dire un grand merci.

jacques (pseudo leaemile)
28/08/2007, 12h38
jypees

Mais de rien :king: hesite po et puis faire partager ses connaissances c'est super simpa :roll:

A bientot

:lahola: