Afficher la taille de l' écran

Version imprimable

2 pièce(s) jointe(s)

Bonsoir

je réalise une page qui doit afficher la taille de l ' écran du viewport

résultat final Pièce jointe 649171

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
 
 
        <h1>Size Checker</h1>
 
    <time datetime="4:57:55 p.m"></time>
<ul>
<li class="screen">Screen:</li>
<li class="outer">Window Outer:</li>
<li class="inner">Window Inner:</li>
<li class="doc">Document:</li>
</ul>
</body>

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
const temps=document.querySelector('time');
let actuel=new Date() .toLocaleString();
temps.innerHTML=actuel;
 
const screen=document.querySelector('.screen');
const outer=document.querySelector('.outer');
const inner=document.querySelector('.inner');
const doc=document.querySelector('.doc');
 
let valeur=document.createElement('span');
screen.appendChild(valeur);
valeur.innerHTML="";
let valeur2=document.createElement('span');
outer.appendChild(valeur2);
valeur.innerHTML="";
let valeur3=document.createElement('span');
outer.appendChild(valeur3);
valeur.innerHTML="";
let valeur4=document.createElement('span');
outer.appendChild(valeur4);
valeur.innerHTML="";
 
 
 
function resize(){
    let ecran=screen.width;
let largeur=window.innerWidth;
let hauteur=window.innerHeight;
let entier=document.body.clientHeight;
   valeur.innerHTML=ecran;
    valeur2.innerHTML=largeur;
     valeur3.innerHTML=hauteur;
    valeur4.innerHTML=entier;
   }
window.onresize=resize;

a priori quelques chose cloche dans mon code

Pourrais-je avoir une piste pour transcender cet aspect de problème ?
Pièce jointe 649172
Merci.

13/01/2024, 22h55
ProgElecT

Salut

Citation:

Envoyé par labarre2002

je réalise une qui doit afficher la taille de l ' écran du viewport

Citation:

Envoyé par ProgElecT

je réalise une ?????? qui doit afficher la taille de l ' écran du viewport

Des fois une relecture du postage serait la bienvenue.

salut,

screen est déjà un objet javascript donc conflit et tes span définis dynamiquement ne servent pas à grand-chose...

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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <h1>Size Checker</h1>
 
    <time datetime="4:57:55 p.m"></time>
    <ul>
        <li class="screen"></li>
        <li class="outer"></li>
        <li class="inner"></li>
        <li class="doc"></li>
    </ul>
    <script>
        const temps = document.querySelector('time');
        let actuel = new Date().toLocaleString();
        temps.innerHTML = actuel;
 
        const scr = document.querySelector('.screen');
        const outer = document.querySelector('.outer');
        const inner = document.querySelector('.inner');
        const doc = document.querySelector('.doc');
 
        function resize() {
            let ecran = screen.width;
            let largeur = window.innerWidth;
            let hauteur = window.innerHeight;
            let entier = document.body.clientHeight;
            scr.innerHTML = 'Screen:' + ecran;
            outer.innerHTML = 'Window Outer:' + largeur;
            inner.innerHTML = 'Window Inner: ' + hauteur;
            doc.innerHTML = 'Document: ' + entier;
        }
        window.addEventListener("resize", resize);
        window.addEventListener("load", resize);
    </script>
</body>
</html>

Bonjour,

bien que la réponse précédente donne une solution qui fournit une bonne réponse,
celle ci n'explique rien de l'erreur rencontrée par le PO.

En l'occurrence, le PO a simplement mal inséré ses balises span.

Dans le code suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 const screen=document.querySelector('.screen'); const outer=document.querySelector('.outer'); const inner=document.querySelector('.inner'); const doc=document.querySelector('.doc'); let valeur=document.createElement('span'); screen.appendChild(valeur); valeur.innerHTML=""; let valeur2=document.createElement('span'); outer.appendChild(valeur2); valeur.innerHTML=""; let valeur3=document.createElement('span'); outer.appendChild(valeur3); valeur.innerHTML=""; let valeur4=document.createElement('span'); outer.appendChild(valeur4); valeur.innerHTML="";
Après un peu d'indentation, et une lecture attentive, on peut constater
que les nœuds valeur3 et valeur4 sont insérés en tant
qu'enfant du nœud outer, et non des nœuds inner et doc.

