Traiter en HTML le résultat d'une fonction javascript

Version imprimable

Bonjour,

Le code contient une fonction hyper simple qui permet de détecter la résolution d'écran du visiteur, et de l'afficher.

Maintenant, je souhaite récupérer les valeurs retournées, et les afficher, mais cette fois, dans la page HTML...

Comment dois-je procéder ?
Quelqu'un peut-il me guider ?

Merci d'avance.

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
36
37
38
39
40
41
42
43
44
45
46
47
48
 
<HEAD>
 
<!--********************************* Fonction(s) Javascript ************************************
-->
 
<SCRIPT LANGUAGE="Javascript" type="text/javascript">
 
function resolution_ecran () 
 
  {
     width = screen.width; 
     height = screen.height;
     document.write("Votre résolution (javascript) est : " + width + "*" + height);
     return width;
     return height;
  }
 
</SCRIPT>
 
<!--********************************************************************************************
                           TITLE DIVISION (Titre du document)
************************************************************************************************
-->
 
<title>
</title>
 
</HEAD>
 
<!--*********************************************************************************************
                           BODY DIVISION (Corps du document)
*************************************************************************************************
-->
 
<BODY onLoad="resolution_ecran ()">
 
<BR><BR>
 
Votre résolution (html) est : 
 
<!--*********************************************************************************************
	                         FIN DU DOCUMENT
*************************************************************************************************
-->
 
</BODY>
</HTML>

salut,
tout d'abord, quelques commentaires concernant ta page.
Tu ne peux pas avoir deux return dans une même fonction. Car la fonction s'arrête sur le premier et le second ne sera jamais exécuté.

ensuite, il n'y a pas de résolution html et de résolution javascript. Il y a une résolution d'écran.

J'ai modifié un peu ta page. Tu verras dans la fonction javascript, je récupère l'element de la page html (getElementById) où je souhaite afficher ma valeur (innerHTML).

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
36
37
38
39
40
41
42
43
44
45
<html>
<HEAD>
 
<!--********************************* Fonction(s) Javascript ************************************
-->
 
<SCRIPT LANGUAGE="Javascript" type="text/javascript">
 
function resolution_ecran () 
 
  {
     width = screen.width; 
     height = screen.height;
     document.getElementById('resolution').innerHTML = "Votre résolution (javascript) est : " + width + "*" + height;
  }
 
</SCRIPT>
 
<!--********************************************************************************************
                           TITLE DIVISION (Titre du document)
************************************************************************************************
-->
 
<title>
</title>
 
</HEAD>
 
<!--*********************************************************************************************
                           BODY DIVISION (Corps du document)
*************************************************************************************************
-->
 
<BODY onLoad="resolution_ecran ()">
 
<BR><BR>
<span id="resolution"></span>
 
<!--*********************************************************************************************
	                         FIN DU DOCUMENT
*************************************************************************************************
-->
 
</BODY>
</HTML>

08/05/2008, 18h45
sarrasin.drums

Merci de tes éclaircissements, julien.63.

Effectivement, je ne connaissais pas la balise <span>, et après avoir testé ton code, j'ai cherché, mais il s'avère que cela concerne du CSS, or pour moi, ce n'est pas mon but...

Quelques explications :

Je cherche à faire une page concernant ma toute petite commune, simple, avec quelques afichages de photos genre église, mairie, etc..
Et en fonction de la résolution du visiteur, je pourrais redimensionner les images en conséquence.

Comme je sais qu'il n'y a qu'une seule résolution, ce que je voulais dire, c'est que dans la partie javascript, une phrase s'affiche (comme ça, je sais qu'elle vient de la fonction), et dans la partie html, donc dans le <body>, la même phrase s'affiche, mais avec les valeurs retournées...

Comme tu m'as précisé qu'il n'y aura qu'un seul retour possible, comment faire alors ?
09/05/2008, 00h55
Sacha999
rien ne t'empeche de faire un

Code:

return [width,height];

apres tu récupere comme ca
Code:

1 2 3 4 var laResolution = resolution_ecran(); var laLargeur = laResolution[0]; var laHauteur = laResolution[1];
Mais bon j'ai pas trop compris ce que tu essaie de faire
09/05/2008, 11h42
sarrasin.drums
Citation:

Mais bon j'ai pas trop compris ce que tu essaie de faire

En fait, je disais ceci :

Citation:

Je cherche à faire une page concernant ma toute petite commune, simple, avec quelques afichages de photos genre église, mairie, etc..
Et en fonction de la résolution du visiteur, je pourrais redimensionner les images en conséquence.

