Translate of "Browser environment, specs" in french

2-ui/1-document/01-browser-environment/article.md

@@ -1,111 +1,111 @@
-# Browser environment, specs
+# L'environnement du navigateur, spécifications
 
-The JavaScript language was initially created for web browsers. Since then, it has evolved and become a language with many uses and platforms.
+Le langage JavaScript a été initialement créé pour les navigateurs web. Dès lors, il a évolué et est devenu un langage aux multiples utilisations et plateformes.
 
-A platform may be a browser, or a web-server, or a washing machine, or another *host*. Each of them provides platform-specific functionality. The JavaScript specification calls that a *host environment*.
+Une plateforme peut être un navigateur, un serveur web, ou une machine à laver, ou un autre *hôte*. Chacuns d'entre eux proposent des fonctionnalités spécifiques à leur plateforme. La spécification JavaScript appelle cela un *environnement hôte*.
 
-A host environment provides platform-specific objects and functions additional to the language core. Web browsers give a means to control web pages. Node.js provides server-side features, and so on.
+Un environnement hôte propose des objets et fonctions spécifiques à la plateforme en plus du noyau du langage. Les navigateurs web donnent la possibilité de contrôler les pages web. Node.js fournit des fonctionnalités côté serveur, etc.
 
-Here's a bird's-eye view of what we have when JavaScript runs in a web-browser:
+Voici une vue globale de ce que nous avons lorsque JavaScript s'exécute dans un navigateur Web :
 
 ![](windowObjects.png)
 
-There's a "root" object called `window`. It has two roles:
+Il existe un objet "racine" appelé `window`. Il a 2 rôles :
 
-1. First, it is a global object for JavaScript code, as described in the chapter <info:global-object>.
-2. Second, it represents the "browser window" and provides methods to control it.
+1. Premièrement, c'est un objet global pour le code JavaScript, comme décrit dans le chapitre <info:global-object>.
+2. Deuxièmement, il représente la "fenêtre du navigateur" et fournit des méthodes pour la contrôler.
 
-For instance, here we use it as a global object:
+Par exemple, nous l'utilisons ici comme un objet global :
 
 ```js run
 function sayHi() {
   alert("Hello");
 }
 
-// global functions are accessible as properties of window
+// les fonctions globales sont accessibles comment étant des propriétés de la fenêtre
 window.sayHi();
 ```
 
-And here we use it as a browser window, to see the window height:
+Et nous l'utilisons ici comme une fenêtre du navigateur pour voir la hauteur de la fenêtre :
 
 ```js run
-alert(window.innerHeight); // inner window height
+alert(window.innerHeight); // hauteur de la fenêtre intérieure
 ```
 
-There are more window-specific methods and properties, we'll cover them later.
+Il y a d'autres méthodes et propriétés spécifiques à la fenêtre, nous les étudierons plus tard.
 
 ## DOM (Document Object Model)
 
-The `document` object gives access to the page content. We can change or create anything on the page using it.
+l'objet `document` donne accès au contenu de la page. On peut changer ou créer n'importe quoi sur la page en l'utilisant.
 
-For instance:
+Par exemple :
 ```js run
-// change the background color to red
+// change la couleur de fond en rouge
 document.body.style.background = "red";
 
-// change it back after 1 second
+// réinitialisation après 1 seconde
 setTimeout(() => document.body.style.background = "", 1000);
 ```
 
-Here we used `document.body.style`, but there's much, much more. Properties and methods are described in the specification:
+Ici on a utilisé `document.body.style`, mais il y a bien plus encore. Les propriétés et les méthodes sont décrites dans la spécification :
 
-- **DOM Living Standard** at <https://dom.spec.whatwg.org>
+- **DOM Living Standard** à <https://dom.spec.whatwg.org>
 
-```smart header="DOM is not only for browsers"
-The DOM specification explains the structure of a document and provides objects to manipulate it. There are non-browser instruments that use it too.
+```smart header="le DOM n'est pas seulement pour les navigateurs"
+La spécification DOM décrit la structure d'un document et fournit des objets pour la manipuler. Il y a des instruments autres que des navigateurs qui l'utilisent aussi.
 
-For instance, server-side tools that download HTML pages and process them use the DOM. They may support only a part of the specification though.
+Par exemple, Les outils côté serveur qui télécharge des pages HTML et les traitent utilisent le DOM. Bien qu'ils peuvent ne supporter qu'une partie de la spécification.
 ```
 
-```smart header="CSSOM for styling"
-CSS rules and stylesheets are not structured like HTML. There's a separate specification [CSSOM](https://www.w3.org/TR/cssom-1/) that explains how they are represented as objects, and how to read and write them.
+```smart header="le CSSOM pour gérer le style"
+Les règles CSS et les feuilles de style ne sont pas structurées comme le HTML. Il y a une spécification séparée [CSSOM](https://www.w3.org/TR/cssom-1/) qui explique comment ils sont représentés comme étant des objets, et comment lire et écrire dessus.
 
-CSSOM is used together with DOM when we modify style rules for the document. In practice though, CSSOM is rarely required, because usually CSS rules are static. We rarely need to add/remove CSS rules from JavaScript, so we won't cover it right now.
+Le CSSOM est utilisé en parallèle avec le DOM lorsque l'on modifie des règles de style pour le document. Cependant, il est rarement requis en pratique car les règles CSS sont généralement statiques. Nous avons rarement besoin d'ajouter/supprimer des règles depuis JavaScript, nous n'allons donc pas nous concentrer là-dessus pour l'instant.
 ```
 
 ## BOM (Browser object model)
 
-Browser Object Model (BOM) are additional objects provided by the browser (host environment) to work with everything except the document.
+Le modèle d'objet du navigateur (BOM en anglais) contient des objets supplémentaire fourni par le navigateur (l'environnement hôte) pour travailler avec tout à l'exception du document.
 