C'est par ailleurs cohérent avec le résultat que le navigateur affiche:

Citation:

Window Outer:694287197

Il ne fallait pas lire 694287197 mais 694, 287, 197.

On notera par ailleurs que la propriété width d'un nœud de DOM n'existe pas,
de ce fait screen.width retourne undefined.

Sans rentrer dans le détails du calcul des dimensions d'un nœud du DOM,
on utilisera, par exemple, screen.clientWidth.

Aussi, on remarquera que l'évènement onresize n'est déclenché qu'après
le redimensionnement de la fenêtre.
Pour s'éviter de multiples manipulations, et pour déclencher l'affichage correcte
de l'IHM dès le chargement de la page, on peut, comme suggéré dans la réponse
précédente, s'abonner à l'évènement window.onload, ou simplement,
manuellement appeler la fonction resize().

Autrement, la syntaxe du javascript permet un tas de choses pour se simplifier la vie.

Ici je propose de définir une map[selecteur CSS]fonction de calcul de valeur que je pourrais
utiliser pour parcourir les éléments à initialiser ou mettre à jour.
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 const temps = document.querySelector("time"); let actuel = new Date().toLocaleString(); temps.innerHTML = actuel; const bindings = { ".screen": () => { return document.querySelector(".screen").clientWidth; }, ".outer": () => { return window.innerWidth; }, ".inner": () => { return window.innerHeight; }, ".doc": () => { return document.body.clientHeight; }, }; const applyBinding = (sel, fn) => { const el = document.querySelector(sel); if (!el) { console.error("selector not found:", sel); return; } let span = el.querySelector("span"); if (!span) { span = document.createElement("span"); el.appendChild(span); } span.innerHTML = fn(); }; const applyBindings = () => { Object.keys(bindings).forEach((sel) => { applyBinding(sel, bindings[sel]); }); }; applyBindings(); window.onresize = applyBindings;
Une fois que ceci est mis en place,
on peut aisément rajouter une entrée pour la gestion du nœud time,
par exemple :
Code:

1 2 3 4 "time": () => { const d = document.querySelector("time").getAttribute("datetime"); return (new Date(d)).toLocaleString(); }
Évidemment, il faudra définir une valeur valide pour la propriété datetime du nœud time
tel que 1995-12-17T03:24:00

Bonne journée.

15/01/2024, 17h10
labarre2002

Bonjour

merci pour vos réponses .

Bonjour,

Avec petite-vue on pourrait faire un truc comme ça :

https://github.com/vuejs/petite-vue

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
<script type="module">
import { createApp } from "https://unpkg.com/petite-vue?module";
 
function Info() {
  return {
    $template: "#infos-template",
    date: new Date(),
    screen: 0,
    outer: 0,
    inner: 0,
    document: 0,
    refresh() {
      this.screen = this.$refs.screen.clientWidth;
      this.outer = window.innerWidth;
      this.inner = window.innerHeight;
      this.document = document.body.clientHeight;
    },
    mounted() {
      window.addEventListener("resize", this.refresh);
      this.refresh();
    },
    unmounted() {
      window.removeEventListener("resize", this.refresh);
    },
  };
}
 
createApp({
  Info,
}).mount();
</script>
 
<template id="infos-template">
  <div @vue:mounted="mounted" @vue:unmounted="unmounted">
    <time datetime="{{ date }}">{{ date.toLocaleString() }}</time>
    <ul>
      <li class="screen" ref="screen">Screen: <span>{{ screen }}</span></li>
      <li class="outer">Window Outer: <span>{{ outer }}</span></li>
      <li class="inner">Window Inner: <span>{{ inner }}</span></li>
      <li class="doc">Document: <span>{{ document }}</span></li>
    </ul>
  </div>
