G\u00e9rer les Exceptions en JavaScript<\/title>\n<\/head>\n\n<body>\n \n <p><strong>G\u00e9rer les Exceptions en JavaScript<\/strong> est une comp\u00e9tence essentielle pour am\u00e9liorer la robustesse et la r\u00e9activit\u00e9 des applications web. Savoir comment capturer et traiter les erreurs proprement peut non seulement pr\u00e9venir des plantages impr\u00e9vus, mais aussi offrir une meilleure exp\u00e9rience utilisateur. Voyons comment les g\u00e9rer efficacement gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n \n\n \n <h2 class=\"wp-block-heading\">Introduction \u00e0 la Gestion des Exceptions en JavaScript<\/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\/658882651?dnt=1&fullscreen=0&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 \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 \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>\n document.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>En JavaScript, les exceptions sont des probl\u00e8mes qui se produisent pendant l’ex\u00e9cution du code. Au lieu de laisser ces erreurs causer l’arr\u00eat complet de votre programme, nous allons apprendre \u00e0 capturer et traiter ces erreurs de mani\u00e8re proactive, en utilisant les blocs <code>try...catch...finally<\/code>.<\/p>\n \n\n \n <h3 class=\"wp-block-heading\">Utiliser try…catch pour Capturer les Erreurs<\/h3>\n \n\n \n <p>Le moyen le plus courant de capturer des erreurs runtime en JavaScript est d’utiliser les blocs <code>try...catch<\/code>. Ce m\u00e9canisme vous permet de tester du code dans le bloc <code>try<\/code> et d’attraper les exceptions dans le bloc <code>catch<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>try {\n \/\/ Code susceptible de provoquer une exception\n nonExistentFunction();\n} catch (error) {\n \/\/ Code ex\u00e9cut\u00e9 en cas d'exception\n console.error('Une erreur est survenue :', error);\n}\n<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Utiliser finally pour Ex\u00e9cuter du Code Ind\u00e9pendamment du R\u00e9sultat<\/h3>\n \n\n \n <p>Le bloc <code>finally<\/code> permet d’ex\u00e9cuter du code qu’une exception soit lev\u00e9e ou non. Il est souvent utilis\u00e9 pour lib\u00e9rer des ressources, fermer des connexions, ou effectuer des t\u00e2ches de nettoyage :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>try {\n \/\/ Code susceptible de provoquer une exception\n nonExistentFunction();\n} catch (error) {\n \/\/ Code ex\u00e9cut\u00e9 en cas d'exception\n console.error('Une erreur est survenue :', error);\n} finally {\n \/\/ Code qui sera toujours ex\u00e9cut\u00e9\n console.log('Le bloc finally est ex\u00e9cut\u00e9.');\n}\n<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Cr\u00e9er et Lancer des Erreurs Personnalis\u00e9es<\/h3>\n \n\n \n <p>Il est parfois n\u00e9cessaire de cr\u00e9er et de lancer des erreurs sp\u00e9cifiques \u00e0 l’application pour mieux g\u00e9rer les cas particuliers. JavaScript permet de lancer des erreurs personnalis\u00e9es \u00e0 l’aide de l’instruction <code>throw<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>function validateAge(age) {\n if (age < 0) {\n throw new Error('Age cannot be negative');\n }\n return true;\n}\n\ntry {\n validateAge(-5);\n} catch (error) {\n console.error('Error:', error.message);\n}\n<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Utiliser des Classes d'Erreur Personnalis\u00e9es<\/h3>\n \n\n \n <p>Pour des besoins avanc\u00e9s et une meilleure organisation du code, vous pouvez cr\u00e9er des classes d\u2019erreur personnalis\u00e9es en \u00e9tendant la classe native <code>Error<\/code>. Cela permet de cr\u00e9er une hi\u00e9rarchie d'erreurs sp\u00e9cifiques \u00e0 votre application :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>class NegativeAgeError extends Error {\n constructor(message) {\n super(message);\n this.name = 'NegativeAgeError';\n }\n}\n\nfunction validateAge(age) {\n if (age < 0) {\n throw new NegativeAgeError('Age cannot be negative');\n }\n return true;\n}\n\ntry {\n validateAge(-5);\n} catch (error) {\n if (error instanceof NegativeAgeError) {\n console.error('NegativeAgeError:', error.message);\n } else {\n console.error('Other Error:', error);\n }\n}\n<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Exceptions G\u00e9n\u00e9r\u00e9es par les Promesses<\/h3>\n \n\n \n <p>Avec la mont\u00e9e en puissance de l'asynchronicit\u00e9 en JavaScript, g\u00e9rer les erreurs dans les promesses est devenu crucial. Vous pouvez utiliser la m\u00e9thode <code>.catch()<\/code> pour capturer les erreurs rejet\u00e9es par les promesses :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>function asyncFunction() {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n reject(new Error('Something went wrong'));\n }, 1000);\n });\n}\n\nasyncFunction()\n .then(result => {\n console.log('Success:', result);\n })\n .catch(error => {\n console.error('Error:', error.message);\n });\n<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Utiliser async\/await pour Capturer les Erreurs<\/h3>\n \n\n \n <p>Avec les fonctions <code>async\/await<\/code>, vous pouvez g\u00e9rer les erreurs de mani\u00e8re plus synchronique et lisible. Utilisez l'instruction <code>try...catch<\/code> pour capturer les erreurs dans le contexte des fonctions asynchrones :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>async function asyncFunction() {\n throw new Error('Something went wrong');\n}\n\nasync function main() {\n try {\n const result = await asyncFunction();\n console.log('Success:', result);\n } catch (error) {\n console.error('Error:', error.message);\n }\n}\n\nmain();\n<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">D\u00e9boguer les Exceptions en JavaScript<\/h3>\n \n\n \n <p>Pour d\u00e9boguer les exceptions de mani\u00e8re plus efficace, vous pouvez utiliser des outils comme les consoles de navigateur (Chrome DevTools, Firebug, etc.) et des d\u00e9bogueurs. En ajoutant des points d'arr\u00eat et en inspectant les variables d'ex\u00e9cution, vous pouvez comprendre la source des erreurs plus rapidement.<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>function buggyFunction() {\n debugger; \/\/ Point d'arr\u00eat pour le d\u00e9bogueur\n let a = 1;\n let result = a + b; \/\/ b n'est pas d\u00e9finie\n return result;\n}\n\nbuggyFunction();\n<\/code><\/pre>\n \n\n \n <h2 class=\"wp-block-heading\">Conclusion<\/h2>\n \n\n \n <p>G\u00e9rer les <strong>Exceptions en JavaScript<\/strong> est essentiel pour cr\u00e9er des applications robustes et professionnelles. En capturant et en traitant les erreurs efficacement, vous pouvez non seulement transformer les erreurs en opportunit\u00e9s d'am\u00e9lioration, mais aussi offrir une exp\u00e9rience utilisateur plus fluide. Pour continuer \u00e0 peaufiner votre expertise en JavaScript, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-avanc%C3%A9\/143\">cours avanc\u00e9 sur JavaScript<\/a> ainsi que notre <a href=\"https:\/\/wikiform.fr\/codespace\/optimisation-de-performance-en-javascript-tutoriel\">guide sur l'optimisation de performance en JavaScript<\/a>.<\/p>\n \n\n \n \n <h3 class=\"wp-block-heading\">Liens Interne & Externe pour Approfondir<\/h3>\n \n \n \n <p><strong>G\u00e9rer Exceptions JavaScript<\/strong> de mani\u00e8re proactive implique souvent d'utiliser divers outils et bonnes pratiques. Pour ceux qui d\u00e9butent, comprendre <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\">qu'est-ce que JavaScript<\/a> est une \u00e9tape essentielle. En parall\u00e8le, l'utilisation de <a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\">logiciels pour JavaScript<\/a> facilitera grandement le processus de d\u00e9veloppement. Une fois que vous \u00eates plus \u00e0 l'aise avec le langage, explorer <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-pour-javascript-guide-complet\">les extensions pour JavaScript<\/a> vous permettra d'am\u00e9liorer votre environnement de d\u00e9veloppement.<\/p>\n \n\n \n <p>D'autres concepts fondamentaux comme <a href=\"https:\/\/wikiform.fr\/codespace\/placer-code-javascript-guide-pratique\">comment placer du code JavaScript<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-vs-code-pour-javascript\">utiliser VS Code pour JavaScript<\/a> sont aussi cruciaux pour renforcer vos capacit\u00e9s. En outre, avec la mont\u00e9e des m\u00e9thodes asynchrones en codage, apprendre \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\">utiliser le d\u00e9bogueur en JavaScript<\/a> s'av\u00e8re indispensable pour g\u00e9rer efficacement les erreurs.<\/p>\n \n\n \n <p>Il ne faut pas se limiter \u00e0 la gestion d'erreurs. Comprendre et ma\u00eetriser les concepts avanc\u00e9s tels que <a href=\"https:\/\/wikiform.fr\/codespace\/conditions-if-else-en-javascript-guide\">les conditions if...else en JavaScript<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/conditions-ternaires-en-javascript-explications\">les conditions ternaires<\/a> peut radicalement am\u00e9liorer la qualit\u00e9 de votre code et faciliter la maintenance \u00e0 long terme. L'optimisation des performances fait \u00e9galement partie int\u00e9grante de la gestion des applications robustes. Pour en savoir plus, d\u00e9couvrez notre <a href=\"https:\/\/wikiform.fr\/codespace\/optimisation-de-performance-en-javascript-tutoriel\">guide sur l'optimisation de performance en JavaScript<\/a>.<\/p>\n \n\n \n <p>Pour ceux qui souhaitent approfondir leur connaissance du JavaScript, des ressources externes comme <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Guide\" target=\"_blank\" rel=\"noopener\">le guide de JavaScript de Mozilla<\/a>, <a href=\"https:\/\/www.w3schools.com\/js\/\" target=\"_blank\" rel=\"noopener\">les tutoriels JavaScript sur W3Schools<\/a>, et <a href=\"https:\/\/www.javascript.com\/\" target=\"_blank\" rel=\"noopener\">JavaScript.com<\/a> sont excellentes pour compl\u00e9ter votre apprentissage.<\/p>\n \n \n <!-- Lien cliqu","protected":false},"excerpt":{"rendered":"<p>G\u00e9rer les Exceptions en JavaScript G\u00e9rer les Exceptions en JavaScript est une comp\u00e9tence essentielle pour am\u00e9liorer la robustesse et la r\u00e9activit\u00e9 des applications web. Savoir…<\/p>\n","protected":false},"author":3,"featured_media":2885,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5588","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\/5588","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=5588"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5588\/revisions"}],"predecessor-version":[{"id":5589,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5588\/revisions\/5589"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2885"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5588,"date":"2024-08-28T23:20:25","date_gmt":"2024-08-28T23:20:25","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/gerer-les-exceptions-en-javascript-guide\/"},"modified":"2024-08-28T23:20:28","modified_gmt":"2024-08-28T23:20:28","slug":"gerer-les-exceptions-en-javascript-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/gerer-les-exceptions-en-javascript-guide\/","title":{"rendered":"5.13 G\u00e9rer les Exceptions en JavaScript : Guide"},"content":{"rendered":"\n\n\n\n \n \n G\u00e9rer les Exceptions en JavaScript<\/title>\n<\/head>\n\n<body>\n \n <p><strong>G\u00e9rer les Exceptions en JavaScript<\/strong> est une comp\u00e9tence essentielle pour am\u00e9liorer la robustesse et la r\u00e9activit\u00e9 des applications web. Savoir comment capturer et traiter les erreurs proprement peut non seulement pr\u00e9venir des plantages impr\u00e9vus, mais aussi offrir une meilleure exp\u00e9rience utilisateur. Voyons comment les g\u00e9rer efficacement gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n \n\n \n <h2 class=\"wp-block-heading\">Introduction \u00e0 la Gestion des Exceptions en JavaScript<\/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\/658882651?dnt=1&fullscreen=0&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 \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 \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>\n document.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>En JavaScript, les exceptions sont des probl\u00e8mes qui se produisent pendant l’ex\u00e9cution du code. Au lieu de laisser ces erreurs causer l’arr\u00eat complet de votre programme, nous allons apprendre \u00e0 capturer et traiter ces erreurs de mani\u00e8re proactive, en utilisant les blocs <code>try...catch...finally<\/code>.<\/p>\n \n\n \n <h3 class=\"wp-block-heading\">Utiliser try…catch pour Capturer les Erreurs<\/h3>\n \n\n \n <p>Le moyen le plus courant de capturer des erreurs runtime en JavaScript est d’utiliser les blocs <code>try...catch<\/code>. Ce m\u00e9canisme vous permet de tester du code dans le bloc <code>try<\/code> et d’attraper les exceptions dans le bloc <code>catch<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>try {\n \/\/ Code susceptible de provoquer une exception\n nonExistentFunction();\n} catch (error) {\n \/\/ Code ex\u00e9cut\u00e9 en cas d'exception\n console.error('Une erreur est survenue :', error);\n}\n<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Utiliser finally pour Ex\u00e9cuter du Code Ind\u00e9pendamment du R\u00e9sultat<\/h3>\n \n\n \n <p>Le bloc <code>finally<\/code> permet d’ex\u00e9cuter du code qu’une exception soit lev\u00e9e ou non. Il est souvent utilis\u00e9 pour lib\u00e9rer des ressources, fermer des connexions, ou effectuer des t\u00e2ches de nettoyage :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>try {\n \/\/ Code susceptible de provoquer une exception\n nonExistentFunction();\n} catch (error) {\n \/\/ Code ex\u00e9cut\u00e9 en cas d'exception\n console.error('Une erreur est survenue :', error);\n} finally {\n \/\/ Code qui sera toujours ex\u00e9cut\u00e9\n console.log('Le bloc finally est ex\u00e9cut\u00e9.');\n}\n<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Cr\u00e9er et Lancer des Erreurs Personnalis\u00e9es<\/h3>\n \n\n \n <p>Il est parfois n\u00e9cessaire de cr\u00e9er et de lancer des erreurs sp\u00e9cifiques \u00e0 l’application pour mieux g\u00e9rer les cas particuliers. JavaScript permet de lancer des erreurs personnalis\u00e9es \u00e0 l’aide de l’instruction <code>throw<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>function validateAge(age) {\n if (age < 0) {\n throw new Error('Age cannot be negative');\n }\n return true;\n}\n\ntry {\n validateAge(-5);\n} catch (error) {\n console.error('Error:', error.message);\n}\n<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Utiliser des Classes d'Erreur Personnalis\u00e9es<\/h3>\n \n\n \n <p>Pour des besoins avanc\u00e9s et une meilleure organisation du code, vous pouvez cr\u00e9er des classes d\u2019erreur personnalis\u00e9es en \u00e9tendant la classe native <code>Error<\/code>. Cela permet de cr\u00e9er une hi\u00e9rarchie d'erreurs sp\u00e9cifiques \u00e0 votre application :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>class NegativeAgeError extends Error {\n constructor(message) {\n super(message);\n this.name = 'NegativeAgeError';\n }\n}\n\nfunction validateAge(age) {\n if (age < 0) {\n throw new NegativeAgeError('Age cannot be negative');\n }\n return true;\n}\n\ntry {\n validateAge(-5);\n} catch (error) {\n if (error instanceof NegativeAgeError) {\n console.error('NegativeAgeError:', error.message);\n } else {\n console.error('Other Error:', error);\n }\n}\n<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Exceptions G\u00e9n\u00e9r\u00e9es par les Promesses<\/h3>\n \n\n \n <p>Avec la mont\u00e9e en puissance de l'asynchronicit\u00e9 en JavaScript, g\u00e9rer les erreurs dans les promesses est devenu crucial. Vous pouvez utiliser la m\u00e9thode <code>.catch()<\/code> pour capturer les erreurs rejet\u00e9es par les promesses :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>function asyncFunction() {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n reject(new Error('Something went wrong'));\n }, 1000);\n });\n}\n\nasyncFunction()\n .then(result => {\n console.log('Success:', result);\n })\n .catch(error => {\n console.error('Error:', error.message);\n });\n<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Utiliser async\/await pour Capturer les Erreurs<\/h3>\n \n\n \n <p>Avec les fonctions <code>async\/await<\/code>, vous pouvez g\u00e9rer les erreurs de mani\u00e8re plus synchronique et lisible. Utilisez l'instruction <code>try...catch<\/code> pour capturer les erreurs dans le contexte des fonctions asynchrones :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>async function asyncFunction() {\n throw new Error('Something went wrong');\n}\n\nasync function main() {\n try {\n const result = await asyncFunction();\n console.log('Success:', result);\n } catch (error) {\n console.error('Error:', error.message);\n }\n}\n\nmain();\n<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">D\u00e9boguer les Exceptions en JavaScript<\/h3>\n \n\n \n <p>Pour d\u00e9boguer les exceptions de mani\u00e8re plus efficace, vous pouvez utiliser des outils comme les consoles de navigateur (Chrome DevTools, Firebug, etc.) et des d\u00e9bogueurs. En ajoutant des points d'arr\u00eat et en inspectant les variables d'ex\u00e9cution, vous pouvez comprendre la source des erreurs plus rapidement.<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>function buggyFunction() {\n debugger; \/\/ Point d'arr\u00eat pour le d\u00e9bogueur\n let a = 1;\n let result = a + b; \/\/ b n'est pas d\u00e9finie\n return result;\n}\n\nbuggyFunction();\n<\/code><\/pre>\n \n\n \n <h2 class=\"wp-block-heading\">Conclusion<\/h2>\n \n\n \n <p>G\u00e9rer les <strong>Exceptions en JavaScript<\/strong> est essentiel pour cr\u00e9er des applications robustes et professionnelles. En capturant et en traitant les erreurs efficacement, vous pouvez non seulement transformer les erreurs en opportunit\u00e9s d'am\u00e9lioration, mais aussi offrir une exp\u00e9rience utilisateur plus fluide. Pour continuer \u00e0 peaufiner votre expertise en JavaScript, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-avanc%C3%A9\/143\">cours avanc\u00e9 sur JavaScript<\/a> ainsi que notre <a href=\"https:\/\/wikiform.fr\/codespace\/optimisation-de-performance-en-javascript-tutoriel\">guide sur l'optimisation de performance en JavaScript<\/a>.<\/p>\n \n\n \n \n <h3 class=\"wp-block-heading\">Liens Interne & Externe pour Approfondir<\/h3>\n \n \n \n <p><strong>G\u00e9rer Exceptions JavaScript<\/strong> de mani\u00e8re proactive implique souvent d'utiliser divers outils et bonnes pratiques. Pour ceux qui d\u00e9butent, comprendre <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\">qu'est-ce que JavaScript<\/a> est une \u00e9tape essentielle. En parall\u00e8le, l'utilisation de <a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\">logiciels pour JavaScript<\/a> facilitera grandement le processus de d\u00e9veloppement. Une fois que vous \u00eates plus \u00e0 l'aise avec le langage, explorer <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-pour-javascript-guide-complet\">les extensions pour JavaScript<\/a> vous permettra d'am\u00e9liorer votre environnement de d\u00e9veloppement.<\/p>\n \n\n \n <p>D'autres concepts fondamentaux comme <a href=\"https:\/\/wikiform.fr\/codespace\/placer-code-javascript-guide-pratique\">comment placer du code JavaScript<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-vs-code-pour-javascript\">utiliser VS Code pour JavaScript<\/a> sont aussi cruciaux pour renforcer vos capacit\u00e9s. En outre, avec la mont\u00e9e des m\u00e9thodes asynchrones en codage, apprendre \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\">utiliser le d\u00e9bogueur en JavaScript<\/a> s'av\u00e8re indispensable pour g\u00e9rer efficacement les erreurs.<\/p>\n \n\n \n <p>Il ne faut pas se limiter \u00e0 la gestion d'erreurs. Comprendre et ma\u00eetriser les concepts avanc\u00e9s tels que <a href=\"https:\/\/wikiform.fr\/codespace\/conditions-if-else-en-javascript-guide\">les conditions if...else en JavaScript<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/conditions-ternaires-en-javascript-explications\">les conditions ternaires<\/a> peut radicalement am\u00e9liorer la qualit\u00e9 de votre code et faciliter la maintenance \u00e0 long terme. L'optimisation des performances fait \u00e9galement partie int\u00e9grante de la gestion des applications robustes. Pour en savoir plus, d\u00e9couvrez notre <a href=\"https:\/\/wikiform.fr\/codespace\/optimisation-de-performance-en-javascript-tutoriel\">guide sur l'optimisation de performance en JavaScript<\/a>.<\/p>\n \n\n \n <p>Pour ceux qui souhaitent approfondir leur connaissance du JavaScript, des ressources externes comme <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Guide\" target=\"_blank\" rel=\"noopener\">le guide de JavaScript de Mozilla<\/a>, <a href=\"https:\/\/www.w3schools.com\/js\/\" target=\"_blank\" rel=\"noopener\">les tutoriels JavaScript sur W3Schools<\/a>, et <a href=\"https:\/\/www.javascript.com\/\" target=\"_blank\" rel=\"noopener\">JavaScript.com<\/a> sont excellentes pour compl\u00e9ter votre apprentissage.<\/p>\n \n \n <!-- Lien cliqu","protected":false},"excerpt":{"rendered":"<p>G\u00e9rer les Exceptions en JavaScript G\u00e9rer les Exceptions en JavaScript est une comp\u00e9tence essentielle pour am\u00e9liorer la robustesse et la r\u00e9activit\u00e9 des applications web. Savoir…<\/p>\n","protected":false},"author":3,"featured_media":2885,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5588","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\/5588","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=5588"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5588\/revisions"}],"predecessor-version":[{"id":5589,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5588\/revisions\/5589"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2885"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}