From 2b7931d5d673333bd8563a4ad0a045e4f01da37c Mon Sep 17 00:00:00 2001 From: Teva Henry <35941084+TevaHenry@users.noreply.github.com> Date: Fri, 9 Oct 2020 11:20:27 +1300 Subject: [PATCH 1/4] Forms: event and method submit --- .../4-forms-submit/1-modal-dialog/solution.md | 8 ++-- .../4-forms-submit/1-modal-dialog/task.md | 26 +++++------ .../4-forms-submit/article.md | 44 +++++++++---------- 3 files changed, 38 insertions(+), 40 deletions(-) diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md index 781ce5d58..2de9ecef5 100644 --- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md +++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md @@ -1,4 +1,4 @@ -A modal window can be implemented using a half-transparent `
` that covers the whole window, like this: +Une fenêtre modale peut être implémentée en utilisant un `
` semi-transparent qui couvre toute la fenêtre, comme ceci: ```css #cover-div { @@ -13,8 +13,8 @@ A modal window can be implemented using a half-transparent `
} ``` -Because the `
` covers everything, it gets all clicks, not the page below it. +Parce que le `
` couvre tout, il obtient tous les clics, pas la page en dessous. -Also we can prevent page scroll by setting `body.style.overflowY='hidden'`. +Nous pouvons également empêcher le défilement de la page en définissant `body.style.overflowY ='hidden'`. -The form should be not in the `
`, but next to it, because we don't want it to have `opacity`. +Le formulaire ne doit pas être dans`
`, mais à côté, car nous ne voulons pas qu'il ait `opacity`. diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md index bf6841c92..0bd061fab 100644 --- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md +++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md @@ -2,23 +2,23 @@ importance: 5 --- -# Modal form +# Formulaire modal -Create a function `showPrompt(html, callback)` that shows a form with the message `html`, an input field and buttons `OK/CANCEL`. +Créez une fonction `showPrompt(html, callback)` qui montre un formulaire avec le message `html`, un champ de saisie et des boutons `OK/CANCEL`. -- A user should type something into a text field and press `key:Enter` or the OK button, then `callback(value)` is called with the value they entered. -- Otherwise if the user presses `key:Esc` or CANCEL, then `callback(null)` is called. +- Un utilisateur doit taper quelque chose dans un champ de texte et appuyer sur `key:Enter` ou sur le bouton OK, puis `callback(value)` est appelé avec la valeur saisie. +- Sinon, si l'utilisateur appuie sur `key:Esc` ou CANCEL, alors `callback(null)` est appelé. -In both cases that ends the input process and removes the form. +Dans les deux cas, cela met fin au processus de saisie et supprime le formulaire. -Requirements: +Conditions: -- The form should be in the center of the window. -- The form is *modal*. In other words, no interaction with the rest of the page is possible until the user closes it. -- When the form is shown, the focus should be inside the `` for the user. -- Keys `key:Tab`/`key:Shift+Tab` should shift the focus between form fields, don't allow it to leave for other page elements. +- Le formulaire doit être au centre de la fenêtre. +- Le formulaire est *modal*. En d'autres termes, aucune interaction avec le reste de la page n'est possible tant que l'utilisateur ne la ferme pas. +- Lorsque le formulaire est affiché, le focus doit être à l'intérieur de `` pour l'utilisateur. +- Les touches `key:Tab`/`key:Shift+Tab` devraient déplacer le focus entre les champs du formulaire, ne pas lui permettre de partir pour d'autres éléments de la page. -Usage example: +Exemple d'utilisation: ```js showPrompt("Enter something
...smart :)", function(value) { @@ -26,8 +26,8 @@ showPrompt("Enter something
...smart :)", function(value) { }); ``` -A demo in the iframe: +Une démo dans l'iframe: [iframe src="solution" height=160 border=1] -P.S. The source document has HTML/CSS for the form with fixed positioning, but it's up to you to make it modal. +P.S. Le document source contient HTML/CSS pour le formulaire avec un positionnement fixe, mais c'est à vous de le rendre modal. diff --git a/2-ui/4-forms-controls/4-forms-submit/article.md b/2-ui/4-forms-controls/4-forms-submit/article.md index c00c559c0..8e240fd9a 100644 --- a/2-ui/4-forms-controls/4-forms-submit/article.md +++ b/2-ui/4-forms-controls/4-forms-submit/article.md @@ -1,25 +1,23 @@ -# Forms: event and method submit +# Formulaires: l'événement et la méthode "submit" -The `submit` event triggers when the form is submitted, it is usually used to validate the form before sending it to the server or to abort the submission and process it in JavaScript. +L'événement `submit` se déclenche lorsque le formulaire est soumis, il est généralement utilisé pour valider le formulaire avant de l'envoyer au serveur ou pour abandonner la soumission et la traiter en JavaScript. -The method `form.submit()` allows to initiate form sending from JavaScript. We can use it to dynamically create and send our own forms to server. +La méthode `form.submit()` permet de lancer l'envoi de formulaire depuis JavaScript. Nous pouvons l'utiliser pour créer et envoyer dynamiquement nos propres formulaires au serveur. -Let's see more details of them. +Voyons-les plus en détail. -## Event: submit +## Évènement: submit -There are two main ways to submit a form: +1. Le premier - cliquer sur `` ou ``. +2. La seconde - appuyez sur `key:Enter` dans un champ de saisie. -1. The first -- to click `` or ``. -2. The second -- press `key:Enter` on an input field. +Les deux actions mènent à l'événement `submit` sur le formulaire. Le gestionnaire peut vérifier les données, et s'il y a des erreurs, les afficher et appeler `event.preventDefault()`, alors le formulaire ne sera pas envoyé au serveur. -Both actions lead to `submit` event on the form. The handler can check the data, and if there are errors, show them and call `event.preventDefault()`, then the form won't be sent to the server. +Dans le formulaire ci-dessous: +1. Allez dans le champ de texte et appuyez sur `key:Enter`. +2. Cliquez sur ``. -In the form below: -1. Go into the text field and press `key:Enter`. -2. Click ``. - -Both actions show `alert` and the form is not sent anywhere due to `return false`: +Les deux actions affichent `alert` et le formulaire n'est envoyé nulle part en raison de `return false`: ```html autorun height=60 no-beautify
@@ -28,12 +26,12 @@ Both actions show `alert` and the form is not sent anywhere due to `return false
``` -````smart header="Relation between `submit` and `click`" -When a form is sent using `key:Enter` on an input field, a `click` event triggers on the ``. +````smart header="Relation entre `submit` et `click`" +Lorsqu'un formulaire est envoyé en utilisant `key:Enter` sur un champ de saisie, un événement `click` se déclenche sur ``. -That's rather funny, because there was no click at all. +C'est plutôt drôle, car il n'y a pas eu de clic du tout. -Here's the demo: +Voici la démo: ```html autorun height=60
@@ -43,13 +41,13 @@ Here's the demo: ```` -## Method: submit +## Méthode: submit -To submit a form to the server manually, we can call `form.submit()`. +Pour soumettre manuellement un formulaire au serveur, nous pouvons appeler `form.submit()`. -Then the `submit` event is not generated. It is assumed that if the programmer calls `form.submit()`, then the script already did all related processing. +Ensuite, l'événement `submit` n'est pas généré. On suppose que si le programmeur appelle `form.submit()`, alors le script a déjà effectué tous les traitements associés. -Sometimes that's used to manually create and send a form, like this: +Parfois, cela est utilisé pour créer et envoyer manuellement un formulaire, comme ceci: ```js run let form = document.createElement('form'); @@ -58,7 +56,7 @@ form.method = 'GET'; form.innerHTML = ''; -// the form must be in the document to submit it +// le formulaire doit être dans le document pour le soumettre document.body.append(form); form.submit(); From 7694ff1a662ab700ffcb347a26c16ebbb1a087cd Mon Sep 17 00:00:00 2001 From: Teva Henry <35941084+TevaHenry@users.noreply.github.com> Date: Sat, 10 Oct 2020 23:44:33 +1300 Subject: [PATCH 2/4] Page: DOMContentLoaded, load, beforeunload, unload --- .../01-onload-ondomcontentloaded/article.md | 192 +++++++++--------- 1 file changed, 94 insertions(+), 98 deletions(-) diff --git a/2-ui/5-loading/01-onload-ondomcontentloaded/article.md b/2-ui/5-loading/01-onload-ondomcontentloaded/article.md index 3d8b98180..a42a675b8 100644 --- a/2-ui/5-loading/01-onload-ondomcontentloaded/article.md +++ b/2-ui/5-loading/01-onload-ondomcontentloaded/article.md @@ -1,39 +1,39 @@ # Page: DOMContentLoaded, load, beforeunload, unload -The lifecycle of an HTML page has three important events: +Le cycle de vie d'une page HTML comporte trois événements importants: -- `DOMContentLoaded` -- the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures `` and stylesheets may be not yet loaded. -- `load` -- not only HTML is loaded, but also all the external resources: images, styles etc. -- `beforeunload/unload` -- the user is leaving the page. +- `DOMContentLoaded` -- le navigateur a complètement chargé le HTML et l'arborescence DOM est construite, mais les ressources externes telles que les images `` et les feuilles de style peuvent ne pas être encore chargées. +- `load` -- non seulement le HTML est chargé, mais également toutes les ressources externes: images, styles, etc. +- `beforeunload/unload` -- l'utilisateur quitte la page. -Each event may be useful: +Chaque événement peut être utile: -- `DOMContentLoaded` event -- DOM is ready, so the handler can lookup DOM nodes, initialize the interface. -- `load` event -- external resources are loaded, so styles are applied, image sizes are known etc. -- `beforeunload` event -- the user is leaving: we can check if the user saved the changes and ask them whether they really want to leave. -- `unload` -- the user almost left, but we still can initiate some operations, such as sending out statistics. +- `DOMContentLoaded` événement -- DOM est prêt, le gestionnaire peut donc rechercher des nœuds DOM, initialiser l'interface. +- `load` événement -- les ressources externes sont chargées, donc les styles sont appliqués, les tailles d'image sont connues, etc. +- `beforeunload` événement -- l'utilisateur quitte: nous pouvons vérifier si l'utilisateur a enregistré les modifications et leur demander s'ils veulent vraiment partir. +- `unload` -- l'utilisateur est presque parti, mais nous pouvons toujours lancer certaines opérations, comme l'envoi de statistiques. -Let's explore the details of these events. +Explorons les détails de ces événements. ## DOMContentLoaded -The `DOMContentLoaded` event happens on the `document` object. +L'événement `DOMContentLoaded` se produit sur l'objet `document`. -We must use `addEventListener` to catch it: +Nous devons utiliser `addEventListener` pour l'attraper: ```js document.addEventListener("DOMContentLoaded", ready); -// not "document.onDOMContentLoaded = ..." +// pas "document.onDOMContentLoaded = ..." ``` -For instance: +Par exemple: ```html run height=200 refresh ``` -In the example above, we first see "Library loaded...", and then "DOM ready!" (all scripts are executed). +Dans l'exemple ci-dessus, nous voyons d'abord "Library loaded...", puis "DOM ready!" (tous les scripts sont exécutés). -```warn header="Scripts that don't block DOMContentLoaded" -There are two exceptions from this rule: -1. Scripts with the `async` attribute, that we'll cover [a bit later](info:script-async-defer), don't block `DOMContentLoaded`. -2. Scripts that are generated dynamically with `document.createElement('script')` and then added to the webpage also don't block this event. +```warn header="Les scripts qui ne bloquent pas DOMContentLoaded" +Il existe deux exceptions à cette règle: +1. Les scripts avec l'attribut `async`, que nous aborderons [un peu plus tard](info:script-async-defer), ne bloquent pas `DOMContentLoaded`. +2. Les scripts qui sont générés dynamiquement avec `document.createElement('script')` puis ajoutés à la page Web ne bloquent pas non plus cet événement. ``` -### DOMContentLoaded and styles +### DOMContentLoaded et les styles -External style sheets don't affect DOM, so `DOMContentLoaded` does not wait for them. +Les feuilles de style externes n'affectent pas le DOM, donc `DOMContentLoaded` ne les attend pas. -But there's a pitfall. If we have a script after the style, then that script must wait until the stylesheet loads: +Mais il y a une embûche. Si nous avons un script après le style, ce script doit attendre que la feuille de style se charge: ```html run ``` -The reason for this is that the script may want to get coordinates and other style-dependent properties of elements, like in the example above. Naturally, it has to wait for styles to load. +La raison en est que le script peut souhaiter obtenir des coordonnées et d'autres propriétés d'éléments dépendant du style, comme dans l'exemple ci-dessus. Naturellement, il doit attendre le chargement des styles. -As `DOMContentLoaded` waits for scripts, it now waits for styles before them as well. +Comme `DOMContentLoaded` attend les scripts, il attend maintenant les styles avant eux également. -### Built-in browser autofill +### Saisie automatique intégrée du navigateur -Firefox, Chrome and Opera autofill forms on `DOMContentLoaded`. +Firefox, Chrome et Opera remplissent automatiquement les formulairs sur `DOMContentLoaded`. -For instance, if the page has a form with login and password, and the browser remembered the values, then on `DOMContentLoaded` it may try to autofill them (if approved by the user). - -So if `DOMContentLoaded` is postponed by long-loading scripts, then autofill also awaits. You probably saw that on some sites (if you use browser autofill) -- the login/password fields don't get autofilled immediately, but there's a delay till the page fully loads. That's actually the delay until the `DOMContentLoaded` event. +Par exemple, si la page a un formulaire avec login et mot de passe, et que le navigateur se souvient des valeurs, alors sur `DOMContentLoaded`, il peut essayer de les remplir automatiquement (si approuvé par l'utilisateur). +Donc, si `DOMContentLoaded` est reporté par des scripts à chargement long, le remplissage automatique attend également. Vous l'avez probablement vu sur certains sites (si vous utilisez le remplissage automatique du navigateur) - les champs de login/mot de passe ne sont pas remplis automatiquement immédiatement, mais il y a un délai jusqu'à ce que la page se charge complètement. C'est en fait le délai jusqu'à l'événement `DOMContentLoaded`. ## window.onload [#window-onload] -The `load` event on the `window` object triggers when the whole page is loaded including styles, images and other resources. This event is available via the `onload` property. +L'événement `load` sur l'objet `window` se déclenche lorsque la page entière est chargée, y compris les styles, images et autres ressources. Cet événement est disponible via la propriété `onload`. -The example below correctly shows image sizes, because `window.onload` waits for all images: +L'exemple ci-dessous montre correctement les tailles d'image, car `window.onload` attend toutes les images: ```html run height=200 refresh @@ -127,45 +126,42 @@ The example below correctly shows image sizes, because `window.onload` waits for ## window.onunload -When a visitor leaves the page, the `unload` event triggers on `window`. We can do something there that doesn't involve a delay, like closing related popup windows. +Lorsqu'un visiteur quitte la page, l'événement `unload` se déclenche sur `window`. Nous pouvons y faire quelque chose qui n'implique pas de retard, comme la fermeture des fenêtres contextuelles associées. + +L'exception notable est l'envoi d'analyses. -The notable exception is sending analytics. +Disons que nous recueillons des données sur la façon dont la page est utilisée: clics de souris, défilements, zones de page visualisées, etc. -Let's say we gather data about how the page is used: mouse clicks, scrolls, viewed page areas, and so on. +Naturellement, l'événement `unload` est lorsque l'utilisateur nous quitte, et nous aimerions sauvegarder les données sur notre serveur. -Naturally, `unload` event is when the user leaves us, and we'd like to save the data on our server. +Il existe une méthode spéciale `navigator.sendBeacon(url, data)` pour de tels besoins, décrite dans la spécification . -There exists a special `navigator.sendBeacon(url, data)` method for such needs, described in the specification . +Il envoie les données en arrière-plan. La transition vers une autre page n'est pas retardée: le navigateur quitte la page, mais exécute toujours `sendBeacon`. -It sends the data in background. The transition to another page is not delayed: the browser leaves the page, but still performs `sendBeacon`. +Voici comment l'utiliser: -Here's how to use it: ```js -let analyticsData = { /* object with gathered data */ }; +let analyticsData = { /* objet avec des données collectées */ }; window.addEventListener("unload", function() { navigator.sendBeacon("/analytics", JSON.stringify(analyticsData)); }; ``` -- The request is sent as POST. -- We can send not only a string, but also forms and other formats, as described in the chapter , but usually it's a stringified object. -- The data is limited by 64kb. - -When the `sendBeacon` request is finished, the browser probably has already left the document, so there's no way to get server response (which is usually empty for analytics). +Lorsque la demande `sendBeacon` est terminée, le navigateur a probablement déjà quitté le document, donc il n'y a aucun moyen d'obtenir une réponse du serveur (qui est vide habituellement pour l'analyse). -There's also a `keepalive` flag for doing such "after-page-left" requests in [fetch](info:fetch) method for generic network requests. You can find more information in the chapter . +Il y a aussi un marqueur `keepalive` pour les demandes "apres sortie du document" dans [fetch](info:fetch) méthode pour les demandes de réseau génériques. Vous pouvez trouver plus d'informations dans le chapitre . -If we want to cancel the transition to another page, we can't do it here. But we can use another event -- `onbeforeunload`. +Si nous voulons annuler la transition vers une autre page, nous ne pouvons pas le faire ici. Mais nous pouvons utiliser un autre événement -- `onbeforeunload`. ## window.onbeforeunload [#window.onbeforeunload] -If a visitor initiated navigation away from the page or tries to close the window, the `beforeunload` handler asks for additional confirmation. +Si un visiteur a lancé la navigation hors de la page ou tente de fermer la fenêtre, le gestionnaire `beforeunload` demande une confirmation supplémentaire. -If we cancel the event, the browser may ask the visitor if they are sure. +Si nous annulons l'événement, le navigateur peut demander au visiteur s'il en est sûr. -You can try it by running this code and then reloading the page: +Vous pouvez l'essayer en exécutant ce code, puis en rechargeant la page: ```js run window.onbeforeunload = function() { @@ -173,9 +169,9 @@ window.onbeforeunload = function() { }; ``` -For historical reasons, returning a non-empty string also counts as canceling the event. Some time ago browsers used to show it as a message, but as the [modern specification](https://html.spec.whatwg.org/#unloading-documents) says, they shouldn't. +Pour des raisons historiques, renvoyer une chaîne non vide compte également comme une annulation de l'événement. Il y a quelque temps, les navigateurs le montraient sous forme de message, mais comme la [spécification moderne](https://html.spec.whatwg.org/#unloading-documents) le dit, ils ne devraient pas. -Here's an example: +Voici un exemple: ```js run window.onbeforeunload = function() { @@ -183,55 +179,55 @@ window.onbeforeunload = function() { }; ``` -The behavior was changed, because some webmasters abused this event handler by showing misleading and annoying messages. So right now old browsers still may show it as a message, but aside of that -- there's no way to customize the message shown to the user. +Le comportement a été modifié, car certains webmasters ont abusé de ce gestionnaire d'événements en affichant des messages trompeurs et ennuyeux. Donc, à l'heure actuelle, les anciens navigateurs peuvent toujours l'afficher sous forme de message, mais à part cela -- il n'y a aucun moyen de personnaliser le message affiché à l'utilisateur. ## readyState -What happens if we set the `DOMContentLoaded` handler after the document is loaded? +Que se passe-t-il si nous définissons le gestionnaire `DOMContentLoaded` après le chargement du document? -Naturally, it never runs. +Naturellement, il ne fonctionne jamais. -There are cases when we are not sure whether the document is ready or not. We'd like our function to execute when the DOM is loaded, be it now or later. +Il y a des cas où nous ne savons pas si le document est prêt ou non. Nous aimerions que notre fonction s'exécute lorsque le DOM est chargé, que ce soit maintenant ou plus tard. -The `document.readyState` property tells us about the current loading state. +La propriété `document.readyState` nous renseigne sur l'état de chargement actuel. -There are 3 possible values: +Il y a 3 valeurs possibles: -- `"loading"` -- the document is loading. -- `"interactive"` -- the document was fully read. -- `"complete"` -- the document was fully read and all resources (like images) are loaded too. +- `"loading"` -- le document est en cours de chargement. +- `"interactif"` -- le document a été entièrement lu. +- `"complete"` -- le document a été entièrement lu et toutes les ressources (comme les images) sont également chargées. -So we can check `document.readyState` and setup a handler or execute the code immediately if it's ready. +Nous pouvons donc vérifier `document.readyState` et configurer un gestionnaire ou exécuter le code immédiatement s'il est prêt. -Like this: +Comme ceci: ```js function work() { /*...*/ } if (document.readyState == 'loading') { - // loading yet, wait for the event + // chargement encore, attendez l'événement document.addEventListener('DOMContentLoaded', work); } else { - // DOM is ready! + // DOM est prêt! work(); } ``` -There's also the `readystatechange` event that triggers when the state changes, so we can print all these states like this: +Il y a aussi l'événement `readystatechange` qui se déclenche lorsque l'état change, nous pouvons donc afficher tous ces états comme ceci: ```js run -// current state +// état actuel console.log(document.readyState); -// print state changes +// afficher les changements d'état document.addEventListener('readystatechange', () => console.log(document.readyState)); ``` -The `readystatechange` event is an alternative mechanics of tracking the document loading state, it appeared long ago. Nowadays, it is rarely used. +L'événement `readystatechange` est un mécanisme alternatif de suivi de l'état de chargement du document, il est apparu il y a longtemps. De nos jours, il est rarement utilisé. -Let's see the full events flow for the completeness. +Voyons le flux complet des événements pour l'exhaustivité. -Here's a document with `