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

**sarrasin.drums** · 08/05/2008, 08h56

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 :

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

**julien.63** · 08/05/2008, 13h50

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 :

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

**sarrasin.drums** · 08/05/2008, 18h45

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 ?

**Sacha999** · 09/05/2008, 00h55

rien ne t'empeche de faire un

Code :

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

return [width,height];

apres tu récupere comme ca

Code :

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

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

**sarrasin.drums** · 09/05/2008, 11h42

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

En fait, je disais ceci :

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 :

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

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

**Auteur** · 09/05/2008, 12h49

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.

**sarrasin.drums** · 09/05/2008, 13h05

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 :

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

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

**Auteur** · 10/05/2008, 13h22

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 :

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

tu as écrit plus haut :

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

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

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.

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

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

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

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
 
<html>
<head>
 
<title></title>
 
<script type="text/javascript">
<!--
function afficheCoucou()
{
  alert("coucou");
}
//-->
</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 html :

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
 
<html>
<head>
 
<title></title>
 
<script type="text/javascript">
<!--
function afficheCoucou()
{
  alert("coucou");
}
 
afficheCoucou(); 
 
//-->
</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.

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

JavaScript

Discussions similaires

Partager

Partager