-For instance:
+Par exemple :
 
-- The [navigator](mdn:api/Window/navigator) object provides background information about the browser and the operating system. There are many properties, but the two most widely known are: `navigator.userAgent` -- about the current browser, and `navigator.platform` -- about the platform (can help to differ between Windows/Linux/Mac etc).
-- The [location](mdn:api/Window/location) object allows us to read the current URL and can redirect the browser to a new one.
+- L'objet [navigator](mdn:api/Window/navigator) fournit des informations contextuelles à propos du navigateur et du système d'exploitation. Il y a beaucoup de propriétés mais les deux plus connues sont : `navigator.userAgent` -- qui donne des informations sur le navigateur actuel, et `navigator.platform` sur la plateforme (peut permettre de faire la différence entre Windows/Linux/Mac etc).
+- L'objet [location](mdn:api/Window/location) nous permet de lire l'URL courante et peut rediriger le navigateur vers une nouvelle adresse.
 
-Here's how we can use the `location` object:
+Voici comment l'on peut utiliser l'objet `location` :
 
 ```js run
-alert(location.href); // shows current URL
+alert(location.href); // affiche l'URL courante
 if (confirm("Go to wikipedia?")) {
-  location.href = "https://wikipedia.org"; // redirect the browser to another URL
+  location.href = "https://wikipedia.org"; // redirige le navigateur vers une autre adresse
 }
 ```
 
-Functions `alert/confirm/prompt` are also a part of BOM: they are directly not related to the document, but represent pure browser methods of communicating with the user.
+Les fonctions `alert/confirm/prompt` font aussi partie du BOM : elles ne sont pas directement liées au document, mais représentent des méthodes du navigateur de communication pure avec l'utilisateur.
 
-BOM is the part of the general [HTML specification](https://html.spec.whatwg.org).
+le BOM fait partie de la [spécification HTML](https://html.spec.whatwg.org) générale.
 
-Yes, you heard that right. The HTML spec at <https://html.spec.whatwg.org> is not only about the "HTML language" (tags, attributes), but also covers a bunch of objects, methods and browser-specific DOM extensions. That's "HTML in broad terms". Also, some parts have additional specs listed at <https://spec.whatwg.org>.
+Oui, vous avez bien entendu. La spécification HTML disponible à l'adresse <https://html.spec.whatwg.org> ne parle pas seulement du "langage HTML" (balises, attributs), mais couvre également un tas d'objets, de méthodes et d'extensions DOM spécifiques au navigateur. C'est l'"HTML de manière générale". En outre, certaines parties ont des spécifications supplémentaires listées ici : <https://spec.whatwg.org>.
 
-## Summary
+## Résumé
 
-Talking about standards, we have:
+Quand on parle de normes, nous avons :
 
-DOM specification
-: Describes the document structure, manipulations and events, see <https://dom.spec.whatwg.org>.
+La spécification DOM
+: Décrit la structure du document, ses manipulations et événements, voir <https://dom.spec.whatwg.org>.
 
-CSSOM specification
-: Describes stylesheets and style rules, manipulations with them and their binding to documents, see <https://www.w3.org/TR/cssom-1/>.
+La spécification CSSOM
+: Décrit les feuilles de style et les régles de style, les manipulations de style les impliquant et leur liaisons aux documents, voir <https://www.w3.org/TR/cssom-1/>.
 
-HTML specification
-: Describes the HTML language (e.g. tags) and also the BOM (browser object model) -- various browser functions: `setTimeout`, `alert`, `location` and so on, see <https://html.spec.whatwg.org>. It takes the DOM specification and extends it with many additional properties and methods.
+Spécification HTML
+: Décrit le langage HTML (c'est à dire les balises) mais également le BOM (modèle d'objet du navigateur) -- diverses fonctions du navigateur : `setTimeout`, `alert`, `location` etc, voir <https://html.spec.whatwg.org>. Il récupère la spécification DOM et l'étend avec de nombreuses propriétés et méthodes additionnelles.
 
-Additionally, some classes are described separately at <https://spec.whatwg.org/>.
+De plus, certaines classes sont décrites séparément sur <https://spec.whatwg.org/>.
 
-Please note these links, as there's so much stuff to learn it's impossible to cover and remember everything.
+Souvenez vous de ces liens, il y a tellement de choses à apprendre qu'il est impossible de tout couvrir et de se souvenir de tout.
 
-When you'd like to read about a property or a method, the Mozilla manual at <https://developer.mozilla.org/en-US/search> is also a nice resource, but the corresponding spec may be better: it's more complex and longer to read, but will make your fundamental knowledge sound and complete.
+Lorsque vous souhaitez en apprendre plus sur une propriété ou une méthode, le manuel de Mozilla disponible sur <https://developer.mozilla.org/en-US/search> est également une bonne ressource, mais la définition correspondance peut-être meilleure dans le sens qu'elle est plus complexe et longue à lire, mais rendra vos connaissances fondamentales saines et complètes.
 
-To find something, it's often convenient to use an internet search "WHATWG [term]" or "MDN [term]", e.g <https://google.com?q=whatwg+localstorage>, <https://google.com?q=mdn+localstorage>.
+Pour trouver quelque chose, il est souvent pratique de faire une simple recherche de "WHATWG [terme]" ou "MDN [terme]", par exemple <https://google.com?q=whatwg+localstorage>, <https://google.com?q=mdn+localstorage>.
 
-Now we'll get down to learning DOM, because the document plays the central role in the UI.
+Nous allons maintenant nous pencher sur le DOM, car le document joue un rôle essentiel dans l'interface utilisateur (UI).