[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