[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

[DOM] utiliser une fonction

JavaScript

Vue hybride

Discussions similaires

Partager

Partager