[DOM] utiliser une fonction

**leaemile** · 25/08/2007, 22h58

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 :

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

**jypees** · 26/08/2007, 01h12

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

Code :

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

<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

**leaemile** · 26/08/2007, 09h34

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.

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

Voici le résultat de mes réflexions :

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

**leaemile** · 26/08/2007, 13h04

C'est encore moi,

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

Code :

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

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)

**jypees** · 26/08/2007, 15h05

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 :

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

**leaemile** · 26/08/2007, 21h24

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

**jypees** · 26/08/2007, 22h31

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 :

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

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

**leaemile** · 27/08/2007, 09h07

Bonjour jypees,

[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

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

**jypees** · 27/08/2007, 10h51

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 :

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

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

et si je veux en modifier des centaines automatiquements

La il existe encore beaucoup de methode !!! la plus simple reste celle ci :

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

si tu as besoin de precision ou d'aide hesite po

**leaemile** · 27/08/2007, 12h38

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 :

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

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

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

Code :

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

1
2
3
For i = 0 to 10
... blablabla ...
Next i

encore merci pour tout

**jypees** · 27/08/2007, 13h47

Pour le load tu fais ceci :

document.onload = center_div;

dans le code cela donne ceci :

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

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

**leaemile** · 28/08/2007, 12h35

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)

**jypees** · 28/08/2007, 12h38

Mais de rien

hesite po et puis faire partager ses connaissances c'est super simpa

A bientot

[DOM] utiliser une fonction

JavaScript

Discussions similaires

Partager

Partager