Mais dans le code que tu me montres en exemple, sacha999, c'est la 2ème partie que je comprends plus :
Code:

1 2 3 var laResolution = resolution_ecran(); var laLargeur = laResolution[0]; var laHauteur = laResolution[1];
En effet, ce code ne doit-il pas être mis à l'intérieur de la fonction de détection de la résolution d'écran ?
Moi, je souhaite récupérer ces deux valeurs (hauteur et largeur), pour ensuite m'en servir comme paramètres de dimensionnement d'une applet...Donc après l'appel de la fonction javascript.
Mais on dirait que la page html reste bloquée à l'intérieur de cette fonction, car si j'essaie d'afficher une phrase en dehors, rien ne se passe...

Je ne sais si je suis clair, mais en tous cas, merci à tous pour une aide qui me ferait le plus grand bien...
09/05/2008, 12h49
Auteur

bonjour,

pourquoi tu n'utilises pas le % pour les dimensions de tes composants ?

De plus connaître la résolution de l'écran ne pourra sans doute pas te servir à grand chose : les valeurs retournées seront toujours les mêmes que la fenêtre du navigateur soit en plein écran ou non. Or tu devrais fixer les dimensions des composants en fonction de la taille de la fenêtre du navigateur et non en fonction de la résolution de l'écran.
09/05/2008, 13h05
sarrasin.drums

Bonjour à toi Auteur,

J'ai peur d'avoir manqué un wagon... peux-tu, s'il te plaît, m'expliquer plus clairement ce que tu viens d'écrire :

Citation:

pourquoi tu n'utilises pas le % pour les dimensions de tes composants ?

Mais avant cela, je viens de m'apercevoir de quelque chose : je reste bloqué sur l'exécution de la fonction.
En effet, quand j'enlève le "onLOAD", tout ce que je veux faire afficher apparaît (sauf bien-sûr les valeurs à retourner puisque je n'appelle plus la fonction)...
Bizarre :roll: Il me semble qu'en théorie l'exécution du code est linéaire, non ? Donc juste après l'exécution de la fonction (qui se passe bien), on est censé revenir à l'instruction qui suit l'appel...

Ou alors, je suis vraiment trop nul :oops:

Citation:

Envoyé par sarrasin.drums

Bonjour à toi Auteur,

J'ai peur d'avoir manqué un wagon... peux-tu, s'il te plaît, m'expliquer plus clairement ce que tu viens d'écrire :

Citation:

pourquoi tu n'utilises pas le % pour les dimensions de tes composants ?

tu as écrit plus haut :

Citation:

Je cherche à faire une page concernant ma toute petite commune, simple, avec quelques afichages de photos genre église, mairie, etc..
Et en fonction de la résolution du visiteur, je pourrais redimensionner les images en conséquence.

tu n'es pas obligé d'utiliser le pixel (px) pour dimensionner tes composants. tu peux utiliser une échelle relative. Je te propose donc de prendre le pourcent (%).
Par exemple si tu as :
Code:

1 2 3 4 <div style="width:50%; border: 1px solid #000000"> coucou </div>
ce div aura toujours une largeur de 50% de la largeur totale de ta fenêtre quelle que soit la résolution.

-----------------------------------------------------------------

Citation:

Mais avant cela, je viens de m'apercevoir de quelque chose : je reste bloqué sur l'exécution de la fonction.
En effet, quand j'enlève le "onLOAD", tout ce que je veux faire afficher apparaît (sauf bien-sûr les valeurs à retourner puisque je n'appelle plus la fonction)...
Bizarre :roll: Il me semble qu'en théorie l'exécution du code est linéaire, non ? Donc juste après l'exécution de la fonction (qui se passe bien), on est censé revenir à l'instruction qui suit l'appel...

non l'exécution d'un code JS n'est pas linéraire dans le cas où tu écris ton code dans une fonction ce qui est le cas ici. Pour que ton code s'exécute plusieurs possibilités :
la fonction est appelée par une autre fonction ;
la fonction est appelée lors d'un événement (ici onload) ;
l'appel de la fonction se fait grâce à des balises scripts placées dans le code HTML (et dans ce cas l'exécution est linéaire) :
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 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body> <script type="text/javascript"> afficheCoucou(); </script> </body> </html>
l'appel de la fonction se fait après sa déclaration (et dans ce cas l'exécution est linéaire également) :
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 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body> </body> </html>
Dans les deux derniers cas, même si le résultat est le même, le code n'est pas exécuté au même moment. ;)