{"id":5680,"date":"2024-08-29T02:24:31","date_gmt":"2024-08-29T02:24:31","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/objet-screen-dans-le-bom-en-javascript-explications\/"},"modified":"2024-08-29T02:24:34","modified_gmt":"2024-08-29T02:24:34","slug":"objet-screen-dans-le-bom-en-javascript-explications","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/objet-screen-dans-le-bom-en-javascript-explications\/","title":{"rendered":"11.7 Objet Screen dans le BOM en JavaScript : Explications"},"content":{"rendered":"\n<p><strong>Les objets Screen dans le BOM en JavaScript<\/strong> sont des composants essentiels lorsqu&rsquo;il s&rsquo;agit de g\u00e9rer les propri\u00e9t\u00e9s d&rsquo;affichage et la r\u00e9solution d&rsquo;\u00e9cran dans les applications web. Apprendre \u00e0 manipuler ces objets peut vous aider \u00e0 cr\u00e9er des interfaces utilisateur plus responsive et adapt\u00e9es aux diff\u00e9rents appareils. D\u00e9couvrons ensemble le fonctionnement et l&rsquo;utilisation des objets Screen \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Objets Screen dans le BOM<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/658889714?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>L&rsquo;objet <code>screen<\/code> en JavaScript permet d&rsquo;acc\u00e9der aux informations relatives \u00e0 l&rsquo;\u00e9cran de l&rsquo;utilisateur via le Browser Object Model (BOM). Il fournit des renseignements pr\u00e9cieux tels que la largeur, la hauteur et la profondeur de l&rsquo;\u00e9cran. Comprendre ses propri\u00e9t\u00e9s et m\u00e9thodes peut aider \u00e0 am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur en adaptant le contenu selon la taille de l&rsquo;\u00e9cran.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9couvrir les Propri\u00e9t\u00e9s de l&rsquo;Objet Screen<\/h3>\n\n\n\n<p>Examinons certaines des propri\u00e9t\u00e9s essentielles de l&rsquo;objet Screen :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Largeur totale de l'\u00e9cran en pixels\nconsole.log('Largeur de l\\'\u00e9cran:', screen.width);\n\n\/\/ Hauteur totale de l'\u00e9cran en pixels\nconsole.log('Hauteur de l\\'\u00e9cran:', screen.height);\n\n\/\/ Les parties de l'\u00e9cran disponibles pour la fen\u00eatre en pixels\nconsole.log('Largeur de l\\'\u00e9cran disponible:', screen.availWidth);\nconsole.log('Hauteur de l\\'\u00e9cran disponible:', screen.availHeight);\n\n\/\/ Profondeur de la couleur de l'\u00e9cran\nconsole.log('Profondeur de la couleur:', screen.colorDepth);\n\n\/\/ Profondeur des pixels de l'\u00e9cran\nconsole.log('Profondeur des pixels:', screen.pixelDepth);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er une Fonction pour R\u00e9cup\u00e9rer les Dimensions de l&rsquo;\u00c9cran<\/h3>\n\n\n\n<p>Cr\u00e9er une fonction pour afficher les dimensions de l&rsquo;\u00e9cran dans la console :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function afficherDimensionsEcran() {\n    console.log('Largeur de l\\'\u00e9cran:', screen.width);\n    console.log('Hauteur de l\\'\u00e9cran:', screen.height);\n    console.log('Largeur disponible de l\\'\u00e9cran:', screen.availWidth);\n    console.log('Hauteur disponible de l\\'\u00e9cran:', screen.availHeight);\n    console.log('Profondeur de la couleur:', screen.colorDepth);\n    console.log('Profondeur des pixels:', screen.pixelDepth);\n}\n\n\/\/ Appeler la fonction\nafficherDimensionsEcran();\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Adapter le Layout selon les Dimensions de l&rsquo;\u00c9cran<\/h3>\n\n\n\n<p>Utiliser les dimensions de l&rsquo;\u00e9cran pour adapter le layout de votre site web :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function adapterLayout() {\n    if(screen.width <= 768) {\n        document.body.style.backgroundColor = 'lightblue';\n        console.log('Mode mobile appliqu\u00e9');\n    } else {\n        document.body.style.backgroundColor = 'lightgreen';\n        console.log('Mode bureau appliqu\u00e9');\n    }\n}\n\n\/\/ Appeler la fonction pour adapter le layout\nadapterLayout();\n\n\/\/ Vous pouvez \u00e9galement ajouter un \u00e9couteur d'\u00e9v\u00e9nement pour d\u00e9tecter les changements de taille de l'\u00e9cran\nwindow.addEventListener('resize', adapterLayout);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Avanc\u00e9e des Propri\u00e9t\u00e9s de l'objet Screen<\/h3>\n\n\n\n<p>Prenons un exemple plus avanc\u00e9 o\u00f9 nous utilisons les informations de l'\u00e9cran pour afficher des messages personnalis\u00e9s aux utilisateurs :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function afficherMessageSelonEcran() {\n    let message;\n    if (screen.width >= 1920) {\n        message = \"Vous utilisez un \u00e9cran Full HD ou plus grand!\";\n    } else if (screen.width >= 1280 && screen.width < 1920) {\n        message = \"Vous utilisez un \u00e9cran HD!\";\n    } else {\n        message = \"Vous utilisez un petit \u00e9cran!\";\n    }\n    document.getElementById('message').innerText = message;\n}\n\n\/\/ Appeler la fonction pour afficher le message adapt\u00e9\nafficherMessageSelonEcran();\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipulations Avanc\u00e9es avec l'Objet Screen<\/h3>\n\n\n\n<p>Gr\u00e2ce \u00e0 l'objet Screen, vous pouvez \u00e9galement impl\u00e9menter des fonctionnalit\u00e9s plus avanc\u00e9es, comme l'adaptation des \u00e9l\u00e9ments graphiques selon la densit\u00e9 des pixels ou l'ajustement des contenus multim\u00e9dias pour une meilleure qualit\u00e9 d'affichage.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Densit\u00e9 des Pixels et Adaptation des Images<\/h4>\n\n\n\n<p>Par exemple, vous pourriez vouloir charger des images de haute r\u00e9solution pour les \u00e9crans avec une densit\u00e9 de pixels \u00e9lev\u00e9e, afin d'offrir une exp\u00e9rience visuelle optimale :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function chargerImagesHauteResolution() {\n    if (screen.pixelDensity > 1) {\n        let images = document.querySelectorAll('img');\n        images.forEach(img => {\n            if (img.dataset.highres) {\n                img.src = img.dataset.highres;\n            }\n        });\n    }\n}\n\n\/\/ Appeler la fonction pour charger les images haute r\u00e9solution\nchargerImagesHauteResolution();\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Adaptation des Vid\u00e9os Selon l'\u00c9cran<\/h4>\n\n\n\n<p>De la m\u00eame mani\u00e8re, vous pouvez ajuster la r\u00e9solution des vid\u00e9os en fonction des dimensions de l'\u00e9cran :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function adapterVideoResolution() {\n    let videos = document.querySelectorAll('video');\n    videos.forEach(video => {\n        if (screen.width >= 1920) {\n            video.src = 'videos\/high-resolution.mp4';\n        } else if (screen.width >= 1280) {\n            video.src = 'videos\/medium-resolution.mp4';\n        } else {\n            video.src = 'videos\/low-resolution.mp4';\n        }\n    });\n}\n\n\/\/ Appeler la fonction pour adapter la r\u00e9solution des vid\u00e9os\nadapterVideoResolution();\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Sites Web R\u00e9actifs avec l'Objet Screen<\/h3>\n\n\n\n<p>Utiliser l'objet Screen dans le cadre de design de sites web r\u00e9actifs peut grandement am\u00e9liorer l'exp\u00e9rience utilisateur. Voici un exemple de comment ajuster les styles CSS en fonction de la taille de l'\u00e9cran :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function ajusterStylesCSS() {\n    if (screen.width < 600) {\n        document.body.classList.add('mobile');\n        document.body.classList.remove('desktop');\n    } else {\n        document.body.classList.add('desktop');\n        document.body.classList.remove('mobile');\n    }\n}\n\n\/\/ Appeler la fonction pour ajuster les styles CSS\najusterStylesCSS();\n\n\/\/ Ajouter un \u00e9couteur d'\u00e9v\u00e9nement pour ajuster les styles lors du redimensionnement de l'\u00e9cran\nwindow.addEventListener('resize', ajusterStylesCSS);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser l'Objet Screen pour la Gamification<\/h3>\n\n\n\n<p>En int\u00e9grant l'objet Screen dans des applications interactives comme les jeux, vous pouvez adapter les composants de jeu en fonction des dimensions de l'\u00e9cran. Ceci permet de s'assurer que les \u00e9l\u00e9ments du jeu sont correctement positionn\u00e9s et dimensionn\u00e9s sur tous les appareils.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Exemple de Jeu Adaptatif<\/h4>\n\n\n\n<p>Imaginez un jeu simple o\u00f9 la taille de l'aire de jeu d\u00e9pend des dimensions de l'\u00e9cran :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function ajusterAireDeJeu() {\n    const aireDeJeu = document.getElementById('aireDeJeu');\n    aireDeJeu.style.width = screen.availWidth + 'px';\n    aireDeJeu.style.height = screen.availHeight + 'px';\n}\n\n\/\/ Appeler la fonction pour ajuster l'aire de jeu\najusterAireDeJeu();\n\n\/\/ Ajouter un \u00e9couteur d'\u00e9v\u00e9nement pour ajuster l'aire lors du redimensionnement de l'\u00e9cran\nwindow.addEventListener('resize', ajusterAireDeJeu);\n<\/code><\/pre>\n\n\n\n<p>Pour continuer l'exploration des possibilit\u00e9s avec l'objet Screen et am\u00e9liorer votre expertise en JavaScript, vous pouvez consulter des ressources suppl\u00e9mentaires comme <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/API\/Screen\" target=\"_blank\" rel=\"noopener\">MDN Web Docs<\/a> et des cours en ligne sur <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noopener\">Udemy<\/a> ou <a href=\"https:\/\/www.pluralsight.com\/\" target=\"_blank\" rel=\"noopener\">Pluralsight<\/a>. Ces ressources offrent des tutoriels d\u00e9taill\u00e9s et des explications intuitives qui vous permettront d'approfondir vos connaissances.<\/p>\n\n\n\n<p>Pour une introduction globale \u00e0 JavaScript, vous pouvez \u00e9galement consulter notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">Qu'est-ce que JavaScript? Explications & D\u00e9finition<\/a>. Si vous d\u00e9butez avec JavaScript, il peut \u00eatre utile de comprendre les bases des <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\" target=\"_blank\" rel=\"noopener\">variables en JavaScript<\/a>.<\/p>\n\n\n\n<p>Pour ceux qui cherchent des outils pratiques, notre guide sur les <a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\" target=\"_blank\" rel=\"noopener\">meilleurs outils pour JavaScript<\/a> peut \u00eatre particuli\u00e8rement utile. Si vous travaillez souvent avec du code JavaScript, d\u00e9couvrez <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-pour-javascript-guide-complet\" target=\"_blank\" rel=\"noopener\">notre guide complet sur les extensions JavaScript<\/a>.<\/p>\n\n\n\n<p>Une fonctionnalit\u00e9 avanc\u00e9e que vous pourriez explorer est l'ajout de <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-parametres-a-une-fonction-javascript\" target=\"_blank\" rel=\"noopener\">param\u00e8tres \u00e0 une fonction JavaScript<\/a>. Pour des impl\u00e9mentations encore plus robustes, vous pouvez utiliser des <a href=\"https:\/\/wikiform.fr\/codespace\/fonctions-anonymes-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">fonctions anonymes en JavaScript<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur les objets Screen JavaScript<\/h2>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Les objets Screen dans le BOM en JavaScript sont des composants essentiels lorsqu&rsquo;il s&rsquo;agit de g\u00e9rer les propri\u00e9t\u00e9s d&rsquo;affichage et la r\u00e9solution d&rsquo;\u00e9cran dans les&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2896,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5680","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-4-javascript","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5680","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5680"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5680\/revisions"}],"predecessor-version":[{"id":5681,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5680\/revisions\/5681"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2896"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}