</template>
 
<!-- reuse it -->
<div v-scope="Info()"></div>

Je me cherchais une excuse pour l'essayer.

Bonne journée.

15/01/2024, 20h14
NoSmoking
Bonjour,

Citation:

Envoyé par unanonyme

...

tes interventions sont complétement lunaires, il faut bien ce rendre compte que labarre2002 débute en JavaScript et à la lecture de ses posts qu'il a visiblement du mal à assimiler certaines notions élémentaires donc là ça va planer.

Citation:

Envoyé par labarre2002

merci pour vos réponses .

C'est gentil de ta part mais comme dit ci-dessus je ne suis pas persuadé que tu ais compris quelles étaient vraiment tes erreurs, je me trompe peut-être, je te laisse nous dire !

Une recommandation quand même essaies de nommer tes variables en leur donnant un nom qui fait sens :
Code:

1 2 3 4 // au lieu de let valeur3=document.createElement('span'); // pourrait être, un peu exagéré sur le coup ;) let elemSpanOuter = document.createElement('span');
... ceci est un exemple et pourrait t'aider à mieux te repérer et ne pas tout mélanger.

Bonjour

@NoSmoking je confirme qu au début j ' étais dans les nuages s'agissant du code je l' ai modifie de la sorte
Code:

1 2 3 4 5 6 7 8 9 10 <h1>Size Checker</h1> <time datetime="4:57:55 p.m"></time> <ul> <li >Screen: ... x ... </li> <li >Window Outer: ... x ...</li> <li >Window Inner:... x ... </li> <li >Document: ... x ... </li> </ul>
puis j ai pris en compte les remarques qui m ont été faites.mais je suis curieux que l 'on projette un faisceau de lumiere sur toutes les erreurs dans mon code précédent.

@unanonyme tes explications s ' adressent a des dev expérimentés mais merci de prendre la peine de répondre mais prend en compte le fait que tu as a faire a un débutant .

16/01/2024, 13h39
unanonyme

Bonjour,

Mettons de côté mes autres interventions pour un moment.

On vous a remarqué que

Citation:

..tes span définis dynamiquement ne servent pas à grand-chose..

Vous les avez doublés.

On vous a remarqué qu'il fallait

Citation:

nommer tes variables en leur donnant un nom qui fait sens

Vous avez mis encore plus de noms d'éléments abscons.

On vous a remarqué qu'

Citation:

une relecture du postage serait la bienvenue

On y trouve toujours autant de mots manquant.

Certes, c'est votre problème que vous présentez à travers ce thread, ce sont nos réponses,
qui s'adressent à vous, mais aussi au public plus large des personnes qui lisent ces messages.

Votre problème c'est de dupliquer du code, de vous retrouver avec tout un tas de noms de variable similaire,
que vous avez alors d'autant plus de mal à gérer car elles sont d'autant plus nombreuses qu'elles sont mal nommées,
malheureusement, comme vous semblez avoir des difficultés à entamer le processus nécessaire de rationalisation de votre code
par l'utilisation de routines simple, vous passez votre temps à buter sur les
mêmes difficultés en permanence.

Débuter l'apprentissage d'une activité c'est s'engager à y progresser, pour cela il faut sortir de sa zone de confort,
dans votre cas cette zone de confort vous dessert.

Ce n'est pas lunaire que de faire des phrases complètes pour expliquer un problème,
pas plus que de proposer des solutions légèrement plus avancées, c'est juste vous forcer la main
à vous confronter à ce qui n'est pas dans le périmètre de votre zone de confort.

Au fond, j'ai le sentiment qu'on me reproche l’outrecuidance, la folie, de croire que vous pouvez progresser.

Bonne journée.
16/01/2024, 23h21
Doonatel

Bonjour !

Je suis impressionné par votre résultat final ! La taille de l'écran du viewport est bien affichée, et les informations sont présentées de manière claire et concise.